157 lines
3.6 KiB
Vue
157 lines
3.6 KiB
Vue
<template>
|
|
<view class="gift-page">
|
|
<view class="page1-wrap">
|
|
<!-- <image :src="data.mainImage" class="bg" /> -->
|
|
<rich-text :nodes="data.mainImageHtml" />
|
|
</view>
|
|
<view class="page2-wrap">
|
|
<view class="bg-cont">
|
|
<rich-text :nodes="data.backgroundImage1Html" />
|
|
<!-- <image :src="data.backgroundImage1" class="bg" /> -->
|
|
</view>
|
|
<view class="good-list">
|
|
<view
|
|
v-for="(item, index) in data.productList1"
|
|
:key="index"
|
|
class="good-item"
|
|
@click="goodItemClick(item)"
|
|
>
|
|
<image :src="item.productImage" class="img" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="page3-wrap">
|
|
<view class="bg-cont">
|
|
<rich-text :nodes="data.backgroundImage2Html" />
|
|
<!-- <image :src="data.backgroundImage2" class="bg" /> -->
|
|
</view>
|
|
<view class="good-list">
|
|
<view
|
|
v-for="(item, index) in data.productList2"
|
|
:key="index"
|
|
class="good-item"
|
|
@click="goodItemClick(item)"
|
|
>
|
|
<image :src="item.productImage" class="img" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
customizedGiftContent
|
|
} from '@/api/product'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
name: 'GiftContent',
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
data: {
|
|
backgroundImage1: '',
|
|
backgroundImage2: '',
|
|
backgroundImage1Html: '',
|
|
backgroundImage2Html: '',
|
|
mainImage: '',
|
|
productList1: [],
|
|
productList2: [],
|
|
pageKeyId: ''
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: options.name + '-' + '特色礼品'
|
|
})
|
|
const id = options.id
|
|
this.pageKeyId = `customizedGiftContent_id_${id}`
|
|
this.getPageDataReq(id)
|
|
},
|
|
methods: {
|
|
getPageDataReq(id) {
|
|
uni.showLoading({
|
|
title: '数据加载中...'
|
|
})
|
|
customizedGiftContent({ id }).then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.data = {
|
|
...data,
|
|
mainImageHtml: `<img src="${data.mainImage}" style="display: block;max-width: 100%;">`,
|
|
backgroundImage1Html: `<img src="${data.backgroundImage1}" style="display: block;max-width: 100%;">`,
|
|
backgroundImage2Html: `<img src="${data.backgroundImage2}" style="display: block;max-width: 100%;">`
|
|
}
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
goodItemClick(good) {
|
|
const productId = good.productId
|
|
if (!productId) {
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/shop/GoodsCon/index?id=${productId}&from=gift`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.page1-wrap {
|
|
.bg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
.good-list {
|
|
position: absolute;
|
|
z-index: 5;
|
|
width: 100%;
|
|
}
|
|
.page2-wrap {
|
|
position: relative;
|
|
.bg-cont {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.good-list {
|
|
top: 0;
|
|
padding: 0;
|
|
.good-item + .good-item {
|
|
margin: 25px 0 0 0;
|
|
}
|
|
.good-item {
|
|
.img {
|
|
display: block;
|
|
width: 325px;
|
|
height: 332px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.page3-wrap {
|
|
position: relative;
|
|
.good-list {
|
|
top: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
padding: 12px 0 0 0;
|
|
.good-item {
|
|
margin: 0 0 20px 0;
|
|
.img {
|
|
width: 166px;
|
|
height: 262px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|