GCLS_Page_Book/src/components/dialogue/RecordSpell.vue

<template>
    <!-- 大声朗读 -->
    <div class="RecordSpell_main">
        <div :key="item.con + index" class="readSpell" v-for="(item, index) in cur.stem">
            <template v-if="item.mp3_url.indexOf('[FID##') > -1">
                <Audio
                    :mp3="item.mp3List[0].response.file_info_list[0].file_url"
                    :pinyin="item.pinyin"
                />
            </template>
            <template v-else>
                <Audio :mp3="item.mp3_url" :pinyin="item.pinyin"/>
            </template>
        </div>
        <div class="fourLine">{{cur.stem[0].con}}</div>
        <Soundrecord :queIndex="queIndex" :wavData="wavData" @handle-Wav="handleWav"/>
    </div>
</template>

<script>
import Soundrecord from "../../components/common/Soundrecord";
import Audio from "../../components/common/Audio";
export default {
    name: 'RecordSpell',
    props: [
        "cur",
        "getAnswer",
        "queIndex",
        "answer",
        "uiType",
        "watchIndex"
    ],
    components: {
        Soundrecord,
        Audio
    },
    data () {
        return {
            userAnswer: [],
            wavData: null
        }
    },
    watch: {
        watchIndex: {
            handler: function (val, oldVal) {
                let _this = this;
                if (this.cur.Bookanswer) {
                    this.wavData = this.cur.Bookanswer[0]
                } else {
                    this.wavData = null
                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    created () {
        if (this.cur.Bookanswer) {
            this.wavData = this.cur.Bookanswer[0]
        } else {
            this.wavData = null
        }
    },
    methods: {
        handleWav (data) {
            this.userAnswer = []
            this.userAnswer.push(data)
            this.getAnswer(this.userAnswer, this.queIndex)
            this.cur.Bookanswer = this.userAnswer
        },
        // 判断对错
        practiceJudge () {
            if(this.cur.Bookanswer){
                return true
            }else{
               return false 
            }
        }
    },
};
</script>

<style lang='scss' scoped>
.RecordSpell_main {
    max-width: max-content;
    min-width: 444px;
    margin: 0 auto;
    padding-top: 52px;
}
.readSpell {
    text-align: center;
    font-size: 0;
    padding-bottom: 24px;
}
.readSpell img,
.rightArrows img,
.leftArrows img {
    cursor: pointer;
}
.fourLine {
    background: #ffff url('../../assets/single/bg-readAloud.png') center
        no-repeat;
    background-size: 100% 216px;
    border-radius: 24px;
    font-size: 144px;
    line-height: 216px;
    font-family: GB-PINYINOK-B;
    text-align: center;
    height: 444px;
    padding: 96px 36px 126px 36px;
    box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    min-width: 444px;
}
.Book-record {
    justify-content: center;
    padding-top: 78px;
}
.questionMiddle {
    .RecordSpell_main {
        max-width: max-content;
        min-width: 296px;
        margin: 0 auto;
        padding-top: 28px;
    }
    .readSpell {
        padding-bottom: 16px;
    }
    .fourLine {
        background: #ffff url('../../assets/single/bg-readAloud.png') center
            no-repeat;
        background-size: 100% 144px;
        border-radius: 16px;
        font-size: 96px;
        line-height: 144px;
        height: 296px;
        padding: 64px 24px 84px 24px;
        box-shadow: 0px 4px 0px rgba(239, 167, 28, 0.4);
        min-width: 296px;
    }
    .Book-record {
        padding-top: 52px;
    }
}
.questionSmall {
    .RecordSpell_main {
        min-width: 222px;
        padding-top: 16px;
    }
    .readSpell {
        padding-bottom: 12px;
    }
    .fourLine {
        background: #ffff url('../../assets/single/bg-readAloud.png') center
            no-repeat;
        background-size: 100% 108px;
        border-radius: 12px;
        font-size: 72px;
        line-height: 108px;
        height: 222px;
        padding: 48px 18px 63px 18px;
        box-shadow: 0px 3px 0px rgba(239, 167, 28, 0.4);
        min-width: 222px;
    }
    .Book-record {
        padding-top: 39px;
    }
}
</style>