110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 顶部操作条 -->
|
|||
|
|
<cu-custom :bgColor="'bg-white'" :isBack="true">
|
|||
|
|
<block slot="backText">返回</block>
|
|||
|
|
<block slot="content">店铺主页</block>
|
|||
|
|
</cu-custom>
|
|||
|
|
<!-- 店铺介绍 -->
|
|||
|
|
<view class="bg-white padding">
|
|||
|
|
<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>
|