|
@@ -0,0 +1,538 @@
|
|
|
+<template>
|
|
|
+ <view class="ezy-course-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
|
|
|
+ <view class="icon-title-navBar-box">
|
|
|
+ <view @click="goUpPage" class="nav-bar-icon"></view>
|
|
|
+ <text class="nav-bar-title">{{shipinTitle}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="ezy-video-box course-video-box">
|
|
|
+ <view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
|
|
|
+ :change:playAuth="renderScript.receiveMsg" :videoId="videoId" :change:videoId="renderScript.videoIdFun"
|
|
|
+ :hideFlag="hideFlag" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
|
|
|
+ :change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
|
|
|
+ :change:seekTime="renderScript.seekTimeFun" class="ezy-video">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="course-content-border">
|
|
|
+ <view class="course-content-box">
|
|
|
+ <!-- <view class="course-title">{{jieName}}</view> -->
|
|
|
+ <view v-for="(item,index) in progressMarkers" :key="index" @click="markersClick(item)">
|
|
|
+ <view class="title-play-box">
|
|
|
+ <icon class="course-icon" :style="{backgroundImage: 'url(' + courseIconFun() + ')'}"></icon>
|
|
|
+ <view class="course-title">{{item.title}}</view>
|
|
|
+ <view class="course-play-btn" @click="markersClick(item)">视频讲解</view>
|
|
|
+ </view>
|
|
|
+ <rich-text :nodes="item.describe" class="course-content-item"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
|
|
|
+ mask-background-color="rgba(51, 137, 217, 0.95);">
|
|
|
+ <view :class="courseClass">
|
|
|
+ <view class="text-score">{{credit}}</view>
|
|
|
+ <view class="course-btn-box">
|
|
|
+ <view @click="goBack" class="return-btn"></view>
|
|
|
+ <view @click="goNext" class="continue-btn"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <tip-big-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :imgShow="true"></tip-big-dialog>
|
|
|
+ <svip-dialog ref="svipDialogRef" @confirm-btn="svipConfirm"></svip-dialog>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from 'vue';
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onReady
|
|
|
+ } from '@dcloudio/uni-app';
|
|
|
+ import {
|
|
|
+ getVideoAuth,
|
|
|
+ getVideoAuthYk,
|
|
|
+ videoWancheng
|
|
|
+ } from "@/api/shipin.js"
|
|
|
+ import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
|
|
|
+ import tipBigDialog from '@/components/dialog/tipBigDialog.vue';
|
|
|
+ import svipDialog from './svipDialog.vue';
|
|
|
+ import {
|
|
|
+ toast,
|
|
|
+ getUserIdentity
|
|
|
+ } from "@/utils/common";
|
|
|
+ import {
|
|
|
+ userZhangNextInfo,
|
|
|
+ } from "@/api/learnPlan.js"
|
|
|
+ import cacheManager from "@/utils/cacheManager.js";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageData: null, //上个页面获取的视频参数(视频id)
|
|
|
+ playAuth: "", //播放凭证
|
|
|
+ progressMarkers: [],
|
|
|
+ jieName: '',
|
|
|
+ hideFlag: 'show',
|
|
|
+ videoId: "", //阿里云视频id
|
|
|
+ cardId: '',
|
|
|
+ credit: '',
|
|
|
+ nianji: '',
|
|
|
+ zhangId: '',
|
|
|
+ seekTime: '',
|
|
|
+ jieId: '',
|
|
|
+ courseClass: '',
|
|
|
+ shipinTitle: '',
|
|
|
+ cacheZhangInfo: {},
|
|
|
+ cacheCurrentZhangIndex: '',
|
|
|
+ YouKeContent: '您当前的身份是游客,想要体验完整内容需注册成用户!'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ tipMiddleDialog,
|
|
|
+ tipBigDialog,
|
|
|
+ svipDialog
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (!cacheManager.get('auth')) {
|
|
|
+ const youkeData = JSON.parse(options.youkePageData)
|
|
|
+ // 游客
|
|
|
+ this.videoId = youkeData.jieList.videoId
|
|
|
+ this.nianji = youkeData.nianji
|
|
|
+ this.zhangId = youkeData.zhangId
|
|
|
+ this.cardId = youkeData.cardId
|
|
|
+ this.tipFlag = youkeData.tipFlag
|
|
|
+ this.shipinTitle = youkeData.jieName
|
|
|
+ this.progressMarkers = youkeData.jieList.jiedianList || []
|
|
|
+ this.getLiveYk(); //获取播放凭证
|
|
|
+ } else {
|
|
|
+ this.init(options)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onHide() {
|
|
|
+ console.log('onHideonHideonHideonHide');
|
|
|
+ this.hideFlag = 'hide'
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ console.log('onUnloadonUnloadonUnloadonUnloadonUnload');
|
|
|
+ this.hideFlag = 'hide'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ courseBjFun() {
|
|
|
+ switch (Number(cacheManager.get('auth').cardId)) {
|
|
|
+ case 1:
|
|
|
+ return 'static/images/course/couse-shuxue-bj.png'
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return 'static/images/course/course-yingyu-bj.png'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ courseIconFun() {
|
|
|
+ switch (Number(cacheManager.get('auth').cardId)) {
|
|
|
+ case 1:
|
|
|
+ return 'static/images/course/shuxue-icon.png'
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return 'static/images/course/yingyu-icon.png'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init(options) {
|
|
|
+ this.jieId = options.jieId
|
|
|
+ if (!(cacheManager.get('zhangInfo') && options.jieId)) {
|
|
|
+ toast('数据错误,缓存丢失/ jieId丢失')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.cacheCurrentZhangIndex = cacheManager.get('auth').currentZhang
|
|
|
+ this.cacheZhangInfo = cacheManager.get('zhangInfo')
|
|
|
+
|
|
|
+ // let zhang = this.cacheZhangInfo.zhangList.find(zhang => zhang.zhangId == this.zhangId);
|
|
|
+ // if (!zhang) {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ let zhang = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex]
|
|
|
+ let currentObject = zhang.jieList.find(item => item.jieId == options.jieId);
|
|
|
+ console.log(currentObject);
|
|
|
+ this.shipinTitle = currentObject.jieName
|
|
|
+ this.pageData = {
|
|
|
+ ...currentObject
|
|
|
+ }
|
|
|
+ console.log(this.pageData);
|
|
|
+ this.videoId = this.pageData.videoId
|
|
|
+ this.jieName = this.pageData.jieName
|
|
|
+ this.credit = this.pageData.credit
|
|
|
+ this.progressMarkers = this.pageData.jiedianList || []
|
|
|
+ this.getLive(); //获取播放凭证
|
|
|
+ },
|
|
|
+ goNextZhang() {
|
|
|
+ let that = this
|
|
|
+ cacheManager.updateObject('auth', {
|
|
|
+ currentZhang: this.cacheCurrentZhangIndex + 1
|
|
|
+ })
|
|
|
+ this.cacheZhangInfo = cacheManager.get('zhangInfo')
|
|
|
+ let zhang = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex + 1]
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/study/lookShipin?jieId=' + zhang.jieList[0].jieId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ playEnd(data) {
|
|
|
+ console.log('data', data);
|
|
|
+ console.log('111111');
|
|
|
+ plus.screen.lockOrientation('portrait-primary');
|
|
|
+ const AuthCode = getUserIdentity();
|
|
|
+ console.log(AuthCode);
|
|
|
+ if (AuthCode == 'Visitor') {
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+
|
|
|
+ let currentJieData = cacheManager.getCurrentJieData('zhangInfo', this.cacheCurrentZhangIndex, this
|
|
|
+ .jieId)
|
|
|
+ if (currentJieData.studyFlag == 1) {
|
|
|
+ // 学完一遍
|
|
|
+ this.courseClass = 'course-finish-dialog'
|
|
|
+ this.$refs.popupRef.open();
|
|
|
+ } else {
|
|
|
+ cacheManager.updateJieStatus('zhangInfo', this.cacheCurrentZhangIndex, this.jieId)
|
|
|
+ this.courseClass = 'course-score-dialog'
|
|
|
+ this.$refs.popupRef.open();
|
|
|
+ let req = {
|
|
|
+ credit: this.credit,
|
|
|
+ jieId: this.jieId,
|
|
|
+ }
|
|
|
+ videoWancheng(req).then(res => {
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ plus.screen.unlockOrientation();
|
|
|
+ this.$refs.popupRef.close();
|
|
|
+ this.goUpPage()
|
|
|
+ },
|
|
|
+ goNext() {
|
|
|
+ plus.screen.unlockOrientation();
|
|
|
+ this.$refs.popupRef.close();
|
|
|
+ if (!cacheManager.get('auth')) {
|
|
|
+ console.log(this);
|
|
|
+ this.$refs.youkeDialogRef.handleShow();
|
|
|
+ } else {
|
|
|
+ const AuthCode = getUserIdentity();
|
|
|
+ console.log(AuthCode);
|
|
|
+ // if (AuthCode == 'Not-Vip') {
|
|
|
+ // this.$refs.svipDialogRef.handleShow();
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // debugger
|
|
|
+ Number(this.jieId++)
|
|
|
+ console.log('this.pageData', this.pageData);
|
|
|
+ let currentObject = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex].jieList.find(item =>
|
|
|
+ item.jieId == this.jieId);
|
|
|
+ if (currentObject) {
|
|
|
+ this.pageData = {
|
|
|
+ ...currentObject
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // lastFlag是否是本章最后一节,0否1是 type,1视频,2试题
|
|
|
+ if (this.pageData.lastFlag == 1 && this.pageData.type == 2) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/unitTest/index?jieId=` + this.pageData.jieId
|
|
|
+ })
|
|
|
+ } else if (this.pageData.lastFlag == 1 && this.pageData.type == 1) {
|
|
|
+ // 当前是本章最后一节,并且是 视频 切换下一章
|
|
|
+ this.goNextZhang()
|
|
|
+ } else {
|
|
|
+ uni.redirectTo({
|
|
|
+ //url: '/pages/study/lookShipin?studyData=' + JSON.stringify(pageData)
|
|
|
+ url: '/pages/study/lookShipin?jieId=' + this.jieId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getLiveYk() {
|
|
|
+ let req = {
|
|
|
+ videoId: this.videoId
|
|
|
+ }
|
|
|
+ getVideoAuthYk(req).then(res => {
|
|
|
+ this.playAuth = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLive() {
|
|
|
+ let req = {
|
|
|
+ videoId: this.videoId
|
|
|
+ }
|
|
|
+ getVideoAuth(req).then(res => {
|
|
|
+ this.playAuth = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ markersClick(data) {
|
|
|
+ this.seekTime = ""
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.seekTime = data.offset
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goUpPage() {
|
|
|
+ if (!cacheManager.get('auth')) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/study/index?cardId=' + this.cardId + '&nianji=' + this.nianji + '&zhangId=' +
|
|
|
+ this.zhangId + '&tipFlag=' + this.tipFlag
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/study/index`
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ svipConfirm() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/pay/svip?cardId=' + cacheManager.get('auth').cardId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ykConfirm() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log("getLive")
|
|
|
+ // this.getLive(); //获取播放凭证
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<script module="renderScript" lang="renderjs">
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ console.log("renderScript1")
|
|
|
+ // 在适合的生命周期,通过script和link标签引入播放器sdk、css
|
|
|
+ // this.loadWebPlayerSDK()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ player: null,
|
|
|
+ playAuth: '',
|
|
|
+ videoId: '',
|
|
|
+ progressMarkers: [],
|
|
|
+ isFullScreen: false,
|
|
|
+ seekTime: ''
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ receiveMsg(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ // console.log('service层中的options发生变化')
|
|
|
+ // console.log('新值', newValue)
|
|
|
+ // console.log('旧值', oldValue)
|
|
|
+ // ownerInstance和this.$ownerInstance一样,可用来向service层通信
|
|
|
+ // instance和ownerInstance的区别是:
|
|
|
+ // instance.$el指向的是触发事件的那个节点;ownerInstance.$el指向当前vue文件中的根节点;
|
|
|
+ // instance的作用目前尚不明确,官方没有给出用法
|
|
|
+ if (newValue) {
|
|
|
+ this.playAuth = ''
|
|
|
+ this.playAuth = newValue
|
|
|
+ this.loadWebPlayerSDK()
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ videoIdFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ if (newValue) {
|
|
|
+ this.videoId = ''
|
|
|
+ this.videoId = newValue
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideFlagFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ if (this.player) {
|
|
|
+ this.player.pause()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
|
|
|
+
|
|
|
+ if (newValue) {
|
|
|
+ this.progressMarkers = newValue
|
|
|
+ }
|
|
|
+ },
|
|
|
+ seekTimeFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ if (newValue) {
|
|
|
+ this.player.play()
|
|
|
+ this.player.seek(newValue)
|
|
|
+ // switch (this.player.getStatus()) {
|
|
|
+ // case 'init':
|
|
|
+ // break;
|
|
|
+ // case 'ready':
|
|
|
+ // break;
|
|
|
+ // case 'loading':
|
|
|
+ // this.player.play()
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'play':
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'pause':
|
|
|
+ // this.player.play()
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'playing':
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'waiting':
|
|
|
+ // break;
|
|
|
+ // case 'error':
|
|
|
+ // break;
|
|
|
+ // case 'ended':
|
|
|
+ // break;
|
|
|
+ // default:
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playAli() {
|
|
|
+ let that = this
|
|
|
+ // console.log(this.videoId);
|
|
|
+ // console.log(this.playAuth);
|
|
|
+ //配置播放器
|
|
|
+ if (!this.playAuth) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var player = new Aliplayer({
|
|
|
+ id: "wgy-player-test",
|
|
|
+ "vid": this.videoId,
|
|
|
+ "playauth": this.playAuth,
|
|
|
+ extraInfo: {
|
|
|
+ poster: 'noposter'
|
|
|
+ },
|
|
|
+ fullscreenEvents: {
|
|
|
+ fullscreenChange: (isFull) => {
|
|
|
+ this.isFullScreen = isFull
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
|
|
|
+ // "vid": '',
|
|
|
+ // "playauth": '',
|
|
|
+ // "playConfig": {
|
|
|
+ // "EncryptType": 'AliyunVoDEncryption'
|
|
|
+ // },
|
|
|
+ "skinLayout": [{
|
|
|
+ "name": "bigPlayButton",
|
|
|
+ "align": "blabs",
|
|
|
+ "x": 30,
|
|
|
+ "y": 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "H5Loading",
|
|
|
+ "align": "cc"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "controlBar",
|
|
|
+ "align": "blabs",
|
|
|
+ "x": 0,
|
|
|
+ "y": 0,
|
|
|
+ "children": [{
|
|
|
+ "name": "progress",
|
|
|
+ "align": "blabs",
|
|
|
+ "x": 0,
|
|
|
+ "y": 44
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "playButton",
|
|
|
+ "align": "tl",
|
|
|
+ "x": 15,
|
|
|
+ "y": 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "fullScreenButton",
|
|
|
+ "align": "tr",
|
|
|
+ "x": 10,
|
|
|
+ "y": 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "timeDisplay",
|
|
|
+ "align": "tr",
|
|
|
+ "x": 10,
|
|
|
+ "y": 5
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "qualitySort": "asc",
|
|
|
+ "format": "mp4",
|
|
|
+ "mediaType": "video",
|
|
|
+ "encryptType": 1,
|
|
|
+ "progressMarkers": this.progressMarkers,
|
|
|
+ "autoplay": false,
|
|
|
+ "isLive": false,
|
|
|
+ "rePlay": false,
|
|
|
+ "playsinline": true,
|
|
|
+ "preload": false,
|
|
|
+ "controlBarVisibility": "hover",
|
|
|
+ "useH5Prism": true
|
|
|
+
|
|
|
+ }, function(player) {});
|
|
|
+ this.player = player;
|
|
|
+ player.on('canplay', function() {
|
|
|
+ console.log('canplay', this.player.tag);
|
|
|
+ player.tag.play();
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ player.on('ended', function(data) {
|
|
|
+ that.exitFullScreen();
|
|
|
+ that.$ownerInstance.callMethod('playEnd', {
|
|
|
+ data: 'end'
|
|
|
+ })
|
|
|
+ // uni.$emit('playEnd', {
|
|
|
+ // data: 'end'
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ exitFullScreen() {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen(); // 标准方法
|
|
|
+ } else if (document.mozCancelFullScreen) { // Firefox
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.msExitFullscreen) { // IE/Edge
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ loadWebPlayerSDK() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const s_tag = document.createElement('script'); // 引入播放器js
|
|
|
+ s_tag.type = 'text/javascript';
|
|
|
+ s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
|
|
|
+ s_tag.charset = 'utf-8';
|
|
|
+ s_tag.onload = () => {
|
|
|
+ // console.log(this.playAuth);
|
|
|
+ this.playAli()
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ document.body.appendChild(s_tag);
|
|
|
+ const l_tag = document.createElement('link'); // 引入播放器css
|
|
|
+ l_tag.rel = 'stylesheet';
|
|
|
+ l_tag.href =
|
|
|
+ 'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
|
|
|
+ document.body.appendChild(l_tag);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|