|
|
|
@ -11,20 +11,30 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<view class="box1" style="display: flex;"> |
|
|
|
<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 style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">{{shopItem.shopName || ''}}</text> |
|
|
|
<text class="shop-name">{{shopItem.shopName || '商家详情'}}</text> |
|
|
|
</view> |
|
|
|
<view style="line-height: 60rpx;height: 60rpx;color: #777;"> |
|
|
|
<uni-icons type="location" size="13"></uni-icons> |
|
|
|
<text style="padding-left: 10rpx;">{{shopItem.shopAddress || '暂无地址'}}</text> |
|
|
|
<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 style="line-height: 60rpx;height: 60rpx;color: #777;"> |
|
|
|
<uni-icons type="loop" size="13"></uni-icons> |
|
|
|
<text style="padding-left: 10rpx;">{{businessTimeText}}</text> |
|
|
|
<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"> |
|
|
|
@ -38,9 +48,14 @@ |
|
|
|
商家资质 |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
<view style="display: flex;margin-top: 20rpx;"> |
|
|
|
<img @tap="largeImg(item)" :src="item" v-for="(item,index) in shopImages" :key="index" alt="" style="width: 156rpx;height: 48rpx;margin-right: 40rpx;" /> |
|
|
|
<text v-if="shopImages.length == 0" style="color: #777;">暂无资质图片</text> |
|
|
|
<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"> |
|
|
|
@ -52,6 +67,33 @@ |
|
|
|
公告：{{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> |
|
|
|
@ -63,7 +105,9 @@ |
|
|
|
menuButtonInfo: {}, |
|
|
|
isPintuan:true, |
|
|
|
shopItem:{}, |
|
|
|
shopImages:[] |
|
|
|
shopImages:[], |
|
|
|
qualificationImages:[], |
|
|
|
detailLoaded:false |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -71,6 +115,32 @@ |
|
|
|
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: { |
|
|
|
@ -84,15 +154,15 @@ |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initShopItem(option) { |
|
|
|
const cacheItem = uni.getStorageSync('groupShopDetail'); |
|
|
|
if (cacheItem) { |
|
|
|
this.shopItem = cacheItem; |
|
|
|
} else if (option.item) { |
|
|
|
this.shopItem = this.parseRouteItem(option.item) || {}; |
|
|
|
let id = option.id || ''; |
|
|
|
if (!id && option.item) { |
|
|
|
const routeItem = this.parseRouteItem(option.item) || {}; |
|
|
|
id = routeItem.id || (routeItem.shop && routeItem.shop.id) || ''; |
|
|
|
} |
|
|
|
this.setShopImages(); |
|
|
|
if (option.id || this.shopItem.id) { |
|
|
|
this.getShopDetail(option.id || this.shopItem.id); |
|
|
|
if (id) { |
|
|
|
this.getShopDetail(id); |
|
|
|
} else { |
|
|
|
this.detailLoaded = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
parseRouteItem(item) { |
|
|
|
@ -107,25 +177,77 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
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() { |
|
|
|
if (!this.shopItem.shopImages) { |
|
|
|
const imageText = this.shopItem.shopImages; |
|
|
|
if (!imageText) { |
|
|
|
this.shopImages = []; |
|
|
|
this.qualificationImages = []; |
|
|
|
return; |
|
|
|
} |
|
|
|
this.shopImages = this.shopItem.shopImages.split('@@').filter(item => item && item !== 'undefined' && item !== 'null'); |
|
|
|
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: JSON.parse(uni.getStorageSync('area')).id |
|
|
|
}, false, false).then((res) => { |
|
|
|
regionId: regionId |
|
|
|
}, false, true).then((res) => { |
|
|
|
if (res.code == 200 && res.result) { |
|
|
|
this.shopItem = res.result; |
|
|
|
uni.setStorageSync('groupShopDetail', res.result); |
|
|
|
this.shopItem = this.normalizeDetailResult(res.result); |
|
|
|
uni.setStorageSync('groupShopDetail', this.shopItem); |
|
|
|
this.setShopImages(); |
|
|
|
} |
|
|
|
this.detailLoaded = true; |
|
|
|
uni.hideLoading(); |
|
|
|
}).catch(() => {}); |
|
|
|
}).catch(() => { |
|
|
|
this.detailLoaded = true; |
|
|
|
}); |
|
|
|
}, |
|
|
|
//查看大图 |
|
|
|
largeImg(img) { |
|
|
|
@ -204,11 +326,113 @@ |
|
|
|
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{ |
|
|
|
width: 80%; |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
.right{ |
|
|
|
width: 20%; |
|
|
|
flex-shrink: 0; |
|
|
|
width: 120rpx; |
|
|
|
height: 160rpx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
</style> |
wangfukang
1 month ago