czg_team/video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
GYJ
2024-12-02 10:39:36 +08:00
commit f1f5b666b5
464 changed files with 81372 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

563
pages/video/videoIOS.nvue Normal file
View File

@@ -0,0 +1,563 @@
<template>
<view class="detail">
<swiper @longpress="openBs()" :circular="false" class="swipers" @change="change" :current="current"
:vertical="true" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="300">
<swiper-item class="swipers-item" v-for="(item,index) in videoList" :key="item.courseDetailsId">
<view class="swipers-items">
<!-- 视频 -->
<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" object-fit="cover"
v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true"
codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
:id="'myVideo'+item.courseDetailsId" :src="item.videoUrl" :autoplay="item.autoPlay"
class="swipers-items-video"></video>
<image v-else :src="item.titleImg" class="swipers-items-imgsbg" mode="aspectFill">
</image>
<!-- 右边操作 -->
<view class="swipers-items-right" :style="rightTop" v-if="showControls">
<view class="swipers-items-right-item">
<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
<image v-if="item.isGood!=null && item.isGood!=0" class="swipers-items-right-item-imgs"
src="../../static/images/me/myLove_.png" mode=""></image>
<image v-else class="swipers-items-right-item-imgs"
src="../../static/images/me/myLove.png" mode=""></image>
</view>
<view class="swipers-items-right-item-txt">
<text class="swipers-items-right-item-txts">
{{item.goodNum}}
</text>
</view>
</view>
<view class="swipers-items-right-item" @click="share()">
<view class="swipers-items-right-item-img">
<image class="swipers-items-right-item-imgs" src="../../static/images/me/share.png"
mode=""></image>
</view>
<view class="swipers-items-right-item-txt">
<text class="swipers-items-right-item-txts">
分享
</text>
</view>
</view>
<view class="swipers-items-right-item" v-if="item.isCollect==null || item.isCollect == 0">
<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
<image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian.png"
mode=""></image>
</view>
<view class="swipers-items-right-item-txt">
<text class="swipers-items-right-item-txts">
追剧
</text>
</view>
</view>
<view class="swipers-items-right-item" v-else>
<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
<image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian_s.png"
mode=""></image>
</view>
<view class="swipers-items-right-item-txt">
<text class="swipers-items-right-item-txts">
已追
</text>
</view>
</view>
</view>
<!-- 底部视频信息 -->
<view class="swipers-items-btom" v-if="showControls">
<view class="swipers-items-btom-box">
<!-- 标题 -->
<view class="swipers-items-btom-box-title">
<text class="swipers-items-btom-box-titles">
{{item.title}}
</text>
</view>
<!-- 介绍 -->
<view v-if="item.content" class="swipers-items-btom-box-content">
<text class="swipers-items-btom-box-contents">{{item.content}}</text>
</view>
<!-- 集数 -->
<view @click="goCourse(item.courseId,item.courseDetailsId)"
class="swipers-items-btom-box-num">
<text class="swipers-items-btom-box-nums">
查看更多续集 >
</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<uni-popup ref="popupBs" :safe-area="true" background-color="#ffffff">
<view class="bs">
<text class="bs-title">倍速：</text>
<view class="bs-se">
<view class="bs-se-i" @click="BsChange(index)" :class="nowBs==index?'bsActive':''"
v-for="(item,index) in subList" :key="index">
<text class="bs-se-it">{{item.name}}</text>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import config from '../../common/config.js'
import httpsRequest from '../../common/httpRequest.js'
export default {
data() {
return {
nowBs: 1, //当前倍速
subList: [{
name: '0.5x',
num: 0.5
}, {
name: '1x',
num: 1
}, {
name: '1.25x',
num: 1.25
}, {
name: '1.5x',
num: 1.5
}],
isStart: false, //是否开始生成二维码
erweima: '',
qrCodeData: '',
haibaoImg: '',
showImg: false,
haibaoShow: false,
imgSrc: '',
current: 0,
maskCustomStyle: {
background: 'rgba(0, 0, 0, 0.5)'
},
show: false,
videoList: [],
videoContext: null, //记录当前视频的上下文
isVIP: false, //是否是vip
courseId: '',
meunList: [], //菜单
meunTop: 37, //返回图标距离顶部的距离
num: 1, //当前播放的集数
showPay: false, //购买视频的弹窗
info: {}, //整部的信息
courseDetailsId: '', //详情id
scrollIntoView: '', //当前播放视频的位置
scrollIntoViews: 'video0', //当前播放视频的位置
isVips: '否', //是否显示会员
rightTop: {
top: '0rpx'
},
title: '',
showControls: true, //是否显示控制中心
page: 1,
pages: 1,
limit: 5,
randomNum: 0
};
},
watch: {
current(newData, oldData) {
if ((newData + 1) == (this.limit * this.page)) { //最后一条了
if (this.page < this.pages) {
this.page += 1
this.getDataList()
}
this.$forceUpdate()
}
},
},
onShow() {
let that = this
//获取设备的高度
uni.getSystemInfo({
success(res) {
//计算右侧操作拦的位置
that.rightTop.top = res.screenHeight - (440 / 2) + 'rpx'
},
fail() {
//如果获取屏幕的高度失败，那么位置默认设置为通用高度630rpx
that.rightTop.top = '630rpx'
}
})
this.page = 1
this.randomNum = Math.floor(Math.random() * 33);
this.getDataList()
},
onHide() {
try {
this.videoContext.stop();
this.videoContext = null;
setTimeout(() => {
this.meunList = [];
this.videoList = [];
this.current = 0;
}, 500)
} catch (e) {
//TODO handle the exception
}
},
methods: {
//显示/隐藏适配控制器的回调
controlstoggles(e) {
this.showControls = e.detail.show
console.log(e.detail.show, '显示/隐藏控制栏')
},
//打开倍速弹框
openBs() {
this.$refs.popupBs.open('bottom')
},
//切换倍速
BsChange(index) {
this.nowBs = index
this.videoContext.playbackRate(this.subList[index].num)
this.$refs.popupBs.close()
uni.showToast({
title: '已切换' + this.subList[index].num + '倍播放',
icon: 'none',
duration: 2000
})
},
// 跳转资源详情
goCourse(e, courseDetailsId) {
let userId = uni.getStorageSync('userId')
if (userId) {
// uni.navigateTo({
// url: '/pages/index/course/courseDet?id=' + e
// });
uni.navigateTo({
url: '/me/detail/detail?id=' + e + '&courseDetailsId=' + courseDetailsId
})
} else {
uni.navigateTo({
url: "/pages/login/login"
})
}
},
//分享-复制app下载连接
share() {
let invitationCode = ''
let qdCode = ''
if (uni.getStorageSync('invitationCode')) {
invitationCode = uni.getStorageSync('invitationCode')
}
if (uni.getStorageSync('qdCode')) {
qdCode = uni.getStorageSync('qdCode')
}
let url = config.APIHOST2 + '/pages/login/registerApp?invitation=' + invitationCode + '&qdCode=' + qdCode
uni.setClipboardData({
data: url,
success(res) {
uni.showToast({
title: '已复制链接'
})
}
})
},
//收藏
shoucang(item) {
if (uni.getStorageSync('token')) {
let data = {
courseId: item.courseId,
courseDetailsId: item.courseDetailsId,
classify: 1,
type: item.isCollect == 0 ? 1 : 0
}
httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
if (res.code == 0) {
if (data.type == 1) {
item.isCollect = 1;
} else {
item.isCollect = 0;
}
}
})
} else {
uni.navigateTo({
url: "/pages/login/login"
})
}
},
//点赞
dianzan(item) {
if (uni.getStorageSync('token')) {
let data = {
courseId: item.courseId,
courseDetailsId: item.courseDetailsId,
classify: 2,
type: item.isGood == 0 ? 1 : 0
};
httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
if (res.code == 0) {
if (data.type == 1) {
item.isGood = 1;
item.goodNum += 1;
} else {
item.isGood = 0;
item.goodNum -= 1;
}
}
})
} else {
uni.navigateTo({
url: "/pages/login/login"
})
}
},
//swiper上下切换事件
change(e) {
console.log(e, '111111111111111111')
this.showControls = true
//拿出当前的swiper索引
let current = Number(e.detail.current);
this.scrollIntoView = 'video' + current
this.$nextTick(() => {
this.current = current
this.startPlay(current)
})
if (uni.getStorageSync('token')) {
//插入历史记录
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
}
},
//控制播放
startPlay(current) {
if (this.videoContext) { //判断之前是否有视频的上下文
this.videoContext.stop();
this.videoContext = null;
}
let numIdCurr = this.videoList[current].courseDetailsId;
// 播放时记录当前播放的id
this.videoContextId = 'myVideo' + numIdCurr;
this.videoContext = uni.createVideoContext(this.videoContextId, this);
this.$nextTick(() => {
//播放当前的
this.videoContext.play();
this.$forceUpdate();
})
},
ended() {
if (this.current < this.videoList.length - 1) {
this.current += 1
}
},
/**
* @param {Number} courseId 总id
* @param {Number} courseDetailsId 当前视频id
* @param {boolean} type 是购买后返回的还是直接进来的
*/
getDataList() {
let data = {
page: this.page,
limit: this.limit,
token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
randomNum: this.randomNum
};
httpsRequest.getT('/app/course/selectCourseDetailsList', data).then(res => {
if (res.code == 0) {
this.pages = res.data.totalPage
if (res.data.list) {
let arr = JSON.parse(JSON.stringify(res.data.list))
arr.map((item, index) => {
item.autoPlay = true
})
//菜单数组
if (this.page == 1) {
this.videoList = arr
} else {
this.videoList = [...this.videoList, ...arr]
}
if (this.page == 1) {
let numIdCurr = this.videoList[0].courseDetailsId;
this.videoContextId = 'myVideo' + numIdCurr;
this.$nextTick(() => {
this.videoContext = uni.createVideoContext(this.videoContextId, this);
this.videoContext.play();
})
if (uni.getStorageSync('token')) { //如果有token则插入
//插入历史记录
this.setHistor(this.videoList[this.current].courseId, this.videoList[this
.current]
.courseDetailsId)
}
}
this.$forceUpdate()
}
} else {
uni.showToast({
title: '加载失败',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack();
}, 1000)
}
})
},
//插入观看记录
setHistor(courseId, courseDetailsId) {
let data = {
courseId: courseId,
courseDetailsId: courseDetailsId,
classify: 3,
type: 1
};
httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
},
}
}
</script>
<style>
.bs {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20rpx;
}
.bs-title {
font-size: 24rpx;
font-weight: bold;
}
.bs-se {
display: flex;
flex-direction: row;
align-items: center;
background-color: #eeeeef;
padding: 10rpx 20rpx;
border-radius: 10rpx;
}
.bs-se-it {
font-size: 24rpx;
width: 100rpx;
padding: 16rpx 0;
text-align: center;
}
.bsActive {
background-color: #ffffff;
border-radius: 6rpx;
}
.detail {
width: 750rpx;
flex: 1;
background-color: #000;
}
.swipers {
width: 750rpx;
flex: 1;
}
.swipers-item {
width: 750rpx;
flex: 1;
}
.swipers-items {
width: 750rpx;
flex: 1;
position: relative;
background-color: #000;
}
.swipers-items-video {
width: 750rpx;
flex: 1;
}
.swipers-items-imgsbg {
width: 750rpx;
flex: 1;
}
.swipers-items-right {
position: absolute;
width: 60rpx;
top: 100rpx;
right: 20rpx;
}
.swipers-items-right-item {
width: 60rpx;
margin-bottom: 40rpx;
}
.swipers-items-right-item-img {
width: 60rpx;
height: 60rpx;
}
.swipers-items-right-item-imgs {
width: 60rpx;
height: 60rpx;
}
.swipers-items-right-item-txt {
width: 60rpx;
}
.swipers-items-right-item-txts {
width: 60rpx;
color: #ffffff;
font-size: 24rpx;
text-align: center;
}
.swipers-items-btom {
width: 750rpx;
position: absolute;
bottom: 100rpx;
align-items: center;
}
.swipers-items-btom-box {
width: 710rpx;
}
.swipers-items-btom-box-title {
width: 710rpx;
}
.swipers-items-btom-box-titles {
width: 710rpx;
color: #ffffff;
font-size: 30rpx;
}
.swipers-items-btom-box-content {
width: 710rpx;
margin-top: 10rpx;
}
.swipers-items-btom-box-contents {
width: 710rpx;
color: #ffffff;
font-size: 28rpx;
}
.swipers-items-btom-box-num {
width: 750rpx;
margin-top: 20rpx;
}
.swipers-items-btom-box-nums {
width: 710rpx;
color: #ffffff;
font-size: 30rpx;
}
</style>