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">
        <b class="xuhao" v-if="items.number">{{ items.number }}</b>
        <p
          :class="[oldsrc == items.mp3_list[0].id ? palyClass : '']"
          @click="handlePlayVoice(items.mp3_list[0].id)"
          v-if="items.mp3_list && items.mp3_list.length > 0"
        ></p>
        <!-- 句子内容 -->
        <div class="item-content">
          <!-- 如果不是填空题 不替换 -->
          <template v-if="dataType.indexOf('sentence_input_chs') == -1">
            <template v-if="items.detail.wordsList.length == 0">
              <p :class="['content-con']" v-if="items.detail.sentence">
                {{ items.detail.sentence }}
              </p>
            </template>
            <template v-else>
              <div class="con-box">
                <div
                  :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
                  v-for="(itemCon, indexCon) in items.detail.resArr"
                  :key="indexCon"
                  v-show="itemCon.isShow"
                >
                  <template
                    v-if="
                      items.detail.wordsList[indexCon + 1] &&
                      items.detail.wordsList[indexCon + 1].chs &&
                      chsFhList.indexOf(
                        items.detail.wordsList[indexCon + 1].chs
                      ) > -1
                    "
                  >
                    <div class="synthesis-box">
                      <div>
                        <span
                          class="pinyin"
                          :class="[
                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
                          ]"
                          >{{ itemCon.pinyin }}</span
                        >
                        <span class="hanzi content-con">{{ itemCon.chs }}</span>
                      </div>
                      <div style="text-align: left">
                        <span
                          class="pinyin"
                          :class="[
                            noFont.indexOf(
                              items.detail.wordsList[indexCon + 1].pinyin
                            ) > -1
                              ? 'noFont'
                              : '',
                          ]"
                          >{{
                            items.detail.wordsList[indexCon + 1].pinyin
                          }}</span
                        >
                        <span class="hanzi content-con">{{
                          items.detail.wordsList[indexCon + 1].chs
                        }}</span>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <span
                      class="pinyin"
                      :class="[
                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
                      ]"
                      >{{ itemCon.pinyin }}</span
                    >
                    <span class="hanzi content-con">{{ itemCon.chs }}</span>
                  </template>
                </div>
              </div>
            </template>
            <b class="content-en" v-if="items.en">{{ items.en }}</b>
          </template>
          <template v-else>
            <div class="chs_pinyin">
              <div
                v-for="(conent, conIndex) in items.detail.wordsList"
                :key="conIndex + 'con'"
              >
                <template v-if="items.detail.pyPosition == 'top'">
                  <!-- <div
                    v-if="conent.pinyin == '__'"
                    contenteditable="true"
                    class="input pinyin"
                    v-html="answerList[indexs].pinyin"
                    @change="changeAnswerList($event, indexs, 'pinyin')"
                  ></div> -->
                  <!-- 
                    v-model="answerList[indexs].pinyin"
                   -->
                  <p class="pinyin" v-if="conent.pinyin != '__'">
                    {{ conent.pinyin }}
                  </p>
                </template>
                <template v-if="conent.chs == '__'">
                  <div
                    contenteditable="true"
                    class="input chs"
                    v-html="answerList[indexs].chs"
                    @change="changeAnswerList($event, indexs, 'chs')"
                    @copy.native.capture.prevent="handleFalse"
                    @paste.native.capture.prevent="handleFalse"
                    @cut.native.capture.prevent="handleFalse"
                  ></div>
                </template>
                <template v-else>
                  <p class="chs">
                    {{ conent.chs }}
                  </p>
                </template>

                <template
                  v-if="items.detail.pyPosition == 'bottom' && conent.pinyin"
                >
                  <!-- <div
                    v-if="conent.pinyin == '__'"
                    contenteditable="true"
                    class="input pinyin"
                    v-html="answerList[indexs].pinyin"
                    @change="changeAnswerList($event, indexs, 'pinyin')"
                  ></div> -->
                  <p class="pinyin" v-if="conent.pinyin != '__'">
                    {{ conent.pinyin }}
                  </p>
                </template>
              </div>
            </div>
          </template>
        </div>
        <template v-if="dataType.indexOf('sentence_answer_chs') > -1">
          <input
            @input="handleInput"
            :class="['item-input']"
            v-model="curQue.Bookanswer[indexs]"
            placeholder="输入"
          />
        </template>
        <template v-if="dataType.indexOf('sentence_judge_chs') > -1">
          <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="dataType.indexOf('sentence_record_chs') > -1">
          <template v-if="dataType.indexOf('sentence_input_chs') != -1">
            <Soundrecord
              @handleWav="handleWav"
              type="normal"
              v-if="items.IsRecord"
            />
          </template>
          <template v-else>
            <Soundrecord
              @handleWav="handleWav"
              type="mini"
              class="luyin-box"
              v-if="items.IsRecord"
            />
          </template>
        </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: "",
      dataType: [], // 题型
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
      answerList: [],
    };
  },
  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() {
      let _this = this;
      this.dataType = [];
      if (!this.curQue.Bookanswer) {
        let curCorrect = [];
        this.curQue.option.forEach((item) => {
          curCorrect.push("");
        });
        this.$set(this.curQue, "Bookanswer", curCorrect);
      }
      this.curQue.fn_list.forEach((item) => {
        if (item.isFn) {
          _this.dataType.push(item.type);
        }
      });
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      curQue.option.forEach((dItem, dIndex) => {
        let paraArr = [];
        dItem.detail.wordsList.forEach((sItem, sIndex) => {
          this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
          let obj = {
            pinyin: sItem.pinyin,
            chs: sItem.chs,
            isShow: sItem.isShow,
          };
          paraArr.push(obj);
        });
        this.$set(_this.curQue.option[dIndex].detail, "resArr", paraArr);
        console.log();
        if (paraArr.length == 0) {
          let str = "就那天___";
          let arrs = str.split(/_{2,}/g);
        }
      });
    },
    //词和标点合一起
    mergeWordSymbol(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (curIndex < leg - 1) {
        if (this.chsFhList.indexOf(wItem.chs) > -1) {
          wItem.isShow = false;
        } else {
          wItem.isShow = true;
        }
      }
    },
    // 判断题选择
    handleSelectJudge(obj, index) {
      this.$set(this.curQue.Bookanswer, index, obj);
    },
    handleWav(data) {},
    handleDatas(str, type) {
      str = str.trim();
      str = str.replace(/_{2,}/g, "^ ");
      str =
        type == "hanzi" ? str.replace(/\s+/g, "") : str.replace(/\s+/g, " ");
      let resArr = type == "hanzi" ? str.split("") : str.split(/\s+/);
      return resArr;
    },
    changeAnswerList(e, index, type) {
      if (type == "pinyin") {
        this.answerList[index].pinyin += e.target.innerHTML;
      } else {
        this.answerList[index].chs += e.target.innerHTML;
        console.log(e.target.innerHTML)
      }
    },
    handleFalse(){
        return false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData();
    if (this.dataType.indexOf("sentence_input_chs") != -1) {
      this.curQue.option.forEach((item) => {
        item.answer.forEach((it) => {
          this.answerList.push({
            chs: "",
            pinyin: "",
          });
        });
      });
    }
  },
  //生命周期 - 挂载完成（可以访问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: center;
        margin-right: 8px;
        font-weight: 400;
        color: #ffffff;
        //    margin-top: 4px;
        font-family: "FZJCGFKTK";
        border-radius: 50%;
      }
      > 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-content {
        flex: 1;
        .chs_pinyin {
          display: flex;
          margin-left: 8px;
          .input {
            margin-left: 16px;
            margin-right: 8px;
            min-width: 50px;
            border-bottom: 1px solid black;
          }
          .pinyin {
            font-weight: "GB-PINYINOK-B";
            font-size: 14px;
            line-height: 130%;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 8px;
          }
          .chs {
            font-family: "FZJCGFKTK";
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 150%;
            color: #000000;
          }
          p {
            margin: 0;
          }
        }
        .content-con {
          font-size: 20px;
          line-height: 150%;
          color: #000000;
          font-family: "FZJCGFKTK";
          margin: 0;
          &.content-con-small {
            font-size: 16px;
          }
        }
        .content-en {
          font-weight: normal;
          font-size: 16px;
          line-height: 150%;
          color: #000000;
          font-family: "robot";
        }
        .con-box {
          display: flex;
          flex-flow: wrap;
          .con-item {
            text-align: center;
            padding: 0 3px;
            &.con-item-0 {
              text-align: left;
              padding-left: 0;
            }
          }
          span {
            display: block;
          }
          .pinyin {
            font-family: "GB-PINYINOK-B";
            font-size: 14px;
            line-height: 130%;
            color: #000000;
            height: 18px;
            &.noFont {
              font-family: initial;
            }
          }
          .synthesis-box {
            display: flex;
          }
        }
      }
      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: 64px;
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .Big-Book-prev-Textdes {
    b.xuhao {
      background: #24b99e;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .Big-Book-prev-Textdes {
    b.xuhao {
      background: #bd8865;
    }
  }
}
</style>