337 lines
10 KiB
Vue
337 lines
10 KiB
Vue
<template>
|
|
<view class="site-detail">
|
|
<!-- 店铺图片 -->
|
|
<image @click="shopImgClick(siteItem)" :src="baseImageUrl + siteItem.imgUrl" class="shop-image" :class="siteItem.isFiveGoatStores?'shop-imageBig':''"></image>
|
|
<view class="shop-introduce">
|
|
<view class="shop-introduce-title">
|
|
<text>{{ siteItem.name }}</text>
|
|
<text class="navi-text" @click="handleNavigate">
|
|
<text v-if="siteItem.distance">{{ siteItem.distance }}KM</text>
|
|
[ {{ $t("home.navigate") }} ]
|
|
</text>
|
|
</view>
|
|
<view class="shop-region">
|
|
<view class="left-wrap">
|
|
<view class="text-wrap">
|
|
<uv-icon name="landmark" custom-prefix="custom-icon" size="12" color="#616e78"></uv-icon>
|
|
<text class="text">{{ siteItem.city }}</text>
|
|
</view>
|
|
<view class="text-wrap">
|
|
<uv-icon name="bus" custom-prefix="custom-icon" size="12" color="#616e78"></uv-icon>
|
|
<text class="text">
|
|
{{ siteItem.district }}
|
|
<text style="color: red;font-weight: bold;"
|
|
@click="handleWayfinding(2)"
|
|
v-if="siteItem.isStopCarGuide">
|
|
[ P ]
|
|
</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<text class="navi-text" @click="handleWayfinding(1)">[ {{ $t("home.wayfinding") }} ]</text>
|
|
</view>
|
|
<view class="shop-address">
|
|
<textEllipsis style="width: 100%;" :address="siteItem.address"></textEllipsis>
|
|
</view>
|
|
<button @click="handleBook(siteItem.id)" class="shop-booknow">
|
|
<!-- #ifdef MP-WEIXIN || H5 || APP-PLUS -->
|
|
{{ $t("home.book") }}
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-XHS -->
|
|
{{ $t("home.quote") }}
|
|
<!-- #endif -->
|
|
</button>
|
|
<view @click="handleSite" v-if="siteItem.isFiveGoatStores" class="shop-booknow isFiveGoatStoresBtn">
|
|
{{ state.isShow ?$t("common.Collapse"):$t("common.Expand") }} 五羊门店 {{ $t("common.OtherStores") }} <view class="isFiveGoatStoresBtn-icon" :class="state.isShow?'rotate':''"><uv-icon name="arrow-down-fill" color="black" size="16"></uv-icon></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="site-detail isFiveGoatStoresSiteDetail" v-if="state.isShow" v-for="item in siteItem.siteList" :key="item.id">
|
|
<image @click="shopImgClick(item)" :src="baseImageUrl + item.imgUrl" class="shop-image"></image>
|
|
<view class="shop-introduce">
|
|
<view class="shop-introduce-title">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
<button @click="handleBook(item.id)" class="shop-booknow">
|
|
<!-- #ifdef MP-WEIXIN || H5 || APP-PLUS -->
|
|
{{ $t("home.book") }}
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-XHS -->
|
|
{{ $t("home.quote") }}
|
|
<!-- #endif -->
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view v-if="state.isShow" class="closeList" @click="handleSite">
|
|
{{ $t("common.Collapse") }} 五羊店 <uv-icon name="arrow-up-fill" color="black" size="20"></uv-icon>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { baseImageUrl, isH5, isXiaohongshu, AppId,envVersion } from "@/config/index.js";
|
|
import { h5GoWx, jumpToSc } from "@/utils/common.js";
|
|
import { useMainStore } from "@/store/index.js";
|
|
import { ref } from "vue";
|
|
const { storeState } = useMainStore();
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
|
|
import textEllipsis from "@/components/textEllipsis.vue";
|
|
|
|
const props = defineProps({
|
|
siteItem: {
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
});
|
|
const state = ref({
|
|
isShow:false,
|
|
})
|
|
const emit = defineEmits(["showCode"]);
|
|
const handleSite = (e)=>{
|
|
state.value.isShow = !state.value.isShow
|
|
}
|
|
// 点击路线跳转
|
|
const handleNavigate = () => {
|
|
uni.openLocation({
|
|
latitude: Number(props.siteItem.latitude),
|
|
longitude: Number(props.siteItem.longitude),
|
|
name: props.siteItem.name,
|
|
address: props.siteItem.address,
|
|
});
|
|
};
|
|
|
|
// 路径指引
|
|
const handleWayfinding = (type) => {
|
|
uni.navigateTo({
|
|
url: `/pages/book/navigate?id=${props.siteItem.id}&type=${type}`,
|
|
});
|
|
};
|
|
|
|
const shopImgClick = (item) => {
|
|
// 管理员展示门禁二维码操作
|
|
if (storeState.userInfo?.userType == 2 || storeState.userInfo?.userType == 3) {
|
|
// if (props.siteItem.accesscontrol == null || props.siteItem.accesscontrol == '') {
|
|
// uni.showToast({
|
|
// title: t('site.noAccessId'),
|
|
// icon: 'none'
|
|
// });
|
|
// } else {
|
|
// // 开门权限只能是用户管理的门店
|
|
// if (storeState.userInfo?.siteList?.includes('*') || storeState.userInfo?.siteList?.includes(props.siteItem.id)) {
|
|
// emit("showCode", props.siteItem);
|
|
// } else {
|
|
// uni.showToast({
|
|
// title: t('site.noPermission'),
|
|
// icon: 'none'
|
|
// });
|
|
// }
|
|
// }
|
|
// 开门权限只能是用户管理的门店
|
|
if (storeState.userInfo?.siteList?.includes('*') || storeState.userInfo?.siteList?.includes(item.id)) {
|
|
emit("showCode", item);
|
|
} else {
|
|
uni.showToast({
|
|
title: t('site.noPermission'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
if (item.vrUrl) {
|
|
uni.navigateTo({
|
|
url: "/pages/webview/web?url=" + encodeURIComponent(item.vrUrl),
|
|
});
|
|
} else {
|
|
handleBook(item.id);
|
|
}
|
|
};
|
|
|
|
const handleBook = (id) => {
|
|
// 如果是H5
|
|
if (isH5 && !isXiaohongshu) {
|
|
h5GoWx()
|
|
return;
|
|
}
|
|
// 根据ID跳到时昌
|
|
let targetItem = jumpToSc.find((item) => item.id == id);
|
|
if (targetItem) {
|
|
uni.navigateToMiniProgram({
|
|
appId: "wx3002eda9d707a977",
|
|
path: `/pages/site/index?id=${targetItem.targetId}`,
|
|
});
|
|
return;
|
|
}
|
|
//如果是迷你仓订仓 正式 就跳转金刚迷你仓
|
|
if(AppId=="wxb20921dfdd0b94f4" && envVersion === 'release'){
|
|
uni.navigateToMiniProgram({
|
|
appId: "wx3c4ab696101d77d1",
|
|
path: `/pages/site/index?id=${id}`,
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/site/index?id=${id}&name=${props.siteItem.name}`,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.site-detail {
|
|
width: 750rpx;
|
|
min-height: 258rpx;
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.14);
|
|
background-color: #fff;
|
|
margin-top: 4rpx;
|
|
padding: 24rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&>.shop-image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 16rpx;
|
|
margin: 0 30rpx;
|
|
}
|
|
&>.shop-imageBig{
|
|
height: 250rpx;
|
|
}
|
|
|
|
&>.shop-introduce {
|
|
width: 460rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
&>.shop-introduce-title {
|
|
width: 100%;
|
|
height: 54rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
&>text {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
&>.shop-introduce-hot {
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 4rpx;
|
|
margin-left: 10rpx;
|
|
background-color: #ff0000;
|
|
text-align: center;
|
|
font-size: 16rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navi-text {
|
|
color: #616e78;
|
|
opacity: 0.8;
|
|
font-size: var(--f22);
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&>.shop-region {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: var(--f21);
|
|
margin: 10rpx 0;
|
|
|
|
.left-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.text-wrap {
|
|
display: flex;
|
|
|
|
.text {
|
|
margin: 0 8rpx;
|
|
color: #616e78;
|
|
font-size: var(--f22);
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navi-text {
|
|
font-size: var(--f22);
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
&>.shop-address {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--f21);
|
|
}
|
|
|
|
&>.shop-booknow {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background-color: var(--main-color);
|
|
color: var(--text-color);
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
}
|
|
&>.isFiveGoatStoresBtn{
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: var(--left-linear2);
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
border-radius: 8rpx;
|
|
.isFiveGoatStoresBtn-icon{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.rotate{
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.isFiveGoatStoresSiteDetail{
|
|
min-height: 150rpx;
|
|
margin: 10rpx 0;
|
|
// align-items: flex-start;
|
|
.shop-image {
|
|
width: 200rpx;
|
|
height: 160rpx;
|
|
object-fit: contain;
|
|
}
|
|
.shop-introduce-title{
|
|
text {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.closeList{
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10rpx 0;
|
|
}
|
|
</style>
|