GCLS_Page_Book/src/componentsAnswer/JudgeAnswer/index.vue

<template>
    <div class="single" v-if="cur">
        <component
            :answer="answer"
            :cur="cur"
            :getAnswer="getAnswer"
            :handleChildSrcList="handleChildSrcList"
            :is="getViewCom"
            :queIndex="queIndex"
            :uiType="uiType"
            :watchIndex="watchIndex"
            :bookAnswerShowFlag="bookAnswerShowFlag"
            :bookExamAnswer="bookExamAnswer"
            ref="bookChildren"
        />
    </div>
</template>
<script>
import SingleChooseTone from "./SingleChooseToneMAnswer"; // 选择正确发音
import JudgeAndReason from "./JudgeAndReasonAnswer" // 判断对错并说明原因
export default {
    name: "Single",
    components: {
        SingleChooseTone,
        JudgeAndReason
    },
    props: ["moduleType", "cur", "getAnswer", "queIndex", "answer", "uiType", "watchIndex", "handleChildSrcList","bookAnswerShowFlag","bookExamAnswer"],
    data () {
        return {
            // singleData: ['héng', 'shù', 'piě', 'nà']
            // singleData: ['4', '5', '6', '7']
            // singleData: ['structure1.png', 'structure2.png', 'structure3.png', 'structure4.png']
            //singleData: null,
            // singleData: [['一', '讠', '冫', '厶'], ['氵', '忄', '冫', '厶'], ['冖', '又', '冫', '厶']]
            // singleData: ['一', '讠', '冫']
            // singleData: {
            //     data: [
            //         ['一', '', '三', '', '', 'null', 'null'],
            //         ['null', 'null', '', 'null', 'null', 'null', 'null'],
            //         ['null', 'null', '', 'null', 'null', 'null', 'null'],
            //         ['', '', '六', '七', '', '', '']
            //     ],
            //     optionalData: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
            // }
            // singleData: {
            //   data: ["héng", "shù", "piě", "nà"],
            //   right: ["i"],
            // },
        };
    },
    created () {
        console.log(this.cur)
    },
    watch: {
        cur: {
            handler: function (val, oldVal) {
                // let _this = this;
                // _this.singleData = val;
                // console.log(_this.singleData);
            },
            // 深度观察监听
            deep: true,
        },
    },
    mounted () {
        this.$nextTick(function () {
            this.$on('singleActiveindex', function () {
                this.$refs.bookChildren.$emit("singleActiveindex")
            });
        });
    },
    methods: {
        // getAnswer (data) {
        //     console.log(2)
        //     this.$emit("getAnswer", data);
        // }
        practiceTip () {
            return this.$refs.bookChildren.practiceJudge()
        }
    },
    computed: {
        getViewCom () {
            switch (this.moduleType) {
                case "01":
                    return SingleChooseTone;
                case "02":
                    return JudgeAndReason;
            }
        }
    }
};
</script>
<style lang="scss">
// .single {
//     width: 100%;
//     // height: 100vh;
//     overflow: auto;
//     padding-top: 20px;
//     .singleNovoice {
//         width: 100%;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-family: GB-PINYINOK-B;
//         .content {
//             position: relative;
//         }
//         .content-top {
//             width: 444px;
//             height: 444px;
//             margin: 0 auto;
//             background: #fff url('../../assets/single/bg-rice.png') center
//                 no-repeat;
//             background-size: 100% 100%;
//             box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
//             border-radius: 24px;
//             text-align: center;
//             position: relative;
//             img {
//                 width: 300px;
//                 margin-top: 70px;
//             }
//             .btn-play {
//                 position: absolute;
//                 right: 0;
//                 top: 0;
//                 width: 56px;
//                 height: 56px;
//                 background: #7663ec url('../../assets/single/icon-play.png')
//                     center no-repeat;
//                 background-size: 20px;
//                 border-radius: 0 28px 0 28px;
//                 cursor: pointer;
//             }
//         }
//         .content-bottom {
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             padding-top: 40px;
//             li {
//                 margin: 0 20px 10px 20px;
//                 min-width: 230px;
//                 height: 124px;
//                 box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
//                 border-radius: 16px;
//                 text-align: center;
//                 background: #ffffff url('../../assets/single/bg-line.png')
//                     center;
//                 background-size: 100% 100%;
//                 color: #494949;
//                 font-size: 74px;
//                 line-height: 92px;
//                 padding: 7px 5px 25px 5px;
//                 cursor: pointer;
//                 font-family: GB-PINYINOK-B;
//             }
//             li.active {
//                 background: #fff3d5
//                     url('../../assets/single/bg-line-red-small.png') center
//                     no-repeat;
//                 background-size: 100% 40px;
//             }
//             li:hover {
//                 transform: scale(1.13);
//             }
//         }
//     }
//     ul {
//         list-style: none;
//         margin: 0;
//     }
//     .el-message__icon {
//         font-size: 20px;
//     }
//     .pinyin-box {
//         width: 644px;
//         height: 444px;
//         box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
//         border-radius: 24px;
//         background: #ffffff url('../../assets/single/bg-line-red.png') center
//             no-repeat;
//         background-size: 100% 100%;
//         margin: 0 auto;
//         font-size: 240px;
//         line-height: 276px;
//         padding: 56px 0 108px 0;
//         font-family: GB-PINYINOK-B;
//         color: #404040;
//         text-align: center;
//         b {
//             font-weight: 400;
//         }
//         // b.active {
//         //     color: #31d486;
//         // }
//     }
//     .single-input {
//         width: 433px;
//         height: 124px;
//         background: #ffffff;
//         border: 4px solid #ffffff;
//         box-sizing: border-box;
//         box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
//         border-radius: 16px;
//         padding: 15px 16px;
//         text-align: center;
//         outline: 0;
//         font-size: 80px;
//         line-height: 94px;
//         color: #494949;
//         // font-family: sourceR;
//     }
// }
</style>