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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes" v-if="curQue">
    <h2 v-if="curQue.title">{{curQue.title}}</h2>
    <ul>
      <li v-for="(items, indexs) in curQue.option" :key="indexs">
          <p :class="[oldsrc==items.mp3_list[0].url?palyClass:'']" @click="handlePlayVoice(items.mp3_list[0].url)" v-if="items.mp3_list&&items.mp3_list.length>0">
          </p>
          <b v-if="items.number">{{ items.number }}.</b>
          <span class="item-con">{{items.con}}</span>
          <!-- <template v-if="curQue.ChildType=='sentence_answer'"> -->
            <input
                    @input="handleInput"
                    :class="['item-input']"
                    v-model="curQue.Bookanswer[indexs]"
                    placeholder="输入"
                >
          <!-- </template> -->
          <template v-if="curQue.ChildType=='sentence_judge'">
            <div class="judge-box">
                <a :class="['right-btn',curQue.Bookanswer[indexs]=='right'?'active':'']" @click="handleSelectJudge('right',indexs)"></a>
                <a :class="['error-btn',curQue.Bookanswer[indexs]=='error'?'active':'']" @click="handleSelectJudge('error',indexs)"></a>
            </div>
          </template>
          <template v-if="curQue.ChildType=='sentence_Record'">
              <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box"/>
          </template>
      </li>
    </ul>
  </div>
</template>

<script>
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
export default {
  components: {Soundrecord},
  props: ["curQue"],
  data() {
    return {
        audio: new Audio(),
        oldsrc: '', // 存储播放音频的src 用来比对是否点击的是同一个音频
        palyClass: '',
        judge: '',
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
        // input 输入时
        handleInput (e) {
            e.target.value = e.target.value ? e.target.value.trim() : '';
        },
        handlePlayVoice(url) {
            let _this = this;
            if (!url) {
                return;
            }
            if (!this.audio.paused && this.oldsrc == url) {
                this.audio.pause();
            }else if(this.audio.paused && this.oldsrc == url){
                this.audio.play();
            } else {
                _this.audio.pause();
                _this.audio.load();
                _this.audio.src = url;
                _this.oldsrc = url
                _this.audio.loop = false;
                _this.audio.play();
            }
        },
        // 处理数据
        handleData(){
            if(!this.curQue.Bookanswer){
                let curCorrect = [];
                this.curQue.option.forEach(item => {
                    curCorrect.push('')
                });
                this.$set(this.curQue, "Bookanswer", curCorrect);
            }
        },
        // 判断题选择
        handleSelectJudge(obj,index){
            this.$set(this.curQue.Bookanswer, index, obj);
        },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.handleData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.audio.addEventListener("play", function () {
        _this.palyClass = 'active'
    });
    _this.audio.addEventListener("pause", function () {
        _this.palyClass = ''
    });
    _this.audio.addEventListener("ended", function () {
        _this.palyClass = ''
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes{
    width: 100%;
    h2{
        font-weight: normal;
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        margin: 0 2px 8px 2px;
    }
    ul{
        display: flex;
        flex-flow: wrap;
        justify-content: start;
        list-style: none;
        li{
            width: 100%;
            background: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 8px;
            >b{
               width: 24px;
               line-height: 24px; 
               font-size: 16px;
               text-align: right;
               margin-right: 8px;
               font-weight: 400;
               color: #000000;
            //    margin-top: 4px;
               font-family: 'FZJCGFKTK';
            }
            >p{
                width: 24px;
                height: 24px;
                cursor: pointer;
                background: url('../../../assets/newImage/common/icon-voice.png') left center no-repeat;
                background-size: 24px;
                margin: 0px 8px 0 0;
                &.active{
                    background: url('../../../assets/newImage/common/icon-voice-play-zise.png') left center no-repeat;
                    background-size: 24px;
                }
            }
            .item-con{
                flex: 1;
                font-size: 16px;
                line-height: 150%;
                color: #000000;
                margin-right: 8px;
                word-break: break-word;
                // margin-top: 4px;
                font-family: 'FZJCGFKTK';
            }
            input{
                width: 68px;
                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%;
            }
            .judge-box{
                display: flex;
                justify-content: center;
                a{
                    width: 32px;
                    height: 32px;
                    background: #fff url('../../../assets/newImage/common/right-btn.png') center no-repeat;
                    background-size: 24px;
                    border-radius: 8px;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    &:hover,&.active{
                        background-color: #E5FFF0;
                        border-color: #00C850;
                    }
                }
                a.error-btn{
                    background: #fff url('../../../assets/newImage/common/error-btn.png') center no-repeat;
                    background-size: 24px;
                    margin-left: 4px;
                    &:hover,&.active{
                        background-color: #FFE5E5;
                        border-color: #DE4444;
                    }
                }
            }
            .luyin-box{
                border: 1px solid rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                width: 68px;
            }
        }
    }
}
</style>