Feat(民宿&节日&尖货专题页):使用模板配置渲染
This commit is contained in:
lifizer
@@ -78,6 +78,10 @@ export function getHomestay(id) {
|
||||
return request.get(`/contentHomestay/${id}`, {}, {login: false})
|
||||
}
|
||||
|
||||
export function getHomestayV2(id) {
|
||||
return request.get(`/contentHomestay/v2/${id}`, {}, {login: false})
|
||||
}
|
||||
|
||||
/**
|
||||
* 节日专题
|
||||
* */
|
||||
@@ -85,6 +89,10 @@ export function getFestival() {
|
||||
return request.get('/contentFestival', {}, {login: false})
|
||||
}
|
||||
|
||||
export function getFestivalV2() {
|
||||
return request.get('/contentFestival/v2', {}, {login: false})
|
||||
}
|
||||
|
||||
/**
|
||||
* 尖货专题
|
||||
* */
|
||||
|
||||
+44
-43
@@ -367,8 +367,8 @@ export default {
|
||||
_this.$set(_this, 'landmarkGoodsImage', data.landmarkGoodsImage)
|
||||
_this.$set(_this, 'countyFamousImage', data.countyFamousImage)
|
||||
_this.$set(_this, 'oldUserPopup', data.oldUserPopup)
|
||||
_this.$set(_this, 'contentHomestay', data.contentHomestay)
|
||||
_this.$set(_this, 'contentFestival', data.contentFestival)
|
||||
_this.$set(_this, 'contentHomestay', data.contentHomestayV2)
|
||||
_this.$set(_this, 'contentFestival', data.contentFestivalV2)
|
||||
_this.bastLeftList = []
|
||||
_this.bastRightList = []
|
||||
for (let i = 0; i < data.bastList.length; i++) {
|
||||
@@ -418,27 +418,53 @@ export default {
|
||||
this.isOldUser = state
|
||||
},
|
||||
// 民宿专题
|
||||
goHomeStay(stay) {
|
||||
if (stay.uniappUrl) {
|
||||
this.$global.commonJump(stay.uniappUrl)
|
||||
goHomeStay(item) {
|
||||
if (item.type === 1) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/homestay?id=' + item.id })
|
||||
return
|
||||
}
|
||||
if (stay.type === 2 && stay.isLinkToProduct) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: stay.productId
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
if (stay.type === 1) {
|
||||
uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
|
||||
}
|
||||
this.linkToThemePage(item)
|
||||
},
|
||||
// 节日专题
|
||||
goFestival() {
|
||||
uni.navigateTo({url: '/pkg_product/views/festival'})
|
||||
if (this.contentFestival.type === 1) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/festival' })
|
||||
return
|
||||
}
|
||||
this.linkToThemePage(this.contentFestival)
|
||||
},
|
||||
// 尖货专题
|
||||
productSwiperItemClickHandle(item) {
|
||||
if (item.type === 1) {
|
||||
uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
|
||||
return
|
||||
}
|
||||
this.linkToThemePage(item)
|
||||
},
|
||||
linkToThemePage(item) {
|
||||
/**
|
||||
* type:1-专题页,2-商品,3-时令尝鲜
|
||||
* 当type=2，且uniappUrl有值，以跳转界面地址为准
|
||||
*/
|
||||
const type = item.type
|
||||
// 链接到特定页面
|
||||
if (type === 2 && item.uniappUrl) {
|
||||
this.$global.commonJump(item.uniappUrl)
|
||||
return
|
||||
}
|
||||
// 商品详情
|
||||
if (type === 2 && item.productId) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId
|
||||
}
|
||||
})
|
||||
}
|
||||
// 时令尝鲜
|
||||
if (type === 3) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/seasonList' })
|
||||
}
|
||||
},
|
||||
tapOld() {
|
||||
this.isOldUser = false
|
||||
@@ -493,31 +519,6 @@ export default {
|
||||
hotelItemClickHandle(item) {
|
||||
uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.id}&from=index` })
|
||||
},
|
||||
// 尖货专题
|
||||
productSwiperItemClickHandle(item) {
|
||||
// 类型:1-专题页 2-商品详情 3-时令尝鲜
|
||||
const type = item.type
|
||||
if (type === 1) {
|
||||
uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
|
||||
}
|
||||
// 链接到特定页面
|
||||
if (type === 2 && item.uniappUrl) {
|
||||
this.$global.commonJump(stay.uniappUrl)
|
||||
return
|
||||
}
|
||||
// 商品详情
|
||||
if (type === 2 && item.productId) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type === 3) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/seasonList' })
|
||||
}
|
||||
},
|
||||
setTopHandle() {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
autoplay
|
||||
:interval="5000"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(swiperItem, swiperIndex) in templateProperties.page2Links"
|
||||
:key="swiperIndex"
|
||||
>
|
||||
<image
|
||||
:src="swiperItem.image"
|
||||
mode="scaleToFill"
|
||||
class="swiper-img"
|
||||
@click="itemClick(swiperItem)"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:class="index === 0 ? 'span24' : 'span12'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:class="index === 0 ? 'span24' : 'span12'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第五页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-5">
|
||||
<image
|
||||
:src="templateProperties.page5BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page5Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板1
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate1',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
width: 100%;
|
||||
height: 1350rpx;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-3 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.span24 {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
}
|
||||
.span12 {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-5 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 350rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
autoplay
|
||||
:interval="5000"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(swiperItem, swiperIndex) in templateProperties.page2Links"
|
||||
:key="swiperIndex"
|
||||
>
|
||||
<image
|
||||
:src="swiperItem.image"
|
||||
mode="scaleToFill"
|
||||
class="swiper-img"
|
||||
@click="itemClick(swiperItem)"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第五页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page5BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page5Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板2
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate2',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
width: 100%;
|
||||
height: 840rpx;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-3 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-4 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 30rpx 25rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<!-- 第二页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板3
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate3',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 700rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<!-- 第二页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
:src="templateProperties.page2Image"
|
||||
class="item item1"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
:src="templateProperties.page3Image"
|
||||
class="item item1"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板4
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate4',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 750rpx;
|
||||
height: 400rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
&.item1 {
|
||||
height: 800rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-4 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 22rpx 22rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
export const themeTemplateMixins = {
|
||||
props: {
|
||||
topImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
templateProperties: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(item) {
|
||||
this.$emit('view', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
+122
-46
@@ -9,36 +9,66 @@
|
||||
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"
|
||||
>
|
||||
<view v-if="templateKey === 'default_template'">
|
||||
<image
|
||||
:src="content.backgroundImage"
|
||||
class="section-bg"
|
||||
v-if="topImage"
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view
|
||||
:class="cIndex === 0 ? 'section12' : 'section8'"
|
||||
class="list flex flex-wrap"
|
||||
v-for="(content, cIndex) in contents"
|
||||
:key="cIndex"
|
||||
class="section"
|
||||
>
|
||||
<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)"
|
||||
: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>
|
||||
@@ -48,17 +78,30 @@
|
||||
* 节日专题&尖货推荐初始模板
|
||||
* options.theme:best-尖货，''-节日
|
||||
*/
|
||||
import { getFestival, getContentBest } from '@/api/product'
|
||||
import { getFestivalV2, getContentBest } 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: 'FestivalPage',
|
||||
components: {
|
||||
ThemePageTemplate1,
|
||||
ThemePageTemplate2,
|
||||
ThemePageTemplate3,
|
||||
ThemePageTemplate4
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
topImage: '',
|
||||
contents: {},
|
||||
pageKeyId: ''
|
||||
contents: [],
|
||||
pageKeyId: '',
|
||||
templateKey: '',
|
||||
// 模板数据
|
||||
templateProperties: {}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -67,13 +110,41 @@ export default {
|
||||
// 尖货
|
||||
if (theme === 'best') {
|
||||
this.pageKeyId = `appContentBest_id_${id}`
|
||||
getContentBest(id).then(({data}) => {
|
||||
this.getContentBestReq(id)
|
||||
} else {
|
||||
this.pageKeyId = 'appContentFestival'
|
||||
this.getFestivalReq()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFestivalReq() {
|
||||
/*旧接口
|
||||
getFestival().then(({data}) => {
|
||||
this.isLoad = true
|
||||
const contents = []
|
||||
if (data.templateProperties) {
|
||||
const temp = data.templateProperties
|
||||
// 第一页图片
|
||||
this.topImage = temp.page1Image
|
||||
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) {
|
||||
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,
|
||||
@@ -85,22 +156,27 @@ export default {
|
||||
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`
|
||||
})
|
||||
// 模板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`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+157
-43
@@ -1,38 +1,3 @@
|
||||
<script>
|
||||
// 民宿专题
|
||||
import {getHomestay} from '@/api/product'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
export default {
|
||||
name: 'HomestayPage',
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
topImage: '',
|
||||
contents: [],
|
||||
id: null,
|
||||
pageKeyId: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id
|
||||
this.id = id
|
||||
this.pageKeyId = `appContentHomestay_id_${id}`
|
||||
getHomestay(this.id).then(({data}) => {
|
||||
this.topImage = data.topImage
|
||||
this.contents = data.contents
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goInnDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInn/inn/innHome?id=${item.id}&from=homestay`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="pkg-product-homestay">
|
||||
<hx-navbar
|
||||
@@ -43,18 +8,167 @@ export default {
|
||||
transparent="auto"
|
||||
color='#ffffff'
|
||||
/>
|
||||
<image class="top-img" mode="widthFix" :src="topImage" v-if="topImage"/>
|
||||
|
||||
<view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
|
||||
<image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
|
||||
|
||||
<view class="list flex flex-wrap" :class="cIndex===2?'section12':'section24'">
|
||||
<image :class="cIndex===2?'span12':'span24'" mode="scaleToFill" :src="item.image"
|
||||
v-for="(item,index) in content.hotels" :key="index" @click="goInnDetail(item)"/>
|
||||
<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 {
|
||||
|
||||
Reference in New Issue
Block a user