GCLS_Page_Book/src/components/dialogue/WriteDialogue.vue

<template>
    <!-- 根据图片完成对话 -->
    <div class="SelectCorrect writeDialogueD">
        <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="dialog-maxHeight">
                <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 :key="index" class="micro-box" v-for="(item,index) in wavList">
                    <div class="right">
                        <div class="bubble">
                            <div class="r_bubble_dv">
                                <VoicePlay :seconds="item.seconds+'’’'" :wav="item.wav"/>
                            </div>
                        </div>
                        <img alt class="wx-arrow" src="../../assets/dialogue/Rectangle 556.png">
                        <img alt src="../../assets/dialogue/Ellipse 46.png">
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_top">
                    <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>
                <div class="bottom_main">
                    <div :class="['bottom-right']" @click="microphone()">
                        <div class="bottom-right_record">
                            <img alt src="../../assets/dialogue/maikefeng-red.png">
                            {{rightBtn}}
                        </div>
                        <img alt src="../../assets/dialogue/Ellipse 46.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Recorder from "js-audio-recorder"; //录音插件
import VoicePlay from "../../components/common/VoicePlay";
export default {
    props: [
        "cur",
        "getAnswer",
        "queIndex",
        "answer",
        "uiType",
        "watchIndex"
    ],
    components: {
        VoicePlay
    },
    data () {
        return {
            anwser: "",
            languageArr: [
                '简单',
                '困难'
            ],
            lanactiveArr: [
                '简单'
            ],
            lanShow: false, // 语言分类按钮是否显示
            stemCn: [], // 题干 中文
            stemPy: [], // 题干 拼音
            optionCn: [], // 回复 中文
            optionPy: [],// 回复 英文
            wavList: [], // 录音数组
            recorder: new Recorder({
                sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
                sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
                numChannels: 1, // 声道，支持 1 或 2， 默认是1
            }),
            microphoneStatus: false,
            rightBtn: "点击录音",
            wavblob: null,
            microphoneBtn: null, // 当前正在录音的按钮
            bd: [
                "，",
                ",",
                "。",
                ".",
                "！",
                "？",
                "：",
                "；",
                "（",
                "）",
                "【",
                "】",
                "｛",
                "｝",
                "‘",
                "“",
                "’",
                "”",
                "、",
                "、",
                "《",
                "》",
                "…",
                "·",
                "—",
                "~"
            ],
        };
    },
    watch: {
        watchIndex: {
            handler: function (val, oldVal) {
                let _this = this;
                if (val) {
                    _this.handleData()
                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    methods: {
        handleBookAnswer (e) {
            let value = e.trim()
            this.userAnswer = []
            this.userAnswer.push(value)
            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.optionCn = this.cur.stem[1].con.replace(/_/g, "^").split("")
            this.optionPy = this.cur.stem[1].pinyin.replace(/_/g, "^").split(" ")
            this.optionCn.forEach((item, index) => {
                if (this.optionCn[index - 1] && this.optionCn[index - 1] == item && item == '^') {
                    this.optionCn.splice(index, 1)
                }
            })
            if (this.cur.Bookanswer) {
                this.wavList = this.cur.Bookanswer
            } else {
                this.wavList = []
            }
        },
        // 切换语言
        changeLan (item, index) {
            this.lanactiveArr = item
        },
        // 开始录音
        microphone () {
            if (!this.microphoneStatus) {
                //开始录音
                this.recorder.start();
                this.microphoneStatus = true;
                this.rightBtn = '录音中...'
            } else {
                this.recorder.stop();
                let toltime = this.recorder.duration; //录音总时长
                let fileSize = this.recorder.fileSize; //录音总大小
                //录音结束，获取取录音数据
                let PCMBlob = this.recorder.getPCMBlob(); //获取 PCM 数据
                let wav = this.recorder.getWAVBlob(); //获取 WAV 数据
                this.wavblob = wav;
                this.microphoneStatus = false;
                this.microphoneBtn = null
                let wavResult = null
                var reader = new window.FileReader();
                reader.readAsDataURL(wav); 
                let _this = this
                reader.onloadend = function() {
                    wavResult = reader.result
                    let obj = {
                        wav: wavResult,
                        seconds: Math.ceil(toltime)
                    }
                    _this.wavList.push(obj)
                    _this.cur.Bookanswer = _this.wavList
                }
                this.rightBtn = '点击录音'
            }
        },
        // 判断对错
        practiceJudge () {
            if(this.cur.Bookanswer){
                return true
            }else{
               return false 
            }
        }
    },
    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;
    box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
    .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: 48px 0px 0px 0;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        .img1 {
            text-align: center;
            border-bottom: 1px solid #e5e5e5;
            /* height: 120px;
    background: url("../../assets/dialogue/Group 1970.png") no-repeat */
        }
        &::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    }

    .left {
        display: flex;
        align-items: flex-start;
        position: relative;
        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: 18px;
                height: 24px;
            }
            .chinese {
                font-family: 'FZJCGFKTK';
                font-style: normal;
                font-weight: normal;
                font-size: 36px;
            }
        }
        .english {
            color: #2c2c2c;
            font-size: 16px;
            line-height: 20px;
            // font-family: sourceR;
            display: block;
            margin-left: 5px;
        }
    }
    .wx-arrow {
        margin-bottom: 8px;
    }
    .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;
        }
        .dialogue_content_box {
            padding-top: 10px;
        }
        .translate_box {
            background: #f6f6f6;
            &.novoice {
                background: #f6f6f6;
            }
        }
        .bubble {
            justify-content: flex-end;
            .bubble_dv {
                background: #f6f6f6;
            }
        }
    }
    .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;
                }
            }
        }
    }
    .pinyin_hidden {
        visibility: hidden;
    }
}
.micro-box {
    display: flex;
    justify-content: flex-end;
}
.bottom {
    margin-top: 10px;
    img {
        margin-left: 10px;
        width:84px;
    }
    .switch {
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        padding-left: 52px;
    }
    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_top {
        border-bottom: 1px solid #e5e5e5;
    }
    .bottom_main {
        height: 156px;
        display: flex;
        align-items: top;
        justify-content: flex-end;
        // font-family: Source Han Sans SC;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        padding-right: 60px;
        .bottom-right {
            margin-top: 24px;
            display: flex;
            cursor: pointer;
            align-items: center;
            > div {
                width: 176px;
                margin-right: 12px;
                border: 2px solid #fb5b5b;
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                line-height: 35px;
                color: #e24747;
                height: 72px;
                img {
                    width:22px;
                    height: 22px;
                    margin-right: 10px;
                }
            }
            .bottom-right_record:active {
                background: #ffe3e3;
                border-color: #ffe3e3;
            }
        }
    }
}
.questionMiddle {
    .SelectCorrect {
        width: 800px;
        height: 472px;
        margin: 44px auto 0 auto;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0px 4px 0px rgba(239, 167, 28, 0.4);
        .SelectCorrect-top {
            width: 100%;
            height: 40px;
            background: rgba(255, 214, 107, 0.3);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            > img {
                margin-left: 13px;
                width: 16px;
            }
        }
        .SelectCorrect-main {
            background: #fff;
            padding: 32px 0px 0px 0;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
        }

        .left {
            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 13px;
                max-width: 400px;
                &.novoice {
                    min-height: 46px;
                }
            }
            .translate {
                > div {
                    margin-left: 2px;
                }
                .spell {
                    font-size: 12px;
                    height: 16px;
                }
                .chinese {
                    font-size: 24px;
                }
            }
            .english {
                font-size: 12px;
                line-height: 20px;
                margin-left: 4px;
            }
        }
        .wx-arrow {
            margin-bottom: 6px;
        }
        .right {
            margin-top: 30px;
            margin-right: 40px;
            > img {
                width: 56px;
            }
            .wx-arrow {
                width: 8px;
                margin-top: 22px;
                margin-right: 16px;
            }
            .dialogue_content_box {
                padding-top: 6px;
            }
            .translate_box {
                background: #f6f6f6;
                &.novoice {
                    background: #f6f6f6;
                }
            }
            .bubble {
                justify-content: flex-end;
                .bubble_dv {
                    background: #f6f6f6;
                }
            }
        }
        .bubble {
            .bubble_dv {
                width: 133px;
                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;
                    }
                }
            }
        }
        .pinyin_hidden {
            visibility: hidden;
        }
    }
    .bottom {
        margin-top: 6px;
        img {
            margin-left: 6px;
            width:56px;
        }
        .switch {
            padding-bottom: 10px;
            padding-left: 34px;
        }
        ul {
            display: inline-block;
            width: 600px;
            li {
                display: inline-block;
                min-width: 32px;
                padding: 3px 6px;
                font-size: 12px;
                border-radius: 6px;
                margin: 0 3px;
            }
            .active {
                background: #7663ec;
                color: #ffffff;
                font-weight: 700;
            }
        }
        .switchBtn {
            width: 26px;
            margin-left: 16px;
            margin-right: 6px;
        }
        .bottom_main {
            height: 104px;
            font-size: 16px;
            padding-right: 40px;
            .bottom-right {
                margin-top: 16px;
                > div {
                    width: 117px;
                    margin-right: 8px;
                    border: 2px solid #fb5b5b;
                    border-radius: 10px;
                    font-size: 16px;
                    line-height: 24px;
                    height: 48px;
                    img {
                        width:14px;
                        height: 14px;
                        margin-right: 6px;
                    }
                }
                .bottom-right_record:active {
                    background: #ffe3e3;
                    border-color: #ffe3e3;
                }
            }
        }
    }
}
.questionSmall {
.SelectCorrect {
    width: 600px;
    height: 354px;
    margin: 28px auto 0 auto;
    border-radius: 12px;
    box-shadow: 0px 3px 0px rgba(239, 167, 28, 0.4);
    .SelectCorrect-top {
        height: 30px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        > img {
            margin-left: 10px;
            width: 12px;
        }
    }
    .SelectCorrect-main {
        padding: 24px 0px 0px 0;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .left {
        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: 18px;
            }
            .chinese {
                font-size: 18px;
            }
        }
        .english {
            font-size: 12px;
            line-height: 18px;
            margin-left: 2px;
        }
    }
    .wx-arrow {
        margin-bottom: 4px;
    }
    .right {
        margin-top: 22px;
        margin-right: 30px;
        > img {
            width: 42px;
        }
        .wx-arrow {
            width: 6px;
            margin-top: 17px;
            margin-right: 12px;
        }
        .dialogue_content_box {
            padding-top: 5px;
        }
        .translate_box {
            background: #f6f6f6;
            &.novoice {
                background: #f6f6f6;
            }
        }
        .bubble {
            justify-content: flex-end;
            .bubble_dv {
                background: #f6f6f6;
            }
        }
    }
    .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;
                }
            }
        }
    }
    .pinyin_hidden {
        visibility: hidden;
        height:12px;
    }
}
.bottom {
    margin-top: 5px;
    img {
        margin-left: 5px;
        width:42px;
    }
    .switch {
        padding-bottom: 8px;
        padding-left: 26px;
    }
    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_main {
        height: 78px;
        font-size: 12px;
        padding-right: 30px;
        .bottom-right {
            margin-top: 12px;
            > div {
                width: 88px;
                margin-right: 6px;
                border: 1px solid #fb5b5b;
                border-radius: 7px;
                font-size: 12px;
                line-height: 18px;
                height: 36px;
                img {
                    width:11px;
                    height: 11px;
                    margin-right: 5px;
                }
            }
            .bottom-right_record:active {
                background: #ffe3e3;
                border-color: #ffe3e3;
            }
        }
    }
}
}
</style>