<template>
|
<view class="train_details">
|
<view class="train_details_list">
|
<view class="train_details_card">
|
<view class="train_details_header">
|
<view class="train_details_text">{{detailsList.secureName}}</view>
|
<view class="train_details_btns" v-if="showBtns === '1'">{{showBtns === '1'?'已完成':''}}</view>
|
</view>
|
<view class="train_details_main">
|
<view class="train_details_phone">
|
<scroll-view scroll-x="true" class="content_file">
|
<view class="file_item" v-for="(item,index) in detailsList.securePathDtos" :key="index" @click="lookFile(item)">
|
<image src="../../static/e.jpg" class="file_image" v-if="item.securePathVideo.split('.')[1] == 'xls'||item.securePathVideo.split('.')[1] == 'xlsx'"></image>
|
<image src="../../static/p.jpg" class="file_image" v-if="item.securePathVideo.split('.')[1] == 'pdf'"></image>
|
<image src="../../static/ppt.png" class="file_image" v-if="item.securePathVideo.split('.')[1] == 'ppt'||item.securePathVideo.split('.')[1] == 'pptx'"></image>
|
<image src="../../static/w.jpg" class="file_image" v-if="item.securePathVideo.split('.')[1] == 'doc'||item.securePathVideo.split('.')[1] == 'docx'"></image>
|
<view class="file_label">{{item.securePathVideoName}}</view>
|
</view>
|
</scroll-view>
|
<view class="train_details_times">培训日期：<span>{{detailsList.secureTime}}</span></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
data(){
|
return{
|
showBtns:null,
|
detailsList:[],//培训详情
|
}
|
},
|
onLoad(option) {
|
this.showBtns = option.stateSafe
|
if(option.stateSafe !=='1'){
|
this.overClick(option.secureId)
|
}
|
this.getAllDatas(option.secureId)
|
},
|
methods:{
|
// 预览文件
|
lookFile(item) {
|
uni.showLoading({
|
title: '加载中...',
|
mask: true
|
})
|
uni.downloadFile({
|
url: `https://szpipe.thhy-tj.com/${item.securePathVideo}`,
|
success: function (res) {
|
var filePath = res.tempFilePath;
|
uni.hideLoading()
|
uni.openDocument({
|
filePath: filePath,
|
showMenu:true,
|
fileType:item.securePathVideo.split('.')[1],
|
success: function (res) {
|
console.log('打开文档成功');
|
}
|
});
|
}
|
});
|
},
|
//进行点击确认
|
overClick(val){
|
this.$api.labourSystem.getOverState({secureId:val})
|
},
|
//回显数据
|
getAllDatas(val){
|
this.$api.labourSystem.getTrainingInfo({secureId:val}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.detailsList = res.data
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.train_details{
|
height:100vh;
|
background-color: #F6F6F6;
|
.train_details_list{
|
padding: 10px 15px;
|
.train_details_card{
|
// height: 30vh;
|
margin-bottom: 15px;
|
background-color: #FFFFFF;
|
border-radius: 6px;
|
padding-bottom: 10px;
|
|
.train_details_header{
|
height: 8vh;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0px 18px;
|
border-bottom: 1px solid #F7F7F7;
|
|
.train_details_text{
|
font-size: 17px;
|
position: relative;
|
&::before{
|
width: 2px;
|
height: 16px;
|
content: '';
|
position: absolute;
|
top: 2px;
|
left: -8px;
|
background-color: #1976FF;
|
}
|
}
|
.train_details_btns{
|
color:#FFFFFF ;
|
background-color: #1977FF;
|
padding: 3px 15px;
|
border-radius: 59px;
|
}
|
}
|
.train_details_main{
|
height: calc(100% - 96px);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
padding: 15px 15px 20px;
|
position: relative;
|
|
.train_details_phone{
|
width: 100%;
|
height: 127px;
|
.content_file {
|
width: 100%;
|
height: 120px;
|
display: flex;
|
flex-wrap: nowrap;
|
white-space: nowrap;
|
|
.file_item {
|
// width: 90px;
|
height: calc(100% - 8px);
|
margin: 4px;
|
display: inline-block;
|
margin-right: 24px;
|
|
.file_image {
|
width: 90px;
|
height: calc(100% - 20px);
|
}
|
|
.file_label {
|
width: 100%;
|
height: 20px;
|
font-size: 3.5vw;
|
// white-space: nowrap;
|
// overflow: hidden;
|
// text-overflow: ellipsis;
|
display: block;
|
}
|
}
|
}
|
.train_details_times{
|
width: 91%;
|
border-bottom-left-radius: 6px;
|
border-bottom-right-radius: 6px;
|
position: absolute;
|
bottom: 0px;
|
margin-top: 30px;
|
// background-color: #000000;
|
display: flex;
|
align-items: center;
|
span{
|
// color:#FFFFFF ;
|
margin-left: 28px;
|
position: relative;
|
&::before{
|
content: '';
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 3px;
|
left: -19px;
|
background: url('../../static/time.png') no-repeat;
|
}
|
}
|
}
|
}
|
|
}
|
}
|
}
|
}
|
</style>
|
