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

<!--  -->
<template>
  <div
    class="Big-Book-prev-Textdes SelectTone"
    v-if="isShowTemp"
    :class="[isPhone ? 'SelectTone-phone' : '']"
  >
    <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>
      <template v-for="(item, index) in curQue.option">
        <li :key="index" v-if="isShowOption(item, index)">
          <div class="op-li">
            <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),
                TaskModel == 'ANSWER' ? 'tone-item-default' : ''
              ]"
              @click="handleClick(index, indexs)"
            >
              <img :src="itmes" />
            </a>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

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

export default {
  components: { Audio, AudioLine },
  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer", "isPhone"],
  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 = "";
            }
          }
        } else {
          if (_this.judgeAnswer && userAnswer == indexs.toString()) {
            className = "active";
          }
        }

        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%;
  box-sizing: border-box;

  overflow: hidden;
  ul {
    width: 100%;
    box-sizing: border-box;
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    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;
        border: none;
        &.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;
        .pinyin {
          font-family: "Sans-GBNPC";
        }
      }
      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;
        }
        &.tone-item-default {
          cursor: default;
        }
      }
    }
  }
}
.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;
        }
      }
      div.op-li {
        .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;
        }
      }
    }
    div.op-li {
      .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;
        }
      }
    }
  }
}
.SelectTone-phone {
  ul {
    padding: 10px;
    box-sizing: border-box;
    li {
      flex: 1;
    }
    .op-li {
      width: 100% !important;
      margin: 5px 0 !important;
    }
  }
}
</style>
<style lang="scss">
.SelectTone.Big-Book-prev-Textdes {
  ul {
    li {
      div.con {
        margin: 0;

        p {
          margin: 0;
          font-family: "Sans-GBNPC" !important;
          font-size: 16px !important;
          background: transparent !important;
          .pinyin {
            font-family: "Sans-GBNPC" !important;
          }
          .chs {
            font-family: "FZJCGFKTK" !important;
          }
          .en {
            font-family: "robot" !important;
          }
        }
        span {
          font-family: "Sans-GBNPC" !important;
          font-size: 16px !important;
          background: transparent !important;
        }
      }
    }
  }
}
</style>