From 34b4201785d741aaed757152bbdada7d6148eb39 Mon Sep 17 00:00:00 2001
From: "Mr.jiang" <714156421@qq.com>
Date: Fri, 19 Jul 2024 10:49:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 my/order/payCLDetail.vue    |   19 +-
 my/order/paydingDd.vue      |    3 +-
 my/order/paydingXiuGai.vue  |    3 +-
 pages/videoCircle/index.vue | 1119 ++++++++++++++++++++++-------------
 4 files changed, 732 insertions(+), 412 deletions(-)

diff --git a/my/order/payCLDetail.vue b/my/order/payCLDetail.vue
index eddd949..6fd6877 100644
--- a/my/order/payCLDetail.vue
+++ b/my/order/payCLDetail.vue
@@ -188,7 +188,8 @@
 						</view>
 						<view class="flex justify-between" style="margin-top: 19rpx;padding-bottom:5px ;margin-bottom: 5px;">
 							<view style="color: #999;font-size: 26rpx;">出行费用</view>
-							<view class="" style="color: #333;font-size: 26rpx;">￥{{order.taxiMoney}}</view>
+							<view class="" style="color: #333;font-size: 26rpx;" v-if="order.taxiMoney">￥{{order.taxiMoney}}</view>
+							<view class="" style="color: #333;font-size: 26rpx;" v-else>-</view>
 						</view>
 						<view class="jusitify-line-end"></view>
 						<view class="justify-title-nav">
@@ -212,8 +213,10 @@
 						</view>
 						<view class="flex align-center margin-top-lg justify-between">
 							<view style="color: #333;font-size: 26rpx;">出行费用：</view>
-							<view class="" style="color: #333;">￥<text
-									style="font-size: 26rpx;font-weight: bold;">{{order.taxiMoney}}</text></view>
+							<view class="" style="color: #333;" v-if="order.taxiMoney">￥
+								<text style="font-size: 26rpx;font-weight: bold;">{{order.taxiMoney}}</text>
+							</view>
+							<view class="" style="color: #333;font-size: 26rpx;" v-else>-</view>
 						</view>
 						<view class="flex align-center margin-top-lg justify-between">
 							<view style="color: #333;font-size: 26rpx;">优惠券：</view>
@@ -322,7 +325,8 @@
 						</view>
 						<view class="flex justify-between" style="margin-top: 19rpx;padding-bottom:5px ;margin-bottom: 5px;">
 							<view style="color: #999;font-size: 26rpx;">出行费用</view>
-							<view class="" style="color: #333;font-size: 26rpx;">￥{{order.taxiMoney}}</view>
+							<view class="" style="color: #333;font-size: 26rpx;" v-if="order.taxiMoney">￥{{order.taxiMoney}}</view>
+							<view class="" style="color: #333;font-size: 26rpx;" v-else>-</view>
 						</view>
 						<view class="jusitify-line-end"></view>
 						<view class="justify-title-nav">
@@ -346,8 +350,11 @@
 						</view>
 						<view class="flex align-center margin-top-lg justify-between">
 							<view style="color: #333;font-size: 26rpx;">出行费用：</view>
-							<view class="" style="color: #333;">￥<text
-									style="font-size: 26rpx;font-weight: bold;">{{order.taxiMoney}}</text></view>
+							
+							<view class="" style="color: #333;" v-if="order.taxiMoney">￥
+								<text style="font-size: 26rpx;font-weight: bold;">{{order.taxiMoney}}</text>
+							</view>
+							<view class="" style="color: #333;font-size: 26rpx;" v-else>-</view>
 						</view>
 						<view class="flex align-center margin-top-lg justify-between">
 							<view style="color: #333;font-size: 26rpx;">优惠券：</view>
diff --git a/my/order/paydingDd.vue b/my/order/paydingDd.vue
index 30542bf..7aa94d8 100644
--- a/my/order/paydingDd.vue
+++ b/my/order/paydingDd.vue
@@ -218,7 +218,8 @@
 						</view>
 						<view class="fei-view-list">
 							<span>出行费用</span>
-							<span>￥{{order.taxiMoney}}</span>
+							<span v-if='order.taxiMoney'>￥{{order.taxiMoney}}</span>
+							<span v-else>-</span>
 						</view>
 						<view class="fei-view-list-z">
 							<span>总金额</span>
diff --git a/my/order/paydingXiuGai.vue b/my/order/paydingXiuGai.vue
index f0e0314..1acb08b 100644
--- a/my/order/paydingXiuGai.vue
+++ b/my/order/paydingXiuGai.vue
@@ -235,8 +235,9 @@
 						</view>
 						<view class="flex align-center margin-top-lg justify-between" v-if="order.taxiMoney">
 							<view style="color: #333;font-size: 26rpx;">出行费用：</view>
-							<view class="" style="color: #333;">￥<text
+							<view class="" style="color: #333;" v-if="order.taxiMoney">￥<text
 									style="font-size: 26rpx;font-weight: bold;">{{order.taxiMoney}}</text></view>
+							<view class="" style="color: #333;" v-else>-</view>
 						</view>
 						<view class="flex align-center margin-top-lg justify-between">
 							<view style="color: #333;font-size: 26rpx;">优惠券：</view>
diff --git a/pages/videoCircle/index.vue b/pages/videoCircle/index.vue
index da85e97..fca0ec7 100644
--- a/pages/videoCircle/index.vue
+++ b/pages/videoCircle/index.vue
@@ -1,204 +1,551 @@
 <template>
-	<view style="height: 100vh;flex:1;width:100%">
-		<view class="com-line">
-			<image  style="width: 380rpx; height: 330rpx;" src="../../static/coming.png" mode=""></image>
-			<view class="com-text">系统建设中,敬请期待！</view>
-		</view>
-		 <!-- v-if="videoShow==true" -->
-		<swiper v-if="videoShow==true" @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
-			class="list">
-			<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
-				<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
-					@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
-					:show-center-play-btn='false' :controls="false" object-fit="cover" :autoplay='false' loop
-					src="https://media.w3.org/2010/05/sintel/trailer.mp4">
-					<cover-view class="back" v-if="item.active==false">
-						<cover-image class="pauseIcon" src="../../static/bofang.png"></cover-image>
-					</cover-view>
-					<cover-view class="iconList">
-						<cover-view class="iconListClass">
-							<cover-image class="icon" src="../../static/dituzhaoren3.png"></cover-image>
-							<cover-view>
-								<text class="context">12.5w</text>
-							</cover-view>
-						</cover-view>
-						<cover-view class="iconListClass">
-							<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
-							<cover-view>
-								<text class="context">12.5w</text>
-							</cover-view>
-						</cover-view>
-						<cover-view class="iconListClass">
-							<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
-							<cover-view style="white-space: nowrap;lines:1;">
-								<text class="context">12.5w</text>
-							</cover-view>
-						</cover-view>
-					</cover-view>
-					<cover-view class="formation">
-						<cover-view style="display: flex;align-items: center;flex-direction: row;">
-							<cover-image class="header"
-								src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
-							<cover-view>
-								<text class="context">作者</text>
-							</cover-view>
-						</cover-view>
-						<cover-view>
-							<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
-						</cover-view>
-					</cover-view>
-					<cover-view class="duration">
-						<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
-					</cover-view>
-				</video>
+	<view>
+		<!-- 
+		注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
+		 
+		1. new_index.nvue、index.nvue这两个是App页面
+		 
+		2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
+		 
+		3. 请各位大神多多留手，我已经把请求内存开到最大了
+		 
+		4. 视频 id 切记是字符串类型 -->
+		<image v-if="isShowAixin" src="@/static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image>
+		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" :duration="duration">
+			<swiper-item v-for="(list,index) in dataList" :key="index">
+				<view v-if="Math.abs(k-index)<=1">
+					<view>
+						<!-- 
+						1.v-if：用于控制视频在节点的渲染数
+						2.muted的默认值是 false，代表默认是禁音视频的
+						3.http-cache默认开启视频缓存
+						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
+						5.show-loading：这里默认去掉播放转圈的标志
+						v-if="Math.abs(k-index)<=1"
+						 -->
+						<video
+						v-if="isShow"
+						:id="list.id+''+index"
+						:loop="true"
+						:muted="list.isplay"
+						:controls="false"
+						:autoplay="true"
+						:http-cache="true"
+						:page-gesture="false"
+						:show-fullscreen-btn="false"
+						:show-loading="false"
+						:show-center-play-btn="false"
+						:enable-progress-gesture="false"
+						:src="list.filePath"
+						@ended="ended"
+						@click="tapVideoHover(list.state,$event)"
+						@timeupdate="timeupdate($event,index)"
+						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: 8;'"
+						:poster="list.filePath+'?x-oss-process=video/snapshot,t_100,f_jpg'"
+						></video>
+						<!-- 
+						1.这里是封面（方案二）：这里的封面可以自定义。
+						2.也在代码中做了批注，两种方案可以共存，不会相互影响。
+						-->
+						<image
+						v-if="!list.playIng"
+						:src="list.filePath+'?x-oss-process=video/snapshot,t_100,f_jpg'"
+						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute; z-index: 6;'"
+						mode="aspectFit"
+						></image>
+					</view>
+					<!-- 播放状态：pause 的时候就会暂停 -->
+					<view class="videoHover" @click="tapVideoHover(list.state,$event)" @touchstart="touchstartHover" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;z-index:14;'">
+						<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
+					</view>
+					<view class="userInfo">
+						<!-- 1.头像 -->
+						<image @click="tozuozhe" class="userAvatar" :src="list.href" mode="aspectFill"></image>
+						<!-- 2.点赞 -->
+						<view class="list-view" @click="cLike(list.like);" style="opacity: 0.9; margin-top: 17px;">
+							<image v-if="list.like" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
+							<image v-if="!list.like" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
+							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':list.like}">{{list.like_n}}</text>
+						</view>
+						<!-- 3.评论 -->
+						<view class="comment list-view" @click="toComment(index)" style="opacity: 0.9; margin-top: 17px;">
+							<image src="@/static/img/index/liaotian-2.png" style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
+							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.sms_n}}</text>
+						</view>
+						<!-- 4.分享 -->
+						<view @click="share" class="list-view" style="opacity: 0.9; margin-top: 17px;">
+							<image src="@/static/img/index/share-fill.png" style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
+							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
+						</view>
+						<view @click="dealVoice" class="list-view" style="margin-top: 17px;">
+							<view style="width: 48px; height: 48px; border-radius: 50px; position: absolute; right: 2.5px;">
+								<image :style="'width: 48px; height: 48px; border-radius: 50px; transform: rotate('+ rotates +'deg);'" src="@/static/img/index/bfq.png" mode="aspectFill"></image>
+								<image v-if="showPlay" :style="'width: 30px; height: 30px; margin-top: 9px; margin-left: 9px; position: absolute; border-radius: 50px; transform: rotate('+ rotates +'deg);'" :src="list.href" mode="aspectFill"></image>
+							</view>
+						</view>
+					</view>
+					<!-- 最底下的文字部分 -->
+					<view class="content" style="display: flex;flex-direction: column;">
+						<text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
+						<text class="words" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}-{{k+1}}</text><!-- k={{k}} -->
+					</view>
+					<!-- 进度条 -->
+					<view v-if="k === index" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-left: '+ (windowWidth * 0.05) +'px; height: 40px; position: absolute;bottom: 0px;margin-bottom: 6px;z-index: 14;'">
+						<!-- 不拖动情况下 -->
+						<view>
+							<!-- 1.底部背景进度条 -->
+							<view :style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #999999; opacity: 0.6;'"></view>
+							<!-- 2.播放的进度条 -->
+							<view v-if="isTouch==false" :style="'width: '+ ((windowWidth - (windowWidth*0.10)) * progressBarPercent) +'px; position: absolute;top: 0; margin-top: 18px;  height: 5px; border-radius: 10px; background-color: #e6e4e7; '"></view>
+							<!--  -->
+							<view v-if="isTouch==true" :style="'width: '+ (videoStartPositon + addPositon) +'px; position: absolute;top: 0; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #e6e4e7; '"></view>
+						</view>
+					</view>
+				</view>
 			</swiper-item>
- 
 		</swiper>
+		<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
+			<view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #242424; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
+				<!-- 
+				 注意：
+				 deleteIOSHeight
+				 deleteAndroidHeight
+				 这两个参数用于控制评论等的高度
+				 -->
+				<douyin-scrollview
+				:Width="windowWidth"
+				:Height="(boxStyle.height/1.23)"
+				:deleteIOSHeight="36"
+				:deleteAndroidHeight="15"
+				@closeScrollview="closeScrollview"
+				></douyin-scrollview>
+			</view>
+		</uni-popup>
 	</view>
 </template>
- 
+
 <script>
+	// import userList from '../new_index/data.js'//这个是假数据
+	let audo = uni.createInnerAudioContext()
+	audo.loop = true
+	import douyinScrollview from '@/components/douyin-scrollview/douyin-scrollview.vue'
 	export default {
+		components:{
+			douyinScrollview
+		},
 		data() {
 			return {
-				videoShow:false,
-				// 视频下标，记录播放到第几个
-				index: 0,
-				// 数据
-				allList: [{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 0
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 1
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 2
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 3
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 4
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 5
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 6
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 7
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 8
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 9
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 10
-					},
-				],
-				list: [{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 0
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 1
-					},
-					{
-						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						active: false,
-						currentTime: 0,
-						duration: 121,
-						percent: 0,
-						id: 2
-					},
-				],
-				// 播放器下标
-				activeIndex: 0,
-				// 记录上一个播放器下标
-				oldActiveIndex: 0,
+				windowWidth: 0,
+				windowHeight: 0,
+				platform: "",
+				model: "",
+				deleteHeight: 0,
+				dataList: [],
+				k: 0,
+				oldVideo: "",
+				voice: "",
+				timeout: "",
+				current: 0,
+				boxStyle:{//视频，图片封面样式🌟💗
+					'height': 0,
+					'width': 0,
+				},
+				
+				videoID: "",
+				isShow: false,
+				
+				showPlay: false,//转轮显示控制
+				rotates: 0,//转轮旋转角度
+				rotateTime: "",//转轮递归事件控制
+				xrotats: "",
+				
+				mpcleartime: "",
+				
+				isClick: false,
+				
+				changeTimeout: "",
+				mptime: 0,
+				mpstartTime: 0,
+				
+				duration: 500,
+				// -- 进度条相关 -- start
+				videoStartPositon: 0,
+				progressBarPercent: 0,
+				touchStartPosition: 0,
+				addPositon: 0,
+				timeduration: 0,
+				isTouch: false,
+				// -- 进度条相关 -- end
+				// 引入评论 - 参数
+				heightNum: 1.18,
+				
+				// 双击点赞参数
+				touchNum: 0,
+				aixinLeft: 0,
+				aixinTop: 0,
+				isShowAixin: false,
+				Rotate: 0,
+				
+				isShow1: false,//控制渲染变量1
+				isShow2: false,//控制渲染变量2 ： 专门控制 uni-popup
+				currents: 0,//用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
 				page:1,
-				limit:10,
+				limit:10
+			}
+		},
+		
+		watch:{
+			async k(k,old_k){
+				// console.log(k, old_k)
+				this.progressBarPercent = 0;
+				// #ifndef MP
+				this.clearToTime();
+				// #endif
+				this.isShow = false
+				this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
+				this.dataList[old_k].isplay = true
+				this.dataList[old_k].state = 'pause'
+				console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].id+''+old_k)
+				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
+				uni.createVideoContext(this.dataList[old_k].id + '' + old_k,this).stop()//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
+				console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～')//提示
+				this.dataList[k].state = 'play'
+				this.isShow = true
+				this.xrotats = setTimeout(()=>{
+					this.showPlay = true;
+					// #ifndef MP
+					this.rotateX();
+					// #endif
+				},200)
+				// #ifdef MP
+				// 如果是小程序端
+				clearTimeout(this.changeTimeout);
+				this.dataList[k].isplay = false
+				setTimeout(()=>{
+					this.dataList[k].playIng = true
+				},250)
+				if(this.mptime < 0.2){
+					this.changeTimeout = setTimeout(()=>{
+						uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
+					},1400)
+				} else {
+					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
+				}
+				// #endif
+				// #ifdef H5
+				this.dataList[k].isplay = true
+				audo.src = this.dataList[k].src
+				if(this.isClick){
+					setTimeout(()=>{
+						if (typeof WeixinJSBridge == "undefined") {
+							setTimeout(()=>{
+								audo.play()
+								uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
+								uni.createVideoContext(this.dataList[k].id+''+k,this).play()
+								setTimeout(()=>{
+									this.dataList[k].playIng = true
+								},650)
+							},500)
+						} else {
+							WeixinJSBridge.invoke('getNetworkType', {}, e => {
+								setTimeout(()=>{
+									audo.play()
+									uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
+									uni.createVideoContext(this.dataList[k].id+''+k,this).play()
+									setTimeout(()=>{
+										this.dataList[k].playIng = true
+									},850)
+								},200)
+							})
+						}
+					},200)
+				} else {
+					audo.pause()
+					this.dataList[k].state = 'pause'
+					uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
+					uni.createVideoContext(this.dataList[k].id+''+k,this).pause()
+				}
+				// #endif
+				var p = k+1;
+				console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].id+''+p)
 			}
 		},
-		onReady() {},
 		onLoad() {
-			this.jiukou()
+			this.platform = uni.getSystemInfoSync().platform
+			this.model = uni.getSystemInfoSync().model
+			var model = this.model
+			if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
+				this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
+			}
+			this.windowWidth = uni.getSystemInfoSync().windowWidth
+			this.windowHeight = uni.getSystemInfoSync().windowHeight
+			this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
+			this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
+			this.get() //刚进入页面加载数据
+			// #ifndef MP
+			this.rotateX();
+			// #endif
+		},
+		onShow(){
+			console.log('回到前台');
+			if(this.dataList.length !== 0){
+				// #ifdef MP
+				this.dataList[this.k].state = 'play';
+				uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
+				// #endif
+				// #ifdef H5
+				if(this.isClick){
+					this.dataList[this.k].state = 'play';
+					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
+					audo.play()
+				}
+				// #endif
+			}
+		},
+		onHide(){
+			// #ifdef MP
+			this.dataList[this.k].state = 'pause';
+			uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
+			// #endif
+			// #ifdef H5
+			if(this.isClick){
+				this.dataList[this.k].state = 'pause';
+				uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
+				audo.pause()
+			}
+			// #endif
+			console.log('到后台');
 		},
 		methods: {
-			jiukou(){
-				var data={
-					page:1,
-					limit:10,
-					// id:'1',
-					shipinquanId:'1'
+			closeScrollview(){
+				// 点击评论里面的叉叉，就会关闭评论
+				this.$refs.pinglun.close('bottom');
+			},
+			onTabItemTaps() {
+			    if (uni.getSystemInfoSync().platform == "ios") {
+			        let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
+			        let impact = new UIImpactFeedbackGenerator();
+			        impact.prepare();
+			        impact.init(1);
+			        impact.impactOccurred();
+			    }
+			    if (uni.getSystemInfoSync().platform == "android") {
+			        uni.vibrateShort({
+			            success: () => {
+			                console.log('点击震动');
+			            }
+			        });
+			    }
+			},
+			// 双击点赞效果
+			touchstartHover(event){
+				if(this.touchNum >= 1){
+					// console.log('双击 -- X坐标：'+ event.touches[0].screenX);
+					// console.log('双击 -- Y坐标：'+ event.touches[0].screenY);
+					this.aixinLeft = event.touches[0].screenX - 50;
+					this.aixinTop =  event.touches[0].screenY - 50;
+					this.isShowAixin = true;
+					let max = 40; let min = -40;
+					this.Rotate = Math.floor(Math.random() * (max - min + 1)) + min;
+					setTimeout(()=>{
+						this.isShowAixin = false;
+					},700)
+					this.onTabItemTaps();
 				}
+			},
+			tozuozhe(){
+				this.currents = 1//点击头像以后就会切换
+			},
+			mpTouchend(){
+				this.mptime = (new Date()/1000) - this.mpstartTime;
+			},
+			mpTouchstart(){
+				this.mpstartTime = (new Date()/1000);
+			},
+			dealVoice(){
+				uni.showToast({
+					title: '处理声音',
+					icon: 'none'
+				})
+			},
+			clearToTime(){
+				//清理定时器
+				for(let i=0;i<20;i++){
+					clearTimeout(this.rotateTime);
+					clearTimeout(this.xrotats);
+					this.showPlay = false;
+					this.rotates = 0;
+				}
+			},
+			clearTime(){
+				//清理定时器
+				for(let i=0;i<20;i++){
+					clearTimeout(this.rotateTime);
+					clearTimeout(this.xrotats);
+				}
+			},
+			rotateX(){
+				// clearTimeout(this.rotateTime);
+				this.rotateTime = setTimeout(()=>{
+					this.rotateX();
+					this.showPlay = true;
+					this.rotates += 1;
+				},30)
+			},
+			
+			ended(){
+				// 1.播放当前视频结束时触发，自动切换下一个视频
+				// this.current = this.k+1
+			},
+			// ---- 进度条相关 --- start
+			touchstart(e){
+				// console.log(e);
+				this.isTouch = true;
+				// #ifdef H5
+					this.addPositon = 0;
+					this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10)) * this.progressBarPercent;
+					this.touchStartPosition = e.changedTouches[0].clientX;
+				// #endif
+				// #ifdef MP
+				this.addPositon = 0;
+				this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10)) * this.progressBarPercent;
+				this.touchStartPosition = e.changedTouches[0].clientX;
+				// #endif
+			},
+			touchmove(e){
+				// console.log(e);
+				// #ifdef H5
+					let num = e.changedTouches[0].clientX - this.touchStartPosition;
+					if((this.videoStartPositon + num) <= (this.windowWidth - (this.windowWidth*0.10))) {
+						this.addPositon = e.changedTouches[0].clientX - this.touchStartPosition;
+					} else {
+						this.addPositon = 0;
+						this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10));
+					}
+				// #endif
+				
+			},
+			touchend(e){
+				// #ifdef H5
+					let per = Number( (this.videoStartPositon+this.addPositon) / (this.windowWidth - (this.windowWidth*0.10)) );
+					let timeSubmit = parseInt( this.timeduration * per )
+					audo.seek(timeSubmit)
+					audo.play()
+					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(timeSubmit)
+					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
+					this.dataList[this.k].state = 'play'
+					setTimeout(()=>{
+						this.isTouch = false;
+					},500)
+				// #endif
+				
+			},
+			timeupdate(event,index){
+				// 触发进度条更新
+				// console.log(event,index);
+				if(index === this.k){
+					this.timeduration = event.detail.duration;
+					this.progressBarPercent = parseFloat( Number( event.detail.currentTime / event.detail.duration ) );
+				}
+			},
+			// ---- 进度条相关 --- ending
+			doubleLike(){
+				if(this.dataList[this.k].like == false){
+					this.dataList[this.k].like_n += 1;
+					this.dataList[this.k].like = true;
+				}
+				/*
+				点赞
+				*/
+			},
+			//点击播放&&暂停
+			tapVideoHover(state,event){
+				// this.dataList[this.k].isShowimage = false
+				// this.dataList[this.k].isShowProgressBarTime = false
+				this.ProgressBarOpacity = 0.5
+				this.dotWidth = 0
+				console.log('state--',state);
+				// 1.启用双击点赞 --- start
+				this.touchNum++;
+				setTimeout(()=>{
+					if(this.touchNum == 1){
+						if(state=='play'||state=='continue'){
+							this.dataList[this.k].state = 'pause';
+						}else{
+							this.dataList[this.k].state = 'continue';
+						}
+						if(this.dataList[this.k].state == 'continue'){
+							uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
+							this.clearTime();
+							setTimeout(()=>{
+								this.rotateX();
+							},50)
+						}
+						if(this.dataList[this.k].state == 'pause'){
+							uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
+							this.clearTime();
+						}
+					}
+					if(this.touchNum >= 2){
+						this.doubleLike();
+					}
+					this.touchNum = 0;
+				},200)
+				// --------------- ending
+				// 2. 不启用双击点赞 start
+				// if(state=='play'||state=='continue'){
+				// 	this.dataList[this.k].state = 'pause';
+				// }else{
+				// 	this.dataList[this.k].state = 'continue';
+				// }
+				// if(this.dataList[this.k].state == 'continue'){
+				// 	uni.createVideoContext(this.dataList[this.k].id,this).play();//暂停以后继续播放
+				// }
+				// if(this.dataList[this.k].state == 'pause'){
+				// 	uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
+				// }
+				// --------------- ending
+			},
+			//点击播放&&暂停
+			tapVideoHovers(state,event){
+				console.log('state--',state);
+				if(state=='play'||state=='continue'){
+					this.dataList[this.k].state = 'pause';
+				}else{
+					this.dataList[this.k].state = 'continue';
+				}
+				if(this.dataList[this.k].state == 'continue'){
+					this.isClick = true;
+					this.dataList[this.k].playIng = true
+					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
+					// #ifdef MP
+					this.dataList[this.k].isplay = false
+					// #endif
+					// #ifdef H5
+					audo.play()
+					// #endif
+				}
+				if(this.dataList[this.k].state == 'pause'){
+					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
+					// #ifdef MP
+					this.dataList[this.k].isplay = true
+					// #endif
+					// #ifdef H5
+					audo.pause()
+					// #endif
+				}
+			},
+			change(event){
+				this.k = event.detail.current
+			},
+			animationfinish(event){
+				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
+				if(this.k == this.dataList.length - 1){
+					this.GET()
+				}
+			},
+			//每一组结束时新的请求
+			GET(){
 				uni.request({
 					url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
 					method: 'POST',
@@ -207,245 +554,209 @@
 					},
 					success: (res) => {
 						var msg = res.data.data
+						// 2.这里把视频添加到视频列表
+						for (let i = 0; i < msg.length; i++) {
+							this.dataList.push(msg[i])
+						}
 					}
 				})
-				// this.$Request.getT('/app/shipinquan/list',data).then(res => {
-				// 	if (res.code == 0) {
-				// 	}
-				// });
-				// this.$Request.post('/app/shipinquan/add',data).then(res => {
-				// 	if (res.code == 0) {
-				// 	}
-				// });
-				// this.$Request.post('/app/shipinquan/delete',data).then(res => {
-				// 	if (res.code == 0) {
-				// 	}
-				// });
-				// this.$Request.post('/app/shipinquan/addContent',data).then(res => {
-				// 	if (res.code == 0) {
-				// 	}
-				// });
-				// this.$Request.getT('/app/shipinquan/contentlist',data).then(res => {
-				// 	if (res.code == 0) {
-				// 	}
-				// });
 			},
-			qiehuan(e) {
-				if (this.oldActiveIndex < e.detail.current) {
-					if (this.oldActiveIndex - e.detail.current != -2) {
-						console.log('上滑');
-						this.index++
-						this.next(e.detail.current)
-					} else {
-						console.log("下滑");
-						this.pre(e.detail.current)
-						this.index--
-					}
-				} else if (this.oldActiveIndex > e.detail.current) {
-					if (this.oldActiveIndex - e.detail.current != 2) {
-						console.log('下滑');
-						this.pre(e.detail.current)
-						this.index--
-					} else {
-						console.log("上滑");
-						this.index++
-						this.next(e.detail.current)
-					}
+			get(){
+				// 1.这里引入后端请求数据
+				var data={
+					page: this.page,
+					limit:this.limit,
 				}
-				this.$nextTick(() => {
-					this.oldActiveIndex = e.detail.current
+				this.$Request.get("/app/shipinquan/list", data).then(res => {
+					if (res.code == 0) {
+							var msg = res.data.records
+							// this.dataList=res.data.records
+							this.isShow = false;
+							// 2.这里把视频添加到视频列表
+							this.dataList = msg.map(item => {
+							  return {
+							    ...item,
+							    isplay: true,
+								playIng: true,
+								state: 'pause',
+							  };
+							});
+							console.log("this.dataList",this.dataList)
+							// 3.播放当前视频
+							// setTimeout(()=>{
+							// 	this.isShow = true;
+							// 	this.dataList[this.k].isplay = true
+							// 	this.dataList[this.k].playIng = true
+							// 	setTimeout(()=>{
+							// 		uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
+							// 		uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
+							// 		this.dataList[this.k].state = 'pause';
+							// 		audo.src = this.dataList[this.k].src;
+									
+							// 	},500)
+							// },200)
+							// this.videoID = this.dataList[this.k].id
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				});
+				// uni.request({
+				// 	url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
+				// 	method: 'POST',
+				// 	data:{
+				// 		info: 'get_video'
+				// 	},
+				// 	success: (res) => {
+				// 		this.isShow = false;
+				// 		var msg = res.data.data
+				// 		// 2.这里把视频添加到视频列表
+				// 		for (let i = 0; i < msg.length; i++) {
+				// 			this.dataList.push(msg[i])
+				// 		}
+				// 		// 3.播放当前视频
+				// 		setTimeout(()=>{
+				// 			this.isShow = true;
+				// 			this.dataList[this.k].isplay = true
+				// 			this.dataList[this.k].playIng = true
+				// 			setTimeout(()=>{
+				// 				uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
+				// 				uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
+				// 				this.dataList[this.k].state = 'pause';
+				// 				audo.src = this.dataList[this.k].src;
+								
+				// 			},500)
+				// 		},200)
+				// 		this.videoID = this.dataList[this.k].id
+				// 	}
+				// })
+			},
+			share(){
+				uni.showToast({
+					title: '分享',
+					icon: 'none'
 				})
 			},
-			next(index) {
-				if (Object.is(this.index, 2)) {
-				}
-				if (Object.is(index, 0)) {
-					this.list[1] = this.allList[this.index + 1]
-				}
-				if (Object.is(index, 1)) {
-					this.list[2] = this.allList[this.index + 1]
-				}
-				if (Object.is(index, 2)) {
-					this.list[0] = this.allList[this.index + 1]
-				}
-				this.play(this.activeIndex)
+			toComment(index){
+				// 注意点击评论之后会执行这里
+				/*
+				（1）先加载缓冲
+				（2）获取当前视频 ID 信息
+				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
+					- 一定要记得看 index.vue 里面
+					 uni.setStorageSync("user",this.peopleList[i]);
+					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
+					 记得写一下。
+					 
+				（4）打开评论
+				*/ 
+				uni.showToast({
+					title: '加载中...',
+					icon: 'none',
+					position: 'bottom',
+					duration: 300
+				})
+				uni.setStorageSync("videoID",this.dataList[index].id);
+				this.videoID = this.dataList[index].id;
+				this.$refs.pinglun.open('bottom')
 			},
-			pre(index) {
-				if (Object.is(this.index, 2)) {
-				}
-				if (Object.is(index, 0)) {
-					this.list[2] = this.allList[this.index - 2]
-				}
-				if (Object.is(index, 1)) {
-					this.list[0] = this.allList[this.index - 2]
-				}
-				if (Object.is(index, 2)) {
-					this.list[1] = this.allList[this.index - 2]
-				}
-				this.play(this.activeIndex)
-			},
-			play(index) {
-				for (let i = 0; i < 3; i++) {
-					uni.createVideoContext(`Video${i}`, this).pause()
-				}
-				this.videoContext = uni.createVideoContext('Video' + index, this)
-				this.list[index].active = true
-				this.videoContext.play()
-			},
-			swiper(e) {
-				// console.log(e.detail.current);
-				this.activeIndex = e.detail.current
-				// this.play(e.detail.current)
-				// this.play(this.activeIndex)
-			},
-			end(e) {
-				this.activeIndex++
-				if (Object.is(this.activeIndex, 3)) {
-					this.activeIndex = 0
-				}
-			},
-			long(e, item, index) {
-				item.currentTime = e.detail.currentTime
-				item.percent = (e.detail.currentTime / e.detail.duration) * 750
-			},
-			pause(item, index) {
-				this.videoContext = uni.createVideoContext('Video' + index, this)
-				if (item.active) {
-					this.videoContext.pause()
-				} else {
-					this.videoContext.play()
-				}
-				this.list[index].active = !this.list[index].active
-			},
-			videoClick() {
- 
+			cLike(sss){
+				this.dataList[this.k].like = !this.dataList[this.k].like
+				const video = this.dataList[this.k];
+				sss?video.like_n -= 1:video.like_n += 1;
 			}
 		}
 	}
 </script>
- 
+
 <style scoped>
-	.com-line{
-		width:80%;
-		margin: 45% auto;
-		text-align: center;
-	}
-	.com-text{
-		font-size: 26rpx;
-		color: #999;
-	}
-	.list {
-		background-color: black;
-		flex: 1;
-		width:100%;
-		height: 100%;
-	}
- 
-	.video {
-		flex: 1;
-		width: 100%;
-		height: 90%;
-	}
- 
-	.back {
-		background-color: rgba(225, 225, 225, 0.3);
-		flex: 1;
-		width: 100%;
-		justify-content: center;
-		align-items: center;
-	}
- 
-	.pauseIcon {
-		position: absolute;
-		left: calc(50% - 25px);
-		top: calc(50% - 30px);
-		width: 50px;
-		height: 60px;
-	}
- 
-	.duration {
-		position: absolute;
-		left: 0px;
-		bottom: 0px;
-		width: 100vw;
-		height: 3px;
-	}
- 
-	.long {
-		height: 100%;
-		background-color: white;
-	}
- 
- 
- 
-	.formation {
-		flex-direction: column;
-		position: absolute;
-		left: 10px;
-		bottom: 10px;
-		width: calc(100% - 80px);
-		display: flex;
-	}
- 
-	.header {
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-	}
- 
-	.iconListClass {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-	}
- 
-	.context {
-		white-space: nowrap;
-		width: 100rpx;
-		color: white;
-		margin-left: 5px;
-		font-size: 13px;
-		font-weight: bold;
-	}
- 
-	.title {
-		width: 600rpx;
-		margin-top: 10px;
-		color: white;
-		margin-left: 5px;
-		font-size: 13px;
-		font-weight: bold;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		lines: 1;
-	}
- 
- 
-	.iconList {
+	.list-view{
 		display: flex;
 		flex-direction: column;
+		align-items: center;
+	}
+	.container {background-color: #000000;}
+	.item {
+		/* width : 750rpx; */
+		background-color: #000000;
+		position: relative;
+	}
+	.videoHover{
+		position: absolute;
+		top: 0;
+		left: 0;
+		flex: 1;
+		background-color: rgba(0,0,0,0.1);
 		justify-content: center;
 		align-items: center;
-		width: 40px;
+		display: flex;
+		/* border-style: dashed;
+		border-color: #DD524D;
+		border-width: 1px; */
+	}
+	.playState{
+		width:  160rpx;
+		height: 160rpx;
+		opacity: 0.2;
+	}
+	.userInfo{
 		position: absolute;
+		bottom:110px;
 		right: 10px;
-		bottom: 161px;
-		width: 70px;
+		display: flex;
+		flex-direction: column;
+		z-index: 18;
 	}
- 
-	.icon {
-		margin-top: 10px;
-		width: 20px;
-		height: 20px;
+	.userAvatar{
+		border-radius: 500%;
+		border-style: solid;
+		border-width: 2px;
+		border-color: #ffffff;
 	}
-	/deep/.uni-cover-view{
-		margin-top: 10px;
+	.userAvatar{
+		width : 100rpx;
+		height: 100rpx;
 	}
-	.context {
+	.likeIco,.shareIco,.commentIco{
+		width : 60rpx;
+		height: 60rpx;
+		margin-top: 15px;
+	}
+	.likeNum,.commentNum,.shareTex{
+		color: #ffffff;
+		font-size: 30rpx;
 		text-align: center;
-		color: white;
-		font-size: 13px;
+		margin: 5px;
 	}
-</style>
\ No newline at end of file
+	.likeNumActive{
+		color: red;
+	}
+	.content{
+	  width: 620rpx;
+	  z-index: 99;
+	  position: absolute;
+	  bottom: 50px;
+	  /* justify-content: center; */
+	  padding: 15rpx;
+	  flex-direction: column;
+	  justify-content: flex-start;
+	  color: #ffffff;
+	  z-index: 12;
+	  /* background-color: aqua; */
+	}
+	.userName {
+	  font-size: 30rpx;
+	  color: #ffffff;
+	  margin-top: 80upx;
+	}
+	.words {
+	  margin-top: 10rpx;
+	  font-size: 30rpx;
+	  color: #ffffff;
+	}
+	.root{
+		background-color: #000000;
+	}
+</style>