347 lines
8.2 KiB
Vue
347 lines
8.2 KiB
Vue
<template>
|
||
<view class="wrapper">
|
||
<div class="arrow-left">
|
||
<u-icon name="arrow-left" size="20" color="#fff" @click="handleArrow" />
|
||
</div>
|
||
<div class="result">
|
||
<div class="result-item">{{ result }}</div>
|
||
<div class="result-tip">最新记录</div>
|
||
</div>
|
||
|
||
<div class="center-container">
|
||
<div class="top-wrapper">
|
||
<div class="item">
|
||
<div>{{ scoreRate }}</div>
|
||
<div class="tip">得分</div>
|
||
</div>
|
||
<div class="item">
|
||
<div>{{ rightRate }}%</div>
|
||
<div class="tip">正确率</div>
|
||
</div>
|
||
<div class="item">
|
||
<div>{{ answerTime }}分钟</div>
|
||
<div class="tip">作答用时</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-wrapper">
|
||
<div class="item">总分：{{ totalScore }}</div>
|
||
<div class="item">及格分：{{ passScore }}</div>
|
||
<div class="item">考试时长：{{ duration }}分钟</div>
|
||
<div class="item">试题：{{ questionCount }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-container">
|
||
<h2 class="title">榜上有名</h2>
|
||
<div class="title-tab">
|
||
<div>排名</div>
|
||
<div>姓名/部门</div>
|
||
<div>得分</div>
|
||
<div>得分率</div>
|
||
</div>
|
||
|
||
<div v-for="(item, index) in rankList" :key="index" class="rank-list">
|
||
<div class="icon">
|
||
<u-icon :name="iconLit[index]" size="30" />
|
||
<u-avatar src="/static/images/user.png" size="40" />
|
||
</div>
|
||
<div>{{ `${item.userName}/${item.orgName}` }}</div>
|
||
<div>{{ item.examGrade }}</div>
|
||
<div>{{ item.gradeAverage }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="bottom-btn">
|
||
<!-- <div class="btn">
|
||
<u-button
|
||
size="small"
|
||
shape="circle"
|
||
text="考试记录"
|
||
style="color: #1989fa; border-color: #1989fa"
|
||
@click="handleExamination"
|
||
/>
|
||
</div> -->
|
||
<div class="btn">
|
||
<u-button type="primary" size="small" shape="circle" text="重新考试" @click="handleResetExamination" />
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getExamRankById } from '@/api/eduApp'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
examId: '',
|
||
result: '不及格',
|
||
// 得分
|
||
scoreRate: '',
|
||
// 正确率
|
||
rightRate: '60%',
|
||
// 作答用时
|
||
answerTime: '',
|
||
// 总分
|
||
totalScore: 100,
|
||
// 及格分
|
||
passScore: 60,
|
||
// 考试时长
|
||
duration: 0,
|
||
// 试题
|
||
questionCount: 0,
|
||
// 考试次数
|
||
examNum: 0,
|
||
examCount: 1, // 考试次数 1: 不限次 2: 及格终止 3: 自定义
|
||
examCustom: 0, // 自定义次数
|
||
results: 0, // 考试结果
|
||
studyId: '',
|
||
iconLit: ['/static/images/top-one.png', '/static/images/top-two.png', '/static/images/top-three.png'],
|
||
// 榜上有名 - 列表
|
||
rankList: []
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
opt = JSON.parse(opt.params)
|
||
console.log('🚀 ~ onLoad ~ opt:', opt)
|
||
this.examId = opt.examId
|
||
this.result = opt.examResult == 1 ? '及格' : '不及格'
|
||
this.scoreRate = opt.examGrade
|
||
this.rightRate = opt.gradeAverage
|
||
this.answerTime = opt.answerTime
|
||
this.duration = opt.examTime
|
||
this.questionCount = opt.questionCount
|
||
this.examNum = opt.examNum
|
||
this.examCount = opt.examCount
|
||
this.examCustom = opt.examCustom
|
||
this.results = opt.results
|
||
this.studyId = opt.studyId || ''
|
||
},
|
||
mounted() {
|
||
this.getExamRankById()
|
||
},
|
||
methods: {
|
||
// handleExamination() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/YNEduApp/exam/examinationList'
|
||
// })
|
||
// },
|
||
// 重新考试
|
||
handleResetExamination() {
|
||
if (this.examNum > 10) {
|
||
uni.showToast({
|
||
title: '已达到最大考试次数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
// examCount 1: 不限次 2: 及格终止 3: 自定义
|
||
if (this.examCount == 2 && this.results == 1) {
|
||
uni.showToast({
|
||
title: '此考试及格终止, 考试以及格, 无需再次考试',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
} else if (this.examCount == 3 && this.examNum >= this.examCustom) {
|
||
uni.showToast({
|
||
title: '此考试有次数限制, 考试次数已达上限, 无法再考试了',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
const params = {
|
||
examId: this.examId,
|
||
examNum: this.examNum,
|
||
examCount: this.examCount,
|
||
examCustom: this.examCustom,
|
||
switchCount: this.switchCount,
|
||
studyId: this.studyId
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pages/YNEduApp/exam/examination?params=${JSON.stringify(params)}`
|
||
})
|
||
},
|
||
handleArrow() {
|
||
let from = ''
|
||
if (this.studyId) {
|
||
from = uni.getStorageSync('from') + '?id=' + this.studyId
|
||
} else {
|
||
from = uni.getStorageSync('from')
|
||
}
|
||
console.log('🚀 ~ handleArrow ~ from:', from)
|
||
uni.navigateTo({
|
||
url: from
|
||
})
|
||
},
|
||
// 获取考试排名
|
||
async getExamRankById() {
|
||
const params = {
|
||
examId: this.examId
|
||
}
|
||
const res = await getExamRankById(params)
|
||
this.rankList = res.data
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrapper {
|
||
height: 100vh;
|
||
background: url('/static/images/examine-detail-bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.arrow-left {
|
||
position: fixed;
|
||
top: 50px;
|
||
left: 20px;
|
||
z-index: 99;
|
||
}
|
||
|
||
.result {
|
||
overflow: hidden;
|
||
width: 180.5px;
|
||
height: 118.6px;
|
||
background: url('/static/images/result-bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 9;
|
||
margin-top: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
transform: translateY(40px);
|
||
|
||
.result-item {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.result-tip {
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.center-container {
|
||
margin: 0 10px;
|
||
width: calc(100% - 20px);
|
||
height: 250px;
|
||
background: #e8f2fe;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.top-wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
margin: 0 10px;
|
||
|
||
.item {
|
||
margin-top: 25px;
|
||
width: 142px;
|
||
height: 73px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 800;
|
||
font-size: 20px;
|
||
color: #08428d;
|
||
|
||
.tip {
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-wrapper {
|
||
font-size: 12px;
|
||
color: #a1a1a1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.item {
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-container {
|
||
margin-top: 10px;
|
||
width: calc(100% - 20px);
|
||
height: 285px;
|
||
background: #e8f2fe;
|
||
border-radius: 20px;
|
||
|
||
.title {
|
||
font-weight: 800;
|
||
font-size: 20px;
|
||
color: #08428d;
|
||
margin: 15px auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.title-tab {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: #a1a1a1;
|
||
margin: 0 10px;
|
||
> div {
|
||
width: 25%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.rank-list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: #333;
|
||
margin: 20px 10px;
|
||
> div {
|
||
width: 25%;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|