GCLS_Page_TC/src/views/wordcard/writeTable.vue

<template>
  <div class="writeTable" v-if="data">
    <div class="writeTop">
        <div class="writeTop-row" v-for="(itemR,indexR) in data" :key="indexR" :style="{marginBottom:dataConfig.marginBottom}">
            <div class="writeTop-item" :class="[indexI!==0?'writeTop-item-noLeft':'']" v-for="(itemI,indexI) in itemR" :key="indexI" :style="{width:dataConfig.width,height:dataConfig.width,borderColor:dataConfig.borderColor}">
                <template v-if="itemI&&itemI.con&&!itemI.write&&!itemI.answer&&!itemI.miaoRed">
                    <Strockplay
                        v-if="'writeTop-item-' + pageNumber + '-' + indexR + '-' + indexI + type"
                        className="adult-strockplay"
                        :strokePlayColor="dataConfig.borderColor"
                        :Book_text="itemI.con"
                        :playStorkes="dataConfig.playStorkes"
                        :strokeColor="dataConfig.fontColor"
                        :palyWidth="dataConfig.playWidth"
                        :BoxbgType="dataConfig.BoxbgType"
                        :targetDiv="'writeTop-item-' + pageNumber + '-' + indexR + '-' + indexI + type"
                     />
                </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 + Math.random().toString(36).substr(2)
                        "
                        :targetDivGray="'write-item-miaohong-gray-'+
                            pageNumber + '-' + indexR + '-' + indexI + type + Math.random().toString(36).substr(2)"
                    />
                </template>
                <template v-else-if="itemI&&itemI.miaoRed">
                    <Strockred
                        v-if="'write-item-' + pageNumber + '-' + indexR + '-' + 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 + Math.random().toString(36).substr(2)"
                     />
                </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"
      />
    </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"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    StrockplayredlineTable,
    Strockplay,
    Strockred,
    FreewriteLettle
  },
  props: [
    "dataConfig",
    "data",
    "pageNumber",
    "totalNumber",
    "type"
  ],
  data() {
    //这里存放数据
    return {
        ifFreeShow: false,
        activeIndex: null,
        activeColIndex: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  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[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
        this.data[rowIndex][colIndex].history = answer.history
        this.$forceUpdate();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  //生命周期-创建之前
  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: 732px;
        padding-top: 48px;
        .writeTop-row{
            display: flex;
            justify-content: center;
            .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;
        }
    }
}
</style>