From ddba9c0b9a4b2bac96ee6335039716975014158b Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 5 Jul 2021 16:55:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A7=82=E7=9C=8B=E6=AC=A1?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client_mp/pages.json          |   8 +-
 client_mp/pages/vod/video.vue | 173 ++++++++++++++++++++++++++--------
 client_mp/store/index.js      |   2 +-
 server/apps/vod/views.py      |  10 ++
 4 files changed, 149 insertions(+), 44 deletions(-)

diff --git a/client_mp/pages.json b/client_mp/pages.json
index 018b8eb..e330e3c 100644
--- a/client_mp/pages.json
+++ b/client_mp/pages.json
@@ -96,7 +96,7 @@
             "path" : "pages/inspectrecord/deptreport",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "检查任务",
                 "enablePullDownRefresh": false
             }
             
@@ -105,7 +105,7 @@
             "path" : "pages/document/index",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "手册资料",
                 "enablePullDownRefresh": false
             }
             
@@ -114,7 +114,7 @@
             "path" : "pages/vod/index",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "云点播",
                 "enablePullDownRefresh": true,
 				"onReachBottomDistance":100
             }
@@ -124,7 +124,7 @@
             "path" : "pages/vod/video",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "云点播",
                 "enablePullDownRefresh": false
             }
             
diff --git a/client_mp/pages/vod/video.vue b/client_mp/pages/vod/video.vue
index 9151666..65902cf 100644
--- a/client_mp/pages/vod/video.vue
+++ b/client_mp/pages/vod/video.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
-		<view style="height: 80upx;">
-			<uni-search-bar @confirm="search"></uni-search-bar>
-		</view>
+		<!-- <view style="height: 80upx;">
+			<uni-search-bar @confirm="startSearch" v-model="search"></uni-search-bar>
+		</view> -->
 		<scroll-view class="nav-scroll" :enable-flex="true" scroll-with-animation :throttle="false"
 			:scroll-left="scrollToLeft" scroll-x @scroll="handleScroll">
 			<view class="nav uni-nav">
@@ -21,9 +21,18 @@
 						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
 						@scrolltolower="swiperScrollLower">
 						<view>
-							<view class="swiper-item-list" v-for="sub_item in item.content" :key="sub_item">
-								{{ sub_item }}</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"
+									: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>
+								<view style="color:darkblue;margin-left:12upx">{{video.name}}</view>
+							</view>
 						</view>
+						<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
 					</scroll-view>
 				</swiper-item>
 			</swiper>
@@ -35,6 +44,7 @@
 	export default {
 		data() {
 			return {
+				playingVideoStr: null,
 				swiperIndex: 0, //当前的swiperindex
 				navItemWidth: '', //选中下划线的宽度
 				navItemLeft: 0, //选中下划线的显示位置
@@ -45,9 +55,12 @@
 				list: [{
 					id: 0,
 					title: '全部',
+					page: 1,
 					content: []
 				}],
-				refreStatus: false
+				refreStatus: false,
+				loadingText: "加载中",
+				search:""
 			};
 		},
 		computed: {
@@ -66,6 +79,7 @@
 				let list = [{
 					id: 0,
 					title: '全部',
+					page: 1,
 					content: []
 				}]
 				for (var i = 0; i < res.data.length; i++) {
@@ -74,17 +88,34 @@
 						id: data.id,
 						title: data.name,
 						page: 1,
-						loadingText:'加载中...',
 						content: []
 					})
 				}
 				this.list = list
 				this.$nextTick(function() {
 					this.init()
+					this.getVideos()
 				});
 			})
 		},
 		methods: {
+			doPlay(e, index) {
+				if (e.type == 'play') {
+					var playingVideoStr = e.target.id
+					this.list[this.swiperIndex].content[index].showTitle = false
+					//暂停其他视频播放
+					if(this.playingVideoStr==null){
+						this.playingVideoStr = playingVideoStr
+					}
+					else if (playingVideoStr != this.playingVideoStr) {
+						var videoContextPrev = uni.createVideoContext(this.playingVideoStr)
+						videoContextPrev.pause()
+						this.playingVideoStr = playingVideoStr
+					}
+				} else {
+					this.list[this.swiperIndex].content[index].showTitle = true
+				}
+			},
 			// 获取dom信息
 			init() {
 				const query = uni.createSelectorQuery().in(this);
@@ -100,7 +131,6 @@
 					rect: true,
 					size: true
 				}, data => {
-					console.log(data)
 					data.forEach((item, index) => {
 						if (index == 0) {
 							this.navItemWidth = item.width;
@@ -117,6 +147,9 @@
 			// 点击导航切换swiper
 			taggleNav(val) {
 				this.swiperIndex = val;
+				if (this.list[val].content.length == 0) {
+					this.getVideos()
+				}
 			},
 			// 滚动tabs以及移动下划线
 			scrollDom() {
@@ -134,6 +167,9 @@
 				this.swiperIndex = e.detail.current;
 				this.scrollDom();
 				this.$emit('currentIndex', this.swiperIndex);
+				if (this.list[e.detail.current].content.length == 0) {
+					this.getVideos()
+				}
 			},
 			// tabs-scrollview触底
 			handleScroll(e) {
@@ -141,13 +177,51 @@
 			},
 			// swiper-ScrollLower触底
 			swiperScrollLower() {
-				uni.showToast({
-					icon: 'none',
-					title: `此时为${this.list[this.swiperIndex].title}触底`
-				});
-				setTimeout(() => {
-					this.getData();
-				}, 500);
+				// uni.showToast({
+				// 	icon: 'none',
+				// 	title: `此时为${this.list[this.swiperIndex].title}触底`
+				// });
+				// setTimeout(() => {
+				// 	this.getData();
+				// }, 500);
+				this.list[this.swiperIndex].page = this.list[this.swiperIndex].page + 1
+				this.getVideos()
+			},
+			getVideos() {
+				let swiperIndex = this.swiperIndex
+				let currentData = this.list[swiperIndex]
+				var params = {
+					page: currentData.page
+				}
+				if (currentData.id == 0) {} else {
+					params.category = currentData.id
+				}
+				this.$u.api.getVideos(params).then(res => {
+					this.refreStatus = false
+					let results = res.data.results
+					for (var i = 0; i < results.length; i++) {
+						results[i].showTitle = true
+					}
+					if (currentData.page == 1) {
+						if (results == 0) {
+							this.loadingText = '暂无视频'
+						} else {
+							this.loadingText = ''
+							this.list[swiperIndex].content = results
+						}
+					} else {
+						this.loadingText = ''
+						this.list[swiperIndex].content.concat(results)
+					}
+
+				}).catch(res => {
+					this.refreStatus = false
+					if (res.code == 404) {
+						this.loadingText = '到底了'
+					}
+				})
+
+
 			},
 			// 生成列表数据
 			getData() {
@@ -158,7 +232,7 @@
 					for (let index = 0; index < 10; index++) {
 						let arr = this.list[this.swiperIndex].content;
 						this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
-						.title);
+							.title);
 					}
 					uni.hideLoading();
 				}, 1000);
@@ -167,19 +241,24 @@
 			// 下拉事件
 			handleRefre() {
 				this.refreStatus = true;
-				uni.showLoading({
-					title: '下拉加载中'
-				});
-				setTimeout(() => {
-					this.list[this.swiperIndex].content = [];
-					for (var i = 0; i < 5; i++) {
-						this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
-					}
-					uni.hideLoading();
-				}, 1000);
-				setTimeout(() => {
-					this.refreStatus = false;
-				}, 1000);
+				// uni.showLoading({
+				// 	title: '下拉加载中'
+				// });
+				this.list[this.swiperIndex].page = 1
+				this.getVideos()
+				// setTimeout(() => {
+				// 	this.list[this.swiperIndex].content = [];
+				// 	for (var i = 0; i < 5; i++) {
+				// 		this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
+				// 	}
+				// 	uni.hideLoading();
+				// }, 1000);
+				// setTimeout(() => {
+				// 	this.refreStatus = false;
+				// }, 1000);
+			},
+			startSearch(e){
+				console.log(e)
 			}
 		}
 	};
@@ -230,28 +309,44 @@
 	}
 
 	swiper {
-		height: calc(100vh - 160upx);
+		height: calc(100vh - 80upx);
 	}
 
-	swiper-item {
-		text-align: center;
-		color: #000;
-		position: relative;
-		background-color: skyblue;
-		color: #fff;
-	}
+	// swiper-item {
+	// 	text-align: center;
+	// 	color: #000;
+	// 	position: relative;
+	// 	background-color: skyblue;
+	// 	color: #fff;
+	// }
 
 	.swiper-item {
 		overflow-y: scroll;
 	}
 
 	.swiper-item-list {
-		height: 400upx;
+		margin-top:4upx;
+		// height: 400upx;
 		border-bottom: 2upx solid pink;
-		line-height: 400upx;
+		// line-height: 400upx;
 	}
 
 	.swiper-scroll {
 		height: 100%;
 	}
+
+	.video {
+		width: 100%;
+		height: 380rpx;
+	}
+
+	.video-slot {
+		width: 100%;
+		height: 40px;
+		line-height: 40px;
+		font-size: 16px;
+		color: white;
+		background-color: black;
+		opacity: 0.3;
+	}
 </style>
diff --git a/client_mp/store/index.js b/client_mp/store/index.js
index 700e8f9..bcd8f61 100644
--- a/client_mp/store/index.js
+++ b/client_mp/store/index.js
@@ -38,7 +38,7 @@ const store = new Vuex.Store({
 		// vuex_apifile: 'http://127.0.0.1:8000/api/file/',
 		
 		vuex_host: 'https://testsearch.ctc.ac.cn',
-		// vuex_api: 'https://testsearch.ctc.ac.cn/api',
+		//vuex_api: 'https://testsearch.ctc.ac.cn/api',
 		vuex_apifile: 'https://testsearch.ctc.ac.cn/api/file/',
 		
 		// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
diff --git a/server/apps/vod/views.py b/server/apps/vod/views.py
index 374cf32..ca614d1 100644
--- a/server/apps/vod/views.py
+++ b/server/apps/vod/views.py
@@ -56,6 +56,16 @@ class VideoViewSet(PageOrNot, CreateUpdateModelAMixin, ModelViewSet):
             return self.get_paginated_response(serializer.data)
         serializer = self.get_serializer(queryset, many=True)
         return Response(serializer.data)
+    
+    @action(methods=['post'], detail=True, permission_classes=[IsAuthenticated])
+    def view(self, request, *args, **kwargs):
+        """
+        新增观看次数
+        """
+        obj = self.get_object()
+        obj.views = obj.views + 1
+        obj.save()
+        return Response()
 
 
 class VRecordViewSet(ListModelMixin, GenericViewSet):