You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
12 KiB
438 lines
12 KiB
<template>
|
|
<!-- 拼团商家详情页 -->
|
|
<view class="page1">
|
|
<view class="title">
|
|
<view class="title-sreach">
|
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="left" size="28"></uni-icons>
|
|
</view>
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
|
商家详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content" v-if="detailLoaded">
|
|
<view class="box1 shop-card">
|
|
<view class="left">
|
|
<view style="display: flex;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3721d2aa18ac4700aa7ac4dfeb272b09.png" alt="" style="width: 48rpx;height: 48rpx;"/>
|
|
<text class="shop-name">{{shopItem.shopName || '商家详情'}}</text>
|
|
</view>
|
|
<view class="shop-subtitle" v-if="shopItem.subtitle">{{shopItem.subtitle}}</view>
|
|
<view class="shop-meta">
|
|
<text>{{shopTypeText}}</text>
|
|
<text>评分 {{shopScoreText}}</text>
|
|
<text>销量 {{saleCountText}}</text>
|
|
</view>
|
|
<view class="shop-info-row">
|
|
<uni-icons class="shop-info-icon" type="location" size="13"></uni-icons>
|
|
<text class="shop-info-text">{{shopItem.shopAddress || '暂无地址'}}</text>
|
|
</view>
|
|
<view class="shop-info-row">
|
|
<uni-icons class="shop-info-icon" type="loop" size="13"></uni-icons>
|
|
<text class="shop-info-text">{{businessTimeText}}</text>
|
|
</view>
|
|
<view class="shop-info-row">
|
|
<uni-icons class="shop-info-icon" type="paperplane" size="13"></uni-icons>
|
|
<text class="shop-info-text">{{deliveryText}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<img @tap="makeCall(shopItem.contactPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 60rpx;height: 60rpx;position: absolute;top: 64rpx;right: 60rpx;"/>
|
|
</view>
|
|
</view>
|
|
<view class="box1">
|
|
<view style="display: flex;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/86004fa6b60e477ea1622fc0bf4c99de.png" alt="" style="width: 48rpx;height: 48rpx;" />
|
|
<text style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">
|
|
商家资质
|
|
</text>
|
|
</view>
|
|
<view class="qualification-list" v-if="qualificationImages.length > 0">
|
|
<view class="qualification-item" v-for="(item,index) in qualificationImages" :key="index" @tap="largeImg(item.url)">
|
|
<image :src="item.url" mode="aspectFill"></image>
|
|
<text>{{item.label}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="empty-text" v-else>
|
|
暂无资质图片
|
|
</view>
|
|
</view>
|
|
<view class="box1">
|
|
<view style="display: flex;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png" alt="" style="width: 48rpx;height: 48rpx;" />
|
|
<text style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">商家公告</text>
|
|
</view>
|
|
<view style="color: #777;line-height: 48rpx;margin-top: 20rpx;">
|
|
公告：{{shopItem.remark || '暂无公告'}}
|
|
</view>
|
|
</view>
|
|
<view class="box1">
|
|
<view style="display: flex;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3721d2aa18ac4700aa7ac4dfeb272b09.png" alt="" style="width: 48rpx;height: 48rpx;" />
|
|
<text style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">商家信息</text>
|
|
</view>
|
|
<view class="detail-list">
|
|
<view class="detail-row" v-if="shopItem.shopLename">
|
|
<text>法人</text>
|
|
<text>{{shopItem.shopLename}}</text>
|
|
</view>
|
|
<view class="detail-row" v-if="shopItem.contactPhone">
|
|
<text>联系电话</text>
|
|
<text>{{shopItem.contactPhone}}</text>
|
|
</view>
|
|
<view class="detail-row" v-if="shopItem.shopAreaTitle">
|
|
<text>所属区域</text>
|
|
<text>{{shopItem.shopAreaTitle}}</text>
|
|
</view>
|
|
<view class="detail-row" v-if="shopItem.isbrandflag != null">
|
|
<text>品牌店铺</text>
|
|
<text>{{shopItem.isbrandflag == 1 ? '是' : '否'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content" v-else>
|
|
<view class="box1 empty-text">商家信息加载中...</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: {},
|
|
isPintuan:true,
|
|
shopItem:{},
|
|
shopImages:[],
|
|
qualificationImages:[],
|
|
detailLoaded:false
|
|
}
|
|
},
|
|
computed: {
|
|
businessTimeText() {
|
|
const takeaway = this.shopItem.shopTakeaway || {};
|
|
if (!takeaway.businessHourBegin || !takeaway.businessHourEnd) return '营业时间暂无';
|
|
return '周一到周日 ' + takeaway.businessHourBegin + '-' + takeaway.businessHourEnd;
|
|
},
|
|
shopTypeText() {
|
|
const takeaway = this.shopItem.shopTakeaway || {};
|
|
return this.shopItem.shopTypeTitle || takeaway.type || '美食';
|
|
},
|
|
shopScoreText() {
|
|
return this.shopItem.shopScore || '5.0';
|
|
},
|
|
saleCountText() {
|
|
return this.shopItem.saleCount != null ? this.shopItem.saleCount : 0;
|
|
},
|
|
deliveryText() {
|
|
if (this.shopItem.supportShopDelivery == 1) {
|
|
const fee = this.shopItem.orderBkge != null ? this.shopItem.orderBkge : 0;
|
|
const duration = this.shopItem.shopDeliveryDuration ? this.shopItem.shopDeliveryDuration + '分钟' : '尽快送达';
|
|
const location = this.shopItem.shopDeliveryLocation == 1 ? '送到宿舍' : this.shopItem.shopDeliveryLocation == 2 ? '送到楼下' : '支持自配送';
|
|
return '商家自配送 ' + duration + '，' + location + '，配送费￥' + fee;
|
|
}
|
|
if (this.shopItem.supportTransferDelivery == 1) {
|
|
const duration = this.shopItem.transferDeliveryDuration ? this.shopItem.transferDeliveryDuration + '分钟' : '尽快送达';
|
|
return '中转配送 ' + duration + (this.shopItem.transferAddressName ? '，' + this.shopItem.transferAddressName : '');
|
|
}
|
|
if (this.shopItem.groupDeliveryTime) {
|
|
return '预计配送 ' + this.shopItem.groupDeliveryTime + '分钟';
|
|
}
|
|
return '配送信息暂无';
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
onLoad(option) {
|
|
this.initShopItem(option)
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
methods: {
|
|
initShopItem(option) {
|
|
let id = option.id || '';
|
|
if (!id && option.item) {
|
|
const routeItem = this.parseRouteItem(option.item) || {};
|
|
id = routeItem.id || (routeItem.shop && routeItem.shop.id) || '';
|
|
}
|
|
if (id) {
|
|
this.getShopDetail(id);
|
|
} else {
|
|
this.detailLoaded = true;
|
|
}
|
|
},
|
|
parseRouteItem(item) {
|
|
if (item == null || item === '') return null;
|
|
try {
|
|
return JSON.parse(decodeURIComponent(item));
|
|
} catch (e) {
|
|
try {
|
|
return JSON.parse(item);
|
|
} catch (err) {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
normalizeDetailResult(result) {
|
|
const shop = result.shop ? result.shop : result;
|
|
const shopTakeaway = result.shopTakeaway || shop.shopTakeaway || {};
|
|
const products = result.products || shop.products || [];
|
|
return {
|
|
...shop,
|
|
shopTakeaway,
|
|
products,
|
|
groupDeliveryTime: shop.groupDeliveryTime || result.groupDeliveryTime
|
|
};
|
|
},
|
|
setShopImages() {
|
|
const imageText = this.shopItem.shopImages;
|
|
if (!imageText) {
|
|
this.shopImages = [];
|
|
this.qualificationImages = [];
|
|
return;
|
|
}
|
|
const labels = ['', '', '营业执照'];
|
|
const images = [];
|
|
String(imageText).split('@@').forEach((item, index) => {
|
|
if (!item || item === 'undefined' || item === 'null') return;
|
|
if (index < 2) return;
|
|
if (index === 3) {
|
|
this.parseExtraImages(item).forEach((url, extraIndex) => {
|
|
images.push({
|
|
label: extraIndex === 0 ? '补充证照' : '补充证照' + (extraIndex + 1),
|
|
url
|
|
});
|
|
});
|
|
return;
|
|
}
|
|
images.push({
|
|
label: labels[index] || '资质图片' + (index + 1),
|
|
url: item
|
|
});
|
|
});
|
|
this.qualificationImages = images.filter(item => item.url);
|
|
this.shopImages = this.qualificationImages.map(item => item.url);
|
|
},
|
|
parseExtraImages(value) {
|
|
try {
|
|
const parsed = JSON.parse(value);
|
|
if (Array.isArray(parsed)) {
|
|
return parsed.filter(item => item && item !== 'undefined' && item !== 'null');
|
|
}
|
|
return parsed ? [parsed] : [];
|
|
} catch (e) {
|
|
return value ? [value] : [];
|
|
}
|
|
},
|
|
getShopDetail(id) {
|
|
let area = uni.getStorageSync('area');
|
|
let regionId = '';
|
|
try {
|
|
regionId = area ? JSON.parse(area).id : '';
|
|
} catch (e) {}
|
|
this.tui.request("/app/shop/getShopInfoById", "POST", {
|
|
id: id,
|
|
regionId: regionId
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200 && res.result) {
|
|
this.shopItem = this.normalizeDetailResult(res.result);
|
|
uni.setStorageSync('groupShopDetail', this.shopItem);
|
|
this.setShopImages();
|
|
}
|
|
this.detailLoaded = true;
|
|
uni.hideLoading();
|
|
}).catch(() => {
|
|
this.detailLoaded = true;
|
|
});
|
|
},
|
|
//查看大图
|
|
largeImg(img) {
|
|
if (!img) return;
|
|
uni.previewImage({
|
|
current: img,
|
|
urls: this.shopImages
|
|
})
|
|
},
|
|
//拨打电话
|
|
makeCall(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.title{
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
width: 100%;
|
|
height: 54%;
|
|
}
|
|
|
|
.content{
|
|
position: absolute;
|
|
top: 200rpx;
|
|
width: 95%;
|
|
margin-left: 2.5%;
|
|
}
|
|
|
|
.title-sreach{
|
|
width: 100%;
|
|
display: flex;
|
|
height: 200rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.back-btn{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 20rpx;
|
|
}
|
|
.title-name{
|
|
padding-top: 110rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.box1{
|
|
width: 95%;
|
|
margin: 0 auto 20rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
}
|
|
.shop-name{
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
margin-left: 10rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.shop-subtitle{
|
|
color: #08735d;
|
|
line-height: 36rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
.shop-meta{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 16rpx;
|
|
}
|
|
.shop-meta text{
|
|
padding: 4rpx 14rpx;
|
|
background: rgba(223, 255, 176, 1);
|
|
color: #08735d;
|
|
border-radius: 8rpx;
|
|
line-height: 32rpx;
|
|
margin-right: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.shop-card{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.shop-info-row{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
color: #777;
|
|
line-height: 40rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.shop-info-icon{
|
|
flex-shrink: 0;
|
|
line-height: 40rpx;
|
|
}
|
|
.shop-info-text{
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-left: 10rpx;
|
|
word-break: break-all;
|
|
}
|
|
.qualification-list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20rpx;
|
|
}
|
|
.qualification-item{
|
|
width: 156rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.qualification-item image{
|
|
display: block;
|
|
width: 156rpx;
|
|
height: 104rpx;
|
|
border-radius: 8rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
.qualification-item text{
|
|
display: block;
|
|
color: #777;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
}
|
|
.detail-list{
|
|
margin-top: 16rpx;
|
|
}
|
|
.detail-row{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #777;
|
|
line-height: 44rpx;
|
|
}
|
|
.detail-row text:first-child{
|
|
flex-shrink: 0;
|
|
margin-right: 24rpx;
|
|
color: #00231C;
|
|
}
|
|
.detail-row text:last-child{
|
|
flex: 1;
|
|
text-align: right;
|
|
word-break: break-all;
|
|
}
|
|
.empty-text{
|
|
color: #777;
|
|
line-height: 48rpx;
|
|
}
|
|
.left{
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.right{
|
|
flex-shrink: 0;
|
|
width: 120rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
}
|
|
</style>
|