<template>
<view class="container">
<!--
注意：这是 App 所用页面，请勿引入微信小程序或浏览器运行，最好运行在真机
1. new_index.nvue、index.nvue这两个是App页面
2. index.nvue - 页面预加载使用 - 在线预加载方案
3. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
4. 请各位大神多多留手，我已经把请求内存开到最大了
5. 视频 id 切记是字符串类型
6. 这里仅 App 端引入了 App 端专用评论，小程序 、H5 引入的时候 可以作为参考
【
App、小程序、H5评论请参考插件：https://ext.dcloud.net.cn/plugin?id=7875
】
-->
<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>
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" v-if="isShow1">
<!--
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
3.由于方法比较多，可以采取下面的方式查看代码：
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
-->
<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
ref="listBox" :pagingEnabled="true" :scrollable="true">
<!-- 循环数据 -->
<cell v-for="(item,i) in dataList" :key="i">
<!-- 用div把视频模组套起来 -->
<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" @disappear="stop()"
:ref="'item'+i">
<view v-if="(k-i)<=1">
<view class="root">
<video :id="item._id+''+i" :loop="true" :src="item.src" :muted="item.isplay"
@play="playIngs(i)" :enable-progress-gesture="false" :page-gesture="false"
:controls="false" :http-cache="true" :show-loading="true"
:show-fullscreen-btn="false" :show-center-play-btn="false" :style="boxStyle"
:object-fit="object_fit" @timeupdate="timeupdate($event,i)"></video>
</view>
<!-- <image v-if="!item.playIng" :src="item.src+'?x-oss-process=video/snapshot,t_480,f_jpg'"
:mode="mode"
:style="'width: '+ windowWidth +'px; height: '+ (wHeight - safeAreaHeight) +'px; position: absolute;'">
</image> -->
<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
<!-- 这个是暂停时出现的图标 -->
<view class="videoHover" @click="tapVideoHover(item.state,$event)"
@touchstart="touchstartHover" :style="boxStyle">
<image v-if="item.state=='pause'" class="playState" src="@/static/img/index/play.png">
</image>
</view>
<!-- 最底下的文字部分 -->
<view class="content"
v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == false">
<text class="userName"
:style="'width: '+ (windowWidth - 90) +'px;'">{{item.title}}</text><!-- i={{i}} -->
<text class="words"
:style="'width: '+ (windowWidth - 90) +'px;'">{{item.msg}}-{{k+1}}</text><!-- k={{k}} -->
</view>
<!-- 1.视频预览时的图片，currenttimes：就是获取当前滑块的时间点，如果不需要，可以注释掉 -->
<!-- 2.如果使用下面的视频预览的话要注意的是视频链接最好是阿里云上的，因为
https://xxxxxxxxx.mp4?x-oss-process=video/snapshot,t_1000,f_jpg
这个是阿里云的东西，至于其他的视频截帧我还没有试过。
-->
<!-- 3.阿里云视频截帧地址：https://help.aliyun.com/document_detail/64555.html -->
<image v-if="item.isShowimage == true"
:src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'"
mode="aspectFill"
:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 160) +'upx; left: '+ (currentPositions - 15) +'px;'">
</image>
</view>
</div>
</cell>
</list>
<!-- 1.注意：进度条这类拖拽的东西不能放进block\cell这些循环体中的，要不然touchmove方法会捕捉有误 -->
<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true"
:style="'position: absolute; bottom: '+ (ProgressBarBottom + this.windowWidth*0.2)/2 +'px; left: '+ (windowWidth*2 - this.windowWidth*1.35)/2 +'px;'">
<text style="font-size: 22px; font-weight: bold; color: #F1F1F1;">{{changeTime}} / {{videoTimes}}</text>
</view>
<!-- 这里就是进度条了：纯手工进度条，调整位置的话就把他们的 bottom 改成一下就行了 -->
<view v-if="isDragging == false" @touchmove="touchmove" @touchend="touchend" @touchstart="touchstart"
style="position: absolute; bottom: 0px; left: 0;">
<!-- 1.这一步必须加，为了适配低端机型 -->
<text :style="'width: '+ windowWidth +'px; opacity: 0;'"></text>
<!-- 2.这是未加载的时的右边的灰色部分 -->
<view
:style="'width: '+ windowWidth +'px; height: 12upx; background-color: #C8C7CC; position: absolute; bottom: 0upx; opacity: '+ ProgressBarOpacity +';'">
</view>
<!-- 3.这里我采用的分离式办法：就是让滑动样式和不滑动的样式分开，这样相互不干扰，可以避免进度条闪动的问题 -->
<!-- 4.注意：isShowProgressBarTime 加入了返回数据中 -->
<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == false"
:style="'width: '+ (currentPosition) +'px; height: 12upx; background-color: #1D87FF; position: absolute; bottom: 0upx; left: 0; '">
</view>
<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true"
:style="'width: '+ (currentPositions) +'px; height: 12upx; background-color: #1D87FF; position: absolute; bottom: 0upx; left: 0; opacity: '+ (ProgressBarOpacity + 0.05) +';'">
</view>
<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == false"
:style="'width: 12upx; height: 12upx; background-color: #1D87FF;position: absolute; bottom: 0upx; left: '+ (currentPosition) +'px;'">
</view>
<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true"
:style="'width: '+ dotWidth +'px; height: '+ dotWidth +'px; background-color: #1D87FF; border-radius: 10px; position: absolute; bottom: 0upx; left: '+ (currentPositions - 5) +'px; opacity: '+ ProgressBarOpacity +';'">
</view>
</view>
</view>
<view :style="'width: '+ windowWidth +'px; height: '+ safeAreaHeight +'px; background-color: #fff;'">
<view @click="openSelect"
:style="'width: '+ (windowWidth*0.9) +'px; height: 40px; margin-top: 15px; border-radius: 50px; margin-left: '+ (windowWidth*0.05) +'px; display: flex; flex-direction: row; background-color: #1D87FF;'">
<text
:style="'font-size: 16px; font-weight: bold; color: #FFFFFF; margin-top: 9px; height: 22px; margin-left: 20px; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">正在播放第{{ Number(k+1) }}集</text>
<image src="@/static/img/index/up.png"
:style="'width: 30px; height: 30px; position: absolute; margin-top: 5px; margin-left: '+ (windowWidth*0.79) +'px;'">
</image>
</view>
</view>
<!-- 评论弹窗 -->
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle" v-if="isShow2">
<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>
<!-- 选集弹窗 -->
<uni-popup type="bottom" ref="select" v-if="isShow2">
<view class="xuanji">
<view class="morhs"></view>
<text class="xuanjititle">{{dataList[k].title}}</text>
<text class="xuanjitext">{{dataList[k].msg}}</text>
<!-- :scroll-top="scrollTop" -->
<scroll-view :style="'width: '+ (windowWidth) +'px; height: '+ ((wHeight/1.6)*0.85) +'px;'"
:scroll-y="true">
<view class="xuanjilist">
<view class="xuanjilis" v-for="(list,index) in dataList" @click="selectThisVideo(index)">
<text class="xuanjilistext" :class="index==k?'active':''">{{ Number(index+1) }}</text>
<!-- <view class="xuanjilisplay"><image src="../../static/bfz.png" mode="heightFix"></image></view> -->
</view>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 详情弹窗 -->
<uni-popup type="bottom" ref="detail" v-if="isShow3">
<view class="xuanji">
<view class="morhs"></view>
<text class="xuanjititle">{{ detail.name }}</text>
<text class="xuanjititle">
第{{Number(k + 1)}}集 共{{detail.row_number}}集
</text>
<text class="xuanjitext">{{detail.desc}}</text>
</view>
</uni-popup>
<view class="fhiconf" @click="goBack">
<image class="fhiconfi" src="../../static/images/fhw.png" mode="heightFix"></image>
</view>
</view> </template>
<script>
// import userList from './data.js'//这个是假数据
/
引入评论组件
/
import douyinScrollview from '@/components/douyin-scrollview/douyin-scrollview.nvue'
import http from '../../utils/request.js'
export default {
data() {
return {
//下面打
