Feat(千县名品):县店铺首页界面接口对接
This commit is contained in:
lifizer
@@ -57,6 +57,10 @@
|
||||
<view>收</view>
|
||||
<view>起</view>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/icon-06.png'"
|
||||
class="icon"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -148,6 +152,11 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
mode="widthFix"
|
||||
class="loadend"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
v-if="list.length === 0"
|
||||
@@ -368,6 +377,12 @@ export default {
|
||||
}
|
||||
.toggle-wrap {
|
||||
padding: 0 0 0 20rpx;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 24rpx;
|
||||
height: 20rpx;
|
||||
margin: 6rpx auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -376,11 +391,9 @@ export default {
|
||||
z-index: 2;
|
||||
padding: 80rpx 30rpx 30rpx 30rpx;
|
||||
background-color: #F0F0F0;
|
||||
.item + .item {
|
||||
margin: 30rpx 0 0 0;
|
||||
}
|
||||
.item {
|
||||
padding: 30rpx 0 20rpx 30rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
||||
@@ -465,6 +478,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.loadend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-nodata {
|
||||
|
||||
@@ -55,6 +55,11 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
mode="widthFix"
|
||||
class="loadend"
|
||||
/>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
@@ -169,13 +174,18 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-wrap {
|
||||
background-color: #F0F0F0;
|
||||
.loadend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 21rpx 21rpx 21rpx;
|
||||
background-color: #F0F0F0;
|
||||
.list-cont-left,
|
||||
.list-cont-right {
|
||||
width: calc(50% - 11rpx);
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="list-page">
|
||||
<view v-if="isLoad" class="file-list">
|
||||
<view
|
||||
v-for="(file, fileIndex) in list"
|
||||
:key="fileIndex"
|
||||
class="file-item"
|
||||
@click="fileItemClick(file)"
|
||||
>
|
||||
<view class="name more-t">
|
||||
· {{ file.title }}
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/icon-05.png'"
|
||||
class="icon"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
mode="widthFix"
|
||||
class="loadend"
|
||||
/>
|
||||
</view>
|
||||
<goo-skeleton v-else />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getCountyFamousInvestmentFile
|
||||
} from '@/api/qianxian'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
export default {
|
||||
name: 'famousQianxianInvestment',
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
isLoad: false,
|
||||
pageKeyId: '',
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id
|
||||
this.getListReq(id)
|
||||
},
|
||||
methods: {
|
||||
getListReq(id) {
|
||||
getCountyFamousInvestmentFile({
|
||||
countyFamousDataId: id,
|
||||
page: 1,
|
||||
limit: 9999
|
||||
}).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.isLoad = true
|
||||
this.list = data.records || []
|
||||
}
|
||||
})
|
||||
},
|
||||
fileItemClick(file) {
|
||||
const url = file.attachment || ''
|
||||
if (!url) return
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: res => {
|
||||
const filePath = res.tempFilePath
|
||||
wx.openDocument({
|
||||
filePath,
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.list-page {
|
||||
min-height: 100vh;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #f0f0f0;
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 36rpx;
|
||||
background-color: #fff;
|
||||
.name {
|
||||
width: calc(100% - 40rpx);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.loadend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -110,18 +110,18 @@
|
||||
<view class="bg"></view>
|
||||
<view class="map-info">
|
||||
<view class="map-info-hd">
|
||||
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
|
||||
<image :src="webUrl + '/page/qianxian/icon-location.png'" class="icon" />
|
||||
</view>
|
||||
<view class="map-info-bd more-t">
|
||||
{{ inn.address }}
|
||||
</view>
|
||||
<view class="map-info-ft flex">
|
||||
<view class="item" @click="showLocation">
|
||||
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
|
||||
<image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
|
||||
<view>导航</view>
|
||||
</view>
|
||||
<view class="item" @click="call">
|
||||
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
|
||||
<image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
|
||||
<view>客服</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -131,14 +131,15 @@
|
||||
<view
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:class="item.isShow ? '' : 'hide'"
|
||||
class="tab"
|
||||
@click="changeTab(item.value)"
|
||||
>
|
||||
<text :class="activeIndex === index ? 'tab-item-active' : 'tab-item-no-active'">
|
||||
<view
|
||||
:class="activeIndex === index ? 'active' : ''"
|
||||
class="tab-item"
|
||||
>
|
||||
{{ item.text }}
|
||||
</text>
|
||||
<view v-show="activeIndex === index" class="btLine"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
@@ -193,20 +194,20 @@
|
||||
</view>
|
||||
<view class="flex">
|
||||
<image
|
||||
v-if="!item.zanVo"
|
||||
v-if="!item.hasZan"
|
||||
:src="webUrl + '/page/hotel/zan-off-2.png'"
|
||||
class="zan-off-icon"
|
||||
@click="likeInfoItemHandle(item, index, item.zan + 1, 1)"
|
||||
@click="likeInfoItemHandle(item, index, item.zan + 1, true)"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:src="webUrl + '/page/hotel/zan-on-2.png'"
|
||||
class="zan-on-icon"
|
||||
@click="likeInfoItemHandle(item, index, item.zan -1, 0)"
|
||||
@click="likeInfoItemHandle(item, index, item.zan - 1, false)"
|
||||
/>
|
||||
<text
|
||||
v-show="item.zan > 0"
|
||||
:class="item.zanVo ? 'on' : ''"
|
||||
:class="item.hasZan ? 'on' : ''"
|
||||
class="seeNum-txt"
|
||||
>{{ item.zan }}</text>
|
||||
</view>
|
||||
@@ -228,6 +229,7 @@
|
||||
县城介绍
|
||||
<view class="btn" @click="toggleCountyIntro">
|
||||
{{ toggleCountyIntroStatus ? '收起' : '展开' }}
|
||||
<image :src="webUrl + '/page/qianxian/icon-arrow.png'" class="icon" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
@@ -264,7 +266,9 @@
|
||||
<view class="guide-list">
|
||||
<view
|
||||
v-for="(item, index) in guideList"
|
||||
:key="index"
|
||||
class="guide-item"
|
||||
@click="guideItemClickHandle(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.image"
|
||||
@@ -287,9 +291,134 @@
|
||||
<!-- 产业 -->
|
||||
<view
|
||||
v-if="activeIndex === 3"
|
||||
class="qualifications-section"
|
||||
class="industry-section"
|
||||
>
|
||||
产业
|
||||
<view v-if="industryTabIndex === 0">
|
||||
<view class="card-wrap">
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/card-bg1.png'"
|
||||
class="bg"
|
||||
/>
|
||||
<view class="card-cont">
|
||||
<view class="tab-wrap">
|
||||
<view
|
||||
v-for="(tab, tabIndex) in industryTab"
|
||||
:key="tabIndex"
|
||||
:class="industryTabIndex === tabIndex ? 'active' : ''"
|
||||
class="item"
|
||||
@click="industryTabItemClick(tabIndex)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + tab.icon"
|
||||
class="icon"
|
||||
/>
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="file-wrap">
|
||||
<view class="title">
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/icon-02.png'"
|
||||
class="icon"
|
||||
/>
|
||||
重点项目
|
||||
</view>
|
||||
<view v-if="industryList.length > 0" class="file-list">
|
||||
<view class="list-cont">
|
||||
<view
|
||||
v-for="(file, fileIndex) in industryList"
|
||||
:key="fileIndex"
|
||||
class="file-item"
|
||||
@click="fileItemClick(file)"
|
||||
>
|
||||
<view class="name one-t">
|
||||
· {{ file.title }}
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/icon-05.png'"
|
||||
class="icon"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">暂无重点项目</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="project-wrap">
|
||||
<view class="title">
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/icon-01.png'"
|
||||
class="icon"
|
||||
/>
|
||||
产业项目
|
||||
</view>
|
||||
<view v-if="industryProjectList.length > 0" class="list">
|
||||
<view
|
||||
v-for="(item, index) in industryProjectList"
|
||||
:key="index"
|
||||
class="item"
|
||||
>
|
||||
<image
|
||||
:src="item.image"
|
||||
class="img"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">暂无产业项目</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="industryTabIndex === 1">
|
||||
<view class="card-wrap">
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/card-bg2.png'"
|
||||
class="bg"
|
||||
/>
|
||||
<view class="card-cont">
|
||||
<view class="tab-wrap">
|
||||
<view
|
||||
v-for="(tab, tabIndex) in industryTab"
|
||||
:key="tabIndex"
|
||||
:class="industryTabIndex === tabIndex ? 'active' : ''"
|
||||
class="item"
|
||||
@click="industryTabItemClick(tabIndex)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + tab.icon"
|
||||
class="icon"
|
||||
/>
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="file-wrap">
|
||||
<view v-if="investmentFileList.length > 0" class="file-list">
|
||||
<view class="list-cont">
|
||||
<view
|
||||
v-for="(file, fileIndex) in investmentFileList"
|
||||
:key="fileIndex"
|
||||
class="file-item file-item2"
|
||||
@click="fileItemClick(file)"
|
||||
>
|
||||
<view class="name more-t">
|
||||
· {{ file.title }}
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/page/qianxian/icon-05.png'"
|
||||
class="icon"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">暂无招商政策</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="investmentFileList.length > 0" class="more-btn-wrap">
|
||||
<view class="more-btn" @click="gotoInvestment">
|
||||
更多政策
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -321,15 +450,18 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
getHotelZan,
|
||||
getPoster,
|
||||
getHotelNewsZan,
|
||||
hotelNewsView
|
||||
getPoster
|
||||
} from "@/api/inn.js"
|
||||
import {
|
||||
getCountyFamousCityShop,
|
||||
getCountyFamousCityNews,
|
||||
getCountyFamousCityGuide
|
||||
getCountyFamousCityGuide,
|
||||
postCountyFamousShopZan,
|
||||
postCountyFamousNewsZan,
|
||||
postCountyFamousNewsView,
|
||||
getCountyFamousIndustry,
|
||||
getCountyFamousIndustryProject,
|
||||
getCountyFamousInvestmentFile
|
||||
} from '@/api/qianxian'
|
||||
import {formatDateTime} from "@/utils"
|
||||
import {getUrlParam} from "@/utils/common.js"
|
||||
@@ -383,7 +515,18 @@ export default {
|
||||
pageKeyId: '',
|
||||
shareImg: '',
|
||||
// 县城介绍展开收起
|
||||
toggleCountyIntroStatus: false
|
||||
toggleCountyIntroStatus: false,
|
||||
// 重点产业列表
|
||||
industryList: [],
|
||||
// 产业项目列表
|
||||
industryProjectList: [],
|
||||
// 招商政策文件列表
|
||||
investmentFileList: [],
|
||||
industryTab: [
|
||||
{ name: '产业项目', icon: '/page/qianxian/icon-04.png' },
|
||||
{ name: '招商政策', icon: '/page/qianxian/icon-03.png' }
|
||||
],
|
||||
industryTabIndex: 0
|
||||
}
|
||||
},
|
||||
// 必须在页面加 onPageScroll(e){} ，才能滑动显示背景
|
||||
@@ -406,16 +549,50 @@ export default {
|
||||
this.getShopDetailReq()
|
||||
this.getInfoReq()
|
||||
this.getGuideReq()
|
||||
this.initPoster()
|
||||
// this.initPoster()
|
||||
this.getListReq()
|
||||
},
|
||||
methods: {
|
||||
getListReq() {
|
||||
// getPoster(this.id).then(({data}) => this.posterUrl = data)
|
||||
getCountyFamousIndustry({
|
||||
countyFamousDataId: this.id,
|
||||
page: 1,
|
||||
limit: 9999
|
||||
}).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.industryList = data.records || []
|
||||
}
|
||||
})
|
||||
getCountyFamousIndustryProject({
|
||||
countyFamousDataId: this.id,
|
||||
page: 1,
|
||||
limit: 9999
|
||||
}).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.industryProjectList = data.records || []
|
||||
}
|
||||
})
|
||||
getCountyFamousInvestmentFile({
|
||||
countyFamousDataId: this.id,
|
||||
page: 1,
|
||||
limit: 9999
|
||||
}).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.investmentFileList = data.records || []
|
||||
}
|
||||
})
|
||||
},
|
||||
getShopDetailReq() {
|
||||
const _this = this
|
||||
getCountyFamousCityShop({ countyFamousDataId: _this.id }).then((res) => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
_this.inn = data
|
||||
_this.isLike = data.zanVo !== null
|
||||
_this.isLike = data.hasZan
|
||||
_this.isFavorite = data.hasFavorite
|
||||
_this.favoriteCount = data.favoriteCount
|
||||
_this.inn.latitude = _this.inn.latitude > 0 ? _this.inn.latitude : 24.993587
|
||||
@@ -582,7 +759,7 @@ export default {
|
||||
})
|
||||
},
|
||||
zanInn() {
|
||||
getHotelZan(this.inn.id).then(() => {
|
||||
postCountyFamousShopZan({ countyFamousDataId: this.id }).then(() => {
|
||||
this.isLike = !this.isLike
|
||||
this.getShopDetailReq()
|
||||
}).catch((err) => {
|
||||
@@ -599,7 +776,7 @@ export default {
|
||||
},
|
||||
infoItemViewClick(item) {
|
||||
uni.$u.debounce(() => {
|
||||
hotelNewsView({ id: item.id }).finally(() => {
|
||||
postCountyFamousNewsView({ countyFamousNewsId: item.id }).finally(() => {
|
||||
this.infoArray.map(info => {
|
||||
if (info.id === item.id) {
|
||||
info.pv += 1
|
||||
@@ -608,9 +785,6 @@ export default {
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
initPoster() {
|
||||
getPoster(this.id).then(({data}) => this.posterUrl = data)
|
||||
},
|
||||
// 定位
|
||||
showLocation() {
|
||||
if (!this.inn.latitude || !this.inn.longitude) {
|
||||
@@ -657,16 +831,44 @@ export default {
|
||||
})
|
||||
},
|
||||
likeInfoItemHandle(item, index, value, voValue) {
|
||||
getHotelNewsZan(item.id).then(res => {
|
||||
postCountyFamousNewsZan({ countyFamousNewsId: item.id }).then(res => {
|
||||
const { success } = res
|
||||
if (success) {
|
||||
this.$dialog.toast({
|
||||
mes: '操作成功!'
|
||||
})
|
||||
this.$set(this.infoArray[index], 'zan', value)
|
||||
this.$set(this.infoArray[index], 'zanVo', voValue)
|
||||
this.$set(this.infoArray[index], 'hasZan', voValue)
|
||||
}
|
||||
})
|
||||
},
|
||||
guideItemClickHandle(item) {
|
||||
// 如果没有开启专题页，则不进入
|
||||
if (!item.isContentPage) return
|
||||
uni.navigateTo({ url: `/pkg_product/views/famousQianxianTheme?id=${item.id}` })
|
||||
},
|
||||
industryTabItemClick(index) {
|
||||
if (index === this.industryTabIndex) return
|
||||
this.industryTabIndex = index
|
||||
},
|
||||
fileItemClick(file) {
|
||||
const url = file.attachment || ''
|
||||
if (!url) return
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: res => {
|
||||
const filePath = res.tempFilePath
|
||||
wx.openDocument({
|
||||
filePath,
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
gotoInvestment() {
|
||||
uni.navigateTo({ url: `/pkg_product/views/famousQianxianInvestment?id=${this.id}` })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -871,8 +1073,8 @@ export default {
|
||||
.map-info-hd {
|
||||
.icon {
|
||||
display: block;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
width: 34rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
.map-info-bd {
|
||||
@@ -889,21 +1091,29 @@ export default {
|
||||
font-weight: 500;
|
||||
.img {
|
||||
display: block;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin: 0 0 -16rpx 0;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin: 0 0 16rpx 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-tab {
|
||||
margin: 60rpx 0 0 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 40rpx 0 20rpx 0;
|
||||
.tab {
|
||||
margin: 0 35rpx;
|
||||
&.hide {
|
||||
display: none;
|
||||
margin: 0 20rpx;
|
||||
.tab-item {
|
||||
height: 52rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 26rpx 0 0 26rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 52rpx;
|
||||
font-weight: bold;
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1039,9 +1249,16 @@ export default {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.intro-main {
|
||||
@@ -1064,12 +1281,14 @@ export default {
|
||||
.pic-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 30rpx 0 0 0;
|
||||
.item {
|
||||
width: calc(50% - 10rpx);
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
.img {
|
||||
display: block;
|
||||
width: 320rpx;
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
@@ -1106,6 +1325,161 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.industry-section {
|
||||
background-color: #F0F0F0;
|
||||
.card-wrap {
|
||||
position: relative;
|
||||
.bg {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 750rpx;
|
||||
height: 530rpx;
|
||||
}
|
||||
.card-cont {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 30rpx;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
.tab-wrap {
|
||||
display: flex;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 24rpx;
|
||||
height: 26rpx;
|
||||
margin: 0 12rpx 0 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.icon {
|
||||
width: 26rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.file-wrap {
|
||||
width: 630rpx;
|
||||
height: 360rpx;
|
||||
padding: 20rpx;
|
||||
margin: 10rpx auto;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(240,240,240,0.39);
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin: 0 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
.file-list {
|
||||
height: 300rpx;
|
||||
overflow-y: auto;
|
||||
.list-cont {
|
||||
padding: 20rpx 0 0 0;
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 36rpx;
|
||||
background-color: #fff;
|
||||
.name {
|
||||
width: calc(100% - 40rpx);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.file-item2 {
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-wrap {
|
||||
padding: 30rpx;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin: 0 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 20rpx 0 0 0;
|
||||
.item {
|
||||
width: calc(50% - 20rpx);
|
||||
margin: 0 26rpx 26rpx 0;
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.img {
|
||||
display: block;
|
||||
width: 332rpx;
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
text-align: center;
|
||||
line-height: 200rpx;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
.more-btn-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0 60rpx 0;
|
||||
.more-btn {
|
||||
width: 212rpx;
|
||||
height: 62rpx;
|
||||
border-radius: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 62rpx;
|
||||
color: #fff;
|
||||
background: #C52733;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-no-data {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user