Feat：旅居页面调整

api/health.js

@@ -79,3 +79,11 @@ export function getRecipe(params) {
 export function getBanner() {
   return request.get("/wellness/exhibition/banner")
 }
+
+/**
+ * 康养生活-康养旅居顶部配置
+ * @returns 
+ */
+export function getWellnessTopImage() {
+  return request.get("/wellness/topImage")
+}

pages.json

@@ -532,7 +532,7 @@
           "path": "views/healthFoods",
           "style": {
             "navigationBarTitleText": "康养旅居",
-            "navigationBarBackgroundColor": "#FAEED8"
+            "navigationBarBackgroundColor": "#FFFFFF"
           }
         },
         {

pkg_product/views/healthFoods.vue

@@ -1,62 +1,28 @@
 <template>
   <view class="health-foods">
-    <view class="v12-justify-center">
+    <view
-      <view
+      class="banner-wrap"
-        class="ys-btn v12-mr-3 v12-radius-100 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold"
+      v-if="topImageConfig && topImageConfig.backgroundImage"
-        @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 + '/orderIcon/map_dark.png'"
+        :src="topImageConfig.backgroundImage"
+        class="banner-img"
         mode="widthFix"
-        class="icon"
       />
-      <view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{
+      <view class="banner-tabs v12-justify-center">
-        cityName
+        <image
-      }}</view>
+          class="tab-btn v12-mr-3"
-      <view class="flex-1">
+          :src="travelButtonSrc"
-        <u-search
+          mode="widthFix"
-          :showAction="false"
+          @click="toSanctun"
-          v-model="keyword"
+        />
-          bgColor="#fff"
+        <image
-          searchIconColor="#C52733"
+          class="tab-btn"
-          @search="search"
+          :src="wellnessButtonSrc"
-        ></u-search>
+          mode="widthFix"
+        />
       </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" @click="toDetails(item.id)">
-        <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>
-          </view>
-          <view class="trave-btn">
-            <text class="one-t">{{ item.name }}</text>
-            <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="hasRankData">
       <image
         class="title-img"
@@ -67,7 +33,12 @@
     <view class="rank-wrap v12-mt-3" v-if="hasRankData">
       <view class="rank-items-wrap">
         <view class="bee-rank" v-for="(k, i) in rank" :key="i">
-          <image :src="k.backgroundImage" class="bg-img" style="width:inherit" mode="scaleToFill"></image>
+          <image
+            :src="k.backgroundImage"
+            class="bg-img"
+            style="width: inherit"
+            mode="scaleToFill"
+          ></image>
           <view class="rank-title-wrap">
             <view class="rank-title v12-font-34 v12-font-bold one-t">{{
               k.title
@@ -143,14 +114,19 @@
         >
           <view>
             <view class="recommend-img">
-              <image class="recommend-img" :src="item.image" mode="aspectFit"></image>
+              <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">{{
+            <view
-              item.productName
+              class="v12-px-2 v12-font-bold v12-font-28 more-t v12-my-2"
-            }}</view>
+              >{{ item.productName }}</view
+            >
           </view>
           <view
             class="v12-justify-between v12-primary-text v12-font-bold v12-px-2 v12-pb-2"
@@ -188,7 +164,7 @@
   </view>
 </template>
 <script>
-import { getRank, getFoods, getRecipe } from "@/api/health";
+import { getRank, getFoods, getRecipe, getWellnessTopImage } from "@/api/health";
 import ProductWindow from '@/components/ProductWindow'
 import goCartMixin from '@/mixins/goCartMixins'
 export default {
@@ -219,17 +195,24 @@ export default {
         }
         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,
-      foodItems: [],
       recommendItems: [],
       cityId: "",
       cityName: "",
-      keyword: "",
       rank: [],
+      topImageConfig: {}
     };
   },
   onLoad(opts) {
@@ -237,7 +220,7 @@ export default {
     this.cityName = decodeURIComponent(opts.cityName);
     this.getRank();
     this.getList();
-    this.getRecipeList();
+    this.getTopImage();
   },
   methods: {
     toGoods(id) {
@@ -257,17 +240,6 @@ export default {
           this.cityName,
       });
     },
-    getRecipeList() {
-      getRecipe().then((res) => {
-        // console.log(res);
-        this.foodItems = res.data.records;
-      });
-    },
-    toDetails(id) {
-      uni.navigateTo({
-        url: "/pkg_product/views/healthFoodDetails?id=" + id,
-      });
-    },
     getRank() {
       let params = {
         goodCityId: this.cityId,
@@ -279,7 +251,6 @@ export default {
     getList() {
       const params = {
         goodCityId: this.cityId,
-        keyword: this.keyword,
         page: 1,
         limit: 9999,
       };
@@ -290,10 +261,37 @@ export default {
     search() {
       this.getList();
     },
-  },
+    getTopImage() {
-};
+      getWellnessTopImage().then((res) => {
+        this.topImageConfig = res.data || {};
+      });
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
+.banner-wrap {
+  position: relative;
+  margin-left: -20rpx;
+  margin-right: -20rpx;
+}
+.banner-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  will-change: transform;
+}
+.banner-tabs {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 40rpx;
+  display: flex;
+  justify-content: center;
+}
+.tab-btn {
+  width: 200rpx;
+}
 .arrow-icon {
   width: 25rpx;
   height: 25rpx;
@@ -479,7 +477,7 @@ export default {
 }
 .health-foods {
   min-height: 100vh;
-  background-color: #faeed8;
+  background-color: #fff;
   padding: 20rpx;
   box-sizing: border-box;
 }

pkg_product/views/healthSanctum.vue

@@ -1,42 +1,28 @@
 <template>
   <view class="sanctum-wrap">
-    <view class="v12-justify-center">
+    <view
-      <view class="v12-mr-3 v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2  v12-font-28 v12-font-bold">养生胜地</view>
+      class="banner-wrap"
-      <view class="v12-radius-100 v12-grey v12-dark-text v12-px-5 v12-py-2  v12-font-28 v12-font-bold" @click="toFoods">养生食材</view>
+      v-if="topImageConfig && topImageConfig.backgroundImage"
-    </view>
+    >
-    <view class="v12-justify-between v12-align-center v12-mt-5">
       <image
-        :src="webUrl + '/orderIcon/map_dark.png'"
+        :src="topImageConfig.backgroundImage"
+        class="banner-img"
         mode="widthFix"
-        class="icon"
       />
-      <view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
+      <view class="banner-tabs v12-justify-center">
-      <view class="flex-1" @click="search">
+        <image
-        <u-search searchIconColor="#C52733" :disabled="true" :showAction="false" v-model="keyword" ></u-search>
+          class="tab-btn v12-mr-3"
+          :src="travelButtonSrc"
+          mode="widthFix"
+        />
+        <image
+          class="tab-btn"
+          :src="wellnessButtonSrc"
+          mode="widthFix"
+          @click="toFoods"
+        />
       </view>
     </view>
-    <swiper v-if="traveItems.length > 0" class="v12-justify-between swap" autoplay circular next-margin="300rpx" duration="10000" interval="3000" >
-      <swiper-item v-for="(item, index) in traveItems" :key="index" >
-        <view class="trave-item v12-mr-3 v12-mt-3" @click="toStore(item)">
-          <view class="trave-item">
-            <image class="trave-item" :src="item.cover" v-if="item.coverType === 1"></image>
-            <video
-              class="trave-item"
-              :src="item.cover"
-              :show-fullscreen-btn="false"
-              :show-center-play-btn="false"
-              :show-play-btn="false"
-              :poster="item.cover + '?vframe/jpg/offset/1'"
-              v-if="item.coverType === 2"
-            ></video>
-          </view>
-          <view class="trave-btn">
-            <text>旅居预约</text>
-            <image  :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
-          </view>
-        </view>
-      </swiper-item>
-    </swiper>
     <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" 
@@ -88,8 +74,9 @@
   </view>
 </template>
 <script>
-import { getCategory,getWellnessPlace } from '@/api/health'
+import { getCategory } from '@/api/health'
 import { getJiaLouList } from '@/api/qianxian'
+import { getWellnessTopImage } from '@/api/health'
 export default {
   data() {
     return {
@@ -101,12 +88,20 @@ export default {
       cityId: '',
       cityName: '',
       categoryId: null,
-      keyword: ''
+      topImageConfig: {}
+    }
+  },
+  computed: {
+    travelButtonSrc() {
+      const config = this.topImageConfig || {}
+      return config.travelButtonImageFocus || config.travelButtonImage || ''
+    },
+    wellnessButtonSrc() {
+      const config = this.topImageConfig || {}
+      return config.wellnessButtonImage || config.wellnessButtonImageFocus || ''
     }
   },
   onLoad(opts) {
-    console.log(opts);
-    
     this.cityId = opts.city
     this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
     getCategory().then(res => {
@@ -115,11 +110,9 @@ export default {
       this.getList()
     })
     this.getTop()
+    this.getTopImage()
   },
   onUnload() {
-    // uni.navigateBack({
-    //   delta: 0
-    // })
   },
   methods: {
     handleTab(index, tab) {
@@ -134,7 +127,6 @@ export default {
     },
     getList() {
       const params = {
-        // countyId: this.cityId,
         goodCityId: this.cityId,
         wellnessPlaceCateId : this.categoryId,
         shopType: 'wellnessCate',
@@ -142,7 +134,6 @@ export default {
         limit: 9999
       }
       getJiaLouList(params).then(res => {
-        // console.log(res);
         this.items = res.data.records
       })
     },
@@ -159,7 +150,6 @@ export default {
         limit: 9999
       }
       getJiaLouList(params).then(res => {
-        // console.log(res);
         this.traveItems = res.data.records
       })
     },
@@ -175,10 +165,37 @@ export default {
         uni.navigateTo({ url: '/pkg_product/views/sojoumStore?id=' + item.id }) 
       }
     },
+    getTopImage() {
+      getWellnessTopImage().then(res => {
+        this.topImageConfig = res.data || {}
+      })
+    }
   }
 }
 </script>
 <style lang="less" scoped>
+.banner-wrap{
+  position: relative;
+  margin-left: -20rpx;
+  margin-right: -20rpx;
+}
+.banner-img{
+  width: 100%;
+  height: auto;
+  display: block;
+  will-change: transform;
+}
+.banner-tabs{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 40rpx;
+  display: flex;
+  justify-content: center;
+}
+.tab-btn{
+  width: 200rpx;
+}
 .tabs-wrap{
   white-space: nowrap;
   overflow: scroll;