课文组件新增分词后上传小图片

src/views/book/courseware/create/components/question/article/CheckStyle.vue

@@ -92,12 +92,33 @@
         </div>
         <div class="match-info">
           <label>关联生词：</label>
-          <el-input v-model="itemActive.matchWords"></el-input>
+          <el-input
+            v-model="itemActive.matchWords"
+            placeholder="请输入生词表的“生词/短语”"
+            @blur="onBlur(itemActive, 'matchWords')"
+          ></el-input>
         </div>
         <div class="match-info">
           <label>关联注释：</label>
-          <el-input v-model="itemActive.matchNotes"></el-input>
+          <el-input
+            v-model="itemActive.matchNotes"
+            placeholder="请输入注释表的“内容”"
+            @blur="onBlur(itemActive, 'matchNotes')"
+          ></el-input>
         </div>
+        <el-upload
+          action="no"
+          accept="image/*,video/*"
+          :file-list="itemActive.img"
+          :http-request="handleImage"
+          :before-upload="handleBeforeImage"
+          :on-exceed="handleExceed"
+          :limit="1"
+          class="upload-resource"
+          v-if="data.type === 'article'"
+        >
+          <div class="remark-box"><i class="el-icon-upload"></i>上传图片</div>
+        </el-upload>
         <div class="btn-box">
           <el-button type="info" size="small" @click="cancleDialog">取消</el-button>
           <el-button type="primary" size="small" @click="surePinyin">保存</el-button>
@@ -109,7 +130,7 @@
 
 <script>
 // import { publicMethods, reparse } from '@/api/api';
-import th from 'element-ui/lib/locale/lang/th';
+import { fileUpload } from '@/api/app';
 
 export default {
   components: {},
@@ -151,6 +172,9 @@ export default {
     this.getArticleData();
   },
   methods: {
+    onBlur(item, field) {
+      item[field] = item[field] ? item[field].trim() : '';
+    },
     // 获取分析结果
     getArticleData() {
       this.loading = true;
@@ -255,6 +279,29 @@ export default {
         this.$set(this.itemActive, 'border', style.border);
       }
     },
+    // 处理超出图片个数操作
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
+      );
+    },
+    // 图片上传前处理
+    handleBeforeImage(file) {
+      // 判断文件是否为图片
+      if (!file.type.includes('image')) {
+        this.$message.error('请选择图片文件');
+        return false;
+      }
+    },
+    // 图片上传
+    handleImage(file) {
+      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
+        if (file_info_list.length > 0) {
+          this.itemActive.img = file_info_list;
+          this.itemActive.img[0].name = file_info_list[0].file_name;
+        }
+      });
+    },
   },
 };
 </script>
@@ -477,6 +524,23 @@ export default {
     width: 100px;
   }
 }
+
+.remark-box {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: 24px;
+  padding: 2px 12px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px; /* 166.667% */
+  color: #165dff;
+  cursor: pointer;
+  border: 1px solid #165dff;
+  border-radius: 2px;
+}
 </style>
 <style lang="scss">
 .check-article {

src/views/book/courseware/preview/components/article/NormalModelChs.vue

@@ -212,6 +212,14 @@
                                 "
                                 >{{ pItem.chs[wIndex] }}</span
                               >
+                              <img
+                                v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                                :src="pItem.img[0].file_url"
+                                :style="{
+                                  width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                }"
+                              />
                             </template>
                           </span>
                           <span
@@ -334,8 +342,19 @@
                                 pItem,
                               )
                             "
-                            >{{ item.wordsList[pIndex + 1].chs }}</span
-                          >
+                            >{{ item.wordsList[pIndex + 1].chs
+                            }}<img
+                              v-if="
+                                item.wordsList[pIndex + 1].img &&
+                                item.wordsList[pIndex + 1].img.length > 0 &&
+                                item.wordsList[pIndex + 1].imgPosition === 'after'
+                              "
+                              :src="item.wordsList[pIndex + 1].img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             :class="[
@@ -468,8 +487,19 @@
                                 pItem,
                               )
                             "
-                            >{{ item.wordsList[pIndex + 2].chs }}</span
-                          >
+                            >{{ item.wordsList[pIndex + 2].chs
+                            }}<img
+                              v-if="
+                                item.wordsList[pIndex + 2].img &&
+                                item.wordsList[pIndex + 2].img.length > 0 &&
+                                item.wordsList[pIndex + 2].imgPosition === 'after'
+                              "
+                              :src="item.wordsList[pIndex + 2].img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             :class="[
@@ -596,8 +626,15 @@
                                   pItem,
                                 )
                               "
-                              >{{ pItem.chs[wIndex] }}</span
-                            >
+                              >{{ pItem.chs[wIndex]
+                              }}<img
+                                v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                                :src="pItem.img[0].file_url"
+                                :style="{
+                                  width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                }"
+                            /></span>
                           </template>
                         </span>
                         <span

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -169,8 +169,14 @@
                               }"
                               @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                               >{{ pItem.chs[wIndex] }}</span
-                            ></span
-                          >
+                            ><img
+                              v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                              :src="pItem.img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             :class="[
@@ -238,8 +244,19 @@
                                 item.wordsList[pIndex + 1],
                               )
                             "
-                            >{{ item.wordsList[pIndex + 1].chs }}</span
-                          >
+                            >{{ item.wordsList[pIndex + 1].chs }}
+                            <img
+                              v-if="
+                                item.wordsList[pIndex + 1].img &&
+                                item.wordsList[pIndex + 1].img.length > 0 &&
+                                item.wordsList[pIndex + 1].imgPosition === 'after'
+                              "
+                              :src="item.wordsList[pIndex + 1].img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             :class="[
@@ -322,8 +339,19 @@
                                 item.wordsList[pIndex + 2],
                               )
                             "
-                            >{{ item.wordsList[pIndex + 2].chs }}</span
-                          >
+                            >{{ item.wordsList[pIndex + 2].chs
+                            }}<img
+                              v-if="
+                                item.wordsList[pIndex + 2].img &&
+                                item.wordsList[pIndex + 2].img.length > 0 &&
+                                item.wordsList[pIndex + 2].imgPosition === 'after'
+                              "
+                              :src="item.wordsList[pIndex + 2].img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             :class="[
@@ -413,8 +441,16 @@
                             }"
                             @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                             >{{ pItem.chs[wIndex] }}</span
-                          ></span
-                        >
+                          >
+                          <img
+                            v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                            :src="pItem.img[0].file_url"
+                            :style="{
+                              width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            }"
+                          />
+                        </span>
                         <span
                           v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                           class="NNPE-pinyin"

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -168,6 +168,14 @@
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                           >
                         </template>
+                        <img
+                          v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                          :src="pItem.img[0].file_url"
+                          :style="{
+                            width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                          }"
+                        />
                       </span>
                       <template v-if="curQue.property.pinyin_position == 'bottom'">
                         <span
@@ -248,6 +256,18 @@
                               : ''
                           }}</span
                         >
+                        <img
+                          v-if="
+                            item.sentArr[pIndex + 1].img &&
+                            item.sentArr[pIndex + 1].img.length > 0 &&
+                            item.sentArr[pIndex + 1].imgPosition === 'after'
+                          "
+                          :src="item.sentArr[pIndex + 1].img[0].file_url"
+                          :style="{
+                            width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                          }"
+                        />
                       </span>
                       <template v-if="curQue.property.pinyin_position == 'bottom'">
                         <span
@@ -339,6 +359,18 @@
                               : ''
                           }}</span
                         >
+                        <img
+                          v-if="
+                            item.sentArr[pIndex + 2].img &&
+                            item.sentArr[pIndex + 2].img.length > 0 &&
+                            item.sentArr[pIndex + 2].imgPosition === 'after'
+                          "
+                          :src="item.sentArr[pIndex + 2].img[0].file_url"
+                          :style="{
+                            width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                          }"
+                        />
                       </span>
                       <template v-if="curQue.property.pinyin_position == 'bottom'">
                         <span
@@ -424,9 +456,17 @@
                                 ? attrib.topic_color
                                 : pItem.config.color,
                           }"
-                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
-                        >
+                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}
+                        </span>
                       </template>
+                      <img
+                        v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                        :src="pItem.img[0].file_url"
+                        :style="{
+                          width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                          height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                        }"
+                      />
                     </span>
                     <template v-if="curQue.property.pinyin_position == 'bottom'">
                       <span

src/views/book/courseware/preview/components/article/Voicefullscreen.vue

@@ -111,6 +111,14 @@
                             >{{ pItem.chs[wIndex] }}</span
                           >
                         </template>
+                        <img
+                          v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                          :src="pItem.img[0].file_url"
+                          :style="{
+                            width: hzSize + 'px',
+                            height: hzSize + 'px',
+                          }"
+                        />
                       </span>
                       <template v-if="curQue.property.pinyin_position == 'bottom'">
                         <span
@@ -197,6 +205,18 @@
                           }"
                           >{{ item[pIndex + 1].chs }}</span
                         >
+                        <img
+                          v-if="
+                            item[pIndex + 1].img &&
+                            item[pIndex + 1].img.length > 0 &&
+                            item[pIndex + 1].imgPosition === 'after'
+                          "
+                          :src="item[pIndex + 1].img[0].file_url"
+                          :style="{
+                            width: hzSize + 'px',
+                            height: hzSize + 'px',
+                          }"
+                        />
                       </span>
                       <template v-if="curQue.property.pinyin_position == 'bottom'">
                         <span
@@ -287,6 +307,18 @@
                           }"
                           >{{ item[pIndex + 2].chs }}</span
                         >
+                        <img
+                          v-if="
+                            item[pIndex + 2].img &&
+                            item[pIndex + 2].img.length > 0 &&
+                            item[pIndex + 2].imgPosition === 'after'
+                          "
+                          :src="item[pIndex + 2].img[0].file_url"
+                          :style="{
+                            width: hzSize + 'px',
+                            height: hzSize + 'px',
+                          }"
+                        />
                       </span>
                       <template v-if="curQue.property.pinyin_position == 'bottom'">
                         <span
@@ -371,6 +403,14 @@
                           >{{ pItem.chs[wIndex] }}</span
                         >
                       </template>
+                      <img
+                        v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                        :src="pItem.img[0].file_url"
+                        :style="{
+                          width: hzSize + 'px',
+                          height: hzSize + 'px',
+                        }"
+                      />
                     </span>
                     <template v-if="curQue.property.pinyin_position == 'bottom'">
                       <span

src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -148,8 +148,15 @@
                                   ? attrib.assist_color
                                   : '',
                             }"
-                            >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
-                          >
+                            >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : ''
+                            }}<img
+                              v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                              :src="pItem.img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             class="NNPE-pinyin"
@@ -219,8 +226,18 @@
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].chs
                                 : ''
-                            }}</span
-                          >
+                            }}<img
+                              v-if="
+                                item.wordsList[pIndex + 1].img &&
+                                item.wordsList[pIndex + 1].img.length > 0 &&
+                                item.wordsList[pIndex + 1].imgPosition === 'after'
+                              "
+                              :src="item.wordsList[pIndex + 1].img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             class="NNPE-pinyin"
@@ -313,8 +330,18 @@
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].chs
                                 : ''
-                            }}</span
-                          >
+                            }}<img
+                              v-if="
+                                item.wordsList[pIndex + 2].img &&
+                                item.wordsList[pIndex + 2].img.length > 0 &&
+                                item.wordsList[pIndex + 2].imgPosition === 'after'
+                              "
+                              :src="item.wordsList[pIndex + 2].img[0].file_url"
+                              :style="{
+                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              }"
+                          /></span>
                           <span
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             :class="[
@@ -386,8 +413,15 @@
                                 : '',
                           }"
                           @click="showWordDetail($event, pItem)"
-                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
-                        >
+                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : ''
+                          }}<img
+                            v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                            :src="pItem.img[0].file_url"
+                            :style="{
+                              width: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            }"
+                        /></span>
                         <span
                           v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                           class="NNPE-pinyin"