品类页面，产品筛选搜索展示页面开发；网络异步请求拦截器

components/multi-level-nav/vertical-nav.vue

@@ -49,6 +49,10 @@
 			containerHeight: {
 				type: String,
 				default: '100vh'
+			},
+			isClick2ShowProducts: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {

main.js

@@ -12,9 +12,7 @@ Vue.component('confirm-modal', ConfirmModal);
 const data = type => {
 	//模拟异步请求数据
 	return new Promise(resolve => {
-		setTimeout(() => {
 		resolve(Data[type]);
-		}, 0)
 	})
 }
 Vue.prototype.$api = {
@@ -23,6 +21,25 @@ Vue.prototype.$api = {
 Vue.prototype.$globalFun = globalFun;
 Vue.prototype.$validate = validate;
 
+// 异步接口拦截
+uni.addInterceptor('request', {
+	invoke(args) {
+		// request 触发前拼接 url 
+		args.url = 'http://127.0.0.1:80' + args.url;
+		console.log("停止触发");
+		return false;
+	},
+	success(args) {
+		console.log('interceptor-success', args);
+	},
+	fail(err) {
+		console.log('interceptor-fail', err)
+	},
+	complete(res) {
+		console.log('interceptor-complete', res)
+	}
+})
+
 Vue.config.productionTip = false
 
 App.mpType = 'app'

pages.json

@@ -16,6 +16,10 @@
 			"path": "product-pick"
 		}, {
 			"path": "shop-detail"
+		}, {
+			"path": "product-category"
+		}, {
+			"path": "filtered-products"
 		}]
 	}, {
 		"root": "pages/my/",

pages/index/home.vue

@@ -24,7 +24,7 @@
 		<view class="margin-lr-sm margin-bottom-with-bar">
 			<!-- 大类 -->
 			<view class="flex justify-between text-black">
-				<view class="padding text-lg">
+				<view class="padding text-lg" @click="showProductCategories">
 					<text>分类</text>
 					<text class="cuIcon-apps text-main-color"></text>
 					<text class="cuIcon-triangledownfill"></text>
@@ -133,6 +133,11 @@
 				uni.navigateTo({
 					url: '../product/product-detail'
 				});
+			},
+			showProductCategories() {
+				uni.navigateTo({
+					url: '/pages/product/product-category'
+				})
 			}
 		}
 	}

pages/product/filtered-products.vue

@@ -0,0 +1,145 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true" :isBackHome="true" :homePageUrl="'/pages/index/index'">
+			<block slot="content">产品列表</block>
+		</cu-custom>
+		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
+			<!-- 搜索栏 -->
+			<view class="cu-bar search bg-white">
+				<view class="search-form round">
+					<text class="cuIcon-search"></text>
+					<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
+						confirm-type="search"></input>
+				</view>
+			</view>
+			<!-- 条件筛选栏 -->
+			<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
+				:scroll-left="scrollLeft">
+				<view class="cu-item" v-for="(item,index) in taskConditions" v-if="item.type !== 1" :key="index"
+					@tap="tabSelect" :data-id="index">
+					<!-- 区域筛选picker -->
+					<picker v-if="item.code === 'area'" :mode="'multiSelector'" @change="regionChange"
+						:value="areaMultiIndex" :range-key="'name'" :range="areaList">
+						{{item.title}}
+						<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
+					</picker>
+					<!-- 品类筛选picker -->
+					<picker v-else-if="item.code === 'category'" :mode="'multiSelector'" @change="categoryChange"
+						:value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
+						{{item.title}}
+						<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
+					</picker>
+					<text v-else>
+						{{item.title}}
+						<text v-if="item.type === 0" class="text-lg"><text
+								:class="item.value === 0 ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text></text>
+						<text v-else class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
+					</text>
+				</view>
+				<view class="cu-item" v-else>
+					<button class="cu-btn bg-grey round shadow-blur">{{item.title}}</button>
+				</view>
+			</scroll-view>
+		</view>
+		<!-- 产品列表 -->
+		<view class="padding bg-white solid-top">
+			<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
+				v-for="(item, index) in productList">
+				<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
+
+	export default {
+		components: {
+			horizontalGoodsCard
+		},
+		data() {
+			return {
+				productList: [],
+				stickyTop: this.CustomBar,
+				// type: 0=升降序，1=功能按钮；order: 0=升序，1=降序；
+				tabCur: 0,
+				scrollLeft: 0,
+				taskConditions: [{
+					code: 'area',
+					title: '区域'
+				}, {
+					code: 'category',
+					title: '品类'
+				}, {
+					code: 'distance',
+					title: '距离',
+					type: 0,
+					value: 0,
+				}, {
+					code: 'time',
+					title: '时间',
+					type: 0,
+					value: 0,
+				}, {
+					code: 'reset',
+					type: 1,
+					title: '重置'
+				}],
+				areaList: [],
+				areaMultiIndex: [0, 0, 0],
+				categoryList: [],
+				categoryMultiIndex: [0, 0, 0]
+			}
+		},
+		onLoad(options) {
+			let params = JSON.parse(decodeURIComponent(options.params));
+			this.loadData(params);
+		},
+		methods: {
+			async loadData(params) {
+				let shopInfo = await this.$api.data('shopInfo');
+				this.productList = shopInfo.productList;
+			},
+			searchGoods(e) {
+				console.log("搜索" + e.detail.value)
+			},
+			tabSelect(e) {
+				this.tabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
+				let conditionType = this.taskConditions[this.tabCur].type;
+				let conditionCode = this.taskConditions[this.tabCur].code;
+				if (conditionType === 0) {
+					// 升降序类型的条件切换升降序
+					let orderVal = this.taskConditions[this.tabCur].value;
+					this.taskConditions[this.tabCur].value = orderVal === 0 ? 1 : 0;
+				}
+			},
+			showDetails(productItem) {
+				uni.navigateTo({
+					url: '../product/product-detail?productId=' + productItem.id
+				});
+			},
+			regionChange(e) {
+				this.areaMultiIndex = e.detail.value;
+				let chosenArea = [];
+				for(let i = 0; i < this.areaList.length; i++) {
+					chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
+				}
+				this.taskConditions[this.tabCur].value = chosenArea;
+			},
+			categoryChange(e) {
+				this.categoryMultiIndex = e.detail.value;
+				let chosenCategory = [];
+				for(let i = 0; i < this.categoryList.length; i++) {
+					chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
+				}
+				this.taskConditions[this.tabCur].value = chosenCategory;
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/product/product-category.vue

@@ -0,0 +1,64 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">产品分类</block>
+		</cu-custom>
+		<vertical-nav :containerHeight="containerHeight" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
+	</view>
+</template>
+
+<script>
+	import verticalNav from '@/components/multi-level-nav/vertical-nav.vue';
+	
+	export default {
+		components: {
+			verticalNav
+		},
+		data() {
+			return {
+				containerHeight: '100vh - ' + this.CustomBar + 'px',
+				categoryList: []
+			}
+		},
+		onLoad() {
+			this.loadData();
+			this.bindEvent();
+		},
+		onUnload() {
+			this.offBindEvent();
+		},
+		methods: {
+			async loadData() {
+				// this.categoryList = await this.$api.data('categoryList');
+				this.categoryList = await uni.request({
+					url: '/goods/category/list',
+					method: 'POST'
+				})
+			},
+			bindEvent() {
+				uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chooseSubType);
+				uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchType);
+			},
+			offBindEvent() {
+				uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
+				uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
+			},
+			chooseSubType(item) {
+				let params = {
+					type: 1
+				}
+				uni.navigateTo({
+					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
+				})
+			},
+			searchType(keyWords) {
+				console.log("搜索" + keyWords)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>