dingdong-mall/pages/index/worker-home.vue

<template>
	<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">
					<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[1].areaName : areaList[1][0].areaName}}</text>
					</picker>
				</view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @confirm="searchGoods" v-model="searchInfo.inputWorkerName" :adjust-position="true" type="text"
					placeholder="搜索师傅名称" confirm-type="search"></input>
				</view>
				<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>
			<!-- 师傅卡片 -->
			<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 text-beside-avatar">
							<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="loadStatusBar1" @loadMore="loadWorkerPage"></load-status-bar>
		</view>
		
		<!-- 其他城市师傅 -->
		<view class="text-gray text-lg text-center margin flex align-center">
			<view class="divider"/>
			<text class="margin-lr-sm" style="flex-basis: 85%;">其他城市师傅</text>
			<view class="divider"/>
		</view>
		<view>
			<!-- 师傅卡片 -->
			<view v-for="(item, index) in otherCityWorkers" 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 text-beside-avatar">
							<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="loadStatusBar2" @loadMore="loadOtherCityWorkerPage"></load-status-bar>
		</view>
	</view>
</template>

<script>
	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,
			loadStatusBar
		},
		data() {
			return {
				workerInfos: [],
				otherCityWorkers: [],
				loadMoreStatus: '',
				hasMoreData: false,
				pageNum: 0,
				otherCityWorkersPageNum: 0,
				pageSize: 0,
				stickyTop: this.CustomBar,
				searchInfo: {},
				areaList: [],
				areaMultiIndex: [0, 0],
				categoryList: [],
				categoryMultiIndex: [0, 0, 0]
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
				// 获取当前定位
				await this.getCurAreaArr();
				await this.loadRegionList();
				this.loadCategoryList();
				this.searchGoods();
			},
			async getCurAreaArr() {
				let areaArr = await this.$request.getCurArea();
				if (areaArr) {
					this.searchInfo.area = [areaArr[1], areaArr[2]];
				}
			},
			async reloadData(params = {}) {
				this.pageNum = this.$globalData.initPageNum;
				this.workerInfos = [];
				this.loadWorkerPage(params);
				
				this.otherCityWorkers = [];
				this.loadOtherCityWorkerPage();
			},
			async loadWorkerPage(params = {}) {
				if (this.searchInfo.area && this.searchInfo.area.length && this.searchInfo.area[this.searchInfo.area.length - 1].isAll) {
					params.areaIds = this.searchInfo.area[this.searchInfo.area.length - 1].areaIds;
					params.areaId = null;
				}
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				params.justShowCurWorkerArea = true;
				this.$refs.loadStatusBar1.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.loadStatusBar1.showLoadMore();
						}
					}
					this.$refs.loadStatusBar1.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar1.showLoadErr();
				}
			},
			async loadOtherCityWorkerPage(params = {}) {
				params.pageNum = this.otherCityWorkersPageNum;
				params.pageSize = this.pageSize;
				params.exceptParentAreaId = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[1].areaId : null;
				this.$refs.loadStatusBar2.showLoading();
				try {
					let res = await this.$request.getWorkerList(params);
					let rowsLength = res.rows.length;
					if (rowsLength > 0) {
						this.otherCityWorkers = this.otherCityWorkers.concat(res.rows);
						this.otherCityWorkersPageNum++;
						if (rowsLength === this.pageSize) {
							this.$refs.loadStatusBar2.showLoadMore();
						}
					}
					this.$refs.loadStatusBar2.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar2.showLoadErr();
				}
			},
			async loadCategoryList(idArr) {
				let res = await this.$request.listByStep({
					type: 1
				});
				res = res.data;
				let typeList = await this.$request.listByStepWithAllNode({
					goodsCategoryId: res[0].goodsCategoryId,
					type: 1
				});
				typeList = typeList.data;
				let subTypeList = [];
				let subSubTypeList = [];
				if (typeList && typeList.length) {
					let col1Id = typeList[0].goodsCategoryId;
					subTypeList = await this.$request.listByStepWithAllNode({
						goodsCategoryId: col1Id
					});
					subTypeList = subTypeList.data;
				}
				// if (subTypeList && subTypeList.length) {
				// 	let col2Id = subTypeList[0].goodsCategoryId;
				// 	subSubTypeList = await this.$request.listByStepWithAllNode({
				// 		goodsCategoryId: col2Id
				// 	});
				// 	subSubTypeList = subSubTypeList.data;
				// }
				this.categoryList.push(typeList);
				this.categoryList.push(subTypeList);
				this.categoryList.push(subSubTypeList);
			},
			async loadRegionList() {
				// let area = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area : null
				// let regionList = await this.$request.areaListByStep({
				// 	areaId: area == null ? null : area[0].areaId
				// });
				// regionList = regionList.data;
				let subRegionList = [this.searchInfo.area[0]];
				let subSubRegionList = [];
				// if (regionList && regionList.length > 0) {
				// 	let params = {};
				// 	if (area != null) {
				// 		params = {
				// 			areaId: area[1].areaId,
				// 			parentCode: area[0].areaId
				// 		}
				// 	} else {
				// 		params = {
				// 			parentCode: regionList[0].areaCode
				// 		}
				// 	}
				// 	subRegionList = await this.$request.areaListByStep(params);
				// 	subRegionList = subRegionList.data;
				// }
				if (subRegionList && subRegionList.length > 0) {
					subSubRegionList = await this.$request.areaListByStep({
						parentCode: subRegionList[0].areaCode
					});
					subSubRegionList = subSubRegionList.data;
					let allAreaIdsOfSubSubRegionList = [];
					subSubRegionList.forEach(region => {
						allAreaIdsOfSubSubRegionList.push(region.areaId)
					})
					let subSubRegionListWithAll = [{
						areaIds: allAreaIdsOfSubSubRegionList,
						areaId: subRegionList[0].areaId,
						isAll: true,
						areaName: subRegionList[0].areaName
					}].concat(subSubRegionList);
					subSubRegionList = subSubRegionListWithAll;
				}
				this.areaList = [];
				// this.areaList.push(regionList);
				this.areaList.push(subRegionList);
				this.areaList.push(subSubRegionList);
				this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0]];
			},
			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]]);
				}
				let lastCategory = null;
				for (let i = chosenCategory.length - 1; i >= 0; i--) {
					if (i === 0) {
						lastCategory = chosenCategory[i];
						if (lastCategory && lastCategory.isAllNode) {
							let res = await this.$request.listByStep({
								type: 1
							});
							lastCategory = res.data[0];
						}
						break;
					}
					lastCategory = chosenCategory[i];
					if (!lastCategory || lastCategory.isAllNode) {
						lastCategory = chosenCategory[i - 1];
						continue;
					}
					break;
				}
				chosenCategory[chosenCategory.length - 1] = lastCategory;
				this.searchInfo.category = chosenCategory;
				this.searchGoods();
			},
			async categoryColChange(e) {
				let colObj = e.detail;
				if (colObj.column == 0) {
					// 通过一级查询二级
					let subTypeList = await this.$request.listByStepWithAllNode({
						goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId,
						isAllNode: this.categoryList[0][colObj.value].isAllNode
					});
					subTypeList = subTypeList.data;
					// let subSubTypeList = await this.$request.listByStepWithAllNode({
					// 	goodsCategoryId: subTypeList[0].goodsCategoryId
					// });
					// subSubTypeList = subSubTypeList.data;
					this.categoryList.pop();
					this.categoryList.pop();
					this.categoryList.push(subTypeList);
					this.categoryList.push([]);
					this.categoryMultiIndex = [colObj.value, 0, 0];
				} else if (colObj.column == 1) {
					// 通过二级查三级
					let subSubTypeList = await this.$request.listByStepWithAllNode({
						goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId,
						isAllNode: this.categoryList[1][colObj.value].isAllNode
					});
					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,
					workerName: this.searchInfo.inputWorkerName
				};
				if (this.searchInfo.area && this.searchInfo.area.length) {
					params.areaId = this.searchInfo.area[this.searchInfo.area.length - 1].areaId;
				}
				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];
			}
		}
	}
</script>

<style scoped>
	.grid.grid-square {
		overflow: visible;
	}

	.grid.grid-square>view {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		position: relative;
		overflow: visible;
	}

	.pic-down-text {
		margin-top: 100%;
		width: 100%;
	}

	.circle-point {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		margin-top: 50%;
	}
	
	.text-beside-avatar {
		width: 75%;
	}
</style>