<template>
|
<view>
|
<!-- 视频区 -->
|
<view class="play-box">
|
<block v-if="isBuy">
|
<!-- 直播中 -->
|
<block v-if="course.course_status==4">
|
<!-- #ifdef APP-PLUS -->
|
<video id="myVideo" :src="videoUrl" object-fit='contain' :auto-pause-if-navigate="false"
|
:auto-pause-if-open-native="false"></video>
|
<!-- #endif -->
|
<!-- #ifdef MP -->
|
<live-player id="myVideo" :src="videoUrl" autoplay />
|
<!-- #endif -->
|
<!-- #ifdef H5 -->
|
<view class="video-js" ref="video"> </view>
|
<!-- #endif -->
|
</block>
|
<!-- 未开始 -->
|
<view class="no-auth" v-if="course.course_status==3">
|
<text class="btn">直播未开始</text>
|
</view>
|
<!-- 未开始 -->
|
<view class="no-auth" v-if="course.course_status==2">
|
<text class="btn">直播已暂停</text>
|
</view>
|
<!-- 未开始 -->
|
<view class="no-auth" v-if="course.course_status==1">
|
<text class="btn">直播已结束</text>
|
</view>
|
</block>
|
<block v-else>
|
<view class="no-auth" @click="buyCourse">
|
<text class="btn">请先订阅</text>
|
</view>
|
</block>
|
</view>
|
<!-- 课程介绍 -->
|
<view class="course-info">
|
<view class="course-title">
|
{{course.title}}
|
</view>
|
<view class="course-desc">
|
{{course.excerpt}}
|
</view>
|
</view>
|
<!-- 介绍 -->
|
<view class="detail-box">
|
<mp-html :content="course.content"></mp-html>
|
</view>
|
|
<!-- 购买提示盒子 -->
|
<view class="buy-box" v-if="!isBuy">
|
<view class="buy-btn" @click="buyCourse()">
|
立即订阅，仅需{{course.charge/100}}元！
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import util from '@/utils/util'
|
var that
|
const app = getApp();
|
|
export default {
|
data() {
|
return {
|
course: { title: "", charge: 0 },
|
playOptions: [],
|
isBuy: false,
|
videoUrl: "",
|
player_video: null
|
};
|
},
|
filters: {
|
durationForHuman(data) {
|
return util.durationForHuman(data)
|
}
|
},
|
onLoad: function(options) {
|
that = this
|
this.courseId = options._id
|
},
|
onShow() {
|
this.getCourse()
|
},
|
onReady: function() {},
|
onShareAppMessage: function() {
|
return {
|
title: this.course.title,
|
path: `/uni_modules/uce-free-live-course/pages/detail??_id=${this.courseId}&invite=` + getApp()
|
.globalData
|
.userInfo
|
.my_invite_code,
|
imageUrl: this.course.avatar
|
}
|
},
|
methods: {
|
getCourse() {
|
uni.showLoading({
|
title: "加载中..."
|
})
|
uni.vk.callFunction({
|
url: 'client/free-live-course/pub/detail',
|
data: {
|
_id: this.courseId,
|
need_user_info: true
|
},
|
success(res) {
|
// // 富文本图片溢出
|
if (res.data.content)
|
res.data.content = res.data.content.replace(/\<img/gi,
|
'<img style="max-width:100%;height:auto;display:block;" ');
|
|
that.course = res.data
|
that.isBuy = res.has_buy
|
//订阅后获取播放地址 且在播
|
if (res.has_buy && res.data.course_status == 4)
|
that.getPlayInfo()
|
uni.hideLoading()
|
}
|
});
|
},
|
getPlayInfo() {
|
uni.vk.callFunction({
|
url: 'client/free-live-course/kh/play_info',
|
data: {
|
_id: this.courseId
|
},
|
success(res) {
|
// #ifdef H5
|
var video = document.createElement('video')
|
video.id = 'video'
|
video.style = 'width: 100%;height: 210px;'
|
video.setAttribute(
|
'class',
|
'video-js vjs-default-skin vjs-big-play-centered'
|
);
|
video.setAttribute('webkit-playsinline', true);
|
video.setAttribute('playsinline', true);
|
video.setAttribute('x5-video-player-type', 'h5');
|
video.setAttribute('x5-video-player-fullscreen', true);
|
video.setAttribute('x-webkit-airplay', true);
|
this.$refs.video.$el.appendChild(video)
|
this.player_video = videojs('video', {
|
controls: true,
|
autoplay: 'autoplay',
|
preload: 'auto',
|
sources: [{
|
src: res.url,
|
// src: "http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8",
|
type: "application/x-mpegURL"
|
}]
|
})
|
// #endif
|
|
that.videoUrl = res.url
|
}
|
});
|
},
|
buyCourse() {
|
//先创建订单
|
uni.showLoading({
|
title: "处理中..."
|
})
|
uni.vk.callFunction({
|
url: 'client/order/kh/create/free_live_course',
|
data: {
|
_id: this.courseId
|
},
|
success(data) {
|
uni.hideLoading()
|
//再前往支付
|
uni.vk.navigateTo('/pages/payment/payment?order_id=' + data.order_id)
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f2f2f2;
|
}
|
|
|
.play-box {
|
position: relative;
|
width: 100%;
|
height: 210px;
|
// float: left;
|
background-color: rgba(0, 0, 0, 1);
|
}
|
|
.xgplayer-mobile {
|
padding-top: 50% !important;
|
}
|
|
.xgplayer-skin-default .xgplayer-poster {
|
height: 192px !important;
|
overflow: hidden;
|
}
|
|
.play-box>video {
|
width: 100%;
|
height: 210px;
|
float: left;
|
}
|
|
.video-js {
|
width: 100%;
|
height: 210px;
|
}
|
|
.play-box>.no-auth {
|
width: 100%;
|
height: auto;
|
float: left;
|
box-sizing: border-box;
|
padding-left: 30px;
|
padding-right: 30px;
|
}
|
|
.play-box>.no-auth>.btn {
|
display: inline-block;
|
width: 100%;
|
height: 42px;
|
line-height: 42px;
|
text-align: center;
|
background-color: rgba(0, 0, 0, .9);
|
color: rgba(23, 132, 237, 1);
|
border: 1px solid rgba(23, 132, 237, 1);
|
border-radius: 21px;
|
margin-top: 70px;
|
}
|
|
.detail-box {
|
position: relative;
|
width: 100%;
|
background: #FFFFFF;
|
}
|
|
.buy-box {
|
position: fixed;
|
z-index: 999;
|
width: 100%;
|
height: 100rpx;
|
bottom: 60rpx;
|
left: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.buy-btn {
|
padding: 20rpx 40rpx;
|
background: rgba(23, 132, 237, 1);
|
color: #FFFFFF;
|
border-radius: 15rpx;
|
}
|
}
|
|
.course-info {
|
position: relative;
|
width: 100%;
|
min-height: 150rpx;
|
background: #FFFFFF;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 30rpx;
|
|
.play-rate {
|
width: 100%;
|
height: 60rpx;
|
display: flex;
|
justify-content: left;
|
align-items: center;
|
|
text {
|
color: #333333;
|
line-height: 40rpx;
|
}
|
|
.rate-item {
|
width: 80rpx;
|
height: 40rpx;
|
border-radius: 10rpx;
|
line-height: 40rpx;
|
font-size: 20rpx;
|
text-align: center;
|
border: 1rpx solid #ACAFC3;
|
color: #ACAFC3;
|
margin-left: 30rpx;
|
font-weight: bold;
|
}
|
|
.active {
|
color: #025BFF !important;
|
background-color: #CCDEFF !important;
|
border: 1rpx solid #CCDEFF;
|
}
|
}
|
|
.course-title {
|
font-size: 32rpx;
|
font-weight: 800;
|
color: #000000;
|
}
|
|
.course-desc {
|
margin: 20rpx 0;
|
color: #555555;
|
font-size: 28rpx;
|
text-align: justify;
|
overflow: hidden;
|
display: -webkit-box;
|
text-overflow: ellipsis;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
}
|
|
.course-other {
|
color: #B7BACA;
|
font-size: 25rpx;
|
|
text {
|
margin-right: 40rpx;
|
}
|
}
|
}
|
|
.course-tabs {
|
margin-top: 10rpx;
|
position: sticky;
|
top: 0;
|
background: #FFFFFF;
|
z-index: 999;
|
}
|
|
|
.swiper-item-box {
|
position: relative;
|
height: 100vh;
|
|
.swiper-item {
|
border-top: 1px solid #efefef;
|
background: #FFFFFF;
|
position: relative;
|
|
scroll-view {
|
height: 100% !important;
|
}
|
}
|
}
|
|
.course-like {
|
position: absolute;
|
bottom: 30rpx;
|
right: 40rpx;
|
}
|
|
.buy-foot,
|
.comment-bottom-bar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
height: 100rpx;
|
width: 750rpx;
|
background: #FFFFFF;
|
display: flex;
|
align-items: center;
|
padding: 0 30rpx;
|
justify-content: space-between;
|
box-shadow: 0px 0px 10px #B2B5C6;
|
|
.charge {
|
color: #F11C1C;
|
font-size: 36rpx;
|
font-weight: bold;
|
}
|
|
.buy-btn-box {
|
padding: 0 20rpx;
|
display: flex;
|
align-items: center;
|
|
.vip-tip {
|
margin: 0 20rpx;
|
font-size: 30rpx;
|
letter-spacing: 2rpx;
|
font-weight: bold;
|
color: #FE9521;
|
}
|
|
.buy-btn {
|
width: 180rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
text-align: center;
|
border-radius: 35rpx;
|
background-image: linear-gradient(to right, #FF104B, #FF785F);
|
color: #FFFFFF;
|
font-size: 26rpx;
|
font-weight: bold;
|
letter-spacing: 2rpx;
|
}
|
}
|
|
}
|
|
.chapters {
|
padding: 20rpx 30rpx;
|
|
.chapter-name {
|
width: 100%;
|
height: auto;
|
float: left;
|
font-size: 15px;
|
color: #333;
|
font-weight: 700;
|
margin-bottom: 15px;
|
margin-top: 10px;
|
}
|
|
.video-item {
|
width: 100%;
|
height: auto;
|
float: left;
|
display: flex;
|
margin-bottom: 20rpx;
|
line-height: 60rpx;
|
box-sizing: border-box;
|
padding-left: 5px;
|
border-bottom: 1rpx dashed #efefef;
|
|
.active {
|
color: #025BFF !important;
|
font-weight: bold !important;
|
}
|
|
.name {
|
-webkit-box-flex: 1;
|
-webkit-flex: 1;
|
flex: 1;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 14px;
|
color: rgba(51, 51, 51, .8);
|
|
.video-name {
|
font-size: 30rpx;
|
width: 490rpx;
|
}
|
|
.free {
|
padding: 2px 4px;
|
background-color: #025BFF;
|
-webkit-border-radius: 3px;
|
border-radius: 3px;
|
color: #fff;
|
font-size: 12px;
|
margin-right: 5px;
|
}
|
|
.lock-fill {
|
&:before {
|
content: "";
|
}
|
}
|
}
|
|
.duration {
|
width: auto;
|
height: auto;
|
font-size: 12px;
|
margin-left: 10px;
|
color: #999;
|
|
image {
|
position: relative;
|
top: 10rpx;
|
display: inline-block;
|
width: 28rpx;
|
height: 20rpx;
|
margin-left: 20rpx;
|
}
|
}
|
}
|
}
|
|
.comment {
|
display: flex;
|
padding: 30rpx;
|
|
.left {
|
image {
|
width: 64rpx;
|
height: 64rpx;
|
border-radius: 50%;
|
background-color: #f2f2f2;
|
}
|
}
|
|
.right {
|
flex: 1;
|
padding-left: 20rpx;
|
font-size: 30rpx;
|
|
.top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10rpx;
|
|
.name {
|
color: #000000;
|
font-weight: 500;
|
}
|
}
|
|
.content {
|
margin-bottom: 10rpx;
|
}
|
}
|
}
|
|
|
.comment-bottom-bar>.input {
|
flex: 1;
|
}
|
|
.comment-bottom-bar>.input>input {
|
width: 100%;
|
height: 30px;
|
float: left;
|
background: rgba(238, 238, 238, 1);
|
border-radius: 18px;
|
border: 0;
|
box-sizing: border-box;
|
padding: 3px 15px;
|
font-size: 12px;
|
}
|
|
.comment-bottom-bar>.send-button {
|
margin-left: 15px;
|
font-size: 13px;
|
font-weight: 400;
|
color: rgba(204, 204, 204, 1);
|
line-height: 30px;
|
}
|
|
.comment-bottom-bar>.send-button.active {
|
color: rgba(23, 132, 237, 1);
|
font-weight: bold;
|
}
|
</style>
|
