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
api/health.js
+19 -1
View File
@@ -50,6 +50,24 @@ export function getRank(params) {
* @param {*} params
* @returns
*/
export function getFood(params) {
export function getFoods(params) {
return request.get("/wellness/place/food", params)
}
/**
* 康养生活-配方详情
* @param {*} id
* @returns
*/
export function getFoodDetails(id) {
return request.get("/wellness/recipe/" + id)
}
/**
* 康养生活-配方列表
* @param {*} params
* @returns
*/
export function getRecipe(params) {
return request.get("/wellness/recipe", params)
}
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;
pkg_product/views/healthFoods.vue
+140 -40
View File
@@ -1,18 +1,24 @@
<template>
<view class="health-foods">
<view class="v12-justify-center">
<view class="v12-mr-3 v12-radius-100 v12-dark1 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toSanctun">养生圣地</view>
<view class="ys-btn v12-mr-3 v12-radius-100 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toSanctun">养生圣地</view>
<view class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" >养生食材</view>
</view>
<view class="v12-justify-between v12-align-center v12-mt-5">
<!-- <image
:src="webUrl + '/home/icon-location.png'"
class="icon"
/> -->
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
<view class="flex-1">
<u-search :showAction="false" v-model="keyword"></u-search>
<u-search :showAction="false" v-model="keyword" @search="search"></u-search>
</view>
</view>
<view class="v12-justify-between swap">
<view v-for="(item, index) in foodItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3" @click="toDetails">
<view class="trave-item"></view>
<view v-for="(item, index) in foodItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3" @click="toDetails(item.id)">
<view class="trave-item">
<image class="trave-item" mode="widthFix" :src="item.indexImage"></image>
</view>
<view class="trave-btn">{{ item.name }}</view>
</view>
</view>
@@ -28,10 +34,17 @@
<view
class="rank-item v12-justify-start v12-align-center v12-mb-4"
v-for="(item, index) in rank[0].products"
@click="toGoods(item.productId)"
:key="index">
<view class="rank-tag">{{ index + 1 }}</view>
<view class="rank-tag" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">
<view class="rank-2" :class="{'rank2-2-bg' : index === 1, 'rank3-3-bg' : index === 2 }">
<view class="rank-3" :class="{'rank2-4-bg' : index === 1, 'rank3-4-bg' : index === 2 }">
<view class="rank-4" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">{{ index + 1 }}</view>
</view>
</view>
</view>
<view class="rank-img">
<image :src="item.productImage" class="rank-img"></image>
<image :src="item.productImage" mode="widthFix" class="rank-img"></image>
</view>
<view class="v12-ml-2">
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.productTitle }}</view>
@@ -46,10 +59,20 @@
<view class="rank-title v12-font-34 v12-font-bold">{{ rank[1].title }}</view>
</view>
<view class="v12-px-2">
<view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rank[1].products" :key="index">
<view class="rank-tag">{{ index + 1 }}</view>
<view
class="rank-item v12-justify-start v12-align-center v12-mb-4"
v-for="(item, index) in rank[1].products"
@click="toGoods(item.productId)"
:key="index">
<view class="rank-tag" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">
<view class="rank-2" :class="{'rank2-2-bg' : index === 1, 'rank3-3-bg' : index === 2 }">
<view class="rank-3" :class="{'rank2-4-bg' : index === 1, 'rank3-4-bg' : index === 2 }">
<view class="rank-4" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">{{ index + 1 }}</view>
</view>
</view>
</view>
<view class="rank-img">
<image :src="item.productImage" class="rank-img"></image>
<image :src="item.productImage" mode="widthFix" class="rank-img"></image>
</view>
<view class="v12-ml-2">
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.productTitle }}</view>
@@ -66,19 +89,18 @@
<view class="slider"></view>
</view>
<view class="recommends v12-mt-3">
<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index">
<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index" @click="toGoods(item.productId)">
<view class="recommend-img">
<view class="name-wrap v12-white-text v12-text-center">{{ item.name }}</view>
<image :src="item.image"></image>
<view class="name-wrap v12-white-text v12-text-center">{{ item.title }}</view>
</view>
<view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{ item.title }}</view>
<view class="v12-justify-between v12-primary-text v12-font-bold">
<view>
<view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{ item.productName }}</view>
<view class="v12-justify-between v12-primary-text v12-font-bold v12-px-2 v12-pb-2">
<view class="">
<text class="v12-font-32">￥</text>
<text class="v12-font-36">{{ item.price }}</text>
</view>
<view>
gouwuche
<text class="v12-font-36 ">{{ item.price }}</text>
</view>
<view class="cart-img"></view>
</view>
</view>
</view>
@@ -86,31 +108,18 @@
</view>
</template>
<script>
import { getRank } from '@/api/health'
import { getRank,getFoods,getRecipe } from '@/api/health'
export default{
data() {
return {
foodItems: [
{img: '', value: '', name: '淮山党参鹌鹑汤'},
{img: '', value: '', name: '淮山党参鹌鹑汤'},
{img: '', value: '', name: '淮山党参鹌鹑汤'},
{img: '', value: '', name: '淮山党参鹌鹑汤'},
],
webUrl: this.$VUE_APP_RESOURCES_URL,
foodItems: [],
rankItems: [
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 1, img: ''},
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 2, img: ''},
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 3, img: ''},
],
recommendItems: [
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
],
recommendItems: [],
cityId: '',
cityName: '',
keyword: '',
@@ -119,18 +128,34 @@ export default{
},
onLoad(opts) {
this.cityId = opts.city
this.cityName = opts.cityName
this.cityName = decodeURIComponent(opts.cityName)
this.getRank()
this.getList()
this.getRecipeList()
},
methods: {
toGoods(id) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: id
}
})
},
toSanctun() {
uni.navigateTo({
url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
})
},
toDetails() {
getRecipeList() {
getRecipe().then(res => {
// console.log(res);
this.foodItems = res.data.records
})
},
toDetails(id) {
uni.navigateTo({
url: '/pkg_product/views/healthFoodDetails'
url: '/pkg_product/views/healthFoodDetails?id=' + id
})
},
getRank() {
@@ -141,11 +166,83 @@ export default{
console.log(res);
this.rank = res.data
})
},
getList() {
const params = {
goodCityId: this.cityId,
keyword: this.keyword,
page: 1,
limit: 9999
}
getFoods(params).then(res => {
this.recommendItems = res.data.records
})
},
search() {
this.getList()
}
}
}
</script>
<style lang="less" scoped>
.rank2-bg{
background-color: #ECDAD6 !important;
}
.rank3-bg{
background-color: #DAE3F3 !important;
}
.rank3-3-bg{
background-color: #DAE3F4 !important;
}
.rank2-2-bg{
background-color: #D3B9B2 !important;
}
.rank2-4-bg{
background-color: #AD8578 !important;
}
.rank3-4-bg{
background-color: #A5A5A5 !important;
}
.rank-2{
width: 40rpx; /* 宽度 */
height: 45rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #DDC76F; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
}
.rank-3 {
width: 30rpx; /* 宽度 */
height: 35rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #AD9161; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #333;
}
.rank-4{
width: 25rpx; /* 宽度 */
height: 28rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #FFF3C2; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #333;
}
.ys-btn{
background: #E2D7C3;
}
.cart-img{
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #999;
}
.bg-img{
position: absolute;
height: 100%;
@@ -172,7 +269,6 @@ export default{
bottom: 0;
}
.recommend-item{
height: 500rpx;
background: #FFFFFF;
border-radius: 20rpx;
}
@@ -191,7 +287,7 @@ export default{
.rank-tag{
width: 50rpx; /* 宽度 */
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #3498db; /* 背景颜色 */
background-color: #FBEEB7; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
position: absolute;
text-align: center;
@@ -199,6 +295,9 @@ export default{
font-size: 20rpx;
line-height: 55rpx;
top: -22.5rpx;
display: flex;
align-items: center;
justify-content: center;
}
.rank-img{
min-width: 104rpx;
@@ -281,5 +380,6 @@ export default{
height: 272rpx;
background: rgba(230,178,178,0.39);
border-radius: 20rpx;
overflow: hidden;
}
</style>
pkg_product/views/healthSanctum.vue
+39 -18
View File
@@ -12,8 +12,11 @@
</view>
<view class="v12-justify-between swap">
<view v-for="(item, index) in traveItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3">
<view class="trave-item"></view>
<view class="trave-btn">旅居预约</view>
<view class="trave-item">
<image class="trave-item" :src="item.cover" mode="widthFix" v-if="item.coverType === 1"></image>
<video class="trave-item" :src="item.cover" :show-fullscreen-btn="false" v-if="item.coverType === 2"></video>
</view>
<view class="trave-btn" @click="toStore(item.hotelId)">旅居预约</view>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3">
@@ -29,12 +32,18 @@
<view class="v12-justify-between sanctup-items v12-mt-3">
<view v-for="(item, index) in items" :key="index" class="v12-pa-1">
<view class="img">
<image class="img" :src="item.cover"></image>
<image class="img" :src="item.cover" v-if="item.coverType === 1"></image>
<video
class="img"
:src="item.cover"
:play-btn-position="center"
:show-fullscreen-btn="false"
v-if="item.coverType === 2">
</video>
<view class="v12-white-text v12-font-weight-300 address">{{ item.areaName }}</view>
</view>
<view class="v12-font-bold v12-font-28 more-t">{{ item.address }}</view>
<view class="v12-justify-start v12-align-center v12-my-2">
<view class="v12-font-bold v12-font-28 v12-mt-1 more-t" style="min-height: 76rpx; " @click="toStore(item.hotelId)">{{ item.address }}</view>
<view class="v12-justify-start v12-align-center v12-my-1" @click="toStore(item.hotelId)">
<view class="atr">
<image class="atr" :src="item.logo"></image>
</view>
@@ -51,16 +60,7 @@ export default {
return {
tabs: [],
items: [],
traveItems: [
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
],
traveItems: [],
actived: 0,
cityId: '',
cityName: '',
@@ -70,12 +70,13 @@ export default {
},
onLoad(opts) {
this.cityId = opts.city
this.cityName = opts.cityName
this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
getCategory().then(res => {
this.tabs = res.data
this.categoryId = res.data[0].id
this.getList()
})
this.getTop()
},
methods: {
handleTab(index, tab) {
@@ -103,7 +104,27 @@ export default {
},
search() {
this.getList()
}
},
getTop() {
const params = {
goodCityId: this.cityId,
categoryId: 0,
page: 1,
limit: 9999
}
getWellnessPlace(params).then(res => {
// console.log(res);
this.traveItems = res.data.records
})
},
toStore(id) {
this.$yrouter.push({
path: '/pagesInn/inn/innHome',
query: {
id: id
}
})
},
}
}
</script>