From d54251e6e3c6b91b01ce7df49cbcc7fdb0754aad Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Mon, 9 May 2022 23:11:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=B1=BB=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E7=AD=9B=E9=80=89=E6=90=9C=E7=B4=A2=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=EF=BC=9B=E7=BD=91?=
 =?UTF-8?q?=E7=BB=9C=E5=BC=82=E6=AD=A5=E8=AF=B7=E6=B1=82=E6=8B=A6=E6=88=AA?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/multi-level-nav/vertical-nav.vue |   4 +
 main.js                                     |  35 +++--
 pages.json                                  |   4 +
 pages/index/home.vue                        |   7 +-
 pages/product/filtered-products.vue         | 145 ++++++++++++++++++++
 pages/product/product-category.vue          |  64 +++++++++
 6 files changed, 249 insertions(+), 10 deletions(-)
 create mode 100644 pages/product/filtered-products.vue
 create mode 100644 pages/product/product-category.vue

diff --git a/components/multi-level-nav/vertical-nav.vue b/components/multi-level-nav/vertical-nav.vue
index 86d7bfe..c1bded9 100644
--- a/components/multi-level-nav/vertical-nav.vue
+++ b/components/multi-level-nav/vertical-nav.vue
@@ -49,6 +49,10 @@
 			containerHeight: {
 				type: String,
 				default: '100vh'
+			},
+			isClick2ShowProducts: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
diff --git a/main.js b/main.js
index f66a7a0..402353b 100644
--- a/main.js
+++ b/main.js
@@ -1,27 +1,44 @@
 // #ifndef VUE3
 import Vue from 'vue';
 import App from './App';
-import CuCustom from 'colorui/components/cu-custom.vue';
+import CuCustom from 'colorui/components/cu-custom.vue';
 import ConfirmModal from '@/components/modal/confirm-modal.vue';
-import Data from './common/js/data.js';
-import globalFun from './common/js/glogalFun.js';
+import Data from './common/js/data.js';
+import globalFun from './common/js/glogalFun.js';
 import validate from './common/js/validate.js';
 
-Vue.component('cu-custom', CuCustom)
+Vue.component('cu-custom', CuCustom)
 Vue.component('confirm-modal', ConfirmModal);
 const data = type => {
 	//模拟异步请求数据
 	return new Promise(resolve => {
-		setTimeout(() => {
-			resolve(Data[type]);
-		}, 0)
+		resolve(Data[type]);
 	})
 }
 Vue.prototype.$api = {
 	data
 }
-Vue.prototype.$globalFun = globalFun;
-Vue.prototype.$validate = validate;
+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
 
diff --git a/pages.json b/pages.json
index 9c5a2b4..dc0d097 100644
--- a/pages.json
+++ b/pages.json
@@ -16,6 +16,10 @@
 			"path": "product-pick"
 		}, {
 			"path": "shop-detail"
+		}, {
+			"path": "product-category"
+		}, {
+			"path": "filtered-products"
 		}]
 	}, {
 		"root": "pages/my/",
diff --git a/pages/index/home.vue b/pages/index/home.vue
index 2cb0a29..682bff5 100644
--- a/pages/index/home.vue
+++ b/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'
+				})
 			}
 		}
 	}
diff --git a/pages/product/filtered-products.vue b/pages/product/filtered-products.vue
new file mode 100644
index 0000000..584055a
--- /dev/null
+++ b/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>
diff --git a/pages/product/product-category.vue b/pages/product/product-category.vue
new file mode 100644
index 0000000..6e18a32
--- /dev/null
+++ b/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>