vue2-elm学习记录(Day8)

实现列表筛选:

需要在筛选页面引入商铺列表组件shopList.vue;

shoplist组件:

export default{
    data(){
        return{
            //批次加载店铺列表,每次加载20个 limit-20
            offset:0,
            //店铺列表数据
            shopListArr:[],
            //初始状态加载动画
            showLoading:true
        }
    },
    //传递参数
    props:[
        //食品类型id
        "restaurantCategoryId",
        //筛选类型的id
        "restaurantCategoryIds",
        //"排序方式"
        "sortByType",
        //配送方式
        "deliveryMode",
        //商铺的活动列表
        "supportIds",
        //确认选择
        "confirmSelect",
        //city页面传递过来的地址
        "geohash"
    ],
    methods:{
        //监听父组件传来的数据发生变化时,触发此函数重新根据属性值获取数据
        async listenPropChange(){
            //初始状态加载动画
            this.showLoading=true;
            //批次加载店铺列表
            this.offset=0;
            let res=await shopList(
                this.latitude,
                this.longitude,
                this.offset,
                "",
                //food页面传递过来的筛选类型的id
                this.restaurantCategoryIds,
                //food页面传递过来的筛选方式(分类/排序/筛选三项中的某一项)
                this.sortByType,
                //food页面传递过来的配送方式
                this.deliveryMode,
                //food页面传递过来的商家支持的活动(品牌商家/新店/在线支付等等)
                this.supportIds 
            );
            this.hideLoading();
            //考虑本地模拟数据是引用类型,所以返回一个新的数组
            this.shopListArr=[...res];
        }
    
    },
    watch:{
        //监听父级传来的restaurantCategoryIds,当值发生变化时重新获取餐馆数据,用于排序和筛选
        restaurantCategoryIds:function(value){
            this.listenPropChange();
        },
        //监听父级传来的排序方式
        sortByType:function(value){
            this.listenPropChange();
        },
        //监听父级的确认按钮是否被点击,并且返回一个自定义事件通知父级,已经收到数据,此时父级才可以清除已选状态
        confirmSelect:function(value){
            this.listenPropChange();
        }
    
    }

}

说明:

(1)restaurantCategoryIds发生改变的情况:

点击绿色框框中的某一项具体分类。

(2)sortByType发生改变的情况:

点击排序下拉列表,展开选项中的某一项

(3)confirmSelect发生改变的情况:

点击"确认"按钮

即:在筛选/排序时,需要重新获取数据

food组件:

//引入
import shopList from "../../components/common/shoplist";
export default{
    data(){
        return{
            ...
            //食品类型id:
            restaurant_category_id:"",
            //筛选类型id:
            restaurant_category_ids:"",
            //根据何种方式进行"排序"
            sortByType:null,
            //选中的配送方式
            delivery_mode:null,
            //确认选择:
            confirmStatus:false,
            //选中商铺的活动列表
            support_ids:[],
        }
    },
    components:{
        shopList
    }

}

说明:

(1)restaurant_category_id:食品类型id,橙色框框中某一项的id值

(2)restaurant_category_ids:筛选类型id,绿色框框中某一项的id值

(3)sortByType:排序方式,点击排序下拉列表,展开选项中的某一项

(4)delivery_mode:选中的配送方式,"筛选"框框里的配送方式:

(5)confirmStatus:确认选择,"筛选"下拉框框里的确认按钮:

(6)support_ids:"筛选"下拉框框里,"商家属性"中的某一项

<section class="shop_list_container">
        <shop-list :geohash="geohash"
                   :restaurantCategoryId="restaurant_category_id",
                   :restaurantCategoryIds="restaurant_category_ids",
                   :sortByType="sortByType",
                   :deliveryMode="delivery_mode",
                   :confirmSelect="confirmStatus",
                   :supportIds="support_ids",
                    v-if="latitude">
        </shop-list>
    </section>

"商铺"详情页面:

实现一:初始状态,显示加载动画和默认图

<template>
    <div>
        <!--showLoading为false的时候显示"内容"区域-->
        <section v-if="!showLoading" class="shop_container">
        
        </section>
        <!--showLoading值为true或者需要加载更多评论时显示加载组件loadRating为true,
            需要引入loading组件-->
        <loading v-show="showLoading||loadingRating"></loading>
        <!--和加载动画同时存在的默认背景图-->
        <section class="animation_opactiy shop_back_svg_container" v-if="showLoading">
            <img src="../../images/shop_back_svg.svg">
        </section>
    </div>
</template>

JS:部分

//引入加载动画组件
import loading from "../../components/common/loading";
export default{
    data(){
        return{
            //显示加载动画
            showLoading:true,
            //加载更多评论时显示加载组件
            loadRatings:false
        };
    },
    components:{
        loading
    },
    methods:{
        //初始化
        async initData(){
            //获取数据
            ...
            //页面数据加载完成之后执行隐藏动画
            this.hideLoading();
        },
        //隐藏动画
        hideLoading(){
            this.showLoading=false;
        }
    
    }

}

实现二:店铺详情页header部分

<section v-if="!showLoading" class="shop_container">
    <!--返回图标 s点击时执行返回上一个页面的操作-->
    <nav class="goback" @click="goback">
        <svg width="4rem" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:3"/>
         </svg>
    </nav>
    <!--返回图标 e-->
    <!--header s-->
    <header class="shop_detail_header" :style="{zIndex:showActivities?'14':'10'}">
        <!--店铺背景图片 s-->
        <div class="header_cover_img_con">
            <img :src="imgBaseUrl + shopDetailData.image_path" class="header_cover_img" />
        </div>
        <!--店铺背景图片 e-->
        <!--店铺描述信息 s-->
        <section class="description_header">
            <router-link to class="description_top">
                <!--左侧店铺图片 s-->
                <section class="description_left">
                    <img :src="imgBaseUrl + shopDetailData.image_path" />
                </section>
                <!--左侧店铺图片 e-->
                <!--右侧店铺信息 s-->
                <section class="description_right">
                    <!--标题-->
                    <h4 class="description_title ellipsis">{{shopDetailData.name}}</h4>
                    <p class="description_text">
                        商家配送/{{shopDetailData.order_lead_time}}分钟送达/配送费¥{{shopDetailData.float_delivery_fee}}
                     </p>
                    <p class="description_promotion ellipsis">
                        公告:{{promotionInfo}}
                    </p>
                </section>
                <!--右侧店铺信息 e-->
                <!--绘制右侧箭头 s-->
                <svg
                    width="14"
                    height="14"
                    xmlns="http://www.w3.org/2000/svg"
                    version="1.1"
                    class="description_arrow"
                >
                    <path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none" />
                </svg>
                <!--绘制右侧箭头 e-->
            </router-link>
        </section>
        <!--店铺描述信息 e-->
    </header>
    <!--header e-->

</section>

JS部分:

//拿到latitude和longitude
import { mapState, mapMutations } from "vuex";
//加载动画组件
import loading from "../../components/common/loading";
//默认图片路径
import { imgBaseUrl } from "../../../src/config/env";
//引入获取商铺详情信息的方法
import {shopDetails} from "../../../src/service/getData"; 
export default{
    data(){
       return{
         //显示加载动画
          showLoading: true,
          //加载更多评论时显示加载组件
          loadRatings: false,
          //是否显示活动详情
          showActivities: false,
          //默认图片路径
          imgBaseUrl,
          //商铺详情数据
          shopDetailData: null,
          //商店id值
          shopId: null
       } 
    
    },
    mounted(){
        this.initData();
    },
    components:{
        loading
    },
    computed:{
        ...mapState(["latitude","longitude"]),
        //公告信息
        promotionInfo:function(){
            return {
                this.shopDetailData.promotion_info ||
                "欢迎光临,用餐高峰期请提前下单,谢谢。(^o^)/~"
            }
        }
    },
    methods:{
        //初始化
        async initData(){
            //获取商铺信息,传入参数店铺id,经度信息,纬度信息
            this.shopDetailData=await shopDetails(
                this.shopId,
                this.latitude,
                this.longitude
            );
            this.hideLoading();
        },
        //隐藏动画
        hideLoading(){
            this.showLoading=false;
        },
        //返回上一个页面
        goback(){
            this.$router.go(-1);
        },
        //控制活动页面的显示隐藏
        showActivitiesFun(){
            this.showActivities=!showActivities;
        }
    
    }

}

说明:

(1)this.shopDetailData的数据结构:

原文链接: 地址

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章