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

<!--  -->
<template>
  <div
    class="dialogue-answer-view NPC-zhedie dialogue-answer-view-phone"
    v-if="isShowTemp"
    :style="{ background: themeColorPhone }"
  >
    <!-- 标题 -->
    <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"
            :style="{ fontSize: baseSizePhone - 2 + 'px' }"
          >
            {{ 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"
              :style="{ fontSize: baseSizePhone + 'px' }"
              >{{ item.number }}</span
            >
            <div class="dialogue-item">
              <div
                class="dialogue-img"
                v-if="item.img_list && item.img_list.length > 0"
              >
                <el-image
                  :style="{
                    width: '100px',
                    height: '100px'
                  }"
                  :src="item.img_list[0].id"
                  fit="scale-down"
                  @click="imgShow(item.img_list[0].id)"
                ></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"
                  :baseSizePhone="baseSizePhone"
                />
              </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"
                  :baseSizePhone="baseSizePhone"
                />
              </template>
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </template>
    <template v-else>
      <div class="dialogue-answer-content">
        <div
          class="guide"
          :style="{ fontSize: baseSizePhone - 2 + 'px' }"
          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"
              :style="{ fontSize: baseSizePhone + 'px' }"
              >{{ item.number }}</span
            >
            <div class="dialogue-item">
              <div
                class="dialogue-img"
                v-if="item.img_list && item.img_list.length > 0"
              >
                <el-image
                  :style="{
                    width: '100px',
                    height: '100px'
                  }"
                  :src="item.img_list[0].id"
                  fit="scale-down"
                  @click="imgShow(item.img_list[0].id)"
                ></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"
                  :baseSizePhone="baseSizePhone"
                />
              </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"
                  :baseSizePhone="baseSizePhone"
                />
              </template>
              <template
                v-if="
                  curQue.wordcard &&
                    curQue.wordcard.length > 0 &&
                    curQue.wordcard[index]
                "
              >
                <WordcardModel
                  :curWordcard="curQue.wordcard[index]"
                  :index="index"
                  :pyPosition="curQue.pyPosition"
                />
              </template>
            </div>
          </template>
        </div>
      </div>
    </template>
    <img-preview
      v-if="imgPreviewDialog"
      :imgPreviewSrc="imgPreviewSrc"
      @closeImgPreview="closeImgPreview"
    ></img-preview>
  </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";
import ImgPreview from "../components/ImgPreview.vue";

export default {
  name: "DialogueAnswerViewChs",
  components: {
    AudioLine,
    RoleChs,
    RemarkChs,
    Soundrecord,
    AnswerModel,
    OptionModel,
    WordcardModel,
    ImgPreview
  },
  props: [
    "curQue",
    "colorBox",
    "TaskModel",
    "judgeAnswer",
    "baseSizePhone",
    "themeColorPhone"
  ],
  data() {
    return {
      wordShow: true,
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
      userAnswer: {
        recordList: [],
        input: [],
        judge: []
      },
      judgeAnswersList: [],
      userErrorNumberTotal: 0,
      imgPreviewDialog: false,
      imgPreviewSrc: ""
    };
  },
  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;
    },
    imgShow(id) {
      this.imgPreviewDialog = true;
      this.imgPreviewSrc = id;
    },
    closeImgPreview() {
      this.imgPreviewDialog = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前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: 5px 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%;
    }
  }
  &-phone {
    .dialogue-answer-content {
      padding: 0;
    }
    .dialogue-answer-inner {
      display: block;
      .dialogue-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .dialogue-img {
          margin-left: 0;
          margin-right: 5px;
          width: 122px;
          height: 122px;
          padding: 10px;
          flex-shrink: 0;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 8px;
        }
      }
    }
  }
}
.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">
.dialogue-answer-view-phone {
  .article-content {
    padding: 8px 0 !important;
  }
}
</style>