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.
502 lines
17 KiB
502 lines
17 KiB
10 months ago
|
<template>
|
||
|
|
<BaseContainer class="task-info">
|
||
|
|
<NavBar title="专题详情" />
|
||
|
|
<view v-if="singleContent.light_type === 3">
|
||
|
|
<video id="myVideo" @loadedmetadata="handleReady" @play="play" @ended="handleEnded"
|
||
|
|
@timeupdate="handleTimeupdateVideo" class="player-self" :poster="singleContent.image"
|
||
|
|
:src="singleProfile.link" object-fit="cover"></video>
|
||
|
|
</view>
|
||
|
|
<image v-if="singleContent.light_type === 2 && !singleProfile.videoId && !singleProfile.link"
|
||
|
|
:src="singleContent.image" class="cover" :style="{ height: height + 'px' }" />
|
||
|
|
<view v-if="singleContent.light_type === 2" :style="{ height: height + 'px' }" class="audio-player">
|
||
|
|
|
||
|
|
<image class="image"
|
||
|
|
:src="isPause ? getImgPath('/wap/first/zsff/images/audio1.png') : getImgPath('/wap/first/zsff/images/audio2.gif')"
|
||
|
|
alt="" />
|
||
|
|
<view v-if="!(!singleProfile.videoId && !singleProfile.link)" class="control">
|
||
|
|
<view @click="toggleTask">
|
||
|
|
<i class="iconfont icon" :class="isPause ? 'iconbofang' : 'iconzanting'"></i>
|
||
|
|
</view>
|
||
|
|
<view class="timeline" @touchmove="moveTask" @touchend="moveEndTask">
|
||
|
|
<view>{{ currentTime | formatTime(duration) }}</view>
|
||
|
|
<view class="progress">
|
||
|
|
<view :style="{ width: taskRange + '%' }" class="inner">
|
||
|
|
<view class="thumb"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>{{ duration | formatTime }} </view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="title">{{ singleContent.title }}</view>
|
||
|
|
<view class="detail" v-html="singleContent.abstract"></view>
|
||
|
|
<PayDiaLog :open.sync="payDialogOpen" :money="parseFloat(singleContent.money)" :now_money="nowMoney"
|
||
|
|
:special_id="id" :pay_type_num="2" :is-wechat="isWechat" :is-alipay="isAlipay" :is-balance="isBalance"
|
||
|
|
:template-id="templateIds" :wxpay-h5="wxpayH5" @change="changeVal" />
|
||
|
|
</BaseContainer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
singleConContent,
|
||
|
|
getVideoPlayCredentials,
|
||
|
|
getVideoPlayDuration,
|
||
|
|
saveSpecialViewing,
|
||
|
|
delSpecialOrder,
|
||
|
|
} from "@/api/special";
|
||
|
|
import { getAuthInfo } from "@/api/auth";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
|
||
|
|
import PayDiaLog from "@/components/PayDialog/index.vue";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
PayDiaLog
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
formatTime(time, sibling) {
|
||
|
|
let duration = dayjs.duration(time * 1000);
|
||
|
|
let hours = duration.hours();
|
||
|
|
let siblingHours = sibling ? dayjs.duration(sibling * 1000).hours() : 0;
|
||
|
|
|
||
|
|
return dayjs({
|
||
|
|
h: hours,
|
||
|
|
m: duration.minutes(),
|
||
|
|
s: duration.seconds(),
|
||
|
|
}).format((hours || siblingHours ? "HH:" : "") + "mm:ss");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
taskRange: function () {
|
||
|
|
return Math.floor(this.currentTime / this.duration * 100);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
id: 0,
|
||
|
|
nowMoney: 0,
|
||
|
|
height: 0,
|
||
|
|
singleContent: {},
|
||
|
|
singleProfile: {},
|
||
|
|
isPause: true,
|
||
|
|
currentTime: 0,
|
||
|
|
duration: 0,
|
||
|
|
payDialogOpen: false,
|
||
|
|
pay_type_num: -1,
|
||
|
|
isWechat: false,
|
||
|
|
isAlipay: false,
|
||
|
|
isBalance: false,
|
||
|
|
wxpayH5: false,
|
||
|
|
memberLink: '',
|
||
|
|
templateIds: '',
|
||
|
|
PlayAuth: '',
|
||
|
|
player: null,
|
||
|
|
viewing_time: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad({ id }) {
|
||
|
|
this.id = parseInt(id);
|
||
|
|
this.getAuthInfo();
|
||
|
|
this.getSingleContent();
|
||
|
|
|
||
|
|
// 系统信息的概念
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success: res => {
|
||
|
|
this.height = Math.floor(res.screenWidth * 9 / 16)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
this.getTaskList();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
play() {
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
this.player.seek(parseInt(this.currentTime));
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
async getAuthInfo() {
|
||
|
|
const res = await getAuthInfo();
|
||
|
|
const { nowMoney, isWechat, isAlipay, isBalance, wxpayH5 } = res.data;
|
||
|
|
Object.assign(this, {
|
||
|
|
nowMoney,
|
||
|
|
isWechat,
|
||
|
|
isAlipay,
|
||
|
|
isBalance,
|
||
|
|
wxpayH5,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getSingleContent() {
|
||
|
|
singleConContent(this.id).then(res => {
|
||
|
|
this.singleContent = res.data;
|
||
|
|
this.singleProfile = res.data.singleProfile;
|
||
|
|
this.viewing_time = this.singleContent.viewing_time / 100;
|
||
|
|
this.currentTime = Math.floor(this.viewing_time);
|
||
|
|
if (this.singleContent.light_type == 3) {
|
||
|
|
this.createPlayer();
|
||
|
|
} else {
|
||
|
|
this.createAudioPlayer();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
createAudioPlayer() {
|
||
|
|
if (this.player) {
|
||
|
|
this.player.stop();
|
||
|
|
this.player = null;
|
||
|
|
this.audioPaused = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
||
|
|
innerAudioContext.autoplay = false;
|
||
|
|
innerAudioContext.src = this.singleProfile.link;
|
||
|
|
|
||
|
|
innerAudioContext.onCanplay(() => {
|
||
|
|
let intervalID = setInterval(() => {
|
||
|
|
if (innerAudioContext.duration !== 0) {
|
||
|
|
clearInterval(intervalID);
|
||
|
|
this.duration = innerAudioContext.duration;
|
||
|
|
// #ifdef APP
|
||
|
|
this.player.seek(this.viewing_time);
|
||
|
|
//#endif
|
||
|
|
this.audioRange = Math.floor((this.viewing_time / this.duration) * 100)
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
innerAudioContext.onEnded(() => {
|
||
|
|
this.handleEnded();
|
||
|
|
});
|
||
|
|
|
||
|
|
innerAudioContext.onTimeUpdate(() => {
|
||
|
|
this.handleTimeupdate();
|
||
|
|
});
|
||
|
|
|
||
|
|
this.player = innerAudioContext;
|
||
|
|
if (this.viewing_time) {
|
||
|
|
this.player.seek(this.viewing_time);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPlayerCanplaythrough() {
|
||
|
|
|
||
|
|
},
|
||
|
|
// 创建播放器
|
||
|
|
createPlayer() {
|
||
|
|
this.player = uni.createVideoContext("myVideo");
|
||
|
|
},
|
||
|
|
handleReady(e) {
|
||
|
|
this.duration = e.target.duration;
|
||
|
|
if (!this.singleContent.isPay && this.singleProfile.is_try) {
|
||
|
|
// this.player.seek(this.taskInfo.try_time * 60);
|
||
|
|
} else {
|
||
|
|
this.player.seek(this.viewing_time);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取playauth
|
||
|
|
getPlayAuth: function () {
|
||
|
|
},
|
||
|
|
|
||
|
|
handlePause: function () {
|
||
|
|
if (!this.isPause) {
|
||
|
|
this.isPause = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleCanplay: function () {
|
||
|
|
if (this.singleContent.isPay) {
|
||
|
|
if (!this.seeked) {
|
||
|
|
this.seeked = true;
|
||
|
|
this.player.seek(this.singleContent.viewing_time / 1000);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.player.setPreviewTime(this.singleProfile.try_time * 60);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleEnded() {
|
||
|
|
if (!this.singleContent.isPay) {
|
||
|
|
uni.showModal({
|
||
|
|
title: "提示",
|
||
|
|
content: '购买后可' + (this.singleContent.light_type === 2 ? '听' : '看') + '全部内容，是否购买？',
|
||
|
|
confirmText: "购买",
|
||
|
|
success: ({ confirm }) => {
|
||
|
|
if (!confirm) return;
|
||
|
|
this.payDialogOpen = true
|
||
|
|
},
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.setViewing(this.duration);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onUnload() {
|
||
|
|
if (!this.player) return;
|
||
|
|
this.player.pause()
|
||
|
|
},
|
||
|
|
handleTimeupdateVideo(event) {
|
||
|
|
this.currentTime = event.target.currentTime;
|
||
|
|
this.duration = event.target.duration;
|
||
|
|
if (parseInt(this.currentTime) == parseInt(this.duration)) {
|
||
|
|
this.player.seek(0);
|
||
|
|
}
|
||
|
|
if (!this.singleContent.isPay) {
|
||
|
|
if (this.singleProfile.is_try && this.currentTime >= this.singleProfile.try_time * 60) {
|
||
|
|
this.player.pause()
|
||
|
|
this.handleEnded();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var floorTime = Math.floor(this.currentTime);
|
||
|
|
if (floorTime && floorTime !== this.floorTime && !(floorTime % 10)) {
|
||
|
|
this.floorTime = floorTime;
|
||
|
|
this.setViewing(this.currentTime);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleTimeupdate() {
|
||
|
|
this.currentTime = this.player.currentTime;
|
||
|
|
if (!this.singleContent.isPay) {
|
||
|
|
if (this.singleProfile.is_try && this.currentTime >= this.singleProfile.try_time * 60) {
|
||
|
|
this.isPause = true;
|
||
|
|
this.player.pause()
|
||
|
|
this.player.seek(0)
|
||
|
|
this.handleEnded();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var floorTime = Math.floor(this.currentTime);
|
||
|
|
if (floorTime && floorTime !== this.floorTime && !(floorTime % 10)) {
|
||
|
|
this.floorTime = floorTime;
|
||
|
|
this.setViewing(this.currentTime);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setViewing(currentTime) {
|
||
|
|
saveSpecialViewing({
|
||
|
|
special_id: this.id,
|
||
|
|
task_id: 0,
|
||
|
|
total: this.duration * 1e3,
|
||
|
|
viewing_time: currentTime * 100,
|
||
|
|
percentage: Math.floor((currentTime / this.duration) * 100),
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 播放/暂停音频
|
||
|
|
toggleTask: function () {
|
||
|
|
this.isPause = !this.isPause;
|
||
|
|
this.isPause ? this.player.pause() : this.player.play();
|
||
|
|
},
|
||
|
|
// 滑动音频
|
||
|
|
moveTask: function (event) {
|
||
|
|
if (!this.player || !this.player.paused) {
|
||
|
|
this.isPause = true;
|
||
|
|
this.player.pause();
|
||
|
|
}
|
||
|
|
this.$util.getClientRect(".progress").then(({ left, width }) => {
|
||
|
|
let range = Math.floor(((event.touches[0].pageX - left) / width) * 100);
|
||
|
|
if (range > 100) {
|
||
|
|
range = 100;
|
||
|
|
}
|
||
|
|
this.audioRange = range;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 滑动音频停止
|
||
|
|
moveEndTask: function () {
|
||
|
|
this.player.seek((this.duration * this.audioRange) / 100);
|
||
|
|
if (this.player.paused) {
|
||
|
|
this.isPause = 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;
|
||
|
|
this.$util.wechatH5Pay(data.data.result.jsConfig, this);
|
||
|
|
break;
|
||
|
|
case "WECHAT_ROUTINE_PAY":
|
||
|
|
this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
|
||
|
|
break;
|
||
|
|
case "SUCCESS":
|
||
|
|
this.successOrder(data.msg);
|
||
|
|
break;
|
||
|
|
case "ZHIFUBAO_PAY":
|
||
|
|
this.aliPay(data.data.result, "special");
|
||
|
|
break;
|
||
|
|
case 'TOUTIAO_PAY':
|
||
|
|
this.$util.toutiaoPay(data.data.result.jsConfig, this);
|
||
|
|
break;
|
||
|
|
case 'KUAISHOU_PAY':
|
||
|
|
this.$util.kuaishouPay(data.data.result.jsConfig, this);
|
||
|
|
break
|
||
|
|
}
|
||
|
|
},
|
||
|
|
aliPay(msn, type) {
|
||
|
|
this.$util.aliPay(msn, type, this);
|
||
|
|
},
|
||
|
|
// 微信支付
|
||
|
|
wechatPay: function (config) {
|
||
|
|
console.log(config)
|
||
|
|
this.$util.weixinpay(config, this);
|
||
|
|
},
|
||
|
|
// 支付成功
|
||
|
|
successOrder: function (msg) {
|
||
|
|
this.$util.showMsg(msg ? msg : "支付成功");
|
||
|
|
this.singleContent.isPay = true;
|
||
|
|
this.payDialogOpen = false;
|
||
|
|
this.getSingleContent();
|
||
|
|
},
|
||
|
|
// 支付未完成
|
||
|
|
extendOrder: function (msg) {
|
||
|
|
if (typeof msg === "object") {
|
||
|
|
if (msg.errMsg === "chooseWXPay:cancel") {
|
||
|
|
msg = "微信支付取消";
|
||
|
|
} else {
|
||
|
|
msg = "支付失败";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
msg = '支付失败,' + msg;
|
||
|
|
}
|
||
|
|
this.$util.showMsg(msg);
|
||
|
|
this.payDialogOpen = false;
|
||
|
|
console.log(this.orderId)
|
||
|
|
if (this.orderId) {
|
||
|
|
delSpecialOrder(this.orderId).then((res) => {
|
||
|
|
console.log(res);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.player-self {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
page {
|
||
|
|
background: #F7F8F9;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.prism-player .prism-info-display {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prism-player .prism-big-play-btn {
|
||
|
|
bottom: 50% !important;
|
||
|
|
left: 50% !important;
|
||
|
|
transform: translate(-50%, 50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .image {
|
||
|
|
display: block;
|
||
|
|
width: 464rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
height: 160rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .control {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 40rpx 30rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .icon {
|
||
|
|
font-size: 64rpx;
|
||
|
|
color: #2C8EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .timeline {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 30rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #2C8EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .progress {
|
||
|
|
flex: 1;
|
||
|
|
height: 4rpx;
|
||
|
|
border-radius: 2rpx;
|
||
|
|
margin: 0 18rpx;
|
||
|
|
background-color: rgba(44, 142, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .inner {
|
||
|
|
position: relative;
|
||
|
|
width: 0;
|
||
|
|
height: 4rpx;
|
||
|
|
border-radius: 2rpx;
|
||
|
|
background-color: #2C8EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.audio-player .thumb {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: 0;
|
||
|
|
width: 16rpx;
|
||
|
|
height: 16rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #2C8EFF;
|
||
|
|
transform: translate(50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
padding: 30rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #333333;
|
||
|
|
border-radius: 40rpx 40rpx 0 0;
|
||
|
|
margin-top: -15px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 9;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #23272E;
|
||
|
|
line-height: 52rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail {
|
||
|
|
padding: 30rpx;
|
||
|
|
border-top: 14rpx solid #F5F5F5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail img {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
/* #ifdef MP-WEIXIN */
|
||
|
|
height: auto !important;
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
</style>
|