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

pkg_product/views/homestay.vue

@@ -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 {