Feat：康养部分接口对接（圣地，食材为对接）

pkg_product/views/healthSanctum.vue

@@ -5,8 +5,10 @@
       <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="v12-font-28 v12-secondary-dark-text v12-mr-3">昆明市</view>
-      <view class="flex-1"><u-search :showAction="false"></u-search></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" @search="search"></u-search>
+      </view>
     </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">
@@ -18,44 +20,37 @@
       <view 
         class="tab v12-font-bold v12-font-34 v12-dark-text " 
         v-for="(tab, index) in tabs" 
-        @click="handleTab(index)"
+        @click="handleTab(index,tab)"
         :key="index">
-        <text>{{ tab.label }}</text>
+        <text>{{ tab.name }}</text>
         <view :class="{'slider': index === actived}"></view>
       </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">
         <view class="img">
-          <view class="v12-white-text v12-font-weight-300 address">{{ item.adress }}</view>
+          <image class="img" :src="item.cover"></image>
+          
+          <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.title }}</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="atr"></view>
-          <view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
+          <view class="atr">
+            <image class="atr" :src="item.logo"></image>
+          </view>
+          <view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.hotelName }}</view>
         </view>
       </view>
     </view>
   </view>
 </template>
 <script>
+import { getCategory,getWellnessPlace } from '@/api/health'
 export default {
   data() {
     return {
-      tabs: [
-        {label: '泡温泉', value: 0},
-        {label: '养生茶馆', value: 1},
-        {label: '康养生活', value: 2},
-        {label: '养生食府', value: 3},
-      ],
-      items: [
-        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
-        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
-        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
-        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
-        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
-        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
-      ],
+      tabs: [],
+      items: [],
       traveItems: [
         {img: '', value: ''},
         {img: '', value: ''},
@@ -66,18 +61,49 @@ export default {
         {img: '', value: ''},
         {img: '', value: ''},
       ],
-      actived: 0
+      actived: 0,
+      cityId: '',
+      cityName: '',
+      categoryId: null,
+      keyword: ''
     }
   },
+  onLoad(opts) {
+    this.cityId = opts.city
+    this.cityName = opts.cityName
+    getCategory().then(res => {
+      this.tabs = res.data
+      this.categoryId = res.data[0].id
+      this.getList()
+    })
+  },
   methods: {
-    handleTab(index) {
+    handleTab(index, tab) {
       this.actived = index
+      this.categoryId = tab.id
+      this.getList()
     },
     toFoods() {
       uni.navigateTo({
         url: '/pkg_product/views/healthFoods'
       })
     },
+    getList() {
+      const params = {
+        goodCityId: this.cityId,
+        categoryId: this.categoryId,
+        keyword: this.keyword,
+        page: 1,
+        limit: 9999
+      }
+      getWellnessPlace(params).then(res => {
+        // console.log(res);
+        this.items = res.data.records
+      })
+    },
+    search() {
+      this.getList()
+    }
   }
 }
 </script>
@@ -123,13 +149,12 @@ export default {
 .atr{
   width: 52rpx;
   height: 52rpx;
-  background: #707070;
   border-radius: 50%;
 }
 .img{
   width: 320rpx;
   height: 320rpx;
-  background: #707070;
+  // background: #707070;
   border-radius: 16rpx;
   position: relative;
 }