GCLS_Page_Book/src/components/Single/SelectCorrect.vue

<template>
    <!-- 选择正确对话 -->
    <div class="SelectCorrect">
        <div class="SelectCorrect-top">
            <img alt src="../../assets/qp/Ellipse 27.png">
            <img alt src="../../assets/qp/Ellipse 28.png">
            <img alt src="../../assets/qp/Ellipse 29.png">
        </div>
        <div class="SelectCorrect-main">
            <div class="main-box">
                <div class="left">
                    <img alt src="../../assets/dialogue/Ellipse 41.png">
                    <img alt class="wx-arrow" src="../../assets/dialogue/Rectangle 540.png">
                    <div class="dialogue_content_box">
                        <div class="bubble" v-if="cur.stem[0].mp3_url">
                            <div class="bubble_dv">
                                <VoicePlay
                                    :mp3="cur.stem[0].mp3_url"
                                    :seconds="cur.stem[0].duration+'’’'"
                                    v-if="cur.stem[0].mp3_url && cur.stem[0].mp3_url.indexOf('http') > -1"
                                />
                            </div>
                        </div>
                        <div
                            :class="['translate_box',cur.stem[0].mp3_url?'':'novoice']"
                            v-if="cur.stem[0].english||cur.stem[0].con"
                        >
                            <div class="translate">
                                <div :key="index" v-for="(item,index) in stemCn">
                                    <p
                                        :class="bd.indexOf(stemPy[index]) != -1 ? 'pinyin_hidden' : 'spell'"
                                        v-if="lanactiveArr.indexOf('简单')>-1"
                                    >{{stemPy[index]}}</p>
                                    <p class="chinese">{{item}}</p>
                                </div>
                            </div>

                            <p
                                class="english"
                                v-if="lanactiveArr.indexOf('简单')>-1"
                            >{{cur.stem[0].english}}</p>
                        </div>
                    </div>
                </div>
                <div class="right" v-show="visible">
                    <div class="bubble">
                        <div class="r_bubble_dv">
                            <div class="translate" v-if="visibleArr">
                                <div :key="indx" v-for="indx of visibleArr.conArr.length">
                                    <p
                                        :class="bd.indexOf(visibleArr.pinyinArr[indx - 1]) != -1 ? 'pinyin_hidden' : 'spell'"
                                        v-if="lanactiveArr.indexOf('简单')>-1 &&visibleArr.pinyin"
                                    >{{ visibleArr.pinyinArr[indx - 1] }}</p>
                                    <p class="chinese">{{ visibleArr.conArr[indx - 1] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <img alt class="wx-arrow" src="../../assets/dialogue/Rectangle 556.png">
                    <img alt src="../../assets/dialogue/Ellipse 46.png">
                </div>
                <img class="icon-answer" v-if="isJudgeOption&&cur.stem[1].correct[0].con&&visibleArr&&visibleArr.con==cur.stem[1].correct[0].con" src="../../assets/common/icon-answer-right.png">
                <img class="icon-answer" v-if="isJudgeOption&&cur.stem[1].correct[0].con&&visibleArr&&visibleArr.con!=cur.stem[1].correct[0].con" src="../../assets/common/icon-answer-error.png">
            </div>
            <div class="bottom">
                <div class="switch">
                    <!-- <img
                        @click="lanShow =!lanShow"
                        alt
                        class="switchBtn"
                        src="../../assets/dialogue/Group 1991.png"
                    >-->
                    <ul>
                        <li
                            :class="lanactiveArr.indexOf(item)>-1?'active':''"
                            :key="index"
                            @click="changeLan(item,index)"
                            v-for="(item,index) in languageArr"
                        >{{item}}</li>
                    </ul>
                </div>
                <div class="bottom-box">
                    <div class="bottom-right">
                        <div
                            :class="optionIndex==index?'select':''"
                            :key="index"
                            @click="selectAnswer(item,index)"
                            v-for="(item, index) in option"
                        >
                            <div :key="indx" v-for="indx of item.conArr.length">
                                <p
                                    :class="bd.indexOf(item.pinyinArr[indx - 1]) != -1 ? 'pinyin_hidden' : 'spell'"
                                    v-if="lanactiveArr.indexOf('简单')>-1&&item.pinyinArr"
                                >{{ item.pinyinArr[indx - 1] }}</p>
                                <p class="chinese">{{ item.conArr[indx - 1] }}</p>
                            </div>
                        </div>
                    </div>
                    <img alt src="../../assets/dialogue/Ellipse 46.png">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VoicePlay from "../../components/common/VoicePlay";
export default {
    props: [
        "cur",
        "getAnswer",
        "queIndex",
        "answer",
        "uiType",
        "watchIndex",
        "TaskModel"
    ],
    components: {
        VoicePlay
    },
    data () {
        return {
            userAnswer: null,
            visible: false,
            visibleArr: null,
            optionIndex: 10000,
            option: [

            ], // 选项
            stemCn: [], // 题干 中文
            stemPy: [], // 题干 拼音
            languageArr: [
                '简单',
                '困难'
            ],
            lanactiveArr: [
                '简单'
            ],
            lanShow: false, // 语言分类按钮是否显示
            bd: [
                "，",
                ",",
                "。",
                ".",
                "！",
                "？",
                "：",
                "；",
                "（",
                "）",
                "【",
                "】",
                "｛",
                "｝",
                "‘",
                "“",
                "’",
                "”",
                "、",
                "、",
                "《",
                "》",
                "…",
                "·",
                "—",
                "~"
            ],
            isJudgeOption:false,// 是否为最后选择的选项
        };
    },
    watch: {
        watchIndex: {
            handler: function (val, oldVal) {
                let _this = this;
                if (val) {
                    _this.handleData()

                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    methods: {
        selectAnswer (item, index) {
            this.isJudgeOption = false
            this.visible = true;
            this.visibleArr = item;
            this.optionIndex = index
            this.userAnswer = []
            this.userAnswer.push(item)
            this.getAnswer(this.userAnswer, this.queIndex)
            this.cur.Bookanswer = this.userAnswer
        },
        handleData () {
            this.stemCn = this.cur.stem[0].con.split("")
            this.stemPy = this.cur.stem[0].pinyin.split(" ")
            this.option = this.cur.stem[1].option
            this.option.forEach((item) => {
                if (item.pinyin) item.pinyinArr = item.pinyin.split(" ");
                item.conArr = item.con.split("");
            });
            if (this.cur.Bookanswer) {
                this.cur.Bookanswer.forEach((item, index) => {
                    this.option.forEach((items, indexs) => {
                        if (item.con === items.con) {
                            this.visible = true
                            this.visibleArr = items
                            this.optionIndex = indexs
                            return false
                        }
                    })
                })
                if(this.TaskModel=="PRACTICE") this.practiceJudge()
            } else {
                this.visible = false
                this.visibleArr = null
                this.optionIndex = 1000
            }
        },
        // 切换语言
        changeLan (item, index) {
            this.lanactiveArr = item
        },
        // 判断对错
        practiceJudge () {
            this.isJudgeOption = true
            if(this.cur.Bookanswer&&this.cur.Bookanswer[0]){
                if(this.cur.stem[1].correct[0].con&&this.cur.stem[1].correct[0].con==this.cur.Bookanswer[0].con){
                    return true
                }else if(this.cur.stem[1].correct[0].con&&this.cur.stem[1].correct[0].con!=this.cur.Bookanswer[0].con){
                    return false
                }else if(!this.cur.stem[1].correct[0].con){
                    return true
                }
            }
        }
    },
    created () {
        this.handleData()
    },
};
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.SelectCorrect {
    width: 1200px;
    height: 708px;
    margin: 76px auto 0 auto;
    background: #fff;
    border-radius: 24px;
    .SelectCorrect-top {
        width: 100%;
        height: 60px;
        background: rgba(255, 214, 107, 0.3);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        display: flex;
        align-items: center;
        > img {
            margin-left: 20px;
            width: 24px;
        }
    }
    .SelectCorrect-main {
        background: #fff;
        padding: 65px 0px 32px 0;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
        &::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .main-box {
            height: 432px;
            overflow: auto;
            position: relative;
            .icon-answer{
                width: 156px;
                height: 60px;
                position: absolute;
                left: 50%;
                margin-left: -78px;
                bottom: 17px;
            }
        }
    }
    .right {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        margin-top: 44px;
        margin-right: 60px;
        > img {
            width: 84px;
        }
        .wx-arrow {
            width: 12px;
            margin-top: 34px;
            margin-right: 24px;
        }
    }
    .left {
        display: flex;
        align-items: flex-start;
        position: relative;
        margin-top: 10px;
        margin-left: 60px;
        > img {
            width: 84px;
        }
        .wx-arrow {
            width: 12px;
            margin-top: 34px;
            margin-left: 24px;
        }
        .dialogue_content_box {
            padding-top: 10px;
        }
        .translate_box {
            background: #f6f6f6;
            border-radius: 14px;
            padding: 9px 20px;
            max-width: 600px;
            &.novoice {
                background: #e1f2fa;
                min-height: 68px;
            }
        }
        .translate {
            display: inline-block;
            align-items: center;
            color: #2c2c2c;
            > div {
                margin-left: 3px;
                text-align: center;
                float: left;
            }
            .spell {
                font-family: 'GB-PINYINOK-B';
                font-style: normal;
                font-weight: normal;
                font-size: 16px;
                height: 18px;
            }
            .chinese {
                font-family: 'FZJCGFKTK';
                font-style: normal;
                font-weight: normal;
                font-size: 32px;
            }
        }
        .english {
            color: #2c2c2c;
            font-size: 16px;
            line-height: 20px;
            // font-family: sourceR;
            display: block;
            margin-left: 5px;
        }
    }
    .wx-arrow {
        margin-bottom: 8px;
    }
    .bubble {
        display: flex;
        align-items: center;
        // padding: 0 24px;
        .bubble_dv {
            width: 200px;
            height: 72px;
            background: #e1f2fa;
            border-radius: 14px;
            font-size: 24px;
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-bottom: 8px;
            > img {
                margin-left: 20px;
            }
            > span {
                margin-left: 10px;
            }
        }

        .r_bubble_dv {
            min-height: 72px;
            background: #eeeeee;
            border-radius: 14px;
            font-size: 24px;
            display: flex;
            align-items: center;
            max-width: 600px;
            margin-top: 8px;
            > img {
                margin-left: 20px;
            }
            > span {
                margin-left: 10px;
            }
            .translate {
                display: flex;
                align-items: center;
                padding: 0px 20px;
                color: #2c2c2c;
                > div {
                    margin-left: 5px;
                    text-align: center;
                }
                .spell {
                    font-family: 'GB-PINYINOK-B';
                    font-style: normal;
                    font-weight: normal;
                    font-size: 16px;
                    height: 18px;
                }
                .chinese {
                    font-family: 'FZJCGFKTK';
                    font-style: normal;
                    font-weight: normal;
                    font-size: 32px;
                }
            }
        }
    }

    .bottom {
        .switch {
            display: flex;
            align-items: center;
            padding-bottom: 16px;
            padding-left: 52px;
        }
        .bottom-box{
            border-top: 1px solid #e5e5e5;
            display: flex;
            justify-content: flex-end;
            img {
                margin-right: 60px;
                width: 84px;
                height: 84px;
                margin-top: 32px;
            }
        }
        ul {
            display: inline-block;
            width: 900px;
            li {
                display: inline-block;
                min-width: 48px;
                padding: 4px 8px;
                font-size: 18px;
                line-height: 1.5;
                background: #ffedbf;
                border-radius: 8px;
                margin: 0 4px;
                text-align: center;
                cursor: pointer;
                // font-family: sourceR;
            }
            .active {
                background: #7663ec;
                color: #ffffff;
                font-weight: 700;
            }
        }
        .switchBtn {
            width: 40px;
            margin-left: 24px;
            margin-right: 8px;
            cursor: pointer;
        }
        .bottom-right {
            display: flex;
            margin-top: 32px;
            // float: right;
            // height: 72px;
            flex-flow: wrap;
            justify-content: flex-end;
            > img {
                margin-left: 10px;
                cursor: pointer;
            }
            > div {
                cursor: pointer;
                margin-right: 20px;
                background: #fff6dd;
                border-radius: 14px;
                text-align: center;
                display: flex;
                align-items: center;
                padding: 0px 20px;
                color: #000;
                min-height: 72px;
            }
            .spell {
                font-family: 'GB-PINYINOK-B';
                font-style: normal;
                font-weight: normal;
                font-size: 16px;
                height: 18px;
            }
            .chinese {
                font-family: 'FZJCGFKTK';
                font-style: normal;
                font-weight: normal;
                font-size: 32px;
            }
            
        }
    }
    .select {
        background: #7663ec !important;
        > div {
            color: #fff;
        }
    }
}
.pinyin_hidden {
    visibility: hidden;
    height: 18px;
}
.questionMiddle {
    .SelectCorrect {
        width: 800px;
        height: 472px;
        margin: 44px auto 0 auto;
        background: #fff;
        border-radius: 16px;
        .SelectCorrect-top {
            width: 100%;
            height: 40px;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            display: flex;
            align-items: center;
            > img {
                margin-left: 13px;
                width: 16px;
            }
        }
        .SelectCorrect-main {
            background: #fff;
            padding: 44px 0px 20px 0;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            box-shadow: 0px 4px 0px rgba(239, 167, 28, 0.4);
            .main-box {
                height: 288px;
                overflow: auto;
                .icon-answer{
                    width: 104px;
                    height: 40px;
                    position: absolute;
                    left: 50%;
                    margin-left: -52px;
                    bottom: 10px;
                }
            }
        }
        .right {
            margin-top: 28px;
            margin-right: 40px;
            > img {
                width: 56px;
            }
            .wx-arrow {
                width: 8px;
                margin-top: 22px;
                margin-right: 18px;
            }
        }
        .left {
            display: flex;
            align-items: flex-start;
            position: relative;
            margin-top: 10px;
            margin-left: 40px;
            > img {
                width: 56px;
            }
            .wx-arrow {
                width: 8px;
                margin-top: 22px;
                margin-left: 16px;
            }
            .dialogue_content_box {
                padding-top: 6px;
            }
            .translate_box {
                border-radius: 10px;
                padding: 6px 14px;
                max-width: 400px;
                &.novoice {
                    background: #e1f2fa;
                    min-height: 45px;
                }
            }
            .translate {
                > div {
                    margin-left: 2px;
                }
                .spell {
                    font-size: 12px;
                    height: 18px;
                }
                .chinese {
                    font-size: 22px;
                }
            }
            .english {
                color: #2c2c2c;
                font-size: 12px;
                line-height: 20px;
                // font-family: sourceR;
                display: block;
                margin-left: 4px;
            }
        }
        .wx-arrow {
            margin-bottom: 6px;
        }
        .bubble {
            .bubble_dv {
                width: 134px;
                height: 48px;
                border-radius: 10px;
                font-size: 16px;
                margin-bottom: 6px;
                > img {
                    margin-left: 13px;
                }
                > span {
                    margin-left: 6px;
                }
            }

            .r_bubble_dv {
                min-height: 48px;
                border-radius: 10px;
                font-size: 16px;
                max-width: 400px;
                margin-top: 6px;
                > img {
                    margin-left: 13px;
                }
                > span {
                    margin-left: 6px;
                }
                .translate {
                    padding: 0px 13px;
                    > div {
                        margin-left: 4px;
                    }
                    .spell {
                        font-size: 12px;
                        height: 18px;
                    }
                    .chinese {
                        font-size: 22px;
                    }
                }
            }
        }

        .bottom {
            .switch {
                padding-bottom: 11px;
                padding-left: 34px;
            }
            ul {
                width: 600px;
                li {
                    min-width: 32px;
                    padding: 3px 6px;
                    font-size: 12px;
                    border-radius: 6px;
                    margin: 0 3px;
                }
            }
            .bottom-box{
                img {
                    margin-right: 40px;
                    width: 56px;
                    height: 56px;
                    margin-top: 22px;
                }
            }
            .switchBtn {
                width: 26px;
                margin-left: 16px;
                margin-right: 6px;
            }
            .bottom-right {
                margin-top: 22px;
                > img {
                    margin-left: 6px;
                }
                > div {
                    margin-right: 12px;
                    margin-bottom: 4px;
                    border-radius: 10px;
                    padding: 0px 13px;
                    min-height: 48px;
                }
                .spell {
                    font-size: 12px;
                    height: 18px;
                }
                .chinese {
                    font-size: 22px;
                }
                
            }
        }
        .select {
            background: #7663ec !important;
            > div {
                color: #fff;
            }
        }
    }
}
.questionSmall {
    .SelectCorrect {
        width: 600px;
        height: 354px;
        margin: 28px auto 0 auto;
        border-radius: 12px;
        .SelectCorrect-top {
            height: 30px;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            > img {
                margin-left: 10px;
                width: 12px;
            }
        }
        .SelectCorrect-main {
            padding: 32px 0px 16px 0;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            box-shadow: 0px 3px 0px rgba(239, 167, 28, 0.4);
            .main-box {
                height: 216px;
                .icon-answer{
                    width: 78px;
                    height: 30px;
                    position: absolute;
                    left: 50%;
                    margin-left: -36px;
                    bottom: 10px;
                }
            }
        }
        .right {
            margin-top: 22px;
            margin-right: 30px;
            > img {
                width: 42px;
            }
            .wx-arrow {
                width: 6px;
                margin-top: 17px;
                margin-right: 12px;
            }
        }
        .left {
            margin-top: 5px;
            margin-left: 30px;
            > img {
                width: 42px;
            }
            .wx-arrow {
                width: 6px;
                margin-top: 17px;
                margin-left: 12px;
            }
            .dialogue_content_box {
                padding-top: 5px;
            }
            .translate_box {
                border-radius: 7px;
                padding: 5px 10px;
                max-width: 300px;
                &.novoice {
                    background: #e1f2fa;
                    min-height: 34px;
                }
            }
            .translate {
                > div {
                    margin-left: 2px;
                }
                .spell {
                    font-size: 12px;
                    height: 12px;
                }
                .chinese {
                    font-size: 16px;
                }
            }
            .english {
                font-size: 12px;
                line-height: 18px;
                // font-family: sourceR;
                display: block;
                margin-left: 2px;
            }
        }
        .wx-arrow {
            margin-bottom: 4px;
        }
        .bubble {
            .bubble_dv {
                width: 100px;
                height: 36px;
                border-radius: 7px;
                font-size: 12px;
                margin-bottom: 4px;
                > img {
                    margin-left: 10px;
                }
                > span {
                    margin-left: 5px;
                }
            }

            .r_bubble_dv {
                min-height: 36px;
                border-radius: 7px;
                font-size: 12px;
                max-width: 300px;
                margin-top: 4px;
                > img {
                    margin-left: 10px;
                }
                > span {
                    margin-left: 5px;
                }
                .translate {
                    padding: 0px 10px;
                    > div {
                        margin-left: 2px;
                    }
                    .spell {
                        font-size: 12px;
                        height: 12px;
                    }
                    .chinese {
                        font-size: 16px;
                    }
                }
            }
        }

        .bottom {
            .switch {
                padding-bottom: 8px;
                padding-left: 26px;
            }
            .bottom-box{
                img {
                    margin-right: 30px;
                    width: 42px;
                    height: 42px;
                    margin-top: 16px;
                }
            }
            ul {
                width: 450px;
                li {
                    min-width: 24px;
                    padding: 2px 4px;
                    font-size: 12px;
                    border-radius: 4px;
                    margin: 0 2px;
                }
                .active {
                    background: #7663ec;
                    color: #ffffff;
                    font-weight: 700;
                }
            }
            .switchBtn {
                width: 20px;
                margin-left: 12px;
                margin-right: 4px;
            }
            .bottom-right {
                margin-top: 16px;
                > img {
                    margin-left: 5px;
                }
                > div {
                    margin-right: 10px;
                    border-radius: 7px;
                    padding: 0px 10px;
                    min-height: 36px;
                }
                .spell {
                    font-size: 12px;
                    height: 12px;
                }
                .chinese {
                    font-size: 16px;
                }
                
            }
        }
        .select {
            background: #7663ec !important;
            > div {
                color: #fff;
            }
        }
    }
    .pinyin_hidden {
        visibility: hidden;
        height: 12px;
    }
}
</style>