xdd-uniapp-new/pkg_product/views/homestay.vue

<template>
  <view class="pkg-product-homestay">
    <hx-navbar
      :fixed="true"
      :background-color="[[13,197,197],[13,197,197]]"
      statusBarFontColor="#ffffff"
      barPlaceholder="hidden"
      transparent="auto"
      color='#ffffff'
    />
    <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 {
  image {
    vertical-align: middle;
  }

  .top-img {
    width: 100vw;
    height: auto;
  }


  .section12 {
    padding: 0 32rpx;
  }

  .section24 {
    padding: 0 61rpx;
  }

  .section {
    position: relative;
    width: 100vw;

    .section-bg{
      width: 100%;
      height: auto;
    }

    .list{
      position: absolute;
      top: 350rpx;
      left: 0;
      right: 0;
    }

    .span24 {
      width: 628rpx;
      height: 320rpx;
    }

    .span12 {
      width: 332rpx;
      height: 500rpx;
      margin: 0 22rpx 24rpx 0;
    }

    .span12:nth-child(2n) {
      margin-right: 0;
    }
  }

}
</style>