YNUtdPlatform/pages/realName/workbench/exam/train.vue

329 lines
9.5 KiB
Vue
Raw Normal View History

<template>
<view class="page">
<u-navbar class="u-navbar" :title="pageTitle" placeholder @leftClick="leftClick" leftIconColor="#fff" bgColor="#00337A" rightIcon="list" @rightClick="rightClick" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
<view class="u-nav-slot" slot="right">
<image src="../../../../static/realName/safety_tips.png" style="width: 48rpx;height: 48rpx;" mode="" ></image>
</view>
</u-navbar>
<scroll-view class="scroll-view" scroll-x="true">
<view class="scroll-view-item" :class="hIndex == 1 ? 'active' : ''" @click="hIndex = 1">
安全规范
<view class="activeLine" v-if="hIndex == 1"></view>
</view>
<view class="scroll-view-item" :class="hIndex == 2 ? 'active' : ''" @click="hIndex = 2">
实操培训
<view class="activeLine" v-if="hIndex == 2"></view>
</view>
<view class="scroll-view-item" :class="hIndex == 3 ? 'active' : ''" @click="hIndex = 3">
理论培训
<view class="activeLine" v-if="hIndex == 3"></view>
</view>
<view class="scroll-view-item" :class="hIndex == 4 ? 'active' : ''" @click="hIndex = 4">
准军事化
<view class="activeLine" v-if="hIndex == 4"></view>
</view>
</scroll-view>
<scroll-view class="content" scroll-y="true">
<view class="view-box">
<view class="title-view">
培训
</view>
<view class="exam-view">
<view class="exam-item" v-for="(item,index) in trainBean" :key="index">
<view style="width: 70%;display: flex;align-items: center;word-break: break-all;">
<view style="margin-right: 20rpx;">
<image src="../../../../static/realName/pdf_icon.png" style="width: 48rpx;height: 48rpx;" mode="" ></image>
</view>
<view>
<view style="font-weight: bold;">{{item.trainFileName}}</view>
<view style="color: #06E7A3;font-weight: bold;" v-if="!item.isFinish">未开始</view>
<view style="color: #06E7A3;font-weight: bold;" v-if="item.isFinish==1">完成</view>
<view style="color: #06E7A3;font-weight: bold;" v-if="item.isFinish==0">进行中</view>
</view>
</view>
<view class="exam-button" v-if="!item.isFinish" @click="goStudy(item)">开始学习</view>
<view class="exam-button" v-if="item.isFinish==1" @click="goStudy(item)">学习</view>
<view class="exam-button" v-if="item.isFinish==0" @click="goStudy(item)">继续学习</view>
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
考试
</view>
<view class="exam-view">
<view class="exam-item">
<view style="width: 62%;display: flex;align-items: center;word-break: break-all;">
<view style="margin-right: 20rpx;">
<image src="../../../../static/realName/exam_icon.png" style="width: 48rpx;height: 48rpx;" mode="" ></image>
</view>
<view >
<view style="font-weight: bold;">{{examBean.name}}</view>
<view style="color: #06E7A3;font-weight: bold;" v-if="!examBean.examResult">未开始({{examBean.examScore||0}})</view>
<view style="color: red;font-weight: bold;" v-if="examBean.examResult==0">未通过({{examBean.examScore||0}})</view>
<view style="color: #06E7A3;font-weight: bold;" v-if="examBean.examResult==1">已通过({{examBean.examScore||0}})</view>
</view>
</view>
<view style="width: 38%;display: flex;align-items: center;justify-content: end;">
<view class="exam-button" v-if="examBean.examResult==0||examBean.examResult==1" @click="goExamDetail(examBean)">详情</view>
<view class="exam-button" v-if="!examBean.examResult" @click="goExam(examBean)">开始考试</view>
<view class="exam-button" v-if="examBean.examResult==0" @click="goExam(examBean)">重新考试</view>
<view class="exam-button" v-if="examBean.examResult==1" @click="goExam(examBean)">再次考试</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 弹窗 -->
<u-popup :show="showPopup" mode="center" @close="closePopup">
<view style="width:650rpx;height: 100%;position: relative;background-color: #fff;">
<view class="popup-header">
<view style="width: 5%;height: 80rpx;"></view>
<view style="width: 85%;height: 80rpx;line-height: 80rpx;font-weight: bold;font-size: 32rpx;text-align: center;">提示</view>
<u-icon style="width: 10%;" name="close" color="#000" size="24" @click="closePopup"></u-icon>
</view>
<scroll-view class="popup-content" scroll-y="true">
<view>1.人员出场更换工程后需重新培训考试全部内容</view>
<view>2.培训考试结果有效期为1年</view>
<view>3.保命教育准军事化可以在在场的情况下长期培训考试更新数据</view>
<view>4.需要在系统先入场绑定工程后开始培训及考试</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
import config from '@/config'
export default {
data() {
return {
idNumber:uni.getStorageSync('realNameUser').idNumber,
pageTitle:'安全教育培训',
trainInfo:{},
hIndex:1,
types:"安全考试",
foreignId:"",
trainBean:[],
examBean:{},
showPopup:false
}
},
watch: {
hIndex: function(newVal, oldVal) {
if(newVal == 1) {
this.types="安全考试";
this.foreignId=this.trainInfo.examWorkTypeId;
this.getTrainList()
}else if(newVal == 2) {
this.types="保命教育-实操";
this.foreignId=this.trainInfo.examProTypeId;
this.getTrainList()
}else if(newVal == 3) {
this.types="保命教育";
this.foreignId=this.trainInfo.examProTypeId;
this.getTrainList()
}else if(newVal == 4) {
this.types="准军事化(专业)";
this.foreignId=this.trainInfo.examProTypeId;
this.getTrainList()
}
}
},
onLoad(option) {
this.trainInfo=JSON.parse(option.trainInfo);
this.foreignId=this.trainInfo.examWorkTypeId;
this.types="安全考试";
2024-09-29 10:19:21 +08:00
console.log('?? ~ realNameUser:',this.trainInfo)
this.getTrainList()
},
onShow() {
this.getTrainList()
},
methods: {
getTrainList(){
let param={
idNumber:this.idNumber,
foreignId:this.foreignId,
type:this.types,
proId:this.trainInfo.proId,
einTime:this.trainInfo.einTime
}
console.log(param)
uni.request({
url: config.realExamUrl+'/mergeTrainExam/selectTrainExamList',
method: 'post',
data: param,
header: {
'Content-Type': 'application/json',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
console.log(res)
res = res.data;
if(res.code==200){
this.trainBean=res.data.trainBean;
this.examBean=res.data.examBean;
}
},
fail: err => {
console.log(err)
}
})
},
goStudy(item){
console.log(item)
let index=item.trainFileName.lastIndexOf(".");
let ext=item.trainFileName.substr(index+1);
console.log(ext)
if(ext=='mp4'){
uni.navigateTo({
url: `/pages/realName/workbench/exam/trainVideo?pdfInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}`
})
}else{
uni.navigateTo({
url: `/pages/realName/workbench/exam/trainPdf?pdfInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}`
})
}
},
goExam(item){
console.log(item)
uni.navigateTo({
url: `/pages/realName/workbench/exam/examInfo?examInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}`
})
},
goExamDetail(item){
console.log(item)
uni.navigateTo({
url: `/pages/realName/workbench/exam/examDetail?examInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}&isView=true`
})
},
rightClick(){
this.showPopup=true;
},
closePopup(){
this.showPopup=false;
},
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
}
},
}
</script>
<style lang="scss">
/deep/ .uni-stat__select {
width:420rpx !important;
.uni-select__input-text {
width: 420rpx !important;
}
}
.scroll-view {
white-space: nowrap;
width: 100%;
background: #FFF;
}
.scroll-view-item {
display: inline-block;
width: 160rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
.activeLine{
background: #00337A;
border-radius: 10upx;
width: 160rpx;
height: 6upx;
}
}
.active {
color: #333;
font-weight: bolder;
font-size: 32rpx;
}
.popup-header{
width: 100%;
height: 80rpx;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
.popup-content{
width: 92%;
padding: 0 20rpx;
height: 16vh;
font-weight: 600;
background-color: #fff;
}
.page {
width: 100vw;
height: 100vh;
2024-09-29 10:19:21 +08:00
background-color: #EFEFEF;
box-sizing: border-box;
.content{
width: 100%;
height: 86vh;
margin-top: 20rpx;
padding-bottom: 80rpx;
2024-09-29 10:19:21 +08:00
background: #EFEFEF;
.view-box{
width: 94%;
height: auto;
margin: 20rpx auto;
background-color: #FFF;
border-radius: 10rpx;
padding-top: 20rpx;
.title-view{
font-size: 32rpx;
font-weight: 600;
margin-left: 20rpx;
}
.exam-view{
width: 94%;
margin: 10rpx auto;
height: auto;
padding-bottom: 20rpx;
.exam-item{
width: 96%;
margin: 10rpx auto;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 0;
}
}
}
}
.exam-button{
background-color:#0078FB;
color: #FFF;
height: 36rpx;
line-height: 36rpx;
padding:10rpx 10rpx;
border-radius: 10rpx;
margin-left: 10rpx;
}
}
</style>