899 lines
28 KiB
Vue
899 lines
28 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 视频 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 v-if="dataList.length>0" :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"
|
||
:http-cache="true"
|
||
:autoplay="false"
|
||
: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"
|
||
></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(list)" class="userAvatar" :src="list.artificerImg" mode="aspectFill"></image>
|
||
<!-- 2.上线或者下单 -->
|
||
<view v-if="list.onLine == 1" class="comment list-view" @click="tozuozhe(list)" style="opacity: 0.9; margin-top: 17px;">
|
||
<image src="@/static/img/index/lijiyuyue.png" style="width:40px; height:40px; position: absolute; right: 7px;"></image>
|
||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">预约</text>
|
||
</view>
|
||
<view v-if="list.onLine == 2" class="comment list-view" @click="shangxian(list)" style="opacity: 0.9; margin-top: 17px;">
|
||
<image src="@/static/img/index/qingtashangxian.png" style="width:40px; height:40px; position: absolute; right: 7px;"></image>
|
||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">上线</text>
|
||
</view>
|
||
<!-- 2.点赞 -->
|
||
<view class="list-view" @click="cLike(list.sfdz);" style="opacity: 0.9; margin-top: 17px;">
|
||
<image v-if="list.sfdz==1" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
||
<image v-if="list.sfdz==0" 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.sfdz}">{{list.dzs}}</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:38px; height:36px; 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.pls}}</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> -->
|
||
{{list.content}}
|
||
<!-- <text class="words" :style="'width: '+ (windowWidth - 90) +'px;'"></text> -->
|
||
</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 class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
||
<view class="popup-content" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
|
||
<CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
|
||
<!-- <div class="btn" @click="openComment">发一条新评论</div> -->
|
||
<!-- <douyin-scrollview
|
||
:Width="windowWidth"
|
||
:Height="(boxStyle.height/1.23)"
|
||
:deleteIOSHeight="36"
|
||
:deleteAndroidHeight="15"
|
||
@closeScrollview="closeScrollview"
|
||
></douyin-scrollview> -->
|
||
</view>
|
||
</uni-popup>
|
||
<empty v-if="dataList.length==0"></empty>
|
||
</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'
|
||
import empty from '@/components/empty.vue'
|
||
import CComment from "@/components/XJ-comment/index";
|
||
export default {
|
||
components:{
|
||
douyinScrollview,
|
||
CComment,
|
||
empty
|
||
},
|
||
data() {
|
||
return {
|
||
isLiked:false,
|
||
dianzhan:0,
|
||
showPopup:false,
|
||
ccRef: null,
|
||
userInfo: {
|
||
id: 120,
|
||
user_name: "🍁",
|
||
user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
|
||
},
|
||
tableTotal: 4,
|
||
tableData: [],
|
||
deleteMode: "all",
|
||
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
|
||
}
|
||
},
|
||
|
||
watch:{
|
||
async k(k,old_k){
|
||
// console.log(k, old_k)
|
||
this.progressBarPercent = 0;
|
||
|
||
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;
|
||
},200)
|
||
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()
|
||
}
|
||
// var p = k+1;
|
||
// console.log('预加载第' + (k) + '个视频：' + this.dataList[k].id+''+p)
|
||
}
|
||
},
|
||
onLoad() {
|
||
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() //刚进入页面加载数据
|
||
},
|
||
onShow(){
|
||
console.log('回到前台');
|
||
let userId = uni.getStorageSync('userId')
|
||
if (userId) {
|
||
var add=uni.getStorageSync('cityAdderss');
|
||
}else{
|
||
var add=uni.getStorageSync('cityAdderss');
|
||
uni.navigateTo({
|
||
url: '/pages/public/login'
|
||
})
|
||
}
|
||
if(this.isClick){
|
||
this.dataList[this.k].state = 'pause';
|
||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
|
||
audo.pause()
|
||
}
|
||
},
|
||
onHide(){
|
||
console.log('到后台');
|
||
if(this.isClick){
|
||
this.dataList[this.k].state = 'pause';
|
||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
|
||
audo.pause()
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
openComment() {//点击发布新评论按钮
|
||
this.$refs.ccRef.newCommentFun();
|
||
},
|
||
likeFun(params, callback) {//评论点赞返回
|
||
console.log("likeFun", params);
|
||
// Implement your logic for likeFun
|
||
},
|
||
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');
|
||
this.getPingL(this.videoID);
|
||
},
|
||
shangxian(item){//请TA上线
|
||
var data={
|
||
userId: item.createBy,
|
||
byUserId: uni.getStorageSync('userId'),
|
||
}
|
||
this.$Request.post("/app/message/insertUpMessage", data).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '提醒成功！'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
icon:'error',
|
||
title: '提醒失败！'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
getPingL(shipinquanId){//获取评论列表
|
||
var data={
|
||
page: this.page,
|
||
limit:310,
|
||
shipinquanId:shipinquanId
|
||
}
|
||
this.$Request.get("/app/shipinquan/contentlist", data).then(res => {
|
||
if (res.code == 0) {
|
||
var msg = res.data.records||{}
|
||
this.tableTotal=res.data.total;
|
||
var list=[];
|
||
// for (let i = 0; i < msg.length; i++) {
|
||
// list.push(msg[i])
|
||
// }
|
||
|
||
this.tableData = msg.map(item => {
|
||
return {
|
||
...item,
|
||
parent_id: null,
|
||
reply_id: null,
|
||
reply_name: null,
|
||
user_name: item.userName,
|
||
user_avatar: item.userPhoto?item.userPhoto:'../../static/logo.png',
|
||
user_content: item.content,
|
||
is_like: true,
|
||
like_count: 8,
|
||
create_time: item.createTime
|
||
};
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
replyFun(params, callback) {
|
||
// console.log("replyFun", params);
|
||
if(params.params.user_content==''){
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon:'error',
|
||
title:'请填写发布评论'
|
||
})
|
||
}else{
|
||
var data={
|
||
createBy:uni.getStorageSync('userId'),
|
||
content:params.params.user_content,
|
||
shipinquanId:this.videoID,
|
||
}
|
||
this.$Request.post("/app/shipinquan/addContent",data).then(res => {
|
||
if (res.code == 0) {
|
||
setTimeout(() => this.getPingL(this.videoID), 500);
|
||
this.showPopup==true;
|
||
uni.hideLoading();
|
||
this.dataList[this.k].pls++
|
||
// callback(this.videoID);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
deleteFun({ params, mode }, callback) {
|
||
|
||
console.log("deleteFun", { params, mode });
|
||
// 当请求成功, 调用callback执行评论删除;
|
||
switch (this.deleteMode) {
|
||
case "bind":
|
||
// 逻辑: 调用接口进行评论内容修改 update
|
||
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||
break;
|
||
case "only":
|
||
// 逻辑: 调用接口删除一个评论 delete
|
||
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||
break;
|
||
default:
|
||
// all
|
||
// 逻辑: 调用接口删除多个评论 [delete]
|
||
// Demo如下:
|
||
// axios.post("http://xxx/delete", { ids: params }).then((res) => {
|
||
// if (res.code === 0) {
|
||
// callback(res);
|
||
// }
|
||
// });
|
||
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||
break;
|
||
}
|
||
},
|
||
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(item){
|
||
// console.log("itemitemitemitemitem",item)
|
||
uni.reLaunch({
|
||
url:'/pages/therapist/orderDetail?artificerId='+item.createBy+'&classifyId='+'undefined'
|
||
})
|
||
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].sfdz == '0'){
|
||
|
||
var data={
|
||
createBy:uni.getStorageSync('userId'),
|
||
shipinquanId:this.dataList[this.k].id,
|
||
}
|
||
this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
|
||
if (res.code == 0) {
|
||
this.dataList[this.k].dzs += 1;
|
||
this.dataList[this.k].sfdz = '1';
|
||
} else {
|
||
this.dataList[this.k].sfdz ='0'
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
/*
|
||
点赞
|
||
*/
|
||
},
|
||
//点击播放&&暂停
|
||
//点击播放&&暂停
|
||
tapVideoHover(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();//暂停以后继续播放
|
||
audo.play()
|
||
}
|
||
if(this.dataList[this.k].state == 'pause'){
|
||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
|
||
audo.src = this.dataList[this.k].src;
|
||
audo.pause()
|
||
}
|
||
},
|
||
//点击播放&&暂停
|
||
tapVideoHovers(state,event){
|
||
console.log('state--2',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;
|
||
this.dataList[this.k].muted = !this.dataList[this.k].muted;
|
||
}
|
||
if(this.dataList[this.k].state == 'pause'){
|
||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
|
||
audo.pause()
|
||
}
|
||
},
|
||
change(event){
|
||
this.k = event.detail.current
|
||
},
|
||
animationfinish(event){
|
||
// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
|
||
if(this.k == this.dataList.length - 1){
|
||
this.page++
|
||
this.GET()
|
||
|
||
}
|
||
},
|
||
//每一组结束时新的请求
|
||
GET(){
|
||
var data={
|
||
page: this.page,
|
||
limit: this.limit,
|
||
userId: uni.getStorageSync('userId'),
|
||
status: '1'
|
||
}
|
||
this.$Request.get("/app/shipinquan/list", data).then(res => {
|
||
if (res.code == 0) {
|
||
var msg = res.data.list||{}
|
||
// 2.这里把视频添加到视频列表
|
||
for (let i = 0; i < msg.length; i++) {
|
||
this.dataList.push(msg[i])
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
get(){
|
||
// 1.这里引入后端请求数据
|
||
var data={
|
||
page: this.page,
|
||
limit:this.limit,
|
||
userId:uni.getStorageSync('userId'),
|
||
status: '1'
|
||
}
|
||
this.$Request.get("/app/shipinquan/list", data).then(res => {
|
||
if (res.code == 0) {
|
||
var msg = res.data.list||{}
|
||
// this.dataList=res.data.records
|
||
this.isShow = false;
|
||
// 2.这里把视频添加到视频列表
|
||
this.dataList = msg.map(item => {
|
||
return {
|
||
...item,
|
||
isplay: true,
|
||
playIng: true,
|
||
state: 'pause',
|
||
src:item.filePath
|
||
};
|
||
});
|
||
// 3.播放当前视频
|
||
setTimeout(()=>{
|
||
this.isShow = true;
|
||
this.dataList[this.k].isplay = true
|
||
this.dataList[this.k].playIng = true
|
||
setTimeout(()=>{
|
||
this.dataList[this.k].state = 'pause';
|
||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
|
||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).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'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
share(){
|
||
uni.showToast({
|
||
title: '分享',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
|
||
cLike(sss){
|
||
var data={
|
||
createBy:uni.getStorageSync('userId'),
|
||
shipinquanId:this.dataList[this.k].id,
|
||
}
|
||
// this.dataList[this.k].sfdz = !this.dataList[this.k].sfdz
|
||
if(this.dataList[this.k].sfdz=='0'){
|
||
this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
|
||
if (res.code == 0) {
|
||
this.dataList[this.k].dzs += 1;
|
||
this.dataList[this.k].sfdz = '1';
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
|
||
}else{//取消点赞
|
||
this.$Request.post("/app/shipinquan/delDianzan", data).then(res => {
|
||
if (res.code == 0) {
|
||
this.dataList[this.k].dzs -= 1;
|
||
this.dataList[this.k].sfdz = '0';
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.uni-popup{
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: auto;
|
||
}
|
||
.popup-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #242424;
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
/deep/uni-tabbar /deep/.uni-tabbar-bottom /deep/.uni-tabbar{
|
||
z-index: 998;
|
||
}
|
||
|
||
.btn {
|
||
text-align: center;
|
||
color: #fff;
|
||
padding: 20rpx;
|
||
margin: 20rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #2979ff;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
z-index: 666;
|
||
width: 90%;
|
||
}
|
||
.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;
|
||
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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 18;
|
||
}
|
||
.userAvatar{
|
||
border-radius: 500%;
|
||
border-style: solid;
|
||
border-width: 2px;
|
||
border-color: #ffffff;
|
||
}
|
||
.userAvatar{
|
||
width : 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
.likeIco,.shareIco,.commentIco{
|
||
width : 60rpx;
|
||
height: 60rpx;
|
||
margin-top: 15px;
|
||
}
|
||
.likeNum,.commentNum,.shareTex{
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
margin: 5px;
|
||
}
|
||
.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;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
|
||
/* 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>
|