@ -0,0 +1,257 @@ |
||||
<template> |
||||
<view class="ml40 p10lr hp100 bc-f5" style="overflow-y: auto;"> |
||||
<view class="flex" style="align-items: stretch;"> |
||||
<view class="left hp100"> |
||||
<view class="fl1 flex" style="align-items: stretch;"> |
||||
<view class="info"> |
||||
<view class="flex ai-c jc-c mt10 mr10 fs16" style="border: 1px solid #999;height: 32px;"> |
||||
第01考台 |
||||
</view> |
||||
<view class="mt10 p10tb" style="background-color: rgb(177, 222, 255);"> |
||||
<view style="margin: 0 auto;width: 64px;"> |
||||
<u-avatar :size="64" mp-avatar shape="circle"></u-avatar> |
||||
</view> |
||||
</view> |
||||
<view class="p10" style="background-color: rgb(235, 235, 235);"> |
||||
<view class="flex ai-c"> |
||||
<text class="fs12 cor-333">姓名</text> |
||||
<view class="fl1 info-box"> |
||||
{{ user.userName }}{{ user.userId }} |
||||
</view> |
||||
</view> |
||||
<view class="flex ai-c"> |
||||
<text class="fs12 cor-333">类型</text> |
||||
<view class="fl1 info-box"> |
||||
小车 |
||||
</view> |
||||
</view> |
||||
<view class="flex ai-c"> |
||||
<text class="fs12 cor-333">科目</text> |
||||
<view class="fl1 info-box"> |
||||
科目一 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="fl1 question-box"> |
||||
<view class="fs14 cor-000"> |
||||
{{questionIndex}} {{question.question}} |
||||
</view> |
||||
<view v-if="question.type != 1" v-for="item in question.optionList" class="mt5 fs14 cor-000"> |
||||
{{item}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="ans-box"> |
||||
<view class="flex ai-c"> |
||||
<view class="time"> |
||||
<text class="mt7">45:00</text> |
||||
</view> |
||||
<view class="ml20 fs16 cor-333 fwb"> |
||||
您的答案： |
||||
</view> |
||||
</view> |
||||
<view v-if="question.type==1" class="flex"> |
||||
<button class="btn" :class="{ done: question.yourAnswer==1 }" @tap="handleAnswer(1)">√</button> |
||||
<button class="btn" :class="{ done: question.yourAnswer==2 }" @tap="handleAnswer(2)">×</button> |
||||
</view> |
||||
<view v-else class="flex"> |
||||
<template v-for="(item,index) in question.optionList"> |
||||
<button class="btn" :class="{ done: question.yourAnswer.includes(index+1) }" @tap="handleAnswer(index+1)">{{['A','B','C','D','E','F','G'][index]}}</button> |
||||
</template> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="right" style="border: 1px solid #999;;"> |
||||
<u-grid border col="10"> |
||||
<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" style="box-sizing: border-box;"> |
||||
<view class="q-item" :class="{ 'current-question': questionIndex==listIndex+1, done: listItem.yourAnswer }" @tap="questionIndex=listIndex+1">{{listIndex+1}}</view> |
||||
</u-grid-item> |
||||
</u-grid> |
||||
</view> |
||||
</view> |
||||
<view class="operate-box"> |
||||
<view class="fl1"> |
||||
<view class="fs16" style="height: 20px;line-height: 20px;color: rgb(232, 72, 75);"> |
||||
操作提示：{{['','判断题','单选题','多选题'][question.type]}} |
||||
</view> |
||||
<view class="fs14 cor-333" style="height: 20px;line-height: 20px;"> |
||||
本题是{{getDesc(question.type)}} |
||||
</view> |
||||
</view> |
||||
<view class="flex"> |
||||
<button :disabled="questionIndex==1" class="btn" @tap="questionIndex--">上一题</button> |
||||
<button :disabled="questionIndex==list.length" class="btn" @tap="questionIndex++">下一题</button> |
||||
<button class="btn">交卷</button> |
||||
</view> |
||||
</view> |
||||
<view class="img-box"> |
||||
|
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import useUserStore from '@/jtools/store/user' |
||||
export default { |
||||
data() { |
||||
return { |
||||
question: {}, |
||||
questionIndex: 1, |
||||
list: [], |
||||
mutiAns: [] |
||||
} |
||||
}, |
||||
computed: { |
||||
user() { |
||||
return useUserStore().userInfo |
||||
}, |
||||
question() { |
||||
if(this.questionIndex!=0 && this.list.length) { |
||||
return this.list[this.questionIndex-1] |
||||
} else { |
||||
return {} |
||||
} |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.fz() |
||||
setTimeout(() => { |
||||
for (var i = 0; i < 100; i++) { |
||||
this.list.push({ |
||||
type: i%3+1, |
||||
question: '这是题目这是题目内容这是题目内容这是题目内容内容这是题目这是题目内容这是题目内容这是题目内容内容', |
||||
optionList: ['A', 'B', 'C', 'D'], |
||||
yourAnswer:'' |
||||
}) |
||||
} |
||||
},1000) |
||||
}, |
||||
methods: { |
||||
fz() { |
||||
wx.setPageOrientation({ |
||||
orientation: 'landscape' |
||||
}); |
||||
}, |
||||
handleAnswer(index) { |
||||
// 如果是多选 |
||||
let q = this.list[this.questionIndex-1] |
||||
if(q.type == 3) { |
||||
let arr = q.yourAnswer ? q.yourAnswer.split(',') : [] |
||||
arr.includes(index+'') ? arr = arr.filter(it=>it!=(index+'')) : arr.push(index) |
||||
this.list[this.questionIndex-1].yourAnswer = arr.join(',') |
||||
} else { |
||||
this.list[this.questionIndex-1].yourAnswer = index+'' |
||||
} |
||||
}, |
||||
getDesc(type) { |
||||
let tt1 = ['','判断题，','单选题，','多选题，'][type] |
||||
let tt2 = ['','请判断对错！','请在备选答案中选择你认为正确的答案！','请在备选答案中选择多个你认为正确的答案！'][type] |
||||
return tt1 + tt2 |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.left { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.info { |
||||
width: 100px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.info-box { |
||||
margin-left: 5px; |
||||
padding-left: 5px; |
||||
height: 28px; |
||||
line-height: 28px; |
||||
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff; |
||||
font-size: 10px; |
||||
color: #333; |
||||
} |
||||
} |
||||
.question-box { |
||||
position: relative; |
||||
padding: 10px; |
||||
border-top: 1px solid #999; |
||||
border-left: 1px solid #999; |
||||
} |
||||
.ans-box { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
height: 44px; |
||||
border-top: 1px solid #999; |
||||
.time { |
||||
position: relative; |
||||
display: flex; |
||||
width: 90px; |
||||
height: 28px; |
||||
line-height: 16px; |
||||
justify-content: center; |
||||
font-size: 14px; |
||||
color: #333; |
||||
border: 1px solid #ccc; |
||||
|
||||
&::before { |
||||
content: '剩余时间'; |
||||
position: absolute; |
||||
left: 5px; |
||||
top: 0; |
||||
background-color: #f5f5f5; |
||||
font-size: 10px; |
||||
color: #333; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
width: 270px; |
||||
|
||||
.q-item { |
||||
width: 28px; |
||||
height: 27px; |
||||
font-size: 10px; |
||||
line-height: 27px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.operate-box { |
||||
padding-left: 10px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
height: 50px; |
||||
border-top: 2px solid rgb(43, 102, 167); |
||||
border-bottom: 2px solid rgb(43, 102, 167); |
||||
border-left: 1px solid #999; |
||||
border-right: 1px solid #999; |
||||
} |
||||
|
||||
.btn { |
||||
margin-right: 10px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
background-color: rgb(244, 243, 239); |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.img-box { |
||||
height: 120px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
border: 1px solid #999; |
||||
} |
||||
.current-question{ |
||||
background-color: #93F0E4; |
||||
} |
||||
.done { |
||||
background-color: #33FF66; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue