Feat：旅居页面调整

pkg_product/views/healthSanctum.vue

@@ -1,42 +1,28 @@
 <template>
   <view class="sanctum-wrap">
-    <view class="v12-justify-center">
-      <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>
-      <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>
-    </view>
-    <view class="v12-justify-between v12-align-center v12-mt-5">
+    <view
+      class="banner-wrap"
+      v-if="topImageConfig && topImageConfig.backgroundImage"
+    >
       <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="flex-1" @click="search">
-        <u-search searchIconColor="#C52733" :disabled="true" :showAction="false" v-model="keyword" ></u-search>
+      <view class="banner-tabs v12-justify-center">
+        <image
+          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;