饿了么商家筛选排序(二)"/>
vue3实现饿了么商家筛选排序(二)
前言
- Vue3实现饿了么短信验证和高德定位(一)
- Vue3实现饿了么商家筛选排序(二)
- 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实现饿了么商家筛选排序(二)
发布评论