You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
shangmenanmo/shopstore/pages/store-info.vue

130 lines
3.2 KiB

<template>
<view class="shopstore-store-info rel" v-if="detail.id">
<view class="bg abs" :style="{background: `linear-gradient(180deg, ${primaryColor} 0%, ${subColor} 100%)`}"></view>
<view class="ml-md mr-md">
<view class="space-lg"></view>
<view class="fill-base pd-lg f-paragraph c-paragraph radius-18">
<view class="flex-y-center pb-lg c-title b-1px-b">
<i class="iconfont icongongsi"></i>
<view class="flex-1 ml-md f-mini-title text-bold ellipsis">{{detail.attestation}}</view>
</view>
<view class="count-item flex-x-center pt-lg">
<view class="flex-center flex-column">
<view class="f-title c-title">{{detail.total_num}}+</view>
<view class="f-icontext c-caption">服务次数</view>
</view>
<view class="flex-center flex-column">
<view class="f-title c-title">{{detail.order_rate}}%</view>
<view class="f-icontext c-caption">接单率</view>
</view>
<view class="flex-center flex-column">
<view class="f-title c-title">{{detail.positive_rate}}%</view>
<view class="f-icontext c-caption">好评率</view>
</view>
</view>
</view>
<view class="fill-base mt-md pd-lg f-paragraph c-paragraph radius-18">
<view class="f-mini-title c-title text-bold mb-lg">营业执照</view>
<view class="flex-center img-list radius-16">
<image
@tap.stop="$util.previewImage({current:detail.business_license,urls:[detail.business_license]})"
mode="aspectFill" class="img-item radius-16" :src="detail.business_license">
</image>
</view>
</view>
<view class="fill-base mt-md pd-lg f-paragraph c-paragraph radius-18">
<view class="f-mini-title c-title text-bold mb-md">商家简介</view>
<text class="f-paragraph c-paragraph" decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
</view>
</view>
<view class="space-footer"></view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from "vuex"
export default {
components: {},
data() {
return {
options: {},
detail: {},
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
userInfo: state => state.user.userInfo,
}),
onLoad(options) {
this.options = options
this.initIndex()
},
methods: {
...mapMutations(['updateUserItem']),
async initIndex() {
// #ifdef H5
if (this.$jweixin.isWechat()) {
await this.$jweixin.initJssdk();
this.$jweixin.wxReady(() => {
this.$jweixin.hideOptionMenu()
})
}
// #endif
await this.getDetail()
this.$util.setNavigationBarColor({
bg: this.primaryColor
})
},
async getDetail() {
let {
id
} = this.options
let {
info
} = await this.$api.shopstore.storeInfo({
id
})
let {
title
} = info
uni.setNavigationBarTitle({
title
})
this.detail = info
this.$util.hideAll()
}
}
}
</script>
<style lang="scss">
.shopstore-store-info {
.bg {
width: 100%;
height: 172rpx;
z-index: -1;
}
.count-item {
.flex-column {
width: 33.33%;
}
}
.img-list {
height: 282rpx;
background: #F5F5F5;
.img-item {
width: 339rpx;
height: 242rpx;
}
}
}
</style>