liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：康养接口对接，细节调优

Browse Source
This commit is contained in:
linxi
2024-10-09 18:07:04 +08:00
parent 3d3efa89bf
commit b397ba232f
4 changed files with 248 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthFoodDetails.vue
+50 -25
View File
@@ -1,12 +1,11 @@
<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">淮山党参鹌鹑汤</view>
<view class="v12-font-28 v12-secondary-dark-text">淮山党参鹌鹑汤是一种具有补益作用的汤品，非常适合在
季节变换或身体虚弱时饮用</view>
<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">
@@ -19,11 +18,13 @@
<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 primaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
<view class="primary-img"></view>
<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">{{ item.label }}</view>
<view class="v12-font-20 v12-primary v12-white-text v12-nowrap v12-px-2 v12-py-1 v12-radius-60">+加入团购食材</view>
<view class="v12-font-26 one-t v12-mb-1">{{ 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>
@@ -31,11 +32,11 @@
<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 secondaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
<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">
<text class="v12-mr-2 v12-font-bold">·</text>
<text>{{ item }}</text>
<text>{{ item.recipeText }}</text>
</view>
</view>
</view>
@@ -48,12 +49,12 @@
<view class="slider"></view>
</view>
<view class="steps v12-mt-3">
<view v-for="(item, index) in steps" :key="index" class="step-item">
<view class="step-img"></view>
<view class="v12-ml-2 step-info">
<view class="v12-font-26 v12-font-bold v12-mb-3">{{ item.label }}</view>
<view class="v12-font-26 v12-secondary-dark-text">{{ item.describle }}</view>
</view>
<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>
@@ -63,7 +64,7 @@
<view class="slider"></view>
</view>
<view class="card-wrap v12-mt-3">
<view class="card-item">
<!-- <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">
@@ -80,12 +81,16 @@
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
</view>
</view>
</view>
</view> -->
<rich-text class="" :nodes="details.remark">
</rich-text>
</view>
</view>
</view>
</template>
<script>
import { getFoodDetails } from '@/api/health'
export default{
data() {
return {
@@ -107,13 +112,30 @@
'盐（适量）',
'清水（适量）'
],
steps: [
{img: '', label: '步骤1：', step: 1, describle: '所有食材洗净备用'},
{img: '', label: '步骤2：', step: 2, describle: '所有食材洗净备用'},
{img: '', label: '步骤3：', step: 3, describle: '所有食材洗净备用'},
{img: '', label: '步骤4：', step: 4, describle: '所有食材洗净备用'},
]
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>
@@ -170,7 +192,8 @@
align-items: center;
justify-content: flex-start;
margin-right: 24rpx;
padding: 0 20rpx;
// padding: 20rpx;
overflow: hidden;
}
.step-item:last-child{
margin-right: 0 !important;
@@ -203,6 +226,7 @@
height: 90rpx;
background: rgba(63,20,20,0.39);
border-radius: 20rpx;
overflow: hidden;
}
.primary-item{
}
@@ -229,6 +253,7 @@
background: rgba(180,18,18,0.39);
border-radius: 40rpx;
box-sizing: border-box;
overflow: hidden;
}
.details-list-wrap{
background: #F2F2F2;