You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
7.0 KiB
334 lines
7.0 KiB
<template>
|
|
<view class="content">
|
|
<up-navbar leftText=" " title="" :safeAreaInsetTop="false" :autoBack="true">
|
|
<template #center>
|
|
<view class="u-nav-slot flex">
|
|
<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">答题模式</view>
|
|
<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">背题模式</view>
|
|
</view>
|
|
</template>
|
|
</up-navbar>
|
|
|
|
|
|
<view class="con padding">
|
|
<view class="h1_row">
|
|
<text class="tag">{{types[questionBank.types-1]}}</text>
|
|
<text class="h1">{{ questionBank.title}}</text>
|
|
</view>
|
|
<view class="option">
|
|
<view class="optionItem flex" v-for="(item,index) in questionBank.optionArr" @click="chooseOption(item)">
|
|
<view class="icon"></view>
|
|
<up-icon name="close-circle-fill" color="#ff0000" size="20"></up-icon>
|
|
<up-icon name="checkmark-circle-fill" color="#55ff7f" size="20"></up-icon>
|
|
<view class="text">{{item.key}} {{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="answer flex">
|
|
<view class="ans">正确答案是：<text>B</text></view>
|
|
<view class="ans">您的答案是：<text>B</text></view>
|
|
</view>
|
|
<view class="btn_row flex-b">
|
|
<view class="btn border" @click="$goPage('/pages/exercises/lastPage/lastPage')">上一题</view>
|
|
<view class="btn bg">下一题</view>
|
|
</view>
|
|
<view class="analysis">
|
|
<view class="tit">题目解析</view>
|
|
<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view>
|
|
</view>
|
|
<view class="btn" @click="">确定</view>
|
|
</view>
|
|
|
|
<view class="bottomBar">
|
|
<view class="ul">
|
|
<view class="li">
|
|
<view class="icon">1</view>
|
|
<view class="text">答对</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="icon">1</view>
|
|
<view class="text">答错</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="icon">1</view>
|
|
<view class="text">题目</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="icon">
|
|
<image src="@/static/images/theory/fankui.png" mode=""></image>
|
|
</view>
|
|
<view class="text">反馈</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="icon">
|
|
<image src="@/static/images/theory/dtk.png" mode=""></image>
|
|
</view>
|
|
<view class="text">答题卡</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="icon">
|
|
<image src="@/static/images/theory/sc.png" mode=""></image>
|
|
</view>
|
|
<view class="text">收藏</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { startQuestionApi, submitAnswerResultApi } from '@/config/api.js'
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from 'vue';
|
|
const currentNav = ref('1')
|
|
const types = ref([
|
|
'单选题',
|
|
'多选题',
|
|
'判断题'
|
|
])
|
|
// 1：单选题，2：多选题，3：判断题
|
|
function changeNav(val) {
|
|
console.log(window)
|
|
if(currentNav.value == val) return
|
|
currentNav.value = val
|
|
}
|
|
function goEmam() {
|
|
uni.navigateTo({
|
|
// url: '/pages/exercises/exam/exam',
|
|
// url: '/pages/exercises/beforeExam/beforeExam',
|
|
// url: '/pages/exercises/examResults/examResults',
|
|
// url: '/pages/exercises/wrongQuestion/wrongQuestion',
|
|
// url: '/pages/exercises/theoryStudy/theoryStudy',
|
|
url: '/pages/vip/vipEntry/vipEntry'
|
|
|
|
})
|
|
}
|
|
function changeTabbar(val) {
|
|
console.log(val)
|
|
}
|
|
|
|
// 请求数据
|
|
const questionBank = ref({})
|
|
async function startQuestionFn() {
|
|
let obj = {
|
|
carType: 'car',
|
|
stepType: '1',
|
|
volume: '0',
|
|
types: '1',
|
|
sift: '0',
|
|
contentType: '1'
|
|
}
|
|
const {data: res} = await startQuestionApi(obj)
|
|
console.log(res.questionBank.types)
|
|
if(res.questionBank.types !=3) {
|
|
res.questionBank.optionArr = []
|
|
let abcd = [
|
|
'a',
|
|
'b',
|
|
'c',
|
|
'd',
|
|
'e',
|
|
'f'
|
|
]
|
|
abcd.forEach((k,i)=>{
|
|
let option = 'option'+k
|
|
if(res.questionBank[option]) {
|
|
let obj = {
|
|
key: k.toLocaleUpperCase(),
|
|
text: res.questionBank[option],
|
|
index: i+1
|
|
}
|
|
res.questionBank.optionArr.push(obj)
|
|
}
|
|
})
|
|
}
|
|
questionBank.value = res.questionBank
|
|
console.log(questionBank.value)
|
|
}
|
|
|
|
startQuestionFn()
|
|
|
|
// 选择答案
|
|
const curOption = ref({})
|
|
async function chooseOption(item) {
|
|
curOption.value = item
|
|
let obj = {
|
|
answer: '1',
|
|
carType: 'car',
|
|
questionId: questionBank.value.id,
|
|
result: '0',
|
|
stepType: 1,
|
|
|
|
}
|
|
const {data: res} = await submitAnswerResultApi(obj)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
image {display: block;width: 100%;height: 100%;}
|
|
.bottomBar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 98rpx;
|
|
background: #FFFFFF;
|
|
border-top: 1rpx solid #F4F4F4;
|
|
.ul {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
align-items: center;
|
|
.li {
|
|
width: 16.6%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
font-size: 30rpx;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
image {
|
|
display: block;
|
|
margin-top: 4rpx;
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
}
|
|
.text {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
padding: 120rpx 0 0 0;
|
|
min-height: 100vh;
|
|
.u-nav-slot {
|
|
width: 306rpx;
|
|
height: 54rpx;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #333333;
|
|
display: flex;
|
|
|
|
.btn {
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 54rpx;
|
|
|
|
&.active {
|
|
background-color: #333333;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.btn_row {
|
|
padding: 100rpx 0 50rpx 0;
|
|
.btn {
|
|
width: 44%;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
border: 1rpx solid $themC;
|
|
line-height: 76rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: $themC;
|
|
&.bg {
|
|
background: #3776FF;
|
|
border-radius: 38rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
}
|
|
}
|
|
.con {
|
|
.h1_row {
|
|
margin-bottom: 50rpx;
|
|
.tag {
|
|
display: inline-block;
|
|
// width: 66px;
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
padding: 4rpx 6rpx;
|
|
background: #63C168;
|
|
border-radius: 6rpx;
|
|
margin-top: -2rpx;
|
|
margin-right: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
text.h1 {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
.option {
|
|
width: 100%;
|
|
.optionItem {
|
|
margin-bottom: 50rpx;
|
|
align-items: center;
|
|
.icon {
|
|
width: 36rpx;
|
|
height:36rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx solid #999;
|
|
}
|
|
|
|
.text {
|
|
font-size: 32rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.answer {
|
|
height: 90rpx;
|
|
background: #F4F4F4;
|
|
line-height: 90rpx;
|
|
padding: 0 30rpx;
|
|
margin-top: 20rpx;
|
|
.ans {
|
|
margin-right: 60rpx;
|
|
text {
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.analysis {
|
|
margin-top: 60rpx;
|
|
.tit {
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
position: relative;
|
|
padding-left: 30rpx;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8rpx;
|
|
width: 6rpx;
|
|
height: 30rpx;
|
|
background: linear-gradient(0deg, #43EA80 0%, #38F8D4 100%);
|
|
border-radius: 3rpx;
|
|
}
|
|
}
|
|
|
|
.txt {
|
|
margin-top: 39rpx;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|