tongan-points-h5/pages/detail/detail.vue

<template>
	<view class='wrap'>
		<view class="playvideo" v-if="playvideo">
			<view class="playvideowrap">
				<video :autoplay="true" :src="detailPoints.video?detailPoints.video.url:''" play-btn-position="center"></video>
				<view class="closevideo" @click="playvideo=false">X</view>
			</view>
			<!-- <u-icon name="photo" color="#fff" size="30"></u-icon> -->
			
		</view>
		<view class="detail-study">
			<view>
				<image :src="indextitle" class="title"></image>
			</view>
			<view>
				<image :src="studytitle" class="detail-study-title"></image>
			</view>
			<view class="detail-study-video">
				<view class="detail-study-video-content">
					<view style="display: flex;">
						<view class="detail-study-video-content-left">
							<view v-if="detailPoints.video&&showVorImage" class="videowrap" @click="playvideo=true">
								<view class="videowrap-mask"></view>
								<view class="videowrap-play"></view>
								<image :src="detailPoints.video_image.url"></image>
								<!-- <video :src="detailPoints.video?detailPoints.video.url:''" style="width: 100%;height: 340rpx;" play-btn-position="center"></video> -->
							</view>
							<view v-if="imageArr.length>0&&showVorImage" class="imgwrap">
								<u-swiper :height="340" bgColor="#fff" radius="0rpx" :list="imageArr" :autoplay="false"
									></u-swiper>
							</view>
							<view class="detail-study-video-content-left-change" v-if="videoOrimage===3">
								<view @click="showVorImage=true">
									<image :src="require('@/static/xtdk/detail-camera.png')"></image>1
								</view>
								<view @click="showVorImage=false">
									<image :src="require('@/static/xtdk/detail-photo.png')"></image>
									{{imageArr.length}}
								</view>
								
							</view>
						</view>
						<view class="detail-study-video-content-right">

						</view>
					</view>
				</view>
			</view>
			<view class="detail-study-detail">
				<view class="detail-study-bg">{{detailPoints.name}}</view>
				<u-read-more :showHeight="450" :textIndent="'0em'" closeText="查看更多" color="#d0382f" ref="uReadMore">
					<rich-text :nodes="detailPoints.content"></rich-text>
				</u-read-more>
				<view class="detail-study-btn" @click="$u.throttle(toAnswer)">
					<p>你已经对{{detailPoints.name}}有一些了解了，</p>
					<p>快来答题吧！</p>
				</view>
			</view>
			
		</view>
		<!-- <iframe ref="iframe" src="static/html/explanation.html" frameborder="0"></iframe> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indextitle: require('../../static/xtdk/index-title.png'),
				studytitle: require('../../static/xtdk/detail-study.png'),
				studybtn: require('../../static/xtdk/detail-btn.png'),
				flag: true,
				detailPoints: {},
				imageArr: [],
				videoOrimage:1,//1:只有视频，2只有图片，3都有
				showVorImage:true,
				playvideo:false
			};
		},
		methods: {
			showVr(id) {
				this.$u.api.baseFormShow({
					table_name: 'map_point_contents',
					id
				})
			},

			toAnswer() {
				uni.navigateTo({
					url: `/pages/answer/answer?id=${this.$route.query?.id}`
				})
			},

			async getImages(id) {
				const res = await this.$u.api.baseFormIndex({
					table_name: 'map_point_images',
					'with_relations[0]': 'image',
					'with_relations[1]': 'video',
					'filter[0][key]': 'map_point_id',
					'filter[0][op]': 'eq',
					'filter[0][value]': id
				})

				return res
			},

			async getDetail(id) {
				const res = await this.$u.api.pointDetail({
					//table_name: 'map_points',
					'with_relations[0]': 'image',
					'with_relations[1]': 'video',
					'with_relations[2]': 'videoImage',
					'with_relations[3]': 'mapPointContent',
					id
				})

				return res
			},
			async getVrs(id) {
				const res = await this.$u.api.pointDetail({
					table_name: 'map_point_contents',
					'with_relations[0]': 'image',
					'with_relations[1]': 'video',
					'filter[0][key]': 'map_point_id',
					'filter[0][op]': 'eq',
					'filter[0][value]': id
				})

				return res
			},

			hiddenLoad() {
				uni.hideLoading()
			}
		},
		async onLoad(option) {
			let detail = await this.getDetail(option.id)
			this.detailPoints = detail.points
			this.$nextTick(() => {
				this.$refs.uReadMore.init();
			})
			let vrs = detail.content

			let images = await this.getImages(option.id)
			images.data.map(item=>{
				this.imageArr.push(item.image.url)
			})
			if(this.detailPoints.video&&this.imageArr.length>0){
				this.videoOrimage = 3
			}else if(this.imageArr.length>0&&!this.detailPoints.video){
				this.videoOrimage = 2
			}else{
				this.videoOrimage = 1
			}
			// if (this.flag) {
			//   uni.showLoading({
			//     mask: true,
			//     title: '加载中'
			//   })
			//   window.showVr = this.showVr
			//   window.toAnswer = this.toAnswer
			//   window.hideLoading = this.hiddenLoad

			//   this.$nextTick(() => {
			// let detail = await this.getDetail(option.id)
			// let vrs = detail.content
			// let images = await this.getImages(option.id)
			//     this.$refs['iframe'].onload = async () => {
			//       let detail = await this.getDetail(option.id)
			//       let vrs = detail.content
			//       let images = await this.getImages(option.id)
			//       this.$refs['iframe'].contentWindow.setDomData({ detail: detail.points , vrs: vrs, images: images.data })
			//     }
			//   })

			//   this.flag = false
			// }
		},
	}
</script>

<style lang="scss">
	.wrap {
		background: url(../../static/xtdk/detail-bg.png) no-repeat top left;
		background-size: 100% 100%;
		background-color: #fdd5d6;
		height: 100vh;
		width: 100vw;
		.playvideo{
			width:100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			z-index:11;
			background-color: rgba(0,0,0,0.6);
			&>.playvideowrap{
				width:95%;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				uni-video{
					width:100%
				}
				.closevideo{
					color: #fff;
					width: 50rpx;
					height: 50rpx;
					border: 1px solid #fff;
					border-radius: 50rpx;
					position: absolute;
					text-align: center;
					line-height: 50rpx;
					/* display: inline-block; */
					right: 0rpx;
					top:-25rpx
					// transform: translate(0,-50%);
				}
			}
			
		}
		.title {
			width: 514rpx;
			height: 274rpx;
			margin: 0 auto;
			padding-top: 60rpx;
			display: block;
		}

		.detail-study {


			&-title {
				width: 685rpx;
				height: 87rpx;
				margin: 0 auto;
				display: block;
				padding-top: 20rpx;
			}

			&-video {
				background: url(../../static/xtdk/detail-video-bg.png) no-repeat top left;
				width: 100%;
				height: 340rpx;
				background-size: 100% 213rpx;
				background-position: 0 64rpx;

				&-content {
					width: 685rpx;
					height: 340rpx;
					margin: 0 auto;
					// border:1px solid red;
					margin-top: 40rpx;
					font-size: 0;

					&-left {
						width: 475rpx;
						height: 340rpx;
						position: relative;
						& .videowrap{
							image{
								width: 475rpx;
								height: 340rpx;
								padding-top:0;
							}
							&-mask{
								width: 475rpx;
								height: 340rpx;
								background-color: rgba(0, 0, 0, 0.5);
								position: absolute;
								z-index: 9;
								top: 0;
								left: 0;
							}
							&-play{
								background: url(../../static/xtdk/detail-videoplay.png) no-repeat top left;
								width:67rpx;
								height:68rpx;
								background-size: 100% 100%;
								position: absolute;
								top:50%;
								left:50%;
								transform: translate(-50%,-50%);
								z-index: 10;
							}
						}
						// ::v-deep .u-swiper-indicator{
						// 	display: none;
						// }
						::v-deep .u-indicator-item-round.u-indicator-item-round-active{
							background-color: #bf3022;
						}
						&-change{
							padding:10rpx 30rpx;
							border-radius: 20rpx;
							background-color: rgba(0,0,0,0.3);
							display: flex;
							position: absolute;
							bottom:20rpx;
							left:20rpx;
							z-index: 10;
							&>view{
								font-size:24rpx;
								color:#fff;
								&:first-child{
									margin-right:10rpx;
									border-right:1px solid #fff;
									padding-right:10rpx
								}
								image{
									width:23rpx;
									height:21rpx;
									padding-right:10rpx
								}
							}
							
						}
					}

					&-right {
						background: url(../../static/xtdk/detail-video.png) no-repeat top left;
						width: 210rpx;
						height: 340rpx;
						background-size: 100% 100%;
					}
				}

			}

			&-detail {
				width: 685rpx;
				margin: 20rpx auto;
				padding-bottom: 40rpx;

			}
			&-bg{
				width: 685rpx;
				height: 49rpx;
				background: url(../../static/xtdk/detail-study1.png) no-repeat top left;
				background-size: 100% 100%;
				margin: 20rpx auto;
				line-height: 49rpx;
				color:#bf3022;
				padding-left:60rpx;
				font-family: '宋体';
				font-size: 30rpx;
			}
			&-btn {
				width: 685rpx;
				height: 182rpx;
				background: url(../../static/xtdk/detail-btn.png) no-repeat top left;
				background-size: 100% 100%;
				margin: 0 auto;
				padding-top: 100rpx;
				padding-left: 215rpx;
				color: #fbf2dd;
				font-size: 20rpx;
				margin-top:20rpx;
			}
		}
	}
</style>