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_uniapp/pages/special/task_info.vue

724 lines
18 KiB

<template>
<BaseContainer class="task-info">
<NavBar :title="title" />
<!-- 视频窗口 -->
<view :style="{ height: playerHeight + 'px' }" class="player">
<!-- <view :hidden="taskInfo.type == 2" id="J_prismPlayer"></view> -->
<image v-if="taskInfo.type == 2" :src="taskInfo.image" />
<video id="player" @loadedmetadata="handleVideoLoaded" @timeupdate="onPlayerTimeupdate" @play="play"
class="player-self" v-if="taskInfo.type == 3" @ended="onPlayerEnded" :poster="taskInfo.image"
:src="taskInfo.link" object-fit="cover"></video>
</view>
<view class="task-info-body">
<view>{{ taskInfo.title }}</view>
<view>已播放{{ taskInfo.play_count }}次</view>
</view>
<!-- 音频播放 -->
<view v-if="taskInfo.type == 2" class="audio">
<view class="control flex flex-center">
<view class="iconfont " @click="audioTab(0)">
<image style="width:44rpx; height:48rpx;" :src=" getImgPath(`/wap/first/zsff/images/c2.png`)" mode="" />
</view>
<view @click="audioPlay" class="play-btn">
<i class="iconfont icon" >
<image style="width:100rpx; height:100rpx;" :src="audioPaused ?getImgPath(`/wap/first/zsff/images/plays.png`) : getImgPath(`/wap/first/zsff/images/paue.png`)" mode="" />
</i>
</view>
<view class="iconfont " type="button" @click="audioTab(1)">
<image style="width:44rpx; height:48rpx;" :src="getImgPath(`/wap/first/zsff/images/c1.png`)" mode="" />
</view>
</view>
<view class="progress">
<view class="time">{{ currentTime | format(duration) }}</view>
<view class="bar" @click="audioSeek">
<view :style="{ width: audioRange + '%' }" class="range" data-id="range">
<view class="dot" data-id="dot" @touchmove="audioMove" @touchend="audioMoveEnd"></view>
</view>
</view>
<view class="time">{{ duration | format }}</view>
</view>
</view>
<!-- 目录、详情 -->
<view class="tabbar">
<view :class="{ on: tabIndex == 0 }" @click="tabIndex = 0">目录</view>
<view :class="{ on: tabIndex == 1 }" @click="tabIndex = 1">详情</view>
</view>
<view v-if="tabIndex == 0">
<view class="catalogue">
<view class="catalogue-item" v-for="(item, index) in taskList" :key="item.id" :class="{ on: item.id == taskId }"
@click="playTask(item)">
<view>
<image v-if="item.type == 1" class="img" :src="getImgPath('/wap/first/zsff/images/media1.png')" />
<image v-else-if="item.type == 2" class="img" :src="getImgPath('/wap/first/zsff/images/media2.png')" />
<image v-else-if="item.type == 3" class="img" :src="getImgPath('/wap/first/zsff/images/media3.png')" />
</view>
<view class="text">
<view class="title">
{{ index >= 9 ? index + 1 : "0" + (index + 1) }} | {{ item.title }}
</view>
<view class="try-progress">
<view v-if="item.watch && item.watch.percentage" class="progress">
已学习{{ item.watch.percentage }}%
</view>
<view v-else class="progress no">未学习</view>
</view>
</view>
<view class="status">
<i v-if="item.is_free" :class="[item.pay_status ? 'iconsuozi' : 'iconziyuan2', 'iconfont']"></i>
<span v-else class="free">免费</span>
</view>
</view>
</view>
</view>
<mp-html v-else-if="tabIndex == 1" class="content" container-style="padding: 30rpx; background: #ffffff;"
:content="taskInfo.content"></mp-html>
</BaseContainer>
</template>
<script>
import {
getCourseList,
getTaskInfo,
getVideoPlayCredentials,
getVideoPlayDuration,
saveSpecialViewing,
} from "@/api/special";
import dayjs from "dayjs";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
export default {
components: {
mpHtml,
},
filters: {
format(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: {
title() {
if (!this.taskInfo.id) return " ";
return this.taskInfo.type === 2 ? "音频素材" : "视频素材";
},
},
data() {
return {
try_num: 0,
taskId: 0,
specialId: 0,
playerHeight: 0,
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,
isPay: false,
player: null,
videoContext: null,
audioBarPos: {
width: 0,
left: 0,
},
};
},
onLoad({ id, specialId, viewing_time = 0 }) {
this.taskId = id;
this.specialId = specialId;
this.viewing_time = viewing_time / 1e3;
this.currentTime = Math.floor(this.viewing_time);
console.log(this.viewing_time)
const { screenWidth } = this.$util.getSystemInfo();
this.playerHeight = Math.floor((screenWidth * 9) / 16);
this.getTaskList();
},
onReachBottom() {
this.getTaskList();
},
mounted() {
this.getTaskInfo().then(() => {
this.taskInfo.type === 2 &&
this.$util.getClientRect(".bar").then(({ width, left }) => {
this.audioBarPos.width = width;
this.audioBarPos.left = left;
});
});
},
methods: {
play() {
// #ifdef APP-PLUS
this.player.seek(parseInt(this.currentTime));
// #endif
},
// 获取播放信息
getTaskInfo() {
return getTaskInfo(this.specialId, this.taskId).then(({ data }) => {
this.isPay = data.isPay;
this.specialInfo = data.specialInfo;
this.taskInfo = data.taskInfo;
/* if (this.taskInfo.videoId) {
this.getPlayAuth();
} else */ if (this.taskInfo.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.taskInfo.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.onPlayerEnded();
});
innerAudioContext.onTimeUpdate(() => {
this.onPlayerTimeupdate();
});
this.player = innerAudioContext;
if (this.viewing_time) {
this.player.seek(this.viewing_time);
}
},
onUnload() {
if (!this.player) return;
this.player.pause()
},
// 获取palyauth
getPlayAuth() {
getVideoPlayCredentials(this.taskInfo.videoId, 2).then(({ msg }) => {
getVideoPlayDuration(msg).then((res) => {
try {
var data = JSON.parse(res.responseText);
if (request.status === 200) {
this.duration = data.VideoMeta.Duration;
this.createPlayer(data.PlayAuth);
} else {
this.$util.showMsg(data.Message);
}
} catch (error) {
this.$util.showMsg(error);
}
});
});
},
// 创建播放器
createPlayer(playauth) {
if (this.player) {
this.player.stop();
this.player = null;
}
this.player = uni.createVideoContext("player");
},
// 初始播放位置
handleVideoLoaded(e) {
this.duration = e.target.duration;
if (!this.isPay && this.taskInfo.is_try) {
// this.player.seek(this.taskInfo.try_time * 60);
} else {
this.player.seek(this.viewing_time);
}
},
onPlayerTimeupdate(e) {
if (this.duration == 0 && this.taskInfo.type == 3) {
this.duration = e.target.duration;
}
if (parseInt(this.currentTime) == parseInt(this.duration)) {
this.player.seek(0);
}
this.currentTime = this.taskInfo.type == 3 ? e.detail.currentTime : this.player.currentTime;
this.audioRange = Math.floor((this.currentTime / this.duration) * 100);
if (!this.isPay) {
if (this.taskInfo.is_try && this.currentTime >= this.taskInfo.try_time * 60) {
this.audioPaused = true;
this.player.pause()
this.player.seek(0)
this.onPlayerEnded();
}
return;
} else {
// this.player.seek(parseInt(this.currentTime));
// this.player.seek(this.currentTime)
}
var floorTime = Math.floor(this.currentTime);
if (floorTime && floorTime != this.floorTime && !(floorTime % 10)) {
this.floorTime = floorTime;
this.setViewing(this.currentTime);
}
},
// 播放结束
onPlayerEnded() {
if (!this.isPay) {
this.currentTime = 0
uni.showModal({
title: "提示",
content: "购买后可看全部内容,是否购买?",
confirmText: "购买",
success: ({ confirm }) => {
if (!confirm) return;
uni.navigateBack({})
},
});
} else {
this.setViewing(this.duration);
}
},
// 获取专栏列表
getTaskList() {
if (this.finished) return;
getCourseList({
special_id: this.specialId,
page: this.page,
limit: this.limit,
}).then(({ data }) => {
let list = Array.isArray(data) ? [] : data.list;
this.taskList = this.taskList.concat(list);
this.finished = this.limit > list.length;
if (!this.finished) {
this.page++;
}
});
},
// 点击目录
playTask(item) {
if (item.id == this.taskId) return;
if (item.pay_status && !this.isPay && this.specialInfo.pay_type) {
this.$util.showMsg("请先去购买");
return;
}
this.taskId = item.id;
this.viewing_time = (item.watch && item.watch.viewing_time / 1e3) || 0;
this.currentTime = Math.floor(this.viewing_time);
this.seeked = false;
this.getTaskInfo();
},
// 更新播放进度
setViewing(currentTime) {
saveSpecialViewing({
special_id: this.specialId,
task_id: this.taskId,
total: this.duration * 1e3,
viewing_time: currentTime * 1e3,
percentage: Math.floor((currentTime / this.duration) * 100),
}).then(res => {
console.log(res)
});
},
// 播放/暂停音频
audioPlay() {
if (this.player) {
this.audioPaused = !this.audioPaused;
this.audioPaused ? this.player.pause() : this.player.play();
}
},
// 设置音频进度
setAudioRange() {
this.audioRange = Math.floor((this.currentTime / this.duration) * 100);
},
// 跳到音频的新位置
audioSeek(event) {
const barWidth = this.audioBarPos.width;
const barLeft = this.audioBarPos.left;
const range = (event.touches[0].pageX - barLeft) / barWidth;
this.audioRange = range * 100;
this.currentTime = this.duration * range;
this.player.seek(this.currentTime);
},
// 上一个音频/下一个音频
audioTab(state) {
if (!this.player) return;
if (!this.player.paused) {
this.audioPaused = true;
this.player.pause();
}
let index = 0;
for (let i = this.taskList.length; i--;) {
if (this.taskList[i].id === this.taskId) {
index = i;
break;
}
}
if (index === this.taskList.length - 1 && state) {
return this.$util.showMsg("已经是最后一个");
}
if (!index && !state) {
return this.$util.showMsg("已经是第一个");
}
let task = state ? this.taskList[index + 1] : this.taskList[index - 1];
if (task.pay_status) {
return this.$util.showMsg("请先去购买");
}
this.playTask(task);
},
// 滑动音频
audioMove(event) {
if (!this.player || !this.player.paused) {
this.audioPaused = true;
this.player.pause();
}
this.$util.getClientRect(".bar").then(({ left, width }) => {
let range = Math.floor(((event.touches[0].pageX - left) / width) * 100);
if (range > 100) {
range = 100;
}
this.audioRange = range;
});
},
// 滑动音频停止
audioMoveEnd() {
if (!this.player) return;
this.player.seek((this.duration * this.audioRange) / 100);
if (this.player.paused) {
this.audioPaused = false;
this.player.play();
}
},
},
};
</script>
<style>
page{
background: #F7F8F9;
}
</style>
<style scoped lang="scss">
.task-info .tabbar {
display: flex;
border-top: 16rpx solid #f5f5f5;
background: #ffffff;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
}
.task-info .tabbar view {
position: relative;
flex: 1;
height: 96rpx;
font-size: 30rpx;
line-height: 96rpx;
text-align: center;
color: #333;
cursor: pointer;
}
.task-info .tabbar view.on {
font-weight: 500;
font-size: 32rpx;
color: #2c8eff;
}
.task-info .tabbar view.on::after {
content: " ";
position: absolute;
bottom: 15rpx;
left: 50%;
width: 30rpx;
height: 8rpx;
border-radius: 10rpx;
background-color: #2c8eff;
transform: translateX(-50%);
}
.catalogue{
background: #ffffff;
}
.catalogue .catalogue-item.on{
background: #ffffff !important;
.text{
.title{
color: #1D8DFF ;
font-size: 30rpx;
font-weight: 500;
color: #1D8DFF;
line-height: 48rpx;
}
}
}
.task-info .prism-player .prism-big-play-btn {
left: 50% !important;
bottom: 50% !important;
transform: translate(-50%, 50%);
}
.task-info .player>image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-touch-callout: none;
pointer-events: none;
}
.task-info .content {
padding: 30rpx;
background-color: #ffffff;
font-size: 30rpx;
line-height: 44rpx;
color: #333;
word-break: break-all;
}
.task-info .content image {
display: block;
width: 100%;
pointer-events: none;
-webkit-touch-callout: none;
}
.task-info .catalogue .catalogue-item {
position: relative;
display: flex;
align-items: center;
height: 152rpx;
}
.task-info .catalogue .catalogue-item::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 91rpx;
border-top: 1px solid #f5f5f5;
}
.task-info .catalogue .catalogue-item:first-child::before {
display: none;
}
.task-info .catalogue .catalogue-item.on {
background-color: #f9fafc;
}
.task-info .catalogue image {
display: block;
width: 38rpx;
height: 27rpx;
margin: 0 33rpx 0 20rpx;
}
.task-info .catalogue .text {
flex: 1;
min-width: 0;
}
.task-info .catalogue .title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 28rpx;
line-height: 40rpx;
color: #333333;
}
.task-info .catalogue .try-progress {
margin-top: 15rpx;
font-size: 0;
}
.task-info .catalogue .try,
.task-info .catalogue .progress {
display: inline-block;
padding: 2.5rpx 7rpx;
border: 1px solid transparent;
border-radius: 3rpx;
font-size: 18rpx;
line-height: 1;
}
.task-info .catalogue .try {
border-color: #2c8eff;
color: #2c8eff;
}
.task-info .catalogue .progress {
padding-left: 9rpx;
border-color: #fff0e5;
background-color: #fff0e5;
color: #ff6b00;
}
.task-info .catalogue .progress.no {
border-color: #dddddd;
background-color: #dddddd;
color: #999999;
}
.task-info .catalogue .try+.progress {
margin-left: 15rpx;
}
.task-info .catalogue .status {
width: 130rpx;
font-size: 0;
text-align: center;
}
.task-info .catalogue .free {
display: inline-block;
width: 90rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: #fff0e5;
font-size: 22rpx;
line-height: 40rpx;
text-align: center;
color: #ff6b00;
}
.task-info .catalogue .iconfont {
font-size: 34rpx;
color: #cccccc;
}
.task-info-body {
padding: 30rpx;
background-color: #ffffff;
font-size: 24rpx;
color: #999999;
border-radius: 32rpx 32rpx 0rpx 0rpx;
position: relative;
margin-top: -20rpx;
z-index: 9;
}
.task-info-body view:first-child {
margin-bottom: 10rpx;
font-size: 36rpx;
color: #333;
}
.task-info .audio {
padding-bottom: 49rpx;
background: #ffffff;
}
.task-info .audio .progress {
display: flex;
align-items: center;
margin-right: 30rpx;
margin-left: 30rpx;
}
.task-info .audio .progress .time {
width: 75rpx;
font-size: 28rpx;
color: #2c8eff;
}
.task-info .audio .progress .bar {
flex: 1;
border-radius: 2rpx;
background-color: rgba(44, 142, 255, 0.3);
margin-right: 18rpx;
margin-left: 18rpx;
}
.task-info .audio .progress .range {
position: relative;
height: 4rpx;
border-radius: 2rpx;
background-color: rgba(44, 142, 255, 0.8);
transition: 0.2s linear;
}
.task-info .audio .progress .dot {
position: absolute;
top: 50%;
left: 100%;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #2c8eff;
transform: translate(-50%, -50%);
}
.task-info .control {
margin-top: 34rpx;
}
.task-info .control .iconfont {
font-size: 36rpx;
color: #46505b;
}
.task-info .control .play-btn {
margin-right: 88rpx;
margin-left: 88rpx;
}
.task-info .control .icon {
font-size: 110rpx;
color: #2c8eff;
}
.player-self {
width: 100%;
height: 100%;
}
.icon {
/* #ifdef MP-WEIXIN */
height: auto !important;
/* #endif */
}
</style>