1162 lines
32 KiB
Vue
1162 lines
32 KiB
Vue
<template>
|
||
<view>
|
||
<swiper @longpress="openBs()" :style="{height:winHeight}" :circular="false" class="swipers" @change="change"
|
||
:current="current" :vertical="true" :indicator-dots="false" :autoplay="false" :interval="0" :duration="1">
|
||
<swiper-item class="swipers-item" v-for="(item,index) in videoList" :key="item.courseDetailsId">
|
||
<view class="swipers-items">
|
||
<!-- 视频 -->
|
||
<!-- #ifndef MP-TOUTIAO -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" @timeupdate="timeupdate"
|
||
@waiting="waiting()" object-fit="cover" v-if="current == index" :play-strategy="2"
|
||
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
|
||
@ended="ended" @play="videoPlay('myVideo'+item.courseDetailsId)"
|
||
:enable-progress-gesture="false" :ref="'myVideo'+item.courseDetailsId"
|
||
:id="'myVideo'+item.courseDetailsId" :src="item.wxCourseDetailsId?item.wxUrl:item.videoUrl"
|
||
:poster="item.titleImg" :autoplay="item.autoPlay" initial-time="0"
|
||
class="swipers-items-video"></video>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<video :show-fullscreen-btn="false" @click.stop.prevent="isSelectType" :controls="false"
|
||
@controlstoggle="controlstoggles" @timeupdate="timeupdate" @waiting="waiting()"
|
||
object-fit="cover" v-if="current == index" :play-strategy="2" :show-loading="true"
|
||
codec="software" :muted="false" :show-center-play-btn="true" :loop="false" @ended="ended"
|
||
@play="videoPlay('myVideo'+item.courseDetailsId)" :enable-progress-gesture="false"
|
||
:ref="'myVideo'+item.courseDetailsId" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"
|
||
:poster="item.titleImg" :autoplay="item.autoPlay" initial-time="0" class="swipers-items-video"
|
||
@contextmenu.prevent="disableContextMenu"></video>
|
||
<!-- #endif -->
|
||
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<video-player :show-fullscreen-btn="false" @controlstoggle="controlstoggles" @error="videoError"
|
||
version="1" @ended="ended" object-fit="cover" @play="videoPlay('myVideo'+item.courseDetailsId)"
|
||
:autoplay="item.autoPlay" :id="'myVideo'+item.courseDetailsId"
|
||
:ref="'myVideo'+item.courseDetailsId" :album-id="item.dyCourseDetailsId"
|
||
:episode-id="item.dyEpisodeId" :cloud-type="playType" :three-party-cloud="item.videoUrl"
|
||
:poster="item.titleImg" :loop="false" class="swipers-items-video"
|
||
v-if="current == index"></video-player>
|
||
<!-- #endif -->
|
||
|
||
<!-- :autoplay="item.autoPlay" -->
|
||
<!-- 没有视频权限则显示封面图 -->
|
||
<image v-else @click="showPay = true" :src="item.titleImg" class="swipers-items-imgsbg"
|
||
mode="aspectFill"></image>
|
||
<!-- 视频信息 -->
|
||
<view class="swipers-items-info" :style="[tabBarStyle]">
|
||
<!-- 标题 -->
|
||
<view v-if="item.title" class="swipers-items-info-title">
|
||
{{item.title}}
|
||
</view>
|
||
<!-- 简介 -->
|
||
<view v-if="item.content" class="swipers-items-info-content" v-html="item.content">
|
||
|
||
</view>
|
||
<!-- 集数 -->
|
||
<view class="swipers-items-info-num" @click="goCourse(item.courseId,item.courseDetailsId)">
|
||
查看更多续集 >
|
||
</view>
|
||
</view>
|
||
<!-- 右侧操作 -->
|
||
<view class="swipers-items-right" :style="[tabBarStyles]">
|
||
<view class="swipers-items-right-item">
|
||
<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
|
||
<u-icon name="heart-fill" v-if="item.isGood!=null && item.isGood!=0" color="red"
|
||
size="60"></u-icon>
|
||
<u-icon name="heart-fill" v-else color="#ffffff" size="60"></u-icon>
|
||
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
{{item.goodNum}}
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef MP-KUAISHOU -->
|
||
<view class="swipers-items-right-item" @click="share(item)">
|
||
<view class="swipers-items-right-item-img">
|
||
<image src="../../static/images/me/share.png" mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
分享
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<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 src="../../static/images/me/shuqian.png" style="height: 60rpx;" mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
追剧
|
||
</view>
|
||
</view>
|
||
<view class="swipers-items-right-item" v-else>
|
||
<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
|
||
<image src="../../static/images/me/shuqian_s.png" style="height: 60rpx;" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
已追
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- #ifdef APP -->
|
||
<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#ffffff" foreground="#000"
|
||
pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
|
||
<!-- @success：成功事件 imgSrc：图片地址 QrSrc：二维码图片地址
|
||
Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
|
||
<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
|
||
:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#ffffff" foreground="#000"
|
||
pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
|
||
<!-- @success：成功事件 imgSrc：图片地址 QrSrc：二维码图片地址
|
||
Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
|
||
<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
|
||
:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
|
||
<!-- #endif -->
|
||
|
||
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
|
||
:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
|
||
:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
|
||
<!-- #endif -->
|
||
<u-popup width="686" v-model="showImg" mode="center" border-radius="14">
|
||
<image :show-menu-by-longpress='true' @click="priveImage(haibaoImg)" @longpress="saveImage()"
|
||
:src="haibaoImg" style="width: 100%;" mode="widthFix"></image>
|
||
</u-popup>
|
||
<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">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '../../common/config.js'
|
||
import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
|
||
export default {
|
||
components: {
|
||
tkiQrcode
|
||
},
|
||
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,
|
||
title: '',
|
||
imgSrc: '',
|
||
current: 0,
|
||
maskCustomStyle: {
|
||
background: 'rgba(0, 0, 0, 0.5)'
|
||
},
|
||
show: false,
|
||
videoList: [],
|
||
isVIP: false, //是否是vip
|
||
courseId: '',
|
||
meunList: [], //菜单
|
||
meunTop: 0, //返回图标距离顶部的距离
|
||
num: 1, //当前播放的集数
|
||
showPay: false, //购买视频的弹窗
|
||
videoContextId: '', //记录播放的视频组件的id
|
||
page: 1,
|
||
pages: 1,
|
||
limit: 5,
|
||
courseId: 0,
|
||
courseDetailsId: 0,
|
||
isopen: false, //是否是公众号页面
|
||
winHeight: '100vh',
|
||
playType: 1,
|
||
showControls: true, //是否显示控制中心
|
||
timerCon: null,
|
||
randomNum: 0,
|
||
playFlag: false,
|
||
|
||
};
|
||
},
|
||
computed: {
|
||
// 移动视频信息的样式
|
||
tabBarStyle() {
|
||
let style = {
|
||
// 滑块在页面渲染后第一次滑动时，无需动画效果
|
||
'transition-duration': `${1}s`,
|
||
};
|
||
if (this.showControls) { //显示控制栏的时候
|
||
style.transform = `translate(${20}rpx, 0)`
|
||
} else {
|
||
style.transform = `translate(${-750}rpx, 0)`
|
||
}
|
||
return style;
|
||
},
|
||
// 移动视频右侧按钮的样式
|
||
tabBarStyles() {
|
||
let style = {
|
||
// 滑块在页面渲染后第一次滑动时，无需动画效果
|
||
'transition-duration': `${1}s`,
|
||
};
|
||
if (this.showControls) { //显示控制栏的时候
|
||
style.transform = `translate(${-20}rpx, 0)`
|
||
} else {
|
||
style.transform = `translate(${750}rpx, 0)`
|
||
}
|
||
return style;
|
||
}
|
||
},
|
||
created() {
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
//获取可是区域高度
|
||
const winHeight = sysInfo.windowHeight
|
||
if (winHeight && winHeight > 0) {
|
||
this.winHeight = winHeight + 'px'
|
||
} else {
|
||
this.winHeight = '100vh'
|
||
}
|
||
},
|
||
onShow() {
|
||
this.showControls = true
|
||
// #ifndef MP-KUAISHOU
|
||
clearTimeout(this.timerCon)
|
||
this.timerCon = null
|
||
this.timerCon = setTimeout(() => {
|
||
this.showControls = false
|
||
this.$forceUpdate()
|
||
}, 4000)
|
||
// #endif
|
||
|
||
try {
|
||
this.playType = Number(uni.getStorageSync('playType'))
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
this.playType = 1
|
||
}
|
||
this.page = 1
|
||
this.randomNum = Math.floor(Math.random() * 33);
|
||
this.getDataList()
|
||
|
||
},
|
||
onHide() {
|
||
this.$nextTick(() => {
|
||
if (this.videoContext) { //判断之前是否有视频的上下文
|
||
this.meunList = [];
|
||
this.videoList = [];
|
||
this.videoContext.stop();
|
||
this.videoContext = null;
|
||
this.current = 0;
|
||
}
|
||
})
|
||
},
|
||
onShareAppMessage(res) {
|
||
return {
|
||
path: '/pages/video/video?invitation=' + this.invitationCode + '&qdCode=' + this
|
||
.qdCode + '&id=' + this.courseId + '&courseDetailsId=' + this
|
||
.courseDetailsId, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.getVideoTitle(),
|
||
imageUrl: this.getVideoImageUrl()
|
||
}
|
||
},
|
||
onShareTimeline(res) {
|
||
return {
|
||
path: '/pages/video/video?invitation=' + this.invitationCode + '&qdCode=' + this
|
||
.qdCode + '&id=' + this.courseId + '&courseDetailsId=' + this
|
||
.courseDetailsId, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.getVideoTitle(),
|
||
imageUrl: this.getVideoImageUrl()
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.div(1, 2)
|
||
this.getDistance(0, 0)
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') !== -1) {
|
||
//是公众号页面
|
||
this.isopen = true;
|
||
} else {
|
||
this.isopen = false;
|
||
}
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
if (e.scene) { //这里为线上操作
|
||
//此处的二维码 page/index/index?brokerId=123
|
||
let scene = decodeURIComponent(e.scene);
|
||
scene = scene.split(',')
|
||
uni.setStorageSync('invitation', scene[0])
|
||
this.courseId = scene[1]
|
||
this.courseDetailsId = scene[2]
|
||
if (scene[3]) {
|
||
uni.setStorageSync('qdCodeion', scene[3])
|
||
}
|
||
this.getDataList(this.courseId, this.courseDetailsId);
|
||
}
|
||
// #endif
|
||
if (e.invitation) {
|
||
uni.setStorageSync('invitation', e.invitation)
|
||
}
|
||
if (e.id) {
|
||
this.courseId = e.id
|
||
}
|
||
console.log(e)
|
||
if (e.courseDetailsId) {
|
||
this.courseDetailsId = e.courseDetailsId
|
||
}
|
||
if (e.qdCode) {
|
||
uni.setStorageSync('qdCodeion', e.qdCode)
|
||
}
|
||
// this.getDataList()
|
||
},
|
||
onReady() {
|
||
// #ifdef MP-WEIXIN
|
||
let info = uni.getMenuButtonBoundingClientRect()
|
||
this.meunTop = info.top + ((info.height - 19) / 2)
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
this.meunTop = 37
|
||
// #endif
|
||
},
|
||
watch: {
|
||
//监听当前播放的集数
|
||
current(newData, oldData) {
|
||
//分页
|
||
if ((newData + 1) == (this.limit * this.page)) { //最后一条了
|
||
if (this.page < this.pages) {
|
||
this.page += 1
|
||
this.getDataList()
|
||
}
|
||
|
||
console.log(this.videoList, '2222222222')
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
showControls(val) {
|
||
// #ifndef MP-WEIXIN || MP-KUAISHOU || H5
|
||
if (this.showControls == true) {
|
||
clearTimeout(this.timerCon)
|
||
this.timerCon = null
|
||
this.$nextTick(() => {
|
||
this.timerCon = setTimeout(() => {
|
||
this.showControls = false
|
||
this.$forceUpdate()
|
||
}, 5000)
|
||
})
|
||
|
||
}
|
||
// #endif
|
||
// #ifdef H5
|
||
let el = document.querySelector('.uni-video-bar');
|
||
console.log(el, '2222222')
|
||
if (el) {
|
||
if (val) {
|
||
el.style = 'display:block !important;';
|
||
} else {
|
||
el.style = 'display:none !important;';
|
||
}
|
||
}
|
||
// #endif
|
||
},
|
||
},
|
||
methods: {
|
||
//除法函数，用来得到精确的除法结果
|
||
//说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
|
||
//调用：div(arg1,arg2)
|
||
//返回值：arg1除以arg2的精确结果
|
||
div(arg1, arg2) {
|
||
var t1 = 0,
|
||
t2 = 0,
|
||
r1,
|
||
r2;
|
||
try {
|
||
t1 = arg1.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
t1 = 0;
|
||
}
|
||
try {
|
||
t2 = arg2.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
t2 = 0;
|
||
}
|
||
r1 = Number(arg1.toString().replace(".", ""));
|
||
r2 = Number(arg2.toString().replace(".", ""));
|
||
|
||
},
|
||
|
||
getDistance(lat1, lng1, lat2, lng2) {
|
||
var radLat1 = Rad(lat1);
|
||
var radLat2 = Number(Rad(lat2));
|
||
var a = Number(radLat1 - radLat2);
|
||
var b = Rad(lng1) - Rad(lng2);
|
||
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
|
||
.pow(Math.sin(b / 2), 2)));
|
||
s = s * 6378.137;
|
||
s = Math.round(s * 10000) / 10;
|
||
return s;
|
||
},
|
||
disableContextMenu(event) {
|
||
event.preventDefault();
|
||
},
|
||
priveImage(url) {
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') == -1) {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
})
|
||
}
|
||
// #endif
|
||
},
|
||
//获取当前播放视频的封面图
|
||
getVideoImageUrl() {
|
||
console.log(this.videoList[this.current].titleImg)
|
||
return this.videoList[this.current].titleImg
|
||
|
||
},
|
||
//获取当前播放视频的标题
|
||
getVideoTitle() {
|
||
return this.videoList[this.current].courseDetailsName
|
||
},
|
||
//抖音保存海报
|
||
saveImage() {
|
||
let that = this
|
||
// #ifdef MP-TOUTIAO || MP-KUAISHOU
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: that.haibaoImg,
|
||
success: function() {
|
||
uni.showToast({
|
||
title: '已保存'
|
||
})
|
||
},
|
||
fail() {
|
||
uni.showToast({
|
||
title: '保存失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
isSelectType(e) {
|
||
// console.log(e)
|
||
// #ifndef MP-WEIXIN || MP-KUAISHOU
|
||
this.showControls = !this.showControls
|
||
this.$forceUpdate()
|
||
// #endif
|
||
|
||
},
|
||
//显示/隐藏适配控制器的回调
|
||
controlstoggles(e) {
|
||
// #ifndef MP-KUAISHOU
|
||
this.showControls = e.detail.show
|
||
// #endif
|
||
|
||
console.log(e.detail.show, '显示/隐藏控制栏')
|
||
},
|
||
//获取微信的播放链接
|
||
getsrc(videoUrl, wxCourseDetailsId) {
|
||
// #ifdef MP-WEIXIN
|
||
let data = {
|
||
wxCourseDetailsIds: wxCourseDetailsId // 注意：这里应该是单数，除非后端确实接收复数形式
|
||
};
|
||
this.$Request.postJson('/app/course/selectWxVideoUrl', data).then(res => {
|
||
if (res.code == 0) {
|
||
this.videoList[this.current].wxUrl = res.data[0].mp4_url
|
||
} else {
|
||
this.videoList[this.current].wxUrl = videoUrl
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
this.videoList[this.current].wxUrl = videoUrl
|
||
// #endif
|
||
|
||
},
|
||
videoError(e) {
|
||
console.log(e, '11111111111')
|
||
},
|
||
//打开倍速弹框
|
||
openBs() {
|
||
console.log('打开倍速')
|
||
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
|
||
})
|
||
},
|
||
//播放进度变化回掉
|
||
timeupdate(e) {
|
||
//隐藏loding
|
||
// #ifdef H5
|
||
uni.hideLoading()
|
||
// #endif
|
||
if (e.detail.currentTime > e.detail.duration * 0.9) {
|
||
if (this.playFlag) {
|
||
this.playFlag = false
|
||
this.$Request.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: this.courseDetailsId,
|
||
type: 'end'
|
||
}).then(res => {
|
||
console.log('播放结束')
|
||
})
|
||
}
|
||
}
|
||
},
|
||
//缓冲中
|
||
waiting(e) {
|
||
//在h5状态下视频出现缓冲则显示loding
|
||
// #ifdef H5
|
||
uni.showLoading()
|
||
// #endif
|
||
},
|
||
openShow() {
|
||
this.show = true
|
||
this.$nextTick(() => {
|
||
this.scrollIntoViews = this.scrollIntoView
|
||
})
|
||
|
||
},
|
||
//生成失败
|
||
posterError() {
|
||
this.haibaoImg = ''
|
||
this.showImg = false
|
||
// 生成完成后初始化分享
|
||
this.haibaoShow = false
|
||
this.isStart = false
|
||
this.imgSrc = ''
|
||
uni.showToast({
|
||
title: '海报生成失败',
|
||
mask: false,
|
||
duration: 2000,
|
||
icon: "none"
|
||
});
|
||
},
|
||
/**
|
||
* @param {String} path //返回的二维码地址
|
||
*/
|
||
qrR(path) {
|
||
this.qrCodeData = path
|
||
this.haibaoShow = true
|
||
},
|
||
/**生成成功
|
||
* @param {String} img 成功回调的图片
|
||
*/
|
||
posterSuccess(img) {
|
||
console.log(img)
|
||
this.haibaoImg = img.tempFilePath
|
||
this.showImg = true
|
||
// 生成完成后初始化分享
|
||
this.haibaoShow = false
|
||
this.isStart = false
|
||
this.imgSrc = ''
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '长按图片保存海报',
|
||
mask: false,
|
||
duration: 2000,
|
||
icon: "none"
|
||
});
|
||
},
|
||
//分享
|
||
share(item) {
|
||
this.imgSrc = item.titleImg
|
||
let qdCode = ""
|
||
if (uni.getStorageSync('qdCode')) {
|
||
qdCode = uni.getStorageSync('qdCode')
|
||
} else {
|
||
qdCode = ""
|
||
}
|
||
this.title = item.title ? item.title : ''
|
||
// #ifndef MP-WEIXIN
|
||
let urls = config.APIHOST2 + '/pages/video/video?id=' + item.courseId + '&courseDetailsId=' + item
|
||
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + qdCode
|
||
this.erweima = urls
|
||
this.isStart = true
|
||
// #endif
|
||
|
||
|
||
// #ifdef MP-WEIXIN
|
||
let that = this
|
||
let data = {
|
||
invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
|
||
.courseDetailsId + ',' + qdCode,
|
||
page: 'pages/video/video'
|
||
}
|
||
uni.downloadFile({
|
||
url: config.APIHOST + '/app/invite/mpCreateQr?invitationCode=' + data.invitationCode +
|
||
'&page=' + data.page,
|
||
success(res) {
|
||
if (res.statusCode === 200) {
|
||
that.qrCodeData = res.tempFilePath
|
||
that.haibaoShow = true
|
||
} else {
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
// 跳转资源详情
|
||
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"
|
||
})
|
||
}
|
||
},
|
||
//收藏
|
||
shoucang(item) {
|
||
if (uni.getStorageSync('token')) {
|
||
let data = {
|
||
courseId: item.courseId,
|
||
courseDetailsId: item.courseDetailsId,
|
||
classify: 1,
|
||
type: item.isCollect == 0 ? 1 : 0
|
||
}
|
||
this.$Request.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
|
||
}
|
||
this.$Request.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"
|
||
})
|
||
}
|
||
|
||
},
|
||
// 资源详情
|
||
getDataList() {
|
||
let data = {
|
||
page: this.page,
|
||
limit: this.limit,
|
||
token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
|
||
randomNum: this.randomNum
|
||
}
|
||
// #ifdef MP-WEIXIN
|
||
data.wxShow = 1
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
data.dyShow = 1
|
||
// #endif
|
||
this.$Request.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.num = index + 1
|
||
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.courseId = this.videoList[0].courseId
|
||
this.courseDetailsId = 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.getsrc(this.videoList[this.current].videoUrl, this.videoList[this.current]
|
||
.wxCourseDetailsId)
|
||
this.$forceUpdate()
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1500,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
})
|
||
},
|
||
//记录观看记录
|
||
setHistor(courseId, courseDetailsId) {
|
||
//如果没有登录则不进行记录直接return
|
||
if (!uni.getStorageSync('token')) {
|
||
return
|
||
}
|
||
let data = {
|
||
courseId: courseId,
|
||
courseDetailsId: courseDetailsId,
|
||
classify: 3,
|
||
type: 1
|
||
}
|
||
this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
|
||
},
|
||
//swiper上下切换事件
|
||
change(e) {
|
||
//拿出当前的swiper索引
|
||
let current = Number(e.detail.current)
|
||
//考虑向上滑动的时候
|
||
if (current == 2 && this.current == 0) {
|
||
//向上滑到头的时候先拿第一条数据的courseDetailsId
|
||
let courseDetailsId = this.videoList[0].courseDetailsId
|
||
// 根据courseDetailsId在meunList中找到这个数据的下标
|
||
let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
|
||
if (indexs != -1) { //找到了，indexs就是对应下标
|
||
//先判断meunList数组剩下的元素是否够三条
|
||
const lengths = (this.meunList.slice(0, indexs)).length
|
||
if (lengths >= 3) { //够三条
|
||
// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之前的三条
|
||
//因为slice(str,end)，包含str，不包含end，所以拿三条数据则-3
|
||
this.videoList = this.meunList.slice(indexs - 3, indexs)
|
||
} else { //不够三条
|
||
let arr = new Array(3)
|
||
switch (lengths) {
|
||
//只有一条
|
||
case 1:
|
||
//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
|
||
arr[2] = this.meunList[indexs - 1] //把剩下的一条取出来放到要滑动的那一页
|
||
//因为剩下的数据不够了，则拿meunList末尾的两条数据补齐
|
||
//第二个用最后一条数据
|
||
arr[1] = this.meunList[this.meunList.length - 1]
|
||
//第一个用倒数第二条数据
|
||
arr[0] = this.meunList[this.meunList.length - 2]
|
||
//赋值
|
||
this.videoList = arr
|
||
break;
|
||
//只有二条
|
||
case 2:
|
||
//还剩下两条数据的时候
|
||
//把剩下的倒数第一条取出来放到要滑动的那一页
|
||
arr[2] = this.meunList[indexs - 1]
|
||
//把剩下的最后一条放到第二个元素
|
||
arr[1] = this.meunList[indexs - 2]
|
||
//最后一个元素则由meunList的最后一条补齐
|
||
arr[0] = this.meunList[this.meunList.length - 1]
|
||
//最后赋值
|
||
this.videoList = arr
|
||
break;
|
||
default:
|
||
//一条都没有的时候 [1,2,3,4,5,6]
|
||
//直接把meunList末尾的三条放入数组即可
|
||
this.videoList = this.meunList.slice(-3)
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//考虑向下滑动
|
||
if ((current == 0 && this.current == 2) || (current == 0 && this.current ==
|
||
0)) { //是否滑动到第一条，虽然刚进入页面current为0，但是首次不触发
|
||
//拿出当前的courseDetailsId
|
||
let courseDetailsId = this.videoList[2].courseDetailsId
|
||
//记录当前数据在meunList中的下标
|
||
//根据courseDetailsId找出meunList中对应的数据的下标
|
||
let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
|
||
if (indexs != -1) { //找到了，indexs就是对应下标
|
||
//先判断meunList数组剩下的元素是否够三条
|
||
const lengths = (this.meunList.slice(indexs + 1, this.meunList.length)).length
|
||
if (lengths >= 3) { //够三条
|
||
// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之后的三条
|
||
this.videoList = this.meunList.slice(indexs + 1, indexs + 4)
|
||
} else { //不够三条
|
||
let arr = new Array(3)
|
||
switch (lengths) {
|
||
//只有一条
|
||
case 1:
|
||
//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
|
||
arr[0] = this.meunList[indexs + 1]
|
||
arr[1] = this.meunList[0]
|
||
arr[2] = this.meunList[1]
|
||
this.videoList = arr
|
||
break;
|
||
case 2:
|
||
//只有二条
|
||
arr[0] = this.meunList[indexs + 1]
|
||
arr[1] = this.meunList[indexs + 2]
|
||
arr[2] = this.meunList[0]
|
||
this.videoList = arr
|
||
break;
|
||
default:
|
||
//刚好没有数据了 直接拿meunList的前三条数据
|
||
this.videoList = this.meunList.slice(0, 3)
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.courseId = this.videoList[current].courseId
|
||
this.courseDetailsId = this.videoList[current].courseDetailsId
|
||
//获取当前播放的视频在菜单数组中的位置
|
||
let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
|
||
.courseDetailsId);
|
||
//记录当前播放位置
|
||
this.scrollIntoView = 'video' + scrollIndex;
|
||
this.current = current
|
||
this.$nextTick(() => {
|
||
this.getsrc(this.videoList[this.current].videoUrl, this.videoList[this.current]
|
||
.wxCourseDetailsId)
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
|
||
.courseDetailsId)
|
||
// 把选择的视频的自动播放设置为true
|
||
this.videoList[this.current].autoPlay = true
|
||
//让当前选择的视频播放
|
||
this.startPlay(this.current)
|
||
//更新视图
|
||
this.$forceUpdate()
|
||
})
|
||
|
||
|
||
},
|
||
startPlay(current) {
|
||
if (this.videoContext) { //判断之前是否有视频的上下文
|
||
this.videoContext.stop();
|
||
this.videoContext = null;
|
||
}
|
||
let numIdCurr = this.videoList[current].courseDetailsId;
|
||
// 播放时记录当前播放的id
|
||
this.videoList[current].autoPlay = true
|
||
this.videoContextId = 'myVideo' + numIdCurr;
|
||
this.videoContext = uni.createVideoContext(this.videoContextId, this);
|
||
if (this.videoContext) {
|
||
this.$nextTick(() => {
|
||
//播放当前的
|
||
this.videoContext.play();
|
||
this.$forceUpdate();
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
//在播放时候的回调
|
||
videoPlay(videoId) {
|
||
this.$Request.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: this.courseDetailsId,
|
||
type: 'start'
|
||
}).then(res => {
|
||
this.playFlag = true
|
||
console.log('播放开始')
|
||
})
|
||
},
|
||
//监听视频播放完成
|
||
ended() {
|
||
if (this.current == 2) {
|
||
this.current = 0
|
||
} else {
|
||
//拿出当前的courseDetailsId
|
||
let courseDetailsId = this.videoList[this.current].courseDetailsId;
|
||
//拿出当前播放视频的courseDetailsId对应meunList的下标
|
||
let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
|
||
if (indexs < (this.meunList.length - 1)) { //判断是否是最后一个，如果不是则继续翻下一页
|
||
this.current += 1
|
||
}
|
||
}
|
||
|
||
},
|
||
//返回
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #000;
|
||
}
|
||
|
||
.bs {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
padding-bottom: 100rpx;
|
||
}
|
||
|
||
.bs-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bs-se {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #eeeeef;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.bs-se-i {
|
||
width: 100rpx;
|
||
padding: 16rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.bsActive {
|
||
background-color: #ffffff;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #202020;
|
||
color: #ffffff;
|
||
|
||
.list-title {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
// padding-top: 30rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
|
||
.list-title-icon {
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.list-item {
|
||
padding: 0 30rpx;
|
||
|
||
.list-item-box {
|
||
width: 100%;
|
||
line-height: 90rpx;
|
||
background-color: #ffffff;
|
||
color: #000;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.list-box {
|
||
width: 100%;
|
||
height: calc(100% - 100rpx);
|
||
}
|
||
|
||
.list-box-item {
|
||
width: calc(100% - 40rpx);
|
||
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.list-box-item-l {
|
||
width: 140rpx;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 160rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.list-box-item-r {
|
||
width: calc(100% - 160rpx);
|
||
height: 100%;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
|
||
.list-box-item-r-title {
|
||
width: 100%;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.list-box-item-r-titles {
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
|
||
.list-box-item-r-content {
|
||
width: 100%;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-top: 10rpx;
|
||
overflow: hidden; //超出的文本隐藏
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; // 超出多少行
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swipers {
|
||
width: 100%;
|
||
|
||
.swipers-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.swipers-items {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
background-color: #000;
|
||
}
|
||
|
||
.swipers-items-imgsbg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 90%;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.swipers-items-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.swipers-items-back {
|
||
position: absolute;
|
||
// top: 75rpx;
|
||
left: 20rpx;
|
||
z-index: 999;
|
||
}
|
||
|
||
.swipers-items-info {
|
||
width: 80%;
|
||
height: auto;
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
left: 20rpx;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
z-index: 999;
|
||
|
||
.swipers-items-info-content {
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.swipers-items-info-num {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.swipers-items-right {
|
||
width: 60rpx;
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translate(0, -50%);
|
||
z-index: 999;
|
||
|
||
.swipers-items-right-item {
|
||
width: 100%;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.swipers-items-right-item-img {
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.swipers-items-right-item-txt {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |