599 lines
15 KiB
Plaintext
599 lines
15 KiB
Plaintext
<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"
|
||
@timeupdate="timeupdate"
|
||
@play="videoPlay('myVideo'+item.courseDetailsId, item.courseDetailsId)"
|
||
: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,
|
||
playFlag: false
|
||
|
||
};
|
||
},
|
||
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: {
|
||
//播放时的回掉
|
||
videoPlay(videoId,courseDetailsId) {
|
||
this.courseDetailsId = courseDetailsId
|
||
if ( !this.playFlag ) {
|
||
this.playFlag = true
|
||
httpsRequest.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: courseDetailsId,
|
||
type: 'start'
|
||
}).then(res => {
|
||
console.log('播放开始')
|
||
})
|
||
}
|
||
|
||
},
|
||
//播放进度变化回掉
|
||
timeupdate(e) {
|
||
|
||
if (e.detail.currentTime > e.detail.duration*0.9) {
|
||
if ( this.playFlag) {
|
||
this.playFlag = false
|
||
httpsRequest.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: this.courseDetailsId,
|
||
type: 'end'
|
||
}).then(res => {
|
||
console.log('播放结束')
|
||
})
|
||
}
|
||
}
|
||
|
||
},
|
||
//显示/隐藏适配控制器的回调
|
||
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> |