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>
|