Feat(趣味):轮播广告位对接

pages/cloud/haveFun.vue

@@ -31,6 +31,36 @@
         </view>
       </scroll-view>
     </view>
+    <view class="type-banner-wrap">
+      <view v-if="currType.titleImage" class="title">
+        <image
+          :src="currType.titleImage"
+          mode="heightFix"
+          class="img"
+        />
+      </view>
+      <view v-if="currType.carousel" class="slider-wrap">
+        <swiper
+          indicatorDots="true"
+          indicator-color="rgba(255, 255, 255, .3)"
+          indicator-active-color="#ffffff"
+          autoplay
+          circular
+          style="height: 330rpx;"
+        >
+          <block
+            v-for="(item, bannerIndex) in currType.carousel"
+            :key="bannerIndex"
+          >
+            <swiper-item>
+              <view class="swiper-item" @click="typeBannerItemClick(item)">
+                <image :src="item.carouselImage" class="img" />
+              </view>
+            </swiper-item>
+          </block>
+        </swiper>
+      </view>
+    </view>
     <view class="body">
       <view class="flex jc-end">
         <view class="city-box" @click="goCity('cloud')">
@@ -95,6 +125,8 @@ export default {
       page: 1,
       typeList: [],
       typeIndex: 0,
+      // 当前选中的类型
+      currType: {},
       cityName: '',
       hotelList: [],
       isLoad: false,
@@ -119,6 +151,7 @@ export default {
   onLoad() {
     getHotelTypeList().then(({data}) => {
       this.typeList = data
+      this.currType = data[this.typeIndex]
       this.getMapData()
     })
   },
@@ -154,6 +187,7 @@ export default {
     tapType(index) {
       if (this.typeIndex === index) return
       this.typeIndex = index
+      this.currType = this.typeList[index]
       this.name = ''
       this.search()
     },
@@ -192,6 +226,10 @@ export default {
       }).finally(() => {
         this.isLoad = true
       })
+    },
+    typeBannerItemClick(item) {
+      if (!item.hotelId) return
+      uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.hotelId}` })
     }
   }
 }
@@ -297,4 +335,27 @@ export default {
 .tabbar-page {
   padding: 0 0 180rpx 0;
 }
+.type-banner-wrap {
+  padding: 0 20rpx;
+  background-color: #f0f0f0;
+  .title {
+    padding: 20rpx 0;
+    .img {
+      display: block;
+      height: 48rpx;
+    }
+  }
+  .slider-wrap {
+    width: 100%;
+    height: 330rpx;
+    padding: 0 0 20rpx 0;
+    .swiper-item {
+      .img {
+        display: block;
+        width: 100%;
+        height: 330rpx;
+      }
+    }
+  }
+}
 </style>