171 lines
3.5 KiB
Vue
171 lines
3.5 KiB
Vue
<template>
|
|
<view class="pkg-product-festival">
|
|
<hx-navbar
|
|
:fixed="true"
|
|
:background-color="[[13,197,197],[13,197,197]]"
|
|
statusBarFontColor="#ffffff"
|
|
barPlaceholder="hidden"
|
|
transparent="auto"
|
|
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"
|
|
>
|
|
<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="goGoods(item.id || item.linkId)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<goo-skeleton v-else />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* 节日专题&尖货推荐初始模板
|
|
* options.theme:best-尖货，''-节日
|
|
*/
|
|
import { getFestival, getContentBest } from '@/api/product'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
name: 'FestivalPage',
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
topImage: '',
|
|
contents: {},
|
|
pageKeyId: ''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const theme = options.theme || ''
|
|
const id = options.id
|
|
// 尖货
|
|
if (theme === 'best') {
|
|
this.pageKeyId = `appContentBest_id_${id}`
|
|
getContentBest(id).then(({data}) => {
|
|
this.isLoad = true
|
|
const contents = []
|
|
if (data.templateProperties) {
|
|
const temp = data.templateProperties
|
|
// 第一页图片
|
|
this.topImage = temp.page1Image
|
|
// 第二页数据
|
|
contents.push({
|
|
backgroundImage: temp.page2BackgroundImage,
|
|
products: temp.page2Links
|
|
})
|
|
// 第三页数据
|
|
contents.push({
|
|
backgroundImage: temp.page3BackgroundImage,
|
|
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`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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> |