broke_news_wx/pages/newsDetail/newsDetail.vue

<template>
	<view class="main">
		<view class="popupBottom" v-if="previewModal" @touchmove.stop.prevent="moveStop">
			<view class="popupSwiperBg" @click="previewModal = false"></view>
			<view class="swiperDotBox">
				<swiper class="swiperBox" @change="swiperChange" :current="previewIndex - 1">
					<swiper-item v-for="(item, index) in detail.clueInfoList" :key="index">
						<image
							:src="item.localUrl"
							class="swiperFileItem"
							v-if="item.type == '1'"
							mode="aspectFit"
							@click="previewModal = false"
						></image>
						<video
							:src="item.localUrl"
							class="swiperFileItem"
							:show-fullscreen-btn="false"
							controls
						></video>
						<video
					</swiper-item>
				</swiper>
				<view class="swiperPage">{{ `${previewIndex} / ${detail.clueInfoList.length}` }}</view>
			</view>
		</view>
		<view class="content">
			<view class="title">{{ formatTitle(detail.title) }}</view>
			<view class="fileBox">
				<view class="fileItem" v-for="(item, index) in detail.clueInfoList" :key="index">
					<image
						:src="item.localUrl"
						class="thumbnail"
						v-if="item.type == '1'"
						@click="previewFile(index)"
						mode="aspectFill"
					></image>
					<view
						class="defaultFileItem"
						v-else-if="item.type == '2'"
						@click="previewFile(index)"
					>
						<image src="../../static/image/video.png" class="thumbnail"></image>
						<image src="../../static/image/playBtn.png" class="playBtn"></image>
					</view>
					<view class="defaultFileItem" v-else @click="previewFile(index)">
						<image src="../../static/image/music.png" class="thumbnail"></image>
						<image src="../../static/image/playBtn.png" class="playBtn"></image>
					</view>
				</view>
			</view>
			<view class="newsTips">
				<view class="author">{{ formatName(detail.author) }}</view>
				<view class="time">{{ detail.modifyTime }}</view>
			</view>
		</view>
		<view class="seat"></view>
		<view class="commentBox" v-if="detail.replies.length > 0">
			<view class="header">回复信息</view>
			<view class="commentItem" v-for="item in detail.replies" :key="item.id">
				<view class="commentTitle">{{ item.content }}</view>
				<view class="commentTime">{{ item.replyTime }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getClueById } from '../../network/api.js';
export default {
	data() {
		return {
			detail: {
				title: '',
				clueInfoList: [],
				author: '',
				modifyTime: '',
				replies: []
			},
			previewIndex: 0,
			previewModal: false
		};
	},
	onLoad: function({ id }) {
		this.init(id);
	},
	methods: {
		formatName(name, index = 7) {
			return name.length > index ? name.substring(0, index -1) + '...' : name
		},
		formatTitle(title) {
			const reg = /1(\d{2})\d{4}(\d{4})/g;
			title = title.replace(reg,"1$1****$2");
			return title.length > 105 ? title.substring(0, 104) + '...' : title;
		},
		async init(id) {
			let res = await getClueById(id);
			if (res.data.state == 200) {
				let data = res.data.data;
				data.clueInfoList = data.clueInfoList.filter(item => item.type != 0);
				this.detail = data;
			}
		},
		previewFile(index) {
			this.previewIndex = index + 1;
			this.previewModal = true;
		},
		moveStop() {},
		swiperChange(e) {
			this.previewIndex = e.detail.current + 1;
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.content {
		box-sizing: border-box;
		width: 100vw;
		padding: 0 15px;
		background-color: #ffffff;
		.title {
			margin: 16px 0;
		}
		.fileBox {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
			.fileItem {
				width: 218rpx;
				height: 218rpx;
				background-color: #a5a5a5;
				position: relative;
				margin-right: 16rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
				&:nth-child(n + 4) {
					margin-top: 16rpx;
				}
				.thumbnail {
					width: 100%;
					height: 100%;
				}
				.defaultFileItem {
					position: relative;
					width: 100%;
					height: 100%;
					.playBtn {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.newsTips {
			margin: 16px 0;
			font-size: 12px;
			color: #5c5f66;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.seat {
		height: 8px;
		width: 100%;
		background-color: #f7f7f9;
	}
	.commentBox {
		margin-top: 16px;
		box-sizing: border-box;
		width: 100vw;
		padding: 0 15px;
		background-color: #ffffff;
		.commentItem {
			margin-bottom: 10px;
			border-bottom: 1px solid #e8e9eb;
			padding: 8px 0;
			.commentTitle {
				font-size: 14px;
				color: #151b26;
			}
			.commentTime {
				font-size: 12px;
				color: #5c5f66;
				margin-top: 10px;
			}
		}
	}
}
.popupBottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	display: flex;
	flex-direction: column;
	.popupBg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}
	.popupContent {
		height: 40%;
		margin-top: auto;
		background-color: #fff;
		position: relative;
		z-index: 11;
	}
	.popupSwiperBg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
	}
	.swiperDotBox {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		flex-direction: column;
		.swiperBox {
			height: 85vh;
			width: 100%;
		}
		.swiperFileItem {
			width: 100%;
			height: 100%;
		}
		.swiperAudioBox {
			width: 100%;
			height: 100%;
			position: relative;
		}
		.swiperAudioItem {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 111;
		}
		.swiperPage {
			position: absolute;
			bottom: 20rpx;
			width: 100%;
			height: 30px;
			text-align: center;
			line-height: 30px;
			color: #ffffff;
		}
	}
}
</style>