|
@@ -0,0 +1,381 @@
|
|
|
+<template>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view class="safety-exam">
|
|
|
+ <!-- for此部分 -->
|
|
|
+ <examinationItem ref="examinationItem" :questionObj="paperQuestionList[currentIndex]" :itemIndex="currentIndex" @selected="handleSelected">
|
|
|
+ </examinationItem>
|
|
|
+ <u-card v-if="currentUserAnswer" padding="32" full :showHead="false">
|
|
|
+ <view slot="body">
|
|
|
+ <view v-if="currentUserAnswer.isCorrect" style="display: flex;align-items: center;margin-bottom: 24rpx;">
|
|
|
+ <image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 28rpx;height: 28rpx;"></image>
|
|
|
+ <view style="margin-left: 16rpx;color: #333333;line-height: 40rpx;font-size: 28rpx;">回答正确!</view>
|
|
|
+ </view>
|
|
|
+ <view v-else style="display: flex;align-items: center;margin-bottom: 24rpx;">
|
|
|
+ <image v-if="globalImages" :src="globalImages + 'imgs/cha.png'" style="width: 28rpx;height: 28rpx;"></image>
|
|
|
+ <view style="margin-left: 16rpx;color: #333333;line-height: 40rpx;font-size: 28rpx;">回答错误!</view>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;align-items: center;margin-bottom: 24rpx;" @click="showAnalysis(currentUserAnswer.analysis)">
|
|
|
+ <image v-if="globalImages" :src="globalImages + 'imgs/jiexi.png'" style="width: 28rpx;height: 28rpx;"></image>
|
|
|
+ <view style="margin-left: 16rpx;color: #333333;line-height: 40rpx;font-size: 28rpx;">查看解析</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view>
|
|
|
+ <view>解析</view>
|
|
|
+ <view>
|
|
|
+ <text>答案: {{ currentUserAnswer.correctValue }}</text>
|
|
|
+ <text style="margin-left: 40rpx;">您选择: </text>
|
|
|
+ <text style="color: ;">{{ currentUserAnswer.code }}</text>
|
|
|
+ </view>
|
|
|
+ <view>题目解析</view>
|
|
|
+ <view>{{ currentUserAnswer.analysis }}</view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+ <view class="placeholder"></view>
|
|
|
+ <view class="tabbar_bottom">
|
|
|
+ <view style="height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 32rpx;">
|
|
|
+ <view style="color: #333333;font-size: 28rpx;">已完成 {{ answerCount }}/{{ paperQuestionList.length }}</view>
|
|
|
+ <view style="display: flex;align-items: center;">
|
|
|
+ <u-button v-if="currentIndex > 0" type="primary" @click="prev" size="medium">上一题</u-button>
|
|
|
+ <view>
|
|
|
+ <u-button
|
|
|
+ v-if="currentIndex < paperQuestionList.length - 1 && currentIndex !== paperQuestionList.length - 1"
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ style="margin-left: 32rpx;"
|
|
|
+ @click="next"
|
|
|
+ >
|
|
|
+ 下一题
|
|
|
+ </u-button>
|
|
|
+ <u-button v-else type="primary" size="medium" style="margin-left: 32rpx;" @click="navgo('/my/safety/examcomplete')">提交</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import ExaminationItem from './modules/ExaminationItem'
|
|
|
+ import { waitForGlobalImages } from '@/utils/globalImageLoader'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: { ExaminationItem },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ globalImages: null,
|
|
|
+ // 题目列表
|
|
|
+ paperQuestionList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ questionType: 1,
|
|
|
+ questionContent: '在雨天行驶时,以下哪种做法是正确的?',
|
|
|
+ analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ questionOptionList: [
|
|
|
+ { id: 1, optionCode: 'A', optionContent: '降低车速,保持安全距离 ' },
|
|
|
+ { id: 2, optionCode: 'B', optionContent: '加速通过积水路段 ' },
|
|
|
+ { id: 3, optionCode: 'C', optionContent: '紧急制动避免打滑 ' },
|
|
|
+ { id: 4, optionCode: 'D', optionContent: '关闭雨刷器节省电力 ' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ questionType: 1,
|
|
|
+ questionContent: '某日13时10分,罗某驾驶一辆中型客车从高速公路0公里处出发,下午14时10分行至该高速公路125公里加200米处时,发生追尾碰撞,机动车驶出西南侧路外边坡,造成11人死亡、2人受伤。罗某的主要违法行为是什么?',
|
|
|
+ analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ questionOptionList: [
|
|
|
+ { id: 1, optionCode: 'A', optionContent: '超速行驶' },
|
|
|
+ { id: 2, optionCode: 'B', optionContent: '不按交通标线行驶' },
|
|
|
+ { id: 3, optionCode: 'C', optionContent: '客车超员' },
|
|
|
+ { id: 4, optionCode: 'D', optionContent: '疲劳驾驶' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ questionType: 1,
|
|
|
+ questionContent: '在山区道路超车时,应怎样超越?',
|
|
|
+ analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ questionOptionList: [
|
|
|
+ { id: 1, optionCode: 'A', optionContent: '选择较缓的下坡路' },
|
|
|
+ { id: 2, optionCode: 'B', optionContent: '选择较长的下坡路' },
|
|
|
+ { id: 3, optionCode: 'C', optionContent: '选择宽阔的缓上坡' },
|
|
|
+ { id: 4, optionCode: 'D', optionContent: '选择较长的下坡路' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // id: 4,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '驾驶汽车在进出隧道时应注意什么?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '开启远光灯' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '适当提高车速' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '关闭近光灯' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '提前降低车速' }
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 5,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '夜间驾驶机动车,应在哪种情况下使用远光灯?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '没有路灯或照明差的道路上' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '车速低于30km/h时' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '会车时' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '跟车行驶时' }
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 6,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '行车中发现左侧轮胎漏气时怎样处置?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '慢慢制动减速' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '迅速制动减速' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '迅速向右转向' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '采取紧急制动' }
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 7,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '大风天气行车,当感到转向盘突然“被夺”时,下列做法正确的是什么?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '顺风向转动转向盘' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '逆风向转动转向盘' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '采取紧急制动' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '双手稳握转向盘' }
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 8,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '行车中超越右侧停放的车辆时,为预防其突然起步或开启车门,应怎样做?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '预留出横向安全距离,减速行驶' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '保持正常速度行驶' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '长鸣喇叭' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '加速通过' }
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 9,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '驾驶人行车中看到注意儿童标志的时候,应怎样做?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '加速行驶' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '绕道行驶' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '谨慎选择行车速度' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '保持正常车速行驶' }
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 10,
|
|
|
+ // questionType: 1,
|
|
|
+ // questionContent: '抢救昏迷失去知觉的伤员需注意什么?',
|
|
|
+ // analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
|
|
|
+ // questionOptionList: [
|
|
|
+ // { id: 1, optionCode: 'A', optionContent: '马上实施心肺复苏' },
|
|
|
+ // { id: 2, optionCode: 'B', optionContent: '使劲掐伤员的人中' },
|
|
|
+ // { id: 3, optionCode: 'C', optionContent: '连续拍打伤员面部' },
|
|
|
+ // { id: 4, optionCode: 'D', optionContent: '抢救前先检查呼吸' }
|
|
|
+ // ],
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ //请求接口获取答案
|
|
|
+ answers: {
|
|
|
+ 1: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 2: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 3: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 4: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 5: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 6: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 7: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 8: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 9: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ 10: {
|
|
|
+ code: 'A'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 题目索引
|
|
|
+ currentIndex: 0,
|
|
|
+ // key = 题目Id, value = 回答结果数据
|
|
|
+ userAnswers: {},
|
|
|
+ // 回答题目数量
|
|
|
+ answerCount: 0,
|
|
|
+ // 当前题目, 用户的答案
|
|
|
+ currentUserAnswer: null,
|
|
|
+ arr: [],
|
|
|
+ token: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ waitForGlobalImages().then((path) => {
|
|
|
+ this.globalImages = path
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.token = this.$queue.getData('token')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ next() {
|
|
|
+ if(this.currentIndex < this.paperQuestionList.length - 1) {
|
|
|
+ this.currentIndex = this.currentIndex + 1
|
|
|
+ const questionId = this.paperQuestionList[this.currentIndex].id
|
|
|
+ const answerResult = this.userAnswers[questionId]
|
|
|
+ // console.log(questionId, answerResult, this.userAnswers)
|
|
|
+ if(answerResult) {
|
|
|
+ this.$refs.examinationItem.selectCode = answerResult.code
|
|
|
+ this.currentUserAnswer = answerResult
|
|
|
+ } else {
|
|
|
+ this.$refs.examinationItem.selectCode = null
|
|
|
+ this.currentUserAnswer = null
|
|
|
+ }
|
|
|
+ // console.log('下一题', this.currentUserAnswer)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prev() {
|
|
|
+ if(this.currentIndex > 0) {
|
|
|
+ this.currentIndex = this.currentIndex - 1
|
|
|
+ const questionId = this.paperQuestionList[this.currentIndex].id
|
|
|
+ const answerResult = this.userAnswers[questionId]
|
|
|
+ // console.log(questionId, answerResult, this.userAnswers)
|
|
|
+ if(answerResult) {
|
|
|
+ this.$refs.examinationItem.selectCode = answerResult.code
|
|
|
+ this.currentUserAnswer = answerResult
|
|
|
+ } else {
|
|
|
+ this.$refs.examinationItem.selectCode = null
|
|
|
+ this.currentUserAnswer = null
|
|
|
+ }
|
|
|
+ // console.log('上一题', this.currentUserAnswer)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 处理选择选项事件
|
|
|
+ * @param {Object} originalCode 原来选择的答案
|
|
|
+ * @param {Object} code 现在选择的答案
|
|
|
+ * @param {Object} questionId 题目Id
|
|
|
+ * @param {Object} questionIndex 索引
|
|
|
+ */
|
|
|
+ handleSelected(originalCode, code, questionId, questionIndex) {
|
|
|
+ const answerResult = this.userAnswers[questionId]
|
|
|
+ if(answerResult) {
|
|
|
+ this.$refs.examinationItem.selectCode = originalCode
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ // 查询答案判断是否正确
|
|
|
+ const correctValue = this.answers[questionId].code
|
|
|
+ const answer = {
|
|
|
+ code,
|
|
|
+ correctValue,
|
|
|
+ isCorrect: correctValue === code,
|
|
|
+ analysis: this.paperQuestionList[questionIndex].analysis
|
|
|
+ }
|
|
|
+ this.userAnswers[questionId] = answer
|
|
|
+ this.currentUserAnswer = answer
|
|
|
+ }
|
|
|
+ const ids = Object.keys(this.userAnswers)
|
|
|
+ this.answerCount = ids && ids.length || 0
|
|
|
+ // console.log('eeeeee', code, questionId, questionIndex, this.$refs.examinationItem.testValue)
|
|
|
+ },
|
|
|
+ showAnalysis(analysis) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '题目解析',
|
|
|
+ content: analysis,
|
|
|
+ confirmText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navgo(e) {
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ if (uni.getStorageSync('sendMsg')) {
|
|
|
+ uni.requestSubscribeMessage({
|
|
|
+ tmplIds: this.arr,
|
|
|
+ success(re) {
|
|
|
+ // console.log(re,'**********')
|
|
|
+ var datas = JSON.stringify(re);
|
|
|
+ if (datas.indexOf("accept") != -1) {
|
|
|
+ console.log(re)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ let that = this
|
|
|
+ if (that.token) {
|
|
|
+ // 请求接口获取成绩, 超过了多少考生, 是否合格
|
|
|
+ const params = {
|
|
|
+ score: 80,
|
|
|
+ exceeding: 70,
|
|
|
+ qualified: true,
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: e + '?score=' + params.score + '&exceeding=' + params.exceeding + '&qualified=' + params.qualified
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .safety-exam {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ height: 108rpx;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ box-sizing: content-box;
|
|
|
+ }
|
|
|
+ .tabbar_bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 108rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ // padding-left: 30rpx;
|
|
|
+ // padding-right: 30rpx;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ box-sizing: content-box;
|
|
|
+ border-top: 1rpx solid #E4E7ED;
|
|
|
+ z-index: 101;
|
|
|
+ }
|
|
|
+</style>
|