GCLS_Page_Book_Component_NPC/src/components/Adult/preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

<!--  -->
<template>
  <div class="dialogue-answer-view NPC-zhedie" v-if="isShowTemp">
    <!-- 标题 -->
    <template v-if="curQue.title">
      <div class="topTitle">
        <div class="NPC-top-left">
          <span class="NPC-topTitle-text">{{ curQue.title }}</span>
        </div>
        <div class="NPC-top-right" @click="handleChangeTab">
          <span class="NPC-top-right-text">{{
            wordShow ? "收起" : "展开"
          }}</span>
          <img v-if="wordShow" src="../../../../assets/NPC/down.png" alt="" />
          <img
            v-else
            class="rotate"
            src="../../../../assets/NPC/down.png"
            alt=""
          />
        </div>
      </div>

      <el-collapse-transition>
        <div :class="['dialogue-answer-content']" v-show="wordShow">
          <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
          <div
            :class="[
              'dialogue-answer-inner',
              curQue.option &&
              curQue.option.length > 0 &&
              curQue.option[index] &&
              curQue.option[index].detail &&
              curQue.option[index].detail.length > 0
                ? 'hasoption'
                : '',
              index == curQue.list.length - 1 ? 'haspadding' : '',
            ]"
            v-for="(item, index) in curQue.list"
            :key="'list' + index"
          >
            <span class="number" v-if="item.number">{{ item.number }}</span>
            <div
              class="dialogue-img"
              v-if="item.img_list && item.img_list.length > 0"
            >
              <el-image
                style="width: 196px; height: 164px"
                :src="item.img_list[0].id"
                fit="scale-down"
              ></el-image>
            </div>
            <div class="dialogue-answer-model">
              <AnswerModel
                :curQue="item"
                :Bookanswer="curQue.Bookanswer[index]"
                :pyPosition="curQue.pyPosition"
                :enPosition="curQue.enPosition"
                :colorBox="colorBox"
                :TaskModel="TaskModel"
                :listIndex="index"
                :judgeAnswer="judgeAnswer"
                :audioWidth="item.number?592:620"
              />
            </div>
            <template
              v-if="
                curQue.option &&
                curQue.option.length > 0 &&
                curQue.option[index] &&
                curQue.option[index].detail &&
                curQue.option[index].detail.length > 0
              "
            >
              <OptionModel :curOption="curQue.option[index]" :index="index" />
            </template>
          </div>
        </div>
      </el-collapse-transition>
    </template>
    <template v-else>
      <div class="dialogue-answer-content">
        <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
        <div
          class="dialogue-answer-inner"
          v-for="(item, index) in curQue.list"
          :key="'list' + index"
        >
          <template v-if="isShowQue(index)">
            <span class="number" v-if="item.number">{{ item.number }}</span>
            <div
              class="dialogue-img"
              v-if="item.img_list && item.img_list.length > 0"
            >
              <el-image
                style="width: 196px; height: 164px"
                :src="item.img_list[0].id"
                fit="scale-down"
              ></el-image>
            </div>
            <div class="dialogue-answer-model">
              <AnswerModel
                :curQue="item"
                :Bookanswer="curQue.Bookanswer[index]"
                :pyPosition="curQue.pyPosition"
                :enPosition="curQue.enPosition"
                :colorBox="colorBox"
                :listIndex="index"
                :TaskModel="TaskModel"
                :judgeAnswer="judgeAnswer"
                :audioWidth="item.number?592:620"
              />
            </div>
            <template
              v-if="
                curQue.option &&
                curQue.option.length > 0 &&
                curQue.option[index] &&
                curQue.option[index].detail &&
                curQue.option[index].detail.length > 0
              "
            >
              <OptionModel :curOption="curQue.option[index]" :index="index" />
            </template>
            <template
              v-if="
                curQue.wordcard &&
                curQue.wordcard.length > 0 &&
                curQue.wordcard[index]
              "
            >
              <WordcardModel
                :curWordcard="curQue.wordcard[index]"
                :index="index"
                :pyPosition="curQue.pyPosition"
              />
            </template>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import AudioLine from "../AudioLine.vue";
import RoleChs from "./RoleChs.vue";
import RemarkChs from "./RemarkChs.vue";
import Soundrecord from "../Soundrecord.vue";
import AnswerModel from "./AnswerModel.vue";
import OptionModel from "./OptionModel.vue";
import WordcardModel from "./WordcardModel.vue";

export default {
  name: "DialogueAnswerViewChs",
  components: {
    AudioLine,
    RoleChs,
    RemarkChs,
    Soundrecord,
    AnswerModel,
    OptionModel,
    WordcardModel,
  },
  props: ["curQue", "colorBox", "TaskModel", "judgeAnswer"],
  data() {
    return {
      wordShow: true,
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
      userAnswer: {
        recordList: [],
        input: [],
        judge: [],
      },
      judgeAnswersList: [],
      userErrorNumberTotal: 0,
    };
  },
  computed: {
    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;
    },
    isShowQue() {
      return function (index) {
        let _this = this;
        let bool = false;
        let userErrorNumberTotal = 0;
        let Bookanswer = _this.curQue.Bookanswer;
        if (Bookanswer && Bookanswer.length > 0) {
          userErrorNumberTotal = _this.countUserErrorNumber(Bookanswer[index]);
          if (_this.judgeAnswer == "standardAnswer") {
            if (userErrorNumberTotal > 0) {
              bool = true;
            } else {
              bool = false;
            }
          } else {
            bool = true;
          }
        }
        return bool;
      };
    },
  },
  watch: {},
  //方法集合
  methods: {
    handleChangeTab() {
      this.wordShow = !this.wordShow;
    },
    handleData() {
      let list = JSON.parse(JSON.stringify(this.curQue.list));
      list.forEach((item) => {
        let answerArr = [];
        if (item.answer) {
          answerArr = item.answer.split("\n");
        }
        item.answerArr = answerArr;
      });
      this.$set(this.curQue, "list", list);
    },
    initAnswer() {
      let reg = /_{2,}/g;
      let BookAnswer = [];
      let list = JSON.parse(JSON.stringify(this.curQue.list));
      list.forEach((item, index) => {
        let answerArr = [];
        if (item.answer) {
          answerArr = item.answer.split("\n");
        }
        let arr = item.article.match(reg);
        let paraLeg = item.detail.length;
        let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
        if (arr) {
          arr.forEach((aItem, aIndex) => {
            let re = {
              value: "",
              userAnswerJudge:
                answerArr.length > 0 &&
                answerArr[aIndex] &&
                answerArr[aIndex] != "??" &&
                answerArr[aIndex] != "？？"
                  ? "[JUDGE##F##JUDGE]"
                  : "",
            };
            userAnswer.input.push(JSON.parse(JSON.stringify(re)));
          });
          for (let i = 0; i < paraLeg; i++) {
            userAnswer.recordList.push(null);
          }
        } else if (item.checkList && item.checkList.indexOf("record") > -1) {
          for (let i = 0; i < paraLeg; i++) {
            userAnswer.recordList.push(null);
          }
        }

        if (item.checkList && item.checkList.indexOf("judge") > -1) {
          for (let i = 0; i < paraLeg; i++) {
            let judge_obj = {
              value: "",
              userAnswerJudge:
                item.judge[i].isJudge && item.judge[i].judge
                  ? "[JUDGE##F##JUDGE]"
                  : "",
            };
            userAnswer.judge.push(JSON.parse(JSON.stringify(judge_obj)));
          }
        }
        BookAnswer.push(userAnswer);
      });
      this.$set(this.curQue, "Bookanswer", BookAnswer);
    },
    countUserErrorNumber(data) {
      let BookanswerStr = JSON.stringify(data);
      let userErrorNumberTotal = 0;
      let errReg = /\[JUDGE##F##JUDGE\]/g;
      if (errReg.test(BookanswerStr)) {
        let errorArr = BookanswerStr.match(/\[JUDGE##F##JUDGE\]/g);
        userErrorNumberTotal = errorArr.length;
      }
      return userErrorNumberTotal;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.userErrorNumberTotal = 0;
    if (_this.curQue) {
      _this.handleData();
      if (!_this.curQue.Bookanswer) {
        _this.initAnswer();
      } else {
        _this.userErrorNumberTotal = _this.countUserErrorNumber(
          _this.curQue.Bookanswer
        );
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dialogue-answer-view {
  width: 100%;
  margin-bottom: 24px;
  .guide {
    width: 100%;
    font-size: 16px;
    line-height: 19px;
    font-family: "robot";
    padding-top: 24px;
  }
  .dialogue-answer-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 24px 0 24px;
    &.nooption {
      padding-bottom: 40px;
    }
  }
  .dialogue-answer-inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 16px 0 0px 0;
    &.hasoption {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding-bottom: 24px;
    }
    &.haspadding {
      padding-bottom: 40px;
    }
    &:nth-last-child(1) {
      border: 0;
    }
    .number {
      width: 32px;
      height: 32px;
      background: #e35454;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 16px;
      line-height: 150%;
      color: #ffffff;
      font-family: "robot";
      margin-top: 4px;
      flex-shrink: 0;
    }
  }
  .dialogue-answer-model {
    flex: 1;
  }
  .dialogue-answer-article {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .dialogue-img {
    width: 228px;
    height: 196px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 16px;
    overflow: hidden;
    margin-left: 24px;
    margin-top: 8px;
    > img {
      width: 100%;
    }
  }
}
.NPC-Big-Book-preview-green {
  .dialogue-answer-view {
    .number {
      background: #24b99e !important;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .number {
    background: #bd8865 !important;
  }
}
</style>
<style lang="scss">
</style>