字词模式

src/views/wordcard/cread.vue

@@ -607,12 +607,13 @@ export default {
 
       //   字模式 笔顺打开
       if (data.typeIndex == 0) {
-        if (data.StorkesUnfold) {
-          let allArr = [];
-          data.option.forEach((item) => {
-            let arr = [];
-            let hzLength = 1;
-            let arrOption = [];
+        let allArr = [];
+        data.option.forEach((item) => {
+          let arr = [];
+          let hzLength = 1;
+          let arrOption = [];
+
+          if (data.StorkesUnfold) {
             // 拆分字和笔画为每一项
             item.hz_list.forEach((items, indexss) => {
               let item_row = []; // 每个字的描红内容
@@ -642,198 +643,199 @@ export default {
                 arr.push(item_row);
               }
             });
-            // 添加书写行
-            if (data.writeBoxNumber) {
-              for (let i = 0; i < data.writeBoxNumber; i++) {
-                let numrow = [];
-                for (let k = 0; k < data.rowNumber; k++) {
-                  numrow.push({
-                    con: item.con.split('')[0],
-                    write: true,
-                  });
-                }
-                // 描红格
-                if (i == 0 && data.miaoRedBoxNumber) {
-                  let m =
-                    Number(data.miaoRedBoxNumber) > Number(data.writeBoxNumber)
-                      ? Number(data.writeBoxNumber)
-                      : Number(data.miaoRedBoxNumber);
-                  let s = Math.ceil((m * data.rowNumber) / item.hz_list.length); // 循环多少次词组
-                  let miaoArr = [];
-                  for (let j = 0; j < s; j++) {
-                    item.hz_list.forEach((items) => {
-                      if (miaoArr.length < m * data.rowNumber) {
-                        miaoArr.push({
-                          con: items.con,
-                          miaoRed: true,
-                          write: true,
-                        });
-                      }
-                    });
-                  }
-                  let result = []; // 将描红数组切割为二维数组
-                  for (let i = 0; i < miaoArr.length; i += data.rowNumber) {
-                    result.push(miaoArr.slice(i, i + data.rowNumber));
-                  }
-                  arrOption = JSON.parse(JSON.stringify(result));
-                }
-                arrOption.push(numrow);
-                arrOption = arrOption.slice(0, data.writeBoxNumber);
-              }
-              arrOption.forEach((itemA) => {
-                arr.push(itemA);
-              });
-            }
-            if (this.from.autoCompletion) {
-              let complet_line = 0; // 需要补齐的行数
-              if (arr.length <= data.firstPageLine) {
-                complet_line = data.firstPageLine - arr.length;
-              } else {
-                complet_line = data.pageNumber - ((arr.length - data.firstPageLine) % data.pageNumber);
+          }
+          // 添加书写行
+          if (data.writeBoxNumber) {
+            for (let i = 0; i < data.writeBoxNumber; i++) {
+              let numrow = [];
+              for (let k = 0; k < data.rowNumber; k++) {
+                numrow.push({
+                  con: item.con.split('')[0],
+                  write: true,
+                });
               }
-              for (let i = 0; i < complet_line; i++) {
-                let numrow = [];
-                for (let k = 0; k < data.rowNumber; k++) {
-                  numrow.push({
-                    write: true,
+              // 描红格
+              if (i == 0 && data.miaoRedBoxNumber) {
+                let m =
+                  Number(data.miaoRedBoxNumber) > Number(data.writeBoxNumber)
+                    ? Number(data.writeBoxNumber)
+                    : Number(data.miaoRedBoxNumber);
+                let s = Math.ceil((m * data.rowNumber) / item.hz_list.length); // 循环多少次词组
+                let miaoArr = [];
+                for (let j = 0; j < s; j++) {
+                  item.hz_list.forEach((items) => {
+                    if (miaoArr.length < m * data.rowNumber) {
+                      miaoArr.push({
+                        con: items.con,
+                        miaoRed: true,
+                        write: true,
+                      });
+                    }
                   });
                 }
-                arr.push(numrow);
-              }
-            }
-            if (arr.length <= data.firstPageLine) {
-              let obj = {
-                fileList: [],
-                info: {
-                  definition: '',
-                  collocation: '',
-                  exampleSent: '',
-                },
-                list: arr,
-                hz_info: item.hz_list,
-                pinyin: item.pinyin,
-                con: item.con,
-              };
-              final_result.push(obj);
-            } else {
-              let obj = {
-                fileList: [],
-                info: {
-                  definition: '',
-                  collocation: '',
-                  exampleSent: '',
-                },
-                list: arr.slice(0, data.firstPageLine),
-                hz_info: item.hz_list,
-                pinyin: item.pinyin,
-                con: item.con,
-              };
-              final_result.push(obj);
-              for (let i = data.firstPageLine; i < arr.length; i += data.pageNumber) {
-                final_result.push({
-                  list: arr.slice(i, i + data.pageNumber),
-                });
+                let result = []; // 将描红数组切割为二维数组
+                for (let i = 0; i < miaoArr.length; i += data.rowNumber) {
+                  result.push(miaoArr.slice(i, i + data.rowNumber));
+                }
+                arrOption = JSON.parse(JSON.stringify(result));
               }
+              arrOption.push(numrow);
+              arrOption = arrOption.slice(0, data.writeBoxNumber);
             }
-          });
-          data.result = final_result;
-          data.audio_file_obj = audio_file_obj;
-          this.writeTableData = data;
-        } else {
-          let allArr = [];
-          data.option.forEach((item) => {
-            let arr = [];
-            let arrOption = [];
-            // 拆分字和笔画为每一项
-            arr.push({
-              con: item.con,
-              hzDetail: JSON.parse(JSON.stringify(item.hzDetail.hz_json)),
+            arrOption.forEach((itemA) => {
+              arr.push(itemA);
             });
-            // 如果不满一行则补满
-            let newarr = [];
-            let areadyMiao = 0;
-            if (arr.length % data.rowNumber != 0) {
-              let num = data.rowNumber - (arr.length % data.rowNumber);
-              for (let i = 0; i < num; i++) {
-                if (data.miaoRedBoxNumber && i < data.miaoRedBoxNumber) {
-                  arr.push({
-                    con: item.con,
-                    miaoRed: true,
-                    write: true,
-                  });
-                  areadyMiao++;
-                } else {
-                  arr.push({});
-                }
-              }
-              if (arr.length > data.rowNumber) {
-                newarr = this.arrSplice(arr, data.rowNumber);
-                newarr.forEach((itemss) => {
-                  allArr.push(itemss);
-                });
-              } else {
-                allArr.push(arr);
-              }
+          }
+          if (this.from.autoCompletion) {
+            let complet_line = 0; // 需要补齐的行数
+            if (arr.length <= data.firstPageLine) {
+              complet_line = data.firstPageLine - arr.length;
             } else {
-              allArr.push(arr);
-            }
-            // 添加书写行
-            if (data.writeBoxNumber) {
-              for (let i = 0; i < data.writeBoxNumber; i++) {
-                let numrow = [];
-                for (let k = 0; k < data.rowNumber; k++) {
-                  numrow.push({
-                    con: item.con,
-                    write: true,
-                  });
-                }
-                // 描红格
-                if (i == 0 && data.miaoRedBoxNumber) {
-                  let m =
-                    Math.ceil((data.miaoRedBoxNumber - areadyMiao) / data.rowNumber) > data.writeBoxNumber
-                      ? data.writeBoxNumber
-                      : Math.ceil((data.miaoRedBoxNumber - areadyMiao) / data.rowNumber);
-                  for (let j = 0; j < m; j++) {
-                    let miaoArr = [];
-                    for (let l = 0; l < data.rowNumber; l++) {
-                      if (j * data.rowNumber + l < data.miaoRedBoxNumber - areadyMiao) {
-                        miaoArr[l] = {
-                          con: item.con,
-                          miaoRed: true,
-                          write: true,
-                        };
-                      } else {
-                        miaoArr[l] = {
-                          con: item.con,
-                          write: true,
-                        };
-                      }
-                    }
-                    arrOption.push(JSON.parse(JSON.stringify(miaoArr)));
-                  }
-                }
-                arrOption.push(numrow);
-                arrOption = arrOption.slice(0, data.writeBoxNumber);
-              }
-              arrOption.forEach((itemA) => {
-                allArr.push(itemA);
-              });
+              complet_line = data.pageNumber - ((arr.length - data.firstPageLine) % data.pageNumber);
             }
-          });
-          if (data.lastNullrow) {
-            for (let i = 0; i < data.lastNullrow; i++) {
+            for (let i = 0; i < complet_line; i++) {
               let numrow = [];
               for (let k = 0; k < data.rowNumber; k++) {
                 numrow.push({
                   write: true,
                 });
               }
-              allArr.push(JSON.parse(JSON.stringify(numrow)));
+              arr.push(numrow);
             }
           }
-          data.result = this.arrSplice(allArr, data.pageNumber);
-          this.writeTableData = data;
-        }
+          if (arr.length <= data.firstPageLine) {
+            let obj = {
+              fileList: [],
+              info: {
+                definition: '',
+                collocation: '',
+                exampleSent: '',
+              },
+              list: arr,
+              hz_info: item.hz_list,
+              pinyin: item.pinyin,
+              con: item.con,
+            };
+            final_result.push(obj);
+          } else {
+            let obj = {
+              fileList: [],
+              info: {
+                definition: '',
+                collocation: '',
+                exampleSent: '',
+              },
+              list: arr.slice(0, data.firstPageLine),
+              hz_info: item.hz_list,
+              pinyin: item.pinyin,
+              con: item.con,
+            };
+            final_result.push(obj);
+            for (let i = data.firstPageLine; i < arr.length; i += data.pageNumber) {
+              final_result.push({
+                list: arr.slice(i, i + data.pageNumber),
+              });
+            }
+          }
+        });
+        data.result = final_result;
+        data.audio_file_obj = audio_file_obj;
+        this.writeTableData = data;
+        // } else {
+        //   let allArr = [];
+        //   data.option.forEach((item) => {
+        //     let arr = [];
+        //     let arrOption = [];
+        //     // 拆分字和笔画为每一项
+        //     arr.push({
+        //       con: item.con,
+        //       hzDetail: JSON.parse(JSON.stringify(item.hzDetail.hz_json)),
+        //     });
+        //     // 如果不满一行则补满
+        //     let newarr = [];
+        //     let areadyMiao = 0;
+        //     if (arr.length % data.rowNumber != 0) {
+        //       let num = data.rowNumber - (arr.length % data.rowNumber);
+        //       for (let i = 0; i < num; i++) {
+        //         if (data.miaoRedBoxNumber && i < data.miaoRedBoxNumber) {
+        //           arr.push({
+        //             con: item.con,
+        //             miaoRed: true,
+        //             write: true,
+        //           });
+        //           areadyMiao++;
+        //         } else {
+        //           arr.push({});
+        //         }
+        //       }
+        //       if (arr.length > data.rowNumber) {
+        //         newarr = this.arrSplice(arr, data.rowNumber);
+        //         newarr.forEach((itemss) => {
+        //           allArr.push(itemss);
+        //         });
+        //       } else {
+        //         allArr.push(arr);
+        //       }
+        //     } else {
+        //       allArr.push(arr);
+        //     }
+        //     // 添加书写行
+        //     if (data.writeBoxNumber) {
+        //       for (let i = 0; i < data.writeBoxNumber; i++) {
+        //         let numrow = [];
+        //         for (let k = 0; k < data.rowNumber; k++) {
+        //           numrow.push({
+        //             con: item.con,
+        //             write: true,
+        //           });
+        //         }
+        //         // 描红格
+        //         if (i == 0 && data.miaoRedBoxNumber) {
+        //           let m =
+        //             Math.ceil((data.miaoRedBoxNumber - areadyMiao) / data.rowNumber) > data.writeBoxNumber
+        //               ? data.writeBoxNumber
+        //               : Math.ceil((data.miaoRedBoxNumber - areadyMiao) / data.rowNumber);
+        //           for (let j = 0; j < m; j++) {
+        //             let miaoArr = [];
+        //             for (let l = 0; l < data.rowNumber; l++) {
+        //               if (j * data.rowNumber + l < data.miaoRedBoxNumber - areadyMiao) {
+        //                 miaoArr[l] = {
+        //                   con: item.con,
+        //                   miaoRed: true,
+        //                   write: true,
+        //                 };
+        //               } else {
+        //                 miaoArr[l] = {
+        //                   con: item.con,
+        //                   write: true,
+        //                 };
+        //               }
+        //             }
+        //             arrOption.push(JSON.parse(JSON.stringify(miaoArr)));
+        //           }
+        //         }
+        //         arrOption.push(numrow);
+        //         arrOption = arrOption.slice(0, data.writeBoxNumber);
+        //       }
+        //       arrOption.forEach((itemA) => {
+        //         allArr.push(itemA);
+        //       });
+        //     }
+        //   });
+        //   if (data.lastNullrow) {
+        //     for (let i = 0; i < data.lastNullrow; i++) {
+        //       let numrow = [];
+        //       for (let k = 0; k < data.rowNumber; k++) {
+        //         numrow.push({
+        //           write: true,
+        //         });
+        //       }
+        //       allArr.push(JSON.parse(JSON.stringify(numrow)));
+        //     }
+        //   }
+        //   data.result = this.arrSplice(allArr, data.pageNumber);
+        //   this.writeTableData = data;
+        // }
         console.log(this.writeTableData);
         this.$forceUpdate();
         this.isCread = true;

src/views/wordcard/print.vue

@@ -1,14 +1,108 @@
 <template>
   <div class="none_writeTable writeTable printTable" v-if="dataConfig">
-    <div
-      class="none_word_main_table"
-      v-for="(data, indexT) in dataConfig.result"
-      :key="indexT"
-    >
-      <div class="writeTop">
+    <div class="none_word_main_table" v-for="(data, indexT) in dataConfig.result" :key="indexT">
+      <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="true"
+          ></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"
+            />
+          </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="data.audio_file" v-if="data.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-' + indexT + '-' + indexh + '-' + itemh.con"
+                    :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 :id="'character-target-info-div' + indexT"></div>
+                  </div>
+                  <div class="item-info-half">
+                    <label>笔画：</label>
+                    {{ data.hz_info[0].hzDetail.hz_json.medians.length }}
+                  </div>
+                </div>
+                <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>
+              </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="data.audio_file" v-if="data.audio_file" />
+                  <span v-if="dataConfig.wordPinyin">{{ data.pinyin }}</span>
+                </p>
+                <div class="hz-box" :style="{ margin: '8px 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-' + indexT + '-' + indexh + '-' + itemh.con"
+                    :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
+                    class="writeTop-item writeTop-item-small"
+                    v-for="(itemh, indexh) in data.hz_info"
+                    :key="indexh"
+                  />
+                </div>
+                <div class="item-info-row" :style="{ height: '48px' }">
+                  <div class="item-info-all">{{ data.info.definition }}</div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
         <div
           class="writeTop-row"
-          v-for="(itemR, indexR) in data"
+          v-for="(itemR, indexR) in data.list"
           :key="indexR"
           :style="{ marginBottom: dataConfig.marginBottom }"
         >
@@ -23,15 +117,7 @@
               borderColor: dataConfig.borderColor,
             }"
           >
-            <template
-              v-if="
-                itemI &&
-                itemI.con &&
-                !itemI.write &&
-                !itemI.answer &&
-                !itemI.miaoRed
-              "
-            >
+            <template v-if="itemI && itemI.con && !itemI.write && !itemI.answer && !itemI.miaoRed">
               <Strockplay
                 v-if="'writeTop-item-' + indexT + '-' + indexR + '-' + indexI"
                 className="adult-strockplay"
@@ -42,15 +128,7 @@
                 :palyWidth="dataConfig.playWidth"
                 :BoxbgType="dataConfig.BoxbgType"
                 :curItem="itemI.hzDetail"
-                :targetDiv="
-                  'writeTop-item-' +
-                  indexT +
-                  '-' +
-                  indexR +
-                  '-' +
-                  indexI +
-                  itemI.con
-                "
+                :targetDiv="'writeTop-item-' + indexT + '-' + indexR + '-' + indexI + itemI.con"
               />
             </template>
             <template v-else-if="itemI && itemI.answer">
@@ -62,24 +140,8 @@
                 :strokeNumber="itemI.answer"
                 :curItem="itemI.hzDetail"
                 :BoxbgType="dataConfig.BoxbgType"
-                :targetDiv="
-                  'write-item-miaohong-' +
-                  indexT +
-                  '-' +
-                  indexR +
-                  '-' +
-                  indexI +
-                  itemI.con
-                "
-                :targetDivGray="
-                  'write-item-miaohong-gray-' +
-                  indexT +
-                  '-' +
-                  indexR +
-                  '-' +
-                  indexI +
-                  itemI.con
-                "
+                :targetDiv="'write-item-miaohong-' + indexT + '-' + indexR + '-' + indexI + itemI.con"
+                :targetDivGray="'write-item-miaohong-gray-' + indexT + '-' + indexR + '-' + indexI + itemI.con"
               />
             </template>
             <template v-else-if="itemI && itemI.miaoRed">
@@ -92,22 +154,10 @@
                 :hanzicolor="dataConfig.miaoRedBgcolor"
                 :drawingColor="dataConfig.writeColor"
                 :BoxbgType="dataConfig.BoxbgType"
-                :targetDiv="
-                  'write-item-' +
-                  indexT +
-                  '-' +
-                  indexR +
-                  '-' +
-                  indexI +
-                  itemI.con
-                "
+                :targetDiv="'write-item-' + indexT + '-' + indexR + '-' + indexI + itemI.con"
               />
             </template>
-            <div
-              v-else-if="itemI"
-              class="tian-div"
-              @click="freeWrite(itemI, indexR, indexI)"
-            >
+            <div v-else-if="itemI" class="tian-div" @click="freeWrite(itemI, indexR, indexI)">
               <svg-icon
                 icon-class="tian"
                 className="tian"
@@ -120,18 +170,14 @@
                 v-if="dataConfig.BoxbgType == 1"
                 :style="{ color: '#DEDEDE' }"
               />
-              <img
-                v-if="itemI && itemI.strokes_image_url"
-                :src="itemI.strokes_image_url"
-                alt=""
-              />
+              <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>{{ indexT + 1 + "/" + dataConfig.result.length }}</b>
+        <b>{{ indexT + 1 + '/' + dataConfig.result.length }}</b>
         <a>www.chinesedu.com</a>
       </div>
     </div>
@@ -140,10 +186,14 @@
 
 <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 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引入的组件需要注入到对象中才能使用
@@ -152,6 +202,8 @@ export default {
     Strockplay,
     Strockred,
     FreewriteLettle,
+    UploadDrag,
+    AudioPlay,
   },
   //props: ["dataConfig", "data", "indexT", "totalNumber", "type", "none"],
   data() {
@@ -171,16 +223,16 @@ export default {
   //方法集合
   methods: {
     download2() {
-      document.getElementsByClassName("printTable")[0].style.zoom = 2;
+      document.getElementsByClassName('printTable')[0].style.zoom = 2;
       //执行window.print打印功能
       window.print();
       this.$message({
-        message: "操作成功",
-        type: "success",
+        message: '操作成功',
+        type: 'success',
       });
       this.$router.replace({
-        path: "/wordcard/cread",
-        query: { cachesType: "push" },
+        path: '/wordcard/cread',
+        query: { cachesType: 'push' },
       });
       return false;
     },
@@ -204,21 +256,68 @@ export default {
     },
     ExerciseChangeCurQue(answer, rowIndex, colIndex) {
       if (answer) {
-        this.data[rowIndex][colIndex].strokes_image_url =
-          answer.strokes_image_url;
+        this.data[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
         this.data[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);
+    },
+    handleDeleteImg() {
+      this.data.fileList = [];
+    },
+    initHanziwrite() {
+      let _this = this;
+      this.dataConfig.result.forEach((item, pageNumber) => {
+        if (item.hz_info && item.hz_info.length === 1) {
+          let node = document.getElementById(`character-target-info-div` + pageNumber);
+          if (node && node.children.length > 1) {
+            node.removeChild(node.children[1]);
+          }
+          //var ren = require("hanzi-writer-data/国");
+          _this.writer = HanziWriter.default.create(`character-target-info-div` + pageNumber, item.hz_info[0].con, {
+            width: 22,
+            height: 22,
+            padding: 0,
+            radicalColor: '#000000',
+            strokeColor: '#fff',
+          });
+        }
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
-    let writeTableData = localStorage.getItem("writeTableData");
+    let writeTableData = localStorage.getItem('writeTableData');
     if (writeTableData) {
       _this.dataConfig = JSON.parse(writeTableData);
+      if (_this.dataConfig) {
+        _this.dataConfig.result.forEach((item) => {
+          if (item.pinyin) {
+            let MethodName = 'tool-PinyinToVoiceFile';
+            let datas = {
+              pinyin: item.pinyin.split(' ').join(','),
+            };
+            getLogin(MethodName, datas).then((res) => {
+              if (res.status === 1) {
+                _this.$set(item, 'audio_file', res.file_id);
+              }
+            });
+          }
+        });
+        _this.$nextTick(() => {
+          _this.initHanziwrite();
+        });
+      }
       setTimeout(() => {
         _this.download2();
       }, 2000);
@@ -338,4 +437,100 @@ export default {
     }
   }
 }
+.writeTop-nopadding {
+  padding-top: 0;
+  height: 780px;
+}
+.item-info {
+  display: flex;
+  width: 100%;
+  padding: 16px 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;
+}
 </style>

src/views/wordcard/writeTable.vue

@@ -20,9 +20,9 @@
         <div class="item-info">
           <template v-if="data.hz_info.length === 1">
             <div class="item-info-left">
-              <p v-if="dataConfig.pinyin || dataConfig.wordVoice" class="voice-box">
+              <p v-if="dataConfig.wordPinyin || dataConfig.wordVoice" class="voice-box">
                 <AudioPlay :file-id="audio_file" v-if="audio_file" />
-                <span v-if="dataConfig.pinyin">{{ data.pinyin }}</span>
+                <span v-if="dataConfig.wordPinyin">{{ data.pinyin }}</span>
               </p>
               <div class="hz-box">
                 <Strockplay
@@ -44,7 +44,7 @@
               </div>
             </div>
             <div class="item-info-right">
-              <p class="voice-box" v-if="dataConfig.pinyin || dataConfig.wordVoice"></p>
+              <p class="voice-box" v-if="dataConfig.wordPinyin || dataConfig.wordVoice"></p>
 
               <div class="item-info-row">
                 <div class="item-info-half">
@@ -84,9 +84,9 @@
           </template>
           <template v-else>
             <div class="item-info-left item-info-left-long">
-              <p v-if="dataConfig.pinyin || dataConfig.wordVoice" class="voice-box">
+              <p v-if="dataConfig.wordPinyin || dataConfig.wordVoice" class="voice-box">
                 <AudioPlay :file-id="audio_file" v-if="audio_file" />
-                <span v-if="dataConfig.pinyin">{{ data.pinyin }}</span>
+                <span v-if="dataConfig.wordPinyin">{{ data.pinyin }}</span>
               </p>
               <div class="hz-box" :style="{ margin: '8px auto' }">
                 <Strockplay