308 lines
8.6 KiB
Vue
308 lines
8.6 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar title="考试" @leftClick="leftClick" placeholder />
|
|
<div class="tab-wrapper">
|
|
<div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="handleTab(item, index)">
|
|
<div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
|
|
{{ item.name }}
|
|
</div>
|
|
<div :class="{ 'tab-line': activeIndex === index }"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div v-for="(item, index) in list" :key="index" class="item-wrapper">
|
|
<div class="title">{{ item.name }}</div>
|
|
<div class="name-status">
|
|
<div class="name">
|
|
{{ item.userName }}
|
|
<div class="name-sub">指派</div>
|
|
</div>
|
|
<div class="status">{{ item.status == 2 ? '已考试' : '未考试' }}</div>
|
|
</div>
|
|
<div class="time">{{ item.validityDate }}</div>
|
|
<div class="count-total">
|
|
<div class="count">考试{{ item.examNum }}次</div>
|
|
<div class="total">总分：{{ item.score }}</div>
|
|
</div>
|
|
<div class="bt-wrapper">
|
|
<div class="score">得分：{{ item.examScore }}</div>
|
|
<div v-if="item.examNum == 0" class="btn" @click="handleExamination(item)">开始考试</div>
|
|
<div v-else class="btn-wrapper">
|
|
<div class="btn" @click="handleExamDataList(item)">考试数据</div>
|
|
<div class="btn" @click="handleExamination(item)">重新考试</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 暂无数据 -->
|
|
<div class="no-data" v-if="list.length == 0">
|
|
<image src="/static/images/zanwuneirong.png" mode="aspectFit" />
|
|
<view class="no-data-text">暂无内容</view>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getStudentExamList } from '@/api/eduApp/index'
|
|
import config from '@/config'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList: [{ name: '全部' }, { name: '待考' }, { name: '已考' }, { name: '缺考' }],
|
|
activeIndex: 0,
|
|
list: [],
|
|
// 全部列表
|
|
allList: [],
|
|
// 待考列表
|
|
waitList: [],
|
|
// 已考列表
|
|
alreadyList: [],
|
|
// 缺考列表
|
|
absentList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
onPullDownRefresh() {
|
|
this.getList()
|
|
setTimeout(() => {
|
|
//800毫秒后关闭刷新
|
|
uni.stopPullDownRefresh()
|
|
}, 800)
|
|
},
|
|
getList() {
|
|
const params = {
|
|
userId: uni.getStorageSync('userId'),
|
|
source: 1
|
|
}
|
|
// const res = await getStudentExamList(params)
|
|
// // 根据 status 区分
|
|
// this.list = this.allList
|
|
// this.allList = this.list = res.data
|
|
// this.waitList = res.data.filter(item => item.status === 1)
|
|
// this.alreadyList = res.data.filter(item => item.status === 2)
|
|
this.$verificationToken()
|
|
uni.request({
|
|
url: config.baseUrl + '/exam-student/personalCenter/getStudentExamList',
|
|
method: 'post',
|
|
data: params,
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: uni.getStorageSync('access_token')
|
|
},
|
|
success: res => {
|
|
console.log('🚀 ~ getList ~ res:', res)
|
|
this.activeIndex = 0
|
|
res = res.data
|
|
this.list = this.allList
|
|
this.allList = this.list = res.data
|
|
this.waitList = res.data.filter(item => item.status === 1)
|
|
this.alreadyList = res.data.filter(item => item.status === 2)
|
|
this.absentList = res.data.filter(item => item.status === 3 && item.examNum === 0)
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
handleTab(item, index) {
|
|
this.activeIndex = index
|
|
if (index === 0) {
|
|
this.list = this.allList
|
|
} else if (index === 1) {
|
|
this.list = this.waitList
|
|
} else if (index === 2) {
|
|
this.list = this.alreadyList
|
|
} else if (index === 3) {
|
|
this.list = this.absentList
|
|
}
|
|
},
|
|
// 开始考试
|
|
handleExamination(item) {
|
|
console.log('🚀 ~ handleExamination ~ item:', item)
|
|
// 获取当前考试限制时间 item.validityDate 2021-09-01~2021-09-30 如果今天不在这个范围内, 不能考试
|
|
const date = new Date()
|
|
const validityDate = item.validityDate.split('~')
|
|
const startDate = new Date(validityDate[0].trim())
|
|
const endDate = new Date(validityDate[1].trim())
|
|
console.log('🚀 ~ 时间 ~ date:', date)
|
|
console.log('🚀 ~ 时间 ~ startDate:', startDate)
|
|
console.log('🚀 ~ 时间 ~ endDate:', endDate)
|
|
if (date < startDate || date > endDate) {
|
|
uni.showToast({
|
|
title: '当前时间不在考试时间范围内',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (item.examEquipment == 2) {
|
|
uni.showToast({
|
|
title: '请在电脑端进行考试',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
// examCount 1: 不限次 2: 及格终止 3: 自定义
|
|
if (item.examCount == 2 && item.results == 1) {
|
|
uni.showToast({
|
|
title: '此考试及格终止, 考试以及格, 无需再次考试',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
} else if (item.examCount == 3 && item.examNum >= item.examCustom) {
|
|
uni.showToast({
|
|
title: '此考试有次数限制, 考试次数已达上限, 无法再考试了',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
const params = {
|
|
id: item.id, // 试卷id
|
|
name: item.name, // 试卷名称
|
|
validityDate: item.validityDate, // 考试期限
|
|
cutNum: item.cutNum, // 切屏次数
|
|
responseTime: item.responseTime, // 考试时长
|
|
examNum: item.examNum, // 考试次数
|
|
examCount: item.examCount, // 考试次数类型
|
|
examCustom: item.examCustom, // 自定义考试次数
|
|
score: item.score, // 总
|
|
passScore: item.passScore // 及格分数
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/YNEduApp/exam/beforeExam?params=${JSON.stringify(params)}`
|
|
})
|
|
uni.removeStorageSync('from')
|
|
uni.setStorageSync('from', '/pages/YNEduApp/exam/exam')
|
|
},
|
|
leftClick() {
|
|
uni.navigateTo({
|
|
url: '/pages/YNEduApp/index/index'
|
|
})
|
|
},
|
|
// 考试数据
|
|
handleExamDataList(item) {
|
|
console.log('🚀 ~ handleExamDataList ~ item:', item)
|
|
const params = {
|
|
examId: item.id
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/YNEduApp/exam/examinationList?params=${JSON.stringify(params)}`
|
|
})
|
|
}
|
|
},
|
|
onBackPress(options) {
|
|
console.log(options)
|
|
if (options.from == 'backbutton') {
|
|
// 来自手势返回
|
|
console.log('手势返回')
|
|
// 返回为 true 时，不会执行返回操作，可以自定义返回逻辑
|
|
// 返回为 false 或者不返回时，则执行默认返回操作
|
|
return true
|
|
}
|
|
// 返回为 false 或者不返回时，则执行默认返回操作
|
|
return false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
/* background: #fff; */
|
|
margin-bottom: 10px;
|
|
|
|
.tab-item {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
.tab-line {
|
|
margin-top: 5px;
|
|
width: 30%;
|
|
height: 2px;
|
|
background-color: #409eff;
|
|
transition: width 0.3s;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
padding: 0 10px;
|
|
.item-wrapper {
|
|
background: #fff;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
.name-status {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.name {
|
|
display: flex;
|
|
.name-sub {
|
|
margin-left: 5px;
|
|
color: #999;
|
|
}
|
|
}
|
|
.status {
|
|
color: #409eff;
|
|
}
|
|
}
|
|
.time {
|
|
color: #999;
|
|
margin-top: 10px;
|
|
}
|
|
.count-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.count {
|
|
color: #999;
|
|
}
|
|
.total {
|
|
color: #999;
|
|
}
|
|
}
|
|
.bt-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.score {
|
|
color: #999;
|
|
}
|
|
.btn-wrapper {
|
|
display: flex;
|
|
}
|
|
.btn {
|
|
margin-left: 5px;
|
|
padding: 5px 10px;
|
|
background: #409eff;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-data {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 100px;
|
|
.no-data-text {
|
|
margin-top: 10px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|