guoyuepeng
/
qa-prevention-xgf-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 调整考试详情页面的样式风格

xgf-training-dev
mengfanliang 2025-02-18 10:53:50 +08:00
parent 9082f528f4
commit 58c10462fc
3 changed files with 323 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

735
pages/train_management/exam_record.vue
View File

@ -1,457 +1,344 @@
<template> <template>
<view class="content"> <view class="content">
<view class="content__titletop"> <view class="content__titletop">
<view class="content__title">试卷名称-综合素质测评</view> <view class="content__title">试卷名称-综合素质测评</view>
<view class="content__subtitle">(满分: 100分)</view> <view class="content__subtitle">(满分: 100分)</view>
</view> </view>
<view class="content__info"> <view class="content__info">
<text>姓名: 测试者</text> <text>姓名: 测试者</text>
<text>分数: 85分</text> <text>分数: 85分</text>
<text>考试时间: 2024-12-30</text> <text>考试时间: 2024-12-30</text>
</view> </view>
<view class="content__sign"> <view class="content__sign">
<view style="margin-right: 10rpx">签字: </view> <view style="margin-right: 10rpx">签字: </view>
<u-image <u-image width="120rpx" height="70rpx" model="widthFix" src="https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp" />
width="120rpx" </view>
height="70rpx"
model="widthFix"
src="https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp"
/>
</view>
<view class="counter"> <view class="counter">
<text style="color: orange">{{ activeIndex || 1 }}</text>/{{ totalCount }} 当前试题: <text style="color: orange">{{ current + 1 }}</text
</view> >/{{ questionList.length }}
</view>
<scroll-view ref="scrollViewRef" scroll-y="true" :scroll-top="0" class="question_list" @scrolltolower="handleScrollToLower" @scroll="handleScroll"> <view class="topic">
<view <view class="title">
class="question_item" <text class="tag_title">
v-for="(item, index) in questionList" {{ handleCalcQuestType(questionList[current].questiontype) }}
:key="index" </text>
> {{ current + 1 }}.
<text class="tag_title"> <text>{{ questionList[current].questiondry }}</text>
{{ handleCalcQuestType(item.questionType) }} </view>
</text> <view v-if="questionList[current].questiontype === '1'" class="options">
{{ index + 1 }}. <view v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="index" :class="['item', questionList[current].answer === item ? 'active' : '']">
<text>{{ item.stem }}</text> <text class="option">{{ item }}</text>
<view class="question_options__item"> <text class="text">
<view {{ questionList[current]['option' + item.toLocaleLowerCase()] }}
v-for="(option, index) in item.options" </text>
:key="index" </view>
:class=" </view>
option.label === item.answer <view v-if="questionList[current].questiontype === '2'" class="options">
? 'options question_options_active' <view v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="index" :class="['item', questionList[current].answer && questionList[current].answer.indexOf(item) !== -1 ? 'active' : '']">
: 'options' <text class="option">{{ item }}</text>
" <text class="text">
> {{ questionList[current]['option' + item.toLocaleLowerCase()] }}
<text class="option_item"> </text>
{{ option.label }}. {{ option.value }} </view>
</text> </view>
</view> <view v-if="questionList[current].questiontype === '3'" class="options">
</view> <view v-for="(item, index) in ['A', 'B']" :key="index" :class="['item', questionList[current].answer === item ? 'active' : '']">
<view class="question_answer"> <text class="option">
正确答案: {{ questionList[current]['option' + item.toLocaleLowerCase()] }}
<text style="display: inline-block; margin-left: 10rpx"> </text>
{{ item.answer }} <text class="text"></text>
</text> </view>
</view> </view>
</view> <view class="correct-answer">
</scroll-view> <text>正确答案</text>
</view> <view v-if="questionList[current].questiontype === '3'">
{{ questionList[current].answerright === 'A' ? '对' : '错' }}
</view>
<view v-else>{{ questionList[current].answerright || '无' }}</view>
<text>权威解读</text>
<view>{{ questionList[current].descr || "无" }}</view>
</view>
</view>
<view class="footer">
<block v-if="current !== 0">
<u-button
shape="circle"
:custom-style="{
width: current === questionList.length - 1 ? '100%' : '45%'
}"
text="上一题"
@click="current--"
/>
</block>
<block v-if="current !== questionList.length - 1">
<u-button
shape="circle"
type="primary"
:custom-style="{
width: current === 0 ? '100%' : '45%',
marginLeft: current === 0 ? '0' : '10%'
}"
text="下一题"
@click="current++"
/>
</block>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
totalPage: 0, totalPage: 0,
questionList: [], questionList: [],
// 新增当前激活的题目索引 // 新增当前激活的题目索引
activeIndex: 0, current: 0,
// 新增总题目数（根据实际数据） questionTypeMap: {
totalCount: 0, 1: '单选题',
questionTypeMap: { 2: '多选题',
0: '单选题', 3: '判断题',
1: '多选题', 4: '填空题',
2: '判断题', 5: '简答题'
3: '填空题', }
4: '简答题' }
} },
}
},
onShow() { onShow() {
this.resetList() this.resetList()
}, },
mounted() { mounted() {},
},
methods: { methods: {
async getData() { async getData() {
this.questionList = [ this.questionList = [
{ {
questionType: 0, stageexamrecordId: '7cea826c3c974cb69028dd0624b632ba',
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.', stageexampaperId: null,
options: [ stageexamId: null,
{ questionId: null,
label: 'A', userId: null,
value: '6' answer: 'B',
}, answerright: 'B',
{ creator: null,
label: 'B', createTime: null,
value: '9' operator: null,
}, operatTime: null,
{ isDelete: null,
label: 'C', corpinfoId: null,
value: '12' studytaskId: null,
}, paperId: null,
{ classId: null,
label: 'D', studentId: null,
value: '15' paperQuestionId: 'c413570fac8b49d8bd3ac27e223beb48',
} questionnumber: null,
], questiontype: '1',
answer: 'D' questiondry: '发生生产安全事故以后，单位负责人应当在（ ）小时内向当地县级应急管理部门和负有安全生产监督管理职责的有关部门报告。',
}, optiona: '2',
{ optionb: '1',
questionType: 1, optionc: '4',
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.', optiond: '半',
options: [ descr: '17',
{ score: '50.0',
label: 'A', labelType: '6a8577ad5cf84e259f6a601a0c253726',
value: '6' coursewarename: '测试40秒',
}, labelTypeName: '规范标准',
{ checkList: null,
label: 'B', count: null,
value: '9' videocoursewareId: null
}, },
{ {
label: 'C', stageexamrecordId: '956a9175accc4c96b062eac68a5cdc28',
value: '12' stageexampaperId: null,
}, stageexamId: null,
{ questionId: null,
label: 'D', userId: null,
value: '15' answer: 'C',
} answerright: 'C',
], creator: null,
answer: 'A' createTime: null,
}, operator: null,
{ operatTime: null,
questionType: 0, isDelete: null,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.', corpinfoId: null,
options: [ studytaskId: null,
{ paperId: null,
label: 'A', classId: null,
value: '6' studentId: null,
}, paperQuestionId: 'b8203efc27c04afc8b692fc2c82095ca',
{ questionnumber: null,
label: 'B', questiontype: '2',
value: '9' questiondry: '发生生产安全事故以后，单位负责人应当在（ ）小时内向当地县级应急管理部门和负有安全生产监督管理职责的有关部门报告。',
}, optiona: '2',
{ optionb: '1',
label: 'C', optionc: '4',
value: '12' optiond: '半',
}, descr: '17',
{ score: '50.0',
label: 'D', labelType: '2c0f587e982641c7965182826f9c41ac',
value: '15' coursewarename: '测试40秒',
} labelTypeName: '法律法规',
], checkList: null,
answer: 'D' count: null,
}, videocoursewareId: null
{ }
questionType: 0, ]
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.', this.totalPage = 2
options: [ this.totalCount = this.questionList.length
{ },
label: 'A', resetList() {
value: '6' this.pageSize = 10
}, this.currentPage = 1
{ this.questionList = []
label: 'B', this.getData()
value: '9' },
}, handleCalcQuestType(type) {
{ return `(${this.questionTypeMap[type]})`
label: 'C', }
value: '12' }
},
{
label: 'D',
value: '15'
}
],
answer: 'D'
},
{
questionType: 0,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
options: [
{
label: 'A',
value: '6'
},
{
label: 'B',
value: '9'
},
{
label: 'C',
value: '12'
},
{
label: 'D',
value: '15'
}
],
answer: 'D'
},
{
questionType: 0,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
options: [
{
label: 'A',
value: '6'
},
{
label: 'B',
value: '9'
},
{
label: 'C',
value: '12'
},
{
label: 'D',
value: '15'
}
],
answer: 'D'
},
{
questionType: 0,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
options: [
{
label: 'A',
value: '6'
},
{
label: 'B',
value: '9'
},
{
label: 'C',
value: '12'
},
{
label: 'D',
value: '15'
}
],
answer: 'D'
},
{
questionType: 1,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
options: [
{
label: 'A',
value: '6'
},
{
label: 'B',
value: '9'
},
{
label: 'C',
value: '12'
},
{
label: 'D',
value: '15'
}
],
answer: 'A'
},
{
questionType: 0,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
options: [
{
label: 'A',
value: '6'
},
{
label: 'B',
value: '9'
},
{
label: 'C',
value: '12'
},
{
label: 'D',
value: '15'
}
],
answer: 'D'
},
{
questionType: 0,
stem: '离开特种作业岗位达 ( ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
options: [
{
label: 'A',
value: '6'
},
{
label: 'B',
value: '9'
},
{
label: 'C',
value: '12'
},
{
label: 'D',
value: '15'
}
],
answer: 'D'
},
]
this.totalPage = 2
this.totalCount = this.questionList.length
},
resetList() {
this.pageSize = 10
this.currentPage = 1
this.questionList = []
this.getData()
},
handleScrollToLower() {
this.currentPage++
if (this.totalPage >= this.currentPage) this.getData()
},
handleScroll(event) {
const query = uni.createSelectorQuery().in(this)
query.selectAll('.question_item').boundingClientRect()
query.select('.question_list').boundingClientRect()
query.exec((res) => {
const items = res[0]
const list = res[1]
if (!items || !list) return
// 计算当前可见项
const scrollTop = list.top * -1
const currentItem = items.findIndex(item =>
item.top - scrollTop >= 0
)
console.log('list.top :>> ', list.top);
if (currentItem !== -1 && currentItem !== this.activeIndex) {
this.activeIndex = currentItem + 1 // +1 因为索引从0开始
}
})
},
handleCalcQuestType(type) {
return `(${this.questionTypeMap[type]})`
},
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
padding: 17rpx; padding: 16rpx;
.content__titletop { .content__titletop {
text-align: center; text-align: center;
.content__title { .content__title {
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
} }
.content__subtitle { .content__subtitle {
margin-top: 8rpx; margin-top: 8rpx;
font-size: 24rpx; font-size: 24rpx;
} }
} }
.content__info { .content__info {
font-size: 34rpx; font-size: 34rpx;
margin-top: 36rpx; margin-top: 36rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.content__sign { .content__sign {
margin-top: 18rpx; margin-top: 18rpx;
font-size: 34rpx; font-size: 34rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.counter { .counter {
font-size: 28rpx; font-size: 28rpx;
margin: 15rpx 0; margin: 15rpx 0;
text-align: end; text-align: end;
} }
.question_list { .topic {
height: calc(100vh - 123px); box-sizing: border-box;
.question_item { .tag_title {
margin-bottom: 20rpx; font-size: 28rpx;
background-color: #94f0bd;
color: #5ac725;
border-radius: 8rpx;
padding: 2rpx 8rpx;
margin-right: 10rpx;
}
.tag_title { .title {
font-size: 34rpx; font-size: 32rpx;
background-color: #94f0bd; font-weight: 600;
color: #5ac725;
border-radius: 8rpx;
padding: 2rpx 8rpx;
margin-right: 10rpx;
}
.question_options__item { .question-type {
padding: 16rpx; border-radius: 40rpx;
margin-top: 14rpx; padding: 4rpx 14rpx;
display: flex; border: 1rpx solid #3c9cff;
flex-direction: column; font-size: 28rpx;
align-items: flex-start; color: #3c9cff;
gap: 12rpx; }
}
.options { .options {
padding: 8rpx 0 8rpx 10rpx; margin-top: 40rpx;
width: 100%;
.option_item { .item {
display: inline-block; position: relative;
margin-left: 22rpx; margin-top: 40rpx;
} color: #696868;
}
.question_options_active { &.active {
background-color: rgb(216, 216, 216); color: #3c9cff;
color: #fff;
}
}
.question_answer { .option {
font-size: 34rpx; background-color: #3c9cff;
margin-left: 22rpx; color: #fff;
color: #acafb3; }
} }
}
} .option {
background-color: #eee;
border-radius: 80rpx;
width: 65rpx;
height: 65rpx;
line-height: 65rpx;
text-align: center;
font-size: 30rpx;
display: inline-block;
}
.text {
margin-left: 30rpx;
height: 60rpx;
line-height: 60rpx;
}
}
}
.correct-answer {
margin-top: 40rpx;
text {
display: inline-block;
margin-top: 40rpx;
color: #696868;
font-size: 30rpx;
font-weight: bold;
}
view {
margin-top: 20rpx;
color: #333;
padding: 20rpx;
background-color: #eee;
border-radius: 10rpx;
font-size: 30rpx;
}
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
padding: 20rpx;
box-sizing: border-box;
background: #fff;
text-align: center;
display: flex;
}
} }
</style> </style>

19
pages/train_management/index.vue
View File

@ -45,6 +45,8 @@
</template> </template>
<script> <script>
import { getCertificateInformationList } from "@/api/index.js";
export default { export default {
data() { data() {
return { return {
@ -66,10 +68,10 @@ export default {
methods: { methods: {
async getData() { async getData() {
// let resData = await getCertificateInformationList({ let resData = await getCertificateInformationList({
// showCount: this.pageSize, showCount: this.pageSize,
// currentPage: this.currentPage, currentPage: this.currentPage,
// }); });
this.trainList = [ this.trainList = [
{ {
classId: 'f34dzfgerg', classId: 'f34dzfgerg',
@ -110,20 +112,23 @@ export default {
onlyFromCamera: false, // 是否只能从相机扫码，不允许从相册选择图片 onlyFromCamera: false, // 是否只能从相机扫码，不允许从相册选择图片
hideAlbum: false, // 隐藏相册,不允许从相册选择图片,只能从相机扫码 hideAlbum: false, // 隐藏相册,不允许从相册选择图片,只能从相机扫码
success: function (res) { success: function (res) {
if (res.result === '0') { const { id, type } = JSON.parse(res.result); // id 字段为班级ID, type 字段为二维码进入方式类型 ['0' --> 签到方式进入, '1' --> 考试方式进入]
if (type === '0') {
// 签到二维码方式进入 // 签到二维码方式进入
uni.$u.route({ uni.$u.route({
url: '/pages/train_management/realname_info_auth', url: '/pages/train_management/realname_info_auth',
params: { params: {
type: 'scan_face', type: 'scan_face',
id
} }
}) })
} else if (res.result === '1') { } else if (type === '1') {
// 考试二维码方式进入 // 考试二维码方式进入
uni.$u.route({ uni.$u.route({
url: '/pages/train_management/face_authentication', url: '/pages/train_management/face_authentication',
params: { params: {
type: 'learning_certification' type: 'learning_certification',
id
} }
}) })
} }

5
pages/train_management/sign_information.vue
View File

@ -31,11 +31,6 @@
<view class="info_raw flex_layout"> <view class="info_raw flex_layout">
<text class="content_label">签到状态: </text> <text class="content_label">签到状态: </text>
<text class="tag_flag">{{ handleCalcSignStatus(item.trainStatus) }}</text> <text class="tag_flag">{{ handleCalcSignStatus(item.trainStatus) }}</text>
<!-- <u-tag
:text="handleCalcSignStatus(item.trainStatus)"
size="mini"
type="success"
/> -->
</view> </view>
</view> </view>
</view> </view>