GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/SelectYinjie.vue

<!--  -->
<template>
  <div
    class="Big-Book-prev-Textdes SelectYinjie SelectYinjie-phone"
    v-if="isShowTemp"
  >
    <div class="SelectYinjie-inner">
      <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="SelectYinjieAudio"
          :mp3="curQue.mp3_list[0].id"
          :getCurTime="getCurTime"
          :themeColor="themeColor"
          :ed="ed"
          type="audioLine"
          ref="audioLine"
          @handleListenRead="handleListenRead"
          :baseSizePhone="baseSizePhone"
        />
      </div>
      <div v-for="(item, index) in curQue.option" :key="index">
        <div class="item-box" 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>
          <b
            v-if="item.number"
            :style="{
              fontSize: baseSizePhone - 2 + 'px',
              width: 18 + (baseSizePhone - 14) * 2 + 'px',
              height: 18 + (baseSizePhone - 14) * 2 + 'px'
            }"
            >{{ item.number }}</b
          >
          <div class="zijie-box">
            <p
              :class="[
                !judgeAnswer ? 'exercise-model' : '',
                lookanswerClass(index, indexs)
              ]"
              v-for="(items, indexs) in item.option"
              :key="indexs"
              @click="handleClick(index, indexs)"
              :style="{ fontSize: baseSizePhone + 'px' }"
            >
              {{ items.pinyin }}
            </p>
          </div>
          <a
            v-if="!judgeAnswer"
            :class="[
              'clear-btn',
              curQue.Bookanswer[index].length > 0 && TaskModel != 'ANSWER'
                ? 'active'
                : '',
              TaskModel == 'ANSWER' ? 'notAllow' : ''
            ]"
            @click="handleClear(index)"
          ></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AudioLine from "../phonePreview/AudioLine.vue";

export default {
  components: { AudioLine },
  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer", "baseSizePhone"],
  data() {
    return {
      userList: [],
      curTime: 0,
      stopAudio: false,
      ed: null
    };
  },
  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 = "userNoAnswer";
          }
        }

        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;
      let option = JSON.parse(JSON.stringify(_this.curQue.option));
      option.forEach((item, index) => {
        item.answer = null;
        for (let i = 0; i < item.option.length; i++) {
          let oItem = item.option[i];
          if (oItem.isAnswer) {
            item.answer = i + 1;
            break;
          }
        }
      });
      _this.$set(_this.curQue, "option", JSON.parse(JSON.stringify(option)));
      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.judgeAnswer
      ) {
        _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();
    },
    handleClear(index) {
      let _this = this;
      _this.$set(_this.curQue.Bookanswer[index], "value", "");
      let userAnswerJudge = _this.curQue.option[index].answer
        ? "[JUDGE##F##JUDGE]"
        : "";
      _this.$set(
        _this.curQue.Bookanswer[index],
        "userAnswerJudge",
        userAnswerJudge
      );
      _this.$forceUpdate();
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    //点击播放某个句子
    handleChangeTime(time, edTime) {
      let _this = this;
      _this.curTime = time;
      _this.stopAudio = true;
      _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      _this.ed = edTime;
    },
    handleListenRead(playFlag) {
      this.stopAudio = playFlag;
    },
    emptyEd() {
      this.ed = null;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.SelectYinjie {
  width: 100%;
  &-inner {
    width: 100%;
    // background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 10px;
  }
  .aduioLine-box {
    margin-bottom: 8px;
  }
  .item-box {
    display: flex;
    align-items: center;
    // background: #ffffff;
    padding: 4px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
    .audio-play {
      width: 16px;
      margin-right: 8px;
    }
    b {
      background: #de4444;
      text-align: center;
      min-width: 14px;
      // min-height: 16px;
      max-width: 28px;
      max-height: 28px;
      color: #ffffff;
      border-radius: 50%;
      font-size: 12px;
      font-family: "robot";
      line-height: 1.3;
      padding: 2px;
      display: block;
    }
    .play-btn {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      background: url("../../../assets/NPC/play-red.png") center no-repeat;
      background-size: cover;
      &.active {
        background-image: url("../../../assets/NPC/icon-voice-play-red.png");
        background-size: cover;
      }
    }
    .zijie-box {
      flex: 1;
      display: flex;
      padding: 0 4px;
      flex-flow: wrap;
      p {
        margin: 4px;
        font-size: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85);
        min-width: 56px;
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        cursor: pointer;
        font-family: "GB-PINYINOK-B";
        overflow: hidden;
        &.exercise-model:hover {
          background: rgba(0, 0, 0, 0.05)
            url("../../../assets/NPC/selectYinjie-hover.png") right bottom
            no-repeat;
          background-size: 11px;
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
        &.active {
          background: rgba(0, 188, 75, 0.05)
            url("../../../assets/NPC/selectYinjie-active.png") right bottom
            no-repeat !important;
          background-size: 11px !important;
          border: 1px solid #00bc4b !important;
        }

        &.userRight {
          background: rgba(44, 167, 103, 0.1);
          border-color: #2ca767;
        }
        &.userError {
          background: rgba(237, 52, 45, 0.1);
          border-color: #ed342d;
        }
        &.userNoAnswer {
          background: #fff;
          border-color: #000;
        }
      }
    }
    .clear-btn {
      width: 16px;
      height: 16px;
      background: url("../../../assets/icon/Undofill-16-disable-Black.png")
        center no-repeat;
      background-size: 100%;
      &.active {
        background: url("../../../assets/icon/Undofill-16-normal-Black.png")
          center no-repeat;
        background-size: 100%;
      }
      &.notAllow {
        cursor: not-allowed;
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .SelectYinjie {
    .item-box {
      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 {
  .SelectYinjie {
    .item-box {
      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;
        }
      }
    }
  }
}
.SelectYinjie-phone {
  .SelectYinjie-inner {
    padding: 10px;
  }
}
</style>