GCLS_Page_Book/src/components/Single/SingleChooseRadical.vue

<template>
    <div class="singleNovoice singleHasvoice singleChooseRadical">
        <div :key="item.con + index" class="Book_content" v-for="(item, index) in cur.stem">
            <Audio :mp3="item.mp3_url" :pinyin="item.pinyin"/>
            <div :class="['content-top','pic-box',uiType]">
                <span
                    v-if="uiType == 'SINGLE_03'||uiType == 'SINGLE_04'||uiType == 'SINGLE_08'"
                >{{ cur.stem[0].con }}</span>
                <template v-else-if="uiType == 'SINGLE_10'">
                    <Strockplay
                        :Book_text="items"
                        :key="items + index+indexs"
                        :playStorkes="cur.playStorkes"
                        :targetDiv="items + index+indexs"
                        v-for="(items,indexs) in item.con"
                    />
                </template>
            </div>
            <!-- <ul class="content-bottom single08" v-if="uiType === 'SINGLE_08'">
                <li
                    :class="activeIndexArr.indexOf(index) > -1 ? 'active' : ''"
                    :key="index"
                    @click="handleClickArr(item.con, index)"
                    v-for="(item, index) in cur.option"
                >{{ item.con }}</li>
            </ul>-->
            <ul :class="['content-bottom single10',cur.optionPlace&&cur.optionPlace=='true'?'optionVertical':'']" v-if="uiType === 'SINGLE_10'">
                <!-- 字符不限长度 -->
                <li
                    :class="[activeIndex === index ? 'active' : '','option'+cur.option.length,activeIndex === index && isJudgeOption ?userResultJudge:'']"
                    :key="index"
                    @click="handleClick(item.con, index)"
                    v-for="(item, index) in cur.option"
                >{{ item.con }}</li>
            </ul>
            <ul class="content-bottom" v-if="uiType === 'SINGLE_03'||uiType==='SINGLE_08'">
                <!-- 图片 -->
                <li
                    :class="[activeIndex === index ? 'structure active' : 'structure',activeIndex === index && isJudgeOption ?userResultJudge:'']"
                    :key="index"
                    @click="handleClick(item.con, index)"
                    v-for="(item, index) in cur.option"
                >
                    <img :src="item.img_url" class="img_url" v-if="item.img_url">
                </li>
            </ul>
            <ul :class="['content-bottom single04',cur.optionPlace&&cur.optionPlace=='true'?'optionVertical':'']" v-if="uiType === 'SINGLE_04'">
                <!-- 笔顺 -->
                <li
                    :class="[activeIndex === index ? 'active' : '',activeIndex === index && isJudgeOption ?userResultJudge:'']"
                    :key="index"
                    @click="handleClick(item, index)"
                    v-for="(item, index) in cur.upsetOption"
                >
                    <b :key="indexs" v-for="(items, indexs) in item">{{ items.shape }}</b>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import Audio from "../../components/common/Audio";
import Strockplay from "../common/Strockplay";
export default {
    name: "singleChooseRadical",
    props: ["cur", "getAnswer", "queIndex", "answer", "uiType", "watchIndex","TaskModel"],
    data () {
        return {
            userAnswer: [],
            activeIndex: null,
            optionArr: [],
            arrlength: 3,
            activeIndexArr: [], // 多个选项存数组
            userResultJudge:'',
            isJudgeOption:false,// 是否为最后选择的选项
        };
    },
    components: {
        Audio,
        Strockplay
    },
    created () {
        this.handleActive();
        if (this.cur.Bookanswer) {
            this.activeIndexArr = this.cur.Bookanswer;
        } else {
            this.activeIndexArr = [];
        }
    },
    watch: {
        watchIndex: {
            handler: function (val, oldVal) {
                let _this = this;
                if (val) {
                    this.handleActive();
                    if (this.cur.Bookanswer) {
                        this.activeIndexArr = this.cur.Bookanswer;
                    } else {
                        this.activeIndexArr = [];
                    }
                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    mounted () { },
    methods: {
        handleClick (obj, index) {
            this.isJudgeOption = false
            this.activeIndex = index;
            this.userAnswer = [];
            this.userAnswer.push(obj);
            this.getAnswer(this.userAnswer, this.queIndex);
            this.cur.Bookanswer = this.userAnswer;
        },
        // 高亮初始值
        handleActive () {
            if (this.cur.Bookanswer) {
                this.cur.Bookanswer.forEach((item, index) => {
                    if (this.uiType !== "SINGLE_04") {
                        this.cur.option.forEach((items, indexs) => {
                            if (item === items.con) {
                                this.activeIndex = indexs;
                                return false;
                            }
                        });
                    } else {
                        this.cur.upsetOption.forEach((items, indexs) => {
                            if (item === items) {
                                this.activeIndex = indexs;
                                return false;
                            }
                        });
                    }
                });
                if(this.TaskModel=="PRACTICE") this.practiceJudge()
            } else {
                this.activeIndex = null;
            }
        },
        // 判断对错
        practiceJudge () {
            this.isJudgeOption = true
            if(this.cur.Bookanswer){
                if (this.uiType == "SINGLE_04") {
                    if(this.cur.stem[0].stroke_text&&JSON.stringify(this.cur.Bookanswer[0])==JSON.stringify(this.cur.stem[0].stroke_text)){
                        this.userResultJudge = 'userRight'
                        return true
                    }else if(!this.cur.stem[0].stroke_text){
                        this.userResultJudge = ''
                        return true
                    }else{
                        this.userResultJudge = 'userError'
                        return false
                    }
                }else if(this.uiType == "SINGLE_03"||this.uiType=='SINGLE_08'||this.uiType == 'SINGLE_10'){
                    if(this.cur.correct[0]&&this.cur.Bookanswer[0]==this.cur.correct[0]){
                        this.userResultJudge = 'userRight'
                        return true
                    }else if(!this.cur.correct[0]){
                        this.userResultJudge = ''
                        return true
                    }else{
                        this.userResultJudge = 'userError'
                        return false
                    }
                }
            }else{
                return false
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.Book_content{
    width:100%;
}
.singleHasvoice {
    width: 100%;
    text-align: center;
    padding-top: 52px !important;
    li {
        background: #ffffff;
        line-height: 112px; // 和拼音的行高不一样
        font-family: FZJCGFKTK;
    }
}
.pic-box {
    position: relative;
    img {
        position: absolute;
        width: 444px;
        height: 444px;
        top: 0;
        left: 0;
        margin: 0;
    }
}
.SINGLE_03,
.SINGLE_04,
.SINGLE_08 {
    margin-top: 24px !important;
}
.single {
    .singleChooseRadical {
        .content-top {
            span {
                font-size: 360px;
                line-height: 392px;
                font-family: FZJCGFKTK;
                color: #404040;
                padding: 37px 0 11px 0;
                display: block;
            }
            &.SINGLE_10 {
                width: 100%;
                background: none;
                box-shadow: none;
                display: flex;
                justify-content: center;
                .strockplayInner {
                    width: 444px;
                    height: 444px;
                    border-radius: 24px;
                    box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
                    margin: 0;
                }
            }
        }
        .content-bottom {
            height: 264px;
            overflow: auto;
            li {
                background: #ffffff !important;
                line-height: 112px !important;
                width: 406px;
                font-family: iconFont !important;
            }
            li.active {
                background: #fff3d5 !important;
            }
            .structure {
                width: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0;
                img {
                    height: 84px;
                }
            }
            li.structure.userRight{
                background: #31D486 !important;
                color: #FFFFFF !important;
            }
            li.structure.userError{
                background: #FF6666 !important;
                color: #FFFFFF !important;
            }
        }
        .single04 {
            padding-left: 0;
            li {
                min-height: 120px;
                height: auto !important;
                width: 408px;
                font-size: 48px;
                line-height: 1.5 !important;
                padding: 24px 36px;
            }
            li.userRight{
                background: #31D486 !important;
                color: #FFFFFF !important;
            }
            li.userError{
                background: #FF6666 !important;
                color: #FFFFFF !important;
            }
            &.optionVertical{
                display: block;
                width: 1200px;
                height: auto;
                margin: 0 auto;
                li{
                    width: 920px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }
        .single08 {
            li {
                width: 211px !important;
            }
        }
        .single10 {
            align-items: stretch;
            height: auto;
            margin: 12px auto;
            li {
                width: 408px;
                padding: 0 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                &.option2 {
                    width: 624px;
                }
                &.option4 {
                    width: 300px;
                }
                &.active.userRight{
                    background: #31D486 !important;
                    color: #FFFFFF !important;
                }
                &.active.userError{
                    background: #FF6666 !important;
                    color: #FFFFFF !important;
                }
            }
            &.optionVertical{
                display: block;
                width: 1200px;
                height: auto;
                margin: 0 auto;
                li{
                    width: 920px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }
    }
}
.questionMiddle {
    .singleHasvoice {
        width: 100%;
        text-align: center;
        padding-top: 28px !important;
        li {
            background: #ffffff;
            line-height: 74px; // 和拼音的行高不一样
            font-family: FZJCGFKTK;
        }
    }
    .pic-box {
        position: relative;
        img {
            position: absolute;
            width: 296px;
            height: 296px;
            top: 0;
            left: 0;
            margin: 0;
        }
    }
    .SINGLE_03,
    .SINGLE_04,
    .SINGLE_08 {
        margin-top: 16px !important;
    }
    .single {
        .singleChooseRadical {
            .content-top {
                span {
                    font-size: 240px;
                    line-height: 260px;
                    padding: 24px 0 8px 0;
                }
                &.SINGLE_10 {
                    .strockplayInner {
                        width: 296px;
                        height: 296px;
                        border-radius: 16px;
                        box-shadow: 0px 4px 0px rgba(239, 167, 28, 0.4);
                        margin: 0;
                    }
                }
            }
            .content-bottom {
                height: 176px;
                overflow: auto;
                li {
                    background: #ffffff !important;
                    line-height: 74px !important;
                    width: 272px;
                    font-family: iconFont !important;
                }
                li.active {
                    background: #fff3d5 !important;
                }
                .structure {
                    width: 200px;
                    padding: 0;
                    img {
                        height: 56px;
                    }
                }
                li.structure.userRight{
                    background: #31D486 !important;
                    color: #FFFFFF !important;
                }
                li.structure.userError{
                    background: #FF6666 !important;
                    color: #FFFFFF !important;
                }
            }
            .single04 {
                padding-left: 0;
                li {
                    min-height: 80px;
                    height: auto !important;
                    width: 272px;
                    font-size: 32px;
                    line-height: 1.5 !important;
                    padding: 16px 24px;
                }
                li.userRight{
                    background: #31D486 !important;
                    color: #FFFFFF !important;
                }
                li.userError{
                    background: #FF6666 !important;
                    color: #FFFFFF !important;
                }
                &.optionVertical{
                    width: 800px;
                    height: auto;
                    li{
                        width: 700px;
                    }
                }
            }
            .single08 {
                li {
                    width: 140px !important;
                }
            }
            .single10 {
                align-items: stretch;
                height: auto;
                margin: 12px auto;
                li {
                    width: 272px;
                    padding: 0 33px;
                    &.option2 {
                        width: 416px;
                    }
                    &.option4 {
                        width: 200px;
                    }
                    &.active.userRight{
                        background: #31D486 !important;
                        color: #FFFFFF !important;
                    }
                    &.active.userError{
                        background: #FF6666 !important;
                        color: #FFFFFF !important;
                    }
                }
                &.optionVertical{
                    width: 800px;
                    height: auto;
                    li{
                        width: 700px;
                    }
                }
            }
        }
    }
}
.questionSmall {
    .singleHasvoice {
        padding-top: 16px !important;
        li {
            line-height: 56px; // 和拼音的行高不一样
        }
    }
    .pic-box {
        img {
            width: 222px;
            height: 222px;
        }
    }
    .SINGLE_03,
    .SINGLE_04,
    .SINGLE_08 {
        margin-top: 12px !important;
    }
    .single {
        .singleChooseRadical {
            .content-top {
                span {
                    font-size: 180px;
                    line-height: 196px;
                    padding: 18px 0 6px 0;
                }
                &.SINGLE_10 {
                    .strockplayInner {
                        width: 222px;
                        height: 222px;
                        border-radius: 12px;
                        box-shadow: 0px 3px 0px rgba(239, 167, 28, 0.4);
                    }
                }
            }
            .content-bottom {
                height: 132px;
                li {
                    background: #ffffff !important;
                    line-height: 56px !important;
                    width: 203px;
                    font-family: iconFont !important;
                }
                li.active {
                    background: #fff3d5 !important;
                }
                .structure {
                    width: 150px;
                    img {
                        height: 42px;
                    }
                }
                li.structure.userRight{
                    background: #31D486 !important;
                    color: #FFFFFF !important;
                }
                li.structure.userError{
                    background: #FF6666 !important;
                    color: #FFFFFF !important;
                }
            }
            .single04 {
                li {
                    min-height: 60px;
                    height: auto !important;
                    width: 204px;
                    font-size: 24px;
                    line-height: 1.5 !important;
                    padding: 12px 18px;
                }
                li.userRight{
                    background: #31D486 !important;
                    color: #FFFFFF !important;
                }
                li.userError{
                    background: #FF6666 !important;
                    color: #FFFFFF !important;
                }
                &.optionVertical{
                    width: 600px;
                    height: auto;
                    li{
                        width: 460px;
                    }
                }
            }
            .single08 {
                li {
                    width: 105px !important;
                }
            }
            .single10 {
                align-items: stretch;
                height: auto;
                margin: 12px auto;
                li {
                    width: 204px;
                    padding: 0 25px;
                    &.option2 {
                        width: 312px;
                    }
                    &.option4 {
                        width: 150px;
                    }
                    &.active.userRight{
                        background: #31D486 !important;
                        color: #FFFFFF !important;
                    }
                    &.active.userError{
                        background: #FF6666 !important;
                        color: #FFFFFF !important;
                    }
                }
                &.optionVertical{
                    width: 600px;
                    height: auto;
                    li{
                        width: 460px;
                    }
                }
            }
        }
    }
}
</style>