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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div 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">{{ data.description }}</div>

    <!-- 笔画学习 -->
    <div :class="['words-box', 'words-box-' + data.property.learn_type]">
      <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
        <template v-if="item.content.trim()">
          <template v-if="data.property.learn_type === 'paint'">
            <!-- 描红 -->
            <Strockplayredline
              :play-storkes="true"
              :book-text="item.content"
              :target-div="'pre' + item.content + index"
              :book-strokes="item.strokes"
              :class="['strock-chinese', 'border-right-none']"
            />
            <Strockred
              v-for="itemI in 5"
              :key="itemI + data.property.learn_type"
              :book-text="item.content"
              :hanzi-color="hanzi_color"
              :reset="true"
              :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
              :book-strokes="item.strokes"
              :class="['strock-chinese', itemI !== 5 ? 'border-right-none' : '']"
            />
            <div
              v-for="(items, indexs) in item.imgArr"
              :key="indexs"
              :class="['strockplay-newWord border-left-none']"
              @click="freeWrite(items, index, indexs)"
            >
              <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
              <img
                v-if="!play_status && items && items.strokes_image_url"
                class="hanzi-writer-img"
                :src="items.strokes_image_url"
                alt=""
              />
            </div>
          </template>
          <template v-else-if="data.property.learn_type === 'write'">
            <!-- 书写 -->
            <Strockplayredline
              :play-storkes="true"
              :book-text="item.content"
              :target-div="'pre' + item.content + index"
              :book-strokes="item.strokes"
              :class="['strock-chinese']"
            />
            <div v-for="(items, indexs) in item.imgArr" :key="indexs" class="con-box">
              <div :class="['strockplay-newWord border-left-none']" @click="freeWrite(items, index, indexs)">
                <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                <img
                  v-if="!play_status && items && items.strokes_image_url"
                  class="hanzi-writer-img"
                  :src="items.strokes_image_url"
                  alt=""
                />
              </div>
            </div>
          </template>
          <template v-else>
            <div class="words-info">
              <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
              <span class="pinyin">{{ item.pinyin }}</span>
            </div>
            <Strockplayredline
              :play-storkes="true"
              :book-text="item.content"
              :target-div="'pre' + item.content + index"
              :book-strokes="item.strokes"
              class="strock-chinese"
            />
          </template>
        </template>
      </div>
    </div>
    <div v-if="if_free_show" class="practiceBox practice-box-strock">
      <FreewriteLettle
        ref="freePaint"
        :current-tree-i-d="'1234'"
        :current-hz="current_hz"
        :curren-hz-data="current_hz_data"
        :row-index="active_index"
        :col-index="active_col_index"
        @closeIfFreeShow="closeIfFreeShow"
        @changePraShow="changePraShow"
        @changeCurQue="changeCurQue"
        @deleteWriteRecord="deleteWriteRecord"
      />
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import Strockplayredline from './components/common/Strockplayredline.vue';
import Strockred from './components/common/Strockred.vue';
import FreewriteLettle from './components/common/FreewriteLettle.vue';
import { GetStaticResources } from '@/api/exercise';

export default {
  name: 'ChinesePreview',
  components: {
    Strockplayredline,
    Strockred,
    FreewriteLettle,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      hanzi_color: '#404040', // 描红汉字底色
      writer_number: 19, // 书写个数
      answer_list: {
        write_model: {},
      }, // 用户答题数据
      if_free_show: false,
      free_img: [],
      active_index: null,
      active_col_index: null,
      current_hz: '', // 当前汉字
      current_hz_data: null, // 当前汉字数据
      play_status: false, // 播放状态
    };
  },
  watch: {
    'data.property.learn_type': {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.handleData();
        }
      },
      deep: true,
    },
  },
  created() {
    this.handleData();
  },
  methods: {
    // 初始化数据
    handleData() {
      if (document.getElementsByClassName('preview-content') && document.getElementsByClassName('preview-content')[0]) {
        this.writer_number =
          Math.floor((document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64) - 1;
      }
      if (this.data.property.learn_type === 'paint') {
        this.writer_number -= 5;
      }
      this.data.option_list.forEach((item) => {
        if (item.content.trim()) {
          let arr = [];
          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
          let data = {
            hz: item.content.trim(),
          };
          GetStaticResources(MethodName, data).then((res) => {
            this.$set(item, 'strokes', res);
          });
          for (let i = 0; i < this.writer_number; i++) {
            arr.push(null);
          }
          item.imgArr = arr;
          this.answer_list.write_model[item.content.trim()] = arr;
        }
      });
    },
    changePraShow() {
      this.if_free_show = false;
    },
    closeIfFreeShow(data, rowIndex, colIndex) {
      this.data.option_list[rowIndex].imgArr[colIndex] = data;
      this.if_free_show = false;
      this.freeWrite(data, rowIndex, colIndex);
      this.$forceUpdate();
    },
    freeWrite(imgUrl, index, indexs) {
      this.if_free_show = true;
      this.active_index = index;
      this.active_col_index = indexs;
      this.current_hz = this.data.option_list[index].content;
      this.current_hz_data = imgUrl;
    },
    // 删除记录
    deleteWriteRecord(rowIndex, colIndex, current_hz) {
      this.$set(this.data.option_list[rowIndex].imgArr, colIndex, {});
      let answer = {
        hz: current_hz,
        strokes_content: '',
        strokes_image_url: '',
      };
      this.changeCurQue(answer, colIndex);
      this.current_hz_data = null;
      this.$forceUpdate();
    },
    changeCurQue(answer, colIndex) {
      if (answer) {
        let write_model = this.answer_list.write_model;
        let hz = answer.hz;
        write_model[hz][colIndex] = answer;
      }
    },
  },
};
</script>

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

.chinese-preview {
  @include preview;

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

    .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;
      margin-bottom: 9px;

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

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

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

      .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;
      }
    }
  }

  .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>