GCLS_Page_TC/src/views/wordcard/writeTable.vue

<template>
  <div :class="['writeTable']" v-if="data" v-loading="loading">
    <div class="writeTop" :class="[data.fileList ? 'writeTop-nopadding' : '']">
      <template v-if="data.fileList">
        <UploadDrag
          :fileList="data.fileList"
          @changeFillId="changeFillId"
          v-if="data.fileList.length === 0"
          :disabled="is_preview"
        ></UploadDrag>
        <div class="item-image" v-else>
          <el-image
            style="width: 593px; height: 224px"
            :src="data.fileList[0].fileUrl"
            :preview-src-list="[data.fileList[0].fileUrl]"
            fit="cover"
          />
          <span v-if="!is_preview" class="item-image-del" @click="handleDeleteImg"><i class="el-icon-delete"></i></span>
        </div>
        <div class="item-info">
          <template v-if="data.hz_info.length === 1">
            <div class="item-info-left">
              <p v-if="dataConfig.wordPinyin || dataConfig.wordVoice" class="voice-box">
                <AudioPlay :file-id="audio_file" v-if="audio_file" />
                <span v-if="dataConfig.wordPinyin">{{ data.pinyin }}</span>
              </p>
              <div class="hz-box">
                <Strockplay
                  className="adult-strockplay"
                  :strokePlayColor="dataConfig.borderColor"
                  :Book_text="itemh.con"
                  :playStorkes="dataConfig.playStorkes"
                  :strokeColor="dataConfig.fontColor"
                  :palyWidth="dataConfig.playWidth"
                  :BoxbgType="dataConfig.BoxbgType"
                  :curItem="itemh.hzDetail.hz_json"
                  :targetDiv="'writeTops-item-' + pageNumber + '-' + indexh + '-' + itemh.con"
                  :fontSize="fontSize"
                  :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
                  class="writeTop-item"
                  v-for="(itemh, indexh) in data.hz_info"
                  :key="indexh"
                />
              </div>
            </div>
            <div class="item-info-right">
              <p class="voice-box" v-if="dataConfig.wordPinyin || dataConfig.wordVoice"></p>

              <div class="item-info-row">
                <div class="item-info-half">
                  <label>部首：</label>
                  <div>{{ data.radical }}</div>
                </div>
                <div class="item-info-half">
                  <label>笔画：</label>
                  {{ data.hz_info[0].hzDetail.hz_json.medians.length }}
                </div>
              </div>
              <template v-if="is_preview">
                <div class="item-info-row">
                  <div class="item-info-half">
                    <label>释义：</label>
                    {{ data.info.definition }}
                  </div>
                  <div class="item-info-half">
                    <label>搭配：</label>
                    {{ data.info.collocation }}
                  </div>
                </div>
                <div class="item-info-row">
                  <div class="item-info-all">{{ data.info.exampleSent }}</div>
                </div>
              </template>
              <template v-else>
                <div class="item-info-row">
                  <el-input
                    v-model="data.info.definition"
                    placeholder="输入释义"
                    @blur="changeInfoObj('definition')"
                  ></el-input>
                  <el-input
                    v-model="data.info.collocation"
                    placeholder="输入搭配"
                    @blur="changeInfoObj('collocation')"
                  ></el-input>
                </div>
                <div class="item-info-row">
                  <el-input
                    v-model="data.info.exampleSent"
                    placeholder="输入例句"
                    @blur="changeInfoObj('exampleSent')"
                  ></el-input>
                </div>
              </template>
            </div>
          </template>
          <template v-else>
            <div class="item-info-left item-info-left-long">
              <p v-if="dataConfig.wordPinyin || dataConfig.wordVoice" class="voice-box">
                <AudioPlay :file-id="audio_file" v-if="audio_file" />
                <span v-if="dataConfig.wordPinyin">{{ data.pinyin }}</span>
              </p>
              <div class="hz-box" :style="{ margin: '0 auto 4px auto' }">
                <Strockplay
                  className="adult-strockplay"
                  :strokePlayColor="dataConfig.borderColor"
                  :Book_text="itemh.con"
                  :playStorkes="dataConfig.playStorkes"
                  :strokeColor="dataConfig.fontColor"
                  :palyWidth="dataConfig.playWidth"
                  :BoxbgType="dataConfig.BoxbgType"
                  :curItem="itemh.hzDetail.hz_json"
                  :targetDiv="'writeTops-item-' + pageNumber + '-' + indexh + '-' + itemh.con"
                  :fontSize="fontSize"
                  :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
                  class="writeTop-item writeTop-item-small"
                  v-for="(itemh, indexh) in data.hz_info"
                  :key="indexh"
                />
              </div>
              <template v-if="is_preview">
                <div class="item-info-row" :style="{ height: '48px' }">
                  <div class="item-info-all">{{ data.info.definition }}</div>
                </div>
              </template>
              <el-input
                v-else
                type="textarea"
                v-model="data.info.definition"
                rows="2"
                placeholder="输入"
                @blur="changeInfoObj('definition')"
              ></el-input>
            </div>
          </template>
        </div>
      </template>
      <div
        class="writeTop-row"
        v-for="(itemR, indexR) in data.list"
        :key="'writeTop-' + indexR"
        :style="{ marginBottom: dataConfig.marginBottom }"
      >
        <div
          class="writeTop-item"
          :class="[indexI !== 0 ? 'writeTop-item-noLeft' : '']"
          v-for="(itemI, indexI) in itemR"
          :key="'writeTop-item' + indexI"
          :style="{
            width: dataConfig.width,
            height: dataConfig.width,
            borderColor: dataConfig.borderColor,
          }"
        >
          <template v-if="itemI && itemI.con && itemI.isPunctuation">
            <!-- 不是汉字的内容 -->
            <div class="punctuation-box">
              <div class="character-target-div">
                <svg-icon
                  icon-class="tian"
                  className="tian-bg"
                  v-if="dataConfig.BoxbgType == 0"
                  :style="{ color: '#DEDEDE' }"
                />
                <svg-icon
                  icon-class="mi"
                  className="tian-bg"
                  v-if="dataConfig.BoxbgType == 1"
                  :style="{ color: '#DEDEDE' }"
                />
              </div>
              <h3
                :style="{
                  lineHeight: dataConfig.width,
                  color: itemI.miaoRed ? dataConfig.writeColor : dataConfig.fontColor,
                  fontSize: dataConfig.fontSize,
                }"
              >
                {{ itemI.con }}
              </h3>
            </div>
          </template>
          <template v-else-if="itemI && itemI.con && !itemI.write && !itemI.answer && !itemI.miaoRed">
            <Strockplay
              v-if="'writeTop-item-' + pageNumber + '-' + indexI + type"
              className="adult-strockplay"
              :strokePlayColor="dataConfig.borderColor"
              :Book_text="itemI.con"
              :playStorkes="dataConfig.playStorkes"
              :strokeColor="dataConfig.fontColor"
              :palyWidth="dataConfig.playWidth"
              :BoxbgType="dataConfig.BoxbgType"
              :curItem="itemI.hzDetail"
              :targetDiv="'writeTop-item-' + pageNumber + '-' + indexR + '-' + indexI + type + itemI.con"
              :fontSize="fontSize"
            />
          </template>
          <template v-else-if="itemI && itemI.answer">
            <StrockplayredlineTable
              :Book_text="itemI.con"
              :playStorkes="false"
              :strokeColorgray="dataConfig.miaoRedBgcolor"
              :strokeColor="dataConfig.fontColor"
              :strokeNumber="itemI.answer"
              :curItem="itemI.hzDetail"
              :BoxbgType="dataConfig.BoxbgType"
              :targetDiv="'write-item-miaohong-' + pageNumber + '-' + indexR + '-' + indexI + type + itemI.con"
              :targetDivGray="'write-item-miaohong-gray-' + pageNumber + '-' + indexR + '-' + indexI + type + itemI.con"
              :fontSize="fontSize"
            />
          </template>
          <template v-else-if="itemI && itemI.miaoRed">
            <Strockred
              v-if="'write-item-' + pageNumber + '-' + indexI + type"
              className="adult-strockplay"
              :strokePlayColor="dataConfig.borderColor"
              :Book_text="itemI.con"
              :curItem="itemI.hzDetail"
              :hanzicolor="dataConfig.miaoRedBgcolor"
              :drawingColor="dataConfig.writeColor"
              :BoxbgType="dataConfig.BoxbgType"
              :targetDiv="'write-item-' + pageNumber + '-' + indexR + '-' + indexI + type + itemI.con"
              :fontSize="fontSize"
            />
          </template>
          <div v-else-if="itemI" class="tian-div" @click="freeWrite(itemI, indexR, indexI)">
            <svg-icon
              icon-class="tian"
              className="tian"
              v-if="dataConfig.BoxbgType == 0"
              :style="{ color: '#DEDEDE' }"
            />
            <svg-icon icon-class="mi" className="tian" v-if="dataConfig.BoxbgType == 1" :style="{ color: '#DEDEDE' }" />
            <img v-if="itemI && itemI.strokes_image_url" :src="itemI.strokes_image_url" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="writeBottom">
      <span>BLCUP 全球国际中文教学云平台</span>
      <b>{{ pageNumber + '/' + totalNumber }}</b>
      <a>www.chinesedu.com</a>
    </div> -->
    <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
      <FreewriteLettle
        :changePraShow="changePraShow"
        ref="freePaint"
        :currenHzData="currenHzData"
        :rowIndex="activeIndex"
        :colIndex="activeColIndex"
        :closeifFreeShow="closeifFreeShow"
        @ExerciseChangeCurQue="ExerciseChangeCurQue"
        :BoxbgType="dataConfig.BoxbgType"
        :lineColor="dataConfig.writeColor"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import StrockplayredlineTable from '../../components/corpus/StrockplayredlineTable.vue';
import Strockplay from '../../components/corpus/Strockplay.vue';
import Strockred from '../../components/corpus/Strockred.vue';
import FreewriteLettle from '../../components/corpus/FreewriteLettle.vue';
import UploadDrag from './UploadDrag.vue';
import AudioPlay from './AudioPlay.vue';
const HanziWriter = require('hanzi-writer');
import { getLogin } from '@/api/api';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    StrockplayredlineTable,
    Strockplay,
    Strockred,
    FreewriteLettle,
    UploadDrag,
    AudioPlay,
  },
  props: [
    'dataConfig',
    'data',
    'pageNumber',
    'totalNumber',
    'type',
    'none',
    'fontSize',
    'audio_file_obj',
    'is_preview',
    'infoObj',
  ],
  data() {
    //这里存放数据
    return {
      ifFreeShow: false,
      activeIndex: null,
      activeColIndex: null,
      fileList: [],
      info: {
        definition: '',
        collocation: '',
        exampleSent: '',
      },
      writer: null,
      audio_file: '',
      loading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    pageNumber: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.initHanziwrite();
        }
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    changePraShow() {
      this.ifFreeShow = false;
    },
    closeifFreeShow(data, rowIndex, colIndex) {
      this.ifFreeShow = false;
      this.$forceUpdate();
    },
    freeWrite(item, row, col) {
      this.ifFreeShow = true;
      this.activeIndex = row;
      this.activeColIndex = col;
      //   this.currentHz = this.curQue.option[indexs].rightOption[rightindex].con;
      if (item) {
        this.currenHzData = item;
      } else {
        this.currenHzData = {};
      }
    },
    ExerciseChangeCurQue(answer, rowIndex, colIndex) {
      if (answer) {
        this.data.list[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
        this.data.list[rowIndex][colIndex].history = answer.history;
        this.$forceUpdate();
      }
    },
    changeFillId(file, fileList) {
      let obj = {
        name: file.name,
        fileId: file.file_id,
        fileUrl: file.file_url_open,
      };
      this.data.fileList.push(obj);
      this.infoObj[this.data.con].fileList = [obj];
    },
    handleDeleteImg() {
      this.data.fileList = [];
      this.infoObj[this.data.con].fileList = [];
    },
    initHanziwrite() {
      // let _this = this;
      // let node = document.getElementById(`character-target-info-div` + _this.pageNumber);
      // if (node && node.children.length > 1) {
      //   node.removeChild(node.children[1]);
      // }
      // _this.writer = HanziWriter.default.create(
      //   `character-target-info-div` + _this.pageNumber,
      //   _this.data.hz_info[0].con,
      //   {
      //     width: 22,
      //     height: 22,
      //     padding: 0,
      //     radicalColor: '#000000',
      //     strokeColor: '#fff',
      //   },
      // );
      if (this.data.con) {
        this.loading = true;
        let MethodName = 'tool-TextToVoiceFile';
        let datas = {
          text: this.data.con,
        };
        getLogin(MethodName, datas)
          .then((res) => {
            this.loading = false;
            if (res.status === 1) {
              this.audio_file = res.file_id;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    changeInfoObj(param) {
      this.infoObj[this.data.con][param] = this.data.info[param] ? this.data.info[param].trim() : '';
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initHanziwrite();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // let _this = this;
    // _this.$nextTick(() => {
    //   if (_this.data.hz_info && _this.data.hz_info.length === 1) {
    //     _this.initHanziwrite();
    //   }
    // });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
.writeTable {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 595px;
  height: 842px;

  box-sizing: border-box;
  .writeTop {
    height: 794px;
    padding-top: 48px;
    .item-image {
      position: relative;
      .item-image-del {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 16px;
        height: 16px;
        display: block;
        cursor: pointer;
        background-color: #ffffff;
        color: #ee3232;
        padding: 8px;
        border-radius: 50%;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      }
    }
    .writeTop-row {
      display: flex;
      justify-content: center;
    }
  }
  .writeTop-nopadding {
    padding-top: 0;
    height: 842px;
  }
  .item-info {
    display: flex;
    width: 100%;
    padding: 0 46px 8px 46px;
    column-gap: 16px;
    box-sizing: border-box;
    &-left {
      .writeTop-item {
        width: 98px;
        height: 98px;
        :deep .strock-play-box {
          width: 18px !important;
          height: 18px !important;
        }
        :deep .playStorkes-btn {
          width: 18px !important;
          height: 18px !important;
        }
        &-small {
          width: 62px;
          height: 62px;
          :deep .strock-play-box {
            width: 11px !important;
            height: 11px !important;
          }
          :deep .playStorkes-btn {
            width: 11px !important;
            height: 11px !important;
          }
        }
      }
      &-long {
        width: 100%;
      }
    }
    &-right {
      flex: 1;
    }
    :deep .el-textarea__inner {
      resize: none;
      background-color: #f3f3f3;
      border: none;
      outline: none;
    }
    .voice-box {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 4px;
      img {
        width: 24px;
        height: 24px;
      }
      span {
        font-family: League;
        font-size: 16px;
        font-weight: 400;
        color: #de4444;
      }
    }
    .item-info-row {
      display: flex;
      column-gap: 11px;
      margin-bottom: 6px;
      :deep .el-input__inner {
        background-color: #f3f3f3;
        border: none;
        outline: none;
        height: 32px;
      }
    }
    .item-info-half,
    .item-info-all {
      width: 50%;
      display: flex;
      font-size: 14px;
      line-height: 22px;
      height: 22px;
    }
    .item-info-all {
      width: 100%;
    }
  }
  .hz-box {
    display: flex;
    width: max-content;
  }
  .writeTop-item {
    border: 1px solid #de4444;
  }
  .writeTop-item-noLeft {
    border-left: none;
  }
  .writeBottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 38px;
    box-sizing: border-box;
    position: relative;
    span {
      font-weight: 500;
      font-size: 10px;
      line-height: 14px;
      color: #000000;
      opacity: 0.2;
    }
    b {
      font-weight: 400;
      font-size: 14px;
      line-height: 14px;
      color: #000000;
      width: 60px;
      text-align: center;
      position: absolute;
      left: 50%;
      margin-left: -30px;
      top: 0px;
    }
    a {
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      color: #000000;
      opacity: 0.2;
    }
  }
  .tian-div {
    width: 100%;
    height: 100%;
    position: relative;
    .tian {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .practiceBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100100;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    &.practiceBoxStrock {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 0px;
    }
  }
  .punctuation-box {
    position: relative;
    width: 100%;
    height: 100%;
    .character-target-div {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      .svg-icon {
        width: 100%;
        height: 100%;
      }
    }
    h3 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      font-family: FZJCGFKTK;
      text-align: center;
      font-weight: normal;
    }
  }
}
</style>