case/src/components/question.vue

<template>
    <div class="qbox">
        <div class="title">{{question.question_name}}（{{question.question_type==1?'单选':question.question_type==2?'多选':question.question_type==3?'问答':'判断' }}）</div>
        <div class="tips" v-if="question.question_type==2">注:本题可选择多个选项!</div>
        <div class="tips" v-else-if="question.question_type==1">注:本题最多可选择1个选项!</div>
        <div class="options" v-if="question.question_type==2">
            <van-checkbox-group v-model="manychecked" @change="changeCheck" :disabled="disabled">
                <div class="cell" v-for="(item,index) in question.case_item_question_option" :key="item.option_id">
                    <van-checkbox :name="zimu[index]">
                        {{ item.option_value }}
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-checkbox>
                </div>
                <!-- <div class="cell">
                    <van-checkbox name="b">
                        复选框 b
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-checkbox>
                </div> -->
            </van-checkbox-group>
        </div>
        <div class="options" v-else-if="question.question_type==1" >
            <van-radio-group v-model="singlechecked" @change="changeRadio" :disabled="disabled">
                <div class="cell" v-for="(item,index) in question.case_item_question_option" :key="item.option_id">
                    <van-radio :name="zimu[index]">
                        {{ item.option_value }}
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-radio>
                </div>
            </van-radio-group>
        </div>
        <div class="options_con" v-else-if="question.question_type == 3">
            <van-field @update:model-value="changeContent" :autosize="{ minHeight: 120 }" v-model="content" rows="2" autosize type="textarea"
                placeholder="请输入内容" show-word-limit />
        </div>
        <div class="options" v-else-if="question.question_type == 4">
            <van-radio-group v-model="singlechecked" @change="changeRadio" :disabled="disabled">
                <div class="cell" v-for="(item,index) in question.case_item_question_option" :key="item.option_id">
                    <van-radio :name="zimu[index]">
                        {{ item.option_value }}
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-radio>
                </div>
            </van-radio-group>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import activeIcon from "@/assets/select.png";
import inactiveIcon from "@/assets/noselect.png";
const emit = defineEmits(['checkAnswer']);
const manychecked = ref([]);
const singlechecked = ref('');
const content = ref('')
const zimu=['A','B','C','D','E','F','G','H','I','J'];
const props=defineProps({
    question: {
        type: Object,
        default: () => ({}),
    },
    disabled:{
        type:Boolean,
        default:false
    },
    pageIndex:{
        type:Number,
        default:0
    },
    questionIndex:{
        type:Number,
        default:0
    },
});
const changeRadio = (val) => {
   let optionObj=props.question.case_item_question_option.find((item,index)=>zimu[index]==val);
    emit('checkAnswer',{
        pageIndex:props.pageIndex,
        answer:val,
        questionId:props.question.question_id,
        error_tips:props.question.error_tips,
        is_right_next:props.question.is_right_next,
        option_id:optionObj?optionObj.option_id:'',
        questionIndex:props.questionIndex,
        question_type:props.question.question_type,
        question_name:props.question.question_name,
        question_answer:props.question.question_answer
    })
    
};
const changeContent = (val) => {
   
    emit('checkAnswer',{
        pageIndex:props.pageIndex,
        answer:val,
        error_tips:props.question.error_tips,
        questionId:props.question.question_id,
        is_right_next:props.question.is_right_next,
        questionIndex:props.questionIndex,
        question_type:props.question.question_type,
        question_name:props.question.question_name,
        question_answer:props.question.question_answer
    })
};
const changeCheck = (val) => {
     let sortAnswer=val.sort();
     let option_id='';
     for(let i=0;i<sortAnswer.length;i++){
         let optionObj=props.question.case_item_question_option.find((item,index)=>zimu[index]==sortAnswer[i]);
        if(option_id){
            if(optionObj.option_id){
                option_id+=','+optionObj.option_id;
            }
        }else{
            if(optionObj.option_id){
                option_id=optionObj.option_id;
            }
           
        }
     }
    //let optionObj=props.question.case_item_question_option.find((item,index)=>zimu[index]==val);
    emit('checkAnswer',{
        pageIndex:props.pageIndex,
        answer:sortAnswer,
        option_id:option_id,
        is_right_next:props.question.is_right_next,
        error_tips:props.question.error_tips,
        questionId:props.question.question_id,
        questionIndex:props.questionIndex,
        question_type:props.question.question_type,
        question_name:props.question.question_name,
        question_answer:props.question.question_answer


    })
};
</script>

<style lang='scss' scoped>
.options_con {
    border-radius: 5px;
    border: .5px solid #B8B8B8;
    margin-top: 15px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 15px 0px;
    padding-bottom: 8px;

    :deep() .van-cell {
        background: none;
    }

    :deep() .van-field__word-limit {
        color: #999999;
    }
}
.qbox {
    margin-bottom: 15px;
    .title {
        font-weight: bold;
        line-height: 22px;
        font-size: 16px;
        color: #333333;
    }

    .tips {
        margin-top: 8px;
        font-weight: 500;
        font-size: 12px;
        color: #999999;
    }

    .cell {
        border-radius: 10px;
        border: 1px solid #B8B8B8;
        padding: 12px;
        background: #fff;
        margin-bottom: 12px;
    }
    .active{
        border: 1px solid #43C9C3; 
    }

    .cell:last-child {
        margin-bottom: 0;
    }

    .options {
        margin-top: 15px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        padding: 15px 12px;
    }
    .img-icon{
        width: 19px;
        height: 19px;
    }
}
</style>