第一种模式完成

package.json

@@ -27,6 +27,7 @@
     "jspdf": "^2.5.1",
     "nprogress": "^0.2.0",
     "opencc-js": "^1.0.5",
+    "pinyin-pro": "^3.18.4",
     "script-loader": "^0.7.2",
     "tinymce": "^5.10.7",
     "tui-color-picker": "^2.2.8",

src/views/wordcard/AudioPlay.vue

@@ -89,8 +89,8 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 24px;
+    height: 24px;
     color: #fff;
     cursor: pointer;
     border-radius: 50%;

src/views/wordcard/UploadDrag.vue

@@ -10,6 +10,7 @@
       :limit="limit"
       :on-success="handleSuccess"
       :file-list="fileList"
+      :disabled="disabled"
     >
       <div class="plus-icon"><i class="el-icon-plus"></i></div>
       <div class="cn-tips">点击或拖拽图片到此上传</div>
@@ -35,6 +36,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {};

src/views/wordcard/cread.vue

@@ -153,6 +153,7 @@
               :totalNumber="writeTableData.result.length"
               :fontSize="from.fontSize"
               :audio_file_obj="writeTableData.audio_file_obj"
+              :is_preview="true"
             />
           </div>
         </div>

src/views/wordcard/writeTable.vue

@@ -6,6 +6,7 @@
           :fileList="data.fileList"
           @changeFillId="changeFillId"
           v-if="data.fileList.length === 0"
+          :disabled="is_preview"
         ></UploadDrag>
         <div class="item-image" v-else>
           <el-image
@@ -14,14 +15,14 @@
             :preview-src-list="[data.fileList[0].fileUrl]"
             fit="cover"
           />
-          <span class="item-image-del" @click="handleDeleteImg"><i class="el-icon-delete"></i></span>
+          <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="data.pinyin || dataConfig.wordVoice" class="voice-box">
+              <p v-if="dataConfig.pinyin || dataConfig.wordVoice" class="voice-box">
                 <AudioPlay :file-id="audio_file" v-if="audio_file" />
-                <span v-if="data.pinyin">{{ data.pinyin }}</span>
+                <span v-if="dataConfig.pinyin">{{ data.pinyin }}</span>
               </p>
               <div class="hz-box">
                 <Strockplay
@@ -43,7 +44,7 @@
               </div>
             </div>
             <div class="item-info-right">
-              <p class="voice-box" v-if="data.pinyin || data.wordVoice"></p>
+              <p class="voice-box" v-if="dataConfig.pinyin || dataConfig.wordVoice"></p>
 
               <div class="item-info-row">
                 <div class="item-info-half">
@@ -55,22 +56,39 @@
                   {{ data.hz_info[0].hzDetail.hz_json.medians.length }}
                 </div>
               </div>
-              <div class="item-info-row">
-                <el-input v-model="data.info.definition" placeholder="输入释义"></el-input>
-                <el-input v-model="data.info.collocation" placeholder="输入搭配"></el-input>
-              </div>
-              <div class="item-info-row">
-                <el-input v-model="data.info.exampleSent" placeholder="输入例句"></el-input>
-              </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="输入释义"></el-input>
+                  <el-input v-model="data.info.collocation" placeholder="输入搭配"></el-input>
+                </div>
+                <div class="item-info-row">
+                  <el-input v-model="data.info.exampleSent" placeholder="输入例句"></el-input>
+                </div>
+              </template>
             </div>
           </template>
           <template v-else>
             <div class="item-info-left item-info-left-long">
               <p v-if="dataConfig.pinyin || dataConfig.wordVoice" class="voice-box">
                 <AudioPlay :file-id="audio_file" v-if="audio_file" />
-                <span v-if="data.pinyin">{{ data.pinyin }}</span>
+                <span v-if="dataConfig.pinyin">{{ data.pinyin }}</span>
               </p>
-              <div class="hz-box">
+              <div class="hz-box" :style="{ margin: '8px auto' }">
                 <Strockplay
                   className="adult-strockplay"
                   :strokePlayColor="dataConfig.borderColor"
@@ -88,7 +106,12 @@
                   :key="indexh"
                 />
               </div>
-              <el-input type="textarea" v-model="data.info.definition" rows="2" placeholder="输入"></el-input>
+              <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="输入"></el-input>
             </div>
           </template>
         </div>
@@ -208,7 +231,17 @@ export default {
     UploadDrag,
     AudioPlay,
   },
-  props: ['dataConfig', 'data', 'pageNumber', 'totalNumber', 'type', 'none', 'fontSize', 'audio_file_obj'],
+  props: [
+    'dataConfig',
+    'data',
+    'pageNumber',
+    'totalNumber',
+    'type',
+    'none',
+    'fontSize',
+    'audio_file_obj',
+    'is_preview',
+  ],
   data() {
     //这里存放数据
     return {
@@ -228,7 +261,21 @@ export default {
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {},
+  watch: {
+    pageNumber: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            if (_this.data.hz_info && _this.data.hz_info.length === 1) {
+              _this.initHanziwrite();
+            }
+          });
+        }
+      },
+      deep: true,
+    },
+  },
   //方法集合
   methods: {
     changePraShow() {
@@ -260,7 +307,7 @@ export default {
       let obj = {
         name: file.name,
         fileId: file.file_id,
-        fileUrl: file.file_url,
+        fileUrl: file.file_url_open,
       };
       this.data.fileList.push(obj);
     },
@@ -436,18 +483,21 @@ export default {
         height: 32px;
       }
     }
-    .item-info-half {
+    .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;
-    margin: 8px auto;
   }
   .writeTop-item {
     border: 1px solid #de4444;