integrated_traffic_uniapp/pages/application/onlinexxks/my-study-detail.vue

472 lines
15 KiB
Vue
Raw Normal View History

2024-01-16 17:24:49 +08:00
<template>
<view>
<view class="ext-bg">
<!-- <view class="extin-bg">
<cu-custom bgColor="bg-gradual-no" :isBack="true" :isRingt="true" :backUrl="backUrl">
<block slot="backText">返回</block>
<block slot="content">习题练习</block>
</cu-custom>
</view> -->
<view class="extin-bg">
<view class="cu-bar fixed bg-gradual-no">
<view class="action" @tap="BackPage">
<text class="cuIcon-back"></text>
<slot name="backText">返回</slot>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
<slot name="content">习题练习</slot>
</view>
<view class="right">
<slot name="right"></slot>
</view>
<!-- <slot name="right"></slot> -->
</view>
</view>
<view class="ext-box">
<view class="ext-topic">
<view class="ext-title">
{{sindex+1}}
</view>
<view class="ext-content">
<view class="ext-text">
<text v-if="form.QUESTIONTYPE[sindex] === '1'" class="mark">()</text>
<text v-if="form.QUESTIONTYPE[sindex] === '2'" class="mark">()</text>
<text v-if="form.QUESTIONTYPE[sindex] === '3'" class="mark">()</text>
{{ form.QUESTIONLIST[sindex].QUESTIONDRY }}
</view>
<view class="ext-select">
<radio-group v-if="form.QUESTIONTYPE[sindex] == '1'" class="ext-group" v-model="form.ANSWER[sindex]" @change="radioQuestionChange($event,sindex)">
<label class="answer-lable">
<radio class="blue" :class="(form.ANSWER[sindex]=='A'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='A'?true:false" :disabled="isDisabled"
value="A"></radio>
<text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
</label>
<label class="answer-lable">
<radio class="blue" :class="(form.ANSWER[sindex]=='B'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='B'?true:false" :disabled="isDisabled"
value="B"></radio>
<text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
</label>
<label class="answer-lable">
<radio class="blue" :class="(form.ANSWER[sindex]=='C'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='C'?true:false" :disabled="isDisabled"
value="C"></radio>
<text class="title">C.{{ form.QUESTIONLIST[sindex].OPTIONC }}</text>
</label>
<label class="answer-lable">
<radio class="blue" :class="(form.ANSWER[sindex]=='D'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='D'?true:false" :disabled="isDisabled"
value="D"></radio>
<text class="title">D.{{ form.QUESTIONLIST[sindex].OPTIOND }}</text>
</label>
</radio-group>
<checkbox-group v-if="form.QUESTIONTYPE[sindex] == '2'" class="ext-group checkbox" @change="checkQuestionChange($event,sindex)">
<label class="answer-lable">
<checkbox :disabled="isDisabled" value="A" :class="form.ANSWER[sindex].includes('A')?'checked':''" :checked="(form.ANSWER[sindex].includes('A') ? true : false)"></checkbox>
<text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
</label>
<label class="answer-lable">
<checkbox :disabled="isDisabled" value="B" :class="form.ANSWER[sindex].includes('B')?'checked':''" :checked="(form.ANSWER[sindex].includes('B') ? true : false)"></checkbox>
<text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
</label>
<label class="answer-lable">
<checkbox :disabled="isDisabled" value="C" :class="form.ANSWER[sindex].includes('C')?'checked':''" :checked="(form.ANSWER[sindex].includes('C') ? true : false)"></checkbox>
<text class="title">C.{{ form.QUESTIONLIST[sindex].OPTIONC }}</text>
</label>
<label class="answer-lable">
<checkbox :disabled="isDisabled" value="D" :class="form.ANSWER[sindex].includes('D')?'checked':''" :checked="(form.ANSWER[sindex].includes('D') ? true : false)"></checkbox>
<text class="title">D.{{ form.QUESTIONLIST[sindex].OPTIOND }}</text>
</label>
</checkbox-group>
<radio-group v-if="form.QUESTIONTYPE[sindex] == '3'" class="ext-group" v-model="form.ANSWER[sindex]" @change="radioQuestionChange($event,sindex)">
<label class="answer-lable">
<radio :class="(form.ANSWER[sindex]=='A'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='A'?true:false" :disabled="isDisabled"
value="A"></radio>
<text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
</label>
<label class="answer-lable">
<radio :class="(form.ANSWER[sindex]=='B'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='B'?true:false" :disabled="isDisabled"
value="B"></radio>
<text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
</label>
</radio-group>
</view>
</view>
</view>
<view v-if="isShowAnswer" class="ext-answer">
<view class="title">
正确答案
</view>
<view class="content">
<view class="mb12">
正确答案{{ form.ANSWERRIGHT[sindex] }}
</view>
<!-- <view class="">
题目解析A
</view> -->
</view>
</view>
<view class="ext-btns" :class="(sindex!=-1 && sindex!=0 && sindex != (form.QUESTIONLIST.length-1)) ? 'ext-between' : 'ext-center'">
<button v-if="sindex!=-1 && sindex!=0" :disabled="isCheckDisabled" class="cu-btn bg-yellow" @click="questionPrevious" >上一题</button>
<button v-if="form.QUESTIONTYPE[sindex] == '2' && form.ANSWER[sindex]" class="cu-btn bg-green" @click="$noMultipleClicks(confirmCheck)" >查看结果</button>
<button v-if="sindex != (form.QUESTIONLIST.length-1)" :disabled="isCheckDisabled" class="cu-btn bg-yellow" @click="questionNext" >下一题</button>
</view>
</view>
</view>
</view>
</template>
<script>
import {
basePath,
corpinfoId,
deptId,
loginSession,
formatDate,
loginUser
} from '@/common/tool.js';
export default {
components: {},
data() {
return {
backUrl: '/pages/application/onlinexxks/my-study',
showRight: false,
dataFlag: 'noData',
isDisabled: false,
isShowAnswer: false,
isAnswered: false,
isCheckDisabled: false,
form: {
STUDYTASK_ID: '',
CURRICULUMID: '', // 课程ID
COURSEWAREID: '', //课件ID
COURSEWARETYPE: '', //课件分类
STAGESTUDENTRELATION_ID: '', //课程学员关系ID
CURRICULUMNAME: '', // 课程名称
CURRICULUMINTRODUCE: '', // 课程介绍
CURRICULUMAIM: '', // 课程目的
STARTTIME: '', // 开始时间
ENDTIME: '', // 结束时间
CURRICULUMUSERS: '', // 适用人员
QUESTION_ID: [], // 试题ID数组
QUESTIONTYPE: [], // 试题类型数组
ANSWER: [], // 学员答案
ANSWERRIGHT: [], // 正确答案
QUESTIONLIST: [{
QUESTIONTYPE: '', // 试题类型(单选题、多选题、判断题)
QUESTIONDRY: '', // 题干
OPTIONA: '', // 选项A
OPTIONB: '', // 选项B
OPTIONC: '', // 选项C
OPTIOND: '', // 选项D
ANSWER: '' ,// 答案
}] //考题List
},
subForm: {},
noClick: true,
sindex: 0
}
},
onLoad(event) { //页面第一次加载时触发,从跳转页面返回时不能触发,可以传递参
this.form.STUDYTASK_ID = event.STUDYTASK_ID
this.form.COURSEWAREID = event.COURSEWAREID
this.form.COURSEWARETYPE = event.COURSEWARETYPE
this.form.CURRICULUMID = event.CURRICULUM_ID
this.form.STAGESTUDENTRELATION_ID = event.STAGESTUDENTRELATION_ID
// console.info('页面加载')
console.info(this.form)
this.backUrl = '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + event.STAGESTUDENTRELATION_ID
this.getData()
loginSession()
},
onBackPress(options) {
this.BackPage()
return true
},
methods: {
getData() {
var _this = this;
uni.showLoading({
title: '请稍候...'
})
uni.request({
url: basePath + '/app/mycurriculum/findForStudyByCoursewareId',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
CURRICULUMID: _this.form.CURRICULUMID,
COURSEWAREID: _this.form.COURSEWAREID,
COURSEWARETYPE: _this.form.COURSEWARETYPE,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading(); //结束加载中动画
if ("success" == res.data.result) {
// _this.pd = res.data.pd;
_this.form = Object.assign(_this.form, res.data.pd)
// console.info('getData取值')
// console.info(this.form)
if(_this.form.QUESTIONLIST.length>0) {
_this.sindex = 0
}
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
})
},
radioQuestionChange(e,i) {
this.form.ANSWER[i] = e.detail.value
this.isDisabled = true
this.isShowAnswer = true
this.isAnswered = true
console.info(this.form.ANSWER[i])
console.info(this.form.ANSWERRIGHT[i])
console.info(this.form.ANSWER[i] == this.form.ANSWERRIGHT[i])
},
checkQuestionChange(e,i) {
this.form.ANSWER[i] = e.detail.value
if (this.trimSpace(this.form.ANSWER[i]).length>0) {
this.isCheckDisabled = true
} else {
this.isCheckDisabled = false
}
this.$forceUpdate()
},
confirmCheck() {
this.isDisabled = true
this.isShowAnswer = true
this.isAnswered = true
this.isCheckDisabled = false
},
questionPrevious() {
this.isCheckDisabled = false
this.sindex = this.sindex - 1
var ANSWER_STR = ''
if (this.form.QUESTIONTYPE[this.sindex] == '2') {
ANSWER_STR = this.trimSpace(this.form.ANSWER[this.sindex]).length
} else {
ANSWER_STR = this.form.ANSWER[this.sindex]
}
console.log('ANSWER_STR:'+ANSWER_STR)
console.log(this.form.ANSWER[this.sindex])
console.log('ANSWER.includes(\'A\'):'+this.form.ANSWER[this.sindex].includes('A'))
console.log('ANSWER.includes(\'B\'):'+this.form.ANSWER[this.sindex].includes('B'))
if(ANSWER_STR) {
this.isDisabled = true
this.isShowAnswer = true
} else {
this.isDisabled = false
this.isShowAnswer = false
}
},
questionNext() {
this.isCheckDisabled = false
this.sindex = this.sindex + 1
var ANSWER_STR = ''
if (this.form.QUESTIONTYPE[this.sindex] == '2') {
ANSWER_STR = this.trimSpace(this.form.ANSWER[this.sindex]).length
} else {
ANSWER_STR = this.form.ANSWER[this.sindex]
}
// console.log('ANSWER_STR:'+ANSWER_STR)
// console.log(this.form.ANSWER[this.sindex])
// console.log('ANSWER.includes(\'A\'):'+this.form.ANSWER[this.sindex].includes('A'))
// console.log('ANSWER.includes(\'B\'):'+this.form.ANSWER[this.sindex].includes('B'))
if(ANSWER_STR) {
this.isDisabled = true
this.isShowAnswer = true
} else {
this.isDisabled = false
this.isShowAnswer = false
}
},
assignSubFormData() {
var ANSWER_STR = ''
for (let i = 0; i < this.subForm.ANSWER.length; i++) {
if (this.subForm.QUESTIONTYPE[i] == '2') {
ANSWER_STR += (this.subForm.ANSWER[i] == '-' ? '-' : this.subForm.ANSWER[i].join('')) + ','
} else {
ANSWER_STR += this.subForm.ANSWER[i] + ','
}
}
this.subForm.ANSWER = ANSWER_STR.length > 0 ? ANSWER_STR.slice(0, ANSWER_STR.length - 1) : ''
this.subForm.QUESTION_ID = this.subForm.QUESTION_ID.join(',')
this.subForm.QUESTIONTYPE = this.subForm.QUESTIONTYPE.join(',')
this.subForm.COURSEWAREID = this.subForm.COURSEWAREID.join(',')
this.subForm.COURSEWARETYPE = this.subForm.COURSEWARETYPE.join(',')
this.subForm.ANSWERRIGHT = this.subForm.ANSWERRIGHT.join(',')
this.subForm.QUESTIONLIST = ''
this.subForm.CORPINFO_ID = corpinfoId
this.subForm.USER_ID = loginUser.USER_ID
this.subForm.USERNAME=loginUser.USERNAME
},
submitForm() {
uni.showLoading({
title: '处理中'
})
uni.request({
url: basePath+'/app/coursestudy/submit',
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
...this.subForm,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading();
uni.redirectTo({
url: this.backUrl,
})
}
})
},
trimSpace(array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == '' || array[i] == null || typeof (array[i]) == 'undefined') {
array.splice(i, 1)
i = i - 1
}
}
return array
},
BackPage() {
if (this.isAnswered) {
this.subForm = Object.assign({}, this.form)
// console.info('this.subForm转换')
// console.info(this.form)
for (let i = 0; i < this.subForm.ANSWER.length; i++) {
if (this.subForm.QUESTIONTYPE[i] == '2') {
this.subForm.ANSWER[i] = this.trimSpace(this.subForm.ANSWER[i])
this.subForm.ANSWER[i] = this.subForm.ANSWER[i].length > 0 ? this.subForm.ANSWER[i].sort() : []
if (this.subForm.ANSWER[i].length == 0) {
this.subForm.ANSWER[i] = '-'
}
} else {
if (this.subForm.ANSWER[i].length == 0) {
this.subForm.ANSWER[i] = '-'
}
}
}
this.assignSubFormData()
this.submitForm()
} else {
uni.redirectTo({
url: this.backUrl,
})
}
}
}
}
</script>
<style>
.ext-bg {
background-image: linear-gradient(180deg, #0006ff, #0078ff);
height: 100vh;
width: 750upx;
background-size: 100% 100%;
position: relative;
}
.extin-bg {
background: url(../../../static/ksbgx.png) no-repeat;
height: 368upx;
background-size: 100% 100%;
}
.ext-box {
position: absolute;
top: 440upx;
width: 100%;
padding: 0 50upx;
}
.ext-topic {
border-radius: 10upx;
background-color: #fff;
width: 100%;
}
.ext-topic .ext-title {
padding: 20upx 0;
text-align: center;
font-weight: bold;
border-bottom: 1upx dashed #ccc;
}
.ext-topic .ext-content {
padding: 30upx 30upx;
}
.ext-topic .ext-content .ext-text {
margin-bottom: 20upx;
line-height: 1.6;
}
.ext-group {
display: flex;
flex-direction: column;
}
.ext-group .answer-lable {
display: flex;
align-items: center;
margin-bottom: 20upx;
}
.ext-group .answer-lable .title {
margin-left: 14upx;
}
.ext-group .answer-lable:last-child {
margin-bottom: 0;
}
.ext-answer {
border-radius: 10upx;
background-color: #fff;
width: 100%;
margin-top: 20upx;
}
.ext-answer .title {
padding: 20upx 0;
text-align: center;
font-weight: bold;
border-bottom: 1upx dashed #ccc;
color: #008000;
}
.ext-answer .content {
padding: 30upx 30upx;
}
.ext-btns{
display: flex;
align-items: center;
padding: 50upx 30upx;
}
.ext-btns button{
margin-left: 20upx;
}
.ext-btns button:first-child{
margin-left: 0;
}
.ext-between{
justify-content: space-between;
}
.ext-center{
justify-content: center;
}
</style>