ks-app-employment-service/packageCa/testReport/components/testHead.vue

<template>
	<view class="box">
		<view class="test-head">
		    <view class="test-name">
		        <view class="name">
		            {{reportTitle}}
		        </view>
		        <view class="time">
		            测评时间{{testTime}}
		        </view>
		    </view>
		    <view class="fun-btn">
				<view class="fbtn" @click="playIntroduce" v-if="isIntroduce">
						<text class="icon-1"></text>
						<text class="name">测评介绍</text>
				</view>
				<view class="fbtn" @click="playVideo"  v-if="isVideo">
						<text class="icon-2"></text>
						<text class="name">报告解读</text>
				</view>
		    </view>
			<!-- 报告解读播放 -->
 			<uni-popup @change="popupChange" ref="pop_video" type="center">
			    <view class="video-content">
			        <video id="visitorVideo" :src="videoUrlVisitor" controls autoplay="true"></video>
			    </view>
			</uni-popup>
			<!-- 测评介绍 -->
 			<uni-popup @change="popupChange" ref="pop_introduce" type="center">
			    <view class="img-content">
			        <image :src="introduceUrl" mode="widthFix"></image>
					 <image v-if="introduceUrl2 !='' " :src="introduceUrl2" mode="widthFix"></image>
			    </view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 标题
			reportTitle: {
				type: String,
				default: "",
			},
			// 时间
			testTime: {
				type: String,
				default: "",
			},
			//是否测评介绍
			isIntroduce: {
				type: Boolean,
				default: false
			},
			//是否报告解读
			isVideo: {
				type: Boolean,
				default: false
			}, 
			videoUrl: {
				type: String,
				default: "",
			},
			//测评介绍图地址
			introduceUrl: {
				type: String,
				default: "",
			},
			//测评介绍图地址
			introduceUrl2: {
				type: String,
				default: "",
			},
			value: {
				type: Boolean,
				default: true,
			},			
		},
		data() {
			return {
				showIntroduce: false,
				showVideo: false,
				videoUrlVisitor: "",
			}
		},
		methods: {
			popupChange(e) {
			  console.log('当前模式:' + e.type + ',状态:' + e.show)
			  if (!e.show) {
				// 弹窗关闭时的处理逻辑
				this.$emit("updateValue", true);
			  }
			},			
			//视频介绍
			playVideo() {
				this.videoUrlVisitor = this.videoUrl;
				this.$refs.pop_video.open('center');
				this.$emit("updateValue", false);
				//this.showVideo = true;
			},
			//报告介绍
			playIntroduce() {
				this.$refs.pop_introduce.open('center');
				this.$emit("updateValue", false);
				//this.showIntroduce = true;
			},
			
			// showContrastLayer(){
			// 	this.$emit('showParentContrastLayer');
			// }
		}
	}
</script>

<style lang="scss">
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	.test-head {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    padding-bottom: 30rpx;
	    margin-bottom: 25rpx;
	    .test-name {
	        .name {
	            font-size: 36rpx;
	            color: #000000;
	            font-weight: 600;
	            margin-bottom: 15rpx;
	        }
	
	        .time {
	            font-size: 24rpx;
	            color: #20B664;
	        }
			flex:1;
	    }
	
	    .fun-btn {
	        display: flex;
	        align-items: center;
	
	        .fbtn {
	            display: flex;
	            flex-direction: column;
	            align-items: center;
	            margin-left: 40rpx;
	
	            .icon-1 {
	                display: block;
	                width: 72rpx;
	                height: 72rpx;
	                background: url("#{$image-oss-url}/test/btn-1.png") no-repeat;
	                background-size: 100%;
	            }
	
	            .icon-2 {
	                display: block;
	                width: 72rpx;
	                height: 72rpx;
	                background: url("#{$image-oss-url}/test/btn-2.png") no-repeat;
	                background-size: 100%;
	            }
	
	            .name {
	                font-size: 20rpx;
	                color: #999;
	                margin-top: 8rpx;
	            }
	        }
	    }
	}
	.video-content {
	    padding: 0;
	    width: 710rpx;
	    background: #000;
	    video {
	        width: 100%;
	        // height: 400rpx;
	    }
	}
	.img-content {
	    display: flex;
	    justify-content: center;
	    height: 1200rpx;
	    overflow: auto;
	    image {
	        width: 690rpx;
	    }
	}
	.tip-layer {
	    .title {
	        font-size: 36rpx;
	        color: #000000;
	        text-align: center;
	        font-weight: 600;
	        margin-bottom: 30rpx;
	    }
	
	    .desc {
	        font-size: 28rpx;
	        color: #666666;
	        margin-bottom: 20rpx;
	
	        &:last-child {
	            margin-bottom: 0;
	        }
	    }
	}
	
	
</style>