|
|
@ -1,6 +1,33 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
@ -8,15 +35,156 @@ |
|
|
|
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> |
|
|
|
<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> |
|
|
|