Feat(千县名品):县店铺首页界面接口对接

2024-08-20 17:56:14 +08:00
parent 05b6075df3
commit 74c5c2b768
7 changed files with 786 additions and 44 deletions
@@ -0,0 +1,181 @@
+<template>
+  <view>
+    <hx-navbar
+      :fixed="true"
+      :background-color="[[13,197,197],[13,197,197]]"
+      statusBarFontColor="#ffffff"
+      barPlaceholder="hidden"
+      transparent="auto"
+      color='#ffffff'
+    />
+    <view v-if="isLoad">
+      <image
+        :src="templateProperties.page1Image"
+        class="top-img"
+        mode="widthFix"
+      />
+      <view class="page-wrap">
+        <view class="page-2">
+          <swiper
+            class="swiper"
+            circular
+            autoplay
+            :interval="5000"
+          >
+            <swiper-item
+              v-for="(swiperItem, swiperIndex) in templateProperties.page2Images"
+              :key="swiperIndex"
+            >
+              <image
+                :src="swiperItem"
+                mode="scaleToFill"
+                class="swiper-img"
+              />
+            </swiper-item>
+          </swiper>
+        </view>
+      </view>
+      <!-- 第三页 -->
+      <view class="page-wrap">
+        <view class="page-5">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="shop-img"
+            mode="widthFix"
+            @click="linkToShop(item)"
+          />
+        </view>
+      </view>
+      <!-- 第四页 -->
+      <view class="page-wrap">
+        <view class="page-4">
+          <image
+            :src="templateProperties.page4Image"
+            class="section-bg"
+            mode="widthFix"
+          />
+        </view>
+      </view>
+      <!-- 第五页 -->
+      <view class="page-wrap">
+        <view class="page-2">
+          <swiper
+            class="swiper"
+            circular
+            autoplay
+            :interval="5000"
+          >
+            <swiper-item
+              v-for="(swiperItem, swiperIndex) in templateProperties.page5Images"
+              :key="swiperIndex"
+            >
+              <image
+                :src="swiperItem"
+                mode="scaleToFill"
+                class="swiper-img"
+              />
+            </swiper-item>
+          </swiper>
+        </view>
+        <view class="page-5">
+          <image
+            v-for="(item, index) in templateProperties.page5Links"
+            :key="index"
+            :src="item.image"
+            class="shop-img"
+            mode="widthFix"
+            @click="linkToShop(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <goo-skeleton v-else />
+  </view>
+</template>
+<script>
+import {
+  getCountyFamousCityGuideContent
+} from '@/api/qianxian'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+export default {
+  name: 'FamousQianxianTheme',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      isLoad: false,
+      pageKeyId: '',
+      templateProperties: {
+        page1Image: '',
+        page2Images: [],
+        page3Links: [],
+        page4Image: '',
+        page5Images: '',
+        page5Links: []
+      }
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    this.getDetailReq(id)
+  },
+  methods: {
+    getDetailReq(id) {
+      getCountyFamousCityGuideContent({
+        guideId: id
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.isLoad = true
+          this.templateProperties = data || {}
+        }
+      })
+    },
+    linkToShop(item) {
+      const linkId = item.linkId || ''
+      if (!linkId) return
+      uni.navigateTo({
+        url: `/pagesInn/inn/innHome?id=${linkId}&from=famous`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    width: 100%;
+    height: 450rpx;
+    .swiper {
+      width: 100%;
+      height: 100%;
+      .swiper-img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .page-4 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+  .page-5 {
+    .shop-img {
+      display: block;
+      width: 100%;
+      height: 300rpx;
+    }
+  }
+}
+</style>