123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601 |
- <!-- +---------------------------------------------------------------------- -->
- <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
- <!-- +---------------------------------------------------------------------- -->
- <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
- <!-- +---------------------------------------------------------------------- -->
- <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
- <!-- +---------------------------------------------------------------------- -->
- <!-- | Author: CRMEB Team <admin@crmeb.com> -->
- <!-- +---------------------------------------------------------------------- -->
- {extend name="public/container"}
- {block name="title"}课程详情{/block}
- {block name="head_top"}
- <style>
- .prism-player .prism-info-display {
- box-sizing: border-box;
- }
- .prism-player .prism-big-play-btn {
- bottom: 50% !important;
- left: 50% !important;
- z-index: 54 !important;
- transform: translate(-50%, 50%);
- }
- </style>
- {/block}
- {block name="content"}
- <div v-cloak id="app">
- <div class="taskinfo">
- <!-- 视频窗口 -->
- <div :style="{ height: playerHeight + 'px' }" class="player">
- <div :hidden="taskInfo.type == 2" id="J_prismPlayer"></div>
- <img v-if="taskInfo.type == 2 || (!taskInfo.videoId && !taskInfo.link)" :src="taskInfo.image">
- </div>
- <div class="title">
- <div>{{ taskInfo.title }}</div>
- <div>已播放{{ taskInfo.play_count }}次</div>
- </div>
- <!-- 音频播放 -->
- <div v-if="taskInfo.type == 2 && !(!taskInfo.videoId && !taskInfo.link)" class="audio">
- <div class="progress">
- <div class="time">{{ currentTime | format(duration) }}</div>
- <div class="bar" @click="audioSeek">
- <div :style="{ width: audioRange + '%' }" class="range">
- <div class="dot" @touchmove="audioMove" @touchend="audioMoveEnd"></div>
- </div>
- </div>
- <div class="time">{{ duration | format }}</div>
- </div>
- <div class="control">
- <button class="iconfont iconleft" type="button" @click="audioTab(0)"></button>
- <button type="button" @click="audioPlay">
- <svg class="icon" aria-hidden="true">
- <use :xlink:href="audioPaused ? '#iconbofang1' : '#iconzanting'"></use>
- </svg>
- </button>
- <button class="iconfont iconright" type="button" @click="audioTab(1)"></button>
- </div>
- </div>
- <!-- 目录、详情 -->
- <div class="tabbar">
- <div :class="{ on: tabIndex == 0 }" @click="tabIndex = 0">目录</div>
- <div :class="{ on: tabIndex == 1 }" @click="tabIndex = 1">详情</div>
- </div>
- <div v-show="tabIndex == 0">
- <ul class="catalogue">
- <li v-for="(item, index) in taskList" :key="item.id" :class="{ on: item.id == taskId }" @click="playTask(item)">
- <div>
- <img v-if="item.type == 1" class="img" src="{__WAP_PATH}zsff/images/media1.png">
- <img v-else-if="item.type == 2" class="img" src="{__WAP_PATH}zsff/images/media2.png">
- <img v-else-if="item.type == 3" class="img" src="{__WAP_PATH}zsff/images/media3.png">
- </div>
- <div class="text">
- <div class="title">{{ index >= 9 ? index + 1 : '0' + (index + 1) }} | {{ item.title }}</div>
- <div class="try-progress">
- <div v-if="item.watch && item.watch.percentage" class="progress">已学习{{ item.watch.percentage }}%</div>
- <div v-else class="progress no">未学习</div>
- </div>
- </div>
- <div class="status">
- <i v-if="item.is_free" :class="[item.pay_status ? 'iconsuozi' : 'iconziyuan2', 'iconfont']"></i>
- <span v-else class="free">免费</span>
- </div>
- </li>
- </ul>
- </div>
- <div v-show="tabIndex == 1" class="content" v-html="taskInfo.content"></div>
- </div>
- <pay-dialog :open.sync="payDialogOpen" :money="isMember ? specialInfo.member_money : specialInfo.money" :now_money="now_money" :special_id="specialId" :pay_type_num="2"
- :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue" :template-id="templateIds" :wxpay-h5="wxpayH5" :is-member="isMember"
- :member-money="specialInfo.member_money" :member-link="memberLink" @change="changeVal"></pay-dialog>
- </div>
- {/block}
- {block name="foot"}
- <script>
- window.overallShare = false;
- require([
- 'vue',
- 'helper',
- 'store',
- 'moment',
- 'components/pay-dialog/index',
- 'layer',
- 'aliplayer'
- ], function (Vue, $h, store, moment, PayDialog) {
- var specialId = {$specialId};
- var taskId = {$task_id};
- var now_money = {$now_money};
- var isWechat = {$isWechat? 'true': 'false'};
- var is_alipay = {$is_alipay? 'true': 'false'};
- var is_yue = {$is_yue? 'true': 'false'};
- var wxpayH5 = {$is_h5_wechat_payment_switch? 'true': 'false'};
- var memberLink = "{:url('special/member_recharge')}";
- new Vue({
- el: '#app',
- filters: {
- format: function (time, sibling) {
- var duration = moment.duration(time * 1000);
- var hours = duration.hours();
- var siblingHours = sibling ? moment.duration(sibling * 1000).hours() : 0;
- return moment({
- h: hours,
- m: duration.minutes(),
- s: duration.seconds()
- }).format((hours || siblingHours ? 'HH:' : '') + 'mm:ss');
- }
- },
- components: {
- 'pay-dialog': PayDialog
- },
- data: {
- specialId: specialId,
- taskId: taskId,
- now_money: now_money,
- isWechat: isWechat,
- is_alipay: is_alipay,
- is_yue: is_yue,
- templateIds: '',
- wxpayH5: wxpayH5,
- memberLink: memberLink,
- playerHeight: 0,
- isPay: false,
- isSourcePay: false,
- isMember: 0,
- linkUrl: '',
- specialInfo: {},
- taskInfo: {
- play_count: 0
- },
- taskList: [],
- tabIndex: 0,
- duration: 0,
- currentTime: 0,
- audioRange: 0,
- audioPaused: true,
- page: 1,
- limit: 10,
- loading: false,
- finished: false,
- player: null,
- viewing_time: 0,
- player: null,
- payDialogOpen: false
- },
- computed: {
- },
- created: function () {
- this.viewing_time = $h.getParmas('viewing_time') / 1e3;
- this.currentTime = Math.floor(this.viewing_time);
- this.playerHeight = Math.floor(window.innerWidth * 9 / 16);
- this.getTaskList();
- },
- mounted: function () {
- this.$nextTick(function () {
- var vm = this;
- this.getTaskInfo();
- $h.EventUtil.listenTouchDirection(document, function () {
- vm.getTaskList();
- });
- });
- if (window.WeixinJSBridge) {
- window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
- vm.player.load()
- setTimeout(() => {
- vm.player.play()
- }, 300)
- })
- } else {
- document.addEventListener('WeixinJSBridgeReady',() => {
- vm.player.load()
- setTimeout(() => {
- vm.player.play()
- }, 300)
- //if (vm.player) vm.player.play();
- })
- }
- },
- methods: {
- // 获取播放信息
- getTaskInfo: function () {
- var vm = this;
- store.basePost($h.U({
- c: 'special',
- a: 'getTaskInfo'
- }), {
- special_id: specialId,
- task_id: this.taskId
- }, function (res) {
- var data = res.data.data;
- vm.isPay = data.isPay;
- vm.isSourcePay = data.isSourcePay;
- vm.isSourcePay = data.isSourcePay;
- vm.isMember = data.is_member;
- vm.linkUrl = data.link_url;
- vm.specialInfo = data.specialInfo;
- vm.taskInfo = data.taskInfo;
- if (vm.taskInfo.videoId) {
- vm.getPlayAuth();
- } else if (vm.taskInfo.link) {
- vm.createPlayer();
- }
- if (isWechat) {
- mapleWx($jssdk(), function () {
- this.onMenuShareAll({
- title: vm.taskInfo.title,
- desc: vm.taskInfo.title,
- imgUrl: vm.taskInfo.image,
- link: data.link_url
- });
- });
- }
- });
- },
- // 获取palyauth
- getPlayAuth: function () {
- var vm = this;
- store.baseGet($h.U({
- c: 'special',
- a: 'get_video_playback_credentials',
- q: {
- videoId: vm.taskInfo.videoId,
- type: 2
- }
- }), function (res) {
- var request = new XMLHttpRequest();
- request.onreadystatechange = function () {
- if (request.readyState === 4) {
- try {
- var data = JSON.parse(request.responseText);
- if (request.status === 200) {
- vm.duration = data.VideoMeta.Duration;
- vm.createPlayer(data.PlayAuth);
- } else {
- layer.msg(data.Message);
- }
- } catch (error) {
- layer.msg(error);
- }
- }
- };
- request.open('GET', res.data.msg);
- request.send();
- }, undefined);
- },
- // 创建播放器
- createPlayer: function (playauth) {
- var vm = this;
- if (this.player) {
- this.player.dispose();
- this.player = null;
- this.audioPaused = true;
- }
- this.player = new Aliplayer({
- id: 'J_prismPlayer',
- height: '100%',
- source: vm.taskInfo.link,
- vid: vm.taskInfo.videoId,
- playauth: playauth || '',
- cover: vm.taskInfo.type == 3 ? vm.taskInfo.image : '',
- autoplay: true,
- // isLive:true,
- format: vm.taskInfo.type == 2 ? 'mp3' : '',
- controlBarVisibility: 'click', //never
- showBarTime: 3e3
- });
- vm.player.on('ready', vm.handleReady);
- vm.player.on('canplaythrough', vm.onPlayerCanplaythrough);
- vm.player.on('ended', vm.handleEnded);
- vm.player.on('timeupdate', vm.handleTimeupdate);
- // 进度条拖拽开始,不可以前进,可以后退
- let start = true;
- let startProgress = 0;
- let endProgress = 0;
- vm.player.on('startSeek', (e) => {
- if(start){
- start = false;
- startProgress = vm.player.getCurrentTime();
- //console.log('startSeek', startProgress);
- }
- vm.player.pause();
- });
- //阿里播放器拖动【结束】拖动时,不可以前进,可以后退
- vm.player.on('completeSeek', (e) => {
- start = true;
- endProgress = vm.player.getCurrentTime();
- //console.log('endProgress', endProgress);
- if (endProgress < startProgress) {
- //console.log('endProgress1', endProgress);
- vm.player.seek(endProgress);
- } else {
- //console.log('endProgress2', endProgress);
- vm.player.seek(startProgress);
- }
- vm.player.play();
- });
-
- },
- handleReady: function () {
- var vm = this;
- if (this.taskInfo.link) {
- this.duration = this.player.getDuration();
- }
- if (!this.isPay && !this.isSourcePay) {
- this.player.setPreviewTime(this.taskInfo.try_time * 60);
- }
- },
- // 初始播放位置
- onPlayerCanplaythrough: function () {
- var vm = this;
- if (!this.isPay && !this.isSourcePay) {
- return;
- }
- if (!vm.seeked) {
- vm.seeked = true;
- vm.player.seek(vm.viewing_time);
- }
- },
- handleTimeupdate: function () {
- this.currentTime = this.player.getCurrentTime();
- if (this.taskInfo.type === 2) {
- this.setAudioRange();
- }
- if (!this.isPay && !this.isSourcePay) {
- return;
- }
- var floorTime = Math.floor(this.currentTime);
- if (floorTime && floorTime !== this.floorTime && !(floorTime % 10)) {
- this.floorTime = floorTime;
- this.setViewing();
- }
- },
- // 播放结束
- handleEnded: function () {
- var vm = this;
- if (vm.taskInfo.type == 2) {
- vm.audioPaused = !vm.audioPaused;
- }
- if (!this.isPay && !this.isSourcePay) {
- layer.confirm('购买后可' + (this.taskInfo.type === 2 ? '听' : '看') + '全部内容,是否购买?', {
- title: false,
- closeBtn: false,
- btn: ['购买', '取消']
- }, function (index) {
- vm.payDialogOpen = true;
- layer.close(index);
- });
- }
- },
- // 获取专栏列表
- getTaskList: function () {
- var vm = this;
- if (vm.finished) {
- return;
- }
- store.baseGet($h.U({
- c: 'special',
- a: 'get_course_list',
- q: {
- special_id: specialId,
- page: vm.page,
- limit: vm.limit
- }
- }), function (res) {
- var data = res.data.data;
- var list = Array.isArray(data) ? [] : data.list;
- vm.taskList = vm.taskList.concat(list);
- vm.finished = vm.limit > list.length;
- if (!vm.finished) {
- vm.page++;
- }
- }, function () {
- });
- },
- // 点击目录
- playTask: function (item) {
- var vm = this;
- if (item.id == vm.taskId) {
- return;
- }
- if (!this.isPay && item.pay_status && !item.is_try) {
- layer.confirm('购买后可' + (item.type === 2 ? '听' : '看') + '全部内容,是否购买?', {
- title: false,
- closeBtn: false,
- btn: ['购买', '取消']
- }, function (index) {
- vm.payDialogOpen = true;
- layer.close(index);
- });
- return;
- }
- vm.taskId = item.id;
- vm.viewing_time = item.watch && item.watch.viewing_time / 1e3 || 0;
- vm.currentTime = Math.floor(vm.viewing_time);
- vm.seeked = false;
- vm.getTaskInfo();
- },
- // 更新播放进度
- setViewing: function () {
- store.basePost($h.U({
- c: 'special',
- a: 'viewing'
- }), {
- special_id: specialId,
- task_id: this.taskId,
- total: this.duration * 1000,
- viewing_time: this.currentTime * 1000,
- percentage: Math.floor(this.currentTime / this.duration * 100)
- }, false, false, true);
- },
- // 播放/暂停音频
- audioPlay: function () {
- this.audioPaused = !this.audioPaused;
- this.audioPaused ? this.player.pause() : this.player.play();
- },
- // 设置音频进度
- setAudioRange: function () {
- this.audioRange = Math.floor(this.currentTime / this.duration * 100);
- },
- // 跳到音频的新位置
- audioSeek: function (event) {
- var target = event.target;
- var classList = target.classList;
- var range;
- if (classList.contains('dot')) {
- return;
- } else if (classList.contains('range')) {
- range = event.offsetX / target.parentNode.clientWidth;
- } else {
- range = event.offsetX / target.clientWidth;
- }
- this.audioRange = range * 100;
- this.currentTime = this.duration * range;
- this.player.seek(this.currentTime);
- },
- // 上一个音频/下一个音频
- audioTab: function (state) {
- if (this.player.getStatus() === 'playing') {
- this.audioPaused = true;
- this.player.pause();
- }
- var index = 0;
- for (var i = this.taskList.length; i--;) {
- if (this.taskList[i].id === this.taskId) {
- index = i;
- break;
- }
- }
- if (index === this.taskList.length - 1 && state) {
- return $h.pushMsg('已经是最后一个');
- }
- if (!index && !state) {
- return $h.pushMsg('已经是第一个');
- }
- var task = state ? this.taskList[index + 1] : this.taskList[index - 1];
- if (task.pay_status) {
- return $h.pushMsg('请先去购买');
- }
- this.playTask(task);
- },
- // 滑动音频
- audioMove: function (event) {
- if (this.player.getStatus() === 'playing') {
- this.audioPaused = true;
- this.player.pause();
- }
- var parentNode = event.target.parentNode.parentNode;
- var range = Math.floor((event.touches[0].pageX - parentNode.offsetLeft) / parentNode.clientWidth * 100);
- if (range > 100) {
- range = 100;
- }
- this.audioRange = range;
- },
- // 滑动音频停止
- audioMoveEnd: function () {
- this.player.seek(this.duration * this.audioRange / 100);
- if (this.player.getStatus() === 'pause') {
- this.audioPaused = false;
- this.player.play();
- }
- },
- changeVal: function (opt) {
- if (typeof opt !== 'object') {
- opt = {};
- }
- var action = opt.action || '';
- var value = opt.value || '';
- this[action] && this[action](value);
- },
- // 支付方式回调
- pay_order: function (data) {
- this.orderId = data.data.result.orderId || '';
- switch (data.data.status) {
- case "PAY_ERROR":
- case 'ORDER_EXIST':
- case 'ORDER_ERROR':
- this.extendOrder(data.msg);
- break;
- case 'WECHAT_PAY':
- this.wechatPay(data.data.result.jsConfig);
- break;
- case 'WECHAT_H5_PAY':
- this.payDialogOpen = false;
- var callbackUrl = callback_url + '?type=7&id=' + this.special.id;
- var mwebUrl = data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl);
- window.location.assign(mwebUrl);
- break;
- case 'SUCCESS':
- this.successOrder(data.msg);
- break;
- case 'ZHIFUBAO_PAY':
- window.location.assign($h.U({
- c: 'alipay',
- a: 'index',
- q: {
- info: data.data.result,
- params: 'special'
- }
- }));
- break;
- }
- },
- // 微信支付
- wechatPay: function (config) {
- var vm = this;
- mapleWx($jssdk(), function () {
- this.chooseWXPay(config, function () {
- vm.successOrder();
- }, {
- fail: vm.extendOrder,
- cancel: vm.extendOrder
- });
- });
- },
- // 支付成功
- successOrder: function (msg) {
- var that = this;
- $h.showMsg({
- title: msg || '支付成功',
- icon: 'success',
- success: function () {
- window.location.reload();
- that.payDialogOpen = false;
- that.getTaskInfo();
- that.finished = false;
- that.page = 1;
- that.taskList = [];
- that.getTaskList();
- }
- });
- },
- // 支付未完成
- extendOrder: function (msg) {
- var that = this;
- if (typeof msg === 'object') {
- if (msg.errMsg === 'chooseWXPay:cancel') {
- msg = '微信支付取消';
- } else {
- msg = '支付失败';
- }
- } else {
- msg = '支付失败';
- }
- $h.pushMsg(msg, function () {
- that.payDialogOpen = false;
- if (that.orderId) {
- store.baseGet($h.U({
- c: 'special',
- a: 'del_order',
- q: {
- orderId: that.orderId
- }
- }));
- }
- });
- },
- }
- });
- });
- </script>
- {/block}
|