You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhishifufei_php/application/wap/view/first/special/task_info.html

561 lines
24 KiB

10 months ago
<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者,助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016~2020 https://www.tczxkj.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed 该系统并不是自由软件,未经许可不能去掉相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
<!-- +---------------------------------------------------------------------- -->
{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%);
}
html,
body {
height: 100%;
}
</style>
{/block}
{block name="content"}
<div v-cloak id="app" 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="navbar">
<div :class="{ on: tabIndex == 0 }" class="navbar-item" @click="tabIndex = 0">目录</div>
<div :class="{ on: tabIndex == 1 }" class="navbar-item" @click="tabIndex = 1">详情</div>
</div>
<div class="navbar-content">
<div v-show="tabIndex == 0" class="navbar-content-item">
<ul class="catalog">
<li v-for="(item, index) in taskList" :key="item.id" :class="{ on: item.id == taskId }" class="catalog-item" @click="playTask(item)">
<div>
<img v-if="item.type == 1" class="catalog-item-image" src="{__WAP_PATH}zsff/images/media1.png">
<img v-else-if="item.type == 2" class="catalog-item-image" src="{__WAP_PATH}zsff/images/media2.png">
<img v-else-if="item.type == 3" class="catalog-item-image" src="{__WAP_PATH}zsff/images/media3.png">
</div>
<div class="catalog-item-text">
<div class="catalog-item-title">{{ index >= 9 ? index + 1 : '0' + (index + 1) }} | {{ item.title }}</div>
<div class="catalog-item-progress">
<div v-if="item.watch && item.watch.percentage" class="progress-text">已学习{{ item.watch.percentage }}%</div>
<div v-else class="progress-text no">未学习</div>
</div>
</div>
<div class="catalog-item-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="navbar-content-item">
<div v-html="taskInfo.content" class="content"></div>
</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: 5,
loading: false,
finished: false,
player: null,
viewing_time: 0,
player: null,
payDialogOpen: false
},
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();
});
});
},
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: false,
format: vm.taskInfo.type == 2 ? 'mp3' : '',
controlBarVisibility: 'click',
showBarTime: 3e3
});
vm.player.on('ready', vm.handleReady);
vm.player.on('ready', vm.handleReady);
vm.player.on('canplaythrough', vm.onPlayerCanplaythrough);
vm.player.on('ended', vm.handleEnded);
vm.player.on('timeupdate', vm.handleTimeupdate);
},
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 = 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}