From 87bce27bd3c0e635387d462ff8311f29007a7cd9 Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Sat, 25 Jun 2022 17:31:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=88=E5=82=85=E5=9C=88=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/data.js                             |   2 +-
 common/js/request.js                          |  21 +-
 .../common-card/horizontal-name-card.vue      |   4 +-
 components/custom-bar/load-status-bar.vue     |   2 +-
 components/default-toast/bg-toast.vue         |  32 ++
 pages/index/index.vue                         |   9 +-
 pages/index/msg-home.vue                      |   1 +
 pages/index/worker-home.vue                   | 335 ++++++++++++++----
 pages/product/shop-detail.vue                 | 212 +++++++++--
 9 files changed, 499 insertions(+), 119 deletions(-)
 create mode 100644 components/default-toast/bg-toast.vue

diff --git a/common/js/data.js b/common/js/data.js
index 2dec41f..b3655d9 100644
--- a/common/js/data.js
+++ b/common/js/data.js
@@ -156,7 +156,7 @@ const moduleBarInfos = [{
 	cuIcon: 'message',
 	pageCode: 'msgPage',
 	name: '消息',
-	countTag: 100
+	// countTag: 100
 }, {
 	id: 5,
 	cuIcon: 'my',
diff --git a/common/js/request.js b/common/js/request.js
index e9c7772..eced635 100644
--- a/common/js/request.js
+++ b/common/js/request.js
@@ -10,9 +10,9 @@ export default {
 					title: '加载中'
 				})
 				// request 触发前拼接 url 
-				args.url = 'https://www.opsoul.com' + args.url;
+				// args.url = 'https://www.opsoul.com' + args.url;
 				// args.url = 'http://192.168.2.42:80' + args.url;
-				// args.url = 'http://127.0.0.1:80' + args.url;
+				args.url = 'http://127.0.0.1:80' + args.url;
 				if (args.data) {
 					args.data.deptId = globalData.deptId;
 					args.data.from = globalData.from;
@@ -192,7 +192,14 @@ export default {
 		return res[1].data;
 	},
 	async storagePhoneIntoUserInfo(code) {
-		let phoneRes = await this.qryUserPhone(code)
+		let phoneRes = await this.qryUserPhone(code);
+		if (phoneRes && phoneRes.msg === '获取手机号码异常') {
+			uni.showToast({
+				icon: 'none',
+				title: '请先确认登录微信号是否已绑定手机号'
+			})
+			return false;
+		}
 		if (phoneRes && phoneRes.data) {
 			let userInfo = this.getCurUserInfo();
 			this.updateUserPhone({
@@ -404,5 +411,13 @@ export default {
 			data: params
 		})
 		return res[1].data;
+	},
+	async getWorkerList(params = {}) {
+		let res = await uni.request({
+			url: '/worker/list',
+			method: 'POST',
+			data: params
+		})
+		return res[1].data;
 	},
 }
diff --git a/components/common-card/horizontal-name-card.vue b/components/common-card/horizontal-name-card.vue
index a8a16b7..0c73a59 100644
--- a/components/common-card/horizontal-name-card.vue
+++ b/components/common-card/horizontal-name-card.vue
@@ -1,7 +1,9 @@
 <template>
 	<view>
 		<view class="flex justify-start">
-			<view class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.picUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
+			<view v-if="vCard.picUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.picUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
+			</view>
+			<view v-else class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.workerLogoUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
 			</view>
 			<view class="margin-left-sm product-content">
 				<view>
diff --git a/components/custom-bar/load-status-bar.vue b/components/custom-bar/load-status-bar.vue
index a627c68..878d42b 100644
--- a/components/custom-bar/load-status-bar.vue
+++ b/components/custom-bar/load-status-bar.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view class="margin-bottom-lg">
+		<view class="margin-bottom-lg margin-top-sm">
 			<view v-if="hasMoreData" class="text-center bg-main-color light padding-tb-sm" @click="reqMoreData">
 				<text class="margin-right-xs">查看更多</text>
 				<text class="text-bold cuIcon-unfold"></text>
diff --git a/components/default-toast/bg-toast.vue b/components/default-toast/bg-toast.vue
new file mode 100644
index 0000000..b4b27d1
--- /dev/null
+++ b/components/default-toast/bg-toast.vue
@@ -0,0 +1,32 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'bg-toast',
+		props: {
+			content: {
+				type: String,
+				default: ''
+			},
+			cancelMsg: {
+				type: String,
+				default: '取消'
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 72d4e34..1f49c43 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -3,7 +3,8 @@
 		<index v-if="curPageCode === 'indexPage'"></index>
 		<worker-circle v-if="curPageCode === 'workerCirclePage'"></worker-circle>
 		<personal-center v-if="curPageCode === 'myPage'"></personal-center>
-		<!-- <publish-home v-if="curPageCode === 'publishPage'"></publish-home> -->
+		<!-- <publish-home v-if="curPageCode === 'publishPage'"></publish-home> -->
+		<msg-page v-if="curPageCode === 'msgPage'"></msg-page>
 		<module-bar ref="moduleBar" :moduleBarInfos="moduleBarInfos"></module-bar>
 		<view class="cu-modal content-mask" :class="isShowPublish?'show':''">
 			<view class="cu-dialog bottom-dialog margin-bottom-with-bar">
@@ -61,7 +62,8 @@
 	import moduleBar from '@/components/custom-bar/module-bar.vue';
 	import index from '@/pages/index/home.vue';
 	import workerCircle from '@/pages/index/worker-home.vue';
-	import personalCenter from '@/pages/index/my-home.vue';
+	import personalCenter from '@/pages/index/my-home.vue';
+	import msgPage from '@/pages/index/msg-home.vue';
 	// import publishHome from '@/pages/index/publish-home.vue';
 
 	export default {
@@ -69,7 +71,8 @@
 			moduleBar,
 			index,
 			workerCircle,
-			personalCenter,
+			personalCenter,
+			// msgPage
 			// publishHome
 		},
 		data() {
diff --git a/pages/index/msg-home.vue b/pages/index/msg-home.vue
index 87283e0..b29cae9 100644
--- a/pages/index/msg-home.vue
+++ b/pages/index/msg-home.vue
@@ -88,6 +88,7 @@
 
 <script>
 	export default {
+		name: 'msgPage',
 		data() {
 			return {
 				
diff --git a/pages/index/worker-home.vue b/pages/index/worker-home.vue
index 468bf62..18f2e37 100644
--- a/pages/index/worker-home.vue
+++ b/pages/index/worker-home.vue
@@ -1,119 +1,300 @@
 <template>
-	<view>
+	<view class="margin-bottom-with-bar">
 		<!-- 顶部操作条 -->
 		<cu-custom :bgColor="'bg-main-color'">
 			<block slot="content">全国师傅圈</block>
 		</cu-custom>
 		<!-- 搜索栏 -->
 		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
-			<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
-				<view class="action">
-					<text class="cuIcon-location"></text>
-					<text>广州</text>
+			<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
+				<view class="action">
+					<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
+						:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
+						<text class="cuIcon-location"></text>
+						<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
+					</picker>
 				</view>
 				<view class="search-form round">
 					<text class="cuIcon-search"></text>
-					<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="搜索家电维修"
-						confirm-type="search"></input>
+					<input @confirm="searchGoods" v-model="searchInfo.inputWorkerName" :adjust-position="true" type="text"
+					placeholder="搜索师傅名称" confirm-type="search"></input>
 				</view>
-				<view class="action">
-					<text>筛选</text>
-					<text class="cuIcon-filter"></text>
+				<view class="action">
+					<picker :mode="'multiSelector'" @change="categoryChange"
+						@columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'"
+						:range="categoryList">
+						<text>{{searchInfo.category && searchInfo.category.length ? searchInfo.category[2].goodsCategoryName : '技能筛选'}}</text>
+						<text class="cuIcon-filter"></text>
+					</picker>
 				</view>
 			</view>
 		</view>
-		<view class="margin-bottom-with-bar">
-			<!-- 师傅卡片 -->
-			<view v-for="(item, index) in workerInfos" class="bg-white padding margin-lr-sm margin-tb-sm shadow-warp">
-				<!-- 师傅信息 -->
-				<view class="solid-bottom padding-bottom-sm">
-					<horizontal-name-card :vCard="item" :avatarPubClass="'round'" :avatarWidth="'130rpx'"
-						:avatarHeight="'130rpx'"></horizontal-name-card>
-				</view>
-				<!-- 服务列表 -->
-				<view class="padding-top-sm padding-bottom-xl grid text-center col-5 grid-square">
-					<view v-for="(product,index) in item.productList" :key="index" class="bg-img"
-						:style="[{ backgroundImage:'url(' + product.picUrl + ')' }]">
-						<view class="pic-down-text">
-							<view class="text-grey text-cut text-sm">{{product.name}}</view>
-							<view class="text-price text-red text-cut">{{product.price}}</view>
-						</view>
-					</view>
-					<view>
-						<view v-for="(item, index) in 3" class="circle-point margin-right-xs bg-grey"></view>
-					</view>
-				</view>
-				<!-- 进店看看 -->
-				<view class="flex justify-between align-end margin-top-xs">
-					<view class="cu-capsule">
-						<view class='cu-tag bg-main-color'>
-							<text class='cuIcon-shopfill'></text>
-						</view>
-						<view class="cu-tag line-main-color">
-							{{item.shopInfo.shopName}}
-						</view>
-					</view>
-					<!-- <view class="margin-right-sm text-black">{{item.shopName}}</view> -->
-					<view class='cu-tag light bg-main-color radius' @click="showShopDetail(item.shopInfo)">进店看看<text
-							class="text-bold cuIcon-right"></text></view>
-				</view>
-			</view>
-			<view v-if="hasMoreData" class="text-center bg-main-color light padding-tb-sm" @click="loadData">
-				<text class="margin-right-xs">查看更多</text>
-				<text class="text-bold cuIcon-unfold"></text>
-			</view>
-			<view class="cu-load" :class="loadMoreStatus"></view>
-		</view>
+		<!-- 师傅卡片 -->
+		<view v-for="(item, index) in workerInfos" class="bg-white padding margin-lr-sm margin-tb-sm shadow-warp">
+			<!-- 师傅信息 -->
+			<view class="solid-bottom padding-bottom-sm">
+				<view class="flex justify-start">
+					<view class="cu-avatar round" :style="'background-image:url(' + item.workerLogoUrl + '); width: 130rpx; height: 130rpx;'"></view>
+					<view class="margin-left-sm flex-column-between">
+						<view class="text-black text-xl">{{item.name}}</view>
+						<view class="text-sm">
+							<view>
+								<text class="margin-right-xs">服务技能:</text>
+								<text v-for="(skill, skillArrIndex) in item.goodsCategories">
+									<text>{{skill.goodsCategoryName}}</text>
+									<text v-if="skillArrIndex !== item.goodsCategories.length - 1">，</text>
+								</text>
+							</view>
+							<view>
+								<text class="margin-right-xs">服务范围:</text>
+								<text v-for="(area, areaArrIndex) in item.workerAreas">
+									<text>{{getLastSplitAreaName(area.mergerName)}}</text>
+									<text v-if="areaArrIndex !== item.workerAreas.length - 1">，</text>
+								</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="text-sm padding-top">
+					<view class="flex justify-between">
+						<text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text>
+						<uni-rate :readonly="true" allow-half :value="5" />
+					</view>
+					<view class="flex justify-between">
+						<view>
+							<text v-if="vCard.rateInfo.ratePoint" v-for="(ratePoint, index) in vCard.rateInfo.ratePoint">
+								<text>{{ratePoint.name}}</text><text class="margin-lr-xs">{{ratePoint.score}}</text>
+							</text>
+						</view>
+						<view class="text-sm" v-if="vCard.rateInfo.commentNum">评价({{vCard.rateInfo.commentNum}})<text
+								class="text-bold text-gray cuIcon-right"></text></view>
+					</view>
+				</view>
+			</view>
+			<!-- 服务列表 -->
+			<view class="padding-top-sm padding-bottom-xl grid text-center col-4 grid-square">
+				<view v-for="(product,index) in item.goodsList" :key="index" class="bg-img"
+					:style="[{ backgroundImage:'url(' + product.goodsImgUrl + ')' }]" v-if="index < 3">
+					<view class="pic-down-text">
+						<view class="text-grey text-cut text-sm">{{product.goodsName}}</view>
+						<!-- <view class="text-price text-red text-cut">{{product.price}}</view> -->
+					</view>
+				</view>
+				<view v-if="item.goodsList && item.goodsList.length > 3">
+					<view v-for="(item, index) in 3" class="circle-point margin-right-xs bg-grey"></view>
+				</view>
+			</view>
+			<!-- 进店看看 -->
+			<view class="flex justify-between align-end margin-top-xs">
+				<view class="cu-capsule">
+					<view class='cu-tag bg-main-color'>
+						<text class='cuIcon-shopfill'></text>
+					</view>
+					<view class="cu-tag line-main-color">
+						{{item.deptName}}
+					</view>
+				</view>
+				<!-- <view class="margin-right-sm text-black">{{item.shopName}}</view> -->
+				<view class='cu-tag light bg-main-color radius' @click="showShopDetail(item)">进店看看<text
+						class="text-bold cuIcon-right"></text></view>
+			</view>
+		</view>
+		<load-status-bar ref="loadStatusBar" @loadMore="loadWorkerPage"></load-status-bar>
 	</view>
 </template>
 
 <script>
-	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
+	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
+	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
 
 	export default {
 		name: 'worker-circle',
 		components: {
-			horizontalNameCard
+			horizontalNameCard,
+			loadStatusBar
 		},
 		data() {
 			return {
 				workerInfos: [],
 				loadMoreStatus: '',
 				hasMoreData: false,
-				pageIndex: 1,
-				pageSize: 3,
-				stickyTop: this.CustomBar
+				pageNum: 0,
+				pageSize: 0,
+				stickyTop: this.CustomBar,
+				searchInfo: {},
+				areaList: [],
+				areaMultiIndex: [0, 0, 0],
+				categoryList: [],
+				categoryMultiIndex: [0, 0, 0]
 			}
 		},
 		onReady() {
 			this.loadData();
 		},
 		methods: {
-			async loadMoreWorkerInfos() {
-				let allData = await this.$api.data('workerInfos');
-				let dataOfPage = allData.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
-				if (dataOfPage.length == 0) {
-					return;
-				} else if (dataOfPage.length === this.pageSize) {
-					this.hasMoreData = true;
-				}
-				this.workerInfos = this.workerInfos.concat(dataOfPage);
-				this.pageIndex++;
-			},
-			async loadData() {
-				this.loadMoreStatus = 'loading bg-main-color light';
-				this.hasMoreData = false;
-				try {
-					await this.loadMoreWorkerInfos();
-					this.loadMoreStatus = this.hasMoreData ? '' : 'over bg-grey';
-				} catch (e) {
-					this.loadMoreStatus = 'erro bg-red'
-				}
+			async loadData() {
+				this.pageSize = this.$globalData.initPageSize;
+				this.loadCategoryList();
+				await this.loadRegionList();
+				this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]]
+				this.searchGoods();
+			},
+			async reloadData(params = {}) {
+				this.pageNum = 0;
+				this.workerInfos = [];
+				this.loadWorkerPage(params);
+			},
+			async loadWorkerPage(params = {}) {
+				params.pageNum = this.pageNum;
+				params.pageSize = this.pageSize;
+				this.$refs.loadStatusBar.showLoading();
+				try {
+					let res = await this.$request.getWorkerList(params);
+					let rowsLength = res.rows.length;
+					if (rowsLength > 0) {
+						this.workerInfos = this.workerInfos.concat(res.rows);
+						this.pageNum++;
+						if (rowsLength === this.pageSize) {
+							this.$refs.loadStatusBar.showLoadMore();
+						}
+					}
+					this.$refs.loadStatusBar.showLoadOver();
+				} catch (e) {
+					console.error(e)
+					this.$refs.loadStatusBar.showLoadErr();
+				}
+			},
+			async loadCategoryList(idArr) {
+				let typeList = await this.$request.listByStep();
+				typeList = typeList.data;
+				let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
+				let subTypeList = await this.$request.listByStep({
+					goodsCategoryId: col1Id
+				});
+				subTypeList = subTypeList.data;
+				let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
+				let subSubTypeList = await this.$request.listByStep({
+					goodsCategoryId: col2Id
+				});
+				subSubTypeList = subSubTypeList.data;
+				this.categoryList.push(typeList);
+				this.categoryList.push(subTypeList);
+				this.categoryList.push(subSubTypeList);
+			},
+			async loadRegionList() {
+				let regionList = await this.$request.areaListByStep();
+				regionList = regionList.data;
+				let subRegionList = [];
+				let subSubRegionList = [];
+				if (regionList && regionList.length > 0) {
+					subRegionList = await this.$request.areaListByStep({
+						parentCode: regionList[0].areaCode
+					});
+					subRegionList = subRegionList.data;
+				}
+				if (subRegionList && subRegionList.length > 0) {
+					subSubRegionList = await this.$request.areaListByStep({
+						parentCode: subRegionList[0].areaCode
+					});
+					subSubRegionList = subSubRegionList.data;
+				}
+				this.areaList.push(regionList);
+				this.areaList.push(subRegionList);
+				this.areaList.push(subSubRegionList);
+			},
+			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.searchInfo.area = chosenArea;
+				this.searchGoods();
+			},
+			async regionColChange(e) {
+				let colObj = e.detail;
+				if (colObj.column == 0) {
+					// 通过一级查二级
+					let subAreaList = await this.$request.areaListByStep({
+						parentCode: this.areaList[0][colObj.value].areaCode
+					});
+					subAreaList = subAreaList.data;
+					let subSubAreaList = [];
+					if (subAreaList.length) {
+						subSubAreaList = await this.$request.areaListByStep({
+							parentCode: subAreaList[0].areaCode
+						});
+						subSubAreaList = subSubAreaList.data;
+					}
+					this.areaList.pop();
+					this.areaList.pop();
+					this.areaList.push(subAreaList);
+					this.areaList.push(subSubAreaList);
+					this.areaMultiIndex = [colObj.value, 0, 0];
+				} else if (colObj.column == 1) {
+					// 通过二级查三级
+					let subAreaList = await this.$request.areaListByStep({
+						parentCode: this.areaList[1][colObj.value].areaCode
+					});
+					subAreaList = subAreaList.data;
+					this.areaList.pop();
+					this.areaList.push(subAreaList);
+					this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
+				}
+			},
+			async 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.searchInfo.category = chosenCategory;
+				this.searchGoods();
+			},
+			async categoryColChange(e) {
+				let colObj = e.detail;
+				if (colObj.column == 0) {
+					// 通过一级查询二级
+					let subTypeList = await this.$request.listByStep({
+						goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
+					});
+					subTypeList = subTypeList.data;
+					let subSubTypeList = await this.$request.listByStep({
+						goodsCategoryId: subTypeList[0].goodsCategoryId
+					});
+					subSubTypeList = subSubTypeList.data;
+					this.categoryList.pop();
+					this.categoryList.pop();
+					this.categoryList.push(subTypeList);
+					this.categoryList.push(subSubTypeList);
+					this.categoryMultiIndex = [colObj.value, 0, 0];
+				} else if (colObj.column == 1) {
+					// 通过二级查三级
+					let subSubTypeList = await this.$request.listByStep({
+						goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId
+					});
+					subSubTypeList = subSubTypeList.data;
+					this.categoryList.pop();
+					this.categoryList.push(subSubTypeList);
+					this.categoryMultiIndex = [this.categoryMultiIndex[0], colObj.value, 0];
+				}
+			},
+			searchGoods() {
+				let params = {
+					goodsCategoryId: this.searchInfo.category && this.searchInfo.category.length > 1 ? this.searchInfo.category[2].goodsCategoryId : null,
+					areaId: this.searchInfo.area[2].areaId,
+					workerName: this.searchInfo.inputWorkerName
+				};
+				this.reloadData(params);
 			},
 			showShopDetail(shopInfo) {
 				uni.navigateTo({
 					url: '../product/shop-detail?shopInfo=' + encodeURIComponent(JSON.stringify(shopInfo))
 				})
+			},
+			getLastSplitAreaName(mergeName) {
+				let arr = mergeName.split(",");
+				return arr[arr.length - 1];
 			}
 		}
 	}
diff --git a/pages/product/shop-detail.vue b/pages/product/shop-detail.vue
index 8651054..519aa06 100644
--- a/pages/product/shop-detail.vue
+++ b/pages/product/shop-detail.vue
@@ -7,59 +7,95 @@
 		</cu-custom>
 		<!-- 店铺介绍 -->
 		<view class="bg-white padding solid-bottom">
-			<horizontal-name-card :vCard="shopInfo"></horizontal-name-card>
+			<view class="flex justify-start">
+				<view class="cu-avatar round"
+					:style="'background-image:url(' + shopInfo.workerLogoUrl + '); width: 130rpx; height: 130rpx;'">
+				</view>
+				<view class="margin-left-sm flex-column-between">
+					<view class="text-black text-xl">{{shopInfo.name}}</view>
+					<view>
+						<view>
+							<text class="cuIcon-form margin-right-xs text-main-color"></text>
+							<text class="margin-right-xs">企业认证</text>
+						</view>
+						<view>
+							<text class="cuIcon-location margin-right-xs text-main-color"></text>
+							<text class="margin-right-xs">服务范围:</text>
+							<text v-for="(area, areaArrIndex) in shopInfo.workerAreas">
+								<text>{{getLastSplitAreaName(area.mergerName)}}</text>
+								<text v-if="areaArrIndex !== shopInfo.workerAreas.length - 1">，</text>
+							</text>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
 		<!-- 店铺评分 -->
-		<!-- <view class="bg-white padding text-sm padding-top-xs solid-bottom">
+		<view class="bg-white padding text-sm padding-top-xs solid-bottom">
 			<view class="flex justify-between">
-				<text>总评分：<text class="text-red text-xl">{{shopInfo.totalScore}}</text> / 5.0分</text>
-				<uni-rate :readonly="true" allow-half :value="shopInfo.totalScore" />
+				<text>总评分：<text class="text-red text-xl">5.0</text> / 5.0分</text>
+				<uni-rate :readonly="true" allow-half :value="5" />
 			</view>
 			<view>
-				<text>准时</text><text class="margin-lr-xs">{{shopInfo.timeScore}}</text>
-				<text>态度</text><text class="margin-lr-xs">{{shopInfo.attitudeScore}}</text>
-				<text>技能</text><text class="margin-lr-xs">{{shopInfo.skillScore}}</text>
+				<text>准时</text><text class="margin-lr-xs">5.0</text>
+				<text>态度</text><text class="margin-lr-xs">5.0</text>
+				<text>技能</text><text class="margin-lr-xs">5.0</text>
 			</view>
-		</view> -->
+		</view>
 		<!-- 店铺服务说明 -->
 		<view class="padding bg-white text-sm">
-			<view>服务类目：<text>{{shopInfo.servType}}</text></view>
 			<view>
-				附加服务：
+				<text>服务类目：</text>
+				<text v-for="(skill, skillArrIndex) in shopInfo.goodsCategories">
+					<text>{{skill.goodsCategoryName}}</text>
+					<text v-if="skillArrIndex !== shopInfo.goodsCategories.length - 1">，</text>
+				</text>
+			</view>
+			<view>
+				<text>附加服务：</text>
 				<radio-group @change="changeAdditionalServId">
-					<label class="radio margin-right-sm" v-for="(item, index) in shopInfo.additionalServ">
+					<label class="radio margin-right-sm" v-for="(item, index) in additionalServ">
 						<radio style="transform:scale(0.7)" class="main-color" :value="item.id"
-							:checked="additionalServId===item.id" />
+							checked disabled/>
 						<text class="margin-left-xs">{{item.name}}</text>
 					</label>
 				</radio-group>
 			</view>
-			<view>服务地区：<text>{{shopInfo.servArea}}</text></view>
+			<view>
+				<text>特殊技能：</text>
+				<text v-for="(sSkill, sSkillArrIndex) in shopInfo.specialSkills">
+					<text>{{sSkill.specialSkillName}}</text>
+					<text v-if="sSkillArrIndex !== shopInfo.specialSkills.length - 1">，</text>
+				</text>
+			</view>
 		</view>
 		<!-- 本店铺服务列表 -->
 		<view class="bg-white">
 			<view class="margin-top-sm sticky-bar" :style="[{top: stickyTop + 'px'}]">
 				<!-- 搜索栏 -->
 				<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
-					<view class="action">
-						<text class="cuIcon-location"></text>
-						<text>广州</text>
+					<view class="action">
+						<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
+							:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
+							<text class="cuIcon-location"></text>
+							<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
+						</picker>
 					</view>
 					<view class="search-form round">
 						<text class="cuIcon-search"></text>
-						<input @confirm="searchGoods" :adjust-position="true"
-							type="text" placeholder="搜索本店铺" confirm-type="search"></input>
+						<input v-model="searchInfo.goodsName" @confirm="searchGoods" :adjust-position="true" type="text" placeholder="搜索本店铺"
+							confirm-type="search"></input>
 					</view>
-					<view class="action">
+					<!-- <view class="action">
 						<text>筛选</text>
 						<text class="cuIcon-filter"></text>
-					</view>
+					</view> -->
 				</view>
 			</view>
 			<!-- 服务列表 -->
 			<view class="padding-lr padding-bottom">
 				<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
-					v-for="(item, index) in shopInfo.productList">
+					v-for="(item, index) in productList">
 					<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
 				</view>
 			</view>
@@ -68,37 +104,147 @@
 </template>
 
 <script>
-	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
+	// import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
 	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
 
 	export default {
 		components: {
-			horizontalNameCard,
+			// horizontalNameCard,
 			horizontalGoodsCard
 		},
 		data() {
 			return {
 				shopInfo: {},
+				productList: [],
+				additionalServ: [{
+					id: 1,
+					name: '58速运'
+				}, {
+					id: 2,
+					name: '货拉拉'
+				}, {
+					id: 3,
+					name: '搬货服务'
+				}],
+				searchInfo: {},
+				areaList: [],
+				areaMultiIndex: [0, 0, 0],
 				stickyTop: this.CustomBar
 			}
 		},
-		onLoad(option) {
-			const shopInfo = JSON.parse(decodeURIComponent(option.shopInfo));
-			console.log("接收参数shopInfo:" + JSON.stringify(shopInfo));
+		onLoad(option) {
+			this.shopInfo = JSON.parse(decodeURIComponent(option.shopInfo));
 			this.loadData();
 		},
 		methods: {
 			async loadData() {
-				this.shopInfo = await this.$api.data('shopInfo');
+				// this.shopInfo = await this.$api.data('shopInfo');
+				this.loadCategoryList();
+				await this.loadRegionList();
+				this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]]
+				this.searchGoods();
 			},
-			searchGoods(item) {
-				console.log("搜索条件信息: " + item)
-				console.log("商品搜索中...");
+			async loadProductData(params = {}) {
+				params = {
+					status: 0,
+					...params
+				}
+				let res = await this.$request.qryProductPage(params);
+				this.productList = res[1].data.rows;
 			},
-			showDetails(productItem) {
-				uni.navigateTo({
-					url: '../product/product-detail'
+			async loadCategoryList(idArr) {
+				let typeList = await this.$request.listByStep();
+				typeList = typeList.data;
+				let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
+				let subTypeList = await this.$request.listByStep({
+					goodsCategoryId: col1Id
 				});
+				subTypeList = subTypeList.data;
+				let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
+				let subSubTypeList = await this.$request.listByStep({
+					goodsCategoryId: col2Id
+				});
+				subSubTypeList = subSubTypeList.data;
+				this.categoryList.push(typeList);
+				this.categoryList.push(subTypeList);
+				this.categoryList.push(subSubTypeList);
+			},
+			async loadRegionList() {
+				let regionList = await this.$request.areaListByStep();
+				regionList = regionList.data;
+				let subRegionList = [];
+				let subSubRegionList = [];
+				if (regionList && regionList.length > 0) {
+					subRegionList = await this.$request.areaListByStep({
+						parentCode: regionList[0].areaCode
+					});
+					subRegionList = subRegionList.data;
+				}
+				if (subRegionList && subRegionList.length > 0) {
+					subSubRegionList = await this.$request.areaListByStep({
+						parentCode: subRegionList[0].areaCode
+					});
+					subSubRegionList = subSubRegionList.data;
+				}
+				this.areaList.push(regionList);
+				this.areaList.push(subRegionList);
+				this.areaList.push(subSubRegionList);
+			},
+			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.searchInfo.area = chosenArea;
+				this.searchGoods();
+			},
+			async regionColChange(e) {
+				let colObj = e.detail;
+				if (colObj.column == 0) {
+					// 通过一级查二级
+					let subAreaList = await this.$request.areaListByStep({
+						parentCode: this.areaList[0][colObj.value].areaCode
+					});
+					subAreaList = subAreaList.data;
+					let subSubAreaList = [];
+					if (subAreaList.length) {
+						subSubAreaList = await this.$request.areaListByStep({
+							parentCode: subAreaList[0].areaCode
+						});
+						subSubAreaList = subSubAreaList.data;
+					}
+					this.areaList.pop();
+					this.areaList.pop();
+					this.areaList.push(subAreaList);
+					this.areaList.push(subSubAreaList);
+					this.areaMultiIndex = [colObj.value, 0, 0];
+				} else if (colObj.column == 1) {
+					// 通过二级查三级
+					let subAreaList = await this.$request.areaListByStep({
+						parentCode: this.areaList[1][colObj.value].areaCode
+					});
+					subAreaList = subAreaList.data;
+					this.areaList.pop();
+					this.areaList.push(subAreaList);
+					this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
+				}
+			},
+			searchGoods() {
+				let params = {
+					areaId: this.searchInfo.area[2].areaId,
+					goodsName: this.searchInfo.goodsName
+				};
+				this.loadProductData(params);
+			},
+			showDetails(productItem) {
+				uni.navigateTo({
+					url: '../product/product-detail'
+				});
+			},
+			getLastSplitAreaName(mergeName) {
+				let arr = mergeName.split(",");
+				return arr[arr.length - 1];
 			}
 		}
 	}