425 lines
13 KiB
Vue
425 lines
13 KiB
Vue
<template>
|
||
<view class="app" v-if="list">
|
||
<image class="topimage" v-if='!videoshow' :src="baseurl + list.trainingItemPosterUrl" mode=""></image>
|
||
<video class="topimage" id="video" v-if="videoshow" :src="baseurl+videoitem.itemDirectoryUrl"
|
||
@timeupdate='videotimeupdate' :initial-time='videoitem.watchTime' @error='videoerror' :custom-cache="false"
|
||
@play='videoplays' @pause='videopause' @ended='videoended'></video>
|
||
<view class="title">
|
||
{{list.trainingItemTitle}}
|
||
</view>
|
||
<view class="border"></view>
|
||
<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="change" font-size='34' bar-height='3'>
|
||
</u-tabs>
|
||
<view class="detail" v-if="tabcurrent==0">
|
||
{{list.trainingItemDetails}}
|
||
</view>
|
||
<view class="directory" v-if="tabcurrent==1">
|
||
<view class="item" v-for="(item,index) in list.trainingItemDirectoryList" :key="index">
|
||
<view class="text">
|
||
<span class='DirectoryName'>{{item.itemDirectoryName?item.itemDirectoryName:''}}</span>
|
||
<span class='texttitle'>{{item.itemDirectoryTitle?item.itemDirectoryTitle:''}}</span>
|
||
</view>
|
||
<view class="Introduce">
|
||
{{item.itemDirectoryIntroduce?item.itemDirectoryIntroduce:''}}
|
||
</view>
|
||
<view class="play" v-if="!item.trainingOrderStatus" @tap='novideo'>
|
||
开始播放
|
||
</view>
|
||
<view class="" v-if="item.trainingOrderStatus=='PAY'">
|
||
<view class="play" @tap='videoplay(item)'
|
||
:style="item.itemDirectoryWatchStatus=='NOT_WATCHED'?'background-color: #3D7DCA;color:#fff':''"
|
||
v-if="item.itemDirectoryWatchStatus=='NOT_WATCHED'&&!item.videoshow">
|
||
开始播放
|
||
</view>
|
||
<view class="play"
|
||
:style="item.itemDirectoryWatchStatus=='NOT_WATCHED'?'background-color: #3D7DCA;color:#fff':''"
|
||
v-if="item.itemDirectoryWatchStatus=='NOT_WATCHED'&&item.videoshow">
|
||
<image src="../../static/bofang.png" mode=""></image>
|
||
<view class="">
|
||
播放中
|
||
</view>
|
||
</view>
|
||
<view class="play" @tap='videoplay(item)'
|
||
:style="item.itemDirectoryWatchStatus=='WATCHED'?'background-color: #E3EAF5;color:#3D7DCA':''"
|
||
v-if="item.itemDirectoryWatchStatus=='WATCHED'&&!item.videoshow">
|
||
继续播放
|
||
</view>
|
||
<view class="play"
|
||
:style="item.itemDirectoryWatchStatus=='WATCHED'?'background-color: #3D7DCA;color:#fff':''"
|
||
v-if="item.itemDirectoryWatchStatus=='WATCHED'&&item.videoshow">
|
||
<image src="../../static/bofang.png" mode=""></image>
|
||
<view class="">
|
||
播放中
|
||
</view>
|
||
</view>
|
||
<view class="play" @tap='videoplay(item)'
|
||
:style="item.itemDirectoryWatchStatus=='FINISHED_READING'?'background-color: #E6E6E6;color:#76777B':''"
|
||
v-if="item.itemDirectoryWatchStatus=='FINISHED_READING'&&!item.videoshow">
|
||
已看完
|
||
</view>
|
||
<view class="play"
|
||
:style="item.itemDirectoryWatchStatus=='FINISHED_READING'?'background-color: #3D7DCA;color:#fff':''"
|
||
v-if="item.itemDirectoryWatchStatus=='FINISHED_READING'&&item.videoshow">
|
||
<image src="../../static/bofang.png" mode=""></image>
|
||
<view class="">
|
||
播放中
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-popup v-model="videoshow" mode="center" closeable @close='videoshowfalse'>
|
||
</u-popup> -->
|
||
<u-toast ref="uToast" />
|
||
<view class="bottomitem" v-if="bottombuyshow&&list.trainingOrderDetailsBuy=='NOT_BUY'">
|
||
<view class="price">
|
||
￥{{list.trainingItemPrice?list.trainingItemPrice:0}}
|
||
</view>
|
||
<view class="buy" @tap='buy'>
|
||
购买
|
||
</view>
|
||
</view>
|
||
<u-popup v-model="buyshow" mode='bottom' height='500' class='popup' safe-area-inset-bottom>
|
||
<view class="popuptitle">请选择支付方式</view>
|
||
<view class="buyselect">
|
||
<image src="../../static/wechat.png" mode=""></image>
|
||
<view class="text">
|
||
微信支付
|
||
</view>
|
||
</view>
|
||
<view class="buybtn" @tap='tobuy'>
|
||
确认支付{{list.trainingItemPrice?list.trainingItemPrice:0}}元
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
<view class="" v-else style="padding-top: 100rpx;">
|
||
<u-empty text="暂无内容" mode="list" icon-size='240' font-size='32'></u-empty>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import baseurl from '@/api/baseurl.js'
|
||
import {
|
||
selectNurseAppletPersonTrainingItemDetailsList,
|
||
insertTrainingItemWatchRecord,
|
||
getTrainingItemWatchRecord
|
||
} from '@/api/Videolearning/index.js'
|
||
import {
|
||
trainingItemOrder,
|
||
appletTrainingOrderPay
|
||
} from '@/api/learning/index.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: undefined,
|
||
baseurl: undefined,
|
||
nurseStationPersonId: undefined,
|
||
tabcurrent: 0, //tabsindex
|
||
tablist: [{ //tabs的list
|
||
name: '详情'
|
||
}, {
|
||
name: '目录'
|
||
}],
|
||
trainingItemId: {}, //上个页面id
|
||
videoshow: false, //视频开关
|
||
videoitem: {
|
||
watchTime: 0,
|
||
}, //视频对象
|
||
videoContext: null,
|
||
videoerroshow: true,
|
||
bottombuyshow: false, //下面的购买divcss
|
||
buyshow: false, //购买弹框
|
||
};
|
||
},
|
||
onUnload() {
|
||
if (this.videoitem.itemDirectoryCode) {
|
||
if (this.videoerroshow) {
|
||
if (this.videoitem.watchTime) {
|
||
this.videoitem.watchTime = this.formatSeconds(this.videoitem.watchTime)
|
||
}
|
||
insertTrainingItemWatchRecord(this.videoitem).then(res => {})
|
||
}
|
||
}
|
||
},
|
||
// onHide() {
|
||
// var that = this
|
||
// uni.getSystemInfo({
|
||
// success: function(res) {
|
||
// if (res.platform == 'ios') {
|
||
// that.videoitem = {
|
||
// watchTime: 0
|
||
// }
|
||
// that.info();
|
||
// that.videoshow = false
|
||
// } else {}
|
||
// }
|
||
// });
|
||
// },
|
||
onLaunch: function() {
|
||
// 锁定横屏
|
||
// plus.screen.lockOrientation("landscape-primary");
|
||
// 锁定竖屏
|
||
plus.screen.lockOrientation("portrait-primary");
|
||
},
|
||
methods: {
|
||
//购买
|
||
tobuy() {
|
||
var that = this
|
||
const nurseStationId = uni.getStorageSync('nurseStationId');
|
||
if (nurseStationId) {
|
||
var obj = {
|
||
"trainingItemId": undefined,
|
||
"nurseStationId": undefined,
|
||
"nurseStationPersonId": undefined,
|
||
"trainingOrderAmount": undefined,
|
||
"nursePersonName": undefined,
|
||
}
|
||
obj.trainingItemId = this.list.trainingItemId
|
||
obj.nurseStationId = uni.getStorageSync('nurseStationId');
|
||
obj.nurseStationPersonId = this.nurseStationPersonId
|
||
obj.nursePersonName = uni.getStorageSync('nursePersonName');
|
||
obj.trainingOrderAmount = this.list.trainingItemPrice
|
||
trainingItemOrder(obj).then(res => {
|
||
if (res.code == 200) {
|
||
if (res.data.trainingOrderAmount > 0) {
|
||
let objs = {
|
||
"openid": uni.getStorageSync('openid'),
|
||
"nurseStationPersonId": res.data.nurseStationPersonId,
|
||
"orderNo": res.data.trainingOrderNo,
|
||
"payType": "WECHAT_PAY",
|
||
"orderChannel": "WECHAT_APPLET",
|
||
"buySource": "TRAINING",
|
||
"paymentPrice": res.data.trainingOrderAmount,
|
||
}
|
||
appletTrainingOrderPay(objs).then(response => {
|
||
if (response.code == 200) {} else {
|
||
this.buyshow = false
|
||
this.$refs.uToast.show({
|
||
title: response.msg,
|
||
type: 'error',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
that.buyshow = false
|
||
that.bottombuyshow = false
|
||
that.info();
|
||
}
|
||
} else {
|
||
this.buyshow = false
|
||
this.$refs.uToast.show({
|
||
title: res.msg,
|
||
type: 'error',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
that.buyshow = false
|
||
that.$refs.uToast.show({
|
||
title: '请您重新登录',
|
||
type: 'error',
|
||
duration: 1500,
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
//打开购买弹框
|
||
buy() {
|
||
this.buyshow = true
|
||
},
|
||
//播放到末尾
|
||
videoended(e) {
|
||
this.videoContext.stop()
|
||
if (this.videoerroshow) {
|
||
if (this.videoitem.watchTime) {
|
||
this.videoitem.watchTime = this.formatSeconds(this.videoitem.watchTime)
|
||
}
|
||
insertTrainingItemWatchRecord(this.videoitem).then(res => {
|
||
this.videoitem.watchTime = 0
|
||
this.videoitem.videoshow = false
|
||
this.videoshow = false
|
||
this.videoContext = undefined
|
||
this.videoitem = {
|
||
watchTime: 0
|
||
}
|
||
this.info();
|
||
})
|
||
}
|
||
},
|
||
//播放进度变化
|
||
videotimeupdate(e) {
|
||
//e.detail.currentTime是已经播放了多久，e.detail.duration是该视频多长
|
||
this.videoitem.watchTime = e.detail.currentTime
|
||
},
|
||
//关闭播放弹出框
|
||
videopause() {
|
||
// if (this.videoerroshow) {
|
||
// if (this.videoitem.watchTime) {
|
||
// this.videoitem.watchTime = this.formatSeconds(this.videoitem.watchTime)
|
||
// }
|
||
// insertTrainingItemWatchRecord(this.videoitem).then(res => {
|
||
// this.videoitem.watchTime = 0
|
||
// this.info();
|
||
// })
|
||
// }
|
||
},
|
||
//视频播放出错
|
||
videoerror(e) {
|
||
this.videoitem = {
|
||
watchTime: 0
|
||
}
|
||
this.videoerroshow = false
|
||
this.$refs.uToast.show({
|
||
title: '暂无视频',
|
||
type: 'error',
|
||
duration: '2000'
|
||
})
|
||
this.info();
|
||
this.videoshow = false
|
||
},
|
||
//视频播放
|
||
videoplays() {
|
||
var that = this
|
||
if (that.videoitem.watchTime) {
|
||
that.videoContext.seek(that.videoitem.watchTime)
|
||
}
|
||
},
|
||
//视频播放
|
||
videoplay(item) {
|
||
console.log(item)
|
||
if (this.videoContext) {
|
||
this.videoshow = false
|
||
this.videoContext.stop()
|
||
if (this.videoerroshow) {
|
||
if (this.videoitem.watchTime == 0) {
|
||
this.videoitem.watchTime = '00:00:00'
|
||
} else {
|
||
this.videoitem.watchTime = this.formatSeconds(this.videoitem.watchTime)
|
||
}
|
||
insertTrainingItemWatchRecord(this.videoitem).then(res => {})
|
||
}
|
||
}
|
||
uni.showLoading({
|
||
title: '获取视频中'
|
||
});
|
||
setTimeout(el => {
|
||
this.info();
|
||
this.videoerroshow = true
|
||
if (item.itemDirectoryUrl) {
|
||
if (!item.watchTime) {
|
||
item.watchTime = 0
|
||
}
|
||
this.list.trainingItemDirectoryList.forEach(e => {
|
||
e.videoshow = false
|
||
})
|
||
item.trainingItemId = this.list.trainingItemId
|
||
item.nurseStationPersonId = this.nurseStationPersonId
|
||
item.nursePersonName = uni.getStorageSync('nursePersonName')
|
||
item.trainingItemTitle = this.list.trainingItemTitle
|
||
if (item.itemDirectoryWatchStatus == 'WATCHED') {
|
||
getTrainingItemWatchRecord(item.trainingOrderId, item.trainingItemId, item
|
||
.trainingItemDirectoryId, item.nurseStationPersonId).then(res => {
|
||
if (res.code == 200) {
|
||
if (res.data.watchTime) {
|
||
item.watchTime = res.data.watchTime
|
||
item.watchTime = this.formatsecond(item.watchTime)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
this.videoitem = item
|
||
this.videoitem.videoshow = true
|
||
this.videoshow = true
|
||
this.videoContext = uni.createVideoContext('video', this)
|
||
uni.hideLoading();
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: '暂无视频',
|
||
type: 'error',
|
||
duration: '2000'
|
||
})
|
||
uni.hideLoading();
|
||
}
|
||
}, 500)
|
||
},
|
||
info() {
|
||
selectNurseAppletPersonTrainingItemDetailsList(this.trainingItemId, this.nurseStationPersonId).then(
|
||
res => {
|
||
this.list = res.data
|
||
if (this.videoitem.itemDirectoryCode) {
|
||
this.list.trainingItemDirectoryList.forEach(e => {
|
||
if (e.itemDirectoryCode == this.videoitem.itemDirectoryCode) {
|
||
e.videoshow = true
|
||
} else {
|
||
e.videoshow = false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
novideo() {
|
||
this.$refs.uToast.show({
|
||
title: '您未购买',
|
||
type: 'error',
|
||
duration: '2000'
|
||
})
|
||
},
|
||
//点击tabs
|
||
change(index) {
|
||
this.tabcurrent = index;
|
||
},
|
||
//时分秒转秒
|
||
formatsecond(value) {
|
||
value = value.split(':')
|
||
var number = 0
|
||
value.forEach(e => {
|
||
e = Number(e)
|
||
})
|
||
value[0] = value[0] * 24 * 60
|
||
value[1] = value[1] * 60
|
||
value.forEach(e => {
|
||
e = Number(e)
|
||
if (e > 0) {
|
||
number = number + e
|
||
}
|
||
})
|
||
return number
|
||
},
|
||
//秒转时分秒
|
||
formatSeconds(value) {
|
||
let result = parseInt(value)
|
||
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
|
||
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result /
|
||
60 % 60));
|
||
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
|
||
let res = '';
|
||
res += `${h}:`;
|
||
res += `${m}:`;
|
||
res += `${s}`;
|
||
return res;
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
const that = this
|
||
this.baseurl = baseurl
|
||
this.videoitem = {
|
||
watchTime: 0
|
||
}
|
||
this.trainingItemId = options.trainingItemId
|
||
const value = uni.getStorageSync('nursePersonId');
|
||
if (value) {
|
||
that.nurseStationPersonId = value
|
||
that.info();
|
||
} else {}
|
||
if (options.trainingItemType) {
|
||
this.bottombuyshow = true
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "./Videolearning.scss";
|
||
</style>
|