合并 智慧就业第一版

packageB/pages/testReport/components/testHead.vue

@@ -0,0 +1,213 @@
+<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>