<template> <view> <cu-custom bgColor="bg-gradual-blueness" :isBack="true"> <block slot="backText">返回</block> <block slot="content">{{TITLE}}</block> </cu-custom> <view class="course"> <view class="course-aa"> <view class="course-items" v-for="(question,i) in questions" :key="i"> <view class="course-ask"> {{ i + 1 }}. <text v-if="question.QUESTIONTYPE === '1'" class="mark">(单选题)</text> <text v-if="question.QUESTIONTYPE === '2'" class="mark">(多选题)</text> <text v-if="question.QUESTIONTYPE === '3'" class="mark">(问答题)</text> {{ question.QUESTIONDRY }} </view> <view class="course-answer"> <radio-group v-if="question.QUESTIONTYPE == '1'" v-model="question.ANSWER" @change="radioQuestionChange($event,i)"> <label class="answer-lable" v-for="(answer,j) in question.selection"> <radio class="blue" :class="question.ANSWER==answer.ITEM_ID?'checked':''" :checked="question.ANSWER==answer.ITEM_ID?true:false" :value="answer.ITEM_ID"></radio> <text class="title">{{ j+1 }}.{{ answer.OPTIONDES }}</text> </label> </radio-group> <checkbox-group v-if="question.QUESTIONTYPE == '2'" class="checkbox" v-model="question.ANSWER" @change="checkQuestionChange($event,i)"> <label class="answer-lable" v-for="(answer,j) in question.selection"> <checkbox class="blue" :class="question.ANSWER==answer.ITEM_ID?'checked':''" :checked="question.ANSWER==answer.ITEM_ID?true:false" :value="answer.ITEM_ID"></checkbox> <text class="title">{{ j+1 }}.{{ answer.OPTIONDES }}</text> </label> </checkbox-group> <radio-group v-if="question.QUESTIONTYPE == '3'" :disabled="isDisabled" v-model="question.ANSWER" @change="radioQuestionChange($event,i)"> <label class="answer-lable"> <!-- <input type="textarea" name="input" ref="ANSWER" autosize v-model="question.ANSWER" placeholder="请输入答案"></input>--> <textarea class="textarea" ref="ANSWER" :value="question.ANSWER" placeholder="请输入答案" placeholder-style="font-size:28rpx" @input="descInput($event,i)"></textarea> <view class="num">{{ question.ANSWER.length }}/140</view> </label> </radio-group> </view> </view> </view> </view> <view class="cu-tabbar-height"></view> <view class="bottom-fixed"> <button class="cu-btn bg-green" @click="$noMultipleClicks(confirm)">提交</button> </view> </view> </template> <script> import { basePath, corpinfoId, deptId, loginSession, formatDate, loginUser } from '@/common/tool.js' export default { components: {}, data() { return { StatusBar: this.StatusBar, CustomBar: this.CustomBar, bgImage: '', isExamStart: false, isDisabled: true, titleContext: '我的问卷', timer: '', hour: 0, minutes: 0, seconds: 0, showRight: false, dataFlag: 'noData', sTop: 0, pd: {}, answer: '', totalHeight: 0, questions: [], //返回数据 noClick: true } }, computed: { style() { var StatusBar = this.StatusBar; var CustomBar = this.CustomBar; var bgImage = this.bgImage; var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`; if (this.bgImage) { style = `${style}background-image:url(${bgImage});`; } return style } }, onReady() { }, onLoad(event) { this.SURVEY_ID = event.SURVEY_ID this.getData(); loginSession(); }, onShow() { }, beforeDestroy() { if (this.timer) { clearInterval(this.timer) // 满足条件时 停止计时 this.timer = null this.seconds = 0 this.minutes = 0 } }, methods: { getData() { var _this = this; uni.showLoading({ title: '请稍候' }) uni.request({ url: basePath + '/app/survey/getQuestions', method: 'POST', dataType: 'json', header: { 'Content-type': 'application/x-www-form-urlencoded' }, data: { SURVEY_ID: this.SURVEY_ID }, success: (res) => { if ("success" == res.data.result) { _this.questions = res.data.questions _this.questions.forEach(item => { item.ANSWER = "" }) this.TITLE = res.data.pd.TITLE console.log(this.TITLE) uni.hideLoading(); } else { uni.showToast({ title: res.data.message, duration: 2000 }); } } }); }, radioQuestionChange(e, i) { this.questions[i].ANSWER = e.detail.value; }, checkQuestionChange(e, i) { this.questions[i].ANSWER = e.detail.value; }, descInput(event, index) { let questions = this.questions questions[index].ANSWER = event.detail.value this.questions = [...questions] }, confirm() { for (let i = 0; i < this.questions.length; i++) { if (!this.questions[i].ANSWER) { uni.showToast({ icon: 'none', title: '请填写第' + (i + 1) + '题', duration: 1500 }); return; } if (this.questions[i].QUESTIONTYPE == '2') { this.questions[i].ANSWER = this.questions[i].ANSWER.join(',') } } uni.request({ url: basePath + '/app/surveyanswer/submit', method: 'POST', dataType: 'json', header: { 'Content-type': 'application/x-www-form-urlencoded' }, data: { questions: JSON.stringify(this.questions), CORPINFO_ID: loginUser.CORPINFO_ID, USER_ID: loginUser.USER_ID, SURVEY_ID: this.SURVEY_ID }, success: (res) => { uni.redirectTo({ url: '/pages/index/index' }) }, }) } } } </script> <style> .course { background-color: #fff; } /*.textarea_box{*/ /* padding: 20rpx;*/ /* background-color: #F2F2F2;*/ /*.uni-textarea-textarea{*/ /* font-size: 28rpx;*/ /* line-height: 45rpx;*/ /*}*/ .num { text-align: right; color: gray } .course-header { padding: 20upx; border-bottom: 1upx solid #F1F1F1; line-height: 1.6; } .course-name { font-weight: bold; font-size: 30upx; } .course-int { color: #888; } .course-obj { color: #888; } .course-aa { padding: 0 20upx; } .course-items { border-bottom: 1px dashed #F1F1F1; padding: 20upx 0; } .course-items .course-ask { line-height: 1.6; font-size: 28upx; /* margin-bottom: 10upx; */ } .course-answer { padding-left: 40upx; margin-top: 20upx; } .answer-lable { display: block; margin-bottom: 20upx; } .answer-lable:last-child { margin-bottom: 0; } .answer-lable radio { margin-right: 20upx; } </style>