GCLS_Page_Exercise/src/views/exercise_questions/preview/WordDictationPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div v-if="show_preview" class="chinese-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div
      v-if="isEnable(data.property.is_enable_description)"
      class="description rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>

    <!-- 笔画学习 -->
    <div :class="['words-box', 'words-box-dictation']">
      <div v-for="(item, index) in option_list" :key="index" :class="['words-item']">
        <div class="card-box">
          <div class="words-info">
            <span>{{ computeOptionMethods[data.option_number_show_mode](index) }} </span>
            <span class="pinyin">{{ item.pinyin }}</span>
            <AudioPlay :file-id="item.audio_file_id" theme-color="white" />
          </div>
          <div class="words-dic-box">
            <div v-for="(itemc, indexc) in item.imgArr" :key="indexc" class="words-dic-item">
              <span class="pinyin">{{ item.pinyin_arr[indexc].pinyin_item }}</span>
              <div
                :class="['strockplay-newWord']"
                @click="freeWrite(itemc ? JSON.parse(itemc) : itemc, index, indexc, item.mark)"
              >
                <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                <img
                  v-if="!play_status && itemc && JSON.parse(itemc).strokes_image"
                  class="hanzi-writer-img"
                  :src="JSON.parse(itemc).strokes_image"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="if_free_show" class="practiceBox practice-box-strock">
      <FreewriteLettle
        ref="freePaint"
        :current-tree-i-d="'1234456'"
        :current-hz="current_hz"
        :curren-hz-data="current_hz_data"
        :row-index="active_index"
        :col-index="active_col_index"
        :disabled="disabled"
        @closeIfFreeShow="closeIfFreeShow"
        @changePraShow="changePraShow"
        @changeCurQue="changeCurQue"
        @deleteWriteRecord="deleteWriteRecord"
      />
    </div>
  </div>
</template>

<script>
import { computeOptionMethods } from '@/views/exercise_questions/data/common';
import PreviewMixin from './components/PreviewMixin';
import FreewriteLettle from './components/common/FreewriteLettle.vue';

export default {
  name: 'WordDictationPreview',
  components: {
    FreewriteLettle,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
      hanzi_color: '#404040', // 描红汉字底色
      if_free_show: false,
      free_img: [],
      active_index: null,
      active_col_index: null,
      current_hz: '', // 当前汉字
      current_hz_data: null, // 当前汉字数据
      play_status: false, // 播放状态
      hz_data: [
        '你',
        '最',
        '近',
        '怎',
        '么',
        '样',
        '我',
        '很',
        '好',
        '再',
        '见',
        '吃',
        '饭',
        '天',
        '启',
        '扫',
        '描',
        '以',
        '平',
        '太',
        '效',
        '国',
        '是',
        '称',
        '需',
        '值',
        '复',
        '包',
        '头',
        '条',
        '够',
        '关',
        '放',
        '发',
        '补',
        '快',
        '素',
      ],
      active_mark: '',
      option_list: [],
      show_preview: false,
      miao_arr: [],
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val || this.data.type !== 'word_dictation') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
    isJudgingRightWrong: {
      handler(val) {
        if (!val) return;
        this.handleData();
      },
      immediate: true,
    },
  },
  created() {
    // this.handleData();
  },
  mounted() {},
  methods: {
    // 初始化数据
    handleData() {
      if (!this.isJudgingRightWrong) {
        this.answer.answer_list = [];
      }
      this.show_preview = false;
      let option_list = JSON.parse(JSON.stringify(this.data)).option_list;

      this.miao_arr = [];
      option_list.forEach((item, index) => {
        let arr = [];
        this.miao_arr.push([]);
        item.pinyin_arr = [];
        let pinyin_arr = item.pinyin.trim().split(' ');
        pinyin_arr.forEach((itemp) => {
          let obj = {
            pinyin_item: itemp,
          };
          arr.push(null);
          item.pinyin_arr.push(obj);
        });
        if (this.isJudgingRightWrong) {
          item.imgArr = this.answer.answer_list[index].strokes_content_list;
        } else {
          item.imgArr = arr;
        }

        let obj = {
          mark: item.mark,
          strokes_content_list: arr,
        };
        if (!this.isJudgingRightWrong) {
          this.answer.answer_list.push(obj);
        }
      });
      this.option_list = option_list;
      this.show_preview = true;
    },
    changePraShow() {
      this.if_free_show = false;
    },
    closeIfFreeShow(data, rowIndex, colIndex, mark) {
      this.option_list[rowIndex].imgArr[colIndex] = JSON.stringify(data);
      this.if_free_show = false;
      this.freeWrite(data, rowIndex, colIndex, mark);
      this.$forceUpdate();
    },
    freeWrite(imgUrl, index, indexs, mark) {
      this.if_free_show = true;
      this.active_index = index;
      this.active_col_index = indexs;
      this.active_mark = mark;
      this.current_hz = this.hz_data[index];

      this.current_hz_data = imgUrl;
    },
    // 删除记录
    deleteWriteRecord(rowIndex, colIndex) {
      this.$set(this.option_list[rowIndex].imgArr, colIndex, JSON.stringify({}));
      this.changeCurQue(null, colIndex, this.active_mark);
      this.current_hz_data = null;
      this.active_mark = '';
      this.$forceUpdate();
    },
    changeCurQue(answer, colIndex, mark) {
      if (answer) {
        let write_model = [];
        this.answer.answer_list.forEach((itema) => {
          if (itema.mark === mark) {
            write_model = itema.strokes_content_list;
          }
        });
        write_model[colIndex] = JSON.stringify(answer);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.chinese-preview {
  @include preview;

  .words-box {
    .words-item {
      // display: flex;
      // flex-wrap: wrap;
      min-width: 64px;
      margin-bottom: 24px;
    }

    .words-top {
      display: flex;
      width: 100%;
      min-height: 30px;
      border: 1px solid #e81b1b;

      .words-left {
        box-sizing: border-box;
        display: flex;
        column-gap: 4px;
        align-items: center;
        justify-content: center;
        width: 64px;
        margin-right: 12px;
        border-right: 1px solid #e81b1b;
      }

      .words-right {
        padding: 8px 4px;
        margin: 0;
        font-size: 14px;
        line-height: 14px;
        color: #000;
      }
    }

    .audio-wrapper {
      height: 16px;

      :deep .audio-play {
        width: 16px;
        height: 16px;
        color: #000;
        background-color: initial;
      }

      :deep .audio-play.not-url {
        color: #a1a1a1;
      }

      :deep .voice-play {
        width: 16px;
        height: 16px;
      }
    }

    .words-info {
      display: flex;
      column-gap: 4px;
      align-items: center;
      justify-content: center;
      width: max-content;
      padding: 5px 16px;
      margin: 0 auto 8px;
      font-size: 14px;
      line-height: 22px;
      color: #fff;
      background: #165dff;
      border-radius: 20px;

      .pinyin {
        font-size: 14px;
        color: #fff;
      }

      .audio-wrapper {
        :deep .audio-play {
          color: #fff;
        }

        :deep .audio-play.not-url {
          color: #a1a1a1;
        }
      }
    }

    .card-box {
      display: flex;
      flex-wrap: wrap;
    }

    .pinyin {
      font-family: 'League';
      font-size: 12px;
      font-weight: 500;
      color: #000;
    }

    .strock-chinese {
      border: 1px solid #e81b1b;
      border-top: none;
    }

    .strockplay-newWord {
      position: relative;
      box-sizing: border-box;
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border: 1px solid #e81b1b;
      border-top: none;

      .character-target-bg,
      .hanzi-writer-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #dedede;
      }

      .hanzi-writer-img {
        z-index: 1;
      }
    }

    .border-left-none {
      border-left: none;
    }

    .border-right-none {
      border-right: none;
    }

    &-learn {
      display: flex;
      column-gap: 24px;

      .words-item {
        display: block;
      }
    }
  }

  .words-box-dictation {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;

    .card-box {
      display: block;
    }

    .words-dic-box {
      display: flex;
      column-gap: 6px;
      width: max-content;
      margin: 0 auto;
    }

    .words-dic-item {
      text-align: center;

      .pinyin {
        line-height: 30px;
      }
    }
  }

  .words-dic-item {
    .strockplay-newWord {
      border-top: 1px solid #e81b1b;
    }
  }

  .practiceBox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, 19%);

    &.practice-box-strock {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 0;
    }
  }
}
</style>