270 lines
7.2 KiB
Vue
270 lines
7.2 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<custom-navbar
|
||
|
|
title="门店详情"
|
||
|
|
:showBack="true"
|
||
|
|
backgroundColor="#fff"
|
||
|
|
></custom-navbar>
|
||
|
|
<view class="isCode">
|
||
|
|
<view class="isCode-title">门店信息</view>
|
||
|
|
<view class="isCode-cards">
|
||
|
|
<view class="isCode-card card-border">
|
||
|
|
<view class="card-title"
|
||
|
|
>营业时间
|
||
|
|
<text class="card-business">{{ sjdetail.business_time }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="isCode-card card-border">
|
||
|
|
<view class="card-title">经营类目</view>
|
||
|
|
<view class="detail-info-user__tabs">
|
||
|
|
<view
|
||
|
|
v-for="(item, index) in tabsPopList"
|
||
|
|
:key="index"
|
||
|
|
class="detail-info-user__tabs__tab"
|
||
|
|
>
|
||
|
|
{{ item.name }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="isCode-card card-border">
|
||
|
|
<view class="card-title">商家地址</view>
|
||
|
|
<view class="card-info">
|
||
|
|
<view class="card-info-left">
|
||
|
|
{{ sjdetail.address }}
|
||
|
|
</view>
|
||
|
|
<image
|
||
|
|
@click="openMap"
|
||
|
|
src="/static/images/shop/address.png"
|
||
|
|
class="card-info-right"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="isCode-card">
|
||
|
|
<view class="card-title">商家电话</view>
|
||
|
|
<view class="card-info">
|
||
|
|
<view class="card-info-left">
|
||
|
|
{{ sjdetail.legal_phone }}
|
||
|
|
</view>
|
||
|
|
<image src="/static/images/shop/phone.png" class="card-info-right" @click="contactService(sjdetail.legal_phone)" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="isCode-title" style="padding: 20rpx 0">营业执照</view>
|
||
|
|
<view class="isCode-cards">
|
||
|
|
<image
|
||
|
|
mode="widthFix"
|
||
|
|
:src="sjdetail.uscc_photo"
|
||
|
|
class="isCode-cards-license"
|
||
|
|
></image>
|
||
|
|
<wmWatermark text="美融融专用"> </wmWatermark>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import _public from "@/utils/public";
|
||
|
|
import permissionUtils from "@/utils/per";
|
||
|
|
import request from "../../utils/request";
|
||
|
|
import wmWatermark from "@/components/wm-watermark/wm-watermark.vue";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
wmWatermark,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
sjdetail: {},
|
||
|
|
userObj: {},
|
||
|
|
tabsPopList: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
console.log(options);
|
||
|
|
let userAdrees = uni.getStorageSync("userAdrees");
|
||
|
|
if (userAdrees) {
|
||
|
|
this.userObj.userLngz = userAdrees.longitude;
|
||
|
|
this.userObj.userLat = userAdrees.latitude;
|
||
|
|
} else {
|
||
|
|
this.userObj.userLngz = "117.330043";
|
||
|
|
this.userObj.userLat = "38.372266";
|
||
|
|
}
|
||
|
|
this.userObj.id = options.id;
|
||
|
|
this.getShopDetail();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
openMap() {
|
||
|
|
// #ifdef MP-WEIXIN
|
||
|
|
uni.openLocation({
|
||
|
|
success: () => console.log("打开系统位置地图成功"),
|
||
|
|
fail: (error) => console.log(error),
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
_public.goMap({
|
||
|
|
latitude: parseFloat(this.sjdetail.latitude),
|
||
|
|
longitude: parseFloat(this.sjdetail.longitude),
|
||
|
|
name: this.sjdetail.name,
|
||
|
|
address: this.sjdetail.address,
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
async contactService(phone) {
|
||
|
|
const systemInfo = uni.getSystemInfoSync();
|
||
|
|
if (systemInfo.platform === "ios") {
|
||
|
|
uni.makePhoneCall({ phoneNumber: phone });
|
||
|
|
} else {
|
||
|
|
let permission =
|
||
|
|
systemInfo.platform === "ios"
|
||
|
|
? "phone"
|
||
|
|
: "android.permission.CALL_PHONE";
|
||
|
|
this.isShowPer = true;
|
||
|
|
const firstRequest = !plus.storage.getItem(`perm_${permission}`);
|
||
|
|
if (firstRequest) this.isShowPer = true;
|
||
|
|
const { granted } = await permissionUtils.checkPermission(
|
||
|
|
"phone",
|
||
|
|
"需要拨打电话权限，方便您联系商家或平台"
|
||
|
|
);
|
||
|
|
if (granted) {
|
||
|
|
this.isShowPer = false;
|
||
|
|
uni.makePhoneCall({ phoneNumber: phone });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.isShowPer = false;
|
||
|
|
const confirm = await this.showPermissionDialog(
|
||
|
|
"拨打电话权限申请",
|
||
|
|
"我们需要拨打电话权限，方便您联系商家或平台"
|
||
|
|
);
|
||
|
|
if (!confirm) return;
|
||
|
|
const result = await permissionUtils.requestPermission(
|
||
|
|
"phone",
|
||
|
|
"需要拨打电话权限，方便您联系商家或平台"
|
||
|
|
);
|
||
|
|
if (result) {
|
||
|
|
uni.makePhoneCall({ phoneNumber: phone });
|
||
|
|
} else {
|
||
|
|
locationService.openAppSettings();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取商家详情
|
||
|
|
getShopDetail() {
|
||
|
|
request
|
||
|
|
.post("/user/sjdetail", this.userObj)
|
||
|
|
.then((res) => {
|
||
|
|
this.sjdetail = res.data;
|
||
|
|
this.tabsPopList = [];
|
||
|
|
this.sjdetail.servers_kill.forEach((element, index) => {
|
||
|
|
let obj = {
|
||
|
|
id: element,
|
||
|
|
name: this.sjdetail.servers_kill_arr[index],
|
||
|
|
active: false,
|
||
|
|
};
|
||
|
|
this.tabsPopList.push(obj);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log(err);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.container {
|
||
|
|
background-color: transparent;
|
||
|
|
padding: 25rpx 20rpx;
|
||
|
|
|
||
|
|
.isCode {
|
||
|
|
.isCode-title {
|
||
|
|
margin-left: 15rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #000000;
|
||
|
|
line-height: 45rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.isCode-cards {
|
||
|
|
position: relative;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
padding: 30rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
|
||
|
|
.isCode-cards-license {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.isCode-card {
|
||
|
|
|
||
|
|
.card-title {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 37rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-border {
|
||
|
|
padding-bottom: 31rpx;
|
||
|
|
border-bottom: 2rpx solid #f5f3f3;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-business {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
font-family: DINPro, DINPro;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #5b5b5b;
|
||
|
|
line-height: 33rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-info-user__tabs {
|
||
|
|
margin-top: 16rpx;
|
||
|
|
display: flex;
|
||
|
|
gap: 20rpx;
|
||
|
|
flex-wrap: wrap; /* 允许标签按行换行排列 */
|
||
|
|
|
||
|
|
&__tab {
|
||
|
|
flex-shrink: 0; /* 禁止子项被压缩换行 */
|
||
|
|
background: #f5f5f5;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
padding: 0 8rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #666666;
|
||
|
|
line-height: 28rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
.card-info-left {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #5b5b5b;
|
||
|
|
line-height: 33rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
.card-info-right {
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|