458 lines
11 KiB
Vue
458 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="content__titletop">
|
|
<view class="content__title">试卷名称-综合素质测评</view>
|
|
<view class="content__subtitle">(满分: 100分)</view>
|
|
</view>
|
|
|
|
<view class="content__info">
|
|
<text>姓名: 测试者</text>
|
|
<text>分数: 85分</text>
|
|
<text>考试时间: 2024-12-30</text>
|
|
</view>
|
|
|
|
<view class="content__sign">
|
|
<view style="margin-right: 10rpx">签字: </view>
|
|
<u-image
|
|
width="120rpx"
|
|
height="70rpx"
|
|
model="widthFix"
|
|
src="https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp"
|
|
/>
|
|
</view>
|
|
|
|
<view class="counter">
|
|
<text style="color: orange">{{ activeIndex || 1 }}</text>/{{ totalCount }}
|
|
</view>
|
|
|
|
<scroll-view ref="scrollViewRef" scroll-y="true" :scroll-top="0" class="question_list" @scrolltolower="handleScrollToLower" @scroll="handleScroll">
|
|
<view
|
|
class="question_item"
|
|
v-for="(item, index) in questionList"
|
|
:key="index"
|
|
>
|
|
<text class="tag_title">
|
|
{{ handleCalcQuestType(item.questionType) }}
|
|
</text>
|
|
{{ index + 1 }}.
|
|
<text>{{ item.stem }}</text>
|
|
<view class="question_options__item">
|
|
<view
|
|
v-for="(option, index) in item.options"
|
|
:key="index"
|
|
:class="
|
|
option.label === item.answer
|
|
? 'options question_options_active'
|
|
: 'options'
|
|
"
|
|
>
|
|
<text class="option_item">
|
|
{{ option.label }}. {{ option.value }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="question_answer">
|
|
正确答案:
|
|
<text style="display: inline-block; margin-left: 10rpx">
|
|
{{ item.answer }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
totalPage: 0,
|
|
questionList: [],
|
|
// 新增当前激活的题目索引
|
|
activeIndex: 0,
|
|
// 新增总题目数（根据实际数据）
|
|
totalCount: 0,
|
|
questionTypeMap: {
|
|
0: '单选题',
|
|
1: '多选题',
|
|
2: '判断题',
|
|
3: '填空题',
|
|
4: '简答题'
|
|
}
|
|
}
|
|
},
|
|
|
|
onShow() {
|
|
this.resetList()
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
async getData() {
|
|
this.questionList = [
|
|
{
|
|
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'
|
|
},
|
|
{
|
|
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>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding: 17rpx;
|
|
|
|
.content__titletop {
|
|
text-align: center;
|
|
|
|
.content__title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content__subtitle {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.content__info {
|
|
font-size: 34rpx;
|
|
margin-top: 36rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.content__sign {
|
|
margin-top: 18rpx;
|
|
font-size: 34rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.counter {
|
|
font-size: 28rpx;
|
|
margin: 15rpx 0;
|
|
text-align: end;
|
|
}
|
|
|
|
.question_list {
|
|
height: calc(100vh - 123px);
|
|
|
|
.question_item {
|
|
margin-bottom: 20rpx;
|
|
|
|
.tag_title {
|
|
font-size: 34rpx;
|
|
background-color: #94f0bd;
|
|
color: #5ac725;
|
|
border-radius: 8rpx;
|
|
padding: 2rpx 8rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.question_options__item {
|
|
padding: 16rpx;
|
|
margin-top: 14rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12rpx;
|
|
|
|
.options {
|
|
padding: 8rpx 0 8rpx 10rpx;
|
|
width: 100%;
|
|
|
|
.option_item {
|
|
display: inline-block;
|
|
margin-left: 22rpx;
|
|
}
|
|
}
|
|
|
|
.question_options_active {
|
|
background-color: rgb(216, 216, 216);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.question_answer {
|
|
font-size: 34rpx;
|
|
margin-left: 22rpx;
|
|
color: #acafb3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|