From b457ed73bd9bff04ef10ad91cb8ed1d09f44fd33 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 22 Oct 2021 13:02:51 +0800
Subject: [PATCH] record

---
 client_mp/common/http.api.js             |   2 +-
 client_mp/pages/my/videoWatchRecords.vue |  41 +++--
 client_mp/pages/vod/video.vue            |  10 +-
 client_mp/pages/vod/watchPage.vue        | 187 +++++++++++++++++++++--
 client_mp/video.vue                      |   4 +-
 5 files changed, 205 insertions(+), 39 deletions(-)

diff --git a/client_mp/common/http.api.js b/client_mp/common/http.api.js
index cc6265c..c82e0f4 100644
--- a/client_mp/common/http.api.js
+++ b/client_mp/common/http.api.js
@@ -47,7 +47,7 @@ const install = (Vue, vm) => {
 	
 	let putMyVideoView =(id,params)=>vm.$u.put(`/vod/video/${id}/myview/`,params);//更新本人观看信息
 	
-	let getMyVideoRecord =(id)=>vm.$u.get(`/vod/video/myview/`);//获取本人观看记录
+	let getMyVideoRecord =(params)=>vm.$u.get(`/vod/video/myview/`,params);//获取本人观看记录
 	let getVideoRecord =(id)=>vm.$u.get(`/vod/video/${id}/myview/`);//获取本人观看记录
 	vm.$u.api = {getUserInfo, 
 				getCode,
diff --git a/client_mp/pages/my/videoWatchRecords.vue b/client_mp/pages/my/videoWatchRecords.vue
index 6047083..10747ad 100644
--- a/client_mp/pages/my/videoWatchRecords.vue
+++ b/client_mp/pages/my/videoWatchRecords.vue
@@ -1,23 +1,15 @@
 <template>
 	<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
 		@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
-		@scrolltolower="swiperScrollLower">
+		@scrolltolower="swiperScrollLower" >
 		<uni-list>
 			<uni-list-item :title="item.video_.name" :note="'上次观看时间:'+item.update_time"  thumb-size="lg"
 				rightText="继续观看" v-for="item in dataList" :key="item.id" @click="plauVideo(item)" link></uni-list-item>
-				<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
+				
 		</uni-list>
-		<!-- <view v-for="item in dataList" style="display: flex   ; padding: 24rpx 30rpx;font-size: 28rpx;color: #3b4144;border-bottom: 1px solid #dcdcdc;">
-			<view class="leftAction" style="flex: 3;">
-				<view>{{item.video_.name}}</view>
-				<view style="margin-top: 6rpx;  color: #999; font-size: 24rpx;">上次观看进度:</view>
-				<view style="margin-top: 6rpx;  color: #999; font-size: 24rpx;">上次观看时间:{{item.update_time}}</view>
-			</view>
-			<view class="rightAction" style="flex: 1;    display: flex; flex-direction: column;justify-content: space-around;">
-				<a class="mui-navigate-right" style=" color: #999; font-size: 24rpx;">继续观看</a><image src="../../static/common/right_err.png"></image>
-			</view>
-		</view> -->
+		<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
 	</scroll-view>	
+	
 </template>
 
 <script>
@@ -25,7 +17,9 @@
 		data() {
 			return {
 				page:1,
+				page_size:10,
 				dataList: [],
+				loadingText:'',
 				refreStatus: false,
 			}
 		},
@@ -33,10 +27,6 @@
 
             this.page = 1;
 			this.getLists();
-			//this.$u.api.getMyVideoRecord({}).then(res => {
-			//	this.dataList = res.data.results;
-			//	console.log(res.data.results)
-			//})
 		},
 		methods: {
 			plauVideo(item){
@@ -51,18 +41,20 @@
 				this.getLists()
 			},
 			swiperScrollLower() {
-				
 				this.page = this.page + 1;
 				this.getLists()
 			},
 			getLists(){
+				// debugger;
+				console.log(this.page)
 				var params = {
-					page: this.page
+					page: this.page,
+					page_size:10
 				}
 				this.$u.api.getMyVideoRecord(params).then(res => {
 					this.refreStatus = false
-					let results = res.data.results
-					
+					let results = res.data.results;
+					// debugger;
 					if (this.page == 1) {
 						if (results == 0) {
 							this.loadingText = '暂无观看记录'
@@ -71,8 +63,11 @@
 							this.dataList = results
 						}
 					} else {
+						// debugger;
 						this.loadingText = ''
-						this.dataList.concat(results)
+						let a = this.dataList.concat(results);
+						console.log(a)
+						this.dataList=a;
 					}
 				
 				}).catch(res => {
@@ -89,4 +84,8 @@
 </script>
 
 <style>
+	
+	.swiper-scroll {
+		height: calc(100vh - 40upx);
+	}
 </style>
diff --git a/client_mp/pages/vod/video.vue b/client_mp/pages/vod/video.vue
index 43efd7c..720d874 100644
--- a/client_mp/pages/vod/video.vue
+++ b/client_mp/pages/vod/video.vue
@@ -124,11 +124,11 @@
 		},
 		methods: {
 			videoOpen(video){
-				// debugger;
-				// console.log(video)
+				debugger;
+				console.log(video)
 			
 				uni.navigateTo({
-					url: '/pages/vod/watchPage?id='+video.id
+					url: '/pages/vod/watchPage?id='+video.id+'&url='+video.mediaurl
 				});
 			},
 			closeVideo(){
@@ -245,7 +245,9 @@
 						}
 					} else {
 						this.loadingText = ''
-						this.list[swiperIndex].content.concat(results)
+						let a = this.list[swiperIndex].content;
+						let b= a.concat(results);
+						this.list[swiperIndex].content=b;
 					}
 
 				}).catch(res => {
diff --git a/client_mp/pages/vod/watchPage.vue b/client_mp/pages/vod/watchPage.vue
index 00af809..b0ba83d 100644
--- a/client_mp/pages/vod/watchPage.vue
+++ b/client_mp/pages/vod/watchPage.vue
@@ -1,7 +1,37 @@
 <template>
 	<view>
-		<video class="video" :src="item.mediaurl" controls object-fit="cover"
+		<!-- <view v-show="already" class="markBlock" ref="mydom"> -->
+		<view v-show="already" :style="{height:ReadyHeight+'px'}" class="markBlock">
+			<view style="">
+				<view class="">
+					<view class="spinner">
+					  <view class="spinner-container container1">
+						<view class="circle1"></view>
+						<view class="circle2"></view>
+						<view class="circle3"></view>
+						<view class="circle4"></view>
+					  </view>
+					  <view class="spinner-container container2">
+						<view class="circle1"></view>
+						<view class="circle2"></view>
+						<view class="circle3"></view>
+						<view class="circle4"></view>
+					  </view>
+					  <view class="spinner-container container3">
+						<view class="circle1"></view>
+						<view class="circle2"></view>
+						<view class="circle3"></view>
+						<view class="circle4"></view>
+					  </view>
+					</view>
+				</view>
+				资源缓冲中，请稍后...
+			</view>
+			 
+		</view>
+		<video class="video" :src="url" controls object-fit="cover"
 			id="videoPlayer" :poster="item.coverurl" @play="doPlay($event)"
+			 @loadedmetadata="alreadyLoad"
 			:initial-time="current" style="width: 100%;" @timeupdate="timeupdate($event)"
 			@pause="doPlay($event)" @ended="doPlay($event)">
 		</video>
@@ -12,32 +42,45 @@
 export default {
 		data() {
 			return {
+				url:'',
 				item: {},
+				ReadyHeight:0,
 				videoId:0,
 				current:0,
 				currentTime:0,
+				already:true,
 				alreadyPlay:false,
 			}
 		},
 		onLoad(options) {
 			// debugger;
-			this.videoId = options.id;
+			 let that=this;
+			that.videoId = options.id;
+			that.url = options.url;
 			if(options.current){
-				this.current = options.current;
+				that.current = options.current;
 			}else{
-				this.$u.api.getVideoRecord(options.id).then(res => {
-					this.current = res.data.current;
+				that.$u.api.getVideoRecord(options.id).then(res => {
+					that.current = res.data.current;
 				})	
 			}
-			this.$u.api.getThisVideo(options.id).then(res => {
-				this.item = res.data;
-				// console.log(res.data)
-			})
+			that.changeHeight();
 		},
 		methods:{
+			changeHeight(){
+				 let that=this;
+				let obj = uni.createSelectorQuery().select('.video')
+				obj.boundingClientRect(function (data) { // data - 各种参数
+				  console.log(data)
+				  that.ReadyHeight=data.height;
+				}).exec()
+			},
+			alreadyLoad(){
+				this.already = false;
+			},
 			doPlay(e) {
 				if(this.alreadyPlay){}else{
-					debugger;
+					// debugger;
 					this.alreadyPlay =true;
 					this.$u.api.putMyVideoView(this.videoId).then(res=>{})
 				}
@@ -49,13 +92,133 @@ export default {
 			},
 		},
 		beforeDestroy(){
-			debugger;
+			// debugger;
 			let params = {'current':this.currentTime};
-			this.$u.api.putMyVideoView(this.item.id,params).then(res => {
+			this.$u.api.putMyVideoView(this.videoId,params).then(res => {
 			})
 		},
 	}
 </script>
 
 <style>
+	.markBlock{
+		color:#ffffff;
+		text-align:center;
+		 width: 100%;
+		 position: fixed;
+		 top: 0;
+		 left: 0;
+		 background: rgba(0,0,0,0.8);
+		 z-index: 100;
+	}
+	 .spinner {
+	     margin: 200upx auto 80upx;
+		 width: 100upx;
+		 height: 100upx;
+		 position: relative;
+	    }
+	     
+	    .container1 > view, .container2 > view, .container3 > view {
+	      width: 20upx;
+	      height: 20upx;
+	      background-color: #fff;
+	     
+	      border-radius: 100%;
+	      position: absolute;
+	      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
+	      animation: bouncedelay 1.2s infinite ease-in-out;
+	      -webkit-animation-fill-mode: both;
+	      animation-fill-mode: both;
+	    }
+	     
+	    .spinner .spinner-container {
+	      position: absolute;
+	      width: 100%;
+	      height: 100%;
+	    }
+	     
+	    .container2 {
+	      -webkit-transform: rotateZ(45deg);
+	      transform: rotateZ(45deg);
+	    }
+	     
+	    .container3 {
+	      -webkit-transform: rotateZ(90deg);
+	      transform: rotateZ(90deg);
+	    }
+	     
+	    .circle1 { top: 0; left: 0; }
+	    .circle2 { top: 0; right: 0; }
+	    .circle3 { right: 0; bottom: 0; }
+	    .circle4 { left: 0; bottom: 0; }
+	     
+	    .container2 .circle1 {
+	      -webkit-animation-delay: -1.1s;
+	      animation-delay: -1.1s;
+	    }
+	     
+	    .container3 .circle1 {
+	      -webkit-animation-delay: -1.0s;
+	      animation-delay: -1.0s;
+	    }
+	     
+	    .container1 .circle2 {
+	      -webkit-animation-delay: -0.9s;
+	      animation-delay: -0.9s;
+	    }
+	     
+	    .container2 .circle2 {
+	      -webkit-animation-delay: -0.8s;
+	      animation-delay: -0.8s;
+	    }
+	     
+	    .container3 .circle2 {
+	      -webkit-animation-delay: -0.7s;
+	      animation-delay: -0.7s;
+	    }
+	     
+	    .container1 .circle3 {
+	      -webkit-animation-delay: -0.6s;
+	      animation-delay: -0.6s;
+	    }
+	     
+	    .container2 .circle3 {
+	      -webkit-animation-delay: -0.5s;
+	      animation-delay: -0.5s;
+	    }
+	     
+	    .container3 .circle3 {
+	      -webkit-animation-delay: -0.4s;
+	      animation-delay: -0.4s;
+	    }
+	     
+	    .container1 .circle4 {
+	      -webkit-animation-delay: -0.3s;
+	      animation-delay: -0.3s;
+	    }
+	     
+	    .container2 .circle4 {
+	      -webkit-animation-delay: -0.2s;
+	      animation-delay: -0.2s;
+	    }
+	     
+	    .container3 .circle4 {
+	      -webkit-animation-delay: -0.1s;
+	      animation-delay: -0.1s;
+	    }
+	     
+	    @-webkit-keyframes bouncedelay {
+	      0%, 80%, 100% { -webkit-transform: scale(0.0) }
+	      40% { -webkit-transform: scale(1.0) }
+	    }
+	     
+	    @keyframes bouncedelay {
+	      0%, 80%, 100% {
+	        transform: scale(0.0);
+	        -webkit-transform: scale(0.0);
+	      } 40% {
+	        transform: scale(1.0);
+	        -webkit-transform: scale(1.0);
+	      }
+	    }
 </style>
diff --git a/client_mp/video.vue b/client_mp/video.vue
index 49f9c07..207d70d 100644
--- a/client_mp/video.vue
+++ b/client_mp/video.vue
@@ -243,7 +243,9 @@
 						}
 					} else {
 						this.loadingText = ''
-						this.list[swiperIndex].content.concat(results)
+						let a = this.list[swiperIndex].content;
+						let b= a.concat(results);
+						this.list[swiperIndex].content=b;
 					}
 
 				}).catch(res => {