Merge branch '20250821-hz' into 20250709-wzy

components/video-player/video-player.vue

@@ -1,10 +1,12 @@
 <template>
-<view>
+  <view>
-	<view v-if="!xvideoBool || xvideoBool&&drag" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
+    <view v-if="!xvideoBool || xvideoBool&&drag" id="xvideoPlayer-box"
+          :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
       <!-- <div style="color:#ffffff">{{currtimeText}}</div> -->
       <!--webkit-playsinline playsinline x5-video-player-type="h5-page-->
       <!-- :src="url" <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageWidth/videoPageHeight*256)+'px':'','top':fullScreenFlag?videoPageHeight/2+'px':''}" -->
-		<video  id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2+'px':''}"
+      <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''"
+             :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2+'px':''}"
              :src="url"
              :controls="false"
              :enable-play-gesture="false"
@@ -24,11 +26,12 @@
       </video>
       <view id="xplayer-control">
         <!-- <view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%','margin-left':fullScreenFlag?'-320px':'','top':fullScreenFlag?'300px':videoFullHeight + 'px'}"> -->
-			<view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight*0.98+'px':'96%','margin-top':-1*videoPageHeight*0.02+'px','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2-174 - (videoPageWidth-375)/2+'px':'','bottom':fullScreenFlag?'auto':'0px'}">
+        <view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''"
+              :style="{width: fullScreenFlag?videoPageHeight*0.98+'px':'96%','margin-top':-1*videoPageHeight*0.02+'px','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2-174 - (videoPageWidth-375)/2+'px':'','bottom':fullScreenFlag?'auto':'0px'}">
           <view class="controller-play">
             <image :src="require(playing? './images/pause.png':'./images/play.png')" @click.stop='videoOpreation'/>
           </view>
-				<view class="currtime">{{currtime}}</view>
+          <view class="currtime">{{ currtime }}</view>
           <!-- <cover-view v-if="drag" class='slider-container'>
           <slider  @change.stop="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
            -->
@@ -47,10 +50,10 @@
           </view>
 
 
-				<view class="druationTime">{{druationTime}}</view>
+          <view class="druationTime">{{ druationTime }}</view>
           <view class="druationTime">
             <view id="myVideoSpeed" class="player-speed btn-speed">
-					  <view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
+              <view @click="showSpeedCtrl">{{ videoSpeed === 1 ? '倍速' : `${videoSpeed}x` }}</view>
               <view class="speed-control" v-if="speedListShow">
                 <view class="speed-control-list">
                   <view class="li"
@@ -75,30 +78,34 @@
       </view>
     </view>
     <view v-if="xvideoBool && !drag" class="video-box-error">
-		<view style="color: #ffffff;padding: 0px 50px 0px;font-size: 16px;">{{mobileVideoDragText}}</view>
+      <view style="color: #ffffff;padding: 0px 50px 0px;font-size: 16px;">{{ mobileVideoDragText }}</view>
-		<button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;" v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看</button>
+      <button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;"
+              v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看
+      </button>
+    </view>
   </view>
-</view>
 </template>
 <script>
-	import progressBar from "@/components/video-player/progress-bar.vue";
+import progressBar from "@/components/video-player/progress-bar.vue";
-	import {mapGetters} from 'vuex'
+import {mapGetters} from 'vuex'
-	import studyUtil from '@/utils/study.js';
+import studyUtil from '@/utils/study.js';
-	import apiManage from '@/api/manage/manage.js';
+import apiManage from '@/api/manage/manage.js';
-	// getDictCode
+
-	function agentFullScreen(){
+// getDictCode
+function agentFullScreen() {
   let bool = false
   let agent = navigator.userAgent
-		if(agent.indexOf('XiaoMi')!=-1){
+  if (agent.indexOf('XiaoMi') != -1) {
     bool = true
   }
   return bool
-	}
+}
-	//alert(navigator.userAgent +'----'+ agentFullScreen())
+
-	export default {
+//alert(navigator.userAgent +'----'+ agentFullScreen())
-		components: { progressBar },
+export default {
+  components: {progressBar},
   props: {
-			url:{
+    url: {
       type: String,
       require: true
     },
@@ -107,19 +114,19 @@
       type: String,
       default: null,
     },
-			watermark:{
+    watermark: {
       type: Boolean,
       default: true
     },
-			name:{
+    name: {
       type: String,
       default: ''
     },
-			drag:{
+    drag: {
       type: Boolean,
       default: true
     },
-			inittime:{//默认播放的位置,第几秒
+    inittime: {//默认播放的位置,第几秒
       type: Number,
       default: 0
     },
@@ -127,23 +134,23 @@
   data() {
     return {
       xvideoBool: agentFullScreen(), // 是否显示视频
-				contrlShow:false,//是否显示控制条
+      contrlShow: false,//是否显示控制条
-				contrlShowTimeout:null,//显示控制条句柄
+      contrlShowTimeout: null,//显示控制条句柄
-				videoContext:null,//播放器
+      videoContext: null,//播放器
       fullScreenFlag: false,//是否全屏
-				currtime:'00:00',//当前播放时间 字符串 计算后
+      currtime: '00:00',//当前播放时间 字符串 计算后
-				druationTime:'00:00',//总时间 字符串 计算后
+      druationTime: '00:00',//总时间 字符串 计算后
-				initPlayingTime:0,//指定播放的时间位置
+      initPlayingTime: 0,//指定播放的时间位置
       sliderValue: 0, //控制进度条slider的值，
       updateState: true, //防止视频播放过程中导致的拖拽失效
-				playing:false,//是否在播放中
+      playing: false,//是否在播放中
-				curVideo:{
+      curVideo: {
-					duration:0,
+        duration: 0,
         currentTime: 0
       },
-				touchNum:0,
+      touchNum: 0,
-				speedListShow:false,
+      speedListShow: false,
-				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
+      speedList: ["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
       videoSpeed: 1.0, // 当前倍速:
       isMousedownProgress: false, // 鼠标是否按下了进度条（并未松开）
       historyTime: 0, // 当前视频
@@ -162,45 +169,45 @@
   computed: {
     ...mapGetters(['userInfo']),
   },
-		watch:{
+  watch: {
-			url(newVal,oldVal){
+    url(newVal, oldVal) {
       //console.log( 'watch url:',newVal,oldVal,this.videoContext)
       //document.getElementById('xvideoPlayer').style.display = 'none'
       this.videoContext.stop();
-				this.playing=false;
+      this.playing = false;
       this.curVideo.currentTime = 0;
       this.iosCurrentTime = 0;
       this.sliderValue = 0;
       this.videoSpeed = 1.0;
       this.currtime = "00:00";
       document.getElementsByTagName('video')[0].load()
-				setTimeout(()=>{
+      setTimeout(() => {
         document.getElementsByTagName('video')[0].play()
-				},100)
+      }, 100)
 
       //this.videoContext.load();
       //document.getElementById('xvideoPlayer').style.display = 'block'
       //this.videoContext=uni.createVideoContext("xvideoPlayer", this);
     },
-			inittime(newVal,oldVal){
+    inittime(newVal, oldVal) {
-				this.initPlayingTime=newVal;
+      this.initPlayingTime = newVal;
       //console.log('inittime::',newVal,oldVal)
     }
   },
   mounted() {
     var _this = this
-			this.initPlayingTime=this.inittime;
+    this.initPlayingTime = this.inittime;
-			this.videoContext=uni.createVideoContext("xvideoPlayer", this);
+    this.videoContext = uni.createVideoContext("xvideoPlayer", this);
     // document.getElementsByTagName('video')[0].load()
     uni.getSystemInfo({
       success: function (info) {
         //alert(info.windowWidth)
-				_this.videoPageWidth=info.windowWidth;
+        _this.videoPageWidth = info.windowWidth;
-				_this.videoPageHeight=info.windowHeight;
+        _this.videoPageHeight = info.windowHeight;
         // 你可以在这里根据窗口高度进行后续操作
       }
     });
-			if(this.xvideoBool) this.dictCode();
+    if (this.xvideoBool) this.dictCode();
 
     // 每一秒更新进度条
     setInterval(() => {
@@ -217,20 +224,20 @@
     }, 1000);
     //绑定全局监听器
     window.addEventListener("touchstart", (e) => {
-				if(this.speedListShow && !e.target.closest('.speed-control')){
+      if (this.speedListShow && !e.target.closest('.speed-control')) {
         this.speedListShow = false
       }
-			},{ passive: false });
+    }, {passive: false});
   },
   methods: {
-				xvideoBoolFun(){
+    xvideoBoolFun() {
       this.xvideoBool = false
     },
     // 获取视频播放器设置开关字典
-				dictCode(){
+    dictCode() {
       var _this = this
-					apiManage.getDictCode('mobile_video_switch').then(res=>{
+      apiManage.getDictCode('mobile_video_switch').then(res => {
-						if(res.code==200 && res.data[0]){
+        if (res.code == 200 && res.data[0]) {
           _this.mobileVideoDragText = res.data[0].name
           _this.mobileVideoDragSwitch = res.data[0].value
         }
@@ -238,13 +245,13 @@
     },
     /* 点击进度条更新视频播放进度
      */
-			    updateProgressByClickBar(type,value) {
+    updateProgressByClickBar(type, value) {
 
       let duration = this.curVideo.duration;
       let second = Math.round(value * duration);
       this.curVideo.currentTime = second;
 
-				   this.sliderValue= value * 100,
+      this.sliderValue = value * 100,
 
           this.druationTime = this.formatSeconds(duration);
       this.currtime = this.formatSeconds(second);
@@ -254,13 +261,13 @@
       // var second= value * duration;
       if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
 
-						if(type === 'start'){
+        if (type === 'start') {
-							this.updateState= false;
+          this.updateState = false;
         }
-						if( type === 'end'){
+        if (type === 'end') {
           this.videoContext.seek(second);
           this.curVideo.currentTime = second;
-							this.updateState= true //完成拖动后允许更新滚动条
+          this.updateState = true //完成拖动后允许更新滚动条
           //alert('value000------:'+value+'---'+this.curVideo.duration)
         }
       }
@@ -271,13 +278,20 @@
       this.isMousedownProgress = value;
     },
     // 全屏+退出全屏
-				fullScreen(){
+    fullScreen() {
+      const u = navigator.userAgent, app = navigator.appVersion;
+      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        document.querySelector("#xvideoPlayer").webkitEnterFullscreen()
+        // return
+        // this.$refs["videoPlayer"].webkitEnterFullscreen()
+      }
       var _this = this
-					if(this.fullScreenFlag){
+      if (this.fullScreenFlag) {
         //this.videoContext.exitFullScreen();
-						this.fullScreenFlag=false;
+        this.fullScreenFlag = false;
         // this.horizontalScreenFlag = true
-						this.videoFullHeight=190
+        this.videoFullHeight = 190
 
         // if(document && document.exitFullscreen){
         // 	document.body.scrollTop = 0; // 对Safari
@@ -285,22 +299,24 @@
         // 	document.exitFullscreen();
         // }
 
-					}else{
+      } else {
         //this.videoContext.requestFullScreen();
-						this.fullScreenFlag=true;
+        this.fullScreenFlag = true;
-						if(document.documentElement.requestFullscreen){
+
+        if (document.documentElement.requestFullscreen) {
           // document.documentElement.requestFullscreen();
-						}else{
+        } else {
-							window.screenTop(0)
+          // window.screenTop(0)
         }
         uni.getSystemInfo({
           success: function (info) {
-						    _this.videoFullHeight=info.windowHeight/2 + 130;
+            _this.videoFullHeight = info.windowHeight / 2 + 130;
             // 你可以在这里根据窗口高度进行后续操作
           }
         });
       }
-          this.$listeners['fullscreenchange'](this.fullScreenFlag)
+      console.log("full screen")
+      !isIOS && this.$listeners['fullscreenchange'](this.fullScreenFlag)
     },
     // // 全屏模式下，横屏+竖屏
     // horizontalScreen(){
@@ -324,16 +340,16 @@
     // },
     // 根据秒获取时间
     formatSeconds(a) {
-					var hh = parseInt(a/3600);  
+      var hh = parseInt(a / 3600);
-					var mm = parseInt((a-hh*3600)/60);  
+      var mm = parseInt((a - hh * 3600) / 60);
-					if(mm<10) mm = "0" + mm;  
+      if (mm < 10) mm = "0" + mm;
-					var ss = parseInt((a-hh*3600)%60);  
+      var ss = parseInt((a - hh * 3600) % 60);
-					if(ss<10) ss = "0" + ss;  
+      if (ss < 10) ss = "0" + ss;
-					if(hh<10) hh = hh == 0?'':`0${hh}:`;  
+      if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
       var length = hh + mm + ":" + ss;
-					if(a>=0){  
+      if (a >= 0) {
         return length;
-					}else{  
+      } else {
         return "00:00";
       }
     },
@@ -343,28 +359,28 @@
       this.videoSpeed = Number(value);
       this.videoContext.playbackRate(this.videoSpeed);
       studyUtil.setVideoSpeed(this.videoSpeed);
-				  this.speedListShow=false;
+      this.speedListShow = false;
     },
-				showSpeedCtrl(){
+    showSpeedCtrl() {
-					if(this.speedListShow){
+      if (this.speedListShow) {
-						this.speedListShow=false;
+        this.speedListShow = false;
-					}else{
+      } else {
-						this.speedListShow=true;
+        this.speedListShow = true;
       }
     },
     //开始+暂停
     videoOpreation() {
       this.playing ? this.videoContext.pause() : this.videoContext.play();
-				    this.playing= !this.playing;
+      this.playing = !this.playing;
     },
     // 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
     videoUpdate(e) {
 
       this.historyTime = e.detail.currentTime
 
-					let duration=this.curVideo.duration;
+      let duration = this.curVideo.duration;
       let sliderValue = e.detail.currentTime / duration * 100;
-					let second=sliderValue / 100 * duration;
+      let second = sliderValue / 100 * duration;
       // console.log('onTimeUpdate11111::',this.drag,second)
       // if(!this.drag){
       // 	this.videoContext.seek(second);
@@ -372,10 +388,9 @@
       // }
 
 
-
       if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
-						this.sliderValue=sliderValue;
+        this.sliderValue = sliderValue;
-					}else{
+      } else {
 
       }
 
@@ -395,12 +410,12 @@
       //  }
       //    }
       // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
-					if(!this.drag){
+      if (!this.drag) {
         var time = localStorage.getItem('videoProgressData')
-						var arr = time&&JSON.parse(time) || {}
+        var arr = time && JSON.parse(time) || {}
-						if(arr[this.blobId] < this.sliderValue/100 || !arr[this.blobId]){
+        if (arr[this.blobId] < this.sliderValue / 100 || !arr[this.blobId]) {
-							arr[this.blobId] = parseFloat((this.sliderValue/100).toFixed(8))
+          arr[this.blobId] = parseFloat((this.sliderValue / 100).toFixed(8))
-							if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr))
+          if (arr[this.blobId]) localStorage.setItem('videoProgressData', JSON.stringify(arr))
         }
       }
 
@@ -408,42 +423,42 @@
     //拖动过程中触发的事件
     sliderChanging(e) {
       //拖拽过程中，不允许更新进度条
-					this.updateState= false;
+      this.updateState = false;
     },
     // 拖动slider完成后触发
     sliderChange(e) {
-					var duration=this.curVideo.duration;
+      var duration = this.curVideo.duration;
-					var second=e.detail.value / 100 * duration;
+      var second = e.detail.value / 100 * duration;
       // alert(e.detail.value + '--slider--'+duration + '--' +second)
       if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
         this.videoContext.seek(second);
-					   this.sliderValue= e.detail.value,
+        this.sliderValue = e.detail.value,
-					   this.updateState= true //完成拖动后允许更新滚动条
+            this.updateState = true //完成拖动后允许更新滚动条
         this.druationTime = this.formatSeconds(duration);
         this.currtime = this.formatSeconds(second);
         //alert('3---this.currtime='+this.currtime)
       }
     },
     onFullScreen(e) {
-					this.fullScreenFlag=e.detail.fullScreen;
+      this.fullScreenFlag = e.detail.fullScreen;
-					let divId='videowatermark';//水印
+      let divId = 'videowatermark';//水印
-					let full=e.detail.fullScreen;
+      let full = e.detail.fullScreen;
-					let divControlId='xplayer-control';
+      let divControlId = 'xplayer-control';
-					let box=document.getElementById('xvideoPlayer-box');
+      let box = document.getElementById('xvideoPlayer-box');
-					let control=document.getElementById(divControlId);
+      let control = document.getElementById(divControlId);
-					let $this=this;
+      let $this = this;
       setTimeout(() => {
         var div = document.getElementById("xvideoPlayer");
         var div1 = div.firstChild;
         //水印
-						if(full){
+        if (full) {
-							if($this.watermark){
+          if ($this.watermark) {
             var div3 = document.createElement("div");
-								div3.id =divId;
+            div3.id = divId;
             div3.setAttribute("class", "fullmark");
-								div3.innerHTML='';
+            div3.innerHTML = '';
-								for(var i=0;i<4;i++){
+            for (var i = 0; i < 4; i++) {
-									div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+$this.userInfo.name+$this.userInfo.code+'</div>';
+              div3.innerHTML += '<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">' + $this.userInfo.name + $this.userInfo.code + '</div>';
             }
             div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
             div1.appendChild(div3);
@@ -451,38 +466,38 @@
           }
           //添加控制条
           div1.appendChild(control);
-						}else{
+        } else {
-							var hasControlDiv=div1.querySelector("#"+divControlId);
+          var hasControlDiv = div1.querySelector("#" + divControlId);
-							if(hasControlDiv){
+          if (hasControlDiv) {
             box.appendChild(hasControlDiv);
           }
-							if($this.watermark){
+          if ($this.watermark) {
-								var markDiv=div1.querySelector("#"+divId);
+            var markDiv = div1.querySelector("#" + divId);
-								if(markDiv){
+            if (markDiv) {
               div1.removeChild(markDiv);
             }
           }
         }
 
-					},200);
+      }, 200);
-					this.$emit('fullscreenchange',e);
+      this.$emit('fullscreenchange', e);
       //this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
       // this.fullScreenFlag ? this.bool=true : this.bool=false;
       //this.fullScreenFlag=!this.fullScreenFlag;
     },
-				error(e){
+    error(e) {
-					console.log(e,'播放错误');
+      console.log(e, '播放错误');
-					this.$emit('error',e);
+      this.$emit('error', e);
     },
-				onTouchend(e){
+    onTouchend(e) {
-					if(this.contrlShowTimeout!=null){
+      if (this.contrlShowTimeout != null) {
         window.clearTimeout(this.contrlShowTimeout);
       }
-					if(!this.fullScreenFlag){
+      if (!this.fullScreenFlag) {
-						this.contrlShow=!this.contrlShow;
+        this.contrlShow = !this.contrlShow;
-					}else{
+      } else {
-						if(!this.contrlShow){
+        if (!this.contrlShow) {
-							this.contrlShow=true;
+          this.contrlShow = true;
         }
       }
       // this.onPlayerPause()
@@ -501,35 +516,35 @@
       // 	this.touchNum = 0
       // },250)
     },
-				onLoad(e){
+    onLoad(e) {
-					this.contrlShow=false;
+      this.contrlShow = false;
-					this.$emit('loadeddata',e);
+      this.$emit('loadeddata', e);
     },
-				onMetaLoad(e){
+    onMetaLoad(e) {
-					this.curVideo.duration=Number(e.detail.duration);
+      this.curVideo.duration = Number(e.detail.duration);
       this.druationTime = this.formatSeconds(this.curVideo.duration);
-					this.contrlShow=true;
+      this.contrlShow = true;
-					this.$emit('loadedmetadata',e);
+      this.$emit('loadedmetadata', e);
     },
-				onControlsToggle(e){
+    onControlsToggle(e) {
-					console.log(e,"ControlsToggle");
+      console.log(e, "ControlsToggle");
     },
     // 开始
-				onPlay(){
+    onPlay() {
       this.videoContext.play();
-					this.playing=true;
+      this.playing = true;
-					let $this=this;
+      let $this = this;
-					if(this.contrlShow){
+      if (this.contrlShow) {
-						this.contrlShowTimeout=window.setTimeout(function(){
+        this.contrlShowTimeout = window.setTimeout(function () {
-							$this.contrlShow=false;
+          $this.contrlShow = false;
-						},5000);
+        }, 5000);
       }
       this.$emit('play')
     },
-				onTimeUpdate(e){
+    onTimeUpdate(e) {
       this.currtimeText = this.currtimeText + 1
       this.videoUpdate(e);
-					this.$emit('timeupdate',e)
+      this.$emit('timeupdate', e)
     },
     /* 更新视频进度的文字显示
      */
@@ -541,7 +556,7 @@
     /* 时间格式化，秒格式化成xx:xx:xx
      */
     secondTimeFormat(second) {
-					if(second<0) second = 0;
+      if (second < 0) second = 0;
       let result = parseInt(second);
       let h =
           Math.floor(result / 3600) < 10
@@ -559,27 +574,28 @@
       return result;
     },
     onPause() {
-					this.playing=false;
+      this.playing = false;
       this.$emit('pause')
     },
-				onEnded(){
+    onEnded() {
-					this.playing=false;
+      this.playing = false;
-					if(this.fullScreenFlag){
+      if (this.fullScreenFlag) {
         this.fullScreen()
       }
       this.$emit('ended')
     }
   }
-	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.video-box{
+.video-box {
   width: 100%;
   height: 100%;
   position: relative;
-	}
+}
-	.video-box-error{
+
+.video-box-error {
   width: 100%;
   height: 110px;
   padding: 55px 0;
@@ -588,8 +604,9 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-	}
+}
-	.video-full-screen{
+
+.video-full-screen {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -597,88 +614,103 @@
   z-index: 9999999;
   display: flex;
   align-items: center;
-	}
+}
-	.video-scree-rotate{
+
+.video-scree-rotate {
   transform: rotate(90deg);
   // width: 100vw;
   // height: 100vh;
   position: fixed;
-	}
+}
-	.screen{
+
+.screen {
   position: relative;
-	}
+}
-	.screen-full{
+
-		position:static;
+.screen-full {
-	}
+  position: static;
-	.process-container{
+}
-		width:100%;
+
-		padding:1% 2% 1% 2%;
+.process-container {
-		height:60rpx;
+  width: 100%;
-		max-height:60rpx;
+  padding: 1% 2% 1% 2%;
-		position:absolute;
+  height: 60rpx;
-		bottom:0rpx;
+  max-height: 60rpx;
-		color:#ffffff;
+  position: absolute;
-		left:0;
+  bottom: 0rpx;
-		right:0;
+  color: #ffffff;
-		z-index:9999;
+  left: 0;
-		display:flex;
+  right: 0;
+  z-index: 9999;
+  display: flex;
   align-items: center;
-		background:rgba(59, 57, 57, 0.2);
+  background: rgba(59, 57, 57, 0.2);
-	}
+}
-	.process-container image{
+
-		max-width:30rpx;
+.process-container image {
-		max-height:30rpx;
+  max-width: 30rpx;
-		text-align:center;
+  max-height: 30rpx;
-	}
+  text-align: center;
-	.slider-container{
+}
-	  z-index:13;
+
-	  height:60rpx;
+.slider-container {
-	  margin-bottom:10rpx;
+  z-index: 13;
-	  flex:6;
+  height: 60rpx;
-	  max-width:50%;
+  margin-bottom: 10rpx;
-	}
+  flex: 6;
-	.slider-container.new-bar{
+  max-width: 50%;
+}
+
+.slider-container.new-bar {
   margin: 7px 10px 10px 10px;
-	}
+}
-	.controller-play{
+
+.controller-play {
   width: 8%;
-	}
+}
-	.controller-screen{
+
+.controller-screen {
   // width: 10%;
-	}
+}
-	.currtime{
+
+.currtime {
   color: #ffffff;
   font-size: 22rpx;
   width: 11%;
   height: 100%;
   line-height: 60rpx;
   text-align: center;
-	}
+}
-	.druationTime{
+
+.druationTime {
   color: #ffffff;
   font-size: 22rpx;
   width: 12%;
   height: 100%;
   line-height: 60rpx;
   text-align: center;
-	}
+}
-	.player-speed{
+
+.player-speed {
   position: relative;
   color: #e5e5e5;
   padding: 0 0.4rem;
   transition: color 0.3s;
   height: 22px;
-	}
+}
-	.btn-speed:hover .speed-control {
+
+.btn-speed:hover .speed-control {
   // visibility: visible;
-	}
+}
-	.speed-control {
+
+.speed-control {
   position: absolute;
   //top: 180px;
   transition: visibility 0.3s;
   transform: translate(-50%, -100%);
-	}
+}
-	.speed-control .speed-control-list {
+
+.speed-control .speed-control-list {
   list-style: none;
   color: #e5e5e5;
   width: 50px;
@@ -689,20 +721,23 @@
   overflow: hidden;
   border-radius: 4px;
   background: rgba(21, 21, 21, 0.8);
-	}
+}
-	.speed-control .speed-control-list .li {
+
+.speed-control .speed-control-list .li {
   position: relative;
   display: block;
   height: 25px;
   line-height: 25px;
-	}
+}
-	.speed-control .speed-control-list .li:hover {
+
+.speed-control .speed-control-list .li:hover {
   color: #fff;
   background: rgba(99, 99, 99, 0.8);
-	}
+}
-	.speed-control .speed-control-list .li.current {
+
+.speed-control .speed-control-list .li.current {
   color: var(--primaryColor);
-	}
+}
 
 
 </style>

pages/study/examDetail.vue

@@ -5,29 +5,32 @@
     <page-title :showBack="true">查看我的答卷</page-title>
     <view style="background-color: #FFFFFF;">
       <u-cell-group>
-				<u-cell title="答卷时间" :value="lastTime"></u-cell>
+        <u-cell title="答卷时间" :value="answerSurveyTime"></u-cell>
         <u-cell title="答卷用时" :value="testDuration+'秒'"></u-cell>
         <u-cell title="本次得分" :value="score"></u-cell>
       </u-cell-group>
     </view>
     <view style="padding: 20upx;">
-		    <view style="padding-top: 10upx;color: #757575; ">第{{curIndex+1}}题 / 共{{total}}题</view>
+      <view style="padding-top: 10upx;color: #757575; ">第{{ curIndex + 1 }}题 / 共{{ total }}题</view>
     </view>
     <view class="qitem">
       <view class="qitem-content">
-				<view>[{{getTypeName(curItem.type)}}]{{curItem.content}}</view> 
+        <view>[{{ getTypeName(curItem.type) }}]{{ curItem.content }}</view>
         <view class="qimg" v-if="curItem.images"><img class="qimg-fit" :src="imageBaseUrl+curItem.images"/></view>
       </view>
-            <view v-for="(opt,optIdx) in curItem.options" :key="optIdx" class="qitem-opt" :class="{'qitem-opt-user':userOptIdxs.indexOf(optIdx)>-1}">
+      <view v-for="(opt,optIdx) in curItem.options" :key="optIdx" class="qitem-opt"
+            :class="{'qitem-opt-user':userOptIdxs.indexOf(optIdx)>-1}">
         <view>
-                    <view>{{toLetter(optIdx+1)}}, {{opt.content}}</view>
+          <view>{{ toLetter(optIdx + 1) }}, {{ opt.content }}</view>
           <view v-if="opt.images" class="qimg">
             <img class="qimg-fit" :src="imageBaseUrl+opt.images"/>
           </view>
         </view>
         <view>
-					<text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00; ">√</text>
+          <text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00; ">√
-					<text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000; ">×</text>
+          </text>
+          <text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000; ">×
+          </text>
         </view>
       </view>
     </view>
@@ -41,13 +44,13 @@
         <view class="correct-response">
           <view class="response-tit">正确答案</view>
           <view class="response-sels">
-						<text v-for="op in correctOptIdxs" :key="op">{{toLetter(op+1)}}</text>
+            <text v-for="op in correctOptIdxs" :key="op">{{ toLetter(op + 1) }}</text>
           </view>
         </view>
         <view class="wrong-response">
           <view class="wrong-tit">我的答案</view>
           <view class="wrong-sels">
-						<text v-for="op in userOptIdxs" :key="op">{{toLetter(op+1)}}</text>
+            <text v-for="op in userOptIdxs" :key="op">{{ toLetter(op + 1) }}</text>
           </view>
         </view>
       </view>
@@ -56,135 +59,148 @@
     <view class="analysis-con">联言判断就是断定集中事物情况同时存在的判断,因此该判断属于联言判断,答案为A</view> -->
     <view class="bottom-btns">
       <u-button type="info" text="上一题" @click="prevSub" class="next" :disabled="this.curIndex<1"></u-button>
-            <u-button type="info" text="下一题" @click="nextSub" class="next" :disabled="this.curIndex>=(this.total-1)"></u-button>
+      <u-button type="info" text="下一题" @click="nextSub" class="next"
+                :disabled="this.curIndex>=(this.total-1)"></u-button>
     </view>
   </view>
 </template>
 
 <script>
-	import config from '@/config/index.js'
+import config from '@/config/index.js'
-	import apiCourseStudy from '@/api/modules/courseStudy.js'
+import apiCourseStudy from '@/api/modules/courseStudy.js'
-	import {formatDate,getQuestionType,correctJudgment,numberToLetter} from '@/utils/tools.js';
+import {formatDate, getQuestionType, correctJudgment, numberToLetter} from '@/utils/tools.js';
-    export default {
+
+export default {
   data() {
     return {
-				recordId:'',//保存的考试记录的id
+      recordId: '',//保存的考试记录的id
-				toLetter:numberToLetter,
+      toLetter: numberToLetter,
-				getTypeName:getQuestionType,
+      getTypeName: getQuestionType,
-				imageBaseUrl:config.fileUrl,
+      imageBaseUrl: config.fileUrl,
-				paper:{
+      paper: {
-					items:[]
+        items: []
       },
-				total:0,
+      total: 0,
-				curIndex:0,//当前试题索引
+      curIndex: 0,//当前试题索引
-				curItem:{},//当前试题
+      curItem: {},//当前试题
-				curResult:false,//答案正确
+      curResult: false,//答案正确
-				score:0,//本次试卷的得分
+      score: 0,//本次试卷的得分
-				testName:'',
+      testName: '',
-				contentId:'',
+      contentId: '',
-				courseId:'',
+      courseId: '',
-				passLine:60,
+      passLine: 60,
-				testDuration:0,
+      testDuration: 0,
-				lastTime:'',
+      lastTime: '',
-				correctOptIdxs:[],//正确的答案
+      correctOptIdxs: [],//正确的答案
-				userOptIdxs:[],//用户的答案
+      userOptIdxs: [],//用户的答案
     }
   },
-		onLoad(options){
+  computed: {
+    answerSurveyTime() {
+      console.log(`answer time: ` , this.lastTime)
+      if (!this.lastTime.length) return "Error Date"
+      const [y, m, d, h, min, s] = this.lastTime
+      return `${y}年${m}月${d}日 ${h}:${min}:${s}`
+    }
+  },
+  onLoad(options) {
     //如果id不存在，应该返回错误页面
-			this.recordId=options.id;//当前考试记录的id
+    this.recordId = options.id;//当前考试记录的id
-			if(this.recordId){
+    if (this.recordId) {
       this.loadAnswerPaper();
     }
   },
-		methods:{
+  methods: {
-			loadAnswerPaper(){
+    loadAnswerPaper() {
-				apiCourseStudy.myExamPaper(this.recordId).then(res=>{
+      apiCourseStudy.myExamPaper(this.recordId).then(res => {
-					if(res.status==200){
+        if (res.status == 200) {
-						this.lastTime=res.result.lastTime;
+          this.lastTime = res.result.lastTime;
-						this.score=res.result.score;
+          this.score = res.result.score;
-						this.contentId=res.result.contentId;
+          this.contentId = res.result.contentId;
-						this.courseId=res.result.courseId;
+          this.courseId = res.result.courseId;
-						this.passLine=res.result.passLine;
+          this.passLine = res.result.passLine;
-						this.testDuration=res.result.testDuration;
+          this.testDuration = res.result.testDuration;
-						if(res.result.paper==''){
+          if (res.result.paper == '') {
-							this.$refs.messager.show({message:res.message,type:'error'});
+            this.$refs.messager.show({message: res.message, type: 'error'});
-						}else{
+          } else {
-							this.paper=JSON.parse(res.result.paper);
+            this.paper = JSON.parse(res.result.paper);
-							this.total=this.paper.items.length;
+            this.total = this.paper.items.length;
-							this.curItem=this.paper.items[this.curIndex];
+            this.curItem = this.paper.items[this.curIndex];
             this.judgeAnswer();
           }
-					}else{
+        } else {
-						this.$refs.messager.show({message:res.message,type:'error'});
+          this.$refs.messager.show({message: res.message, type: 'error'});
         }
       })
     },
-			judgeAnswer(){
+    judgeAnswer() {
       //正确答案和错误答案
-				this.correctOptIdxs=[];//正确答案
+      this.correctOptIdxs = [];//正确答案
-				this.userOptIdxs=[];//用户的答案
+      this.userOptIdxs = [];//用户的答案
 
-				let $this=this;
+      let $this = this;
-				let item=this.curItem;
+      let item = this.curItem;
-				item.options.forEach((opt,idx)=>{
+      item.options.forEach((opt, idx) => {
         //填充正确答案
-					if(opt.answer){
+        if (opt.answer) {
           $this.correctOptIdxs.push(idx);
         }
-					if(item.type!=102){ //单选或判断
+        if (item.type != 102) { //单选或判断
-						if(opt.id==item.userAnswer){
+          if (opt.id == item.userAnswer) {
             $this.userOptIdxs.push(idx);
           }
-					}else{ //多选
+        } else { //多选
-						if(item.userAnswer.indexOf(opt.id)>-1){
+          if (item.userAnswer.indexOf(opt.id) > -1) {
             $this.userOptIdxs.push(idx);
           }
         }
       });
       //判断答案是否正确
-				if(this.correctOptIdxs.toString()==this.userOptIdxs.toString()){
+      if (this.correctOptIdxs.toString() == this.userOptIdxs.toString()) {
-					this.curResult=true;
+        this.curResult = true;
-				}else{
+      } else {
-					this.curResult=false;
+        this.curResult = false;
       }
     },
-			prevSub(){
+    prevSub() {
-				if(this.curIndex==0){
+      if (this.curIndex == 0) {
         return;
       }
       this.curIndex--;
-				if(this.curIndex>-1){
+      if (this.curIndex > -1) {
-					this.curItem=this.paper.items[this.curIndex];
+        this.curItem = this.paper.items[this.curIndex];
         this.judgeAnswer();
       }
     },
     nextSub() {
       this.curIndex++;
-				if(this.curIndex<this.total){
+      if (this.curIndex < this.total) {
-					this.curItem=this.paper.items[this.curIndex];
+        this.curItem = this.paper.items[this.curIndex];
         this.judgeAnswer();
       }
     },
   }
-    }
+}
 </script>
 
 <style lang="scss" scoped>
-	.bottom-btns{
+.bottom-btns {
   padding: 10px;
   position: fixed;
   width: 100%;
   bottom: 0px;
   display: flex;
   justify-content: space-around;
-	}
+}
-	.qitem{
+
+.qitem {
   padding: 20upx 40upx;
-		.qitem-content{
+
+  .qitem-content {
     padding: 20upx 0upx;
   }
-		.qitem-opt{
+
+  .qitem-opt {
     margin-bottom: 20upx;
     min-height: 50upx;
     border-radius: 4px;
@@ -193,40 +209,48 @@
     justify-content: space-between;
     padding: 30upx 20upx;
   }
-		.qitem-opt-user{
+
+  .qitem-opt-user {
     background-color: #fff3e5;
   }
-		.qitem-opt-correct{
+
+  .qitem-opt-correct {
     background-color: #5BA2FC;
-			color:#FFFFFF;
+    color: #FFFFFF;
   }
-		.qitem-opt-wrong{
+
+  .qitem-opt-wrong {
     background-color: #EF826B;
-			color:#FFFFFF;
+    color: #FFFFFF;
   }
-	}
+}
-    .ed-top{
+
+.ed-top {
   display: flex;
-        .preface{
+
+  .preface {
     color: #D5D5D5;
     margin-left: 16px;
     margin-top: 19px;
   }
-        .mold{
+
+  .mold {
     font-size: 12px;
     color: #C1C1C1;
     margin-top: 22px;
     margin-left: 5px;
   }
-    }
+}
-    .ed-center{
+
-        .topic{
+.ed-center {
+  .topic {
     color: #2E2E2E;
     margin-left: 16px;
     margin-top: 10px;
   }
-        .topic-center{
+
-            &-1{
+  .topic-center {
+    &-1 {
       width: 344px;
       height: 64px;
       border-radius: 4px;
@@ -235,23 +259,27 @@
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
-                .topic_left{
+
+      .topic_left {
         line-height: 64px;
         margin-left: 16px;
         color: #FFFFFF;
         display: flex;
-                    .liany{
+
+        .liany {
           font-size: 12px;
           margin-left: 5px;
         }
       }
-                .topic_right{
+
+      .topic_right {
         color: #FFFFFF;
         line-height: 64px;
         margin-right: 13px;
       }
     }
-            &-2{
+
+    &-2 {
       width: 344px;
       height: 64px;
       border-radius: 4px;
@@ -260,23 +288,27 @@
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
-                .topic_left{
+
+      .topic_left {
         line-height: 64px;
         margin-left: 16px;
         color: #FFFFFF;
         display: flex;
-                    .liany{
+
+        .liany {
           font-size: 12px;
           margin-left: 5px;
         }
       }
-                .topic_right{
+
+      .topic_right {
         color: #FFFFFF;
         line-height: 64px;
         margin-right: 13px;
       }
     }
-            &-3{
+
+    &-3 {
       width: 344px;
       height: 64px;
       border-radius: 4px;
@@ -285,23 +317,27 @@
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
-                .topic_left{
+
+      .topic_left {
         line-height: 64px;
         margin-left: 16px;
         color: #000000;
         display: flex;
-                    .liany{
+
+        .liany {
           font-size: 12px;
           margin-left: 5px;
         }
       }
-                .topic_right{
+
+      .topic_right {
         color: #000000;
         line-height: 64px;
         margin-right: 13px;
       }
     }
-            &-4{
+
+    &-4 {
       width: 344px;
       height: 64px;
       border-radius: 4px;
@@ -310,17 +346,20 @@
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
-                .topic_left{
+
+      .topic_left {
         line-height: 64px;
         margin-left: 16px;
         color: #000000;
         display: flex;
-                    .liany{
+
+        .liany {
           font-size: 12px;
           margin-left: 5px;
         }
       }
-                .topic_right{
+
+      .topic_right {
         color: #000000;
         line-height: 64px;
         margin-right: 13px;
@@ -328,86 +367,101 @@
     }
 
   }
-    }
+}
-    .tit{
+
+.tit {
   color: #333333;
   margin-left: 14px;
   margin-top: 38px;
-    }
+}
-    .answer{
+
+.answer {
   width: 346px;
   height: 112px;
   background: #FFFFFF;
   margin-left: 14px;
   margin-top: 18px;
-        .result{
+
+  .result {
     font-size: 12px;
     color: #EF826B;
     padding-left: 20px;
     padding-top: 10px;
   }
-        .wrought{
+
+  .wrought {
     display: flex;
-            .correct-response{
+
+    .correct-response {
       width: 87px;
       height: 70px;
-                .response-tit{
+
+      .response-tit {
         font-size: 14px;
         color: #B3B3B3;
         text-align: center;
         padding-top: 10px;
       }
-                .response-sels{
+
+      .response-sels {
         color: #5B5B5B;
         text-align: center;
         padding-top: 8px;
       }
     }
-            .wrong-response{
+
+    .wrong-response {
       width: 87px;
       height: 70px;
-                .wrong-tit{
+
+      .wrong-tit {
         font-size: 14px;
         color: #B3B3B3;
         text-align: center;
         padding-top: 10px;
       }
-                .wrong-sels{
+
+      .wrong-sels {
         color: #5B5B5B;
         text-align: center;
         padding-top: 8px;
       }
     }
   }
-    }
+}
-    .analysis{
+
+.analysis {
   font-size: 14px;
   color: #D3D3D3;
   margin-left: 14px;
   margin-top: 20px;
-    }
+}
-    .analysis-con{
+
+.analysis-con {
   font-size: 12px;
   color: #000000;
   margin-left: 14px;
   margin-top: 10px;
-    }
+}
-    .question{
+
+.question {
   height: 52px;
   background: #EF826B;
   margin-top: 93px;
   color: #FFFFFF;
   text-align: center;
   line-height: 52px;
-    }
+}
-	.qimg{
-	  //padding-left: 30px;
-	  width:100%;
-	  text-align: left;
-	  .qimg-fit{
-	    width:100%;
 
-	    object-fit:scale-down
+.qimg {
-	  }
+  //padding-left: 30px;
+  width: 100%;
+  text-align: left;
+
+  .qimg-fit {
+    width: 100%;
+
+    object-fit: scale-down
   }
+}
 </style>