jiazhipeng
1 year ago
13 changed files with 899 additions and 8 deletions
@ -0,0 +1,214 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="swipe-box" v-if="info.images"> |
||||
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
||||
|
indicator-active-color="#fff" @change="swiperChange"> |
||||
|
<swiper-item v-for="(item, index) in info.images.split(',')" :key="item.id"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<view class="swiper-pointer"> |
||||
|
{{swiperCurrent}}/{{info.images.split(',').length}} |
||||
|
</view> |
||||
|
|
||||
|
<view class="collect" style="right: 100rpx;" @click.stop="collect()"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="collect" @click.stop="share()"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240902/8eb614e4ea41db655a4e6da2cc0ca954.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="common-container info-container"> |
||||
|
<view class="info-title text-overflowRows">{{info.title}}</view> |
||||
|
<view class="text-overflow" style="padding: 40rpx 0 16rpx;">{{info.address}}</view> |
||||
|
<view class="text-overflow" v-if="info.start_time && info.end_time">时间：{{info.start_time}} - {{info.end_time}}</view> |
||||
|
</view> |
||||
|
<view class="common-container detail-container"> |
||||
|
<view class="" id="cpts" v-html="formateRichText(info.detail)"></view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
swiperCurrent: 1, |
||||
|
info: {}, |
||||
|
} |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
swiperChange (e) { |
||||
|
this.swiperCurrent = e.detail.current+1 |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo() { |
||||
|
this.Post({id: this.id},'/api/activity/getActivityCalendarDetail').then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
||||
|
setTimeout(() => {this.goBack()}, 2000) |
||||
|
} |
||||
|
this.info = res.data; |
||||
|
}); |
||||
|
}, |
||||
|
// 收藏 |
||||
|
collect() { |
||||
|
this.Post({type: 7,id: this.id},'/api/scenic/collect').then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({title: res.msg,icon: 'none'}); |
||||
|
this.info.is_collect = !this.info.is_collect |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
share () { |
||||
|
var pages = getCurrentPages() //获取加载的页面 |
||||
|
var view = pages[pages.length - 1] //获取当前页面的对象 |
||||
|
uni.share({ |
||||
|
provider: "weixin", |
||||
|
scene: "WXSceneSession", |
||||
|
type: 0, |
||||
|
href: `${view.route}`, |
||||
|
title: this.info.title, |
||||
|
imageUrl: this.showImg(this.info.image), |
||||
|
success: function (res) { |
||||
|
console.log("success:" + JSON.stringify(res)); |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
console.log("fail:" + JSON.stringify(err)); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F8F8F8; |
||||
|
} |
||||
|
|
||||
|
.swipe-box { |
||||
|
height: 867rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item-num { |
||||
|
width: 90rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.collect{ |
||||
|
position: absolute; |
||||
|
width: 51rpx; |
||||
|
height: 51rpx; |
||||
|
right: 20rpx; |
||||
|
top: 20rpx; |
||||
|
font-size: 23rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
image{ |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
.swiper-pointer{ |
||||
|
position: absolute; |
||||
|
right: 20rpx; |
||||
|
bottom: 20rpx; |
||||
|
background: rgba(22,22,22,0.5); |
||||
|
border-radius: 23rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
padding: 6rpx 14rpx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 867rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 867rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 867rpx; |
||||
|
} |
||||
|
.item-img.pop-swiper-image{ |
||||
|
height: 347rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.common-container{ |
||||
|
background: white; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.info-container{ |
||||
|
padding: 34rpx 25rpx; |
||||
|
width: 100%; |
||||
|
margin-bottom: 21rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #666666; |
||||
|
.info-title{ |
||||
|
|
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.detail-container{ |
||||
|
width: 100%; |
||||
|
padding: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="swipe-box"> |
||||
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
||||
|
indicator-active-color="#fff" @change="swiperChange"> |
||||
|
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" ></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<view class="swiper-pointer"> |
||||
|
{{swiperCurrent}}/{{info.list_images.split(',').length}} |
||||
|
</view> |
||||
|
|
||||
|
<view class="collect" @click.stop="collect()"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="common-container info-container"> |
||||
|
<view class="info-title text-overflowRows">{{info.title}}</view> |
||||
|
</view> |
||||
|
<view class="common-container detail-container"> |
||||
|
<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
swiperCurrent: 1, |
||||
|
info: {list_images:''}, |
||||
|
} |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
swiperChange (e) { |
||||
|
this.swiperCurrent = e.detail.current+1 |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo() { |
||||
|
this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
||||
|
setTimeout(() => {this.goBack()}, 2000) |
||||
|
} |
||||
|
this.info = res.data; |
||||
|
}); |
||||
|
}, |
||||
|
// 收藏 |
||||
|
collect() { |
||||
|
this.Post({type: 6,id: this.id},'/api/scenic/collect').then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({title: res.msg,icon: 'none'}); |
||||
|
this.info.is_collect = !this.info.is_collect |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F8F8F8; |
||||
|
} |
||||
|
|
||||
|
.swipe-box { |
||||
|
height: 867rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item-num { |
||||
|
width: 90rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.collect{ |
||||
|
position: absolute; |
||||
|
width: 51rpx; |
||||
|
height: 51rpx; |
||||
|
right: 36rpx; |
||||
|
top: 36rpx; |
||||
|
font-size: 23rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
image{ |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
.swiper-pointer{ |
||||
|
position: absolute; |
||||
|
right: 36rpx; |
||||
|
bottom: 80rpx; |
||||
|
background: rgba(22,22,22,0.5); |
||||
|
border-radius: 23rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
padding: 6rpx 14rpx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 867rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 867rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 867rpx; |
||||
|
} |
||||
|
.item-img.pop-swiper-image{ |
||||
|
height: 347rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.common-container{ |
||||
|
background: white; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.info-container{ |
||||
|
padding: 34rpx 25rpx; |
||||
|
width: 100%; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 21rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-container{ |
||||
|
width: 100%; |
||||
|
padding: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,200 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="swipe-box" v-if="info.images"> |
||||
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
||||
|
indicator-active-color="#fff" @change="swiperChange"> |
||||
|
<swiper-item v-for="(item, index) in info.images.split(',')" :key="item.id"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<view class="swiper-pointer"> |
||||
|
{{swiperCurrent}}/{{info.images.split(',').length}} |
||||
|
</view> |
||||
|
|
||||
|
<view class="collect" @click.stop="collect()"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="collect" @click.stop="share()"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240902/8eb614e4ea41db655a4e6da2cc0ca954.png"></image> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="common-container info-container"> |
||||
|
<view class="info-title text-overflowRows">{{info.title}}</view> |
||||
|
<view class="flex-between" style="padding: 40rpx 0 0;"> |
||||
|
<view>浏览 {{info.view}}</view> |
||||
|
<view>发布时间：{{info.create_time}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="text-overflow" v-if="info.start_time && info.end_time">时间：{{info.start_time}} - {{info.end_time}}</view> --> |
||||
|
</view> |
||||
|
<view class="common-container detail-container"> |
||||
|
<view class="" id="cpts" v-html="formateRichText(info.detail)"></view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
swiperCurrent: 1, |
||||
|
info: {}, |
||||
|
} |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
swiperChange (e) { |
||||
|
this.swiperCurrent = e.detail.current+1 |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo() { |
||||
|
this.Post({id: this.id},'/api/article/getArticleById').then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
uni.showToast({title: '文章不存在或已下架',icon: 'none'}) |
||||
|
setTimeout(() => {this.goBack()}, 2000) |
||||
|
} |
||||
|
this.info = res.data; |
||||
|
}); |
||||
|
}, |
||||
|
// 收藏 |
||||
|
collect() { |
||||
|
this.Post({type: 1,id: this.id},'/api/scenic/collect').then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({title: res.msg,icon: 'none'}); |
||||
|
this.info.is_collect = !this.info.is_collect |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F8F8F8; |
||||
|
} |
||||
|
|
||||
|
.swipe-box { |
||||
|
height: 867rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item-num { |
||||
|
width: 90rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.collect{ |
||||
|
position: absolute; |
||||
|
width: 51rpx; |
||||
|
height: 51rpx; |
||||
|
right: 20rpx; |
||||
|
top: 20rpx; |
||||
|
font-size: 23rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
image{ |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
.swiper-pointer{ |
||||
|
position: absolute; |
||||
|
right: 20rpx; |
||||
|
bottom: 20rpx; |
||||
|
background: rgba(22,22,22,0.5); |
||||
|
border-radius: 23rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
padding: 6rpx 14rpx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 867rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 867rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 867rpx; |
||||
|
} |
||||
|
.item-img.pop-swiper-image{ |
||||
|
height: 347rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.common-container{ |
||||
|
background: white; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.info-container{ |
||||
|
padding: 34rpx 25rpx; |
||||
|
width: 100%; |
||||
|
margin-bottom: 21rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #666666; |
||||
|
.info-title{ |
||||
|
|
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.detail-container{ |
||||
|
width: 100%; |
||||
|
padding: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,234 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="topImg relative"> |
||||
|
<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill"> |
||||
|
<view class="icon-back" :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" > |
||||
|
<uni-icons type="left" size="24" color="#242424"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="tag-container no-scrollbar"> |
||||
|
<view :class="['tag', type_id==0?'active':'']" @click="setTag(0)">全部</view> |
||||
|
<view :class="['tag', type_id==1?'active':'']" v-for="(item,i) in 10" :key="i" @click="setTag(i)">景点</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="strategy-box box"> |
||||
|
<view v-for="(num,nums) in 2" :key="nums"> |
||||
|
<view v-for="(item,index) in list" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="viewDetail(item)"> |
||||
|
<!-- <view class="title-tag" v-if="item.image_tag">{{item.image_tag}}</view> --> |
||||
|
<image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image> |
||||
|
<view class="strategy-content"> |
||||
|
<view class="strategy-title">{{item.title}}</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="text-overflow" style="display: flex;align-items: center;width: 200rpx;"> |
||||
|
<image :src="showImg(item.author_img)" mode="" class="author-img"></image> |
||||
|
{{item.author}} |
||||
|
</view> |
||||
|
<view style="display: flex;align-items: center;"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/index/eye.png" mode="" class="eye-img"></image> |
||||
|
{{item.view}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return { |
||||
|
systemInfo: { |
||||
|
height:"0px", |
||||
|
textHeight:"0px", |
||||
|
textTop:"0px", |
||||
|
contentTop: '0px', |
||||
|
}, |
||||
|
|
||||
|
list: [], |
||||
|
showMore: true, |
||||
|
headImg:"https://tongli.sz-trip.com/uploads/20240902/55c5cbe137790323cc719b5c83d5e2e9.png", |
||||
|
|
||||
|
type_id: 0,//景点分类id |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.showMore = true |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getArticleByType() |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
let that = this |
||||
|
uni.getSystemInfo({ |
||||
|
success(res) { |
||||
|
console.log(res) |
||||
|
that.systemInfo.height =res.windowHeight+'px' |
||||
|
const menu=uni.getMenuButtonBoundingClientRect() |
||||
|
that.systemInfo.textHeight=menu.height+"px" |
||||
|
that.systemInfo.textTop=menu.top+"px" |
||||
|
that.systemInfo.contentTop = (menu.height + menu.top)+"px" |
||||
|
console.log(that.systemInfo) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
setTag (item) { |
||||
|
this.type_id = item |
||||
|
// this.getArticleByType() |
||||
|
}, |
||||
|
|
||||
|
// 游记攻略 |
||||
|
getArticleByType() { |
||||
|
this.Post({ |
||||
|
type_id: 41, |
||||
|
offset: this.list.length, |
||||
|
limit: 10 |
||||
|
},'/api/Article/getArticleByType').then(res => { |
||||
|
this.list = [...this.list, ...res.data] |
||||
|
|
||||
|
if(res.data.length < 10) this.showMore = false |
||||
|
}) |
||||
|
}, |
||||
|
// 游记攻略查看更多 |
||||
|
strategyMore() { |
||||
|
this.getArticleByType() |
||||
|
}, |
||||
|
viewDetail (item) { |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/travelGuide/detail?id='+item.id |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.showMore) this.getList() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
font-family: PingFangSC; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #FFFFFF; |
||||
|
} |
||||
|
.topImg{ |
||||
|
width: 100%; |
||||
|
height: 440rpx; |
||||
|
.icon-back{ |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
z-index: 50; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tag-container{ |
||||
|
margin: 42rpx 26rpx; |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
overflow-y: auto; |
||||
|
.tag{ |
||||
|
flex-shrink: 0; |
||||
|
border-radius: 13rpx; |
||||
|
border: 1px solid #999999; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #666666; |
||||
|
padding: 13rpx 29rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.tag.active{ |
||||
|
background: linear-gradient(90deg, #9EE4FE, #7FD491); |
||||
|
border: none; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.strategy-box { |
||||
|
padding: 0 26rpx; |
||||
|
padding-bottom: 50rpx; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.strategy-item { |
||||
|
width: 339rpx; |
||||
|
border-radius: 13rpx; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 28rpx; |
||||
|
position: relative; |
||||
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38); |
||||
|
|
||||
|
.title-tag { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 153rpx; |
||||
|
line-height: 47rpx; |
||||
|
background: #71B580; |
||||
|
border-radius: 20rpx 0rpx 20rpx 0rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
overflow-x: auto; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.title-tag::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.strategy-image { |
||||
|
width: 337rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.strategy-content { |
||||
|
background: #FFFFFF; |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
.strategy-title { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #2C2C2C; |
||||
|
} |
||||
|
|
||||
|
.flex-between { |
||||
|
font-weight: 500; |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
margin-top: 14rpx; |
||||
|
|
||||
|
.author-img { |
||||
|
width: 37rpx; |
||||
|
height: 37rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.eye-img { |
||||
|
width: 26.67rpx; |
||||
|
height: 18.67rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue