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

276 lines
7.2 KiB
Vue

<template>
<view class="page">
<u-navbar class="u-navbar" title="安全教育培训" placeholder @leftClick="leftClick" leftIconColor="#fff" bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
<scroll-view class="content" scroll-y="true">
<view class="header-view">
<view class="face-view">
<image :src="faceImgUrl" mode="" style="width: 120rpx;height: 120rpx;border-radius: 60rpx"></image>
</view>
<view class="info-view">
<view>
<text style="font-weight: bold;">{{userName}}</text>
<text style="color: #666;font-size: 22rpx;margin-left: 20rpx;">{{postName}}</text>
</view>
<view>
{{proName}}
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
培训结果
</view>
<view class="train-view">
<view class="train-item" @click="goTrain">
<image v-if="trainInfo.safetyTraining==0" class="img" src="../../../../static/realName/safety_training_index_incomplete_img.png" mode=""></image>
<image v-else class="img" src="../../../../static/realName/safety_training_index_complete_img.png" mode="" ></image>
</view>
<view class="train-item" @click="goTrain">
<image v-if="trainInfo.practical==0" class="img" src="../../../../static/realName/practical_operation_index_incomplete_img.png" mode=""></image>
<image v-else class="img" src="../../../../static/realName/practical_operation_index_complete_img.png" mode="" ></image>
</view>
<view class="train-item" @click="goTrain">
<image v-if="trainInfo.theory==0" class="img" src="../../../../static/realName/theory_index_incomplete_img.png" mode=""></image>
<image v-else class="img" src="../../../../static/realName/theory_index_complete_img.png" mode="" ></image>
</view>
<view class="train-item" @click="goTrain">
<image v-if="trainInfo.militarize==0" class="img" src="../../../../static/realName/militarization_index_incomplete_img.png" mode=""></image>
<image v-else class="img" src="../../../../static/realName/militarization_index_complete_img.png" mode="" ></image>
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
考试结果
</view>
<view class="exam-view" @click="goTrain">
<view class="exam-item">
<view style="width: 50%;font-weight: bold;">安规考试</view>
<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.safetyScore}}</view>
<view class="stats1" v-if="Number(trainInfo.safetyScore)>=90">通过</view>
<view class="stats0" v-else>未通过</view>
</view>
<view class="exam-item">
<view style="width: 50%;font-weight: bold;">保命教育-实操培训</view>
<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.practicalScore}}</view>
<view class="stats1" v-if="Number(trainInfo.practicalScore)>=80">通过</view>
<view class="stats0" v-else>未通过</view>
</view>
<view class="exam-item">
<view style="width: 50%;font-weight: bold;">保命教育-理论培训</view>
<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.theoryScore}}</view>
<view class="stats1" v-if="Number(trainInfo.theoryScore)>=80">通过</view>
<view class="stats0" v-else>未通过</view>
</view>
<view class="exam-item">
<view style="width: 50%;font-weight: bold;">准军事化培训</view>
<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.militarizeScore}}</view>
<view class="stats1" v-if="Number(trainInfo.militarizeScore)>=80">通过</view>
<view class="stats0" v-else>未通过</view>
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
更多服务
</view>
<view class="more-view">
<view class="more-item">
<image class="img" src="../../../../static/realName/other_face.png" mode=""></image>
</view>
<view class="more-item">
<image class="img" src="../../../../static/realName/other_train.png" mode=""></image>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import { pathToBase64, base64ToPath } from 'image-tools';
import chooseFile from '../../util/chooseFile.js';
import config from '@/config'
export default {
data() {
return {
idNumber:uni.getStorageSync('realNameUser').idNumber,
faceImgUrl:"",
userName:"",
postName:"",
proName:"",
trainInfo:{}
}
},
onLoad() {
console.log('?? ~ mounted ~ mounted-index:');
this.getTrainInfo()
},
onShow() {
},
methods: {
getTrainInfo(){
let param={
idNumber:this.idNumber
}
uni.request({
url: config.realExamUrl+'/mergeTrainExam/selectPersonInfo',
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.faceImgUrl = config.realFileUrl+res.data.facePhoto;
this.userName = res.data.name;
this.postName = res.data.postName;
this.proName = res.data.proName;
this.trainInfo=res.data;
}
},
fail: err => {
console.log(err)
}
})
},
goTrain(){
uni.navigateTo({
url: `/pages/realName/workbench/exam/train?trainInfo=${JSON.stringify(this.trainInfo)}`
})
},
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
},
},
}
</script>
<style lang="scss">
.page {
width: 100vw;
height: 100vh;
background-color: #EFEFEF;
box-sizing: border-box;
font: 24rpx;
.content{
width: 100%;
height: 90vh;
margin-top: 20rpx;
background-color: #EFEFEF;
padding-bottom: 40rpx;
}
.header-view{
width: 94%;
height: auto;
margin: 20rpx auto;
display: flex;
.face-view{
width: 20%;
height: auto;
}
.info-view{
width: 70%;
margin-left: 40rpx;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.view-box{
width: 94%;
height: auto;
margin: 20rpx auto;
background-color: #FFF;
border-radius: 10rpx;
padding-top: 20rpx;
.title-view{
font-weight: 600;
margin-left: 20rpx;
}
.train-view{
width: 94%;
margin: 20rpx auto;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.train-item{
width: 48%;
height: 160rpx;
margin-bottom: 20rpx;
.img{
width: 100%;
height: 100%;
}
}
}
.more-view{
width: 94%;
margin: 20rpx auto;
height: auto;
display: flex;
justify-content: space-between;
.more-item{
width: 48%;
height: 120rpx;
margin-bottom: 20rpx;
.img{
width: 100%;
height: 100%;
}
}
}
.exam-view{
width: 94%;
margin: 20rpx auto;
height: auto;
.exam-item{
width: 94%;
margin: 10rpx auto;
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
.stats0{
width: 100rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
font-size: 20rpx;
color: #FFF;
border-radius: 20rpx;
background: #FF736E;
}
.stats1{
width: 100rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
font-size: 20rpx;
color: #FFF;
border-radius: 20rpx;
background: #47A1FB;
}
}
}
}
}
</style>