vue2-elm学习记录（Day8）

头像
zs_staria
    阅读 9 分钟
    1

    实现列表筛选：

    image.png
    需要在筛选页面引入商铺列表组件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发生改变的情况:
    点击绿色框框中的某一项具体分类。
    image.png
    (2)sortByType发生改变的情况：
    点击排序下拉列表，展开选项中的某一项
    image.png
    (3)confirmSelect发生改变的情况：
    点击"确认"按钮
    image.png

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

    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值
    image.png
    (2)restaurant_category_ids：筛选类型id,绿色框框中某一项的id值
    image.png
    (3)sortByType：排序方式，点击排序下拉列表，展开选项中的某一项
    image.png
    (4)delivery_mode:选中的配送方式，"筛选"框框里的配送方式：
    image.png
    (5)confirmStatus:确认选择,"筛选"下拉框框里的确认按钮:
    image.png
    (6)support_ids:"筛选"下拉框框里,"商家属性"中的某一项
    image.png

        <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>

    "商铺"详情页面：

    image.png

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

    image.png

    <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部分

    image.png

    <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的数据结构：
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    原文链接：地址

    vue.js
    zs_staria
    36 声望12 粉丝

    月光啊，闪爆他们~ ~

    « 上一篇
    vue2-elm学习记录（Day7）
    下一篇 »
    vue2-elm学习记录（Day9）

    引用和评论

    推荐阅读
    头像
    记录一下最近uni-app的学习（一）

    zs_staria赞 2阅读 6.2k评论 1

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 1.9k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.4k评论 1

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 3阅读 4.9k

    头像
    7天撸完KTV点歌系统,含后台管理系统(完整版)

    大卫talk赞 2阅读 7.4k

    头像
    vue3使用百度地图

    兔子先森赞 1阅读 1.4k

    头像
    彻底搞懂面包屑，手把手封装一个 Vue3 面包屑导航组件

    十五阅读 3.5k

    0 条评论
    得票最新