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

api/product.js

@@ -78,6 +78,10 @@ export function getHomestay(id) {
     return request.get(`/contentHomestay/${id}`, {}, {login: false})
 }
 
+export function getHomestayV2(id) {
+    return request.get(`/contentHomestay/v2/${id}`, {}, {login: false})
+}
+
 /**
  * 节日专题
  * */
@@ -85,6 +89,10 @@ export function getFestival() {
     return request.get('/contentFestival', {}, {login: false})
 }
 
+export function getFestivalV2() {
+    return request.get('/contentFestival/v2', {}, {login: false})
+}
+
 /**
  * 尖货专题
  * */

pages/home/index.vue

@@ -367,8 +367,8 @@ export default {
         _this.$set(_this, 'landmarkGoodsImage', data.landmarkGoodsImage)
         _this.$set(_this, 'countyFamousImage', data.countyFamousImage)
         _this.$set(_this, 'oldUserPopup', data.oldUserPopup)
-        _this.$set(_this, 'contentHomestay', data.contentHomestay)
+        _this.$set(_this, 'contentHomestay', data.contentHomestayV2)
-        _this.$set(_this, 'contentFestival', data.contentFestival)
+        _this.$set(_this, 'contentFestival', data.contentFestivalV2)
         _this.bastLeftList = []
         _this.bastRightList = []
         for (let i = 0; i < data.bastList.length; i++) {
@@ -418,27 +418,53 @@ export default {
       this.isOldUser = state
     },
     // 民宿专题
-    goHomeStay(stay) {
+    goHomeStay(item) {
-      if (stay.uniappUrl) {
+      if (item.type === 1) {
-        this.$global.commonJump(stay.uniappUrl)
+        uni.navigateTo({ url: '/pkg_product/views/homestay?id=' + item.id })
         return
       }
-      if (stay.type === 2 && stay.isLinkToProduct) {
+      this.linkToThemePage(item)
-        this.$yrouter.push({
-          path: '/pages/shop/GoodsCon/index',
-          query: {
-            id: stay.productId
-          }
-        })
-        return
-      }
-      if (stay.type === 1) {
-        uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
-      }
     },
     // 节日专题
     goFestival() {
-      uni.navigateTo({url: '/pkg_product/views/festival'})
+      if (this.contentFestival.type === 1) {
+        uni.navigateTo({ url: '/pkg_product/views/festival' })
+        return
+      }
+      this.linkToThemePage(this.contentFestival)
+    },
+    // 尖货专题
+    productSwiperItemClickHandle(item) {
+      if (item.type === 1) {
+        uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
+        return
+      }
+      this.linkToThemePage(item)
+    },
+    linkToThemePage(item) {
+      /**
+       * type:1-专题页,2-商品,3-时令尝鲜
+       * 当type=2，且uniappUrl有值，以跳转界面地址为准
+      */
+      const type = item.type
+      // 链接到特定页面
+      if (type === 2 && item.uniappUrl) {
+        this.$global.commonJump(item.uniappUrl)
+        return
+      }
+      // 商品详情
+      if (type === 2 && item.productId) {
+        this.$yrouter.push({
+          path: '/pages/shop/GoodsCon/index',
+          query: {
+            id: item.productId
+          }
+        })
+      }
+      // 时令尝鲜
+      if (type === 3) {
+        uni.navigateTo({ url: '/pkg_product/views/seasonList' })
+      }
     },
     tapOld() {
       this.isOldUser = false
@@ -493,31 +519,6 @@ export default {
     hotelItemClickHandle(item) {
       uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.id}&from=index` })
     },
-    // 尖货专题
-    productSwiperItemClickHandle(item) {
-      // 类型:1-专题页 2-商品详情 3-时令尝鲜
-      const type = item.type
-      if (type === 1) {
-        uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
-      }
-      // 链接到特定页面
-      if (type === 2 && item.uniappUrl) {
-        this.$global.commonJump(stay.uniappUrl)
-        return
-      }
-      // 商品详情
-      if (type === 2 && item.productId) {
-        this.$yrouter.push({
-          path: '/pages/shop/GoodsCon/index',
-          query: {
-            id: item.productId
-          }
-        })
-      }
-      if (type === 3) {
-        uni.navigateTo({ url: '/pkg_product/views/seasonList' })
-      }
-    },
     setTopHandle() {
       uni.pageScrollTo({
         scrollTop: 0,

pkg_product/components/ThemePageTemplate1.vue

@@ -0,0 +1,168 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      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.page2Links"
+            :key="swiperIndex"
+          >
+            <image
+              :src="swiperItem.image"
+              mode="scaleToFill"
+              class="swiper-img"
+              @click="itemClick(swiperItem)"
+            />
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-3">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :class="index === 0 ? 'span24' : 'span12'"
+            :src="item.image"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-3">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :class="index === 0 ? 'span24' : 'span12'"
+            :src="item.image"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第五页 -->
+    <view class="page-wrap">
+      <view class="page-5">
+        <image
+          :src="templateProperties.page5BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page5Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板1
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate1',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    width: 100%;
+    height: 1350rpx;
+    .swiper {
+      width: 100%;
+      height: 100%;
+      .swiper-img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .page-3 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 0;
+      .span24 {
+        display: block;
+        width: 680rpx;
+        height: 500rpx;
+        margin: 0 0 30rpx 0;
+      }
+      .span12 {
+        display: block;
+        width: 330rpx;
+        height: 540rpx;
+        margin: 0 30rpx 30rpx 0;
+      }
+    }
+  }
+  .page-5 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 35rpx;
+      .item {
+        display: block;
+        width: 680rpx;
+        height: 350rpx;
+        margin: 0 0 35rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate2.vue

@@ -0,0 +1,162 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      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.page2Links"
+            :key="swiperIndex"
+          >
+            <image
+              :src="swiperItem.image"
+              mode="scaleToFill"
+              class="swiper-img"
+              @click="itemClick(swiperItem)"
+            />
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-3">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-4">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第五页 -->
+    <view class="page-wrap">
+      <view class="page-4">
+        <image
+          :src="templateProperties.page5BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page5Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板2
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate2',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    width: 100%;
+    height: 840rpx;
+    .swiper {
+      width: 100%;
+      height: 100%;
+      .swiper-img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .page-3 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 35rpx;
+      .item {
+        display: block;
+        width: 680rpx;
+        height: 500rpx;
+        margin: 0 0 35rpx 0;
+      }
+    }
+  }
+  .page-4 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 0;
+      .item {
+        display: block;
+        width: 330rpx;
+        height: 540rpx;
+        margin: 0 30rpx 25rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate3.vue

@@ -0,0 +1,108 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      class="top-img"
+      mode="widthFix"
+    />
+    <!-- 第二页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板3
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate3',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 35rpx;
+      .item {
+        display: block;
+        width: 680rpx;
+        height: 700rpx;
+        margin: 0 0 35rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate4.vue

@@ -0,0 +1,140 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      class="top-img"
+      mode="widthFix"
+    />
+    <!-- 第二页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            :src="templateProperties.page2Image"
+            class="item item1"
+            mode="scaleToFill"
+          />
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            :src="templateProperties.page3Image"
+            class="item item1"
+            mode="scaleToFill"
+          />
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-4">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板4
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate4',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 0;
+      right: 0;
+      .item {
+        display: block;
+        width: 750rpx;
+        height: 400rpx;
+        margin: 0 0 30rpx 0;
+        &.item1 {
+          height: 800rpx;
+        }
+      }
+    }
+  }
+  .page-4 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 0;
+      .item {
+        display: block;
+        width: 330rpx;
+        height: 540rpx;
+        margin: 0 22rpx 22rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/mixins/themeTemplateMixins.js

@@ -0,0 +1,19 @@
+export const themeTemplateMixins = {
+  props: {
+    topImage: {
+      type: String,
+      default: ''
+    },
+    templateProperties: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  methods: {
+    itemClick(item) {
+      this.$emit('view', item)
+    }
+  }
+}

pkg_product/views/festival.vue

@@ -9,36 +9,66 @@
       color='#ffffff'
     />
     <view v-if="isLoad">
-      <image
+      <view v-if="templateKey === 'default_template'">
-        v-if="topImage"
-        :src="topImage"
-        class="top-img"
-        mode="widthFix"
-      />
-      <view
-        v-for="(content, cIndex) in contents"
-        :key="cIndex"
-        class="section"
-      >
         <image
-          :src="content.backgroundImage"
+          v-if="topImage"
-          class="section-bg"
+          :src="topImage"
+          class="top-img"
           mode="widthFix"
         />
         <view
-          :class="cIndex === 0 ? 'section12' : 'section8'"
+          v-for="(content, cIndex) in contents"
-          class="list flex flex-wrap"
+          :key="cIndex"
+          class="section"
         >
           <image
-            v-for="(item,index) in content.products"
+            :src="content.backgroundImage"
-            :key="index"
+            class="section-bg"
-            :class="cIndex === 0 ? 'span12' : 'span8'"
+            mode="widthFix"
-            :src="item.image"
-            mode="scaleToFill"
-            @click="goGoods(item.id || item.linkId)"
           />
+          <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: {},
+      contents: [],
-      pageKeyId: ''
+      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 = []
+        this.topImage = data.topImage
-        if (data.templateProperties) {
+        this.contents = data.contents
-          const temp = data.templateProperties
+      })
-          // 第一页图片
+      */
-          this.topImage = temp.page1Image
+      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
+        // 模板1
-      })
+        if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
-    } else {
+          this.templateProperties = temp
-      this.pageKeyId = 'appContentFestival'
+        }
-      getFestival().then(({data}) => {
+      }
-        this.isLoad = true
+      this.templateKey = data.templateKey
-        this.topImage = data.topImage
+      this.contents = contents
-        this.contents = data.contents
+      this.isLoad = true
-      })
+    },
-    }
+    goGoodsOrShop(item) {
-  },
+      const id = item.linkId
-  methods: {
+      const type = item.type || 1
-    goGoods(id) {
+      if (type === 1) {
-      uni.navigateTo({
+        uni.navigateTo({
-        url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
+          url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
-      })
+        })
+      } else {
+        uni.navigateTo({
+          url: `/pagesInn/inn/innHome?id=${id}&from=festival`
+        })
+      }
     }
   }
 }

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 v-if="isLoad">
-
+      <view v-if="templateKey === 'default_template_homestay'">
-    <view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
+        <image
-      <image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
+          v-if="topImage"
-
+          :src="topImage"
-      <view class="list flex flex-wrap" :class="cIndex===2?'section12':'section24'">
+          mode="widthFix"
-        <image :class="cIndex===2?'span12':'span24'" mode="scaleToFill" :src="item.image"
+          class="top-img"
-               v-for="(item,index) in content.hotels" :key="index" @click="goInnDetail(item)"/>
+        />
+        <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 {