From 41c9ffd096c53037b68e1740675c0e3e4e9bbbe5 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 20 Aug 2021 16:46:24 +0800
Subject: [PATCH] =?UTF-8?q?video=E4=BF=AE=E6=94=B9=20=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=90=8E=E5=BC=B9=E7=AA=97=E6=92=AD=E6=94=BE=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client_mp/video.vue | 409 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 409 insertions(+)
 create mode 100644 client_mp/video.vue

diff --git a/client_mp/video.vue b/client_mp/video.vue
new file mode 100644
index 0000000..49f9c07
--- /dev/null
+++ b/client_mp/video.vue
@@ -0,0 +1,409 @@
+<template>
+	<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">
+				<view class="nav-item" :class="swiperIndex == index ? 'nav-item-act' : ''" :key="item.title"
+					v-for="(item, index) in list" @click="taggleNav(index)">
+					{{ item.title }}
+				</view>
+				<view class="nav-line" :style="style"></view>
+			</view>
+		</scroll-view>
+		<view class="swiper">
+			<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
+				@change="swiperChange">
+				<swiper-item v-for="(item, index) in list" :key="item.title">
+					<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
+						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
+						@scrolltolower="swiperScrollLower">
+						<view>
+							<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> -->
+							
+								<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>
+								</view>
+							</view>
+						</view>
+						<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
+					</scroll-view>
+				</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)"
+				@pause="doPlay($event)" @ended="doPlay($event)">
+			</video>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				playingVideoStr: null,
+				swiperIndex: 0, //当前的swiperindex
+				navItemWidth: '', //选中下划线的宽度
+				navItemLeft: 0, //选中下划线的显示位置
+				scrollToLeft: 0, //scrollview需要滚动的距离
+				navInfos: [], //所有navitem的节点信息
+				parentLeft: 0, //nav盒子的节点信息
+				componentWidth: 0, //nav盒子的宽度
+				list: [{
+					id: 0,
+					title: '全部',
+					page: 1,
+					content: []
+				}],
+				refreStatus: false,
+				videoDialog:false,
+				loadingText: "加载中",
+				search:"",
+				videoCoverurl:'',
+				videoUrl:'',
+				videoId:0,
+			};
+		},
+		computed: {
+			style() {
+				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
+			}
+		},
+		mounted() {
+			// this.init();
+		},
+		onLoad() {
+			this.$u.api.getDickey({
+				pageoff: true,
+				type__code: 'data_video'
+			}).then(res => {
+				let list = [{
+					id: 0,
+					title: '全部',
+					page: 1,
+					content: []
+				}]
+				for (var i = 0; i < res.data.length; i++) {
+					let data = res.data[i]
+					list.push({
+						id: data.id,
+						title: data.name,
+						page: 1,
+						content: []
+					})
+				}
+				this.list = list
+				this.$nextTick(function() {
+					this.init()
+					this.getVideos()
+				});
+			})
+		},
+		methods: {
+			videoOpen(video){
+				debugger;
+				console.log(video)
+				this.videoId = video.id;
+				this.videoUrl = video.mediaurl;
+				this.videoCoverurl = video.coverurl;
+				this.videoDialog = true;
+			},
+			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.$u.api.putMyVideoView(this.videoId).then(res=>{})
+					//暂停其他视频播放
+					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);
+				query.select('.uni-nav').fields({
+					rect: true,
+					size: true
+				}, res => {
+					this.parentLeft = res.left;
+					this.componentWidth = res.width;
+					console.log('res==>', res);
+				});
+				query.selectAll('.nav-item').fields({
+					rect: true,
+					size: true
+				}, data => {
+					data.forEach((item, index) => {
+						if (index == 0) {
+							this.navItemWidth = item.width;
+							this.navItemLeft = item.left;
+						}
+						this.navInfos.push({
+							width: item.width,
+							left: item.left
+						});
+					});
+				});
+				query.exec();
+			},
+			// 点击导航切换swiper
+			taggleNav(val) {
+				this.swiperIndex = val;
+			},
+			// 滚动tabs以及移动下划线
+			scrollDom() {
+				let info = this.navInfos[this.swiperIndex];
+				let offsetLeft = info.left - this.parentLeft;
+				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
+				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
+				this.navItemLeft = this.navInfos[this.swiperIndex].left;
+				setTimeout(() => {
+					this.navItemWidth = info.width;
+				}, 50);
+			},
+			// swiper的index变动
+			swiperChange(e) {
+				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) {
+				this.scrollDom();
+			},
+			// swiper-ScrollLower触底
+			swiperScrollLower() {
+				// 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() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				setTimeout(() => {
+					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);
+					}
+					uni.hideLoading();
+				}, 1000);
+				console.log(this.list[this.swiperIndex]);
+			},
+			// 下拉事件
+			handleRefre() {
+				this.refreStatus = true;
+				// 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)
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.nav-item {
+		display: inline-block;
+		margin: 0 16upx;
+		text-align: center;
+		transition: color 0.3s ease;
+	}
+
+	.nav {
+		white-space: nowrap;
+		position: relative;
+		height: 80upx;
+		padding: 20upx 0;
+	}
+
+	/* #ifndef APP-NVUE */
+	::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* #endif */
+
+	/* #ifdef H5 */
+	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+	scroll-view ::v-deep ::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* #endif */
+
+	.nav-item-act {
+		color: pink;
+		font-weight: bolder;
+	}
+
+	.nav-line {
+		position: absolute;
+		bottom: 0;
+		height: 10upx;
+		border-radius: 10upx;
+		background-color: pink;
+		transition: left 0.3s ease;
+	}
+
+	swiper {
+		height: calc(100vh - 80upx);
+	}
+
+	// swiper-item {
+	// 	text-align: center;
+	// 	color: #000;
+	// 	position: relative;
+	// 	background-color: skyblue;
+	// 	color: #fff;
+	// }
+
+	.swiper-item {
+		overflow-y: scroll;
+	}
+
+	.swiper-item-list {
+		margin-top:4upx;
+		// height: 400upx;
+		border-bottom: 4upx solid pink;
+		// line-height: 400upx;
+		position: relative;
+	}
+
+	.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.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>