213 lines
4.6 KiB
Vue
213 lines
4.6 KiB
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> |