[本时生活h5端]
This commit is contained in:
230
pages/store/details.vue
Normal file
230
pages/store/details.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user