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

<template>
  <view class="pkg-product-festival">
    <hx-navbar
      :fixed="true"
      :background-color="[0,[0,0,0,0],[0,0,0,0]]"
      statusBarFontColor="#ffffff"
      barPlaceholder="hidden"
      transparent="auto"
      color='#ffffff'
    />
    <view v-if="isLoad">
      <view v-if="templateKey === 'default_template'">
        <image
          v-if="topImage"
          :src="topImage"
          class="top-img"
          mode="widthFix"
          @click="topImageClick"
        />
        <view
          v-for="(content, cIndex) in contents"
          :key="cIndex"
          class="section"
        >
          <image
            :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>
</template>
<script>
/**
 * 节日专题&尖货推荐初始模板
 * options.theme:best-尖货，''-节日
*/
import { getFestivalV2, getContentBest } from '@/api/product'
import { pageListenMixins } from '@/mixins/pageListenMixins'
import { themeMixins } from '../mixins/themeMixins'
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, themeMixins],
  onLoad(options) {
    const theme = options.theme || ''
    const id = options.id
    this.theme = theme
    // 尖货
    if (theme === 'best') {
      this.pageKeyId = `appContentBest_id_${id}`
      this.getContentBestReq(id)
    } else {
      this.pageKeyId = 'appContentFestival'
      this.getFestivalReq()
    }
  },
  methods: {
    getFestivalReq() {
      /*旧接口
      getFestival().then(({data}) => {
        this.isLoad = true
        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) {
      this.pageData = 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,
            products: temp.page2Links
          })
          // 第三页数据
          contents.push({
            backgroundImage: temp.page3BackgroundImage,
            products: temp.page3Links
          })
        }
      }
      this.templateProperties = data.templateProperties || {}
      this.templateKey = data.templateKey
      this.contents = contents
      this.isLoad = true
    }
  }
}
</script>

<style scoped lang="less">
.pkg-product-festival {
  image {
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: middle;
  }

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

  .section12 {
    padding: 0 32rpx;
  }

  .section8 {
    padding: 0 16rpx;
  }

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

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

    .list {
      position: absolute;
      top: 350rpx;
      left: 0;
      width: 100vw;
      justify-content: space-between;
      box-sizing: border-box;
    }

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

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

    .span8 {
      width: 234rpx;
      height: 384rpx;
      margin: 0 0 24rpx 0;
    }

    .span8:nth-child(3n) {
      margin-right: 0;
    }
  }

}
</style>