Fix：4866 【商城小程序】康养类目下，应显示管理后台配置的养生圣地类目及数据（参考图2）

pkg_product/views/healthFoods.vue

@@ -23,265 +23,246 @@
         />
       </view>
     </view>
-    <view class="v12-justify-center v12-mt-3" v-if="hasRankData">
+    <!-- <view class="v12-justify-center v12-mt-3" v-if="hasRankData">
       <image
         class="title-img"
         :src="webUrl + '/orderIcon/rankTitle.png'"
         mode="widthFix"
       ></image>
-    </view>
+    </view> -->
-    <view class="rank-wrap v12-mt-3" v-if="hasRankData">
+    <!-- <vi                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
-      <view class="rank-items-wrap">
+      <view
-        <view class="bee-rank" v-for="(k, i) in rank" :key="i">
+        class="rank-item v12-justify-start v12-align-center v12-mb-4"
-          <image
+        v-for="(item, index) in k.products"
-            :src="k.backgroundImage"
+        @click="toGoods(item.productId)"
-            class="bg-img"
+        :key="index"
-            style="width: inherit"
+      >
-            mode="scaleToFill"
+        <view
-          ></image>
+          class="rank-tag"
-          <view class="rank-title-wrap">
+          :class="{ 'rank2-bg': index === 1, 'rank3-bg': index === 2 }"
-            <view class="rank-title v12-font-34 v12-font-bold one-t">{{
+        >
-              k.title
+          <view
-            }}</view>
+            class="rank-2"
-          </view>
+            :class="{
-          <view class="v12-px-2">
+              'rank2-2-bg': index === 1,
+              'rank3-3-bg': index === 2,
+            }"
+          >
             <view
-              class="rank-item v12-justify-start v12-align-center v12-mb-4"
+              class="rank-3"
-              v-for="(item, index) in k.products"
+              :class="{
-              @click="toGoods(item.productId)"
+                'rank2-4-bg': index === 1,
-              :key="index"
+                'rank3-4-bg': index === 2,
+              }"
             >
               <view
-                class="rank-tag"
+                class="rank-4"
-                :class="{ 'rank2-bg': index === 1, 'rank3-bg': index === 2 }"
+                :class="{
+                  'rank2-bg': index === 1,
+                  'rank3-bg': index === 2,
+                }"
+                >{{ index + 1 }}</view
               >
-                <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>
-              </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-22 more-t">{{ item.productDesc }}</view>
-              </view>
             </view>
           </view>
         </view>
-      </view>
+        <view class="rank-img">
-    </view>
-    <view class="recommend-wrap v12-mt-3">
-      <view class="recommend-title v12-px-3">
-        <text class="v12-dark-text v12-font-36 v12-font-bold">食补推荐</text>
-        <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>
-            <view class="recommend-img">
-              <image
-                class="recommend-img"
-                :src="item.image"
-                mode="aspectFit"
-              ></image>
-              <view class="name-wrap v12-white-text v12-text-center more-t">{{
-                item.title
-              }}</view>
-            </view>
-            <view
-              class="v12-px-2 v12-font-bold v12-font-28 more-t v12-my-2"
-              >{{ item.productName }}</view
-            >
-          </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 class="cart-img" @click.stop="addToCart(item, 'productId')">
-              <image
-                class="cart-img"
-                :src="webUrl + '/orderIcon/组 355.png'"
-              ></image>
-            </view>
-          </view>
-        </view>
-      </view>
-      <view v-if="recommendItems.length === 0">
-        <view class="no-data-wrap v12-justify-center v12-mt-6">
           <image
-            :src="webUrl + '/orderIcon/微信图片_20241009220552.png'"
+            :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-22 more-t">{{ item.productDesc }}</view>
+        </view>
+      </view>
+    </view> -->
+    <view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3 tabs-wrap">
+      <view 
+        class="tab  v12-font-34 v12-dark-text v12-mr-5" 
+        v-for="(tab, index) in tabs" 
+        @click="handleTab(index,tab)"
+        :class="{'activeTab' : index === actived}"
+        :key="index">
+        <text>{{ tab.name }}</text>
+      </view>
+    </view>
+    <view class="v12-justify-between sanctup-items v12-mt-3">
+      <view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item)">
+        <view class="img">
+          <video 
+            class="img" 
+            :src="item.cover" 
+            :play-btn-position="'center'" 
+            :show-fullscreen-btn="false"
+            :show-center-play-btn="false" 
+            :show-play-btn="false"
+            :controls="false"
+            :poster="item.cover + '?vframe/jpg/offset/1'"
+            v-if="item.coverType === 2">
+          </video>
+          <image v-else class="img" :src="item.cover"></image>
+          <view class="v12-white-text address">
+            <image
+              class="map-icon v12-mr-1"
+              :src="webUrl + '/orderIcon/map_white.png'"
+            ></image>
+            <text class="v12-font-28">{{ item.areaName }}</text>
+          </view>
+        </view>
+        <view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view>
+        <view class="v12-justify-start v12-align-center v12-my-1">
+          <view class="atr">
+            <image class="atr" :src="item.avatar"></image>
+          </view>
+          <view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+    <view v-if="items.length === 0" class="v12-justify-center v12-mt-6">
+      <view class="no-data-wrap">
+        <image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
       </view>
     </view>
-    <ProductWindow
-      ref="attrWindow"
-      :attr="attr"
-      :cartNum="cart_num"
-      :showOk="true"
-      @changeFun="changeFun"
-      @ok="handleOk"
-    />
   </view>
 </template>
 <script>
-import { getRank, getFoods, getRecipe, getWellnessTopImage } from "@/api/health";
+import { getCategory,getWellnessPlace } from '@/api/health'
-import ProductWindow from '@/components/ProductWindow'
+import { getJiaLouList } from '@/api/qianxian'
-import goCartMixin from '@/mixins/goCartMixins'
+import { getWellnessTopImage } from '@/api/health'
 export default {
-  components: {
-    ProductWindow
-  },
-  mixins: [goCartMixin],
-  computed: {
-    hasRankData() {
-      if (!Array.isArray(this.rank)) return false;
-      const hasText = (v) => typeof v === "string" && v.trim() !== "";
-      const hasValue = (v) => v !== null && v !== undefined && v !== "";
-      return this.rank.some((item) => {
-        if (!item) return false;
-        if (hasText(item.title) || hasText(item.backgroundImage)) {
-          return true;
-        }
-        if (Array.isArray(item.products)) {
-          return item.products.some((p) => {
-            if (!p) return false;
-            return (
-              hasText(p.productTitle) ||
-              hasText(p.productDesc) ||
-              hasValue(p.productImage) ||
-              hasValue(p.productId)
-            );
-          });
-        }
-        return false;
-      });
-    },
-    travelButtonSrc() {
-      const config = this.topImageConfig || {};
-      return config.travelButtonImage || config.travelButtonImageFocus || "";
-    },
-    wellnessButtonSrc() {
-      const config = this.topImageConfig || {};
-      return config.wellnessButtonImageFocus || config.wellnessButtonImage || "";
-    }
-  },
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      recommendItems: [],
+      tabs: [],
-      cityId: "",
+      items: [],
-      cityName: "",
+      traveItems: [],
-      rank: [],
+      actived: 0,
+      cityId: '',
+      cityName: '',
+      categoryId: null,
       topImageConfig: {}
-    };
+    }
+  },
+  computed: {
+    travelButtonSrc() {
+      const config = this.topImageConfig || {}
+      return config.travelButtonImage || config.travelButtonImage || ''
+    },
+    wellnessButtonSrc() {
+      const config = this.topImageConfig || {}
+      return config.wellnessButtonImageFocus || config.wellnessButtonImage || ''
+    }
   },
   onLoad(opts) {
-    this.cityId = opts.city;
+    console.log(opts);
-    this.cityName = decodeURIComponent(opts.cityName);
+    
-    this.getRank();
+    this.cityId = opts.city
-    this.getList();
+    this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
-    this.getTopImage();
+    getCategory().then(res => {
+      this.tabs = res.data
+      this.categoryId = res.data[0].id
+      this.getList()
+    })
+    this.getTop()
+    this.getTopImage()
+  },
+  onUnload() {
+    // uni.navigateBack({
+    //   delta: 0
+    // })
   },
   methods: {
-    toGoods(id) {
+    handleTab(index, tab) {
-      this.$yrouter.push({
+      this.actived = index
-        path: "/pages/shop/GoodsCon/index",
+      this.categoryId = tab.id
-        query: {
+      this.getList()
-          id: id,
-        },
-      });
     },
     toSanctun() {
       uni.redirectTo({
-        url:
+        url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
-          "/pkg_product/views/healthSanctum?city=" +
+      })
-          this.cityId +
-          "&cityName=" +
-          this.cityName,
-      });
     },
-    getRank() {
+    toFoods() {
-      let params = {
+      uni.redirectTo({
-        goodCityId: this.cityId,
+        url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
-      };
+      })
-      getRank(params).then((res) => {
-        this.rank = res.data;
-      });
     },
     getList() {
       const params = {
+        // countyId: this.cityId,
         goodCityId: this.cityId,
+        wellnessPlaceCateId : this.categoryId,
+        shopType: 'wellnessCate',
         page: 1,
-        limit: 9999,
+        limit: 9999
-      };
+      }
-      getFoods(params).then((res) => {
+      getJiaLouList(params).then(res => {
-        this.recommendItems = res.data.records;
+        // console.log(res);
-      });
+        this.items = res.data.records
+      })
     },
     search() {
-      this.getList();
+      uni.navigateTo({
+        url: '/pkg_product/views/healthSearch?city=' + this.cityId + '&cityName=' + this.cityName
+      })
+    },
+    getTop() {
+      const params = {
+        goodCityId: this.cityId,
+        shopType: 'wellnessTop',
+        page: 1,
+        limit: 9999
+      }
+      getJiaLouList(params).then(res => {
+        // console.log(res);
+        this.traveItems = res.data.records
+      })
+    },
+    toStore(item) {
+      if(item.dataType === 'wellnessPlace'){
+        this.$yrouter.push({
+          path: '/pagesInn/inn/innHome',
+          query: {
+            id: item.hotelId
+          }
+        })
+      }else{
+        uni.navigateTo({ url: '/pkg_product/views/sojoumStore?id=' + item.id }) 
+      }
     },
     getTopImage() {
-      getWellnessTopImage().then((res) => {
+      const cached = uni.getStorageSync('wellnessTopImageConfig')
-        this.topImageConfig = res.data || {};
+      if (cached) {
-      });
+        this.topImageConfig = cached
+      }
+      getWellnessTopImage().then(res => {
+        this.topImageConfig = res.data || {}
+        uni.setStorageSync('wellnessTopImageConfig', this.topImageConfig)
+      })
     }
   }
 }
 </script>
 <style lang="less" scoped>
-.banner-wrap {
+.banner-wrap{
   position: relative;
   margin-left: -20rpx;
   margin-right: -20rpx;
 }
-.banner-img {
+.banner-img{
   width: 100%;
   height: auto;
   display: block;
   will-change: transform;
 }
-.banner-tabs {
+.banner-tabs{
   position: absolute;
   left: 0;
   right: 0;
@@ -289,208 +270,41 @@ export default {
   display: flex;
   justify-content: center;
 }
-.tab-btn {
+.tab-btn{
   width: 200rpx;
+  will-change: transform;
+  display: block;
+  height: auto;
 }
-.arrow-icon {
+.tabs-wrap{
+  white-space: nowrap;
+  overflow: scroll;
+  .tab:last-child{
+    margin-right: 0 !important;
+  }
+}
+.map-icon{
+  width: 28rpx;
+  height: 28rpx;
+}
+.arrow-icon{
   width: 25rpx;
   height: 25rpx;
 }
-.icon {
+.icon{
   width: 30rpx;
   height: 30rpx;
 }
-.rank2-bg {
+.flex-1{
-  background-color: #ecdad6 !important;
-}
-.rank3-bg {
-  background-color: #dae3f3 !important;
-}
-.rank3-3-bg {
-  background-color: #c8c8c8 !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%;
-}
-.bg-img {
-  position: absolute;
-  height: 100%;
-}
-.recommends {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-column-gap: 20rpx;
-  grid-row-gap: 20rpx;
-}
-.recommend-img {
-  width: 344rpx;
-  height: 344rpx;
-  background: #333;
-  border-radius: 20rpx;
-  position: relative;
-  overflow: hidden;
-}
-.name-wrap {
-  position: absolute;
-  background: rgba(0, 0, 0, 0.2);
-  width: 100%;
-  padding: 8px 0;
-  bottom: 0;
-  height: 70rpx;
-}
-.recommend-item {
-  background: #ffffff;
-  border-radius: 20rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.recommend-title {
-  position: relative;
-  width: fit-content;
-}
-.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;
-}
-.rank-wrap {
-  background: #e2bc8d;
-  border-radius: 20rpx;
-}
-.rank-tag {
-  width: 50rpx; /* 宽度 */
-  height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
-  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;
-  font-size: 20rpx;
-  line-height: 55rpx;
-  top: -22.5rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.rank-img {
-  min-width: 104rpx;
-  width: 104rpx;
-  height: 104rpx;
-  background: #666;
-  border-radius: 20rpx;
-}
-.bee-rank,
-.drug-rank {
-  width: 100%;
-  background: #999;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-sizing: border-box;
-  position: relative;
-}
-.rank-title-wrap {
-  height: 140rpx;
-  display: flex;
-  align-items: center;
-}
-.rank-title {
-  width: 200rpx;
-  padding: 10rpx 5rpx;
-  background: linear-gradient(
-    to right,
-    #ffffff 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  z-index: 999;
-}
-.rank-items-wrap {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-column-gap: 20rpx;
-  padding: 20rpx;
-  box-sizing: border-box;
-}
-.rank-item {
-  width: 100%;
-  height: 116rpx;
-  background: #ffffff;
-  border-radius: 20rpx;
-  padding: 0 10rpx;
-  box-sizing: border-box;
-  position: relative;
-}
-.title-img {
-  width: 404rpx;
-}
-.health-foods {
-  min-height: 100vh;
-  background-color: #fff;
-  padding: 20rpx;
-  box-sizing: border-box;
-}
-.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;
@@ -498,20 +312,71 @@ export default {
   bottom: 30rpx;
   text-align: center;
   width: 212rpx;
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255,255,255,0.7);
   border-radius: 60rpx;
   font-size: 28rpx;
   font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10rpx 20rpx;
+}
+.trave-item{
+  width: 382rpx;
+  height: 272rpx;
+  background: rgba(230,178,178,0.39);
+  border-radius: 20rpx;
+  position: relative;
+}
+.desc-txt {
+  height: 78rpx;
+  line-height: 40rpx;
+}
+.address{
+  position: absolute;
+  left: 30rpx;
+  bottom: 30rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.trave-item {
+.sanctup-items{
-  width: 382rpx;
+  display: grid;
-  height: 272rpx;
+  grid-template-columns: 50% 50%;
-  background: rgba(230, 178, 178, 0.39);
+}
-  border-radius: 20rpx;
+.atr{
-  overflow: hidden;
+  width: 52rpx;
+  height: 52rpx;
+  border-radius: 50%;
+}
+.img{
+  width: 320rpx;
+  height: 320rpx;
+  // background: #707070;
+  border-radius: 16rpx;
+  position: relative;
+}
+.sanctum-wrap{
+  min-height: 100vh;
+  background-color: #fff;
+  padding: 20rpx                                                                                                                                                                                                                                                                        ;
+}
+.tab{
+  position: relative;
+}
+.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;
+}
+.activeTab{
+  font-size: 34rpx;
+  background: #C52733;
+  color: #fff !important;
+  border-radius: 100rpx;
+  padding: 4rpx 20rpx;
 }
 </style>

pkg_product/views/healthSanctum.vue

@@ -203,8 +203,13 @@ export default {
       }
     },
     getTopImage() {
+      const cached = uni.getStorageSync('wellnessTopImageConfig')
+      if (cached) {
+        this.topImageConfig = cached
+      }
       getWellnessTopImage().then(res => {
         this.topImageConfig = res.data || {}
+        uni.setStorageSync('wellnessTopImageConfig', this.topImageConfig)
       })
     }
   }
@@ -231,6 +236,9 @@ export default {
 }
 .tab-btn{
   width: 200rpx;
+  will-change: transform;
+  display: block;
+  height: auto;
 }
 .tabs-wrap{
   white-space: nowrap;