2314 lines
64 KiB
Vue
2314 lines
64 KiB
Vue
<template>
|
||
<view>
|
||
<swiper
|
||
@longpress="openBs()"
|
||
:style="{ height: winHeight }"
|
||
:circular="true"
|
||
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 swiperList" :key="item.courseDetailsId">
|
||
<view class="swipers-items">
|
||
<!-- 视频 -->
|
||
<!-- #ifndef MP-TOUTIAO -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- wxUrl -->
|
||
<video
|
||
:show-fullscreen-btn="false"
|
||
@controlstoggle="controlstoggles"
|
||
@timeupdate="timeupdate"
|
||
@waiting="waiting()"
|
||
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="false"
|
||
@ended="ended"
|
||
@play="videoPlay('myVideo' + 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>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<video
|
||
:show-fullscreen-btn="false"
|
||
@click.stop.prevent="isSelectType"
|
||
:controls="true"
|
||
@controlstoggle="controlstoggles"
|
||
@timeupdate="timeupdate"
|
||
@waiting="waiting()"
|
||
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="false"
|
||
@ended="ended"
|
||
@play="videoPlay('myVideo' + 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"
|
||
@contextmenu.prevent="disableContextMenu"
|
||
></video>
|
||
<!-- #endif -->
|
||
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<video-player
|
||
:show-fullscreen-btn="false"
|
||
@controlstoggle="controlstoggles"
|
||
@error="videoError"
|
||
version="1"
|
||
@getsource="getsource()"
|
||
@ended="ended"
|
||
object-fit="cover"
|
||
@play="videoPlay('myVideo' + item.courseDetailsId)"
|
||
:autoplay="item.autoPlay"
|
||
:id="'myVideo' + item.courseDetailsId"
|
||
:ref="'myVideo' + item.courseDetailsId"
|
||
:album-id="dyCourseId"
|
||
: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 && item.videoUrl"
|
||
></video-player>
|
||
<!-- #endif -->
|
||
<!-- :autoplay="item.autoPlay" -->
|
||
<!-- 没有视频权限则显示封面图 -->
|
||
<image
|
||
v-else
|
||
@click="
|
||
openShowPay(current, index, item.videoUrl);
|
||
showControls = true;
|
||
"
|
||
:src="item.titleImg"
|
||
class="swipers-items-imgsbg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<!-- 返回图标 -->
|
||
<!-- #ifndef MP-TOUTIAO -->
|
||
<view @click.stop="goBack()" style="color: #ffffff">
|
||
<u-icon name="arrow-left" class="swipers-items-back" :style="{ top: meunTop + 'px' }" color="#ffffff" size="38"></u-icon>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- 视频信息 -->
|
||
<view class="swipers-items-info" :style="[tabBarStyle]">
|
||
<!-- 标题 -->
|
||
<view v-if="item.courseDetailsName" class="swipers-items-info-title">
|
||
{{ item.courseDetailsName }}
|
||
</view>
|
||
<!-- 简介 -->
|
||
<view v-if="item.content" class="swipers-items-info-content" v-html="item.content"></view>
|
||
<!-- 集数 -->
|
||
<view @click="openShow()" class="swipers-items-info-num">第{{ item.num }}集（共{{ meunList.length }}集）选集 ></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 != 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">分享{{ current }}</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<view class="swipers-items-right-item" v-if="isCollect">
|
||
<view class="swipers-items-right-item-img" @click.stop="shoucang()">
|
||
<image src="../../static/images/me/shuqian_s.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()">
|
||
<image src="../../static/images/me/shuqian.png" style="height: 60rpx" mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">追剧{{ index }}</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">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- #ifndef MP-KUAISHOU -->
|
||
<u-popup
|
||
:closeable="true"
|
||
close-icon="close"
|
||
close-icon-size="30"
|
||
close-icon-color="#333333"
|
||
:mask-custom-style="maskCustomStyle"
|
||
v-model="show"
|
||
border-radius="24"
|
||
mode="bottom"
|
||
>
|
||
<view class="list">
|
||
<view class="list-title flex align-center">
|
||
{{ title }}
|
||
<text class="list-title-ji">共{{ meunList.length }}集</text>
|
||
</view>
|
||
<view class="list-box">
|
||
<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true" style="width: 100%; height: 500rpx; padding-bottom: 30rpx">
|
||
<view class="list-box-wai flex justify-between flex-wrap">
|
||
<view
|
||
:id="item.viewInfo"
|
||
:class="'video' + index == scrollIntoView ? 'videoListCurr' : ''"
|
||
class="list-box-item flex align-center justify-center"
|
||
@click="selectPlay(item)"
|
||
v-for="(item, index) in meunList"
|
||
:key="index"
|
||
>
|
||
第{{ index + 1 }}集
|
||
<image v-if="'video' + index == scrollIntoView" class="list-box-item-playing" src="../../static/images/me/playIng.png" mode=""></image>
|
||
<view v-if="!item.videoUrl" class="list-box-item-lock flex align-center justify-center">
|
||
<u-icon name="lock" color="#ffffff" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view style="height: 0" class="list-box-item flex align-center justify-center"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-KUAISHOU -->
|
||
<uv-popup @maskClick="maskClick" :closeable="true" ref="popupBsss" mode="bottom" custom-style="height: 800rpx;" :safe-area="true" bgColor="#202020">
|
||
<view class="list">
|
||
<view class="list-title flex align-center">
|
||
{{ title }}
|
||
<text class="list-title-ji">共{{ meunList.length }}集</text>
|
||
</view>
|
||
<view class="list-box">
|
||
<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true" style="width: 100%; height: 500rpx; padding-bottom: 30rpx">
|
||
<view class="list-box-wai flex justify-between flex-wrap">
|
||
<view
|
||
:id="item.viewInfo"
|
||
:class="'video' + index == scrollIntoView ? 'videoListCurr' : ''"
|
||
class="list-box-item flex align-center justify-center"
|
||
@click="selectPlay(item)"
|
||
v-for="(item, index) in meunList"
|
||
:key="index"
|
||
>
|
||
第{{ index + 1 }}集
|
||
<image v-if="'video' + index == scrollIntoView" class="list-box-item-playing" src="../../static/images/me/playIng.png" mode=""></image>
|
||
<view v-if="!item.videoUrl" class="list-box-item-lock flex align-center justify-center">
|
||
<!-- <u-icon name="lock" color="#ffffff" size="20"></u-icon> -->
|
||
<image style="width: 18rpx; height: 22rpx" src="../../static/images/me/lockWite.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
<!-- #endif -->
|
||
|
||
<!-- 购买视频 -->
|
||
<u-popup
|
||
:closeable="true"
|
||
:custom-style="customStyle"
|
||
:safe-area-inset-bottom="true"
|
||
close-icon="close"
|
||
close-icon-size="30"
|
||
close-icon-color="#333333"
|
||
:mask-custom-style="maskCustomStyle"
|
||
v-model="showPay"
|
||
border-radius="24"
|
||
mode="bottom"
|
||
>
|
||
<view class="list" :style="listStyle">
|
||
<view class="list-title flex align-center">
|
||
<!-- <u-icon name="lock" class="list-title-icon" color="#efbb6b" size="40"></u-icon> -->
|
||
当前视频 没有播放权限
|
||
</view>
|
||
<view class="" style="font-size: 24rpx; color: #999; padding: 0 34rpx; margin-bottom: 20rpx">
|
||
{{ getRedEnvelopeTips }}
|
||
</view>
|
||
|
||
<view class="list-item" v-if="zhengbu === '是' && isWxIosPay == true">
|
||
<view class="list-item-box flex align-center justify-center" @click="payVideo(1)">
|
||
<image src="../../static/images/me/rmIcon.png" mode=""></image>
|
||
{{ countPrice * scale }}金币解锁单集视频
|
||
</view>
|
||
</view>
|
||
<view class="list-item" v-if="danbu === '是' && isWxIosPay == true">
|
||
<view class="list-item-box" @click="payVideo(2)">{{ countPrice }}元解锁单集视频</view>
|
||
</view>
|
||
<!-- <view class="list-item" v-if="isVips == '是' && isWxIosPay == true">
|
||
<view class="list-item-box flex align-center justify-center" @click="goNav('/pages/me/vip/index')">
|
||
<image src="../../static/images/me/rmIcon.png" mode=""></image>
|
||
开通会员
|
||
#ifdef MP-TOUTIAO || MP-WEIXIN-->
|
||
<!-- (会员期内免费观看) -->
|
||
<!-- #endif
|
||
</view>
|
||
</view> -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="list-item" v-if="isGuanggao == '是' && adUnitId && advertising">
|
||
<view class="list-item-box" @click="openVideoAd()">观看广告免费解锁本集</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<view class="list-item" v-if="isGuanggaody == '是' && dyadUnitId && advertising">
|
||
<view class="list-item-box" @click="openVideodyAd()">观看广告免费解锁本集</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<view class="flex align-center" style="width: 100%; margin-left: 30rpx; margin-bottom: 40rpx">
|
||
<u-checkbox active-color="#ff7581" v-model="checked" shape="circle"></u-checkbox>
|
||
<text @click="checked = !checked">我已经阅读并同意</text>
|
||
<view @click="goWallet('/me/setting/payXieYi')" style="color: #ff7581" class="illustrate-box-txt">《付费须知说明》</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- <u-popup :closeable="true" :custom-style="customStyle" :safe-area-inset-bottom="false" close-icon="close"
|
||
close-icon-size="30" close-icon-color="#333333" :mask-custom-style="maskCustomStyle" v-model="showPay"
|
||
border-radius="24" mode="bottom">
|
||
<view class="list u-flex u-row-center u-p-t-60">
|
||
<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />
|
||
</view>
|
||
</u-popup> -->
|
||
|
||
<!-- 充值购买弹窗 -->
|
||
<payPopus v-if="showMoney" :payPrice="payPrice" :orderId="ordersId" :show="showMoney" @closeMoney="closeMoney" @paySuccess="paySuccess" />
|
||
|
||
<!-- #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 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 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>
|
||
<button style="visibility: hidden;" @click="KoXgyqHbmG"></button>
|
||
<button style="visibility: hidden;" @click="TPtBVYTHmkgyqJpomNgt"></button>
|
||
<button style="visibility: hidden;" @click="wAIaTsgyqKfOzJNuPsQX"></button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//导入地址
|
||
import config from '../../common/config.js';
|
||
import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
|
||
//倒入充值购买弹窗
|
||
import payPopus from '@/components/payPopus/payPopus.vue';
|
||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||
var videoAd = null;
|
||
// #endif
|
||
import { returnIsSafari } from '@/utils/app.js';
|
||
export default {
|
||
components: {
|
||
tkiQrcode,
|
||
payPopus
|
||
},
|
||
data() {
|
||
return {
|
||
isSafari: returnIsSafari(),
|
||
//记录未购买视频索引
|
||
noBuyVideoIndex: null,
|
||
//奖品列表
|
||
prizeList: [
|
||
{
|
||
id: 'coupon88',
|
||
name: '8.8折',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png'
|
||
},
|
||
{
|
||
id: 'coupon900',
|
||
Color: 'rgb(251, 219, 216)',
|
||
name: '900',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png'
|
||
},
|
||
{
|
||
id: 'coupon1',
|
||
name: '1元',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png'
|
||
},
|
||
{
|
||
id: 'apple',
|
||
Color: 'rgba(246, 142, 46, 0.5)',
|
||
name: '苹果手机',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
|
||
},
|
||
{
|
||
id: 'coupon210',
|
||
name: '210元',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
|
||
},
|
||
{
|
||
id: 'jd100',
|
||
name: '100京豆',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png'
|
||
},
|
||
{
|
||
id: 'coupon400',
|
||
name: '400元',
|
||
img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
|
||
},
|
||
{
|
||
id: 'thanks',
|
||
name: '谢谢参与',
|
||
img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.png'
|
||
}
|
||
],
|
||
checked: false,
|
||
payPrice: 0, //需要支付的价格
|
||
showMoney: false, //是否显示充值弹窗
|
||
dyCourseId: '',
|
||
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
|
||
}
|
||
],
|
||
customStyle: {
|
||
background: '#202020'
|
||
},
|
||
isStart: false, //是否开始生成二维码
|
||
erweima: '',
|
||
qrCodeData: '',
|
||
haibaoImg: '',
|
||
showImg: false,
|
||
haibaoShow: false,
|
||
title: '',
|
||
imgSrc: '',
|
||
current: 0,
|
||
maskCustomStyle: {
|
||
background: 'rgba(0, 0, 0, 0.5)'
|
||
},
|
||
show: false,
|
||
videoList: [],
|
||
videoContext: null, //记录当前视频的上下文
|
||
isVIP: false, //是否是vip
|
||
courseId: '',
|
||
meunList: [], //菜单
|
||
meunTop: 0, //返回图标距离顶部的距离
|
||
num: 1, //当前播放的集数
|
||
showPay: false, //购买视频的弹窗
|
||
info: {}, //整部的信息
|
||
courseDetailsId: '', //详情id
|
||
scrollIntoView: '', //当前播放视频的位置
|
||
scrollIntoViews: 'video0', //当前播放视频的位置
|
||
isVips: '否', //是否显示会员
|
||
adUnitId: '', //微信广告id
|
||
dyadUnitId: '', //抖音广告id
|
||
isGuanggao: '否',
|
||
isGuanggaody: '否',
|
||
winHeight: '100vh',
|
||
zhengbu: '否',
|
||
danbu: '否',
|
||
playType: uni.getStorageSync('playType') ? Number(uni.getStorageSync('playType')) : 1,
|
||
showControls: true, //是否显示操作栏
|
||
timerCon: null, //显示隐藏控制栏定时器
|
||
tt_album_id: '', //抖音剧id
|
||
tt_episode_id: '', //抖音级id
|
||
qdCode: '', //渠道码
|
||
ordersId: '', //订单id
|
||
payMoney: '', //支付价格
|
||
isCollect: false, //是否收藏
|
||
zongPrice: 0, //整部价格
|
||
countPrice: 0, //单集价格
|
||
isWxIosPay: true,
|
||
playFlag: false,
|
||
getRedEnvelopeTips: '',
|
||
scale: 1
|
||
};
|
||
},
|
||
onShareAppMessage(res) {
|
||
return {
|
||
path:
|
||
'/me/detail/detail?invitation=' +
|
||
this.invitationCode +
|
||
'&qdCode=' +
|
||
this.qdCode +
|
||
'&id=' +
|
||
this.courseId +
|
||
'&courseDetailsId=' +
|
||
this.videoList[this.current].courseDetailsId +
|
||
'&tt_album_id=' +
|
||
this.tt_album_id +
|
||
'&tt_episode_id=' +
|
||
this.videoList[this.current].dyEpisodeId, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.getVideoTitle(),
|
||
imageUrl: this.getVideoImageUrl()
|
||
};
|
||
},
|
||
onShareTimeline(res) {
|
||
return {
|
||
path:
|
||
'/me/detail/detail?invitation=' +
|
||
this.invitationCode +
|
||
'&qdCode=' +
|
||
this.qdCode +
|
||
'&id=' +
|
||
this.courseId +
|
||
'&courseDetailsId=' +
|
||
this.videoList[this.current].courseDetailsId +
|
||
'&tt_album_id=' +
|
||
this.tt_album_id +
|
||
'&tt_episode_id=' +
|
||
this.videoList[this.current].dyEpisodeId, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.getVideoTitle(),
|
||
imageUrl: this.getVideoImageUrl()
|
||
};
|
||
},
|
||
computed: {
|
||
listStyle() {
|
||
// if (this.isSafari) {
|
||
// return {
|
||
// 'min-height': '540rpx'
|
||
// }
|
||
// }
|
||
return '';
|
||
},
|
||
//当前视频是否可以看广告解锁
|
||
advertising() {
|
||
return this.videoList.length > 0 ? this.videoList[this.current].advertising == 1 : false;
|
||
},
|
||
// 视频列表
|
||
swiperList() {
|
||
return this.videoList;
|
||
},
|
||
// 移动视频信息的样式
|
||
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() {
|
||
// #ifdef MP-KUAISHOU || MP-WEIXIN
|
||
this.winHeight = '100vh';
|
||
// #endif
|
||
// #ifndef MP-KUAISHOU || MP-WEIXIN
|
||
const sysInfo = uni.getSystemInfoSync();
|
||
//获取可是区域高度
|
||
const winHeight = sysInfo.windowHeight;
|
||
if (winHeight && winHeight > 0) {
|
||
this.winHeight = winHeight + 'px';
|
||
} else {
|
||
this.winHeight = '100vh';
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
onLoad(e) {
|
||
//在苹果系统微信小程序是否开启支付
|
||
this.isWxIosPay = uni.getStorageSync('isWxIosPay');
|
||
//是开启整部购买
|
||
this.zhengbu = uni.getStorageSync('zhengbu') ? uni.getStorageSync('zhengbu') : '否';
|
||
//是否开启单集购买
|
||
this.danbu = uni.getStorageSync('danbu') ? uni.getStorageSync('danbu') : '否';
|
||
// #ifndef MP-WEIXIN || MP-KUAISHOU
|
||
if ((this.showControls = true)) {
|
||
clearTimeout(this.timerCon);
|
||
this.timerCon = null;
|
||
this.timerCon = setTimeout(() => {
|
||
this.showControls = false;
|
||
this.$forceUpdate();
|
||
}, 4000);
|
||
}
|
||
// #endif
|
||
if (uni.getStorageSync('qdCode')) {
|
||
this.qdCode = uni.getStorageSync('qdCode');
|
||
} else {
|
||
this.qdCode = '';
|
||
}
|
||
|
||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||
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]);
|
||
}
|
||
if (scene[4]) {
|
||
this.tt_album_id = scene[4];
|
||
}
|
||
if (scene[5]) {
|
||
this.tt_episode_id = scene[5];
|
||
}
|
||
this.getDataList(this.courseId, this.courseDetailsId);
|
||
this.getMyLoveStatus();
|
||
}
|
||
this.isGuanggao = uni.getStorageSync('isGuanggao'); //微信
|
||
this.isGuanggaody = uni.getStorageSync('isGuanggaody'); //抖音
|
||
this.adUnitId = uni.getStorageSync('adUnitId');
|
||
// #ifdef MP-WEIXIN
|
||
if (this.isGuanggao == '是' && this.adUnitId) {
|
||
this.adLoad();
|
||
}
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
this.dyadUnitId = uni.getStorageSync('dyadUnitId');
|
||
if (this.isGuanggaody == '是' && this.dyadUnitId) {
|
||
this.adDouYinLoad(); //抖音广告
|
||
}
|
||
// #endif
|
||
|
||
// #endif
|
||
if (e.invitation) {
|
||
uni.setStorageSync('invitation', e.invitation);
|
||
}
|
||
if (e.qdCode) {
|
||
uni.setStorageSync('qdCodeion', e.qdCode);
|
||
}
|
||
if (e.id) {
|
||
this.courseId = e.id;
|
||
if (e.courseDetailsId && e.courseDetailsId != 'null') {
|
||
this.courseDetailsId = e.courseDetailsId;
|
||
}
|
||
console.log(this.courseDetailsId, '跳转进来的id');
|
||
this.getMyLoveStatus();
|
||
}
|
||
if (e.tt_album_id) {
|
||
this.tt_album_id = e.tt_album_id;
|
||
}
|
||
if (e.tt_episode_id) {
|
||
this.tt_episode_id = e.tt_episode_id;
|
||
}
|
||
if (e.allId) {
|
||
console.log('allId ---- ');
|
||
|
||
// 如果存在allId 并且没有登录 则表示使用无痕浏览器查看，弹出提示
|
||
if (!uni.getStorageSync('token')) {
|
||
uni.setStorageSync('isSafeView', '1');
|
||
}
|
||
|
||
const arr = e.allId.split('-');
|
||
this.courseId = arr[0];
|
||
if (arr[1] && arr[1] != 'null') {
|
||
this.courseDetailsId = arr[1];
|
||
}
|
||
this.getMyLoveStatus();
|
||
this.getMoneyList();
|
||
this.getMyMoney();
|
||
}
|
||
// this.$u.get('/app/common/type/817').then(res => { //是否开启购买整部视频 817
|
||
// if (res.code == 0 && res.data) {
|
||
// this.zhengbu = res.data.value;
|
||
// }
|
||
// });
|
||
|
||
// this.$u.get('/app/common/type/818').then(res => { //是否开启购买单集视频 818
|
||
// if (res.code == 0 && res.data) {
|
||
// this.danbu = res.data.value;
|
||
// }
|
||
// });
|
||
},
|
||
onHide() {
|
||
//恢复录屏
|
||
// #ifdef MP-TOUTIAO
|
||
tt.enableUserScreenRecord({
|
||
success(res) {
|
||
console.log('enableUserScreenRecord 调用成功', res);
|
||
},
|
||
fail(res) {
|
||
console.log('enableUserScreenRecord 调用失败', res);
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
onUnload() {
|
||
// #ifdef MP-TOUTIAO
|
||
tt.enableUserScreenRecord({
|
||
success(res) {
|
||
console.log('enableUserScreenRecord 调用成功', res);
|
||
},
|
||
fail(res) {
|
||
console.log('enableUserScreenRecord 调用失败', res);
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
onShow() {
|
||
console.log('onSHow video');
|
||
|
||
//当应用从后台进入前台时自动播放
|
||
if (this.videoContext) {
|
||
this.videoContext.play();
|
||
}
|
||
const noBuyVideoIndex = uni.getStorageSync('noBuyVideoIndex');
|
||
if (noBuyVideoIndex !== null && noBuyVideoIndex !== undefined) {
|
||
this.noBuyVideoIndex = noBuyVideoIndex;
|
||
}
|
||
|
||
try {
|
||
this.playType = Number(uni.getStorageSync('playType'));
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
this.playType = 1;
|
||
}
|
||
let that = this;
|
||
//增加防录屏
|
||
// 抖音
|
||
// #ifdef MP-TOUTIAO
|
||
tt.disableUserScreenRecord({
|
||
success(res) {
|
||
console.log('disableUserScreenRecord 调用成功', res);
|
||
},
|
||
fail(res) {
|
||
console.log('disableUserScreenRecord 调用失败', res);
|
||
}
|
||
});
|
||
// #endif
|
||
//微信
|
||
// #ifdef MP-WEIXIN
|
||
// 监听用户录屏事件
|
||
let sysInfo = uni.getSystemInfoSync();
|
||
if (sysInfo.osName == 'ios') {
|
||
//ios系统
|
||
const handler = function (res) {
|
||
console.log(res.state);
|
||
if (res.state == 'start') {
|
||
if (that.videoContext) {
|
||
//如果有视频的上下文对象
|
||
that.videoContext.stop(); //停止视频播放
|
||
} else {
|
||
let numIdCurr = that.videoList[that.current].courseDetailsId;
|
||
that.videoContextId = 'myVideo' + numIdCurr;
|
||
that.videoContext = uni.createVideoContext(that.videoContextId, that);
|
||
that.videoContext.stop(); //停止视频播放
|
||
}
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '尊重他人劳动成功，请勿录屏！',
|
||
complete() {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
};
|
||
wx.onScreenRecordingStateChanged(handler);
|
||
} else {
|
||
//安卓系统
|
||
wx.setVisualEffectOnCapture({
|
||
visualEffect: 'hidden',
|
||
success(res) {}
|
||
});
|
||
}
|
||
// #endif
|
||
this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否';
|
||
if (this.courseId) {
|
||
console.log('has this.courseId getDataList()');
|
||
this.getDataList(this.courseId, this.courseDetailsId);
|
||
}
|
||
this.$Request.getT('app/course/getRedEnvelopeTips').then((res) => {
|
||
if (res.code == 0) {
|
||
this.getRedEnvelopeTips = res.data;
|
||
}
|
||
});
|
||
|
||
// uni.$on('back', (data) => {
|
||
// if (data.flag == true) {
|
||
// that.showPay = false
|
||
// that.getDataList(that.courseId, that.courseDetailsId, true);
|
||
// }
|
||
// })
|
||
this.getScale();
|
||
},
|
||
onReady() {
|
||
// #ifdef MP-WEIXIN || MP-KUAISHOU
|
||
let info = uni.getMenuButtonBoundingClientRect();
|
||
this.meunTop = info.top + (info.height - 19) / 2;
|
||
console.log(this.meunTop, '测试ccccc');
|
||
// #endif
|
||
// #ifndef MP-WEIXIN || MP-KUAISHOU
|
||
this.meunTop = 37;
|
||
// #endif
|
||
|
||
// const windowResizeCallback = (res) => {
|
||
// console.log('变化后的窗口宽度=' + res.size.windowWidth)
|
||
// console.log('变化后的窗口高度=' + res.size.windowHeight)
|
||
// this.onResize(res)
|
||
// setTimeout(()=>{
|
||
// this.onResize(res)
|
||
// },500)
|
||
// }
|
||
// uni.onWindowResize(windowResizeCallback)
|
||
|
||
// #ifdef H5
|
||
|
||
// #endif
|
||
},
|
||
watch: {
|
||
//监听当前播放的集数
|
||
current() {
|
||
this.comNumVideo();
|
||
},
|
||
showControls(val) {
|
||
//在没有播放视频权限的时候控制中心不隐藏
|
||
const nowVideo = this.videoList[this.current];
|
||
const videoUrl = nowVideo ? nowVideo.videoUrl : '';
|
||
if (!videoUrl) {
|
||
this.showControls = true;
|
||
this.$forceUpdate();
|
||
}
|
||
// #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: {
|
||
onResize(res) {
|
||
const sysInfo = uni.getSystemInfoSync();
|
||
//获取可是区域高度
|
||
const winHeight = sysInfo.windowHeight;
|
||
if (winHeight && winHeight > 0) {
|
||
this.winHeight = winHeight + 'px';
|
||
} else {
|
||
this.winHeight = '100vh';
|
||
}
|
||
},
|
||
/**
|
||
* 获取金币比例
|
||
*/
|
||
getScale() {
|
||
this.$Request.getT('app/common/type/914', {}).then((res) => {
|
||
if (res.code == 0) {
|
||
this.scale = Number(res.data.value);
|
||
}
|
||
});
|
||
},
|
||
onDone(index) {
|
||
const prize = this.prizeList[index];
|
||
uni.showModal({
|
||
title: prize.id == 'thanks' ? '很遗憾' : '恭喜您',
|
||
content: (prize.id !== 'thanks' ? `获得` : '') + prize.name
|
||
});
|
||
},
|
||
onClick() {
|
||
// 奖品的索引
|
||
this.$refs.dialer.run(5);
|
||
},
|
||
goWallet(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
},
|
||
disableContextMenu(event) {
|
||
event.preventDefault();
|
||
},
|
||
//点击封面打开弹窗
|
||
openShowPay(val, inx, url) {
|
||
console.log(val);
|
||
console.log(inx);
|
||
console.log(url);
|
||
console.log(this.videoList[this.current]);
|
||
this.zongPrice = this.info.price;
|
||
this.countPrice = this.videoList[this.current].price;
|
||
this.showPay = true;
|
||
this.noBuyVideoIndex = this.current;
|
||
},
|
||
// 获取收藏状态
|
||
getMyLoveStatus() {
|
||
let data = {
|
||
id: this.courseId,
|
||
token: uni.getStorageSync('token')
|
||
};
|
||
this.$Request.getT('/app/course/selectCourseDetailsById', data).then((res) => {
|
||
if (res.code == 0) {
|
||
if (res.data && res.data.isCollect && res.data.isCollect > 0) {
|
||
this.isCollect = true;
|
||
} else {
|
||
this.isCollect = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
maskClick() {
|
||
this.$refs.popupBsss.close();
|
||
this.scrollIntoViews = '';
|
||
},
|
||
priveImage(url) {
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') == -1) {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
});
|
||
}
|
||
// #endif
|
||
},
|
||
//抖音保存海报
|
||
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
|
||
},
|
||
//获取当前播放视频的封面图
|
||
getVideoImageUrl() {
|
||
return this.videoList[this.current].titleImg;
|
||
},
|
||
//获取当前播放视频的标题
|
||
getVideoTitle() {
|
||
return this.videoList[this.current].courseDetailsName;
|
||
},
|
||
isSelectType(e) {
|
||
// console.log(e)
|
||
// #ifndef MP-WEIXIN
|
||
this.showControls = !this.showControls;
|
||
this.$forceUpdate();
|
||
// #endif
|
||
},
|
||
//显示/隐藏适配控制器的回调
|
||
controlstoggles(e) {
|
||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-KUAISHOU
|
||
this.showControls = e.detail.show;
|
||
// #endif
|
||
|
||
console.log(e.detail.show, '显示/隐藏控制栏');
|
||
},
|
||
videoError(e) {
|
||
console.log(e, '错误');
|
||
},
|
||
getsource(e) {
|
||
console.log(e, '获取资源完成');
|
||
this.startPlays();
|
||
},
|
||
//开始播放
|
||
startPlays() {
|
||
this.$nextTick(() => {
|
||
// 把选择的视频的自动播放设置为true
|
||
// this.videoList[this.current].autoPlay = true
|
||
//让当前选择的视频播放
|
||
this.startPlay(this.current);
|
||
//更新视图
|
||
this.$forceUpdate();
|
||
});
|
||
},
|
||
//打开倍速弹框
|
||
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
|
||
});
|
||
},
|
||
//获取
|
||
adLoad() {
|
||
let that = this;
|
||
if (uni.createRewardedVideoAd) {
|
||
videoAd = uni.createRewardedVideoAd({
|
||
adUnitId: that.adUnitId //你的广告key,从微信小程序后台>流量主>广告管理获取
|
||
});
|
||
console.log(videoAd, '广告广告广告广告11111');
|
||
videoAd.onError((err) => {
|
||
console.log(err);
|
||
});
|
||
videoAd.onClose((status) => {
|
||
if ((status && status.isEnded) || status === undefined) {
|
||
//广告播放完成后的的业务逻辑
|
||
console.log('播放成功111111111111');
|
||
uni.showToast({
|
||
title: '加载中'
|
||
});
|
||
let data = {
|
||
courseId: that.videoList[this.current].courseId,
|
||
courseDetailsId: that.videoList[this.current].courseDetailsId
|
||
};
|
||
that.$Request.postT('/app/course/courseNotify', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '解锁成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
that.showPay = false;
|
||
that.getDataList(that.courseId, that.courseDetailsId, true);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
//广告播放失败或者未播放完成
|
||
console.log('播放失败或者未播放完成');
|
||
uni.showToast({
|
||
title: '未完整观看视频不能获取奖励哦',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
//获取抖音
|
||
adDouYinLoad() {
|
||
let that = this;
|
||
if (uni.createRewardedVideoAd) {
|
||
videoAd = uni.createRewardedVideoAd({
|
||
adUnitId: that.dyadUnitId //你的广告key,从微信小程序后台>流量主>广告管理获取
|
||
});
|
||
console.log(videoAd, '广告广告广告广告11111');
|
||
videoAd.onError((err) => {
|
||
console.log(err);
|
||
});
|
||
videoAd.onClose((status) => {
|
||
if ((status && status.isEnded) || status === undefined) {
|
||
//广告播放完成后的的业务逻辑
|
||
console.log('播放成功111111111111');
|
||
uni.showToast({
|
||
title: '加载中'
|
||
});
|
||
let data = {
|
||
courseId: that.videoList[this.current].courseId,
|
||
courseDetailsId: that.videoList[this.current].courseDetailsId
|
||
};
|
||
that.$Request.postT('/app/course/courseNotify', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '解锁成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
that.showPay = false;
|
||
that.getDataList(that.courseId, that.courseDetailsId, true);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
//广告播放失败或者未播放完成
|
||
console.log('播放失败或者未播放完成');
|
||
uni.showToast({
|
||
title: '未完整观看视频不能获取奖励哦',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
//微信拉取广告
|
||
openVideoAd() {
|
||
let that = this;
|
||
console.log(videoAd, 222222222);
|
||
if (videoAd) {
|
||
videoAd.show().catch((err) => {
|
||
console.log(' 广告拉取失败，重试');
|
||
// 广告拉取失败，重试
|
||
videoAd.load().then(() => {
|
||
videoAd.show();
|
||
});
|
||
});
|
||
}
|
||
},
|
||
|
||
//抖音获取广告
|
||
openVideodyAd() {
|
||
let that = this;
|
||
|
||
let token = this.$queue.getData('token');
|
||
if (!token) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
});
|
||
return;
|
||
}
|
||
|
||
console.log(videoAd, 333333333);
|
||
if (videoAd) {
|
||
videoAd.show().catch((err) => {
|
||
console.log(' 广告拉取失败，重试');
|
||
// 广告拉取失败，重试
|
||
videoAd.load().then(() => {
|
||
videoAd.show();
|
||
});
|
||
});
|
||
}
|
||
},
|
||
|
||
//播放进度变化回掉
|
||
timeupdate(e) {
|
||
//隐藏loding
|
||
// #ifdef H5
|
||
uni.hideLoading();
|
||
// #endif
|
||
// console.log(e.detail.currentTime)
|
||
// console.log(e.detail.duration)
|
||
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() {
|
||
// #ifdef MP-KUAISHOU
|
||
this.$refs.popupBsss.open();
|
||
this.$nextTick(() => {
|
||
this.scrollIntoViews = this.scrollIntoView;
|
||
this.$forceUpdate();
|
||
});
|
||
// #endif
|
||
// #ifndef MP-KUAISHOU
|
||
this.show = true;
|
||
this.$nextTick(() => {
|
||
this.scrollIntoViews = this.scrollIntoView;
|
||
this.$forceUpdate();
|
||
});
|
||
// #endif
|
||
console.log(this.scrollIntoView, '11111111');
|
||
},
|
||
/**
|
||
* @param {String} path //返回的二维码地址
|
||
*/
|
||
qrR(path) {
|
||
this.qrCodeData = path;
|
||
this.haibaoShow = true;
|
||
},
|
||
//生成失败
|
||
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} img 成功回调的图片
|
||
*/
|
||
posterSuccess(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;
|
||
|
||
// #ifdef H5 || APP
|
||
let urls =
|
||
config.APIHOST2 +
|
||
'/me/detail/detail?id=' +
|
||
item.courseId +
|
||
'&courseDetailsId=' +
|
||
item.courseDetailsId +
|
||
'&invitation=' +
|
||
uni.getStorageSync('invitationCode') +
|
||
'&qdCode=' +
|
||
this.qdCode;
|
||
this.erweima = urls;
|
||
this.isStart = true;
|
||
// #endif
|
||
|
||
let that = this;
|
||
// #ifdef MP-WEIXIN
|
||
// invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
|
||
// .courseDetailsId + ',' + this.qdCode + ',' + this.tt_album_id + ',' + this.tt_episode_id,
|
||
let data = {
|
||
invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item.courseDetailsId + ',' + this.qdCode,
|
||
page: 'me/detail/detail'
|
||
};
|
||
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.hideLoading();
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
let data = {
|
||
invitationCode:
|
||
uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item.courseDetailsId + ',' + this.qdCode + ',' + this.tt_album_id + ',' + this.tt_episode_id,
|
||
page: 'me/detail/detail'
|
||
};
|
||
uni.downloadFile({
|
||
url: config.APIHOST + '/app/invite/dyCreateQr?invitationCode=' + data.invitationCode + '&page=' + data.page,
|
||
success(res) {
|
||
if (res.statusCode === 200) {
|
||
that.qrCodeData = res.tempFilePath;
|
||
that.haibaoShow = true;
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
/**
|
||
* @param {Object} type 类型
|
||
* 1:购买整部视频
|
||
* 2:购买单集视频
|
||
*/
|
||
payVideo(type) {
|
||
if (uni.getStorageSync('token')) {
|
||
// #ifdef MP-TOUTIAO
|
||
if (!this.checked) {
|
||
uni.showToast({
|
||
title: '请阅读并同意《付费须知说明》',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// #endif
|
||
this.submitPay(type);
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
});
|
||
}
|
||
},
|
||
//子组件支付成功的回调
|
||
paySuccess(data) {
|
||
console.log(data);
|
||
// data.h5Url 跳转地址
|
||
this.showMoney = false; //显示充值弹窗
|
||
uni.setStorageSync('noBuyVideoIndex', this.current);
|
||
// this.payOrder(this.ordersId, this.payMoney)
|
||
// #ifdef APP
|
||
uni.navigateTo({
|
||
url: '/pages/pays/pays?ordersId=' + data.ordersId + '&url=' + data.h5Url
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
window.location.href = data.h5Url;
|
||
// #endif
|
||
},
|
||
//自组件关闭的回调
|
||
closeMoney(data) {
|
||
this.showMoney = data;
|
||
},
|
||
//使用金币购买
|
||
submitPay(type) {
|
||
let data = {
|
||
courseId: this.courseId
|
||
};
|
||
|
||
data.courseDetailsId = this.videoList[this.current].courseDetailsId;
|
||
this.$Request.getT('/app/order/insertCourseOrders', data).then((res) => {
|
||
if (res.code == 0) {
|
||
this.ordersId = res.data.orders.ordersId; //记录订单id
|
||
this.payMoney = res.data.orders.payMoney; //记录订单价格
|
||
console.log(type);
|
||
if (type == 1) {
|
||
//金币
|
||
// this.showPay = false
|
||
// this.showMoney = false
|
||
this.payOrder(res.data.orders.ordersId, res.data.orders.payMoney);
|
||
} else if (type == 2) {
|
||
//支付宝
|
||
this.showPay = false; //关闭购买选择弹窗
|
||
this.payPrice = res.data.orders.payMoney; //需要支付的价格
|
||
this.showMoney = true; //显示充值弹窗
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
payOrder(orderId, payMoney) {
|
||
let that = this;
|
||
that.$Request
|
||
.postT('/app/order/payOrders', {
|
||
orderId: orderId
|
||
})
|
||
.then((res) => {
|
||
that.showPay = true;
|
||
if (res.code == 0) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '已成功解锁',
|
||
icon: 'none'
|
||
});
|
||
that.showPay = false;
|
||
that.showMoney = false;
|
||
that.noBuyVideoIndex = null;
|
||
setTimeout(() => {
|
||
that.getDataList(that.courseId, that.videoList[that.current].courseDetailsId, true);
|
||
}, 1000);
|
||
} else {
|
||
//支付失败（余额不足）
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
that.showPay = true;
|
||
that.showMoney = false;
|
||
// that.showPay = false //关闭购买选择弹窗
|
||
// this.payPrice = payMoney //需要支付的价格
|
||
// this.showMoney = true //显示充值弹窗
|
||
}
|
||
});
|
||
},
|
||
//去开通会员
|
||
goNav(url) {
|
||
if (uni.getStorageSync('token')) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
});
|
||
}
|
||
},
|
||
//收藏
|
||
shoucang() {
|
||
if (uni.getStorageSync('token')) {
|
||
let data = {
|
||
courseId: this.courseId,
|
||
classify: 1,
|
||
type: this.isCollect == false ? 1 : 0
|
||
};
|
||
this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then((res) => {
|
||
if (res.code == 0) {
|
||
this.getMyLoveStatus();
|
||
}
|
||
});
|
||
} 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'
|
||
});
|
||
}
|
||
},
|
||
//计算正在观看哪个视频
|
||
comNumVideo() {
|
||
let courseDetailsId = this.videoList[this.current].courseDetailsId;
|
||
this.meunList.map((item, index) => {
|
||
if (item.courseDetailsId == courseDetailsId) {
|
||
//找到了
|
||
this.num = item.num;
|
||
}
|
||
});
|
||
},
|
||
//选择集数后在更新剩下的数据
|
||
setVideoList(index) {
|
||
//判断后续是否还有两条视频
|
||
let lengths = this.meunList.length - (index + 1);
|
||
//有最少两条
|
||
if (lengths >= 2) {
|
||
//直接拿两条赋值进去
|
||
this.videoList = [...this.videoList, ...this.meunList.slice(index + 1, index + 3)];
|
||
}
|
||
//只剩一条数据
|
||
if (lengths == 1) {
|
||
//把剩下的一条给放进去
|
||
this.videoList = [
|
||
//选中的那条
|
||
...this.videoList,
|
||
//身下的一条
|
||
this.meunList[this.meunList.length - 1],
|
||
//最后一条则放总数组的第一条
|
||
this.meunList[0]
|
||
];
|
||
}
|
||
//选择的就是最后一条数据
|
||
if (lengths == 0) {
|
||
//后两条拿总数组的前两条就可以了
|
||
this.videoList = [...this.videoList, ...this.meunList.slice(0, 2)];
|
||
}
|
||
//更新视图
|
||
this.$forceUpdate();
|
||
},
|
||
//选择播放
|
||
selectPlay(item, type) {
|
||
//price //videoUrl
|
||
// 根据选择的courseDetailsId拿到meunList列表中的相同数据的下标
|
||
const index = this.meunList.findIndex((menu) => menu.courseDetailsId === item.courseDetailsId);
|
||
this.videoList = [this.meunList[index]];
|
||
this.current = 0;
|
||
if (this.videoList[this.current].videoUrl == '' && this.videoList[this.current].price <= 0 && !type) {
|
||
this.getDataList(this.courseId, this.courseDetailsId, true, 'select');
|
||
return;
|
||
}
|
||
//重新计算一下当前观看的是哪个视频
|
||
this.comNumVideo();
|
||
this.setWxUrl();
|
||
// 把选择的视频的自动播放设置为true
|
||
this.videoList[this.current].autoPlay = true;
|
||
//让当前选择的视频播放
|
||
this.startPlay(this.current);
|
||
//更新视图
|
||
this.$forceUpdate();
|
||
//关闭选择弹窗
|
||
// #ifdef MP-KUAISHOU
|
||
this.$refs.popupBsss.close();
|
||
this.scrollIntoViews = '';
|
||
// #endif
|
||
// #ifndef MP-KUAISHOU
|
||
this.show = false;
|
||
// #endif
|
||
|
||
//记录当前播放位置
|
||
this.scrollIntoView = 'video' + index;
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
|
||
|
||
//等视图跟新完了，把之前剩下的数据补进去在$nextTick中处理
|
||
this.$nextTick(() => {
|
||
this.setVideoList(index);
|
||
});
|
||
},
|
||
// 资源详情
|
||
getDataList(id, courseDetailsId, type, t) {
|
||
console.log('getDataList');
|
||
let data = {
|
||
id,
|
||
token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
|
||
};
|
||
// // #ifdef MP-WEIXIN
|
||
// data.courseDetailsId = courseDetailsId
|
||
// // #endif
|
||
this.$u.api.selectCourseDetailsById(data).then((res) => {
|
||
if (res.code == 0) {
|
||
if (res.data && res.data.dyCourseId) {
|
||
this.dyCourseId = '' + res.data.dyCourseId;
|
||
console.log('dyCourseId__' + this.dyCourseId);
|
||
}
|
||
if (res.data.listsDetail) {
|
||
this.info = res.data;
|
||
this.title = this.info.title;
|
||
let arr = res.data.listsDetail;
|
||
arr.map((item, index) => {
|
||
item.num = index + 1;
|
||
// #ifdef MP-TOUTIAO
|
||
item.autoPlay = false;
|
||
// #endif
|
||
// #ifndef MP-TOUTIAO
|
||
if (item.videoUrl) {
|
||
item.autoPlay = true;
|
||
} else {
|
||
item.autoPlay = false;
|
||
}
|
||
// #endif
|
||
|
||
item.viewInfo = 'video' + index;
|
||
});
|
||
//菜单数组
|
||
this.meunList = arr;
|
||
if (type == true) {
|
||
//购买视频后返回的
|
||
let courseDetailsId = this.videoList[this.current].courseDetailsId;
|
||
this.meunList.some((item) => {
|
||
if (item.courseDetailsId === courseDetailsId) {
|
||
this.videoList[this.current].videoUrl = item.videoUrl;
|
||
//自动播放
|
||
this.startPlay(this.current);
|
||
this.setWxUrl();
|
||
return true;
|
||
}
|
||
});
|
||
this.videoList.map((item) => {
|
||
this.meunList.map((ite) => {
|
||
if (item.courseDetailsId == ite.courseDetailsId && item.courseDetailsId != courseDetailsId) {
|
||
item.videoUrl = ite.videoUrl;
|
||
}
|
||
});
|
||
});
|
||
if (this.noBuyVideoIndex !== null) {
|
||
this.noBuyVideoIndex = null;
|
||
return uni.navigateTo({
|
||
url: '/me/VjgyqAzklr/VjgyqAzklr'
|
||
});
|
||
}
|
||
} else {
|
||
//直接跳转进来的
|
||
|
||
let indexs = -1;
|
||
if (courseDetailsId) {
|
||
//从记录进来的
|
||
console.log(courseDetailsId);
|
||
console.log(this.meunList);
|
||
this.meunList.map((item, index) => {
|
||
if (item.courseDetailsId == courseDetailsId) {
|
||
indexs = index;
|
||
}
|
||
});
|
||
console.log(indexs);
|
||
if (indexs != -1) {
|
||
//找到了
|
||
if (Number(indexs + 1) === this.meunList.length) {
|
||
//最后一条
|
||
console.log('最后一条');
|
||
if (this.meunList.length == 1) {
|
||
//只有一条
|
||
this.videoList = this.meunList.slice(0, 3);
|
||
} else if (this.meunList.length == 2) {
|
||
this.videoList = this.meunList.slice(0, 3);
|
||
} else {
|
||
this.videoList = [
|
||
this.meunList[this.meunList.length - 3],
|
||
this.meunList[this.meunList.length - 2],
|
||
this.meunList[this.meunList.length - 1]
|
||
];
|
||
}
|
||
} else if (Number(indexs) === Number(this.meunList.length - 1)) {
|
||
//倒数第二条
|
||
console.log('倒数第二条');
|
||
if (this.meunList.length == 1) {
|
||
//只有一条
|
||
this.videoList = this.meunList.slice(0, 3);
|
||
} else if (this.meunList.length == 2) {
|
||
//有两条的时候
|
||
this.videoList = [this.meunList[1], this.meunList[0]];
|
||
} else {
|
||
this.videoList = [this.meunList[this.meunList.length - 2], this.meunList[this.meunList.length - 1], this.meunList[0]];
|
||
}
|
||
} else {
|
||
console.log('如果不是最后一条，也不是倒数第二条');
|
||
//如果不是最后一条，也不是倒数第二条，则从找到的位置开始往后拿三条数据放入数组
|
||
if (indexs == 0) {
|
||
this.videoList = [this.meunList[this.meunList.length - 2], this.meunList[this.meunList.length - 1], this.meunList[0]];
|
||
} else if (indexs == 1) {
|
||
this.videoList = [this.meunList[this.meunList.length - 1], this.meunList[0], this.meunList[1]];
|
||
} else {
|
||
this.videoList = this.meunList.slice(indexs - 2, indexs - 2 + 3);
|
||
}
|
||
}
|
||
} else {
|
||
//没找到直接拿前三条数据即可
|
||
this.videoList = this.meunList.slice(0, 3);
|
||
}
|
||
} else {
|
||
//新的视频
|
||
// //视频数组//直接拿前三条
|
||
|
||
this.videoList = this.meunList.slice(0, 3);
|
||
indexs = 0;
|
||
}
|
||
console.log(this.videoList);
|
||
this.videoList.map((item, index) => {
|
||
if (item.courseDetailsId == courseDetailsId) {
|
||
this.current = index;
|
||
}
|
||
});
|
||
//重新计算当前在播放哪个视频
|
||
this.comNumVideo();
|
||
if (indexs != -1 && this.meunList.length > 0) {
|
||
this.$nextTick(() => {
|
||
this.scrollIntoView = 'video' + indexs;
|
||
});
|
||
}
|
||
}
|
||
console.log('到达判断抽奖');
|
||
// if (this.noBuyVideoIndex != null ) {
|
||
console.log(this.noBuyVideoIndex);
|
||
console.log(this.videoList);
|
||
if (this.noBuyVideoIndex !== null && this.noBuyVideoIndex !== undefined && this.noBuyVideoIndex !== '') {
|
||
console.log('获取转盘抽奖次数');
|
||
this.$Request.getT('app/discSpinning/drawCount').then((res) => {
|
||
console.log('转盘抽奖次数', res.count);
|
||
if (res.count >= 1) {
|
||
uni.navigateTo({
|
||
url: '/me/VjgyqAzklr/VjgyqAzklr'
|
||
});
|
||
} else {
|
||
}
|
||
});
|
||
uni.removeStorageSync('noBuyVideoIndex');
|
||
this.noBuyVideoIndex = null;
|
||
}
|
||
let numIdCurr = this.videoList[0].courseDetailsId;
|
||
this.videoContextId = 'myVideo' + numIdCurr;
|
||
this.$forceUpdate();
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
|
||
this.$nextTick(() => {
|
||
this.setWxUrl();
|
||
if (!this.videoList[this.current].videoUrl) {
|
||
//不能播放的显示购买弹窗
|
||
this.zongPrice = this.info.price;
|
||
this.countPrice = this.videoList[this.current].price;
|
||
this.showPay = true;
|
||
this.noBuyVideoIndex = this.current;
|
||
}
|
||
});
|
||
|
||
if (t == 'select') {
|
||
this.selectPlay(this.videoList[this.current], true);
|
||
}
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1500,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
setWxUrl() {
|
||
// // #ifdef MP-WEIXIN
|
||
// if (!this.videoList[this.current].wxUrl) {
|
||
// let data = {
|
||
// wxCourseDetailsIds: this.videoList[this.current].wxCourseDetailsId
|
||
// }
|
||
// this.$Request.postJson('/app/course/selectWxVideoUrl', data).then(res => {
|
||
// if (res.code == 0 && res.data) {
|
||
// this.videoList[this.current].wxUrl = res.data[0].mp4_url
|
||
// }
|
||
// })
|
||
// }
|
||
// // #endif
|
||
},
|
||
setHistor(courseId, courseDetailsId) {
|
||
if (uni.getStorageSync('token')) {
|
||
let data = {
|
||
courseId: courseId,
|
||
courseDetailsId: courseDetailsId,
|
||
classify: 3,
|
||
type: 1
|
||
};
|
||
this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then((res) => {});
|
||
}
|
||
},
|
||
//swiper上下切换事件
|
||
change(e) {
|
||
console.log(e);
|
||
//拿出当前的swiper索引
|
||
let current = Number(e.detail.current);
|
||
// 根据courseDetailsId在meunList中找到这个数据的下标
|
||
let indexs = -1;
|
||
//考虑向上滑动的时候
|
||
// console.log(current, '滑动的current')
|
||
// console.log(this.current, '当前的current')
|
||
// console.log(this.videoList, '当前的current')
|
||
// 有三条的时候
|
||
if (current == 2 && this.current == 0) {
|
||
//向上滑到头的时候先拿第一条数据的courseDetailsId
|
||
let courseDetailsId = this.videoList[0].courseDetailsId;
|
||
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;
|
||
indexs = this.meunList.findIndex((item) => item.courseDetailsId === courseDetailsId);
|
||
//记录当前数据在meunList中的下标
|
||
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;
|
||
if (!this.videoList[this.current].videoUrl) {
|
||
this.zongPrice = this.info.price;
|
||
this.countPrice = this.videoList[this.current].price;
|
||
this.showPay = true;
|
||
this.noBuyVideoIndex = this.current;
|
||
}
|
||
this.$nextTick(() => {
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
|
||
this.setWxUrl();
|
||
// #ifndef MP-TOUTIAO
|
||
// 把选择的视频的自动播放设置为true
|
||
this.videoList[this.current].autoPlay = true;
|
||
//让当前选择的视频播放
|
||
this.startPlay(this.current);
|
||
// #endif
|
||
|
||
//更新视图
|
||
this.$forceUpdate();
|
||
});
|
||
},
|
||
startPlay(current) {
|
||
console.log(222222);
|
||
if (this.videoContext) {
|
||
//判断之前是否有视频的上下文
|
||
this.videoContext.stop();
|
||
this.videoContext = null;
|
||
}
|
||
console.log(this.videoList[current]);
|
||
let numIdCurr = this.videoList[current].courseDetailsId;
|
||
if (this.videoList[current].videoUrl) {
|
||
//已经购买可直接播放
|
||
// 播放时记录当前播放的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();
|
||
this.setWxUrl();
|
||
});
|
||
}
|
||
} else {
|
||
//没有视频链接则表示没有权限，需要购买 弹出购买弹窗
|
||
this.zongPrice = this.info.price;
|
||
this.countPrice = this.videoList[this.current].price;
|
||
this.showPay = true;
|
||
this.noBuyVideoIndex = this.current;
|
||
}
|
||
},
|
||
//播放时的回掉
|
||
videoPlay(videoId) {
|
||
this.$Request
|
||
.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: this.courseDetailsId,
|
||
type: 'start'
|
||
})
|
||
.then((res) => {
|
||
this.playFlag = true;
|
||
console.log('播放开始');
|
||
});
|
||
},
|
||
//监听视频播放完成
|
||
ended() {
|
||
console.log(this.current);
|
||
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() {
|
||
let pages = getCurrentPages(); // 获取当前页面栈
|
||
if (pages.length > 1) {
|
||
// 如果页面栈长度大于1，则表示有上一页 则直接返回
|
||
uni.navigateBack();
|
||
} else {
|
||
//否则跳转到首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
},
|
||
KoXgyqHbmG() {
|
||
let QPlscdgyqV = 'sEuKVpVKgRbyFgyqPzmO';
|
||
QPlscdgyqV += 'MWZEZOxxLgyqUKMlWrim';
|
||
},
|
||
TPtBVYTHmkgyqJpomNgt() {
|
||
let akYVgoTXinWgyqKiWNpZ = 'mhiTaFlngyqiCDNzHIqq';
|
||
akYVgoTXinWgyqKiWNpZ += 'qlqcyGjMgBBrggyqWXzX';
|
||
},
|
||
wAIaTsgyqKfOzJNuPsQX() {
|
||
let tgyqiMFylinCKsWEmSKU = 'jzMLbWsvEgyqfmHaEuij';
|
||
tgyqiMFylinCKsWEmSKU += 'VkrlaGUugyqWqyoQCxPO';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #000;
|
||
}
|
||
|
||
::v-deep .u-drawer-content {
|
||
// position: fixed;
|
||
}
|
||
|
||
.videoListCurr {
|
||
background-color: #ff7581 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/deep/.u-drawer-bottom {
|
||
background-color: #ffffff !important;
|
||
}
|
||
|
||
.bs {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.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 {
|
||
.bs {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
color: #333333;
|
||
margin: 0 0 40rpx 0;
|
||
|
||
.list-title {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
padding-left: 30rpx;
|
||
|
||
.list-title-ji {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.list-item {
|
||
padding: 0 30rpx;
|
||
|
||
.list-item-box {
|
||
width: 100%;
|
||
line-height: 90rpx;
|
||
background-color: #f2f2f2;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
border-radius: 20rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
width: 100%;
|
||
height: calc(100% - 100rpx);
|
||
}
|
||
|
||
.list-box-wai {
|
||
width: calc(100% - 60rpx);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.list-box-item {
|
||
width: 205rpx;
|
||
height: 88rpx;
|
||
background-color: #f5f7ff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.list-box-item-playing {
|
||
position: absolute;
|
||
width: 32rpx;
|
||
height: 24rpx;
|
||
bottom: 10rpx;
|
||
right: 15rpx;
|
||
}
|
||
|
||
.list-box-item-lock {
|
||
width: 38rpx;
|
||
height: 34rpx;
|
||
border-radius: 0rpx 12rpx 0rpx 12rpx;
|
||
background-color: #cccccc;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.swipers {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
.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: 9999;
|
||
|
||
.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>
|