GCLS_Page_Book_Component_NPC/src/components/Adult/preview/Picture.vue

<!--  -->
<template>
    <div :class="['Big-Book-PictureBox']" v-if="curQue">
        <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
            <li v-for="(items,indexs) in curQue.option" :key="indexs"> 
                <template v-if="ChildType!='image_gdcy'&& items.hanziSite=='top'">
                    <div class="hanzi-box hanzi-box-top" v-if="items.pinyin||items.hanzi">
                        <span v-if="items.pinyin&&(!items.pinyinSite||items.pinyinSite=='top')" class="pinyin">{{items.pinyin}}</span>
                        <p v-if="items.hanzi">{{items.hanzi}}</p>
                        <span v-if="items.pinyin&&(items.pinyinSite=='bottom')" class="pinyin">{{items.pinyin}}</span>
                    </div>
                </template>
                <div v-for="(itemss,indexss) in items.img_list" :key="indexss">
                    <el-image
                        :src="itemss.url"
                        fit="scale-down"
                        class="img_url"
                    >
                        <div slot="placeholder" class="image-slot">
                            <img src="../../../assets/common/icon-imgloading.png" />
                        </div>
                    </el-image>
                </div>
                
                <template v-if="ChildType!='image_gdcy'&&(!items.hanziSite||items.hanziSite=='bottom')">
                    <div class="hanzi-box" v-if="items.pinyin||items.hanzi">
                        <span v-if="items.pinyin&&(!items.pinyinSite||items.pinyinSite=='top')" class="pinyin">{{items.pinyin}}</span>
                        <p v-if="items.hanzi">{{items.hanzi}}</p>
                        <span v-if="items.pinyin&&(items.pinyinSite=='bottom')" class="pinyin">{{items.pinyin}}</span>
                    </div>
                </template>
                <template v-if="ChildType=='image_input'||ChildType=='image_input_three'||ChildType=='image_wordInput'">
                    <input class="singleInput" v-model="userAnswer.input" placeholder="输入" @blur="handleInput('input')">
                </template>
                <!-- <input class="singleInput" placeholder="输入" @blur="handleInput(index,indexs)" v-if="fn_list_obj[index]&&fn_list_obj[index].indexOf('input')>-1"> -->
                <!-- 补齐输入 -->
                <template v-if="ChildType=='image_gdcy'">
                    <div class="fill-box">
                        <b v-if="items.hanzi">{{items.hanzi}}</b>
                        <input v-model="userAnswer.input" placeholder="输入" @blur="handleInput('input')">
                    </div>
                </template>
                <!-- 双输入 -->
                <template v-if="ChildType=='image_dobleinput'">
                    <div class="DoubleInput-box">
                        <input placeholder="输入" @blur="handleInput('dInput',0)" v-model="userAnswer.dInput[0]">
                        <input placeholder="输入" @blur="handleInput('dInput',1)" v-model="userAnswer.dInput[1]">
                    </div>
                </template>
                <!-- 判断 -->
                <template v-if="ChildType=='image_judge'">
                    <div class="judge-box">
                        <a :class="['right-btn',userAnswer.judge=='right'?'active':'']" @click="handleSelectJudge('right')"></a>
                        <a :class="['error-btn',userAnswer.judge=='error'?'active':'']" @click="handleSelectJudge('error')"></a>
                    </div>
                </template>
                <!-- 单选 -->
                <template v-if="ChildType=='image_single'">
                    <el-radio v-model="userAnswer.singleRadio" label="1"><span></span></el-radio>
                </template>
                <!-- 复选 -->
                <template v-if="ChildType=='image_checkBox'">
                    <el-checkbox v-model="userAnswer.singlechecked"><span></span></el-checkbox>
                </template>
                <!-- 三件套 -->
                <div class="luyinVoice-box" v-if="items.mp3_list.length>0||fn_list_obj&&fn_list_obj.indexOf('image_record')>-1||items.RecordControl">
                    <template v-if="items.mp3_list.length>0">
                        <span :class="['voice',mp3Play]" @click="playmicrophone(items.mp3_list[0].url,'mp3')"></span>
                    </template>
                    <Soundrecord @handleWav="handleWav" :type="items.RecordControl?items.RecordControl:'normal'" class="luyin-box" :class="[items.RecordControl]" v-if="fn_list_obj.indexOf('image_record')>-1||items.RecordControl"/>
                    <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
                    <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
                </div>
            </li>
        <!-- </ul> -->
    </div>
</template>

<script>
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
import Recorder from "js-audio-recorder"; //录音插件
export default {
  components: { Soundrecord, },
  props: ["curQue","ChildType"],
  data() {
    return {
      fn_list_obj: '',
      answer: [],
      userAnswer: {
          input:'', // 输入
          dInput: ['',''], //双输入
          judge:'',// 判断
          singleRadio:'',
          singlechecked: false,
      }, // 记录用户答题内容
      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,
      hasMicro: "", // 录音后的样式class
      wavblob: null,
      audio: new window.Audio(),
      oldUrl: null, // 存储上个播放音频地址
      mp3Play: '',// 音频播放
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    handleFnList() {
      let obj = '';
      this.curQue.fn_list.forEach(node=>{
          if (node.isFn) {
            obj += node.type + ','
          } 
        // if(obj.indexOf('input')>-1){
        //     node.option.forEach((i)=>{
        //         userItem.push('')
        //     })
        // }
        // this.userAnswer.push(userItem)
      })
      this.fn_list_obj = obj
    },
    // 修改正确选项中得某一个为正确答案
    changAnswer(index, type) {
      if (type == "single") {
        console.log(this.answer);
      } else if (type == "checkBox") {
        let correct = [];
        this.curQue.option.forEach((item, i) => {
          if (item.isChecked) {
            correct.push(i);
          }
        });
        this.answer[0].checkBox = correct;
        console.log(this.answer);
      } else if (type == "judge") {
        console.log(this.answer);
      }
    },
    // 去掉前后空格
    handleInput(index,indexs){
        if(indexs||indexs==0){
            let res = this.userAnswer[index][indexs].trim()
            this.$set(this.userAnswer[index],indexs,res)
        }else{
            this.userAnswer[index] = this.userAnswer[index].trim()
        }
    },
    playmicrophone (url,type) {
        if(url){
            let _this = this;
            if (!this.audio.paused) {
                this.audio.pause();
                if(type=='mp3'){
                    _this.mp3Play = ''
                }
            }else if( this.audio.paused && _this.oldUrl == url ){
                _this.audio.play();
                if(type=='mp3'){
                    _this.mp3Play = 'active'
                }
            } else {
                _this.audio.pause();
                _this.audio.load();
                if(type=='mp3'){
                    _this.mp3Play = 'active'
                    _this.audio.src = url
                }
                _this.oldUrl = url
                _this.audio.play();
            } 
        }
    },
    // 判断题选择
    handleSelectJudge(obj){
        this.userAnswer.judge = obj
    },
    handleWav(data) {
        this.userAnswer = []
        this.userAnswer.push(data)
        // this.getAnswer(this.userAnswer, this.queIndex);
        this.cur.BookWavAnswerWav = [data]
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQue) {
      this.handleFnList();

      let obj = {
        single: [],
        checkBox: [],
        judge: [],
        input: [],
        spell: [],
      };
      this.answer.push(obj);
    }
    let _this = this;
    _this.audio.addEventListener("ended", function () {
        _this.mp3Play = ''
        _this.hasMicro = 'normal'
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-PictureBox{
    width: 100%;
    margin-bottom: 16px;
    // &.PictureBoxFlex{
    //     display: flex;
    //     justify-content: space-between;
    //     .Big-Book-PictureBox-item{
    //         width: 384px;
    //     }
    // }
    // .Big-Book-PictureBox-item{
    //     list-style: none;
    //     background: #F3F3F3;
    //     border-radius: 8px;
    //     padding: 16px;
    //     margin: 0;
    //     display: flex;
    //     flex-flow: wrap;
        li{
            list-style: none;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: #fff;
            .hanzi-box{
                margin-top: 8px;
                &.hanzi-box-top{
                    margin-top: 0px;
                    margin-bottom: 8px;
                }
                >span.pinyin{
                    display: block;
                    text-align: center;
                    font-family: 'GB-PINYINOK-B';
                    font-size: 14px;
                    line-height: 1.3;
                    color: #000000;
                }
                >p{
                    color: #000000;
                    font-size: 16px;
                    line-height: 150%;
                    text-align: center;
                    margin: 0;
                    width: 100%;
                    font-family: 'FZJCGFKTK';
                }
            }
            input{
                flex: 1;
                width: 100%;
                border: 1px solid rgba(0, 0, 0, 0.15);
                box-sizing: border-box;
                border-radius: 4px;
                outline: none;
                height: 32px;
                padding: 4px 8px;
                color: #000000;
                text-align: center;
                font-size: 16px;
                line-height: 150%;
                &.singleInput{
                    margin-top: 8px;
                }
            }
            .luyinVoice-box{
                width: 100%;
                margin-top: 8px;
                display: flex;
                -ms-flex-pack: justify;
                align-items: center;
                span{
                    width: 24px;
                    height: 24px;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 24px;
                    margin-right: 8px;
                    cursor: pointer;
                    &:first-child{
                        margin-left: 0px;
                    }
                    &.voice{
                        background-image: url('../../../assets/newImage/common/icon-voice-red.png');
                    }
                    &.active {
                        background-image: url('../../../assets/newImage/common/icon-voice-play-red.png');
                    }
                    // &.luyin{
                    //     background-image: url('../../../assets/newImage/common/luyin.png');
                    //     &.active {
                    //         background-image: url('../../../assets/newImage/common/luyin-active.png');
                    //     }
                    // }
                    // &.play{
                    //     background-image: url('../../../assets/newImage/common/luyin-play.png');
                    //     &.normal {
                    //         background-image: url('../../../assets/newImage/common/luyin-play-active.png');
                    //     }
                    //     &.stop {
                    //         background-image: url('../../../assets/newImage/common/luyin-play-stop.png');
                    //     }
                    // }
                }
                .luyin-box{
                    flex: 1;
                    justify-content: start;
                    padding: 0 12px;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    border-radius: 8px;
                    &.mini{
                        width: 64px;
                    }
                    &.normal{
                        width:129px;
                    }
                    &.pro{
                        width:200px;
                    }
                    &.promax{
                        width:280px;
                    }
                }
            }
            .fill-box{
                display: flex;
                align-items: center;
                margin-top: 8px;
                b{
                    margin-right: 8px;
                    color: #000000;
                    font-weight: normal;
                    font-size: 16px;
                }
            }
            .DoubleInput-box{
                display: flex;
                align-items: center;
                margin-top: 8px;
                >input:first-child{
                    margin-right: 8px;
                }
            }
            .el-radio,.el-checkbox{
                width: 100%;
                margin: 8px 0 0;
                text-align: center;
                height: 32px;
                line-height: 32px;
            }
            .judge-box{
                margin-top: 8px;
                display: flex;
                justify-content: center;
                a{
                    width: 70px;
                    height: 32px;
                    background: #F7F7F7 url('../../../assets/newImage/common/right-btn.png') center no-repeat;
                    background-size: 24px;
                    border-radius: 4px;
                    border: 1px solid #F7F7F7;
                    &:hover,&.active{
                        background-color: #E5FFF0;
                        border-color: #00C850;
                    }
                }
                a.error-btn{
                    background: #F7F7F7 url('../../../assets/newImage/common/error-btn.png') center no-repeat;
                    background-size: 24px;
                    margin-left: 4px;
                    &:hover,&.active{
                        background-color: #FFE5E5;
                        border-color: #DE4444;
                    }
                }
            }
        }
        .img_url{
            width: 100%;
            height: 128px;
        }
    // }
}
.NNPE-tableList-tr-last{
    .Big-Book-PictureBox{
        margin-bottom: 0;
    }
}
</style>
<style lang="scss">
ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
}
.Big-Book-PictureBox{
    .el-checkbox__label,.el-radio__label{
        padding: 0;
    }
}     
</style>