mp_video

client/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
-    "axios": "0.18.1",
+    "axios": "^0.21.1",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.2",
     "js-cookie": "2.2.0",
@@ -27,7 +27,7 @@
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
-    "xlsx": "^0.15.5"
+    "xlsx": "^0.17.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

client_mp/.hbuilderx/launch.json

@@ -2,10 +2,19 @@
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
     "version": "0.0",
     "configurations": [{
-            "type": "uniCloud",
-            "default": {
-                "launchtype": "remote"
-            }
-        }
+     	"default" : 
+     	{
+     		"launchtype" : "remote"
+     	},
+     	"h5" : 
+     	{
+     		"launchtype" : "remote"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "remote"
+     	},
+     	"type" : "uniCloud"
+     }
     ]
 }

client_mp/common/http.api.js

@@ -42,8 +42,13 @@ const install = (Vue, vm) => {
 	let appointChecker = (params) => vm.$u.post('/quality/inspectrecord/appoint/', params);//检查指派
 	let getDocument = (params={})=>vm.$u.get('/quality/document/', params);//文档
 	let getVideos = (params={})=>vm.$u.get('/vod/video/', params);//点播视频
+	let getThisVideo = (id,params)=>vm.$u.get(`/vod/video/${id}/`, params);//点播视频
 	let getDickey = (params={})=>vm.$u.get('/system/dict/', params);//查询字典
-	let putMyVideoView =(id)=>vm.$u.put(`/vod/video/${id}/myview/`);//更新本人观看信息
+	
+	let putMyVideoView =(id,params)=>vm.$u.put(`/vod/video/${id}/myview/`,params);//更新本人观看信息
+	
+	let getMyVideoRecord =(id)=>vm.$u.get(`/vod/video/myview/`);//获取本人观看记录
+	let getVideoRecord =(id)=>vm.$u.get(`/vod/video/${id}/myview/`);//获取本人观看记录
 	vm.$u.api = {getUserInfo, 
 				getCode,
 				codeLogin,
@@ -64,7 +69,10 @@ const install = (Vue, vm) => {
 				getDocument,
 				getVideos,
 				getDickey,
-				putMyVideoView
+				putMyVideoView,
+				getMyVideoRecord,
+				getVideoRecord,
+				getThisVideo
 				};
 }
 

client_mp/pages.json

@@ -128,7 +128,21 @@
                 "enablePullDownRefresh": false
             }
             
-        }
+        },{
+			"path":"pages/my/videoWatchRecords",
+			"style" :
+			{
+			    "navigationBarTitleText": "观看记录",
+			    "enablePullDownRefresh": false
+			}
+		},{
+			"path":"pages/vod/watchPage",
+			"style" :
+			{
+			    "navigationBarTitleText": "云视频",
+			    "enablePullDownRefresh": false
+			}
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
@@ -160,5 +174,11 @@
 				"text": "个人中心"
 			}
 		]
-	}
+	}, 
+	"plugins": {
+        "tencentvideo": {
+            "version": "1.4.9",
+            "provider": "wxa75efa648b60994b"
+        }
+    }
 }

client_mp/pages/my/my.vue

@@ -43,6 +43,10 @@
 			<u-cell-group>
 				<u-cell-item icon="weixin-fill" title="绑定微信" :arrow="false" @click="bindMP" v-if="!vuex_user.wxmp_openid"></u-cell-item>
 				<u-cell-item icon="close" title="退出" @click="Logout"></u-cell-item>
+				<u-cell-item icon="info" title="观看记录" @click="ViewRecord">
+					<!-- <image slot="icon" src="../../static/common/records.png"></image> -->
+					<icon type="waiting" size="20" style="position: absolute;left: 10px;top:16px"/>
+				</u-cell-item>
 			</u-cell-group>
 		</view>
 	</view>
@@ -83,7 +87,12 @@
 					  }).catch(e=>{})
 				  }
 				});
-			}
+			},
+			ViewRecord(){
+				uni.navigateTo({
+					url: '/pages/my/videoWatchRecords'
+				});
+			},
 		}
 	}
 </script>

client_mp/pages/my/videoWatchRecords.vue

@@ -0,0 +1,89 @@
+<template>
+	<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
+		@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
+		@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> -->
+	</scroll-view>	
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				page:1,
+				dataList: [],
+				refreStatus: false,
+			}
+		},
+		onShow(){
+			this.$u.api.getMyVideoRecord({}).then(res => {
+				this.dataList = res.data.results;
+				console.log(res.data.results)
+			})
+		},
+		methods: {
+			plauVideo(item){
+				uni.navigateTo({
+					url: '/pages/vod/watchPage?id='+item.video_.id+'&current='+item.current
+				});
+			},
+			// 下拉事件
+			handleRefre() {
+				this.refreStatus = true;
+				this.page = 1
+				this.getLists()
+			},
+			swiperScrollLower() {
+				
+				this.page = this.page + 1;
+				this.getLists()
+			},
+			getLists(){
+				var params = {
+					page: this.page
+				}
+				this.$u.api.getVideos(params).then(res => {
+					this.refreStatus = false
+					let results = res.data.results
+					
+					if (currentData.page == 1) {
+						if (results == 0) {
+							this.loadingText = '暂无观看记录'
+						} else {
+							this.loadingText = ''
+							this.dataList = results
+						}
+					} else {
+						this.loadingText = ''
+						this.dataList.concat(results)
+					}
+				
+				}).catch(res => {
+					this.refreStatus = false
+					if (res.code == 404) {
+						this.loadingText = '到底了'
+					}
+				})
+			},
+		},
+	
+		
+	}
+</script>
+
+<style>
+</style>

client_mp/pages/vod/video.vue

@@ -21,14 +21,20 @@
 						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
 						@scrolltolower="swiperScrollLower">
 						<view>
-							<view class="swiper-item-list" v-for="(video,index) in item.content" :key="video.id">
-								<video class="video" :src="video.mediaurl" controls object-fit="cover"
+							<view class="swiper-item-list" v-for="video in item.content" :key="video.id">
+								<!-- <video class="video" :src="video.mediaurl" controls object-fit="cover"
 									:id="'video'+video.id" :poster="video.coverurl" @play="doPlay($event, index)"
 									@pause="doPlay($event, index)" @ended="doPlay($event, index)">
 									<view class='video-slot' v-if="video.showTitle" :title="video.name">
 										<span style="margin-left:6px">{{video.name}}</span>
 									</view>
-								</video>
+								</video> -->
+							
+								<u-icon size="80" name="play-right-fill" color="rgb(245,245,245)" @click="videoOpen(video)" class="playIcon"></u-icon>
+								<view class='video-slot' v-if="video.showTitle" :title="video.name">
+									<span style="margin-left:6px">{{video.name}}</span>
+								</view>
+								<image :src="video.coverurl" class="video"></image>
 								<view style="color:darkblue;margin-left:4upx">
 								<text>{{video.name}}</text>
 								<text style="float:right;color:gray;margin-right: 8upx;">{{video.viewsp}}人观看</text>
@@ -40,6 +46,16 @@
 				</swiper-item>
 			</swiper>
 		</view>
+		<!-- <view v-if="videoDialog" id="videoDialog">
+			<view class="closeIconWrap">
+				<u-icon size="60" name="close-circle" color="rgb(255,255,255)" @click="closeVideo" class="closeIcon"></u-icon>
+			</view>
+			<video class="video" :src="videoUrl" controls object-fit="cover"
+				:id="videoId" :poster="videoCoverurl" @play="doPlay($event)"
+				:initial-time="current"	
+				@pause="doPlay($event)" @ended="doPlay($event)">
+			</video>
+		</view> -->
 	</view>
 </template>
 
@@ -62,8 +78,13 @@
 					content: []
 				}],
 				refreStatus: false,
+				videoDialog:false,
 				loadingText: "加载中",
-				search:""
+				search:"",
+				videoCoverurl:'',
+				videoUrl:'',
+				videoId:0,
+				current:0,
 			};
 		},
 		computed: {
@@ -102,11 +123,23 @@
 			})
 		},
 		methods: {
+			videoOpen(video){
+				// debugger;
+				// console.log(video)
+			
+				uni.navigateTo({
+					url: '/pages/vod/watchPage?id='+video.id
+				});
+			},
+			closeVideo(){
+				this.videoDialog = false;
+			},
 			doPlay(e, index) {
 				if (e.type == 'play') {
 					var playingVideoStr = e.target.id
-					this.list[this.swiperIndex].content[index].showTitle = false
-					this.$u.api.putMyVideoView(this.list[this.swiperIndex].content[index].id).then(res=>{})
+					// this.list[this.swiperIndex].content[index].showTitle = false   
+					// this.$u.api.putMyVideoView(this.list[this.swiperIndex].content[index].id).then(res=>{})
+					this.$u.api.putMyVideoView(this.videoId).then(res=>{})
 					//暂停其他视频播放
 					if(this.playingVideoStr==null){
 						this.playingVideoStr = playingVideoStr
@@ -117,7 +150,7 @@
 						this.playingVideoStr = playingVideoStr
 					}
 				} else {
-					this.list[this.swiperIndex].content[index].showTitle = true
+					// this.list[this.swiperIndex].content[index].showTitle = true
 				}
 			},
 			// 获取dom信息
@@ -330,6 +363,7 @@
 		// height: 400upx;
 		border-bottom: 4upx solid pink;
 		// line-height: 400upx;
+		position: relative;
 	}
 
 	.swiper-scroll {
@@ -348,6 +382,30 @@
 		font-size: 16px;
 		color: white;
 		background-color: black;
-		opacity: 0.3;
+		opacity: 0.6;
+		position: absolute;
+	}
+	.playIcon{
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		z-index: 100;
+		transform: translate(-50%, -50%);
+	}
+	#videoDialog{
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		background-color: rgba(0, 0, 0, 0.5);   
+	}
+	.closeIconWrap{
+		position: relative;
+		text-align: right;
+	}
+	.closeIcon{
+		padding: 20px;
+		margin-bottom: 10px;
 	}
 </style>

client_mp/pages/vod/watchPage.vue

@@ -0,0 +1,61 @@
+<template>
+	<view>
+		<video class="video" :src="item.mediaurl" controls object-fit="cover"
+			id="videoPlayer" :poster="item.coverurl" @play="doPlay($event)"
+			:initial-time="current" style="width: 100%;" @timeupdate="timeupdate($event)"
+			@pause="doPlay($event)" @ended="doPlay($event)">
+		</video>
+	</view>
+</template>
+
+<script>
+export default {
+		data() {
+			return {
+				item: {},
+				videoId:0,
+				current:0,
+				currentTime:0,
+				alreadyPlay:false,
+			}
+		},
+		onLoad(options) {
+			// debugger;
+			this.videoId = options.id;
+			if(options.current){
+				this.current = options.current;
+			}else{
+				this.$u.api.getVideoRecord(options.id).then(res => {
+					this.current = res.data.current;
+				})	
+			}
+			this.$u.api.getThisVideo(options.id).then(res => {
+				this.item = res.data;
+				// console.log(res.data)
+			})
+		},
+		methods:{
+			doPlay(e) {
+				if(this.alreadyPlay){}else{
+					debugger;
+					this.alreadyPlay =true;
+					this.$u.api.putMyVideoView(this.videoId).then(res=>{})
+				}
+				// videoContextPrev.pause();
+			},
+			timeupdate(e){
+				let currentTime = Math.floor(e.detail.currentTime);
+				this.currentTime =currentTime;
+			},
+		},
+		beforeDestroy(){
+			debugger;
+			let params = {'current':this.currentTime};
+			this.$u.api.putMyVideoView(this.item.id,params).then(res => {
+			})
+		},
+	}
+</script>
+
+<style>
+</style>