From 12f2e42a164fb8d231d2379b188ae899ad7eb8aa Mon Sep 17 00:00:00 2001
From: modendeveloper <modendeveloper@163.com>
Date: Thu, 10 Oct 2024 19:40:28 +0800
Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A2463=20=E3=80=90=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E3=80=91=E5=BA=B7=E5=85=BB=E7=94=9F?=
 =?UTF-8?q?=E6=B4=BB=E2=80=94=E5=85=BB=E7=94=9F=E9=A3=9F=E6=9D=90=EF=BC=8C?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=90=8D=E7=A7=B0=E8=BF=87=E9=95=BF=EF=BC=8C?=
 =?UTF-8?q?=E6=9C=80=E5=A4=9A=E6=98=BE=E7=A4=BA2=E8=A1=8C=EF=BC=8C?=
 =?UTF-8?q?=E8=B6=85=E5=87=BA=E9=83=A8=E5=88=86=E7=94=A8=E7=9C=81=E7=95=A5?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg_product/views/healthFoods.vue | 357 +++++++++++++++++++-----------
 1 file changed, 225 insertions(+), 132 deletions(-)

diff --git a/pkg_product/views/healthFoods.vue b/pkg_product/views/healthFoods.vue
index e6d56a8..b9ced9c 100644
--- a/pkg_product/views/healthFoods.vue
+++ b/pkg_product/views/healthFoods.vue
@@ -1,8 +1,15 @@
 <template>
   <view class="health-foods">
     <view class="v12-justify-center">
-      <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
+        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
@@ -10,64 +17,117 @@
         mode="widthFix"
         class="icon"
       />
-      <view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
+      <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" 
-         bgColor="#fff"
-         searchIconColor="#C52733"
-         @search="search"></u-search>
+          :showAction="false"
+          v-model="keyword"
+          bgColor="#fff"
+          searchIconColor="#C52733"
+          @search="search"
+        ></u-search>
       </view>
     </view>
-    <swiper class="v12-justify-between swap" autoplay circular next-margin="300rpx" duration="10000" interval="3000" >
-      <swiper-item v-for="(item, index) in foodItems" :key="index" >
+    <swiper
+      class="v12-justify-between swap"
+      autoplay
+      circular
+      next-margin="300rpx"
+      duration="10000"
+      interval="3000"
+    >
+      <swiper-item v-for="(item, index) in foodItems" :key="index">
         <view class="trave-item-wrap v12-mr-3 v12-mt-3">
           <view class="trave-item">
-            <image class="trave-item" mode="widthFix"  :src="item.indexImage"></image>
+            <image
+              class="trave-item"
+              mode="widthFix"
+              :src="item.indexImage"
+            ></image>
           </view>
           <view class="trave-btn" @click="toDetails(item.id)">
             <text>{{ item.name }}</text>
-            <image  :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
+            <image
+              :src="webUrl + '/orderIcon/arrow.png'"
+              class="arrow-icon v12-ml-1"
+            ></image>
           </view>
         </view>
       </swiper-item>
     </swiper>
     <view class="v12-justify-center v12-mt-3" v-if="rank.length > 0">
-      <image class="title-img" :src="webUrl + '/orderIcon/rankTitle.png'" mode="widthFix"></image>
+      <image
+        class="title-img"
+        :src="webUrl + '/orderIcon/rankTitle.png'"
+        mode="widthFix"
+      ></image>
     </view>
     <view class="rank-wrap v12-mt-3" v-if="rank.length > 0">
       <view class="rank-items-wrap">
         <view class="bee-rank" v-for="(k, i) in rank" :key="i">
           <image :src="k.backgroundImage" class="bg-img"></image>
           <view class="rank-title-wrap">
-            <view class="rank-title v12-font-34 v12-font-bold">{{ k.title }}</view>
+            <view class="rank-title v12-font-34 v12-font-bold">{{
+              k.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 k.products" 
+            <view
+              class="rank-item v12-justify-start v12-align-center v12-mb-4"
+              v-for="(item, index) in k.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>
+              :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" mode="widthFix" 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>
+                <view
+                  class="v12-font-bold v12-font-24 one-t"
+                  style="width: 160rpx"
+                  >{{ item.productTitle }}</view
+                >
                 <view class="v12-font-22 more-t">{{ item.productDesc }}</view>
               </view>
             </view>
           </view>
         </view>
       </view>
-      
     </view>
     <view class="recommend-wrap v12-mt-3">
       <view class="recommend-title v12-px-3">
@@ -75,134 +135,156 @@
         <view class="slider"></view>
       </view>
       <view class="recommends v12-mt-3">
-        <view class="recommend-item" v-for="(item, index) in recommendItems" :key="index" @click="toGoods(item.productId)">
-          <view class="recommend-img">
-            <image :src="item.image"></image>
-            <view class="name-wrap v12-white-text v12-text-center">{{ item.title }}</view>
+        <view
+          class="recommend-item"
+          v-for="(item, index) in recommendItems"
+          :key="index"
+          @click="toGoods(item.productId)"
+        >
+          <view>
+            <view class="recommend-img">
+              <image :src="item.image"></image>
+              <view class="name-wrap v12-white-text v12-text-center">{{
+                item.title
+              }}</view>
+            </view>
+            <view class="v12-px-2 v12-font-bold v12-font-28 more-t">{{
+              item.productName
+            }}</view>
           </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="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>
+              <text class="v12-font-36">{{ item.price }}</text>
             </view>
             <view class="cart-img">
-              <image class="cart-img" :src="webUrl+'/orderIcon/组 355.png'"></image>
+              <image
+                class="cart-img"
+                :src="webUrl + '/orderIcon/组 355.png'"
+              ></image>
             </view>
           </view>
         </view>
-        
       </view>
-      <view  v-if="recommendItems.length === 0">
+      <view v-if="recommendItems.length === 0">
         <view class="no-data-wrap v12-justify-center v12-mt-6">
-          <image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
+          <image
+            :src="webUrl + '/orderIcon/微信图片_20241009220552.png'"
+            mode="widthFix"
+          ></image>
         </view>
       </view>
     </view>
   </view>
 </template>
 <script>
-import { getRank,getFoods,getRecipe } from '@/api/health'
-export default{
+import { getRank, getFoods, getRecipe } from "@/api/health";
+export default {
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       foodItems: [],
       recommendItems: [],
-      cityId: '',
-      cityName: '',
-      keyword: '',
-      rank: []
-    }
+      cityId: "",
+      cityName: "",
+      keyword: "",
+      rank: [],
+    };
   },
   onLoad(opts) {
-    this.cityId = opts.city
-    this.cityName = decodeURIComponent(opts.cityName)
-    this.getRank()
-    this.getList()
-    this.getRecipeList()
+    this.cityId = opts.city;
+    this.cityName = decodeURIComponent(opts.cityName);
+    this.getRank();
+    this.getList();
+    this.getRecipeList();
   },
   methods: {
     toGoods(id) {
       this.$yrouter.push({
-        path: '/pages/shop/GoodsCon/index',
+        path: "/pages/shop/GoodsCon/index",
         query: {
-          id: id
-        }
-      })
+          id: id,
+        },
+      });
     },
     toSanctun() {
       uni.navigateTo({
-        url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
-      })
+        url:
+          "/pkg_product/views/healthSanctum?city=" +
+          this.cityId +
+          "&cityName=" +
+          this.cityName,
+      });
     },
     getRecipeList() {
-      getRecipe().then(res => {
+      getRecipe().then((res) => {
         // console.log(res);
-        this.foodItems = res.data.records
-      })
+        this.foodItems = res.data.records;
+      });
     },
     toDetails(id) {
       uni.navigateTo({
-        url: '/pkg_product/views/healthFoodDetails?id=' + id
-      })
+        url: "/pkg_product/views/healthFoodDetails?id=" + id,
+      });
     },
     getRank() {
       let params = {
-        goodCityId: this.cityId
-      }
-      getRank(params).then(res => {
-        this.rank = res.data
-      })
+        goodCityId: this.cityId,
+      };
+      getRank(params).then((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
-      })
+        limit: 9999,
+      };
+      getFoods(params).then((res) => {
+        this.recommendItems = res.data.records;
+      });
     },
     search() {
-      this.getList()
-    }
-  }
-}
+      this.getList();
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
-.arrow-icon{
+.arrow-icon {
   width: 25rpx;
   height: 25rpx;
 }
-.icon{
+.icon {
   width: 30rpx;
   height: 30rpx;
 }
-.rank2-bg{
-  background-color: #ECDAD6 !important;
+.rank2-bg {
+  background-color: #ecdad6 !important;
 }
-.rank3-bg{
-  background-color: #DAE3F3 !important;
+.rank3-bg {
+  background-color: #dae3f3 !important;
 }
-.rank3-3-bg{
-  background-color: #C8C8C8 !important;
+.rank3-3-bg {
+  background-color: #c8c8c8 !important;
 }
-.rank2-2-bg{
-  background-color: #D3B9B2 !important;
+.rank2-2-bg {
+  background-color: #d3b9b2 !important;
 }
-.rank2-4-bg{
-  background-color: #AD8578 !important;
+.rank2-4-bg {
+  background-color: #ad8578 !important;
 }
-.rank3-4-bg{
-  background-color: #A5A5A5 !important;
+.rank3-4-bg {
+  background-color: #a5a5a5 !important;
 }
-.rank-2{
+.rank-2 {
   width: 40rpx; /* 宽度 */
   height: 45rpx; /* 高度，根据正六边形的几何特性计算 */
-  background-color: #DDC76F; /* 背景颜色 */
+  background-color: #ddc76f; /* 背景颜色 */
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   display: flex;
   align-items: center;
@@ -211,7 +293,7 @@ export default{
 .rank-3 {
   width: 30rpx; /* 宽度 */
   height: 35rpx; /* 高度，根据正六边形的几何特性计算 */
-  background-color: #AD9161; /* 背景颜色 */
+  background-color: #ad9161; /* 背景颜色 */
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   display: flex;
   align-items: center;
@@ -219,10 +301,10 @@ export default{
   font-weight: bold;
   color: #333;
 }
-.rank-4{
+.rank-4 {
   width: 25rpx; /* 宽度 */
   height: 28rpx; /* 高度，根据正六边形的几何特性计算 */
-  background-color: #FFF3C2; /* 背景颜色 */
+  background-color: #fff3c2; /* 背景颜色 */
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   display: flex;
   align-items: center;
@@ -230,25 +312,25 @@ export default{
   font-weight: bold;
   color: #333;
 }
-.ys-btn{
-  background: #E2D7C3;
+.ys-btn {
+  background: #e2d7c3;
 }
-.cart-img{
+.cart-img {
   width: 48rpx;
   height: 48rpx;
   border-radius: 50%;
 }
-.bg-img{
+.bg-img {
   position: absolute;
   height: 100%;
 }
-.recommends{
+.recommends {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 20rpx;
   grid-row-gap: 20rpx;
 }
-.recommend-img{
+.recommend-img {
   width: 344rpx;
   height: 344rpx;
   background: #333;
@@ -256,41 +338,48 @@ export default{
   position: relative;
   overflow: hidden;
 }
-.name-wrap{
+.name-wrap {
   position: absolute;
-  background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
   width: 100%;
   padding: 8px 0;
   bottom: 0;
 }
-.recommend-item{
-  background: #FFFFFF;
+.recommend-item {
+  background: #ffffff;
   border-radius: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-.recommend-title{
+.recommend-title {
   position: relative;
   width: fit-content;
 }
-.slider{
+.slider {
   position: absolute;
   width: 100%;
   height: 6rpx;
-  background: linear-gradient(to right, #C52733 0%,  rgba(255,255,255,0) 100%);
+  background: linear-gradient(
+    to right,
+    #c52733 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
   border-radius: 6rpx;
   bottom: 5rpx;
 }
-.rank-wrap{
-  background: #E2BC8D;
+.rank-wrap {
+  background: #e2bc8d;
   border-radius: 20rpx;
 }
-.rank-tag{
+.rank-tag {
   width: 50rpx; /* 宽度 */
   height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
-  background-color: #FBEEB7; /* 背景颜色 */
+  background-color: #fbeeb7; /* 背景颜色 */
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   position: absolute;
   text-align: center;
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 20rpx;
   line-height: 55rpx;
   top: -22.5rpx;
@@ -298,14 +387,15 @@ export default{
   align-items: center;
   justify-content: center;
 }
-.rank-img{
+.rank-img {
   min-width: 104rpx;
   width: 104rpx;
   height: 104rpx;
   background: #666;
   border-radius: 20rpx;
 }
-.bee-rank, .drug-rank{
+.bee-rank,
+.drug-rank {
   width: 100%;
   background: #999;
   border-radius: 20rpx;
@@ -313,53 +403,56 @@ export default{
   box-sizing: border-box;
   position: relative;
 }
-.rank-title-wrap{
+.rank-title-wrap {
   height: 140rpx;
   display: flex;
   align-items: center;
 }
-.rank-title{
+.rank-title {
   width: 200rpx;
   padding: 10rpx 5rpx;
-  background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+  background: linear-gradient(
+    to right,
+    #ffffff 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
   z-index: 999;
 }
-.rank-items-wrap{
-  
+.rank-items-wrap {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 20rpx;
   padding: 20rpx;
   box-sizing: border-box;
 }
-.rank-item{
+.rank-item {
   width: 100%;
   height: 116rpx;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 20rpx;
   padding: 0 10rpx;
   box-sizing: border-box;
   position: relative;
 }
-.title-img{
+.title-img {
   width: 404rpx;
 }
-.health-foods{
+.health-foods {
   min-height: 100vh;
-  background-color: #FAEED8;
+  background-color: #faeed8;
   padding: 20rpx;
-  box-sizing: border-box                                                                                                                                                                                                                                                                    ;
+  box-sizing: border-box;
 }
-.flex-1{
+.flex-1 {
   flex: 1;
 }
-.swap{
+.swap {
   overflow: auto;
 }
-.trave-item-wrap{
+.trave-item-wrap {
   position: relative;
 }
-.trave-btn{
+.trave-btn {
   position: absolute;
   left: 0;
   right: 0;
@@ -367,20 +460,20 @@ export default{
   bottom: 30rpx;
   text-align: center;
   width: 212rpx;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
   border-radius: 60rpx;
   font-size: 28rpx;
   font-weight: bold;
   padding: 10rpx 20rpx;
   display: flex;
   align-items: center;
-  justify-content:center;
+  justify-content: center;
 }
-.trave-item{
+.trave-item {
   width: 382rpx;
   height: 272rpx;
-  background: rgba(230,178,178,0.39);
+  background: rgba(230, 178, 178, 0.39);
   border-radius: 20rpx;
   overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>