From 1485af81a38d7725d73856493565e56623d42fc2 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 25 Aug 2021 14:06:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=20video.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 video.vue | 411 ------------------------------------------------------
 1 file changed, 411 deletions(-)
 delete mode 100644 video.vue

diff --git a/video.vue b/video.vue
deleted file mode 100644
index 70f4d9c..0000000
--- a/video.vue
+++ /dev/null
@@ -1,411 +0,0 @@
-<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)"
-				:initial-time="current"	
-				@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,
-				current: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)
-			
-				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.$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>