140 lines
2.6 KiB
Vue
140 lines
2.6 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)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<goo-skeleton v-else />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
// 节日专题
|
|
import { getFestival } from '@/api/product'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
name: 'FestivalPage',
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
topImage: '',
|
|
contents: [],
|
|
pageKeyId: Object.freeze('appContentFestival')
|
|
}
|
|
},
|
|
onLoad() {
|
|
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> |