236 lines
6.9 KiB
Vue
236 lines
6.9 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 门店详情 -->
|
||
<view class="detailsImg">
|
||
<image :src="storeinfo.cover" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="detailsCont">
|
||
<view class="detailsName">
|
||
{{ storeinfo.title }}
|
||
</view>
|
||
<view class="detailsLabel">
|
||
<view class="detailsLabel-left">
|
||
<image src="/static/static/icon/site_icon.png"></image>
|
||
<view class="detailsLabel-name">
|
||
<text>{{ storeinfo.address }}</text>
|
||
距您 {{ distance }}
|
||
</view>
|
||
</view>
|
||
<image class="detailsLabel-tel" src="/static/icon/tel.png" @tap="tel"></image>
|
||
</view>
|
||
<view class="detailsLabel">
|
||
<view class="detailsLabel-left">
|
||
<image src="/static/icon/time_icon.png"></image>
|
||
<view class="detailsLabel-name">
|
||
<text>营业时间</text>
|
||
<block v-if="storeinfo.open_time != null">{{ storeinfo.open_time }}</block>
|
||
<block v-else>00：00</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 按钮 -->
|
||
<view class="detailsBtn">
|
||
<view class="detailsBtn-cont" @tap="siteMap">
|
||
去导航
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { storesShow } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
storeinfo : '', // 门店详情
|
||
distance : 0, // 门店距离换算
|
||
longitude : 0, // 门店详情
|
||
latitude : 0, // 门店详情
|
||
};
|
||
},
|
||
onLoad(options){
|
||
storesShow({
|
||
store_id: options.store_id,
|
||
user_lng: options.user_lng,
|
||
user_lat: options.user_lat
|
||
}).then(res => {
|
||
let distance = res.distance;
|
||
if (distance > 1000) {
|
||
distance = distance / 1000 + "km";
|
||
} else {
|
||
distance = distance + "m";
|
||
}
|
||
this.storeinfo = res
|
||
this.distance = distance
|
||
}).catch(err => {
|
||
if (!err.login) {
|
||
if(options.type == 'campus') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/campus/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}else {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/auth/login'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
methods:{
|
||
// 拨打电话
|
||
tel(e) {
|
||
let tel = this.storeinfo.mobile
|
||
uni.showActionSheet({
|
||
itemList : ['呼叫商家'],
|
||
success : res =>{
|
||
if(res.tapIndex==0){
|
||
uni.makePhoneCall({
|
||
phoneNumber: tel
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 导航
|
||
siteMap(){
|
||
// uni.openLocation({
|
||
// latitude : parseFloat(this.storeinfo.latitude),
|
||
// longitude : parseFloat(this.storeinfo.longitude),
|
||
// address : this.storeinfo.address
|
||
// })
|
||
let key = '34ea3d2958aee3ffc154738551a976f9',//高德地图key
|
||
latitude = parseFloat(this.storeinfo.latitude),
|
||
longitude = parseFloat(this.storeinfo.longitude)
|
||
window.location.href = "http://uri.amap.com/marker?position="+ longitude +","+latitude +"&name="+ name +"&coordinate=gaode&callnative=1";
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 门店详情 */
|
||
.detailsImg {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 60%;
|
||
}
|
||
|
||
.detailsImg image {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.detailsCont {
|
||
background: #fff;
|
||
}
|
||
|
||
.detailsName {
|
||
font-size: 34rpx;
|
||
padding: 30rpx;
|
||
font-weight: 600;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detailsLabel {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.detailsLabel::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 0;
|
||
background: #e7e7e7;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
}
|
||
|
||
.detailsLabel-left {
|
||
width: calc(100%- 40rpx);
|
||
display: flex;
|
||
flex: 1;
|
||
color: #5e5e5e;
|
||
}
|
||
|
||
.detailsLabel-left image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin: 20rpx 20rpx 0 0;
|
||
}
|
||
|
||
.detailsLabel-tel {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.detailsLabel-name {
|
||
font-size: 26rpx;
|
||
width: calc(100% - 110rpx);
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.detailsLabel-name text {
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.detailsLabel-add {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.detailsBtn {
|
||
background: #fff;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
text-align: center;
|
||
left: 0;
|
||
bottom: 0;
|
||
position: fixed;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detailsBtn-cont {
|
||
width: 100%;
|
||
background: #ef8e41;
|
||
color: #fff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx;
|
||
}
|
||
</style>
|