264 lines
7.5 KiB
Vue
264 lines
7.5 KiB
Vue
<template>
|
|
<view class="food-wrap">
|
|
<view class="v12-mb-3 banner-wrap">
|
|
<image :src="details.topImage" mode="widthFix" class="banner-wrap"></image>
|
|
</view>
|
|
<view class="inro-wrap v12-mb-3 ">
|
|
<view class="v12-font-36 v12-font-bold v12-dark-text v12-mb-3">{{ details.name }}</view>
|
|
<view class="v12-font-28 v12-secondary-dark-text">{{ details.content }}</view>
|
|
</view>
|
|
<view class="details-list-wrap v12-mb-3 ">
|
|
<view class="v12-justify-start v12-align-center">
|
|
<view class="primary-title">
|
|
<text class="v12-font-34 v12-font-bold">食材清单</text>
|
|
<view class="slider"></view>
|
|
</view>
|
|
<view class="v12-dark1-text v12-font-24 v12-ml-3">/ 新鲜的食材决定药膳的作用</view>
|
|
</view>
|
|
<view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
|
|
<view class="v12-font-28 v12-font-bold v12-mb-2">主料</view>
|
|
<view class="v12-d-grid-columns-2 primary-item-wrap">
|
|
<view v-for="(item, index) in details.mainRecipe" :key="index" class="primary-item v12-justify-start v12-align-center">
|
|
<view class="primary-img">
|
|
<image :src="item.recipeImage" class="primary-img" mode="widthFix"></image>
|
|
</view>
|
|
<view class="v12-ml-2">
|
|
<view class="v12-font-26 one-t v12-mb-1" style="width: 160rpx">{{ item.recipeText }}</view>
|
|
<view class="v12-font-20 v12-primary v12-white-text v12-nowrap v12-px-2 v12-py-1 v12-radius-60" @click="toGoods(item.productId)">+购入同款食材</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
|
|
<view class="v12-font-28 v12-font-bold v12-mb-2">辅料</view>
|
|
<view class="v12-d-grid-columns-2 primary-item-wrap">
|
|
<view v-for="(item, index) in details.minorRecipe" :key="index" class="primary-item v12-justify-start v12-align-center">
|
|
<view class="v12-ml-2">
|
|
<view class="v12-font-26 one-t v12-mb-1" style="width: 280rpx">
|
|
<text class="v12-mr-2 v12-font-bold">·</text>
|
|
<text>{{ item.recipeText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="step-wrap v12-mb-3">
|
|
<view class="step-title">
|
|
<view>烹饪步骤</view>
|
|
<view class="slider"></view>
|
|
</view>
|
|
<view class="steps v12-mt-3">
|
|
<view v-for="(item, index) in details.cookingSteps" :key="index" class="step-item">
|
|
<image :src="item.stepImage" mode="widthFix" ></image>
|
|
<!-- <view class="v12-ml-2 step-info">
|
|
<view class="v12-font-26 v12-font-bold v12-mb-3">{{ item.text }}</view>
|
|
<view class="v12-font-26 v12-secondary-dark-text">{{ item.text }}</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tips-wrap">
|
|
<view class="step-title">
|
|
<view>养生小tips</view>
|
|
<view class="slider"></view>
|
|
</view>
|
|
<view class="card-wrap v12-mt-3">
|
|
<!-- <view class="card-item">
|
|
<view class="card-tag v12-primary v12-white-text">选材</view>
|
|
<view class="v12-mt-6">
|
|
<view v-for="(item, index) in tips" :key="index">
|
|
<text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
|
|
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-item v12-mt-3">
|
|
<view class="card-tag v12-primary v12-white-text">注意事项</view>
|
|
<view class="v12-mt-6">
|
|
<view v-for="(item, index) in tips" :key="index">
|
|
<text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
|
|
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<rich-text class="card-item" :nodes="details.remark">
|
|
|
|
</rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getFoodDetails } from '@/api/health'
|
|
export default{
|
|
data() {
|
|
return {
|
|
tips: [
|
|
'鹌鹑：选择新鲜的鹌鹑，处理清洗干净，去除内脏和杂质',
|
|
'淮山：选择肉质雪白、无黑点的淮山，去皮切块后应立即',
|
|
'放入清水中浸泡，以防氧化变黑',
|
|
'党参：选择色泽黄亮、无霉变、无虫蛀的党参'
|
|
],
|
|
primaryList: [
|
|
{img: '', label: '鹌鹑(2只)'},
|
|
{img: '', label: '鹌鹑(2只)'},
|
|
{img: '', label: '鹌鹑(2只)'},
|
|
{img: '', label: '鹌鹑(2只)'},
|
|
],
|
|
secondaryList: [
|
|
'枸杞（适量）',
|
|
'姜片（适量）',
|
|
'盐（适量）',
|
|
'清水（适量）'
|
|
],
|
|
steps: [],
|
|
id: '',
|
|
topImage: '',
|
|
details: {}
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.id = opts.id
|
|
this.getDetails(opts.id)
|
|
},
|
|
methods: {
|
|
getDetails(id) {
|
|
getFoodDetails(id).then(res => {
|
|
this.details = res.data
|
|
})
|
|
},
|
|
toGoods(id) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: id
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.card-tag{
|
|
width: fit-content;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10rpx 0 20rpx 20rpx;
|
|
position: absolute;
|
|
top: -12rpx;
|
|
}
|
|
.card-tag::after{
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8rpx solid transparent !important;
|
|
border-right: 8rpx solid transparent !important;
|
|
right: -4px;
|
|
border-top: 8rpx solid #7D393F !important;
|
|
border-bottom: 8rpx solid transparent!important;
|
|
position: absolute;
|
|
top: 4rpx;
|
|
rotate: 45deg;
|
|
}
|
|
.card-item{
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.tips-wrap{
|
|
background: #F2F2F2;
|
|
border-radius: 40rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.steps{
|
|
display: flex;
|
|
overflow: auto;
|
|
|
|
}
|
|
.step-info{
|
|
height: inherit;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.step-item{
|
|
min-width: 482rpx;
|
|
width: 482rpx;
|
|
height: 232rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-right: 24rpx;
|
|
// padding: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
.step-item:last-child{
|
|
margin-right: 0 !important;
|
|
}
|
|
.step-img{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: rgba(195,126,126,0.39);
|
|
border-radius: 20rpx;
|
|
}
|
|
.step-title{
|
|
position: relative;
|
|
width: fit-content;
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
}
|
|
.step-wrap{
|
|
background: #F2F2F2;
|
|
border-radius: 40rpx;
|
|
padding: 20rpx 20rpx 30rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.primary-item-wrap{
|
|
grid-column-gap: 20rpx;
|
|
grid-row-gap: 20rpx;
|
|
|
|
}
|
|
.primary-img{
|
|
width: 124rpx;
|
|
height: 90rpx;
|
|
background: rgba(63,20,20,0.39);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
.primary-item{
|
|
}
|
|
.slider{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 6rpx;
|
|
background: linear-gradient(to right, #C52733 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 6rpx;
|
|
bottom: 5rpx;
|
|
}
|
|
.primary-title{
|
|
position: relative;
|
|
width: fit-content;
|
|
}
|
|
.food-wrap{
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
padding: 20rpx 20rpx 60rpx 20rpx;
|
|
}
|
|
.banner-wrap{
|
|
width: 100%;
|
|
height: 360rpx;
|
|
background: rgba(180,18,18,0.39);
|
|
border-radius: 40rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
.details-list-wrap{
|
|
background: #F2F2F2;
|
|
border-radius: 40rpx;
|
|
padding: 20rpx 20rpx 30rpx 20rpx;
|
|
}
|
|
</style> |