vue3实现饿了么商家筛选排序

效果展示

①完善了首页的内容，增加了广告轮播图、推荐美食栏和商家列表展示

②对商家不同的排序方式、筛选商家

③搜索关键词

具体实现

广告轮播图与美食推荐
这里引入了饿了么提供的mint-ui

import { Swipe, SwipeItem} from 'mint-ui';

mint-ui提供了多种样式的轮播图，这里用了每4s自动滑动和手动滑动的轮播图

<!-- 广告轮播图 -->
      <mt-swipe :auto="4000" class="swiper">
        <mt-swipe-item v-for="(img,index) in swipeImgs" :key="index"></mt-swipe-item>
        <mt-swipe-item>...</mt-swipe-item>
        ...	
      </mt-swipe>
<!-- 美食推荐 -->
      <mt-swipe :auto="0" class="entries">
        <mt-swipe-item v-for="(entry,i) in entries" :key="i" class="entry_wrap"></mt-swipe-item>
         <mt-swipe-item>...</mt-swipe-item>
         ...
      </mt-swipe>

筛选排序条件
这里用了switch的方法，以index作为key值。

switch(index){
   case 0:
     this.isSort = true;
     this.$emit("searchFixed",true); 
     break;
   case 1:
     this.$emit("update",{condition:this.filterData.navTab[1].condition});            
     this.hideView();
     break;
   case 2:
     this.$emit("update",{condition:this.filterData.navTab[2].condition});            
     this.hideView();              
     break;
   case 3:
     this.isScreen = true;
     this.isSort = false;
     this.$emit("searchFixed",true); 
     break;
   default:
     this.hideView();
     break;
}

每一种排序或筛选的方式包含有一个condition，利用update将condition传给this.data，再传参给拉取商家信息的axios请求，实现点击每个条件均能按condition重新加载一次商家信息

update(condition) {
      // console.log(condition);
      this.data = condition;
      this.loadData(); 
    }

//拉取商家信息
this.$axios.post(`/api/profile/restaurants/${this.page}/${this.size}`,this.data)
	.then(res =>{
          //
    })

搜索关键字
用keyword绑定输入的关键字,用keyword()监听并调用keyWordChange方法

watch:{
        keyword(){
            this.keyWordChange();
        }
    },

将keyword关键字传入axios请求

keyWordChange(){          this.$axios(`/api/profile/typeahead/${this.keyword}`)
            .then(res =>{
                this.result = res.data;
                console.log(this.result);
            })
            .catch(err =>{
                this.result = null;
            })

        },

vue3实现饿了么商家筛选排序

猜你喜欢