Feat(民宿&节日&尖货专题页):使用模板配置渲染

2024-08-13 17:19:04 +08:00
parent 017f34bbf4
commit 75a821eb6c
9 changed files with 928 additions and 132 deletions
@@ -9,36 +9,66 @@
      color='#ffffff'
    />
    <view v-if="isLoad">
-      <image
-        v-if="topImage"
-        :src="topImage"
-        class="top-img"
-        mode="widthFix"
-      />
-      <view
-        v-for="(content, cIndex) in contents"
-        :key="cIndex"
-        class="section"
-      >
+      <view v-if="templateKey === 'default_template'">
        <image
-          :src="content.backgroundImage"
-          class="section-bg"
+          v-if="topImage"
+          :src="topImage"
+          class="top-img"
          mode="widthFix"
        />
        <view
-          :class="cIndex === 0 ? 'section12' : 'section8'"
-          class="list flex flex-wrap"
+          v-for="(content, cIndex) in contents"
+          :key="cIndex"
+          class="section"
        >
          <image
-            v-for="(item,index) in content.products"
-            :key="index"
-            :class="cIndex === 0 ? 'span12' : 'span8'"
-            :src="item.image"
-            mode="scaleToFill"
-            @click="goGoods(item.id || item.linkId)"
+            :src="content.backgroundImage"
+            class="section-bg"
+            mode="widthFix"
          />
+          <view
+            :class="cIndex === 0 ? 'section12' : 'section8'"
+            class="list flex flex-wrap"
+          >
+            <image
+              v-for="(item, index) in content.products"
+              :key="index"
+              :class="cIndex === 0 ? 'span12' : 'span8'"
+              :src="item.image"
+              mode="scaleToFill"
+              @click="goGoodsOrShop(item)"
+            />
+          </view>
        </view>
      </view>
+      <view v-if="templateKey === 'template_1'">
+        <theme-page-template1
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_2'">
+        <theme-page-template2
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_3'">
+        <theme-page-template3
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_4'">
+        <theme-page-template4
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
    </view>
    <goo-skeleton v-else />
  </view>
@@ -48,17 +78,30 @@
 * 节日专题&尖货推荐初始模板
 * options.theme:best-尖货，''-节日
 */
-import { getFestival, getContentBest } from '@/api/product'
+import { getFestivalV2, getContentBest } from '@/api/product'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import ThemePageTemplate1 from '../components/ThemePageTemplate1.vue'
+import ThemePageTemplate2 from '../components/ThemePageTemplate2.vue'
+import ThemePageTemplate3 from '../components/ThemePageTemplate3.vue'
+import ThemePageTemplate4 from '../components/ThemePageTemplate4.vue'
 export default {
  name: 'FestivalPage',
+  components: {
+    ThemePageTemplate1,
+    ThemePageTemplate2,
+    ThemePageTemplate3,
+    ThemePageTemplate4
+  },
  mixins: [pageListenMixins],
  data() {
    return {
      isLoad: false,
      topImage: '',
-      contents: {},
-      pageKeyId: ''
+      contents: [],
+      pageKeyId: '',
+      templateKey: '',
+      // 模板数据
+      templateProperties: {}
    }
  },
  onLoad(options) {
@@ -67,13 +110,41 @@ export default {
    // 尖货
    if (theme === 'best') {
      this.pageKeyId = `appContentBest_id_${id}`
-      getContentBest(id).then(({data}) => {
+      this.getContentBestReq(id)
+    } else {
+      this.pageKeyId = 'appContentFestival'
+      this.getFestivalReq()
+    }
+  },
+  methods: {
+    getFestivalReq() {
+      /*旧接口
+      getFestival().then(({data}) => {
        this.isLoad = true
-        const contents = []
-        if (data.templateProperties) {
-          const temp = data.templateProperties
-          // 第一页图片
-          this.topImage = temp.page1Image
+        this.topImage = data.topImage
+        this.contents = data.contents
+      })
+      */
+      getFestivalV2().then(res => {
+        const { data } = res
+        this.renderTemplateData(data)
+      })
+    },
+    getContentBestReq(id) {
+      getContentBest(id).then(res => {
+        const { data } = res
+        this.renderTemplateData(data)
+      })
+    },
+    renderTemplateData(data) {
+      const contents = []
+      if (data.templateProperties) {
+        const templateKey = data.templateKey
+        const temp = data.templateProperties
+        // 第一页图片
+        this.topImage = temp.page1Image
+        // 默认模板
+        if (templateKey === 'default_template') {
          // 第二页数据
          contents.push({
            backgroundImage: temp.page2BackgroundImage,
@@ -85,22 +156,27 @@ export default {
            products: temp.page3Links
          })
        }
-        this.contents = contents
-      })
-    } else {
-      this.pageKeyId = 'appContentFestival'
-      getFestival().then(({data}) => {
-        this.isLoad = true
-        this.topImage = data.topImage
-        this.contents = data.contents
-      })
-    }
-  },
-  methods: {
-    goGoods(id) {
-      uni.navigateTo({
-        url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
-      })
+        // 模板1
+        if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
+          this.templateProperties = temp
+        }
+      }
+      this.templateKey = data.templateKey
+      this.contents = contents
+      this.isLoad = true
+    },
+    goGoodsOrShop(item) {
+      const id = item.linkId
+      const type = item.type || 1
+      if (type === 1) {
+        uni.navigateTo({
+          url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
+        })
+      } else {
+        uni.navigateTo({
+          url: `/pagesInn/inn/innHome?id=${id}&from=festival`
+        })
+      }
    }
  }
 }
@@ -1,38 +1,3 @@
-<script>
-// 民宿专题
-import {getHomestay} from '@/api/product'
-import { pageListenMixins } from '@/mixins/pageListenMixins'
-export default {
-  name: 'HomestayPage',
-  mixins: [pageListenMixins],
-  data() {
-    return {
-      webUrl: this.$VUE_APP_RESOURCES_URL,
-      topImage: '',
-      contents: [],
-      id: null,
-      pageKeyId: ''
-    }
-  },
-  onLoad(options) {
-    const id = options.id
-    this.id = id
-    this.pageKeyId = `appContentHomestay_id_${id}`
-    getHomestay(this.id).then(({data}) => {
-      this.topImage = data.topImage
-      this.contents = data.contents
-    })
-  },
-  methods: {
-    goInnDetail(item) {
-      uni.navigateTo({
-        url: `/pagesInn/inn/innHome?id=${item.id}&from=homestay`
-      })
-    }
-  }
-}
-</script>
-
 <template>
  <view class="pkg-product-homestay">
    <hx-navbar
@@ -43,18 +8,167 @@ export default {
      transparent="auto"
      color='#ffffff'
    />
-    <image class="top-img" mode="widthFix" :src="topImage" v-if="topImage"/>
-
-    <view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
-      <image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
-
-      <view class="list flex flex-wrap" :class="cIndex===2?'section12':'section24'">
-        <image :class="cIndex===2?'span12':'span24'" mode="scaleToFill" :src="item.image"
-               v-for="(item,index) in content.hotels" :key="index" @click="goInnDetail(item)"/>
+    <view v-if="isLoad">
+      <view v-if="templateKey === 'default_template_homestay'">
+        <image
+          v-if="topImage"
+          :src="topImage"
+          mode="widthFix"
+          class="top-img"
+        />
+        <view
+          v-for="(content, cIndex) in contents"
+          :key="cIndex"
+          class="section"
+        >
+          <image
+            :src="content.backgroundImage"
+            mode="widthFix"
+            class="section-bg"
+          />
+          <view
+            :class="cIndex === 2 ? 'section12' : 'section24'"
+            class="list flex flex-wrap"
+          >
+            <image
+              v-for="(item, index) in content.list"
+              :key="index"
+              :src="item.image"
+              :class="cIndex === 2 ? 'span12' : 'span24'"
+              mode="scaleToFill"
+              @click="goGoodsOrShop(item)"
+            />
+          </view>
+        </view>
+      </view>
+      <view v-if="templateKey === 'template_1'">
+        <theme-page-template1
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_2'">
+        <theme-page-template2
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_3'">
+        <theme-page-template3
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_4'">
+        <theme-page-template4
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
      </view>
    </view>
+    <goo-skeleton v-else />
  </view>
 </template>
+<script>
+// 民宿专题
+import { getHomestayV2 } from '@/api/product'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+import ThemePageTemplate1 from '../components/ThemePageTemplate1.vue'
+import ThemePageTemplate2 from '../components/ThemePageTemplate2.vue'
+import ThemePageTemplate3 from '../components/ThemePageTemplate3.vue'
+import ThemePageTemplate4 from '../components/ThemePageTemplate4.vue'
+export default {
+  name: 'HomestayPage',
+  components: {
+    ThemePageTemplate1,
+    ThemePageTemplate2,
+    ThemePageTemplate3,
+    ThemePageTemplate4
+  },
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      isLoad: false,
+      topImage: '',
+      contents: [],
+      pageKeyId: '',
+      templateKey: '',
+      // 模板数据
+      templateProperties: {}
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    this.pageKeyId = `appContentHomestay_id_${id}`
+    this.getHomestayReq(id)
+  },
+  methods: {
+    getHomestayReq(id) {
+      /*旧接口
+      getHomestay(this.id).then(({data}) => {
+        this.topImage = data.topImage
+        this.contents = data.contents
+      })
+      */
+      getHomestayV2(id).then(res => {
+        const { data } = res
+        this.renderTemplateData(data)
+      })
+    },
+    renderTemplateData(data) {
+      const contents = []
+      if (data.templateProperties) {
+        const templateKey = data.templateKey
+        const temp = data.templateProperties
+        // 第一页图片
+        this.topImage = temp.page1Image
+        // 默认模板
+        if (templateKey === 'default_template_homestay') {
+          // 第二页数据
+          contents.push({
+            backgroundImage: temp.page2BackgroundImage,
+            list: temp.page2Links
+          })
+          // 第三页数据
+          contents.push({
+            backgroundImage: temp.page3BackgroundImage,
+            list: temp.page3Links
+          })
+          // 第四页数据
+          contents.push({
+            backgroundImage: temp.page4BackgroundImage,
+            list: temp.page4Links
+          })
+        }
+        // 模板1
+        if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
+          this.templateProperties = temp
+        }
+      }
+      this.templateKey = data.templateKey
+      this.contents = contents
+      this.isLoad = true
+    },
+    goGoodsOrShop(item) {
+      const id = item.linkId
+      const type = item.type || 1
+      if (type === 1) {
+        uni.navigateTo({
+          url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
+        })
+      } else {
+        uni.navigateTo({
+          url: `/pagesInn/inn/innHome?id=${id}&from=festival`
+        })
+      }
+    }
+  }
+}
+</script>

 <style scoped lang="less">
 .pkg-product-homestay {