初始化仓库
This commit is contained in:
wangxiaowei
271
pages/store_detail/store_detail.vue
Normal file
271
pages/store_detail/store_detail.vue
Normal file
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view
|
||||
:style="{
|
||||
'background-image': `url(${$getImageUri(
|
||||
'/static/common/image/default/shopdetial.png'
|
||||
)})`
|
||||
}"
|
||||
>
|
||||
<!-- #ifndef H5 -->
|
||||
|
||||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
|
||||
<u-navbar
|
||||
:is-back="true"
|
||||
title="店铺信息"
|
||||
:title-bold="true"
|
||||
:is-fixed="false"
|
||||
:border-bottom="false"
|
||||
:background="{ background: 'rgba(256,256, 256,0)' }"
|
||||
></u-navbar>
|
||||
</u-sticky>
|
||||
<!-- #endif -->
|
||||
<view class="store-detail" v-show="shopInfo.name">
|
||||
<view class="store-header">
|
||||
<view class="store-info">
|
||||
<u-image
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
border-radius="50%"
|
||||
:src="shopInfo.logo"
|
||||
/>
|
||||
<view class="flex-col m-l-20">
|
||||
<view class="lg bold m-t-20 flex">
|
||||
<view class="tag xxs m-r-10 white" v-if="shopInfo.type == 1">
|
||||
自营
|
||||
</view>
|
||||
{{ shopInfo.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="column white br60 sm flex-none subscribe-btn m-t-20"
|
||||
:class="{ gray: shopInfo.shop_follow_status === 1 }"
|
||||
@tap="changeShopFollowFun"
|
||||
>
|
||||
<view>
|
||||
{{ shopInfo.shop_follow_status === 1 ? '已关注' : '关注' }}
|
||||
</view>
|
||||
<view class="xxs m-t-5"> {{ shopInfo.follow_num }}人关注 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-header bg-white">
|
||||
<view class="store-row flex row-between" @click="showcodePopup = true">
|
||||
<view class="m-r-20"> 店铺二维码 </view>
|
||||
<image
|
||||
style="height: 40rpx; width: 40rpx"
|
||||
src="../../static/images/shop.png"
|
||||
></image>
|
||||
</view>
|
||||
<view class="store-row flex row-between" @tap="goLicense">
|
||||
<view class="m-r-20"> 资质证明 </view>
|
||||
<image
|
||||
style="height: 40rpx; width: 40rpx"
|
||||
src="../../static/images/Certificate.png"
|
||||
></image>
|
||||
</view>
|
||||
<router-link
|
||||
:to="{ path: '/bundle/pages/chat/chat', query: { shop_id: shopInfo.id } }"
|
||||
>
|
||||
<view class="store-row flex row-between">
|
||||
<view class="">联系客服</view>
|
||||
<!-- <u-icon name="arrow-right" /> -->
|
||||
<image
|
||||
style="height: 40rpx; width: 40rpx"
|
||||
src="../../static/images/service.png"
|
||||
></image>
|
||||
</view>
|
||||
</router-link>
|
||||
</view>
|
||||
<view class="store-header m-t-20 bg-white">
|
||||
<view class="store-row flex row-between" @click="showPopup = true">
|
||||
<view class="m-r-20 flex-none"> 店铺简介 </view>
|
||||
<view class="flex">
|
||||
<view class="nr line-1">
|
||||
{{ shopInfo.intro }}
|
||||
</view>
|
||||
<u-icon name="arrow-right" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-row flex row-between">
|
||||
<view class="m-r-20 flex-none"> 所在地址 </view>
|
||||
<view class="nr line-1">
|
||||
{{ shopInfo.province }}
|
||||
{{ shopInfo.city }}
|
||||
{{ shopInfo.district }}
|
||||
{{ shopInfo.address }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-row flex row-between">
|
||||
<view class="m-r-20 flex-none"> 开业时间 </view>
|
||||
<view class="nr line-1">
|
||||
{{ shopInfo.create_time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <router-link
|
||||
:to="{ path: '/pages/store_index/store_index', query: { shop_id: shopInfo.id } }"
|
||||
> -->
|
||||
<view class="contact-offical flex row-center bg-white m-t-20" @click="handleClick">
|
||||
查看全部商品
|
||||
</view>
|
||||
<!-- </router-link> -->
|
||||
<u-popup
|
||||
v-model="showPopup"
|
||||
mode="bottom"
|
||||
border-radius="14"
|
||||
:closeable="true"
|
||||
:safe-area-inset-bottom="true"
|
||||
mask-close-able
|
||||
>
|
||||
<view style="padding: 0 30rpx">
|
||||
<view class="store-desc">店铺简介</view>
|
||||
<scroll-view scroll-y="true" class="scroll-Y" style="height: 600rpx">
|
||||
{{ shopInfo.intro }}
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup
|
||||
v-model="showcodePopup"
|
||||
mode="center"
|
||||
border-radius="14"
|
||||
:closeable="false"
|
||||
mask-close-able
|
||||
>
|
||||
<view
|
||||
style="padding: 30rpx; width: 600rpx"
|
||||
class="bg-white flex flex-col row-center"
|
||||
>
|
||||
<view class="store-desc bold xxl"> {{ shopInfo.name }}</view>
|
||||
<view style="text-align: center"> 邀请好友来扫一扫分享店铺给TA</view>
|
||||
<u-image
|
||||
class="image-code"
|
||||
width="250rpx"
|
||||
height="250rpx"
|
||||
:src="shopInfo.qr_code"
|
||||
/>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getShopInfo, changeShopFollow } from '@/api/shop'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopInfo: {},
|
||||
showPopup: false,
|
||||
id: '',
|
||||
showcodePopup: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getShopInfoFun()
|
||||
},
|
||||
methods: {
|
||||
async changeShopFollowFun() {
|
||||
if (!this.isLogin) return this.$Router.push('/pages/login/login')
|
||||
const { code, msg } = await changeShopFollow({
|
||||
shop_id: this.id
|
||||
})
|
||||
if (code == 1) {
|
||||
this.$toast({
|
||||
title: msg
|
||||
})
|
||||
this.getShopInfoFun()
|
||||
}
|
||||
},
|
||||
async getShopInfoFun() {
|
||||
const { id } = this.$Route.query
|
||||
this.id = id
|
||||
const { data, code } = await getShopInfo({
|
||||
shop_id: id,
|
||||
//#ifdef MP-WEIXIN
|
||||
terminal: 1,
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
terminal: 2
|
||||
//#endif
|
||||
})
|
||||
if (code == 1) {
|
||||
this.shopInfo = data
|
||||
}
|
||||
},
|
||||
|
||||
goLicense() {
|
||||
this.$Router.push({
|
||||
path: '/bundle/pages/license/license',
|
||||
query: {
|
||||
id: this.shopInfo.id
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick() {
|
||||
this.$Router.back()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取图片域名
|
||||
$getImageUri() {
|
||||
return (url) => this.$store.state.app.config.base_domain + url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.store-detail {
|
||||
.store-header {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
.store-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 40rpx 0;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
|
||||
.tag {
|
||||
background: linear-gradient(267deg, #ff2c3c 0%, #f52e99 100%);
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 9rpx;
|
||||
}
|
||||
.subscribe-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(97deg, #ff5784 0%, #ff2c3c 100%);
|
||||
height: 78rpx;
|
||||
width: 228rpx;
|
||||
&.gray {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-row {
|
||||
padding: 24rpx 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-desc {
|
||||
padding: 20rpx 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.image-code {
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
.contact-offical {
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user