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

饿了么商家筛选排序（二）"/>

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

前言

1. Vue3实现饿了么短信验证和高德定位（一）
2. Vue3实现饿了么商家筛选排序（二）
3. 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;})},