181 lines
4.0 KiB
Vue
181 lines
4.0 KiB
Vue
<template>
|
|
<view>
|
|
<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
|
|
:src="templateProperties.page1Image"
|
|
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.page2Images"
|
|
:key="swiperIndex"
|
|
>
|
|
<image
|
|
:src="swiperItem"
|
|
mode="scaleToFill"
|
|
class="swiper-img"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<!-- 第三页 -->
|
|
<view class="page-wrap">
|
|
<view class="page-5">
|
|
<image
|
|
v-for="(item, index) in templateProperties.page3Links"
|
|
:key="index"
|
|
:src="item.image"
|
|
class="shop-img"
|
|
mode="widthFix"
|
|
@click="linkToShop(item)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 第四页 -->
|
|
<view class="page-wrap">
|
|
<view class="page-4">
|
|
<image
|
|
:src="templateProperties.page4Image"
|
|
class="section-bg"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 第五页 -->
|
|
<view class="page-wrap">
|
|
<view class="page-2">
|
|
<swiper
|
|
class="swiper"
|
|
circular
|
|
autoplay
|
|
:interval="5000"
|
|
>
|
|
<swiper-item
|
|
v-for="(swiperItem, swiperIndex) in templateProperties.page5Images"
|
|
:key="swiperIndex"
|
|
>
|
|
<image
|
|
:src="swiperItem"
|
|
mode="scaleToFill"
|
|
class="swiper-img"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="page-5">
|
|
<image
|
|
v-for="(item, index) in templateProperties.page5Links"
|
|
:key="index"
|
|
:src="item.image"
|
|
class="shop-img"
|
|
mode="widthFix"
|
|
@click="linkToShop(item)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<goo-skeleton v-else />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getCountyFamousCityGuideContent
|
|
} from '@/api/qianxian'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
name: 'FamousQianxianTheme',
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
pageKeyId: '',
|
|
templateProperties: {
|
|
page1Image: '',
|
|
page2Images: [],
|
|
page3Links: [],
|
|
page4Image: '',
|
|
page5Images: '',
|
|
page5Links: []
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const id = options.id
|
|
this.getDetailReq(id)
|
|
},
|
|
methods: {
|
|
getDetailReq(id) {
|
|
getCountyFamousCityGuideContent({
|
|
guideId: id
|
|
}).then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.isLoad = true
|
|
this.templateProperties = data || {}
|
|
}
|
|
})
|
|
},
|
|
linkToShop(item) {
|
|
const linkId = item.linkId || ''
|
|
if (!linkId) return
|
|
uni.navigateTo({
|
|
url: `/pagesInn/inn/innHome?id=${linkId}&from=famous`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.top-img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.page-wrap {
|
|
position: relative;
|
|
.page-2 {
|
|
width: 100%;
|
|
height: 450rpx;
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.page-4 {
|
|
.section-bg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
.page-5 {
|
|
.shop-img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |