yandu_WeChat/subPackages/food/taocanDetail.vue

<template>
	<view class="bg">
		<view class="goodBox">
			<view class="title">{{info.title}}</view>
			<image class="img" :src="showImg(info.image)" mode=""></image>
			<view class="price">{{ info.price/100 }}</view>
			<view class="tags" v-if="info.specifications_new_tag">
				<view class="tag" v-for="tag in info.specifications_new_tag.split(',').slice(0,3)">
					{{tag}}
					<text class="shu">|</text>
				</view>
			</view>
		</view>
		<view class="detailText">套餐详情</view>
		<view class="detailBox" v-html="formateRichText(info.use_explain)"></view>
		<view class="buyText">购买须知</view>
		<view class="explainBox" v-html="formateRichText(info.reserve_content)"></view>
		<view class="bottom">
			<view class="center">
				<view class="totalText">
					合计：
				</view>
				<view class="totalPrice">
					￥{{ info.price/100 }}
				</view>
			</view>
			<view class="order" @click="order">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:"",
				allprice: 0,
			}
		},
		onLoad() {
			this.info = this.$store.state.user.foodInfo
			console.log(this.info);
		},
		methods: {
			order() {
				uni.navigateTo({
					url: '/subPackages/food/foodOrder'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		overflow-x: hidden;
		background: #F7F7F7;
		padding: 34rpx 26.67rpx 200rpx;
	}
	
	.goodBox {
		padding: 20.67rpx 22rpx 26.67rpx;
		background: #fff;
	}
	
	.tags {
		margin-top: 21.33rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 23rpx;
		color: #666666;
		display: flex;
	}
	
	.shu {
		margin: 0 4rpx;
	}
	
	.tag:last-child .shu {
		display: none;
	}
	
	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
	}
	
	.img {
		margin: 26.67rpx 0 20.67rpx;
		width: 653rpx;
		height: 392rpx;
		background: #87CD93;
		border-radius: 13rpx;
	}
	
	.price {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #EE3E3B;
	}
	.price::before {
		content: "￥";
		font-size: 24rpx;
	}
	
	.detailText {
		padding-left: 22rpx;
		margin: 55.33rpx 0 26.67rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
	}
	
	.detailBox {
		width: 100%;
		min-height: 369rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
	}
	
	.buyText {
		padding-left: 22rpx;
		margin: 34.67rpx 0 26.67rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
	}
	
	.explainBox {
		width: 100%;
		min-height: 491rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
	}
	
	.bottom {
		height: 148rpx;
	    background: #FFFFFF;
	    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
	    padding: 20.67rpx 26.67rpx 40.67rpx;
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
		display: flex;
		justify-content: space-between;
	}
	
	.center {
		display: flex;
		align-items: center;
	}
	
	.totalText {
		margin-right: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #333333;
	}
	
	.totalPrice {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #F84A56;
	}
	
	.order {
		width: 267rpx;
		height: 87rpx;
		background: #F84A56;
		border-radius: 43rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 87rpx;
	}

</style>