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">
			<horizontal-name-card :vCard="shopInfo"></horizontal-name-card>
		</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">{{shopInfo.totalScore}}</text> / 5.0分</text>
				<uni-rate :readonly="true" allow-half :value="shopInfo.totalScore" />
			</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>
			</view>
		</view> -->
		<!-- 店铺服务说明 -->
		<view class="padding bg-white text-sm">
			<view>服务类目：<text>{{shopInfo.servType}}</text></view>
			<view>
				附加服务：
				<radio-group @change="changeAdditionalServId">
					<label class="radio margin-right-sm" v-for="(item, index) in shopInfo.additionalServ">
						<radio style="transform:scale(0.7)" class="main-color" :value="item.id"
							:checked="additionalServId===item.id" />
						<text class="margin-left-xs">{{item.name}}</text>
					</label>
				</radio-group>
			</view>
			<view>服务地区：<text>{{shopInfo.servArea}}</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>
					<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 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 shopInfo.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: {},
				stickyTop: this.CustomBar
			}
		},
		onLoad(option) {
			const shopInfo = JSON.parse(decodeURIComponent(option.shopInfo));
			console.log("接收参数shopInfo:" + JSON.stringify(shopInfo));
			this.loadData();
		},
		methods: {
			async loadData() {
				this.shopInfo = await this.$api.data('shopInfo');
			},
			searchGoods(item) {
				console.log("搜索条件信息: " + item)
				console.log("商品搜索中...");
			},
			showDetails(productItem) {
				uni.navigateTo({
					url: '../product/product-detail'
				});
			}
		}
	}
</script>

<style>

</style>