215 lines
9.4 KiB
Vue
215 lines
9.4 KiB
Vue
<template>
|
|
<view class="waper">
|
|
<u-navbar @leftClick="leftClick" :placeholder="true" bgColor="#fff">
|
|
<view slot='center' class="navbar_title">详情</view>
|
|
</u-navbar>
|
|
<view class="waper_box" v-if="detail">
|
|
<view class="title">{{detail.title}}</view>
|
|
<view class="info">
|
|
<view class="left">发布时间：{{$utils.formatDate('Y-M-D', detail.publishtime * 1000)}}</view>
|
|
<view class="right">
|
|
<view class="icon" @click="addUserCollect">
|
|
<u-icon size="36rpx" color="#03AE80" :name="detail.isCollect > 0 ? 'star-fill' : 'star'"></u-icon>
|
|
</view>
|
|
<button open-type="share" class="icon">
|
|
<u-icon size="36rpx" color="#03AE80" name="share-square"></u-icon>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<u-parse :content="detail.params.content"></u-parse>
|
|
</view>
|
|
<!-- <view class="recommend" v-if="detail.params.associationType == '2' && list.length > 0">
|
|
<view class="recommend_title">相关推荐</view>
|
|
<view class="recommend_list">
|
|
<navigator hover-class="none" :url="'/pages/scenic/ticket?id=' + i.id" class="list" v-for="(i, index) in list" :key="index">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(i.image11)" mode=""></image>
|
|
</view>
|
|
<view class="text">
|
|
<view class="name">{{i.ticketName}}</view>
|
|
<view class="tag">
|
|
<view v-if="i.refundRule == '0'">不可退</view>
|
|
<view v-if="i.refundRule == '3'">有效期可退</view>
|
|
<view v-if="i.refundRule == '4'">{{i.refundDay}}天内可退</view>
|
|
<view v-if="i.refundRule == '5'">未激活可退</view>
|
|
</view>
|
|
<view :class="'price' + (i.salesRice > 0 ? '' : ' free')">{{i.salesRice > 0 ? i.salesRice.toFixed(2) : '免费'}}</view>
|
|
<view class="btn">购票</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<view class="recommend" v-if="detail.params.associationType == '1' && list1.length > 0">
|
|
<view class="recommend_title">相关推荐</view>
|
|
<view class="recommend_list">
|
|
<navigator hover-class="none" :url="'/pages/scenic/spot?id=' + i.id" class="list1" v-for="(i, index) in list1" :key="index">
|
|
<view class="img1">
|
|
<image :src="$utils.setImgUrl(i.image)" mode=""></image>
|
|
</view>
|
|
<view class="text1">
|
|
<view class="name">{{i.scenicName}}</view>
|
|
<view class="tag">
|
|
<view>{{i.blurb}}</view>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: '',
|
|
detail: null,
|
|
list: [],
|
|
list1: []
|
|
}
|
|
},
|
|
onShareAppMessage (e) {
|
|
return {
|
|
title: '巴松措风景区',
|
|
path: '/pages/login/index'
|
|
}
|
|
},
|
|
onLoad (options) {
|
|
this.id = options.id
|
|
this.archieveRmglDetail()
|
|
},
|
|
methods: {
|
|
leftClick () {
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2];
|
|
if (prevPage) {
|
|
uni.navigateBack({ delta: 1 })
|
|
prevPage.onLoad(prevPage.options);
|
|
} else uni.reLaunch({ url: '/pages/tabbar/home' })
|
|
},
|
|
async archieveRmglDetail() {
|
|
let info = await this.$http.archieveRmglDetail({ id: this.id, scenicType: '1' })
|
|
info.data.params.content = this.$utils.replaceImg(info.data.params.content);
|
|
// 门票
|
|
let list = [];
|
|
if (info.data.ticketList && info.data.ticketList.length > 0) {
|
|
info.data.ticketList.forEach((item) => {
|
|
list.push(item)
|
|
})
|
|
}
|
|
this.list = list;
|
|
// 景点
|
|
let list1 = [];
|
|
if (info.data.spotList && info.data.spotList.length > 0) {
|
|
info.data.spotList.forEach((item) => {
|
|
list1.push(item)
|
|
})
|
|
}
|
|
this.list1 = list1;
|
|
this.detail = info.data
|
|
},
|
|
async addUserCollect () {
|
|
let info = null;
|
|
if (this.detail.isCollect > 0) {
|
|
info = await this.$http.deleteUserCollect({ archivesId: this.detail.id });
|
|
} else {
|
|
info = await this.$http.addUserCollect({ archivesId: this.detail.id, type: 'strategyDetails' });
|
|
}
|
|
if (info.code == 200) {
|
|
uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
|
|
this.archieveRmglDetail();
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ background: white; }
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.waper_box{
|
|
width: 100%; box-sizing: border-box; padding: 24rpx 32rpx;
|
|
.title{
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
color: rgba(0,0,0,0.85);
|
|
line-height: 47rpx;
|
|
}
|
|
.info{
|
|
width: 100%; margin-top: 30rpx; display: flex; justify-content: space-between; align-items: center;
|
|
.left{
|
|
font-size: 28rpx;
|
|
color: rgba(0,0,0,0.45);
|
|
line-height: 33rpx;
|
|
}
|
|
.right{
|
|
display: flex; align-items: center;
|
|
.icon{
|
|
width: 60rpx; height: 60rpx; background: rgba(3,174,128,0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 16rpx; border: none; padding: 0;
|
|
&::after{ border: none; }
|
|
&:last-child{ margin-right: 0; }
|
|
}
|
|
}
|
|
}
|
|
.content{ margin-top: 32rpx; color: #666; line-height: 40rpx; font-size:28rpx; }
|
|
.recommend{
|
|
width: 100%; margin-top: 32rpx;
|
|
.recommend_title{ line-height: 50rpx; color: rgba(0,0,0,0.85); font-size: 36rpx; font-weight: 500; }
|
|
.recommend_list{
|
|
width: 100%; margin-top: 24rpx;
|
|
.list{
|
|
box-sizing: border-box; position: relative; height: 222rpx; width: 100%; margin-bottom: 20rpx; background: #fff; border-radius: 10rpx; padding: 32rpx 24rpx 32rpx 202rpx;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.img{
|
|
width: 158rpx; height: 158rpx; position: absolute; left: 24rpx; top: 32rpx;
|
|
image{ border-radius: 10rpx; }
|
|
}
|
|
.text{
|
|
width: 100%; height: 158rpx;
|
|
.name{ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; height: 40rpx; }
|
|
.tag{
|
|
margin-top: 16rpx; display: flex; align-items: center; height: 34rpx;
|
|
view{ color: #999; font-size: 24rpx; }
|
|
}
|
|
.price{
|
|
margin-top: 30rpx; box-sizing: border-box; padding-left: 24rpx; position: relative; line-height: 40rpx; color: #FF3333; font-size: 32rpx; font-weight: 500;
|
|
&::after{ content: "￥"; line-height: 34rpx; color: #FF3333; font-size: 24rpx; font-weight: 500; position: absolute; left: 0; bottom: 0; }
|
|
&.free{
|
|
padding-left: 0;
|
|
&::after{ font-size: 0; }
|
|
}
|
|
}
|
|
.btn{ width: 178rpx; height: 64rpx; color: #fff; text-align: center; line-height: 64rpx; border-radius: 32rpx; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); font-size: 24rpx; position: absolute; right: 24rpx; bottom: 32rpx; }
|
|
}
|
|
}
|
|
.list1 {
|
|
box-sizing: border-box; position: relative; height: 222rpx; width: 100%; margin-bottom: 20rpx; background: #fff; border-radius: 10rpx; padding: 32rpx 24rpx 32rpx 254rpx;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.img1{
|
|
width: 210rpx; height: 158rpx; position: absolute; left: 24rpx; top: 32rpx;
|
|
image{ border-radius: 10rpx; }
|
|
}
|
|
.text1{
|
|
width: 100%; height: 158rpx;
|
|
.name{ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; height: 40rpx; }
|
|
.tag{
|
|
margin-top: 16rpx; display: flex; align-items: center;
|
|
view{
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |