app_tree_planting/pages/news/newsdetail.vue

<template>
	<view class="page">
		<view class="content">
			<view class="news-title">{{bean.newsContentTitle}}</view>
			<view class="news-type">
				<view class="type">发布时间:{{bean.newsContentPublishTime}}</view>
				<view class="type">来源:{{bean.newsContentResource}}</view>
			</view>
			<view class="news-content">
				<rich-text :nodes="bean.newsContentContent"></rich-text>
			</view>
			<!-- 图文新闻 -->
			<block v-if="'2'==bean.newsContentType">
				<swiper class="swiper" :autoplay="true" indicator-color="#E4E4E4" style="margin-top: 30rpx;"
					indicator-active-color="#009749" :circular="true">
					<swiper-item class="swiper-item" v-for="(item, index) in bean.fileList" :key="index"
						@click="showImg(item)">
						<view class="img-box">{{index+1}}/{{bean.fileList.length}}</view>
						<image :lazy-load="true" :src="imgUrl+item.contentFileFileId" mode="scaleToFill"></image>
						<view class="title">
							<text>{{item.contentFileText}}</text>
						</view>
					</swiper-item>
				</swiper>
			</block>
			<!-- 音频新闻 -->
			<block v-else-if="'3'==bean.newsContentType">
				<view v-for="(item,index) in bean.fileList" :key="index" style="margin-top: 30rpx;">
					<audio style="text-align: left" :src="imgUrl+item.contentFileFileId"
						poster="/static/images/ic_audio_poster" :name="item.contentFileText" controls></audio>
				</view>
			</block>
			<!-- 视频新闻 -->
			<block v-else-if="'4'==bean.newsContentType">
				<view style="margin-top: 30rpx;">
					<video :title="currentTitle" :src="imgUrl+currentVideoUrl" style="width: 100%;"></video>
					<view class="video-category-box">
						<view class="video-tab-title">目录</view>
						<scroll-view scroll-x="true" class="video-tab-box">
							<view v-for="(item,index) in bean.fileList" :key="index" @click="changeVideo(item)"
								class="video-tab" :class="currentVideoUrl == item.contentFileFileId? 'tab-active':''">
								{{index+1}}
							</view>
						</scroll-view>
					</view>
					<view class="video-title">
						<view class="h-line"></view>
						<view class="h-txt">视频详情</view>
					</view>
					<view class="video-txt">{{currentTitle}}</view>
				</view>
			</block>
			<!-- 文章新闻 -->
			<block v-else>
				<block v-if="bean.newsContentCoverList">
					<view style="margin-top: 30rpx;" v-for="(item,index) in bean.newsContentCoverList" :key="index">
						<image :src="imgUrl+item.contentCoverId" mode="widthFix" style="width: 100%;"></image>
					</view>
				</block>

			</block>
		</view>
		<pageLoading v-if=" showPageLoading"></pageLoading>
	</view>
</template>

<script>
	import pageLoading from '@/components/loading/pageLoading.vue';
	export default {
		components: {
			pageLoading
		},
		data() {
			return {
				newsId: '',
				showPageLoading: true,
				bean: {},
				imgUrl: this.$api.common.imgUrl,
				currentVideoUrl: '',
				currentTitle: ''
			}
		},
		onShow() {},
		onLoad(res) {
			this.newsId = res.id
			console.log(this.newsId)
			this.getNewsDetail()
		},
		methods: {
			showImg(item) {
				var url = this.imgUrl + item.contentFileFileId
				uni.previewImage({
					urls: [url]
				})
			},
			changeVideo(item) {
				this.currentVideoUrl = item.contentFileFileId;
				this.currentTitle = item.contentFileText;
			},
			getNewsDetail() {
				console.log('获取详情')
				var _self = this;
				_self.$app.request({
					url: _self.$api.news.getNewsDetail + _self.newsId,
					method: 'GET',
					dataType: 'json',
					success: res => {
						console.log(res)
						if (res) {
							if (res.newsContentType == '4') {
								_self.currentVideoUrl = res.fileList[0].contentFileFileId
								_self.currentTitle = res.fileList[0].contentFileText
								console.log(_self.currentTitle)
							}
							var regex = new RegExp('<img', 'gi');
							res.newsContentContent = res.newsContentContent.replace(regex,
								`<img style="max-width:100%;min-width:100%;"`);
							_self.bean = res
						} else {
							_self.$alert('网络错误')

						}
					},
					fail: res => {
						_self.$alert('网络错误')
					},
					complete: res => {
						_self.showPageLoading = false
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: auto;
		height: 100%;
	}

	.content {
		flex: 1;
		padding: 35rpx;
	}

	.news-title {
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 70rpx;
	}

	.news-type {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 30rpx;

		.type {

			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #919191;
			line-height: 40rpx;
		}

		.type:nth-of-type(n+2) {
			margin-left: 20rpx;
		}

	}

	.news-content {
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 53rpx
	}

	/*幻灯片广告 */
	.swiper {
		height: 800rpx;

		image {
			height: 800rpx;
			width: 100%;
			border-radius: 15rpx;
			//box-shadow: 0 0 12px #dddee1;
		}

		.current {
			width: 98%;
			height: 800rpx;
			transition: all 0.2s ease-in 0s;
		}

		.swiper-item {
			position: relative;

			image {
				height: 800rpx;
				width: 100%;
				border-radius: 15rpx;
				//box-shadow: 0 0 12px #dddee1;
			}

			.title {
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				background-color: #202020b5;
				justify-content: center;
				width: 100%;

				text {
					display: flex;
					align-items: center;
					//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
					//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
					color: #fff;
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: 34rpx;
					padding: 14rpx 20rpx;
					max-width: 610rpx;
					line-height: 1.3;
					border-radius: 5rpx;
				}
			}
		}
	}

	.video-tab {
		width: fit-content;
		display: inline-block;
		text-align: center;
		padding: 20rpx;
	}

	.tab-active {
		background: #53B584;
		color: #fff;
	}

	.img-box {
		color: #53B584;
		background: #ffffffcf;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		padding: 10rpx;
		border-radius: 50%;
		font-size: 28rpx;
		z-index: 10;

	}

	.video-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;

		.h-line {
			height: 40rpx;
			width: 10rpx;
			background: #53B584;
		}

		.h-txt {
			font-size: 32rpx;
			margin-left: 10rpx;
		}
	}

	.video-txt {
		font-size: 28rpx;
	}

	.video-category-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #393939;
		margin-top: -18rpx;
	}

	.video-tab-title {
		font-size: 32rpx;
		color: white;
	}

	.video-tab-box {
		white-space: nowrap;
		border-top: 1rpx solid white;
		border-bottom: 1rpx solid white;
		color: white;
		padding: 5rpx;
	}
</style>