392 lines
11 KiB
Vue
392 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<cu-custom bgColor="bg-gradual-blueness" :isBack="true" isRingt>
|
|
<block slot="backText">返回</block>
|
|
<block slot="content">课后练习</block>
|
|
<block slot="right"><view @click="correctAnswerShow = !correctAnswerShow">答案解析</view></block>
|
|
</cu-custom>
|
|
<view class="container">
|
|
<view v-if="options.length > 0">
|
|
<view class="top">
|
|
<view class="suject">
|
|
<text>当前试题{{ current + 1 }}/{{ options.length }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="topic">
|
|
<view class="title">
|
|
<text>
|
|
{{ current + 1 }}.{{ options[current].QUESTIONDRY }}
|
|
</text>
|
|
<text v-show="options[current].QUESTIONTYPE === '1'">
|
|
(单选)
|
|
</text>
|
|
<text v-show="options[current].QUESTIONTYPE === '2'">
|
|
(多选)
|
|
</text>
|
|
<text v-show="options[current].QUESTIONTYPE === '3'">
|
|
(判断)
|
|
</text>
|
|
<text v-show="options[current].QUESTIONTYPE === '4'">
|
|
(填空)
|
|
</text>
|
|
</view>
|
|
<view
|
|
class="options"
|
|
v-show="options[current].QUESTIONTYPE === '1'"
|
|
>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('radio', 'A')"
|
|
:class="{ active: options[current].checked === 'A' }"
|
|
>
|
|
<text class="option">A</text>
|
|
<text class="text">{{ options[current].OPTIONA }}</text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('radio', 'B')"
|
|
:class="{ active: options[current].checked === 'B' }"
|
|
>
|
|
<text class="option">B</text>
|
|
<text class="text">{{ options[current].OPTIONB }}</text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('radio', 'C')"
|
|
:class="{ active: options[current].checked === 'C' }"
|
|
>
|
|
<text class="option">C</text>
|
|
<text class="text">{{ options[current].OPTIONC }}</text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('radio', 'D')"
|
|
:class="{ active: options[current].checked === 'D' }"
|
|
>
|
|
<text class="option">D</text>
|
|
<text class="text">{{ options[current].OPTIOND }}</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="options"
|
|
v-show="options[current].QUESTIONTYPE === '2'"
|
|
>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('multiple', 'A')"
|
|
:class="{
|
|
active:
|
|
options[current].checked &&
|
|
options[current].checked.indexOf('A') !== -1,
|
|
}"
|
|
>
|
|
<text class="option">A</text>
|
|
<text class="text">{{ options[current].OPTIONA }}</text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('multiple', 'B')"
|
|
:class="{
|
|
active:
|
|
options[current].checked &&
|
|
options[current].checked.indexOf('B') !== -1,
|
|
}"
|
|
>
|
|
<text class="option">B</text>
|
|
<text class="text">{{ options[current].OPTIONB }}</text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('multiple', 'C')"
|
|
:class="{
|
|
active:
|
|
options[current].checked &&
|
|
options[current].checked.indexOf('C') !== -1,
|
|
}"
|
|
>
|
|
<text class="option">C</text>
|
|
<text class="text">{{ options[current].OPTIONC }}</text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('multiple', 'D')"
|
|
:class="{
|
|
active:
|
|
options[current].checked &&
|
|
options[current].checked.indexOf('D') !== -1,
|
|
}"
|
|
>
|
|
<text class="option">D</text>
|
|
<text class="text">{{ options[current].OPTIOND }}</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="options"
|
|
v-show="options[current].QUESTIONTYPE === '3'"
|
|
>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('judge', 'A')"
|
|
:class="{ active: options[current].checked === 'A' }"
|
|
>
|
|
<text class="option">{{ options[current].OPTIONA }}</text>
|
|
<text class="text"></text>
|
|
</view>
|
|
<view
|
|
class="item"
|
|
@click="fnChooseTopic('judge', 'B')"
|
|
:class="{ active: options[current].checked === 'B' }"
|
|
>
|
|
<text class="option">{{ options[current].OPTIONB }}</text>
|
|
<text class="text"></text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="options"
|
|
v-show="options[current].QUESTIONTYPE === '4'"
|
|
>
|
|
<view class="item">
|
|
<textarea
|
|
maxlength="255"
|
|
v-model="options[current].checked"
|
|
placeholder="请输入内容"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="correct-answer" v-show="correctAnswerShow">
|
|
<text>正确答案</text>
|
|
<view>{{ options[current].ANSWER || "无" }}</view>
|
|
<text>权威解读</text>
|
|
<view>{{ options[current].DESCR || "无" }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<button
|
|
class="cu-btn"
|
|
:style="{
|
|
width: current === options.length - 1 ? '100%' : '45%',
|
|
}"
|
|
v-show="current !== 0"
|
|
@click="current--"
|
|
>
|
|
上一题
|
|
</button>
|
|
<button
|
|
class="cu-btn bg-blue"
|
|
:style="{ width: current === 0 ? '100%' : '45%' }"
|
|
v-show="current !== options.length - 1"
|
|
@click="current++"
|
|
>
|
|
下一题
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view v-if="options.length===0" class="dy-null">
|
|
<view class="dy-null-img">
|
|
<image src="../../../static/null.png" mode=""></image>
|
|
</view>
|
|
<view class="dy-null-title">
|
|
暂无数据
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {basePath} from "@/common/tool";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
options: [{}],
|
|
correctAnswerShow: false,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.fnGetData(options.VIDEOCOURSEWARE_ID)
|
|
},
|
|
methods: {
|
|
fnGetData(VIDEOCOURSEWARE_ID) {
|
|
uni.showLoading({
|
|
title: '请稍候'
|
|
})
|
|
uni.request({
|
|
url: basePath + '/app/question/listAllByVideo',
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
data: {
|
|
VIDEOCOURSEWARE_ID: VIDEOCOURSEWARE_ID,
|
|
},
|
|
success: (res) => {
|
|
uni.hideLoading(); //结束加载中动画
|
|
var resData = res.data;
|
|
if (resData.result === 'success') {
|
|
this.options = resData.varList;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
fnChooseTopic(type, checked) {
|
|
this.$set(this.options[this.current], "checked", '');
|
|
if (type === "judge" || type === "radio") {
|
|
if (this.options[this.current].checked === checked) {
|
|
this.options[this.current].checked = "";
|
|
} else {
|
|
this.options[this.current].checked = checked;
|
|
}
|
|
}
|
|
if (type === "multiple") {
|
|
if (this.options[this.current].checked) {
|
|
const checkedArr = this.options[this.current].checked.split(",");
|
|
if (checkedArr.indexOf(checked) !== -1) {
|
|
checkedArr.splice(checkedArr.indexOf(checked), 1);
|
|
this.options[this.current].checked = checkedArr.join(",");
|
|
} else {
|
|
checkedArr.push(checked);
|
|
checkedArr.sort();
|
|
this.options[this.current].checked = checkedArr.join(",");
|
|
}
|
|
} else {
|
|
this.options[this.current].checked = checked;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
background: #fff;
|
|
padding: 20upx;
|
|
box-sizing: border-box;
|
|
min-height: 100vh;
|
|
|
|
.top {
|
|
background: url("/static/study/bgimg1.png");
|
|
background-size: 100% 100%;
|
|
border-radius: 20upx;
|
|
padding: 40upx;
|
|
text-align: center;
|
|
|
|
.suject {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 32upx;
|
|
}
|
|
|
|
.questions {
|
|
color: #eeecec;
|
|
font-size: 30upx;
|
|
padding-top: 20upx;
|
|
}
|
|
}
|
|
|
|
.topic {
|
|
margin-top: 20upx;
|
|
margin-bottom: 80upx;
|
|
padding: 20upx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 32upx;
|
|
font-weight: 600;
|
|
|
|
.question-type {
|
|
border-radius: 40upx;
|
|
padding: 4upx 14upx;
|
|
border: 1upx solid #3c9cff;
|
|
font-size: 24upx;
|
|
color: #3c9cff;
|
|
}
|
|
}
|
|
|
|
.options {
|
|
margin-top: 40upx;
|
|
|
|
.item {
|
|
position: relative;
|
|
margin-top: 40upx;
|
|
color: #696868;
|
|
|
|
&.active {
|
|
color: #3c9cff;
|
|
|
|
.option {
|
|
background-color: #3c9cff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.option {
|
|
background-color: #eee;
|
|
border-radius: 80upx;
|
|
width: 65upx;
|
|
height: 65upx;
|
|
line-height: 65upx;
|
|
text-align: center;
|
|
font-size: 30upx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.text {
|
|
margin-left: 30upx;
|
|
height: 60upx;
|
|
line-height: 60upx;
|
|
}
|
|
|
|
uni-textarea{
|
|
width: 100%;
|
|
border: 1px solid #ccc;
|
|
padding: 10upx;
|
|
border-radius: 10upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.correct-answer {
|
|
margin-top: 40upx;
|
|
|
|
text {
|
|
display: inline-block;
|
|
margin-top: 40upx;
|
|
color: #696868;
|
|
font-size: 30upx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
view {
|
|
margin-top: 20upx;
|
|
color: #333;
|
|
padding: 20upx;
|
|
background-color: #eee;
|
|
border-radius: 10upx;
|
|
font-size: 30upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
left: 0;
|
|
padding: 20upx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
|
|
button {
|
|
border-radius: 10upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|