dingdong-mall/pages/product/shop-detail.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">店铺主页</block>
		</cu-custom>
		<!-- 店铺介绍 -->
		<view class="bg-white padding solid-bottom">
			<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 text-beside-avatar">
					<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="flex justify-between">
				<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">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 class="padding bg-white text-sm">
			<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 additionalServ">
						<radio style="transform:scale(0.7)" class="main-color" :value="item.id" disabled/>
						<text class="margin-left-xs">{{item.name}}</text>
					</label>
				</radio-group>
			</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">
						<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 v-model="searchInfo.goodsName" @confirm="searchGoods" :adjust-position="true" type="text" placeholder="搜索本店铺"
							confirm-type="search"></input>
					</view>
					<!-- <view class="action">
						<text>筛选</text>
						<text class="cuIcon-filter"></text>
					</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 productList">
					<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';

	export default {
		components: {
			// horizontalNameCard,
			horizontalGoodsCard
		},
		data() {
			return {
				shopInfo: {},
				productList: [],
				additionalServ: [{
					id: 1,
					name: '58速运'
				}, {
					id: 2,
					name: '货拉拉'
				}, {
					id: 3,
					name: '搬货服务'
				}],
				searchInfo: {},
				areaList: [],
				areaMultiIndex: [0, 0],
				categoryList: [],
				stickyTop: this.CustomBar
			}
		},
		onLoad(option) {
			const params = JSON.parse(decodeURIComponent(option.shopInfo));
			this.loadData(params);
		},
		methods: {
			async loadData(params) {
				// this.shopInfo = await this.$api.data('shopInfo');
				let res = await this.$request.getWorkerAllDetailById({
					workerId: params.workerId
				})
				this.shopInfo = res.data;
				this.loadCategoryList();
				// 获取当前定位
				await this.getCurAreaArr();
				await this.loadRegionList();
				this.searchGoods();
			},
			async getCurAreaArr() {
				let areaArr = await this.$request.getCurArea();
				if (areaArr) {
					this.searchInfo.area = [areaArr[1], areaArr[2]];
				}
			},
			async loadProductData(params = {}) {
				params = {
					status: 0,
					...params
				}
				if (this.searchInfo.area[this.searchInfo.area.length - 1].isAll) {
					params.areaId = null;
					params.areaIds = this.searchInfo.area[this.searchInfo.area.length - 1].areaIds;
				}
				let res = await this.$request.qryProductPage(params);
				this.productList = res[1].data.rows;
			},
			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 = [this.searchInfo.area[0]];
				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;
					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.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];
				// }
			},
			searchGoods() {
				let params = {
					areaId: this.searchInfo.area[this.searchInfo.area.length - 1].areaId,
					goodsName: this.searchInfo.goodsName,
					workerId: this.shopInfo.workerId
				};
				this.loadProductData(params);
			},
			showDetails(productItem) {
				let params = {
					goodsId: productItem.goodsId
				}
				uni.navigateTo({
					url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
				});
			},
			getLastSplitAreaName(mergeName) {
				let arr = mergeName.split(",");
				return arr[arr.length - 1];
			}
		}
	}
</script>

<style scoped>
	.text-beside-avatar {
		width: 75%;
	}
</style>