tongli_WeChat/subPackages/food/foodDetail.vue

<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')" mode=""></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')" mode=""></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.price/100}}</view>
					</view>
					<view class="content-bottom flex-between">
						<view class="tags">
							<view class="tag" v-for="tag in skuItem.specifications_new_tag.split(',').slice(0,3)">
								{{tag}}
								<text class="shu">|</text>
							</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'
				});
			},
		},
		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: 20.67rpx 0 19.33rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.content-top {
		
	}
	
	.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;
	}
	
	.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;
	}
	
	.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>