yangjun
/
sadjv3_user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
sadjv3_user/pages/videoCircle/index.vue

974 lines
30 KiB
Vue
Raw Normal View History

测试
2024-06-12 15:52:21 +08:00
<template>
秒杀 视频
2024-07-22 10:05:30 +08:00
<view>
视频点赞
2024-07-22 21:06:16 +08:00
<!-- 视频 id 切记是字符串类型 -->
秒杀 视频
2024-07-22 10:05:30 +08:00
<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"
:http-cache="true"
视频圈
2024-07-24 13:50:45 +08:00
:autoplay="true"
秒杀 视频
2024-07-22 10:05:30 +08:00
: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.头像 -->
评论
2024-07-23 15:42:42 +08:00
<image @click="tozuozhe(list)" class="userAvatar" :src="list.artificerImg" mode="aspectFill"></image>
秒杀 视频
2024-07-22 10:05:30 +08:00
<!-- 2.点赞 -->
评论
2024-07-23 15:42:42 +08:00
<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>
秒杀 视频
2024-07-22 10:05:30 +08:00
</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>
视频点赞
2024-07-22 21:06:16 +08:00
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.pls}}</text>
秒杀 视频
2024-07-22 10:05:30 +08:00
</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> -->
评论
2024-07-23 15:42:42 +08:00
<!-- <view @click="dealVoice" class="list-view" style="margin-top: 17px;">
秒杀 视频
2024-07-22 10:05:30 +08:00
<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>
评论
2024-07-23 15:42:42 +08:00
</view> -->
秒杀 视频
2024-07-22 10:05:30 +08:00
</view>
<!-- 最底下的文字部分 -->
<view class="content" style="display: flex;flex-direction: column;">
<!-- <text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text> -->
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
{{list.content}}
<!-- <text class="words" :style="'width: '+ (windowWidth - 90) +'px;'"></text> -->
秒杀 视频
2024-07-22 10:05:30 +08:00
</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>
测试
2024-06-12 15:52:21 +08:00
</swiper-item>
</swiper>
评论
2024-07-23 15:42:42 +08:00
<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;'">
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
<CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
评论
2024-07-23 15:42:42 +08:00
<div class="btn" @click="openComment">发一条新评论</div>
秒杀
2024-07-22 13:58:35 +08:00
<!-- <douyin-scrollview
秒杀 视频
2024-07-22 10:05:30 +08:00
:Width="windowWidth"
:Height="(boxStyle.height/1.23)"
:deleteIOSHeight="36"
:deleteAndroidHeight="15"
@closeScrollview="closeScrollview"
秒杀
2024-07-22 13:58:35 +08:00
></douyin-scrollview> -->
秒杀 视频
2024-07-22 10:05:30 +08:00
</view>
</uni-popup>
测试
2024-06-12 15:52:21 +08:00
</view>
</template>
秒杀 视频
2024-07-22 10:05:30 +08:00
测试
2024-06-12 15:52:21 +08:00
<script>
秒杀 视频
2024-07-22 10:05:30 +08:00
// import userList from '../new_index/data.js'//这个是假数据
let audo = uni.createInnerAudioContext()
audo.loop = true
import douyinScrollview from '@/components/douyin-scrollview/douyin-scrollview.vue'
评论
2024-07-23 15:42:42 +08:00
import CComment from "@/components/XJ-comment/index";
测试
2024-06-12 15:52:21 +08:00
export default {
秒杀 视频
2024-07-22 10:05:30 +08:00
components:{
评论
2024-07-23 15:42:42 +08:00
douyinScrollview,
CComment
秒杀 视频
2024-07-22 10:05:30 +08:00
},
测试
2024-06-12 15:52:21 +08:00
data() {
return {
技师 视频主页
2024-07-23 22:43:29 +08:00
dianzhan:0,
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
showPopup:false,
ccRef: null,
评论
2024-07-23 15:42:42 +08:00
userInfo: {
id: 120,
user_name: "🍁",
user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
},
tableTotal: 4,
tableData: [],
deleteMode: "all",
秒杀 视频
2024-07-22 10:05:30 +08:00
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代表右滑界面🌟💗
商城
2024-07-18 18:16:29 +08:00
page:1,
秒杀 视频
2024-07-22 10:05:30 +08:00
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)
测试
2024-06-12 15:52:21 +08:00
}
},
商城
2024-07-18 18:16:29 +08:00
onLoad() {
秒杀 视频
2024-07-22 10:05:30 +08:00
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
评论
2024-07-23 15:42:42 +08:00
订单
2024-07-19 10:49:29 +08:00
},
秒杀 视频
2024-07-22 10:05:30 +08:00
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()
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
// #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('到后台');
},
评论
2024-07-23 15:42:42 +08:00
秒杀 视频
2024-07-22 10:05:30 +08:00
methods: {
评论
2024-07-23 15:42:42 +08:00
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);
},
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,
技师 视频主页
2024-07-23 22:43:29 +08:00
user_name: item.userName,
user_avatar: item.userPhoto?item.userPhoto:'../../static/logo.png',
评论
2024-07-23 15:42:42 +08:00
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);
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) {
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
setTimeout(() => this.getPingL(this.videoID), 500);
this.showPopup==true;
评论
2024-07-23 15:42:42 +08:00
uni.hideLoading();
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
// callback(this.videoID);
评论
2024-07-23 15:42:42 +08:00
} else {
uni.hideLoading();
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
// const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
// setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
},
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;
}
},
秒杀 视频
2024-07-22 10:05:30 +08:00
closeScrollview(){
// 点击评论里面的叉叉，就会关闭评论
this.$refs.pinglun.close('bottom');
测试
2024-06-12 15:52:21 +08:00
},
秒杀 视频
2024-07-22 10:05:30 +08:00
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();
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
},
评论
2024-07-23 15:42:42 +08:00
tozuozhe(item){
// console.log("itemitemitemitemitem",item)
uni.reLaunch({
url:'/pages/therapist/orderDetail?artificerId='+item.createBy+'&classifyId='+'undefined'
})
秒杀 视频
2024-07-22 10:05:30 +08:00
this.currents = 1//点击头像以后就会切换
},
mpTouchend(){
this.mptime = (new Date()/1000) - this.mpstartTime;
},
mpTouchstart(){
this.mpstartTime = (new Date()/1000);
},
dealVoice(){
uni.showToast({
title: '处理声音',
icon: 'none'
秒杀
2024-07-19 15:13:22 +08:00
})
测试
2024-06-12 15:52:21 +08:00
},
秒杀 视频
2024-07-22 10:05:30 +08:00
clearToTime(){
//清理定时器
for(let i=0;i<20;i++){
clearTimeout(this.rotateTime);
clearTimeout(this.xrotats);
this.showPlay = false;
this.rotates = 0;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
},
clearTime(){
//清理定时器
for(let i=0;i<20;i++){
clearTimeout(this.rotateTime);
clearTimeout(this.xrotats);
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
},
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 ) );
测试
2024-06-12 15:52:21 +08:00
}
},
秒杀 视频
2024-07-22 10:05:30 +08:00
// ---- 进度条相关 --- ending
doubleLike(){
评论
2024-07-23 15:42:42 +08:00
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'
})
}
});
秒杀
2024-07-19 15:13:22 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
/*
点赞
*/
},
//点击播放&&暂停
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';
秒杀
2024-07-19 15:13:22 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
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
秒杀
2024-07-19 15:13:22 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
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
秒杀
2024-07-19 15:13:22 +08:00
}
订单
2024-07-19 10:49:29 +08:00
},
秒杀 视频
2024-07-22 10:05:30 +08:00
change(event){
this.k = event.detail.current
},
animationfinish(event){
// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
if(this.k == this.dataList.length - 1){
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
this.page++
秒杀 视频
2024-07-22 10:05:30 +08:00
this.GET()
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
测试
2024-06-12 15:52:21 +08:00
}
},
秒杀 视频
2024-07-22 10:05:30 +08:00
//每一组结束时新的请求
GET(){
var data={
page: this.page,
limit:this.limit,
}
this.$Request.get("/app/shipinquan/list", data).then(res => {
if (res.code == 0) {
视频点赞
2024-07-22 21:06:16 +08:00
var msg = res.data.list||{}
秒杀 视频
2024-07-22 10:05:30 +08:00
// 2.这里把视频添加到视频列表
for (let i = 0; i < msg.length; i++) {
this.dataList.push(msg[i])
}
} 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) => {
// var msg = res.data.data
// // 2.这里把视频添加到视频列表
// for (let i = 0; i < msg.length; i++) {
// this.dataList.push(msg[i])
// }
// }
// })
测试
2024-06-12 15:52:21 +08:00
},
秒杀 视频
2024-07-22 10:05:30 +08:00
get(){
// 1.这里引入后端请求数据
var data={
page: this.page,
limit:this.limit,
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
this.$Request.get("/app/shipinquan/list", data).then(res => {
if (res.code == 0) {
视频点赞
2024-07-22 21:06:16 +08:00
var msg = res.data.list||{}
秒杀 视频
2024-07-22 10:05:30 +08:00
// 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
// }
// })
测试
2024-06-12 15:52:21 +08:00
},
秒杀 视频
2024-07-22 10:05:30 +08:00
share(){
uni.showToast({
title: '分享',
icon: 'none'
})
测试
2024-06-12 15:52:21 +08:00
},
评论
2024-07-23 15:42:42 +08:00
秒杀 视频
2024-07-22 10:05:30 +08:00
cLike(sss){
视频点赞
2024-07-22 21:06:16 +08:00
var data={
评论
2024-07-23 15:42:42 +08:00
createBy:uni.getStorageSync('userId'),
视频点赞
2024-07-22 21:06:16 +08:00
shipinquanId:this.dataList[this.k].id,
}
技师 视频主页
2024-07-23 22:43:29 +08:00
// this.dataList[this.k].sfdz = !this.dataList[this.k].sfdz
评论
2024-07-23 15:42:42 +08:00
if(this.dataList[this.k].sfdz=='1'){
视频点赞
2024-07-22 21:06:16 +08:00
this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
if (res.code == 0) {
技师 视频主页
2024-07-23 22:43:29 +08:00
// this.dataList[this.k].dzs += 1;
// this.dataList[this.k].sfdz = '0';
const video = this.dataList[this.k].dzs;
视频点赞
2024-07-22 21:06:16 +08:00
sss=video.dzs += 1;
} else {
评论
2024-07-23 15:42:42 +08:00
this.dataList[this.k].sfdz ='0'
视频点赞
2024-07-22 21:06:16 +08:00
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
}else{//取消点赞
评论
2024-07-23 15:42:42 +08:00
this.dataList[this.k].sfdz ='0'
视频点赞
2024-07-22 21:06:16 +08:00
this.$Request.post("/app/shipinquan/delDianzan", data).then(res => {
if (res.code == 0) {
const video = this.dataList[this.k];
sss=video.dzs -= 1;
} else {
评论
2024-07-23 15:42:42 +08:00
this.dataList[this.k].sfdz ='0'
视频点赞
2024-07-22 21:06:16 +08:00
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
}
测试
2024-06-12 15:52:21 +08:00
}
}
}
</script>
秒杀 视频
2024-07-22 10:05:30 +08:00
测试
2024-06-12 15:52:21 +08:00
<style scoped>
评论
2024-07-23 15:42:42 +08:00
.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%;
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.list-view{
display: flex;
flex-direction: column;
align-items: center;
秒杀
2024-07-19 15:13:22 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.container {background-color: #000000;}
.item {
/* width : 750rpx; */
background-color: #000000;
position: relative;
秒杀
2024-07-19 15:13:22 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.videoHover{
position: absolute;
top: 0;
left: 0;
测试
2024-06-12 15:52:21 +08:00
flex: 1;
秒杀 视频
2024-07-22 10:05:30 +08:00
background-color: rgba(0,0,0,0.1);
测试
2024-06-12 15:52:21 +08:00
justify-content: center;
align-items: center;
秒杀 视频
2024-07-22 10:05:30 +08:00
display: flex;
/* border-style: dashed;
border-color: #DD524D;
border-width: 1px; */
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.playState{
width: 160rpx;
height: 160rpx;
opacity: 0.2;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.userInfo{
秒杀
2024-07-19 15:13:22 +08:00
position: absolute;
秒杀 视频
2024-07-22 10:05:30 +08:00
bottom:110px;
right: 10px;
秒杀
2024-07-19 15:13:22 +08:00
display: flex;
秒杀 视频
2024-07-22 10:05:30 +08:00
flex-direction: column;
z-index: 18;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.userAvatar{
border-radius: 500%;
border-style: solid;
border-width: 2px;
border-color: #ffffff;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.userAvatar{
width : 100rpx;
height: 100rpx;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.likeIco,.shareIco,.commentIco{
width : 60rpx;
height: 60rpx;
margin-top: 15px;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.likeNum,.commentNum,.shareTex{
color: #ffffff;
font-size: 30rpx;
text-align: center;
margin: 5px;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.likeNumActive{
color: red;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.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;
视频圈 上拉加载
2024-07-23 16:47:30 +08:00
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
秒杀 视频
2024-07-22 10:05:30 +08:00
/* background-color: aqua; */
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.userName {
font-size: 30rpx;
color: #ffffff;
margin-top: 80upx;
订单
2024-07-19 10:49:29 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
.words {
margin-top: 10rpx;
font-size: 30rpx;
color: #ffffff;
}
.root{
background-color: #000000;
测试
2024-06-12 15:52:21 +08:00
}
秒杀 视频
2024-07-22 10:05:30 +08:00
</style>