398 lines
8.7 KiB
Vue
398 lines
8.7 KiB
Vue
<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> |