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.
418 lines
9.1 KiB
418 lines
9.1 KiB
<template>
|
|
<view class="bg" v-if="info">
|
|
<view class="swipe-box">
|
|
<swiper class="swiper" :autoplay="false" :interval="3000" :duration="3000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff">
|
|
<swiper-item v-if="info && info.videourl">
|
|
<video
|
|
:src="showImg(info.videourl)"
|
|
id="detailVideo"
|
|
:poster="
|
|
showImg(info.image)
|
|
"
|
|
@play="play"
|
|
@error="videoErrorCallback"
|
|
controls
|
|
style="width: 100%;height: 100%;"
|
|
object-fit="cover"
|
|
></video>
|
|
</swiper-item>
|
|
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
|
|
<view class="swiper-item">
|
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="box">
|
|
<view class="top-box">
|
|
<view class="line-style">
|
|
<view class="title text-overflowRows">
|
|
{{info.title}}
|
|
</view>
|
|
<view class="collect">
|
|
<image :src="showImg('/uploads/20240827/8a55a8936b9324fa1c7b85c2da9c015b.png')" mode="" v-if="isCollect == 0" @click="collect"></image>
|
|
<image v-else :src="showImg('/uploads/20240827/6bf73216f19c756961496031f8aed053.png')" mode="" @click="collect"></image>
|
|
<view style="padding-top: 3rpx;">收藏</view>
|
|
</view>
|
|
</view>
|
|
<view class="top-info">
|
|
<view class="flex-between" style="margin-bottom: 22.33rpx;">
|
|
<view class="phone">
|
|
<image class="left-icon" :src="showImg('/uploads/20240827/2de3c2594f825f1be57f69323cad4279.png')" mode=""></image>
|
|
<text style="margin-right: 28rpx;">联系电话</text>
|
|
<text>{{info.tel}}</text>
|
|
</view>
|
|
<image class="right-icon" :src="showImg('/uploads/20240827/9d3a4a1b72e909c161e755f06402d132.png')" @click="clickPhone(info.tel)"></image>
|
|
</view>
|
|
<view class="flex-between">
|
|
<view class="address">
|
|
<image class="left-icon" :src="showImg('/uploads/20240827/3d357e6e562de9395f373dc380a790a7.png')" mode=""></image>
|
|
<text style="margin-right: 28rpx;">商家地址</text>
|
|
<text class="text-overflow" style="width: 380rpx;">{{info.address}}</text>
|
|
</view>
|
|
<image class="right-icon" :src="showImg('/uploads/20240827/5b19517f2a630f3a766ea03ac621a3be.png')" @click="goMap(info.lat,info.lon)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-title">美食下单</view>
|
|
<view class="item" v-for="skuItem in sku" :key="skuItem.id" @click="taocanDetail(skuItem)">
|
|
<image class="img" :src="showImg(skuItem.image)" mode=""></image>
|
|
<view class="content">
|
|
<view class="content-top flex-between">
|
|
<view class="center">
|
|
<view class="item-title text-overflowRows">
|
|
{{skuItem.title}}
|
|
</view>
|
|
<image class="right" :src="showImg('/uploads/20240827/0e777c1006a15612a0d449178472fd13.png')" mode=""></image>
|
|
</view>
|
|
<view class="price">{{skuItem.money/100}}</view>
|
|
</view>
|
|
<view class="content-bottom flex-between">
|
|
<view class="tags ">
|
|
<!-- <view class="tag" v-for="(tag,tagIndex) in skuItem.specifications_new_tag.split(',').slice(0,3)" :key="tagIndex">
|
|
{{tag}}
|
|
<text class="shu">|</text>
|
|
</view> -->
|
|
<view class="tag text-overflow w-full" v-if="skuItem.specifications_new_tag">
|
|
{{skuItem.specifications_new_tag.split(',').slice(0,3).join(' | ')}}
|
|
</view>
|
|
</view>
|
|
<view class="order" @click.stop="order(skuItem)">购买</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="box-title">商家简介</view>
|
|
<view class="text-box" v-html="formateRichText(info.price_content)"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: null,
|
|
info: null,
|
|
sku: [],
|
|
isCollect: 0,
|
|
};
|
|
},
|
|
onShow() {
|
|
this.$store.commit('changeFoodInfo', null);
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id;
|
|
this.getDetail();
|
|
this.getSpecificationsByGoodsId()
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
this.Post({
|
|
goods_id: this.id
|
|
},'/api/goods/getGoodDetail').then(res => {
|
|
res.data.goods_new_tag = (res.data.goods_new_tag ? res.data.goods_new_tag.split(',') : []).splice(0, 2);
|
|
this.isCollect = res.data.is_collect
|
|
this.info = res.data
|
|
})
|
|
},
|
|
getSpecificationsByGoodsId() {
|
|
this.Post({
|
|
goods_id: this.id
|
|
},
|
|
'/api/goods/getSpecificationsByGoodsId'
|
|
).then(res => {
|
|
if (res) {
|
|
this.sku = res.data;
|
|
}
|
|
});
|
|
},
|
|
// 收藏
|
|
collect() {
|
|
this.Post({
|
|
type: 3,
|
|
id: this.id
|
|
},
|
|
'/api/scenic/collect'
|
|
).then(res => {
|
|
if (res) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
});
|
|
this.isCollect = !this.isCollect
|
|
console.log(this.isCollect);
|
|
this.$forceUpdate()
|
|
}
|
|
});
|
|
},
|
|
order(item) {
|
|
// uni.setStorageSync('order', JSON.stringify(item)); //规格
|
|
// uni.setStorageSync('info', JSON.stringify(this.info)); //商品
|
|
this.$store.commit('changeFoodInfo', item);
|
|
uni.navigateTo({
|
|
url: '/subPackages/food/foodOrder'
|
|
});
|
|
},
|
|
taocanDetail(item) {
|
|
this.$store.commit('changeFoodInfo', item);
|
|
uni.navigateTo({
|
|
url: '/subPackages/food/taocanDetail'
|
|
});
|
|
},
|
|
|
|
goMap () {
|
|
if (!this.info.tengxun_map) {
|
|
uni.showToast({
|
|
title: '暂未配置地理位置',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.openLocation({
|
|
latitude: Number(this.info.tengxun_map.lat),
|
|
longitude: Number(this.info.tengxun_map.lon),
|
|
name: this.info.title,
|
|
address: this.info.address,
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
});
|
|
},
|
|
},
|
|
onReachBottom() {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
background: #F7F7F7;
|
|
padding-bottom: 50rpx;
|
|
}
|
|
|
|
.swipe-box {
|
|
height: 484rpx;
|
|
position: relative;
|
|
|
|
.swiper-item-num {
|
|
width: 90rpx;
|
|
height: 40rpx;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 50rpx;
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
height: 484rpx;
|
|
position: relative;
|
|
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 484rpx;
|
|
|
|
.item-img {
|
|
width: 750rpx;
|
|
height: 484rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
padding: 0 26.67rpx;
|
|
margin-top: -26rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.top-box {
|
|
width: 697rpx;
|
|
height: 267rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 22rpx 26.67rpx 39rpx 25rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title {
|
|
width: 550rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
margin: 3rpx 0 0 2rpx;
|
|
}
|
|
|
|
.collect image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.line-style {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: PingFang;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.top-info {
|
|
font-family: PingFang;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.left-icon {
|
|
width: 26.67rpx;
|
|
height: 26.67rpx;
|
|
margin-right: 8.67rpx;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 30.67rpx;
|
|
height: 30.67rpx;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.phone, .address {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.box-title {
|
|
margin: 52rpx 0 26rpx 12rpx;
|
|
font-family: PingFang;
|
|
font-weight: bold;
|
|
font-size: 37rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 33.33rpx;
|
|
width: 697rpx;
|
|
height: 167rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 13rpx;
|
|
padding: 6.67rpx 24rpx 6.67rpx 6.67rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.img {
|
|
width: 161rpx;
|
|
height: 153rpx;
|
|
background: #87CD93;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.content {
|
|
width: 580rpx;
|
|
padding: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.content-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.item-title {
|
|
margin-right: 13.33rpx;
|
|
font-family: PingFang;
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
max-width: 286rpx;
|
|
}
|
|
|
|
.right {
|
|
width: 12rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tags {
|
|
font-family: PingFang;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #666666;
|
|
display: flex;
|
|
flex:1;
|
|
width: 1rpx;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.order {
|
|
width: 133rpx;
|
|
height: 53rpx;
|
|
background: linear-gradient(90deg, #F4A61F ,#FD6F34);
|
|
border-radius: 27rpx;
|
|
font-family: PingFang;
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 53rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.price {
|
|
width: 133rpx;
|
|
text-align: center;
|
|
font-family: PingFang;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #EE3E3B;
|
|
}
|
|
.price::before {
|
|
content: "￥";
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.text-box {
|
|
width: 697rpx;
|
|
min-height: 953rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 36.67rpx 52.67rpx 26rpx 30rpx;
|
|
}
|
|
|
|
.shu {
|
|
margin: 0 4rpx;
|
|
}
|
|
|
|
.tag:last-child .shu {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
</style>
|