253 lines
6.3 KiB
Vue
253 lines
6.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="nav-bar"></view>
|
||
<view class="upper-info">
|
||
<h4>{{ upperData.title }}</h4>
|
||
<h4>发起人：{{ upperData.user }}</h4>
|
||
<h4 style="font-size: 14px;">学习期限：{{ upperData.startTime + ' ~ ' + upperData.endTime }}</h4>
|
||
</view>
|
||
<view class="lower-material">
|
||
<h4>线上学习</h4>
|
||
<view>
|
||
<view
|
||
class="single-video"
|
||
v-for="(video, videoIndex) in lowerVideo"
|
||
:key="videoIndex"
|
||
@click="jumpVideoPage(video.materialsPath, noticeId, video.id, video.compRate, video.watchLong, video.materialsDuration)"
|
||
>
|
||
<view class="single-lef">
|
||
<view class="single-lef-top">
|
||
<image src="../../static/video.png" mode=""></image>
|
||
视频
|
||
<span>{{ video.formatDuration }}</span>
|
||
</view>
|
||
<view class="single-lef-bot">
|
||
{{ video.materialsName }}
|
||
</view>
|
||
</view>
|
||
<view class="single-rig">
|
||
<u-line-progress :percentage="video.compRate" activeColor="#64A3D8"></u-line-progress>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view
|
||
class="single-file"
|
||
v-for="(file, fileIndex) in lowerFile"
|
||
:key="fileIndex"
|
||
@click="jumpPdfPage(file.materialsPath, file.id)"
|
||
>
|
||
<view class="single-lef">
|
||
<view class="single-lef-top">
|
||
<image src="../../static/file.png" mode=""></image>
|
||
{{ file.materialsPath.split('.')[file.materialsPath.split('.').length - 1] }}文件
|
||
<span>{{ file.materialsDuration }}页</span>
|
||
</view>
|
||
<view class="single-lef-bot">
|
||
{{ file.materialsName }}
|
||
</view>
|
||
</view>
|
||
<view class="single-rig">
|
||
<u-line-progress :percentage="file.compRate" activeColor="#64A3D8"></u-line-progress>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { publicPath } from '../../public';
|
||
export default {
|
||
data() {
|
||
return {
|
||
upperData: {
|
||
title: '',
|
||
user: '',
|
||
startTime: '',
|
||
endTime: ''
|
||
},
|
||
noticeId: '',
|
||
lowerVideo: [],
|
||
lowerFile: [],
|
||
}
|
||
},
|
||
methods: {
|
||
jumpVideoPage (url, noticeId, materialsId, compRate, watchLong, duration) {
|
||
uni.navigateTo({
|
||
url: `/pages/videoPage/videoPage?url=${url}¬iceId=${noticeId}&materialsId=${materialsId}&compRate=${compRate}&watchLong=${watchLong}&duration=${duration}`
|
||
})
|
||
},
|
||
jumpPdfPage (pdfUrl, id) {
|
||
uni.navigateTo({
|
||
url: `/pages/pdfPage/pdfPage?pdfUrl=${pdfUrl}&id=${id}`
|
||
})
|
||
},
|
||
// 转换时分秒
|
||
formatHms (time) {
|
||
|
||
const h = parseInt(time / 3600)
|
||
const minute = parseInt(time / 60 % 60)
|
||
const second = Math.ceil(time % 60)
|
||
const hours = h < 10 ? '0' + h : h
|
||
const formatSecond = second > 59 ? 59 : second
|
||
return `${hours > 0 ? `${hours}时` : ''}${minute < 10 ? '0' + `${minute}分` : `${minute}分`}${formatSecond < 10 ? '0' + `${formatSecond}秒` : `${formatSecond}秒`}`
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
console.log(params);
|
||
this.noticeId = params.noticeId
|
||
},
|
||
onShow() {
|
||
let that = this
|
||
that.lowerFile = []
|
||
that.lowerVideo = []
|
||
// 获取培训页面数据
|
||
uni.request({
|
||
url: publicPath + '/backstage/app/getNoticeTrainData',
|
||
method: 'POST',
|
||
header: {
|
||
'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
|
||
},
|
||
data: {
|
||
userId: uni.getStorageSync('id'),
|
||
id: this.noticeId
|
||
},
|
||
success: (res) => {
|
||
console.log(res);
|
||
if (res.data.code == 200) {
|
||
let data = res.data.data
|
||
that.upperData.title = data.noticeTheme
|
||
that.upperData.user = data.userName
|
||
that.upperData.startTime = data.startTime
|
||
that.upperData.endTime = data.endTime
|
||
for (let i = 0; i < data.materialsList.length; i++) {
|
||
data.materialsList[i].formatDuration = that.formatHms(Math.round(data.materialsList[i].materialsDuration * 60))
|
||
console.log(data.materialsList[i].materialsPath.split('.')[data.materialsList[i].materialsPath.split('.').length - 1]);
|
||
if (data.materialsList[i].materialsPath.split('.')[data.materialsList[i].materialsPath.split('.').length - 1] == 'mp4' || data.materialsList[i].materialsPath.split('.')[data.materialsList[i].materialsPath.split('.').length - 1] == 'MP4') {
|
||
that.lowerVideo.push(data.materialsList[i])
|
||
} else {
|
||
that.lowerFile.push(data.materialsList[i])
|
||
}
|
||
}
|
||
console.log(that.lowerFile, that.lowerVideo);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
body{
|
||
background-color: #F3F4F5;
|
||
}
|
||
.nav-bar{
|
||
width: 100%;
|
||
height: var(--status-bar-height);
|
||
padding-top: var(--status-bar-height);
|
||
}
|
||
.upper-info{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 25rpx;
|
||
background-color: #fff;
|
||
h4{
|
||
font-weight: normal;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
h4:first-child{
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.lower-material{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 25rpx;
|
||
background-color: #fff;
|
||
margin-top: 15rpx;
|
||
h4{
|
||
font-weight: normal;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
view{
|
||
.single-video, .single-file{
|
||
width: 100%;
|
||
height: 150rpx;
|
||
box-sizing: border-box;
|
||
padding: 15rpx 30rpx;
|
||
background-color: #F7F8FA;
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
.single-lef{
|
||
width: 75%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
.single-lef-top{
|
||
width: 100%;
|
||
display: flex;
|
||
font-size: 12px;
|
||
image{
|
||
width: 6%;
|
||
height: 100%;
|
||
margin-right: 10rpx;
|
||
}
|
||
span{
|
||
padding-left: 15rpx;
|
||
}
|
||
}
|
||
.single-lef-bot{
|
||
width: 100%;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
.single-rig{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// .bottom{
|
||
// width: 100%;
|
||
// height: 100rpx;
|
||
// position: fixed;
|
||
// background-color: #fff;
|
||
// left: 0;
|
||
// bottom: 0;
|
||
// display: flex;
|
||
// justify-content: right;
|
||
// .lef{
|
||
// width: 50%;
|
||
// height: 100%;
|
||
// }
|
||
// .rig{
|
||
// font-size: 14px;
|
||
// flex: 1;
|
||
// display: flex;
|
||
// justify-content: space-around;
|
||
// align-items: center;
|
||
// button{
|
||
// background-color: #007AFB;
|
||
// color: #fff;
|
||
// font-size: 14px;
|
||
// }
|
||
// uni-button{
|
||
// line-height: 2;
|
||
// }
|
||
// }
|
||
// }
|
||
.video-pop{
|
||
width: 600rpx;
|
||
height: 700rpx;
|
||
background-color: #fff;
|
||
}
|
||
</style>
|