Feat： 寻趣味改版（新增古镇模块）

pages/cloud/haveFun.vue

@@ -26,20 +26,39 @@
           </view>
         </view>
       </view>
-      <scroll-view class="type-box flex" scroll-x enable-flex>
-        <view
-          v-for="(item, index) in typeList"
-          :key="index"
-          :class="{
-            'active': typeIndex === index
-          }"
-          class="item flex-0 flex flex-col jc-center ai-center"
-          @click="tapType(index)"
-        >
-          <image :src="item.icon" mode="scaleToFill"/>
-          <view class="name">{{ item.name }}</view>
-        </view>
-      </scroll-view>
+      <view>
+        
+        <scroll-view class="type-box flex" scroll-x enable-flex>
+          <view class="first-box">
+            <view class="first-box__inner">
+              <view
+                :class="{
+                  'active': typeIndex === -1
+                }"
+                class="item flex-0 flex flex-col jc-center ai-center"
+                @click="tapType(-1)"
+              >
+                <image :src="townConfig.icon" mode="scaleToFill"/>
+                <view class="name">{{ townConfig.label }}</view>
+              </view>
+            </view>
+          </view>
+          <view class="scroll-box">
+            <view
+              v-for="(item, index) in typeList"
+              :key="index"
+              :class="{
+                'active': typeIndex === index
+              }"
+              class="item flex-0 flex flex-col jc-center ai-center"
+              @click="tapType(index)"
+            >
+              <image :src="item.icon" mode="scaleToFill"/>
+              <view class="name">{{ item.name }}</view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
     </view>
     <view class="type-banner-wrap">
       <view v-if="currType.titleImage" class="title">
@@ -71,7 +90,16 @@
         </swiper>
       </view>
     </view>
-    <view class="body">
+    <view class="body" v-if="typeIndex === -1">
+      <view class="town-card" v-for="(town, i) in townList" :key="i" @click="toTown(town)">
+        <view class="town-title">{{ town.name }}</view>
+        <image :src="town.frontImage" mode="scaleToFill"/>
+        <view class="v12-primary enter-btn">点击进入
+          <view class="icon-box"><u-icon name="arrow-rightward" color="#fff" size="8"></u-icon></view>
+        </view>
+      </view>
+    </view>
+    <view class="body" v-else>
       <view>
         <text class="v12-font-bold" v-if="currType.carousel">推荐</text>
       </view>
@@ -114,7 +142,7 @@
   </view>
 </template>
 <script>
-import { getHotelList, getHotelTypeList } from "@/api/inn.js"
+import { getHotelList, getHotelTypeList, getAncientTownIcon, getAncientTownList } from "@/api/inn.js"
 import { getCurAddress, getLocation } from "@/utils/common"
 import FunHotelItem from './components/HotelItem'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
@@ -131,14 +159,16 @@ export default {
       name: '',
       page: 1,
       typeList: [],
-      typeIndex: 0,
+      typeIndex: -1,
       // 当前选中的类型
       currType: {},
       cityName: '',
       hotelList: [],
       isLoad: false,
       pageKeyId: Object.freeze('findFunIndex'),
-      isNext: false
+      isNext: false,
+      townConfig: {},
+      townList: []
     }
   },
   computed: {
@@ -162,10 +192,10 @@ export default {
     this.currType = {}
     getHotelTypeList().then(({data}) => {
       this.typeList = data
-      this.currType = data[this.typeIndex]
+      this.currType = this.typeIndex === -1 ? {} : data[this.typeIndex]
       this.getMapData()
     })
-    
+    this.getIcon()
   },
   onShow() {
     const memCityName = uni.getStorageSync('cityName')
@@ -190,6 +220,16 @@ export default {
     }
   },
   methods: {
+    toTown(town) {
+      uni.navigateTo({
+        url: `/pages/town/index?id=${town.id}`
+      })
+    },
+    getIcon() {
+      getAncientTownIcon().then(res => {
+        this.townConfig = res.data
+      })
+    },
     goCity() {
       uni.navigateTo({
         url: `/pages/chose-city/chose-city?type=2&city=${this.cityName}`
@@ -212,9 +252,11 @@ export default {
       }
     },
     tapType(index) {
+      
       if (this.typeIndex === index) return
       this.typeIndex = index
-      this.currType = this.typeList[index]
+      
+      this.currType = index === -1 ? {} : this.typeList[index]
       this.name = ''
       this.search()
     },
@@ -225,6 +267,17 @@ export default {
       this.fetchList()
     },
     fetchList() {
+      if(this.typeIndex === -1) {
+        const params = {
+          cityName: this.name,
+          page: 1,
+          limit: 999
+        }
+        getAncientTownList(params).then(res => {
+          this.townList = res.data.records
+        })
+        return
+      }
       const param = {
         page: this.page,
         type: this.typeList[this.typeIndex].id,
@@ -267,6 +320,74 @@ export default {
 }
 </script>
 <style scoped lang="less">
+.icon-box{
+  border: 1rpx solid #fff;
+  border-radius: 100%;
+  width: 16rpx;
+  height: 16rpx;
+  margin-left: 5rpx;
+  padding: 2rpx;
+}
+.enter-btn{
+  color: #fff;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  padding: 10rpx 16rpx;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  border-radius: 30rpx 0;
+  font-size: 24rpx;
+}
+.town-title{
+  border-radius: 100rpx;
+  /* border-color: #333; */
+  // mix-blend-mode: difference;
+  width: fit-content;
+  padding: 5rpx 20rpx;
+  border: 1rpx solid #fff;
+  color: #fff;
+  position: absolute;
+  margin: auto;
+  top: 20rpx;
+  left: 0;
+  right: 0;
+}
+.town-card{
+  width: 100%;
+  height: 400rpx;
+  background: #fff;
+  border-radius: 30rpx;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30rpx;
+  image{
+    width: -webkit-fit-content;
+    width: inherit;
+    height: -webkit-fit-content;
+    height: inherit;
+  }
+}
+.first-box{
+  padding-right: 15rpx;
+  position: sticky;
+  left: 0;
+  background-color: #f5f5f5;
+  z-index: 9;
+}
+.first-box__inner{
+  padding: 10rpx;
+  background: #fff;
+  border-radius: 30rpx;
+}
+.scroll-box{
+  display: flex;
+  height: fit-content;
+  background: #fff;
+  padding: 10rpx;
+  border-radius: 30rpx;
+}
 .search-btn{
   position: absolute;
     top: 2rpx;