2003 lines
52 KiB
Plaintext
2003 lines
52 KiB
Plaintext
<template>
|
||
<view class="detail" :style="{paddingBottom:paddingBottom}">
|
||
<swiper @longpress="openBs()" :circular="true" class="swipers" @change="change" :current="current"
|
||
:vertical="true" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="300">
|
||
<swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId">
|
||
<view class="swipers-items" v-if="current == index">
|
||
<!-- 视频 -->
|
||
<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" object-fit="contain"
|
||
v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true"
|
||
codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
|
||
@timeupdate="timeupdate" @play="videoPlay('myVideo'+item.courseDetailsId, item.courseDetailsId)"
|
||
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
|
||
:id="'myVideo'+item.courseDetailsId" :src="item.videoUrl" :autoplay="item.autoPlay"
|
||
class="swipers-items-video"></video>
|
||
<image v-else @click="!item.videoUrl?openPay():''" :src="item.titleImg" class="swipers-items-imgsbg"
|
||
mode="aspectFill">
|
||
</image>
|
||
<!-- 返回图标 -->
|
||
<image v-if="showBack" src="../static/nvueIcon/backs.png" @click="goBack()"
|
||
class="swipers-items-back" mode="">
|
||
</image>
|
||
<!-- 右边操作 -->
|
||
<view class="swipers-items-right" :style="rightTop" v-if="showControls">
|
||
<view class="swipers-items-right-item">
|
||
<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
|
||
<image v-if="item.isGood!=0" class="swipers-items-right-item-imgs"
|
||
src="../static/nvueIcon/myLove_.png" mode=""></image>
|
||
<image v-else class="swipers-items-right-item-imgs" src="../static/nvueIcon/myLove.png"
|
||
mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
<text class="swipers-items-right-item-txts">
|
||
{{item.goodNum}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="swipers-items-right-item" @click="share()">
|
||
<view class="swipers-items-right-item-img">
|
||
<image class="swipers-items-right-item-imgs" src="../../static/images/me/share.png"
|
||
mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
<text class="swipers-items-right-item-txts">
|
||
分享
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="swipers-items-right-item" v-if="isCollect">
|
||
<view class="swipers-items-right-item-img" @click.stop="shoucang()">
|
||
<image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian_s.png"
|
||
mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
<text class="swipers-items-right-item-txts">
|
||
已追
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="swipers-items-right-item" v-else>
|
||
<view class="swipers-items-right-item-img" @click.stop="shoucang()">
|
||
<image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian.png"
|
||
mode=""></image>
|
||
</view>
|
||
<view class="swipers-items-right-item-txt">
|
||
<text class="swipers-items-right-item-txts">
|
||
追剧
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部视频信息 -->
|
||
<view class="swipers-items-btom" v-if="showControls">
|
||
<view class="swipers-items-btom-box">
|
||
<!-- 标题 -->
|
||
<view class="swipers-items-btom-box-title">
|
||
<text class="swipers-items-btom-box-titles">
|
||
{{item.courseDetailsName}}
|
||
</text>
|
||
</view>
|
||
<!-- 介绍 -->
|
||
<view v-if="item.content" class="swipers-items-btom-box-content">
|
||
<text class="swipers-items-btom-box-contents">{{item.content}}</text>
|
||
</view>
|
||
<!-- 集数 -->
|
||
<view @click="openShow()" class="swipers-items-btom-box-num">
|
||
<text class="swipers-items-btom-box-nums">
|
||
第{{item.num}}集（共{{meunList.length}}集）选集 >
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 选集弹窗 -->
|
||
<uni-popup @change="changeXj" ref="popup" :safe-area="false">
|
||
<view class="list">
|
||
<view class="list-title">
|
||
<view class="list-title-l">
|
||
<text class="list-title-ls">
|
||
{{title}}
|
||
</text>
|
||
<text class="list-title-lsn">共{{meunList.length}}集</text>
|
||
</view>
|
||
<view class="list-title-r" @click="closeList()">
|
||
<image class="list-title-rs" src="../../static/images/me/closeIconss.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="list-content">
|
||
<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true" class="
|
||
">
|
||
<view class="list-contentss">
|
||
<view :id="item.viewInfo" @click="selectPlay(item,index)"
|
||
:class="('video'+index) == scrollIntoView?'videoListCurr':''" class="list-content-item"
|
||
v-for="(item,index) in meunList" :key="index">
|
||
<text class="list-content-items">第{{index+1}}集</text>
|
||
<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">
|
||
<image class="list-box-item-lockI" src="../../static/images/me/lockWite.png"
|
||
mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view style="height: 0;" class="list-content-item">
|
||
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 购买弹窗 -->
|
||
<uni-popup ref="popupPya" :safe-area="false">
|
||
<view class="pay">
|
||
<view class="list-title">
|
||
<view class="list-title-l">
|
||
<text class="list-title-lss">
|
||
当前视频 没有播放权限
|
||
</text>
|
||
</view>
|
||
<view class="list-title-r" @click="closePay()">
|
||
<image class="list-title-rs" src="../../static/images/me/closeIconss.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<text class=""
|
||
style="font-size: 24rpx;color: #999;padding: 0 34rpx;margin: 20rpx 0; auto;text-align: left;width: 100%;">
|
||
{{this.courseDetailsId}}
|
||
</text>
|
||
<view class="pay-content">
|
||
<view class="pay-content-item" @click="payVideo(1)">
|
||
<image class="pay-content-item-icon" src="../../static/images/me/rmIcon.png" mode=""></image>
|
||
<text class="pay-content-items">
|
||
{{countPrice*scale}}金币解锁整部视频
|
||
</text>
|
||
</view>
|
||
<view class="pay-content-item" @click="payVideo(2)">
|
||
<text class="pay-content-items">
|
||
{{countPrice}}元解锁单集视频
|
||
</text>
|
||
</view>
|
||
<!-- <view class="pay-content-item" @click="goNav('/pages/me/vip/index')" v-if="isVips == '是'">
|
||
<image class="pay-content-item-icon" src="../../static/images/me/rmIcon.png" mode=""></image>
|
||
<text class="pay-content-items">
|
||
开通会员
|
||
</text>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
</uni-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">
|
||
<text class="bs-se-it">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 支付弹窗 -->
|
||
<uni-popup ref="popuppay" :safe-area="false">
|
||
<view class="popuppay">
|
||
<!-- 标题 -->
|
||
<view class="popuppay-title">
|
||
<text class="popuppay-title-l">
|
||
购买后继续观看
|
||
</text>
|
||
<image @click="closePopusPay()" class="popuppay-title-r"
|
||
src="../../static/images/me/closeIconss.png" mode=""></image>
|
||
</view>
|
||
<!-- 余额 -->
|
||
<!-- <view class="popuppay-money">
|
||
<view class="popuppay-money-l">
|
||
<text class="popuppay-money-l-ye">
|
||
账号余额:
|
||
</text>
|
||
<text class="popuppay-money-l-jd">
|
||
{{moneyNum}}金币
|
||
</text>
|
||
<text class="popuppay-money-l-mx" @click="goWallet('/me/wallet/wallet')">
|
||
查看明细
|
||
</text>
|
||
</view>
|
||
<view class="popuppay-money-r">
|
||
<text class="popuppay-money-ye">
|
||
解锁价格:
|
||
</text>
|
||
<text class="popuppay-money-jd">
|
||
{{payPrice}}金币
|
||
</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- 充值类型列表 -->
|
||
<!-- <scroll-view scroll-y="true" class="payLists">
|
||
<view class="popuppay-payList">
|
||
<view class="payList-item" @click="wallCurr = index" :class="wallCurr == index?'activePrice':''"
|
||
v-for="(item,index) in wallet" :key="index">
|
||
<view class="payList-item-price">
|
||
<text class="payList-item-prices">
|
||
￥{{item.price}}
|
||
</text>
|
||
|
||
</view>
|
||
<view class="payList-item-dou">
|
||
<text class="payList-item-dous">
|
||
{{item.money}}金币
|
||
</text>
|
||
</view>
|
||
<view class="payList-item-duo" v-if="item.giveMoney>0">
|
||
<text class="payList-item-duos">
|
||
多送{{item.giveMoney}}金币
|
||
</text>
|
||
</view>
|
||
<view class="payList-item-hui" v-if="item.remarks">
|
||
<text class="payList-item-huis">
|
||
{{item.remarks}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view> -->
|
||
<!-- 支付类型 -->
|
||
<view class="payType">
|
||
<view class="payType-item" @tap='selectWay(item)' v-for="(item,index) in openLists" :key="index">
|
||
<view class="payType-item-l">
|
||
<image class="payType-item-l-icon" :src="item.image" mode=""></image>
|
||
<text class="payType-item-l-txt">
|
||
{{item.text}}
|
||
</text>
|
||
|
||
</view>
|
||
<view class="payType-item-r">
|
||
<radio-group name="openWay" style="margin-left: 20upx;">
|
||
<label class="tui-radio">
|
||
<radio color="#ff7581" :checked="openWay === item.id ? true : false" />
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 温馨提示 -->
|
||
<view v-if="moneyTips" class="tips">
|
||
<view class="tips-title">
|
||
<text class="tips-titles">温馨提示</text>
|
||
</view>
|
||
<view class="tips-contont">
|
||
<text class="tips-contonts">
|
||
{{moneyTips}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 协议 -->
|
||
<view class="illustrate">
|
||
<checkbox-group @change="checked = !checked">
|
||
<label>
|
||
<checkbox color="#ff7581" style="transform:scale(0.7)" value="cb" :checked="checked" />
|
||
</label>
|
||
</checkbox-group>
|
||
<text class="illustrate-txt" @click="checked = !checked">
|
||
我已经阅读并同意
|
||
</text>
|
||
<text class="illustrate-txts" @click="goWallet('/me/setting/payXieYi')">
|
||
《付费须知说明》
|
||
</text>
|
||
</view>
|
||
<!-- 支付按钮 -->
|
||
<view class="popuppay-btn" @click="pay()">
|
||
<text class="popuppay-btn-txt">
|
||
立即支付
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '../../common/config.js'
|
||
import httpsRequest from '../../common/httpRequest.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showBack: true,
|
||
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: [],
|
||
videoContext: null, //记录当前视频的上下文
|
||
isVIP: false, //是否是vip
|
||
courseId: '',
|
||
meunList: [], //菜单
|
||
meunTop: 37, //返回图标距离顶部的距离
|
||
num: 1, //当前播放的集数
|
||
showPay: false, //购买视频的弹窗
|
||
info: {}, //整部的信息
|
||
courseDetailsId: '', //详情id
|
||
scrollIntoView: '', //当前播放视频的位置
|
||
scrollIntoViews: 'video0', //当前播放视频的位置
|
||
isVips: '否', //是否显示会员
|
||
zhengbu: '否',
|
||
danbu: '否',
|
||
rightTop: {
|
||
top: '0rpx'
|
||
},
|
||
showControls: true, //是否显示控制中心
|
||
zongPrice: 0, //整部价格
|
||
countPrice: 0, //单集价格
|
||
wallCurr: 0,
|
||
wallet: [],
|
||
productId: '', //默认苹果内购商品ID
|
||
productIds: ['sixzuan', 'shierzuan'], //苹果内购商品
|
||
openLists: [],
|
||
openWay: 1,
|
||
moneyTips: '',
|
||
checked: false, //是否同意协议
|
||
moneyNum: 0, //余额
|
||
payPrice: 0, //解锁价格
|
||
iosPayId: '',
|
||
isCollect: false,
|
||
playFlag: false,
|
||
getRedEnvelopeTips: '',
|
||
scale: 1,
|
||
paddingBottom: '0',
|
||
};
|
||
},
|
||
computed: {
|
||
swiperList() {
|
||
return this.videoList;
|
||
}
|
||
},
|
||
// onHide() {
|
||
// if (this.videoContext) {
|
||
// this.videoContext.stop()
|
||
// this.videoContext = null
|
||
// }
|
||
// },
|
||
onUnload() {
|
||
if (this.videoContext) {
|
||
this.videoContext.stop()
|
||
this.videoContext = null
|
||
}
|
||
},
|
||
onShow() {
|
||
console.log("走了iOS播放器。。。。。。。。。。。。。。。");
|
||
//当应用从后台进入前台时自动播放
|
||
if (this.videoContext) {
|
||
this.videoContext.play()
|
||
}
|
||
this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
|
||
let that = this
|
||
uni.$on('back', (data) => {
|
||
if (data.flag == true) {
|
||
that.showPay = false
|
||
that.getDataList(that.courseId, that.courseDetailsId, true);
|
||
that.getMyLoveStatus()
|
||
that.getMoneyList()
|
||
that.getMyMoney()
|
||
}
|
||
})
|
||
this.moneyTips = uni.getStorageSync('moneyTips')
|
||
// #ifdef APP-PLUS
|
||
if (plus.os.name.toLowerCase() === 'android') {
|
||
this.openLists = [
|
||
// {
|
||
// image: '/static/images/pay/weixin.png',
|
||
// text: '微信',
|
||
// id: 2
|
||
// },
|
||
{
|
||
image: '/static/images/pay/zhifubao.png',
|
||
text: '支付宝',
|
||
id: 1
|
||
},
|
||
];
|
||
this.openWay = 1;
|
||
let syPaySel = uni.getStorageSync('syPaySel')
|
||
// if (syPaySel === '是') {
|
||
// let openListsItem = {
|
||
// image: '/static/images/pay/shouyi.png',
|
||
// text: '收益余额',
|
||
// id: 4
|
||
// };
|
||
// this.openLists.push(openListsItem)
|
||
// }
|
||
} else {
|
||
let checkIosPay = uni.getStorageSync('checkIosPay');
|
||
// if (checkIosPay === '是') {
|
||
// this.openLists = [{
|
||
// image: '/static/images/pay/weixin.png',
|
||
// text: '苹果',
|
||
// id: 3
|
||
// }];
|
||
// this.openWay = 3;
|
||
// } else {
|
||
this.openLists = [
|
||
// {
|
||
// image: '/static/images/pay/weixin.png',
|
||
// text: '微信',
|
||
// id: 2
|
||
// },
|
||
{
|
||
image: '/static/images/pay/zhifubao.png',
|
||
text: '支付宝',
|
||
id: 1
|
||
},
|
||
];
|
||
this.openWay = 1;
|
||
let syPaySel = uni.getStorageSync('syPaySel')
|
||
// if (syPaySel === '是') {
|
||
// let openListsItem = {
|
||
// image: '/static/images/pay/shouyi.png',
|
||
// text: '收益余额',
|
||
// id: 4
|
||
// };
|
||
// this.openLists.push(openListsItem)
|
||
// }
|
||
// }
|
||
}
|
||
|
||
// #endif
|
||
this.$nextTick(() => {
|
||
this.closePopusPay()
|
||
})
|
||
if (this.courseId) {
|
||
this.getDataList(this.courseId, this.courseDetailsId);
|
||
|
||
}
|
||
httpsRequest.getT('app/course/getRedEnvelopeTips').then(res => {
|
||
if (res.code == 0) {
|
||
this.getRedEnvelopeTips = res.data
|
||
}
|
||
})
|
||
this.getScale()
|
||
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
console.log(sysInfo);
|
||
const padB = sysInfo.safeAreaInsets.bottom;
|
||
console.log('win height == ' + padB);
|
||
if (padB && padB > 0) {
|
||
this.paddingBottom = padB + 'px'
|
||
} else {
|
||
this.paddingBottom = '0'
|
||
}
|
||
|
||
console.log('this bottom padding = ' + this.paddingBottom);
|
||
|
||
},
|
||
onLoad(e) {
|
||
let that = this
|
||
//是开启整部购买
|
||
this.zhengbu = uni.getStorageSync('zhengbu') ? uni.getStorageSync('zhengbu') : '否'
|
||
//是否开启单集购买
|
||
this.danbu = uni.getStorageSync('danbu') ? uni.getStorageSync('danbu') : '否'
|
||
//获取设备的高度
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
//计算右侧操作拦的位置
|
||
that.rightTop.top = res.screenHeight - (440 / 2) + 'rpx'
|
||
},
|
||
fail() {
|
||
//如果获取屏幕的高度失败，那么位置默认设置为通用高度630rpx
|
||
that.rightTop.top = '630rpx'
|
||
}
|
||
})
|
||
// 记录跳转过来的视频总id跟单集id
|
||
if (e.id) {
|
||
this.courseId = e.id;
|
||
if (e.courseDetailsId) {
|
||
this.courseDetailsId = e.courseDetailsId;
|
||
}
|
||
this.getMyLoveStatus()
|
||
this.getMoneyList()
|
||
this.getMyMoney()
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取金币比例
|
||
*/
|
||
getScale() {
|
||
httpsRequest.getT("app/common/type/914", {}).then(res => {
|
||
if (res.code == 0) {
|
||
this.scale = Number(res.data.value)
|
||
}
|
||
});
|
||
},
|
||
//播放时的回掉
|
||
videoPlay(videoId, courseDetailsId) {
|
||
this.courseDetailsId = courseDetailsId
|
||
if (!this.playFlag) {
|
||
this.playFlag = true
|
||
httpsRequest.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: courseDetailsId,
|
||
type: 'start'
|
||
}).then(res => {
|
||
console.log('播放开始')
|
||
})
|
||
}
|
||
|
||
},
|
||
//播放进度变化回掉
|
||
timeupdate(e) {
|
||
|
||
if (e.detail.currentTime > e.detail.duration * 0.9) {
|
||
if (this.playFlag) {
|
||
this.playFlag = false
|
||
httpsRequest.getT('app/course/viewCourse', {
|
||
courseId: this.courseId,
|
||
courseDetailsId: this.courseDetailsId,
|
||
type: 'end'
|
||
}).then(res => {
|
||
console.log('播放结束')
|
||
})
|
||
}
|
||
}
|
||
|
||
},
|
||
//选集弹窗的回调
|
||
changeXj(e) {
|
||
if (e.show == false) {
|
||
//关闭弹窗的时候重置scrollIntoViews，防止关闭后第二次点就不能自动滑动到当前集的位置
|
||
this.scrollIntoViews = 'video0'
|
||
}
|
||
},
|
||
//充值成功后关闭弹窗，并购买播放
|
||
paySuccess() {
|
||
//获取一下最新余额
|
||
this.getMyMoney()
|
||
//购买视频
|
||
this.payOrder(this.ordersId, this.payMoney)
|
||
|
||
},
|
||
setPayment(name, order) {
|
||
console.log('*-*-*')
|
||
let that = this
|
||
uni.requestPayment({
|
||
provider: name,
|
||
orderInfo: order, //微信、支付宝订单数据
|
||
success: function(res) {
|
||
console.log(res)
|
||
uni.hideLoading();
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
//支付成功
|
||
that.paySuccess()
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
complete() {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
},
|
||
isCheckPay(status, name, order) {
|
||
if (status == 0) {
|
||
this.setPayment(name, order);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付信息有误',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
iphonepay() {
|
||
let that = this
|
||
plus.payment.getChannels((res) => {
|
||
let channel = res.find(i => i.id === 'appleiap')
|
||
that.iapChannel = channel ? channel : null
|
||
that.requestOrder()
|
||
})
|
||
},
|
||
requestOrder() {
|
||
let that = this
|
||
console.log(that.productIds)
|
||
// ['xxxxx'] 是平台申请拿到的内购商品的id
|
||
that.iapChannel.requestOrder(that.productIds, function(event) {
|
||
uni.hideLoading()
|
||
console.log(event)
|
||
}, function(erroemsg) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: "获取支付通道失败：" + errormsg.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
async topay() {
|
||
let that = this
|
||
uni.showLoading({
|
||
title: '充值中，请勿离开！',
|
||
mask: true
|
||
})
|
||
let productId = that.wallet[that.wallCurr].productId ? that.wallet[that.wallCurr].productId : '';
|
||
plus.payment.request(that.iapChannel, {
|
||
productid: productId,
|
||
optimize: true // 支付时设置 optimize: true
|
||
}, result => {
|
||
that.getIosSaveMessage(JSON.stringify(result));
|
||
// 支付成功回调
|
||
// console.log("plus.payment.request-success--------------------",JSON.stringify(results));
|
||
uni.showLoading({
|
||
title: '查询结果中，请勿离开！',
|
||
mask: true
|
||
})
|
||
|
||
}, e => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none'
|
||
})
|
||
});
|
||
},
|
||
|
||
async getIosSaveMessage(receipt) {
|
||
let that = this;
|
||
httpsRequest.postT('/app/ios/isoPayApp?receipt=' + receipt + '&ordersId=' + that.iosPayId).then(
|
||
res => {
|
||
uni.hideLoading();
|
||
if (res.status == 0) {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
duration: 2000,
|
||
})
|
||
//支付成功
|
||
that.paySuccess()
|
||
}
|
||
});
|
||
},
|
||
// 充值
|
||
pay() {
|
||
if (this.checked == false) {
|
||
uni.showToast({
|
||
title: '请阅读并同意《付费须知说明》',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let that = this
|
||
uni.showLoading({
|
||
title: '支付中...'
|
||
})
|
||
if (this.openWay == 2) {
|
||
// 微信APP支付 根据订单id获取支付信息
|
||
httpsRequest.postT("/app/wxPay/payMoney", {
|
||
classify: 1,
|
||
payClassifyId: this.wallet[this.wallCurr].payClassifyId,
|
||
}).then(ret => {
|
||
this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
|
||
});
|
||
} else if (this.openWay == 1) {
|
||
let paytype = 'h5'
|
||
// #ifdef APP
|
||
paytype = 'app'
|
||
// #endif
|
||
// APP支付宝支付
|
||
httpsRequest.getT("/app/wuyou/payOrder/" + this.ordersId + '?payType=' + paytype, {}).then(ret => {
|
||
plus.runtime.openURL(ret.data.h5Url)
|
||
// this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
|
||
});
|
||
} else if (this.openWay == 3) {
|
||
let userId = uni.getStorageSync('userId');
|
||
let data = {
|
||
payClassifyId: this.wallet[this.wallCurr].payClassifyId,
|
||
userId: userId
|
||
}
|
||
httpsRequest.postT("/app/ios/insertPayMoneyOrders", data).then(res => {
|
||
if (res.code === 0) {
|
||
this.iosPayId = res.data.orderId;
|
||
this.topay();
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败!'
|
||
});
|
||
}
|
||
});
|
||
} else if (this.openWay == 4) {
|
||
let userId = uni.getStorageSync('userId');
|
||
let data = {
|
||
// money: this.wallet[this.current].price
|
||
payClassifyId: this.wallet[this.wallCurr].payClassifyId,
|
||
userId: userId
|
||
}
|
||
httpsRequest.postT("/app/invite/inviteMoneyConvertUserMoney", data).then(res => {
|
||
if (res.code === 0) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付成功'
|
||
})
|
||
//支付成功
|
||
that.paySuccess()
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
//获取余额
|
||
getMyMoney() {
|
||
if (uni.getStorageSync('token')) {
|
||
httpsRequest.getT('/app/moneyDetails/selectUserMoney').then(res => {
|
||
if (res.code == 0) {
|
||
this.moneyNum = res.data.money
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
goWallet(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
},
|
||
//选择支付类型
|
||
selectWay(item) {
|
||
this.openWay = item.id;
|
||
},
|
||
findMinMaxPricesWithIndexes(array) {
|
||
// 初始化最小和最大价格为无穷大和小于无穷大的值
|
||
// 同时初始化对应的索引为-1，表示还未找到
|
||
let minPrice = Infinity;
|
||
let maxPrice = -Infinity;
|
||
let minPriceIndex = -1;
|
||
let maxPriceIndex = -1;
|
||
|
||
// 遍历数组中的每个元素
|
||
for (let i = 0; i < array.length; i++) {
|
||
const currentPrice = array[i].price;
|
||
|
||
// 检查当前价格是否比已知的最小价格更小
|
||
if (currentPrice < minPrice) {
|
||
minPrice = currentPrice;
|
||
minPriceIndex = i;
|
||
}
|
||
|
||
// 检查当前价格是否比已知的最大价格更大
|
||
if (currentPrice > maxPrice) {
|
||
maxPrice = currentPrice;
|
||
maxPriceIndex = i;
|
||
}
|
||
}
|
||
|
||
// 返回一个包含最小和最大价格及其索引的对象
|
||
return {
|
||
minPrice: minPrice,
|
||
minPriceIndex: minPriceIndex,
|
||
maxPrice: maxPrice,
|
||
maxPriceIndex: maxPriceIndex
|
||
};
|
||
},
|
||
/**
|
||
* 获取充值列表
|
||
*/
|
||
getMoneyList() {
|
||
httpsRequest.getT('/app/payClassify/selectPayClassifyList').then(res => {
|
||
if (res.code == 0) {
|
||
let priceObj = this.findMinMaxPricesWithIndexes(res.data)
|
||
this.wallet = res.data
|
||
this.wallet[priceObj.minPriceIndex].remarks = '特惠'
|
||
this.wallet[priceObj.maxPriceIndex].remarks = '80%用户选择'
|
||
this.productIds = [];
|
||
let arr = []
|
||
res.data.forEach(d => {
|
||
if (d.productId) {
|
||
this.productIds.push(d.productId);
|
||
arr.push(d)
|
||
}
|
||
})
|
||
if (uni.getSystemInfoSync().osName == 'ios') {
|
||
this.wallet = arr
|
||
}
|
||
// #ifdef APP
|
||
this.iphonepay()
|
||
// #endif
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//关闭支付弹窗
|
||
closePopusPay() {
|
||
this.$refs.popuppay.close()
|
||
},
|
||
//打开支付弹窗
|
||
openPopusPay() {
|
||
this.$refs.popuppay.open('bottom')
|
||
},
|
||
// 获取收藏状态
|
||
getMyLoveStatus() {
|
||
let data = {
|
||
id: this.courseId,
|
||
token: uni.getStorageSync('token')
|
||
}
|
||
httpsRequest.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
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//显示/隐藏适配控制器的回调
|
||
controlstoggles(e) {
|
||
this.showControls = e.detail.show
|
||
this.showBack = this.showControls
|
||
console.log(e.detail.show, '显示/隐藏控制栏')
|
||
},
|
||
//打开倍速弹框
|
||
openBs() {
|
||
this.$refs.popupBs.open('bottom')
|
||
},
|
||
//切换倍速
|
||
BsChange(index) {
|
||
this.nowBs = index
|
||
this.videoContext.playbackRate(this.subList[index].num)
|
||
this.$refs.popupBs.close()
|
||
uni.showToast({
|
||
title: '已切换' + this.subList[index].num + '倍播放',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
},
|
||
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
|
||
}
|
||
}
|
||
},
|
||
//分享-复制app下载连接
|
||
share() {
|
||
let invitationCode = ''
|
||
let qdCode = ''
|
||
if (uni.getStorageSync('invitationCode')) {
|
||
invitationCode = uni.getStorageSync('invitationCode')
|
||
}
|
||
if (uni.getStorageSync('qdCode')) {
|
||
qdCode = uni.getStorageSync('qdCode')
|
||
}
|
||
let url = config.APIHOST2 + '/pages/login/registerApp?invitation=' + invitationCode + '&qdCode=' + qdCode
|
||
uni.setClipboardData({
|
||
data: url,
|
||
success(res) {
|
||
uni.showToast({
|
||
title: '已复制链接'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//去开通会员
|
||
goNav(url) {
|
||
if (uni.getStorageSync('token')) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
|
||
},
|
||
/**
|
||
* @param {Object} type 类型
|
||
* 1:购买整部视频
|
||
* 2:购买单集视频
|
||
*/
|
||
payVideo(type) {
|
||
if (uni.getStorageSync('token')) {
|
||
this.submitPay(type)
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
//使用金币购买
|
||
submitPay(type) {
|
||
let data = {
|
||
courseId: this.courseId
|
||
}
|
||
|
||
data.courseDetailsId = this.videoList[this.current].courseDetailsId
|
||
httpsRequest.getT('/app/order/insertCourseOrders', data).then(res => {
|
||
if (res.code == 0) {
|
||
this.ordersId = res.data.orders.ordersId //记录订单id
|
||
this.payMoney = res.data.orders.payMoney //记录订单价格
|
||
|
||
if (type == 1) { //金币
|
||
this.payOrder(res.data.orders.ordersId, res.data.orders.payMoney)
|
||
} else if (type == 2) { //支付宝
|
||
this.closePay() //关闭购买选择弹窗
|
||
this.payPrice = res.data.orders.payMoney //需要支付的价格
|
||
this.openPopusPay() //显示充值弹窗
|
||
}
|
||
|
||
|
||
// this.payOrder(res.data.orders.ordersId, res.data.orders.payMoney)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
payOrder(orderId, payMoney) {
|
||
let that = this
|
||
httpsRequest.postT("/app/order/payOrders", {
|
||
orderId: orderId,
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '已成功解锁',
|
||
icon: 'none'
|
||
})
|
||
this.closePopusPay()
|
||
this.closePay()
|
||
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
|
||
}
|
||
});
|
||
},
|
||
//打开购买弹窗
|
||
openPay() {
|
||
//获取总价跟单集价格
|
||
this.zongPrice = this.info.price
|
||
this.countPrice = this.videoList[this.current].price
|
||
this.$refs.popupPya.open('bottom')
|
||
},
|
||
//关闭购买弹窗
|
||
closePay() {
|
||
this.$refs.popupPya.close()
|
||
},
|
||
//选择集数后在更新剩下的数据
|
||
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, index, type) {
|
||
// 根据选择的courseDetailsId拿到meunList列表中的相同数据的下标
|
||
// const index = this.meunList.findIndex(menu => menu.courseDetailsId === item.courseDetailsId);
|
||
// this.videoList = [this.meunList[index]]
|
||
this.current = index
|
||
if ( this.videoList[this.current].videoUrl == '' && this.videoList[this.current].price <= 0 && !type ) {
|
||
this.getDataList(this.courseId, this.courseDetailsId, true, 'select')
|
||
return;
|
||
}
|
||
//重新计算一下当前观看的是哪个视频
|
||
this.comNumVideo()
|
||
// 把选择的视频的自动播放设置为true
|
||
this.videoList[this.current].autoPlay = true
|
||
//让当前选择的视频播放
|
||
this.startPlay(this.current)
|
||
//更新视图
|
||
this.$forceUpdate()
|
||
//关闭选择弹窗
|
||
this.closeList()
|
||
//记录当前播放位置
|
||
this.scrollIntoView = 'video' + index
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
|
||
.courseDetailsId)
|
||
//等视图跟新完了，把之前剩下的数据补进去在$nextTick中处理
|
||
// this.$nextTick(() => {
|
||
// this.setVideoList(index)
|
||
// })
|
||
},
|
||
//选集
|
||
openShow() {
|
||
this.comNumVideo()
|
||
this.openList()
|
||
this.$nextTick(() => {
|
||
this.scrollIntoViews = this.scrollIntoView
|
||
})
|
||
|
||
},
|
||
//打开选集弹窗
|
||
openList() {
|
||
this.$refs.popup.open('bottom')
|
||
},
|
||
//关闭选集弹窗
|
||
closeList() {
|
||
this.$refs.popup.close()
|
||
},
|
||
//收藏
|
||
shoucang() {
|
||
if (uni.getStorageSync('token')) {
|
||
let data = {
|
||
courseId: this.courseId,
|
||
classify: 1,
|
||
type: this.isCollect == false ? 1 : 0
|
||
}
|
||
httpsRequest.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
|
||
};
|
||
httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
|
||
if (res.code == 0) {
|
||
if (data.type == 1) {
|
||
item.isGood = 1;
|
||
item.goodNum += 1;
|
||
} else {
|
||
item.isGood = 0;
|
||
item.goodNum -= 1;
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
|
||
},
|
||
//swiper上下切换事件
|
||
change(e) {
|
||
//拿出当前的swiper索引
|
||
let current = Number(e.detail.current);
|
||
//获取当前播放的视频在菜单数组中的位置
|
||
let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
|
||
.courseDetailsId);
|
||
//记录当前播放位置
|
||
this.scrollIntoView = 'video' + scrollIndex;
|
||
//控制播放
|
||
this.startPlay(current);
|
||
//设置轮播图索引
|
||
this.current = current;
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
|
||
// //拿出当前的swiper索引
|
||
// let current = Number(e.detail.current);
|
||
// // 根据courseDetailsId在meunList中找到这个数据的下标
|
||
// let indexs = -1;
|
||
// //考虑向上滑动的时候
|
||
// 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;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
// //获取当前播放的视频在菜单数组中的位置
|
||
// let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
|
||
// .courseDetailsId);
|
||
// //记录当前播放位置
|
||
// this.scrollIntoView = 'video' + scrollIndex;
|
||
// //控制播放
|
||
// this.startPlay(current);
|
||
// //设置轮播图索引
|
||
// this.current = current;
|
||
// //插入历史记录
|
||
// this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
|
||
},
|
||
//控制播放
|
||
startPlay(current) {
|
||
if (this.videoContext) { //判断之前是否有视频的上下文
|
||
this.videoContext.stop();
|
||
this.videoContext = null;
|
||
}
|
||
let numIdCurr = this.videoList[current].courseDetailsId;
|
||
if (this.videoList[current].videoUrl) { //已经购买可直接播放
|
||
// 播放时记录当前播放的id
|
||
this.videoContextId = 'myVideo' + numIdCurr;
|
||
this.videoContext = uni.createVideoContext(this.videoContextId, this);
|
||
this.$nextTick(() => {
|
||
//播放当前的
|
||
this.videoContext.play();
|
||
|
||
})
|
||
} else { //没有视频链接则表示没有权限，需要购买 弹出购买弹窗
|
||
this.openPay()
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
//返回
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
/**
|
||
* @param {Number} courseId 总id
|
||
* @param {Number} courseDetailsId 当前视频id
|
||
* @param {boolean} type 是购买后返回的还是直接进来的
|
||
*/
|
||
getDataList(courseId, courseDetailsId, type, t) {
|
||
let data = {
|
||
id: courseId,
|
||
token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
|
||
};
|
||
httpsRequest.getT('/app/course/selectCourseDetailsById', data).then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data.listsDetail) {
|
||
this.info = res.data;
|
||
this.title = this.info.title;
|
||
let arr = JSON.parse(JSON.stringify(res.data.listsDetail));
|
||
arr.map((item, index) => {
|
||
item.num = index + 1;
|
||
if (item.videoUrl) {
|
||
item.autoPlay = true;
|
||
} else {
|
||
item.autoPlay = false;
|
||
}
|
||
item.viewInfo = 'video' + index;
|
||
});
|
||
//菜单数组
|
||
this.meunList = arr;
|
||
this.videoList = 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;
|
||
return true;
|
||
}
|
||
})
|
||
this.videoList.map(item => {
|
||
this.meunList.map(ite => {
|
||
if (item.courseDetailsId == ite.courseDetailsId && item
|
||
.courseDetailsId != courseDetailsId) {
|
||
item.videoUrl = ite.videoUrl
|
||
}
|
||
})
|
||
})
|
||
} else { //直接跳转进来的
|
||
let indexs = -1;
|
||
if (courseDetailsId) { //从记录进来的
|
||
this.meunList.map((item, index) => {
|
||
if (item.courseDetailsId == courseDetailsId) {
|
||
indexs = index;
|
||
}
|
||
})
|
||
if (indexs != -1) { //找到了
|
||
this.current = indexs
|
||
// if (Number(indexs + 1) === this.meunList.length) { //最后一条
|
||
// 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 - 1],
|
||
// this.meunList[0],
|
||
// this.meunList[1],
|
||
// ]
|
||
// }
|
||
// } else if (Number(indexs) === Number(this.meunList.length - 1)) { //倒数第二条
|
||
// 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 {
|
||
// //如果不是最后一条，也不是倒数第二条，则从找到的位置开始往后拿三条数据放入数组
|
||
// this.videoList = this.meunList.slice(indexs, indexs + 3);
|
||
// }
|
||
} else {
|
||
//没找到直接拿前三条数据即可
|
||
// this.videoList = this.meunList.slice(0, 3);
|
||
}
|
||
} else { //新的视频
|
||
// //视频数组//直接拿前三条
|
||
// this.videoList = this.meunList.slice(0, 3);
|
||
indexs = 0
|
||
}
|
||
//重新计算当前在播放哪个视频
|
||
this.comNumVideo();
|
||
if (indexs != -1 && this.meunList.length > 0) {
|
||
this.$nextTick(() => {
|
||
this.scrollIntoView = 'video' + indexs;
|
||
})
|
||
|
||
}
|
||
}
|
||
//判断第一个是否可以播放
|
||
if (this.videoList[this.current].autoPlay) {
|
||
let numIdCurr = this.videoList[this.current].courseDetailsId;
|
||
this.videoContextId = 'myVideo' + numIdCurr;
|
||
|
||
this.$nextTick(() => {
|
||
this.videoContext = uni.createVideoContext(this.videoContextId, this);
|
||
this.videoContext.play();
|
||
})
|
||
|
||
} else { //不能播放则需要购买
|
||
this.openPay()
|
||
}
|
||
if ( t == 'select') {
|
||
this.selectPlay(this.videoList[this.current],this.current,true)
|
||
}
|
||
this.$forceUpdate();
|
||
//插入历史记录
|
||
this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
|
||
.courseDetailsId);
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
}
|
||
})
|
||
},
|
||
//计算正在观看哪个视频
|
||
comNumVideo() {
|
||
let courseDetailsId = this.videoList[this.current].courseDetailsId;
|
||
this.meunList.map((item, index) => {
|
||
if (item.courseDetailsId == courseDetailsId) { //找到了
|
||
this.num = item.num;
|
||
}
|
||
})
|
||
},
|
||
//插入观看记录
|
||
setHistor(courseId, courseDetailsId) {
|
||
if (uni.getStorageSync('token')) {
|
||
let data = {
|
||
courseId: courseId,
|
||
courseDetailsId: courseDetailsId,
|
||
classify: 3,
|
||
type: 1
|
||
};
|
||
httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
|
||
}
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.popuppay {
|
||
width: 750rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.popuppay-title {
|
||
width: 690rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.popuppay-title-l {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.popuppay-title-r {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.popuppay-money {
|
||
width: 690rpx;
|
||
margin-top: 30rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.popuppay-money-l {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.popuppay-money-r {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.popuppay-money-l-ye {
|
||
color: #353535;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.popuppay-money-l-jd {
|
||
color: #353535;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.popuppay-money-l-mx {
|
||
font-size: 26rpx;
|
||
color: #FF1930;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.popuppay-money {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.popuppay-money-ye {
|
||
color: #353535;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.popuppay-money-jd {
|
||
color: #ff7581;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.payLists {
|
||
width: 690rpx;
|
||
height: 400rpx;
|
||
padding-top: 30rpx;
|
||
}
|
||
|
||
.popuppay-payList {
|
||
width: 690rpx;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.payList-item {
|
||
width: 330rpx;
|
||
height: 194rpx;
|
||
background: #F5F7FF;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
justify-content: center;
|
||
}
|
||
|
||
.payList-item-price {
|
||
width: 330rpx;
|
||
}
|
||
|
||
.payList-item-prices {
|
||
text-align: center;
|
||
color: #191919;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.payList-item-dou {
|
||
width: 330rpx;
|
||
}
|
||
|
||
.payList-item-dous {
|
||
text-align: center;
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.payList-item-duo {
|
||
width: 330rpx;
|
||
}
|
||
|
||
.payList-item-duos {
|
||
text-align: center;
|
||
color: #FF1930;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.payList-item-hui {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
left: 0;
|
||
background-color: #F6495A;
|
||
border-radius: 16rpx 16rpx 16rpx 0rpx;
|
||
padding: 4rpx 10rpx;
|
||
}
|
||
|
||
.payList-item-huis {
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.activePrice {
|
||
background: #F7D98D !important;
|
||
|
||
}
|
||
|
||
.activePrice .payList-item-price .payList-item-dou {
|
||
color: #744A0A !important;
|
||
}
|
||
|
||
.payType {
|
||
width: 690rpx;
|
||
|
||
}
|
||
|
||
.payType-item {
|
||
width: 690rpx;
|
||
margin-top: 30rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.payType-item-l {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.payType-item-l-icon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.payType-item-l-txt {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tips {
|
||
width: 690rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.tips-title {
|
||
width: 690rpx;
|
||
}
|
||
|
||
.tips-titles {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tips-contont {
|
||
width: 686rpx;
|
||
}
|
||
|
||
.tips-contonts {
|
||
font-size: 26rpx;
|
||
color: gray;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.illustrate {
|
||
width: 690rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.illustrate-txt {
|
||
color: #303133;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.illustrate-txts {
|
||
color: #ff7581;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.popuppay-btn {
|
||
width: 690rpx;
|
||
height: 98rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #ff7581;
|
||
margin-top: 20rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.popuppay-btn-txt {
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bs {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
|
||
}
|
||
|
||
.bs-title {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bs-se {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
background-color: #eeeeef;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.bs-se-it {
|
||
font-size: 24rpx;
|
||
width: 100rpx;
|
||
padding: 16rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.bsActive {
|
||
background-color: #ffffff;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.detail {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
background-color: #000;
|
||
}
|
||
|
||
.swipers {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.swipers-item {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.swipers-items {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
position: relative;
|
||
background-color: #000;
|
||
}
|
||
|
||
.swipers-items-video {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.swipers-items-imgsbg {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.swipers-items-back {
|
||
position: absolute;
|
||
left: 40rpx;
|
||
top: 120rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
z-index: 999;
|
||
}
|
||
|
||
.swipers-items-right {
|
||
position: absolute;
|
||
width: 60rpx;
|
||
top: 100rpx;
|
||
right: 20rpx;
|
||
}
|
||
|
||
.swipers-items-right-item {
|
||
width: 60rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.swipers-items-right-item-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.swipers-items-right-item-imgs {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.swipers-items-right-item-txt {
|
||
width: 60rpx;
|
||
}
|
||
|
||
.swipers-items-right-item-txts {
|
||
width: 60rpx;
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.swipers-items-btom {
|
||
width: 750rpx;
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.swipers-items-btom-box {
|
||
width: 710rpx;
|
||
}
|
||
|
||
.swipers-items-btom-box-title {
|
||
width: 710rpx;
|
||
}
|
||
|
||
.swipers-items-btom-box-titles {
|
||
width: 710rpx;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.swipers-items-btom-box-content {
|
||
width: 710rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.swipers-items-btom-box-contents {
|
||
width: 710rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.swipers-items-btom-box-num {
|
||
width: 710rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.swipers-items-btom-box-nums {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
/* 选集弹窗 */
|
||
.list {
|
||
width: 750rpx;
|
||
align-items: center;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
background-color: #ffffff;
|
||
/* background-color: #202020; */
|
||
}
|
||
|
||
.list-title {
|
||
width: 710rpx;
|
||
margin-top: 30rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.list-title-l {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-title-lIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.list-title-ls {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.list-title-lsn {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.list-title-r {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.list-title-rs {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.list-content {
|
||
width: 710rpx;
|
||
height: 600rpx;
|
||
margin-bottom: 40rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.list-contents {
|
||
width: 710rpx;
|
||
height: 600rpx;
|
||
}
|
||
|
||
.list-contentss {
|
||
width: 710rpx;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.list-content-item {
|
||
width: 205rpx;
|
||
height: 88rpx;
|
||
margin-bottom: 20rpx;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #F5F7FF;
|
||
border-radius: 12rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.list-content-items {
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.list-box-item-playing {
|
||
position: absolute;
|
||
width: 32rpx;
|
||
height: 24rpx;
|
||
bottom: 10rpx;
|
||
right: 15rpx;
|
||
}
|
||
|
||
.videoListCurr {
|
||
background-color: #ff7581 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.videoListCurr>.list-content-items {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.list-box-item-lock {
|
||
width: 38rpx;
|
||
height: 34rpx;
|
||
border-radius: 0rpx 12rpx 0rpx 12rpx;
|
||
background-color: #CCCCCC;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-box-item-lockI {
|
||
width: 18rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
|
||
|
||
.pay {
|
||
width: 750rpx;
|
||
align-items: center;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.list-title-lss {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pay-content {
|
||
width: 710rpx;
|
||
margin-top: 40rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.pay-content-item {
|
||
width: 710rpx;
|
||
height: 92rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #F2F2F2;
|
||
margin-bottom: 40rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pay-content-item-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.pay-content-items {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
</style> |