From fe310b2a71f3108e7974619d361784c03267dfd1 Mon Sep 17 00:00:00 2001
From: joshen <445497689@qq.com>
Date: Mon, 24 Jun 2024 08:40:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E7=A6=81=E6=AD=A2?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=E8=AE=BE=E7=BD=AE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/video-player/progress-bar.vue | 40 ++++++++++-------
 components/video-player/video-player.vue | 55 +++++++++++++-----------
 pages/study/courseStudy.vue              |  4 +-
 3 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/components/video-player/progress-bar.vue b/components/video-player/progress-bar.vue
index 106ed7f..783d9ee 100644
--- a/components/video-player/progress-bar.vue
+++ b/components/video-player/progress-bar.vue
@@ -8,9 +8,9 @@
   <div
     class="progress-bar"
     :style="{width: width}"
-    @mousedown.left="down"
-    @mousemove="move"
-    @mouseup="up"
+    @touchstart.left="start"
+    @touchmove="move"
+    @touchend="up"
   >
     <div class="progress-full" :style="{height: height}">
       <div class="progress-current" :style="{width: currentProgress + '%'}"></div>
@@ -56,13 +56,22 @@ export default {
     //初始化一些固定数据
     let dom_full = this.$el.getElementsByClassName("progress-full")[0];
     this.dom_full = dom_full;
+	// window.addEventListener("touchstart", (e) => {
+	// 	console.log("touchstart::",this.is_mousedown_progress)
+	//   //if (this.is_mousedown_progress) {
+	//     this.down(e);
+	//   //}
+	// });
     //绑定全局监听器
     window.addEventListener("touchmove", (e) => {
+		console.log("touchmove::",this.is_mousedown_progress)
       if (this.is_mousedown_progress) {
-        this.move(e);
+			this.move(e);
+			e.preventDefault();
       }
-    });
+    },{ passive: false });
     window.addEventListener("touchend", (e) => {
+		console.log("touchend::",this.is_mousedown_progress)
       this.up(e);
     });
   },
@@ -70,35 +79,34 @@ export default {
     //
   },
   methods: {
-    down(e) {
-        
+    start(e) {
         this.$emit("getMouseDownStatus", true);
         this.is_mousedown_progress = true;
         // 获取完整进度条的clientX（dom左上角）
         let init_clientX = this.dom_full.getBoundingClientRect().left;
         // 计算调整后的当前进度条的长度
-        this.current_width_px = e.clientX - init_clientX;
+        this.current_width_px = e.touches[0].clientX - init_clientX;
         // 设置当前的播放进度（同时作用于当前进度条的样式）
-        let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
+        let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
         var time = localStorage.getItem('videoProgressData');
         var arr = time&&JSON.parse(time) || {}
-		console.log('down::',this.isDrag,time,arr[this.blobId] ,current)
+		console.log('start::',e,this.isDrag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth)
         // 禁止拖动
         if(!this.isDrag && time && arr[this.blobId] < current) return;
 
-        this.$emit("updateProgress", current);
+        this.$emit("updateProgress",'start', current);
     },
     move(e) {
       if (this.is_mousedown_progress) {
         let init_clientX = this.dom_full.getBoundingClientRect().left;
-        this.current_width_px = e.clientX - init_clientX;
-        let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
+        this.current_width_px = e.touches[0].clientX - init_clientX;
+        let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
         var time = localStorage.getItem('videoProgressData');
         var arr = time&&JSON.parse(time) || {}
-		console.log('move::',this.isDrag,time,arr[this.blobId] ,current)
+		console.log('move::',e,this.isDrag,time,arr[this.blobId] ,current)
         // 禁止拖动
         if(!this.isDrag && time && arr[this.blobId] < current) return;
-        this.$emit("updateProgress", current);
+        this.$emit("updateProgress",'move', current);
       }
     },
     up() {
@@ -113,7 +121,7 @@ export default {
 		console.log('up::',this.isDrag,time,arr[this.blobId] ,current)
         // 禁止拖动
         if(!this.isDrag && time && arr[this.blobId] < current) return;
-        this.$emit("updateProgress", current);
+        this.$emit("updateProgress",'end', current);
         
       }
     },
diff --git a/components/video-player/video-player.vue b/components/video-player/video-player.vue
index 9e9e2c5..5359ea5 100644
--- a/components/video-player/video-player.vue
+++ b/components/video-player/video-player.vue
@@ -22,11 +22,12 @@
 					<image :src="require(playing? './images/pause.png':'./images/play.png')"  @click.stop='videoOpreation'/>
 				</view>
 				<view class="currtime">{{currtime}}</view>
-				<!-- <cover-view v-if="drag" class='slider-container'>
+				  <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"/>
-					<slider v-if="!drag"  disabled="true" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
-				</cover-view> v-if="!drag"  -->
-				<view class='slider-container new-bar'>
+					
+					<!-- <slider v-if="!drag"  disabled="true" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/> -->
+				 </cover-view> 
+				<view v-if="!drag" class='slider-container new-bar'>
 		          	<progressBar 
 			            :currentProgress="sliderValue"
 						:blobId="blobId"
@@ -139,28 +140,30 @@
 		methods: {
 			    /* 点击进度条更新视频播放进度
 			     */
-			    updateProgressByClickBar(value) {
-			    	console.log('value------:',value)
-			      let duration = this.curVideo.duration;
-			      
-			      let new_current_time = Math.round(value * duration);
-			      // this.barrageTimelineStart = new_current_time;
-			      this.curVideo.currentTime = new_current_time;
-			      this.sliderValue = value * 100;
-			      this.videoContext.seek(new_current_time);
-
-
+			    updateProgressByClickBar(type,value) {
+			    	
+					let duration = this.curVideo.duration;
+					let second = Math.round(value * duration);
+					this.curVideo.currentTime = second;
+				
+				   this.sliderValue= value * 100,
+				   
+				   this.druationTime = this.formatSeconds(duration);
+				   this.currtime = this.formatSeconds(second);
 					// var duration=this.curVideo.duration;
-					// var second=e.detail.value / 100 * duration;
-					// if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
-					//    this.videoContext.seek(second);
-					//    this.sliderValue= e.detail.value,
-					//    this.updateState= true //完成拖动后允许更新滚动条
-					//    this.druationTime = this.formatSeconds(duration);
-					//    this.currtime = this.formatSeconds(second);
-					// }
-
-
+					// var second= value * duration;
+					if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
+					   
+						if(type === 'start'){
+							this.updateState= false;
+						}
+					   if( type === 'end'){
+							this.videoContext.seek(second);
+							this.curVideo.currentTime = second;
+							this.updateState= true //完成拖动后允许更新滚动条
+							//alert('value000------:'+value+'---'+this.curVideo.duration)
+					   }
+					}
 			    },
 			    /* 获取鼠标是否按下了进度条
 			     */
@@ -220,7 +223,6 @@
 					let duration=this.curVideo.duration;
 					let sliderValue = e.detail.currentTime / duration * 100;
 					let second=sliderValue / 100 * duration;
-
 					// console.log('onTimeUpdate11111::',this.drag,second)
 					// if(!this.drag){
 					// 	this.videoContext.seek(second);
@@ -268,6 +270,7 @@
 				sliderChange(e) {
 					var duration=this.curVideo.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,
diff --git a/pages/study/courseStudy.vue b/pages/study/courseStudy.vue
index 7475aea..9b49596 100644
--- a/pages/study/courseStudy.vue
+++ b/pages/study/courseStudy.vue
@@ -1591,7 +1591,7 @@
 					if(!this.curriculumData.isDrag && this.curContent.progressVideo !=1){
 					  var time = localStorage.getItem('videoProgressData')
 					  var arr = time&&JSON.parse(time) || {}
-					  if(arr[this.blobId]) {
+					  if(arr[this.blobId] && this.curContent.progressVideo<arr[this.blobId]) {
 						postData.progressVideo = arr[this.blobId]
 						postData.contentId = this.curContent.id
 						postData.courseId = this.curContent.courseId
@@ -1672,7 +1672,7 @@
 					if(!this.curriculumData.isDrag && this.curContent.progressVideo !=1){
 					  var time = localStorage.getItem('videoProgressData')
 					  var arr = time&&JSON.parse(time) || {}
-					  if(arr[this.blobId]) {
+					  if(arr[this.blobId] && this.curContent.progressVideo<arr[this.blobId]) {
 						postData.progressVideo = arr[this.blobId]
 						postData.contentId = this.curContent.id
 						postData.courseId = this.curContent.courseId