<template>
|
<view class="box">
|
<view class="box_bgimage" :style="{ backgroundImage: 'url(' + bg + ')' }">
|
<text class="box_bgimage_a">{{ title }}</text>
|
<text class="box_bgimage_b">{{ content }}</text>
|
</view>
|
<view class="box_list">
|
<view class="box_list_answer" v-if="list && list.length > 0">
|
<view v-if="status == 1 || status == 2" class="score_static">
|
<text class="name">本次得分：</text>
|
<text class="num" :class="{ warry: status == 2 }">{{ score }}分</text>
|
</view>
|
<!-- 单选/判断 -->
|
<view v-for="(item, index) in list" :key="index" class="list_item">
|
<view class="box_list_answer_name">
|
<text>{{ index + 1 }}、{{ item.title }}</text>
|
<text v-if="item.score"> ({{ item.score }}分)</text>
|
<text style="color: #ed4545">*</text>
|
</view>
|
<template v-if="item.type == 1 || item.type == 0">
|
<view
|
class="box_list_answer_item"
|
v-for="(line, lIndex) in item.options"
|
:key="lIndex"
|
@click="select(line, index)"
|
>
|
<image
|
src="@/static/video@2x.png"
|
v-if="!item.selAnswer || item.selAnswer !== line.code"
|
/>
|
<image
|
src="@/static/video_sel@2x.png"
|
v-if="
|
(item.selAnswer &&
|
item.answer === item.selAnswer &&
|
item.selAnswer == line.code) ||
|
(item.selAnswer == line.code && status != '2') ||
|
(item.answer === item.selAnswer &&
|
item.selAnswer == line.code)
|
"
|
/>
|
<image
|
src="@/static/video_error@2x.png"
|
v-if="
|
item.selAnswer &&
|
item.selAnswer == line.code &&
|
item.answer !== item.selAnswer &&
|
status == '2'
|
"
|
/>
|
<text v-if="!item.selAnswer || item.selAnswer !== line.code"
|
><text class="mr24">{{ line.code }}</text>
|
{{ line.value }}</text
|
>
|
<text
|
v-if="
|
(item.selAnswer &&
|
item.answer === item.selAnswer &&
|
item.selAnswer == line.code) ||
|
(item.selAnswer == line.code && status != '2') ||
|
(item.answer === item.selAnswer &&
|
item.selAnswer == line.code)
|
"
|
style="color: rgba(77, 153, 168, 1)"
|
><text class="mr24" style="color: rgba(77, 153, 168, 1)">{{
|
line.code
|
}}</text>
|
{{ line.value }}</text
|
>
|
<text
|
v-if="
|
item.selAnswer &&
|
item.selAnswer == line.code &&
|
item.answer !== item.selAnswer &&
|
status == '2'
|
"
|
style="color: rgba(237, 69, 69, 1)"
|
><text class="mr24" style="color: rgba(237, 69, 69, 1)">{{
|
line.code
|
}}</text>
|
{{ line.value }}</text
|
>
|
</view>
|
<view
|
class="box_list_answer_tips"
|
style="margin-bottom: 0rpx"
|
v-if="
|
item.selAnswer &&
|
item.answer !== item.selAnswer &&
|
status != '0'
|
"
|
>
|
<view class="line">
|
<image src="@/static/ic_wrong@2x.png" />
|
<text>回答错误</text>
|
</view>
|
<view class="line">正确答案：{{ item.answer }}</view>
|
</view>
|
<view
|
class="box_list_answer_tips"
|
v-if="
|
item.selAnswer &&
|
item.answer === item.selAnswer &&
|
status != '0'
|
"
|
>
|
<view class="line">
|
<image src="@/static/ic_success@2.png" />
|
<text class="success">回答正确</text>
|
</view>
|
</view>
|
</template>
|
<template v-if="item.type == 2">
|
<view
|
class="box_list_answer_item"
|
v-for="(line, lIndex) in item.options"
|
:key="lIndex"
|
@click="changeBox(index, lIndex)"
|
>
|
<image src="@/static/checkbox@2x.png" v-if="!line.checked" />
|
<image
|
src="@/static/checkbo1x_sel@2x.png"
|
v-if="
|
(line.checked && status != '2') ||
|
(item.selAnswer === item.answer && line.checked)
|
"
|
/>
|
<image
|
src="@/static/checkbox_wrong@2x.png"
|
v-if="
|
line.checked &&
|
item.selAnswer !== item.answer &&
|
status == '2'
|
"
|
/>
|
<text v-if="!line.checked"
|
><text class="mr24">{{ line.code }}</text>
|
{{ line.value }}</text
|
>
|
<text
|
v-if="
|
(line.checked && status != '2') ||
|
(item.selAnswer === item.answer && line.checked)
|
"
|
style="color: rgba(77, 153, 168, 1)"
|
><text class="mr24" style="color: rgba(77, 153, 168, 1)">{{
|
line.code
|
}}</text>
|
{{ line.value }}</text
|
>
|
<text
|
v-if="
|
line.checked &&
|
item.selAnswer !== item.answer &&
|
status == '2'
|
"
|
style="color: rgba(237, 69, 69, 1)"
|
><text class="mr24" style="color: rgba(237, 69, 69, 1)">{{
|
line.code
|
}}</text>
|
{{ line.value }}</text
|
>
|
</view>
|
<view
|
class="box_list_answer_tips"
|
v-if="
|
item.selAnswer &&
|
item.answer !== item.selAnswer &&
|
status != '0'
|
"
|
>
|
<view class="line">
|
<image src="@/static/ic_wrong@2x.png" />
|
<text>回答错误</text>
|
</view>
|
<view class="line">正确答案：{{ item.answer }}</view>
|
</view>
|
<view
|
class="box_list_answer_tips"
|
v-if="
|
item.selAnswer &&
|
item.answer === item.selAnswer &&
|
status != '0'
|
"
|
>
|
<view class="line">
|
<image src="@/static/ic_success@2.png" />
|
<text class="success">回答正确</text>
|
</view>
|
</view>
|
</template>
|
</view>
|
<view class="empty"></view>
|
<view
|
v-if="status == '0'"
|
class="box_list_answer_btn"
|
:class="{ disable: !answerIng }"
|
@click="onSubmit()"
|
>提交</view
|
>
|
<view v-if="status == '1'" class="box_list_answer_btn" @click="next()"
|
>恭喜你答题成功，去申请</view
|
>
|
<view
|
v-if="status == '2'"
|
style="background-color: #db534c"
|
class="box_list_answer_btn"
|
@click="handleAgain"
|
>答题失败，再来一次</view
|
>
|
<!-- 多选 -->
|
<!-- <template v-else-if="list[i].type === 2">
|
<view class="box_list_answer_item" v-for="(item, index) in list[i].options" :key="index"
|
@click="selectMultiple(item.code)">
|
<image src="@/static/checkbox_wrong@2x.png"
|
v-if="success && multiple.toString().indexOf(item.code) !== -1" />
|
<image src="@/static/checkbox@2x.png"
|
v-else-if="!multiple || multiple.toString().indexOf(item.code) === -1" />
|
<image src="@/static/checkbo1x_sel@2x.png"
|
v-else-if="multiple.toString().indexOf(item.code) !== -1" />
|
<text style="color: rgba(237, 69, 69, 1)"
|
v-if="success && multiple.toString().indexOf(item.code) !== -1">{{item.code}} {{item.value}}</text>
|
<text v-else-if="!multiple || multiple.toString().indexOf(item.code) === -1">{{item.code}} {{item.value}}</text>
|
<text style="color: rgba(77, 153, 168, 1)"
|
v-else-if="multiple.toString().indexOf(item.code) !== -1">{{item.code}} {{item.value}}</text>
|
</view>
|
</template> -->
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { getProblemsVO, getSystemDictData, saveProblemsVO } from '@/api'
|
export default {
|
name: 'answer',
|
|
data() {
|
return {
|
list: [],
|
bg: require("@/static/banner_dati.png"),
|
title: '',
|
content: '',
|
|
status: '0',
|
score: 0
|
}
|
},
|
computed: {
|
answerIng() {
|
let count = 0
|
this.list.forEach(item => {
|
if (item.selAnswer || item.selAnswer == 0) {
|
count++
|
}
|
})
|
return count === this.list.length
|
}
|
},
|
onLoad() {
|
this.getProblems()
|
this.getInfo()
|
},
|
|
methods: {
|
getInfo() {
|
// title
|
getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'THEME'
|
}).then(res => {
|
if (res.code === 200) {
|
this.title = res.data.code
|
}
|
})
|
// this.$u.api.getSystemDictData({
|
getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'DESCRIPTION'
|
}).then(res => {
|
if (res.code === 200) {
|
this.content = res.data.code
|
}
|
})
|
},
|
getProblems() {
|
getProblemsVO({ useType: 1 })
|
.then(res => {
|
if (res.code === 200) {
|
res.data.forEach(item => {
|
// 判断
|
if (item.type === 0) {
|
item.options = [{ code: '正确' }, { code: '错误' }]
|
}
|
// 单选/多选
|
if (item.type === 1 || item.type === 2) {
|
item.options = JSON.parse(item.options)
|
}
|
if (item.type === 2) {
|
item.options.forEach(i => {
|
i.checked = false
|
})
|
}
|
item.status = '0'
|
item.selAnswer = null
|
})
|
this.list = res.data
|
}
|
// res.param.problemsDOList.forEach(item => {
|
// item.options = JSON.parse(item.options)
|
// })
|
// this.list = res.param.problemsDOList
|
// console.log(this.list)
|
})
|
},
|
// 单选选择中题目
|
select(line, i) {
|
if (this.status != '0') return
|
this.list.forEach((item, index) => {
|
if (index === i) {
|
item.selAnswer = line.code
|
}
|
})
|
// this.problemIndex = index
|
},
|
changeBox(index, jeck) {
|
if (this.status != '0') return
|
this.list.forEach((item, i) => {
|
if (index === i) {
|
item.options.forEach((item2, j) => {
|
if (j === jeck) {
|
item2.checked = !item2.checked
|
}
|
})
|
item.selAnswer = item.options.filter(a => a.checked).map(b => b.code).sort().join(',')
|
}
|
})
|
},
|
sort(arr) {
|
arr.sort(function (a, b) {
|
return a.localeCompare(b)
|
})
|
},
|
// 多选
|
selectMultiple(key) {
|
if (!this.multiple) {
|
this.multiple = key
|
return
|
}
|
let arr = this.multiple.split(',')
|
if (this.multiple.indexOf(key) !== -1) {
|
arr.forEach((item, index) => {
|
if (key === item) {
|
arr.splice(index, 1)
|
}
|
})
|
this.sort(arr)
|
this.multiple = arr.join(',')
|
} else {
|
arr.push(key)
|
this.sort(arr)
|
this.multiple = arr.join(',')
|
}
|
},
|
// 下一题
|
onSubmit() {
|
if (!this.answerIng) return
|
const { list } = this
|
// 验证所有题目都有选项
|
let count = 0
|
list.forEach(item => {
|
if (!item.selAnswer) {
|
count++
|
}
|
})
|
if (count > 0) {
|
return uni.showToast({
|
title: '请先完成所有答题在提交',
|
icon: 'none'
|
})
|
}
|
// 判断对错
|
let flag = 0
|
list.forEach(item => {
|
if (item.selAnswer !== item.answer) {
|
flag++
|
} else {
|
this.score += item.score
|
}
|
})
|
if (flag > 0) {
|
this.status = '2'
|
return uni.showToast({
|
title: '答题失败，再来一次',
|
icon: 'none'
|
})
|
} else {
|
this.status = '1'
|
}
|
},
|
handleAgain() {
|
this.status = '0'
|
this.score = 0
|
this.getProblems()
|
},
|
next() {
|
saveProblemsVO({
|
openId: this.$store.state.openId,
|
useType: '1',
|
content: ''
|
}).then(res => {
|
this.score = 0
|
uni.navigateTo({
|
url: `/pages/userinfo/userinfo?answerId=${res.data}`
|
})
|
})
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
height: 100vh;
|
background: $uni-color-primary;
|
.box_bgimage {
|
width: 100%;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
height: 223rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
justify-content: center;
|
background-repeat: no-repeat;
|
background-size: cover;
|
.box_bgimage_a {
|
font-size: 54rpx;
|
font-weight: bold;
|
color: #ffffff;
|
text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.19);
|
}
|
.box_bgimage_b {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #ffffff;
|
text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.24);
|
margin-top: 18rpx;
|
}
|
}
|
.box_list {
|
width: 100%;
|
height: calc(100vh - 253rpx);
|
padding: 0 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
.box_list_answer {
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
background: #ffffff;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
position: relative;
|
.box_list_answer_name {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
margin-bottom: 32rpx;
|
}
|
.box_list_answer_tips {
|
width: 100%;
|
padding: 22rpx 30rpx;
|
box-sizing: border-box;
|
background: #f7f7f7;
|
border-radius: 8rpx;
|
margin-bottom: 24rpx;
|
.line {
|
display: flex;
|
align-items: center;
|
font-size: 28rpx;
|
color: #333333;
|
margin-bottom: 20rpx;
|
&:nth-last-child(1){
|
margin-bottom: 0;
|
}
|
}
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #e42d2d;
|
margin-left: 16rpx;
|
}
|
.success {
|
color: $uni-color-primary;
|
}
|
}
|
}
|
.score_static {
|
display: flex;
|
font-size: 32rpx;
|
margin-bottom: 40rpx;
|
.name {
|
font-weight: 600;
|
}
|
.num {
|
color: $uni-color-primary;
|
}
|
.warry {
|
color: #ed4545;
|
}
|
}
|
.list_item {
|
margin-bottom: 46rpx;
|
}
|
.box_list_answer_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
.des {
|
background: #cccccc !important;
|
border: none !important;
|
}
|
.empty {
|
height: 160rpx;
|
width: 100%;
|
}
|
.box_list_answer_btn {
|
position: fixed;
|
bottom: 120rpx;
|
left: 60rpx;
|
width: 630rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: $uni-color-primary;
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(77, 153, 168, 0.3);
|
border-radius: 44rpx;
|
font-size: 30rpx;
|
color: #ffffff;
|
}
|
.disable {
|
background-color: #cccccc;
|
}
|
}
|
}
|
</style>
|
