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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes SelectTone" v-if="isShowTemp">
    <AnswerTitle :judgeAnswer="judgeAnswer" />
    <div
      class="aduioLine-box"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
      "
      :style="{ height: judgeAnswer == 'standardAnswer' ? '0px' : 'auto' }"
    >
      <AudioLine
        audioId="sentenceListenAudio"
        :mp3="curQue.mp3_list[0].id"
        :getCurTime="getCurTime"
        :themeColor="themeColor"
        :ed="ed"
        type="audioLine"
        ref="audioLine"
        @handleListenRead="handleListenRead"
      />
    </div>
    <ul>
      <li v-for="(item, index) in curQue.option" :key="index">
        <div class="op-li" v-if="isShowOption(item, index)">
          <a
            v-if="curQue.wordTime && curQue.wordTime.length > 0"
            :class="[
              'play-btn',
              curTime >= curQue.wordTime[index].bg &&
              curTime < curQue.wordTime[index].ed &&
              stopAudio
                ? 'active'
                : '',
            ]"
            @click="
              handleChangeTime(
                curQue.wordTime[index].bg,
                curQue.wordTime[index].ed
              )
            "
          ></a>
          <div v-html="item.con" class="con"></div>
          <a
            v-for="(itmes, indexs) in toneList"
            :key="indexs"
            :class="['tone-item', lookanswerClass(index, indexs)]"
            @click="handleClick(index, indexs)"
          >
            <img :src="itmes" />
          </a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Audio from "../preview/components/AudioRed.vue"; // 音频播放
import AudioLine from "../preview/AudioLine.vue";
import AnswerTitle from "../preview/components/AnswerTitle.vue";

export default {
  components: { Audio, AudioLine, AnswerTitle },
  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
  data() {
    return {
      toneList: [
        require("../../../assets/NPC/tone1.png"),
        require("../../../assets/NPC/tone2.png"),
        require("../../../assets/NPC/tone3.png"),
        require("../../../assets/NPC/tone4.png"),
        require("../../../assets/NPC/tone0.png"),
      ],
      userSelect: [],
      curTime: "",
      stopAudio: false,
      timer: null,
      ed: null,
      userErrorNumberTotal: 0,
    };
  },
  computed: {
    lookanswerClass() {
      return function (index, indexs) {
        let _this = this;
        let className = "";
        let userAnswer = this.curQue.Bookanswer[index].value.toString();
        if (this.curQue.option[index].answer) {
          let answer = (this.curQue.option[index].answer - 1).toString();
          if (_this.judgeAnswer == "standardAnswer") {
            if (indexs.toString() === answer) {
              className = "userRight";
            } else {
              className = "";
            }
          } else if (
            _this.judgeAnswer == "userAnswer" ||
            _this.judgeAnswer == "studentAnswer"
          ) {
            if (indexs.toString() === userAnswer) {
              if (answer === userAnswer) {
                className = "userRight";
              } else {
                className = "userError";
              }
            } else {
              className = "";
            }
          }
        }

        if (!_this.judgeAnswer && userAnswer == indexs.toString()) {
          className = "active";
        }

        return className;
      };
    },
    isShowTemp() {
      let _this = this;
      let bool = false;
      if (_this.curQue && _this.curQue.Bookanswer) {
        if (_this.judgeAnswer == "standardAnswer") {
          if (_this.userErrorNumberTotal > 0) {
            bool = true;
          } else {
            bool = false;
          }
        } else {
          bool = true;
        }
      }

      return bool;
    },
    isShowOption() {
      return function (item, index) {
        let _this = this;
        let bool = true;
        if (_this.judgeAnswer == "standardAnswer") {
          if (!item.answer) {
            bool = false;
          } else if (
            _this.curQue.Bookanswer[index].userAnswerJudge ==
            "[JUDGE##T##JUDGE]"
          ) {
            bool = false;
          }
        }
        return bool;
      };
    },
  },
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData() {
      let _this = this;
      if (!_this.curQue.Bookanswer) {
        let userSelect = [];
        _this.curQue.option.forEach((item) => {
          let obj = {
            value: "",
            userAnswerJudge: item.answer ? "[JUDGE##F##JUDGE]" : "",
          };
          userSelect.push(JSON.parse(JSON.stringify(obj)));
        });
        _this.$set(this.curQue, "Bookanswer", userSelect);
      } else {
        let BookanswerStr = JSON.stringify(_this.curQue.Bookanswer);
        let errReg = /\[JUDGE##F##JUDGE\]/g;
        if (errReg.test(BookanswerStr)) {
          let errorArr = BookanswerStr.match(/\[JUDGE##F##JUDGE\]/g);
          _this.userErrorNumberTotal = errorArr.length;
        }
      }
    },
    handleClick(index, indexs) {
      let _this = this;
      if (!_this.TaskModel || _this.TaskModel != "ANSWER") {
        _this.$set(_this.curQue.Bookanswer[index], "value", indexs);
        if (_this.curQue.option[index].answer) {
          let answer = _this.curQue.option[index].answer - 1;
          if (indexs.toString() === answer.toString()) {
            _this.$set(
              _this.curQue.Bookanswer[index],
              "userAnswerJudge",
              "[JUDGE##T##JUDGE]"
            );
          } else {
            _this.$set(
              _this.curQue.Bookanswer[index],
              "userAnswerJudge",
              "[JUDGE##F##JUDGE]"
            );
          }
        }
      }
      _this.$forceUpdate();
    },
    handleChangeTime(time, edTime) {
      let _this = this;
      //   if(!_this.stopAudio){
      //       _this.timer = setInterval(() => {
      //         if(_this.curTime >= edTime){
      //             _this.stopAudio = false
      //             _this.$refs.audioLine.onTimeupdateTime(_this.curTime / 1000, false);
      //             clearInterval(_this.timer);
      //         }
      //     }, 200);
      //   }
      _this.curTime = time;
      _this.stopAudio = true;
      _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      _this.ed = edTime;
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    handleListenRead(playFlag) {
      this.stopAudio = playFlag;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    emptyEd() {
      this.ed = null;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.handleData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }, //生命周期 - 销毁之前
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes {
  width: 100%;
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 12px;

    div.op-li {
      width: 363px;
      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 8px 16px;
      margin: 8px 0;
      .play-btn {
        width: 16px;
        height: 16px;
        background: url("../../../assets/NPC/play-red.png") center no-repeat;
        background-size: cover;
        margin-right: 8px;

        &.active {
          background-image: url("../../../assets/NPC/icon-voice-play-red.png");
          background-size: cover;
        }
      }
      .audio-play {
        width: 16px;
        margin-right: 12px;
      }
      > div.con {
        font-size: 16px;
        line-height: 1.5;
        flex: 1;
        margin: 0;
      }
      a {
        margin-left: 8px;
        font-size: 0;
        border: 1px #fff solid;
        border-radius: 4px;
        &.active {
          background: #98d1eb;
          border-color: #98d1eb;
        }
        &.userRight {
          background: rgba(44, 167, 103, 0.1);
          border-color: #2ca767;
        }
        &.userError {
          background: rgba(237, 52, 45, 0.1);
          border-color: #ed342d;
        }
        img {
          width: 24px;
        }
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .Big-Book-prev-Textdes {
    li {
      b {
        background: #24b99e;
      }
      .play-btn {
        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 {
    li {
      b {
        background: #bd8865;
      }
      .play-btn {
        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>
<style lang="scss">
.SelectTone.Big-Book-prev-Textdes {
  ul {
    li {
      div.con {
        margin: 0;
        > p {
          margin: 0;
        }
      }
    }
  }
}
</style>