302 lines
7.3 KiB
Vue
302 lines
7.3 KiB
Vue
<template>
|
||
<view class="app">
|
||
<image class="topimage" :src="baseurl + list.trainingItemPosterUrl" mode=""></image>
|
||
<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.trainingOrderItemDirectoryList" :key="index">
|
||
<view class="text">
|
||
<span class='DirectoryName'>{{item.itemDirectoryName}}</span>
|
||
<span class='texttitle'>{{item.itemDirectoryTitle}}</span>
|
||
</view>
|
||
<view class="Introduce">
|
||
{{item.itemDirectoryIntroduce}}
|
||
</view>
|
||
<view class="play" style="background-color: #3D7DCA;color:#fff" v-if="!list.trainingOrderStatus"
|
||
@tap='videoplay(item)'>
|
||
开始播放
|
||
</view>
|
||
<view class="" v-else>
|
||
<view class="play" @tap='videoplay(item)'
|
||
:style="item.itemDirectoryWatchStatus=='NOT_WATCHED'?'background-color: #3D7DCA;color:#fff':''"
|
||
v-if="item.itemDirectoryWatchStatus=='NOT_WATCHED'">
|
||
开始播放
|
||
</view>
|
||
<view class="play"
|
||
:style="item.itemDirectoryWatchStatus=='WATCHED'?'background-color: #4271B9;color:#3D7DCA':''"
|
||
v-if="item.itemDirectoryWatchStatus=='WATCHED'">
|
||
继续播放
|
||
</view>
|
||
<view class="play"
|
||
:style="item.itemDirectoryWatchStatus=='FINISHED_READING'?'background-color: #E6E6E6;color:#76777B':''"
|
||
v-if="item.itemDirectoryWatchStatus=='FINISHED_READING'">
|
||
已看完
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom" v-if="!list.trainingOrderStatus">
|
||
<view class="price">
|
||
￥{{list.trainingItemPrice}}
|
||
</view>
|
||
<view class="buy">
|
||
购买
|
||
</view>
|
||
</view>
|
||
<u-popup v-model="videoshow" mode="center" closeable @close='videoshowfalse'>
|
||
<view>
|
||
<video :src="baseurl+videoitem.itemDirectoryUrl" @timeupdate='videotimeupdate'
|
||
:initial-time='videoitem.watchTime'></video>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import baseurl from '@/api/baseurl.js'
|
||
import {
|
||
insertTrainingItemWatchRecord,
|
||
getTrainingItemWatchRecord
|
||
} from '@/api/Videolearningdetails/index.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
baseurl: undefined,
|
||
nurseStationPersonId: undefined,
|
||
tabcurrent: 0, //tabsindex
|
||
tablist: [{ //tabs的list
|
||
name: '详情'
|
||
}, {
|
||
name: '目录'
|
||
}],
|
||
list: {}, //页面数据
|
||
videoshow: false, //视频开关
|
||
videoitem: {
|
||
watchTime: 0,
|
||
}, //视频对象
|
||
};
|
||
},
|
||
methods: {
|
||
//播放进度变化
|
||
videotimeupdate(e) {
|
||
//e.detail.currentTime是已经播放了多久，e.detail.duration是该视频多长
|
||
this.videoitem.watchTime = e.detail.currentTime
|
||
},
|
||
//关闭播放弹出框
|
||
videoshowfalse() {
|
||
this.videoitem.watchTime = this.formatSeconds(this.videoitem.watchTime)
|
||
insertTrainingItemWatchRecord(this.videoitem).then(res => {})
|
||
},
|
||
//视频播放
|
||
videoplay(item) {
|
||
if (!item.watchTime) {
|
||
this.videoitem.watchTime = 0
|
||
}
|
||
this.videoitem = item
|
||
this.videoitem.trainingOrderId = this.list.trainingOrderId
|
||
this.videoitem.trainingItemId = this.list.trainingItemId
|
||
// this.videoitem.nurseStationPersonId = this.nurseStationPersonId
|
||
this.videoitem.nurseStationPersonId = 61
|
||
getTrainingItemWatchRecord(this.videoitem.trainingOrderId, this.videoitem.trainingItemId, this.videoitem
|
||
.trainingItemDirectoryId, this.videoitem.nurseStationPersonId).then(res => {
|
||
if (res.code == 200) {
|
||
if (res.data.watchTime) {
|
||
this.videoitem.watchTime = res.data.watchTime
|
||
this.videoitem.watchTime = this.formatsecond(this.videoitem.watchTime)
|
||
}
|
||
this.videoshow = true
|
||
}
|
||
})
|
||
},
|
||
//点击tabs
|
||
change(index) {
|
||
this.tabcurrent = index;
|
||
},
|
||
//时分秒转秒
|
||
formatsecond(value) {
|
||
value = value.split(':')
|
||
value.forEach(e => {
|
||
e = Number(e)
|
||
})
|
||
value[0] = value[0] * 24 * 60
|
||
value[1] = value[1] * 60
|
||
value = value[0] + value[1] + value[2]
|
||
return value
|
||
},
|
||
//秒转时分秒
|
||
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) {
|
||
this.baseurl = baseurl
|
||
this.list = JSON.parse(options.list)
|
||
},
|
||
onShow() {
|
||
const that = this
|
||
const value = uni.getStorageSync('nursePersonId');
|
||
if (value) {
|
||
that.nurseStationPersonId = value
|
||
} else {}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
width: 96%;
|
||
padding: 0;
|
||
margin: 15rpx auto;
|
||
color: #666666;
|
||
background-color: #fff;
|
||
|
||
.directory {
|
||
padding-bottom: 420rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
width: 96%;
|
||
margin: 0 auto;
|
||
padding-bottom: 35rpx;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
color: #888787;
|
||
|
||
.play {
|
||
font-size: 24rpx;
|
||
width: 141rpx;
|
||
height: 52rpx;
|
||
background: #E6E6E6;
|
||
border-radius: 5rpx;
|
||
line-height: 52rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.Introduce {
|
||
width: 300rpx;
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
margin: 18rpx 0 0 176rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 40rpx;
|
||
|
||
.DirectoryName {
|
||
display: inline-block;
|
||
width: 176rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.texttitle {
|
||
display: inline-block;
|
||
width: 300rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
height: 160rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 1rpx 21rpx 0rpx rgba(204, 204, 204, 0.75);
|
||
position: fixed;
|
||
bottom: 0;
|
||
|
||
.buy {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
background: #4271B9;
|
||
border-radius: 5rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
position: absolute;
|
||
right: 60rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.price {
|
||
font-size: 42rpx;
|
||
font-weight: 500;
|
||
color: #EA706A;
|
||
line-height: 120rpx;
|
||
position: absolute;
|
||
left: 44rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
width: 90%;
|
||
margin: 40rpx auto 0;
|
||
font-size: 32rpx;
|
||
padding-bottom: 420rpx;
|
||
}
|
||
|
||
::v-deep .u-tabs {
|
||
width: 50% !important;
|
||
}
|
||
|
||
.border {
|
||
width: 94%;
|
||
margin: 40rpx auto;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
}
|
||
|
||
.time {
|
||
font-size: 30rpx;
|
||
margin: 21rpx 0 0 20rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 38rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
line-height: 36rpx;
|
||
margin: 36rpx 0 0 20rpx;
|
||
}
|
||
|
||
.topimage {
|
||
display: block;
|
||
width: 100%;
|
||
height: 407rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
</style>
|