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.
398 lines
8.7 KiB
398 lines
8.7 KiB
3 months ago
|
<template>
|
||
|
|
<view class="storeInfo" :style="colorStyle">
|
||
|
|
<view class="headerBg">
|
||
|
|
<image :src="storeInfo.background_image" mode="aspectFill" class="image"></image>
|
||
|
|
<view class="shade"></view>
|
||
|
|
<!-- #ifdef MP || APP -->
|
||
|
|
<view :style="{height: getHeight.barTop+'px'}"></view>
|
||
|
|
<view :style="{height: getHeight.barHeight+'px'}"></view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view style="height: 224rpx;"></view>
|
||
|
|
</view>
|
||
|
|
<view class="container">
|
||
|
|
<!-- #ifdef MP || APP -->
|
||
|
|
<NavBar titleText="店铺信息" textColor="#FFFFFF" iconColor="#FFFFFF" showBack></NavBar>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="content">
|
||
|
|
<view class="title-box">
|
||
|
|
<image :src="storeInfo.image" class="logo"></image>
|
||
|
|
<view class="title">{{storeInfo.name || ''}}</view>
|
||
|
|
<view class="address">{{(storeInfo.address+storeInfo.detailed_address) || ''}}</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="latitude" class="map-box">
|
||
|
|
<map name="" style="width: 100%; height: 100%;" :scale="18" :latitude="latitude" :longitude="longitude" :markers="markers" @markertap="showMaoLocation"></map>
|
||
|
|
</view>
|
||
|
|
<!-- #ifdef APP -->
|
||
|
|
<tuiCollapse :index="index" :current="current" @click="qrcodeCollapse">
|
||
|
|
<template v-slot:title>
|
||
|
|
<tuiListCell :hover="false">店铺二维码</tuiListCell>
|
||
|
|
</template>
|
||
|
|
<template v-slot:content>
|
||
|
|
<view class="acea-row row-center-wrapper qrcode-image">
|
||
|
|
<w-qrcode :options="config.qrc"></w-qrcode>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</tuiCollapse>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifndef APP -->
|
||
|
|
<view class="qrcode-box acea-row row-between row-middle" @click="showQRCode">
|
||
|
|
<view class="name">店铺二维码</view>
|
||
|
|
<view class="value">
|
||
|
|
<text class="iconfont icon-ic_QRcode" @click="showQRCode"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="time-box">
|
||
|
|
<view class="item acea-row">
|
||
|
|
<view class="name">店铺简介</view>
|
||
|
|
<view class="value">{{storeInfo.introduction}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="item acea-row">
|
||
|
|
<view class="name">营业时间</view>
|
||
|
|
<view class="value">{{storeInfo.day_start}}-{{storeInfo.day_end}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="item acea-row">
|
||
|
|
<view class="name">所在地区</view>
|
||
|
|
<view class="value">{{storeInfo.address}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="item acea-row">
|
||
|
|
<view class="name">联系电话</view>
|
||
|
|
<view class="value">{{storeInfo.phone}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<navigator url="" open-type="navigateBack" hover-class="none" class="btn">查看全部商品</navigator>
|
||
|
|
</view>
|
||
|
|
<view v-if="dialogShow">
|
||
|
|
<view class="mask"></view>
|
||
|
|
<view class="dialog">
|
||
|
|
<view class="title">{{storeInfo.name}}</view>
|
||
|
|
<!-- #ifdef MP -->
|
||
|
|
<image :src="storeInfo.qrcode.routine" class="image"></image>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifdef H5 -->
|
||
|
|
<image v-if="$wechat.isWeixin()" :src="storeInfo.qrcode.wechat" class="image"></image>
|
||
|
|
<view class="acea-row row-center-wrapper" style="margin: 36rpx 0 22rpx;" v-else>
|
||
|
|
<w-qrcode :options="config.qrc"></w-qrcode>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="tips">长按识别二维码进入店铺</view>
|
||
|
|
<text class="iconfont icon-ic_close1" @click="dialogShow = false"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import NavBar from '@/components/NavBar.vue';
|
||
|
|
import tuiCollapse from '@/components/thorui/tui-collapse.vue';
|
||
|
|
import tuiListCell from '@/components/thorui/tui-list-cell.vue';
|
||
|
|
import colors from '@/mixins/color.js';
|
||
|
|
import {
|
||
|
|
getStoreData
|
||
|
|
} from '@/api/store.js';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
NavBar,
|
||
|
|
tuiCollapse,
|
||
|
|
tuiListCell
|
||
|
|
},
|
||
|
|
mixins: [colors],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
getHeight: this.$util.getWXStatusHeight(),
|
||
|
|
store_id: 0,
|
||
|
|
storeInfo: {
|
||
|
|
latitude: 0,
|
||
|
|
longitude: 0,
|
||
|
|
day_start: '',
|
||
|
|
day_end: '',
|
||
|
|
},
|
||
|
|
latitude: 0,
|
||
|
|
longitude: 0,
|
||
|
|
markers: [],
|
||
|
|
dialogShow: false,
|
||
|
|
config: {
|
||
|
|
qrc: {
|
||
|
|
code: '',
|
||
|
|
size: 380, // 二维码大小
|
||
|
|
level: 3, //等级 0～4
|
||
|
|
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
||
|
|
border: {
|
||
|
|
color: ['#eee', '#eee'], //边框颜色支持渐变色
|
||
|
|
lineWidth: 3, //边框宽度
|
||
|
|
},
|
||
|
|
color: ['#333', '#333'], //边框颜色支持渐变色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
index: 0,
|
||
|
|
current: -1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.store_id = options.store_id;
|
||
|
|
// #ifndef MP
|
||
|
|
this.config.qrc.code = '/pages/store/home/index?id=' + options.store_id;
|
||
|
|
// #endif
|
||
|
|
this.getStoreData();
|
||
|
|
},
|
||
|
|
onShow() {},
|
||
|
|
methods: {
|
||
|
|
qrcodeCollapse(e) {
|
||
|
|
this.current = this.current == e.index ? -1 : e.index;
|
||
|
|
},
|
||
|
|
showQRCode() {
|
||
|
|
this.dialogShow = true;
|
||
|
|
},
|
||
|
|
showMaoLocation() {
|
||
|
|
let data = {
|
||
|
|
latitude: Number(this.storeInfo.latitude),
|
||
|
|
longitude: Number(this.storeInfo.longitude),
|
||
|
|
name: this.storeInfo.name,
|
||
|
|
address: `${this.storeInfo.address+this.storeInfo.detailed_address}`,
|
||
|
|
};
|
||
|
|
// #ifdef H5
|
||
|
|
if (this.$wechat.isWeixin()) {
|
||
|
|
data.scale = 13;
|
||
|
|
return this.$wechat.seeLocation(data);
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
uni.openLocation(data);
|
||
|
|
},
|
||
|
|
getStoreData() {
|
||
|
|
getStoreData({
|
||
|
|
store_id: this.store_id
|
||
|
|
}).then(res => {
|
||
|
|
this.storeInfo = res.data;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.latitude = res.data.latitude
|
||
|
|
this.longitude = res.data.longitude
|
||
|
|
this.markers = [{
|
||
|
|
id: res.data.id,
|
||
|
|
latitude: res.data.latitude,
|
||
|
|
longitude: res.data.longitude,
|
||
|
|
iconPath: '../static/marker-icon.png',
|
||
|
|
width: 42,
|
||
|
|
height: 42,
|
||
|
|
callout: {
|
||
|
|
content: res.data.name,
|
||
|
|
bgColor: '#FFFFFF',
|
||
|
|
padding: 6,
|
||
|
|
borderRadius: 8,
|
||
|
|
textAlign: 'center',
|
||
|
|
display: 'ALWAYS'
|
||
|
|
}
|
||
|
|
}];
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.headerBg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shade {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4047) 0%, #F5F5F5 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.storeInfo {
|
||
|
|
.container {
|
||
|
|
position: relative;
|
||
|
|
padding: 108rpx 20rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
padding: 0 32rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-box {
|
||
|
|
position: relative;
|
||
|
|
// min-height: 176rpx;
|
||
|
|
padding-top: 104rpx;
|
||
|
|
padding-bottom: 32rpx;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
position: absolute;
|
||
|
|
top: -68rpx;
|
||
|
|
left: 50%;
|
||
|
|
width: 132rpx;
|
||
|
|
height: 132rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 32rpx;
|
||
|
|
line-height: 44rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-box {
|
||
|
|
padding: 32rpx 0;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-top: 40rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
padding-left: 32rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qrcode-box {
|
||
|
|
padding: 40rpx 0 32rpx;
|
||
|
|
border-bottom: 2rpx solid #F8F8F8;
|
||
|
|
line-height: 46rpx;
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconfont {
|
||
|
|
font-size: 38rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-box {
|
||
|
|
height: 352rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
background: #DFDFDF;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
height: 88rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
color: var(--view-theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
right: 65rpx;
|
||
|
|
left: 65rpx;
|
||
|
|
z-index: 6;
|
||
|
|
max-width: 620rpx;
|
||
|
|
padding: 60rpx 0 42rpx;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
|
||
|
|
.title {
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 32rpx;
|
||
|
|
line-height: 44rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
display: block;
|
||
|
|
width: 420rpx;
|
||
|
|
height: 420rpx;
|
||
|
|
margin: 36rpx auto 22rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 26rpx;
|
||
|
|
line-height: 36rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconfont {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -108rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 60rpx;
|
||
|
|
color: #CCCCCC;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.tui-list-cell {
|
||
|
|
padding: 40rpx 0 !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.open {
|
||
|
|
top: 50% !important;
|
||
|
|
right: 20rpx !important;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.tui-icon-arrow {
|
||
|
|
right: 0 !important;
|
||
|
|
margin-top: -5px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qrcode-image {
|
||
|
|
padding: 8rpx 0 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.tui-collapse {
|
||
|
|
border-bottom: 2rpx solid #F8F8F8;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.tui-list-cell::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|