From b397ba232f32881e6bae1acb01374883c38116cd Mon Sep 17 00:00:00 2001
From: linxi <linxi.jiang@jeeyor.com>
Date: Wed, 9 Oct 2024 18:07:04 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E5=BA=B7=E5=85=BB=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=8C=E7=BB=86=E8=8A=82=E8=B0=83?=
 =?UTF-8?q?=E4=BC=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/health.js                           |  20 ++-
 pkg_product/views/healthFoodDetails.vue |  75 ++++++----
 pkg_product/views/healthFoods.vue       | 180 ++++++++++++++++++------
 pkg_product/views/healthSanctum.vue     |  57 +++++---
 4 files changed, 248 insertions(+), 84 deletions(-)

diff --git a/api/health.js b/api/health.js
index 47ceac1..fa1d0a8 100644
--- a/api/health.js
+++ b/api/health.js
@@ -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)
 }
\ No newline at end of file
diff --git a/pkg_product/views/healthFoodDetails.vue b/pkg_product/views/healthFoodDetails.vue
index b8fd672..5531f49 100644
--- a/pkg_product/views/healthFoodDetails.vue
+++ b/pkg_product/views/healthFoodDetails.vue
@@ -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;
diff --git a/pkg_product/views/healthFoods.vue b/pkg_product/views/healthFoods.vue
index f9fa1e3..abc66e2 100644
--- a/pkg_product/views/healthFoods.vue
+++ b/pkg_product/views/healthFoods.vue
@@ -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>
\ No newline at end of file
diff --git a/pkg_product/views/healthSanctum.vue b/pkg_product/views/healthSanctum.vue
index 0a67a90..8192aec 100644
--- a/pkg_product/views/healthSanctum.vue
+++ b/pkg_product/views/healthSanctum.vue
@@ -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>