integrated_traffic_uniapp/pages/questionnaire/questionnaire.vue

<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>