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

pkg_product/views/festival.vue

@@ -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`
+        })
+      }
     }
   }
 }