xiaochengxu/pages/SkipView/SkipView.vue

<template>
	<view class="main">
		<view class="back" />
		<u-navbar
			title="详情"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<view class="body">
			<view class="image_out_box" v-if="isContainVideo()"><!--isContainImage() || -->
				<video v-if="isContainVideo()" :src="pageData.skipurl" object-fit="fill"/>
				<!--<image v-else-if="isContainImage()" :src="pageData.picurl" mode="widthFix"/>-->
			</view>	
			<text class="title">{{pageData.title}}</text>
			<text class="time">{{this.$utils.formatTime(pageData.inserttime)}}</text>
			<view style="height: 50rpx;" />
			<u-parse :content="getShowingContent()" :tagStyle="style"/>
			<view style="height: 50rpx;" />
		</view>
		
	</view>
	
</template>

<script>
	///在进入这个页面之前，必须要设置需要显示的内容，否则可能会出现错误
	export default {
		
		data() {
			return {
				pageData : getApp().globalData.showingSkipData,
				style : {
					p : 'text-indent:50rpx;margin:5rpx;',
				},
			};
		},
		destroyed() {
			getApp().globalData.showingSkipData = null;
		},
		methods:{
			onBackTouched(){
				uni.navigateBack({
					
				});
			},
			/**
			 * 是否需要显示图片
			 */
			isContainImage(){
				var types	= this.pageData.getShowType();
				var index 	= types.indexOf(0x01);
				return index != -1;
			},
			///是否包含视频
			isContainVideo(){
				var types	= this.pageData.getShowType();
				//console.log(types);
				var index 	= types.indexOf(0x04);
				//console.log("是否含有视频：",index);
				return index != -1;
			},
			getShowingContent(){
				return  this.pageData.textmsg;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p{
		text-indent: 25rpx;
	}
	.body{
		width: 686rpx;
		height: auto;
		border-radius: 20rpx;
		//background-color: #FFFFFF;
		position: relative;
		left: 24rpx;
		top: 10rpx;
	}
	.title{
		position: absolute;
		width: 686rpx;
		height: 120rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 60rpx;
		color: #333333;
		//letter-spacing: 40rpx;
		opacity: 1;
		position: relative;
		top: 10rpx;
		//text-align: center;
		
	}
	.image_out_box{
		width: 686rpx;
		height: 520rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
	}
	.image{
		width: 686rpx;
		height: 393rpx;
	}
	.time{
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: relative;
		top: 10rpx;
		text-align: right;
		right: 10rpx;
		line-height: 33rpx;
	}
</style>