yandu_WeChat/subPackages/travelGuide/detail.vue

<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.content)"></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>