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

<!--  -->
<template>
  <div
    class="Big-Book-prev-Textdes"
    v-if="
      curQue && judgeAnswer == 'standardAnswer'
        ? userErrList.length > 0
          ? true
          : false
        : true
    "
  >
    <h6
      v-if="judgeAnswer == 'userAnswer' || judgeAnswer == 'studentAnswer'"
      class="standardTitle"
      style="margin: 10px 0 8px 24px"
    >
      {{ judgeAnswer == "userAnswer" ? "Your answer" : "Student answers" }}
    </h6>
    <h6
      v-else-if="judgeAnswer == 'standardAnswer'"
      class="standardTitle"
      style="margin: 10px 0 8px 24px"
    >
      Standard answer
    </h6>
    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
    <ul>
      <li
        v-for="(items, indexs) in judgeAnswer == 'standardAnswer'
          ? userErrList
          : curQue.option"
        :key="indexs"
        :class="[
          judgeAnswer == 'standardAnswer' ? 'standardAnswer' : '',
          judgeAnswer == 'standardAnswer'
            ? 'correct'
            : judgeAnswer == 'studentAnswer'
            ? curQue.Bookanswer[indexs].userAnswerJudge
              ? curQue.Bookanswer[indexs].userAnswerJudge == '[JUDGE##F##JUDGE]'
                ? 'error'
                : 'correct'
              : ''
            : '',
        ]"
      >
        <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"
                    :class="[
                      conent.pinyin.indexOf('__') > -1 ? 'pinyin-opacity' : '',
                    ]"
                    v-if="conent.pinyin"
                  >
                    {{ conent.pinyin }}
                  </p>
                </template>
                <template v-if="conent.chs.indexOf('__') > -1">
                  <!-- {{items.detail.resArr[conIndex].inputNumber}} -->
                  <EditDiv
                    class="input chs"
                    v-model="
                      curQue.Bookanswer[indexs].answerList[
                        items.detail.resArr[conIndex].inputNumber
                      ].chs
                    "
                    :canEdit="TaskModel == 'ANSWER' ? false : true"
                  ></EditDiv>
                  <!-- <el-input
                    class="input chs"
                    type="textarea"
                    autosize
                    placeholder="输入"
                    v-model="curQue.Bookanswer[indexs].answerList[items.detail.resArr[conIndex].inputNumber].chs"
                    :readonly="TaskModel=='ANSWER'"
                    maxlength="200">
                </el-input> -->
                </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"
                    :class="[
                      conent.pinyin.indexOf('__') > -1 ? 'pinyin-opacity' : '',
                    ]"
                    v-if="conent.pinyin"
                  >
                    {{ conent.pinyin }}
                  </p>
                </template>
              </div>
            </div>
          </template>
        </div>
        <template
          v-if="
            dataType.indexOf('sentence_answer_chs') > -1 ||
            dataType.indexOf('sentence_input_chs') > -1
          "
        >
          <input
            @input="handleInput"
            :class="['item-input']"
            v-model="
              judgeAnswer == 'standardAnswer'
                ? items.answer[0]
                : curQue.Bookanswer[indexs].answer
            "
            placeholder="输入"
            @change="changeuserAnswerJudge(indexs)"
          />
        </template>
        <template v-if="dataType.indexOf('sentence_judge_chs') > -1">
          <div
            class="judge-box"
            :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']"
          >
            <a
              :class="[
                'right-btn',
                judgeAnswer == 'standardAnswer'
                  ? items.judge
                    ? 'active active-right-btn'
                    : ''
                  : curQue.Bookanswer[indexs].answer == 'right'
                  ? 'active active-right-btn'
                  : '',
              ]"
              @click="handleSelectJudge('right', indexs)"
            ></a>
            <a
              :class="[
                'error-btn',
                judgeAnswer == 'standardAnswer'
                  ? items.judge
                    ? ''
                    : 'active active-error-btn'
                  : curQue.Bookanswer[indexs].answer == 'error'
                  ? 'active active-error-btn'
                  : '',
              ]"
              @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"
              :answerRecordList="curQue.Bookanswer[indexs].recordList"
              :tmIndex="indexs"
              :TaskModel="TaskModel"
              type="normal"
              v-if="items.IsRecord"
              :style="{ marginLeft: '8px' }"
            />
          </template>
          <template v-else>
            <Soundrecord
              @handleWav="handleWav"
              :answerRecordList="curQue.Bookanswer[indexs].recordList"
              :tmIndex="indexs"
              :TaskModel="TaskModel"
              type="mini"
              class="luyin-box"
              v-if="items.IsRecord"
              :style="{ marginLeft: '8px' }"
            />
          </template>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
import EditDiv from "../preview/EditDiv.vue";
export default {
  components: { Soundrecord, EditDiv },
  props: ["curQue", "TaskModel", "judgeAnswer"],
  data() {
    return {
      audio: new Audio(),
      oldsrc: "", // 存储播放音频的src 用来比对是否点击的是同一个音频
      palyClass: "",
      dataType: [], // 题型
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
      answerList: [],
      userErrList: [],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 判断对错
    changeuserAnswerJudge(index) {
      if (this.dataType.indexOf("sentence_judge_chs") != -1) {
        // 判断题
        if (
          this.curQue.Bookanswer[index].answer == "right" &&
          this.curQue.option[index].judge
        ) {
          this.curQue.Bookanswer[index].userAnswerJudge = "[JUDGE##T##JUDGE]";
        } else {
          this.curQue.Bookanswer[index].userAnswerJudge = "[JUDGE##F##JUDGE]";
        }
      } else if (this.dataType.indexOf("sentence_input_chs") != -1) {
        // 填空题
        if (this.curQue.option[index].answer.length > 0) {
          let userAnswerJudge = "[JUDGE##F##JUDGE]";
          this.curQue.option[index].answer.forEach((item) => {
            if (this.curQue.Bookanswer[index].answer == item) {
              userAnswerJudge = "[JUDGE##T##JUDGE]";
            }
          });
          this.curQue.Bookanswer[index].userAnswerJudge = userAnswerJudge;
        }
      }
    },
    // 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 = [];
      this.curQue.fn_list.forEach((item) => {
        if (item.isFn) {
          _this.dataType.push(item.type);
        }
      });
      if (!this.curQue.Bookanswer) {
        let answerList = [];
        let curCorrect = [];
        this.curQue.option.forEach((item) => {
          if (this.dataType.indexOf("sentence_input_chs") != -1) {
            answerList = [];
            item.answer.forEach((it) => {
              answerList.push({
                chs: "",
                pinyin: "",
              });
            });
          }
          let userAnswerJudge = "";
          if (this.dataType.indexOf("sentence_judge_chs") != -1) {
            // 判断题
            userAnswerJudge = "[JUDGE##F##JUDGE]";
          } else if (this.dataType.indexOf("sentence_input_chs") != -1) {
            userAnswerJudge = item.answer.length > 0 ? "[JUDGE##F##JUDGE]" : "";
          }
          curCorrect.push({
            answer: "",
            recordList: [],
            answerList: answerList,
            userAnswerJudge,
          });
        });
        this.$set(this.curQue, "Bookanswer", curCorrect);
      }
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      curQue.option.forEach((dItem, dIndex) => {
        let paraArr = [];
        let inputNumber = 0;
        dItem.detail.wordsList.forEach((sItem, sIndex) => {
          this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
          let obj = {
            pinyin: sItem.pinyin,
            chs: sItem.chs,
            isShow: sItem.isShow,
            inputNumber: sItem.chs.indexOf("__") > -1 ? inputNumber : "",
          };
          paraArr.push(obj);
          if (sItem.chs.indexOf("__") > -1) {
            inputNumber++;
          }
        });
        this.$set(_this.curQue.option[dIndex].detail, "resArr", paraArr);
      });
      console.log(_this.curQue.option);

      // 把错误的答案挑出来
      if (this.judgeAnswer == "standardAnswer") {
        this.userErrList = [];
        this.curQue.Bookanswer.forEach((item, i) => {
          if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
            let obj = JSON.parse(JSON.stringify(this.curQue.option[i]));
            this.userErrList.push(obj);
          }
        });
      }
    },
    //词和标点合一起
    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) {
      if (!this.TaskModel || this.TaskModel != "ANSWER") {
        this.curQue.Bookanswer[index].answer = obj;
      }
      this.changeuserAnswerJudge(index);
    },
    handleWav(list, tmIndex) {
      tmIndex = tmIndex ? tmIndex : 0;
      this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
    },
    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, indexs) {
      if (type == "pinyin") {
        this.curQue.Bookanswer[index].answerList[indexs].pinyin +=
          e.target.innerHTML;
      } else {
        this.curQue.Bookanswer[index].answerList[indexs].chs +=
          e.target.innerHTML;
      }
    },
    handleFalse() {
      return false;
    },
  },
  //生命周期 - 创建完成（可以访问当前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类
.error {
  .active-right-btn {
    background: #fff url("../../../assets/newImage/common/error-right-btn.png")
      center no-repeat !important;
    background-size: 24px !important;
  }
  .active {
    background-color: #ffe5e5 !important;
    border-color: #de4444 !important;
  }
  input {
    color: #ed342d !important;
  }
}

.correct {
  .active-error-btn {
    background: #fff
      url("../../../assets/newImage/common/correct-error-btn.png") center
      no-repeat !important;
    background-size: 24px !important;
  }
  .active {
    background-color: #e5fff0 !important;
    border-color: #00c850 !important;
  }
  input {
    color: #2ca767 !important;
  }
}
.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: rgba(0, 0, 0, 1);
        //    margin-top: 4px;
        font-family: "FZJCGFKTK";
        border-radius: 50%;
      }
      > p {
        width: 16px;
        height: 16px;
        cursor: pointer;
        background: url("../../../assets/NPC/play-red.png") left center
          no-repeat;
        background-size: 16px;
        margin: 0px 8px 0 0;
        &.active {
          background: url("../../../assets/NPC/icon-voice-play-red.png") left
            center no-repeat;
          background-size: 16px;
        }
      }
      .item-content {
        flex: 1;
        .chs_pinyin {
          display: flex;
          flex-flow: wrap;
          align-items: flex-end;
          .input {
            // margin-left: 16px;
            margin-right: 8px;
            min-width: 50px;
            border-bottom: 1px solid black;
            min-height: 28px;
            height: auto;
          }
          .pinyin {
            font-family: "GB-PINYINOK-B";
            font-size: 14px;
            line-height: 130%;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 8px;
            &-opacity {
              opacity: 0;
            }
          }
          .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;
        &.notAllow {
          a,
          a.error-btn {
            cursor: not-allowed;
          }
        }
        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 {
    ul {
      li {
        > p {
          background: url("../../../assets/NPC/play-green.png") center no-repeat;
          background-size: cover;
          &.active {
            background-image: url("../../../assets/NPC/icon-voice-play-green.png");
            background-size: cover;
          }
        }
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .Big-Book-prev-Textdes {
    ul {
      li {
        > p {
          background: url("../../../assets/NPC/play-brown.png") center no-repeat;
          background-size: cover;
          &.active {
            background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
            background-size: cover;
          }
        }
      }
    }
  }
}
</style>