121 lines
2.5 KiB
Vue
121 lines
2.5 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" class="v12-font-0">
|
|
<view
|
|
v-for="(groupItem, groupIndex) in groupList"
|
|
:key="groupIndex"
|
|
class="page-wrap"
|
|
>
|
|
<image
|
|
:src="groupItem.topImage"
|
|
class="top-img"
|
|
mode="widthFix"
|
|
/>
|
|
<view class="page-2">
|
|
<swiper
|
|
class="swiper"
|
|
circular
|
|
autoplay
|
|
:interval="5000"
|
|
>
|
|
<swiper-item
|
|
v-for="(swiperItem, swiperIndex) in groupItem.images"
|
|
:key="swiperIndex"
|
|
>
|
|
<image
|
|
:src="swiperItem"
|
|
mode="scaleToFill"
|
|
class="swiper-img"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="page-5">
|
|
<image
|
|
v-for="(item, index) in groupItem.links"
|
|
: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: '',
|
|
groupList: []
|
|
}
|
|
},
|
|
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.groupList = data.group || []
|
|
}
|
|
})
|
|
},
|
|
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;
|
|
font-size: 0;
|
|
.swiper {
|
|
width: 100%;
|
|
height: 450rpx;
|
|
.swiper-img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.shop-img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
}
|
|
}
|
|
</style> |