课文组件新增段落图片

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

@@ -24,6 +24,7 @@
           <el-upload
             action="no"
             accept="image/*,video/*"
+            :file-list="item.sourceList"
             :http-request="handleImage"
             :before-upload="handleBeforeImage"
             :on-exceed="handleExceed"
@@ -275,14 +276,10 @@ export default {
     handleImage(file) {
       fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
         if (file_info_list.length > 0) {
-          const { file_id, file_url_open, type } = file_info_list[0];
-          this.activeItem.sourceList = [
-            {
-              file_id,
-              file_url_open,
-              type,
-            },
-          ];
+          this.activeItem.sourceList = file_info_list;
+          this.activeItem.sourceList[0].name = file_info_list[0].file_name;
+          this.activeItem.sourceList[0].type = file.file.type.includes('image') > -1 ? 'image' : 'video';
+          console.log(this.activeItem.sourceList);
         }
       });
     },

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

@@ -68,7 +68,21 @@
                 isHasRemark ? 'hasRemark' : '',
               ]"
             >
-              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
+              <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'before'">
+                <img
+                  v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
+                  :src="item.sourceList[0].file_url_open"
+                />
+                <video
+                  :src="item.sourceList[0].file_url_open"
+                  width="100%"
+                  height="400"
+                  controls
+                  controlsList="nodownload"
+                  v-else
+                ></video>
+              </template>
+
               <div :class="[item.isTitle ? 'NNPE-title' : '', 'para-' + item.paraAlign]">
                 <div
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -611,7 +625,20 @@
                     : ''
                 }}
               </div>
-              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
+              <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'after'">
+                <img
+                  v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
+                  :src="item.sourceList[0].file_url_open"
+                />
+                <video
+                  :src="item.sourceList[0].file_url_open"
+                  width="100%"
+                  height="400"
+                  controls
+                  controlsList="nodownload"
+                  v-else
+                ></video>
+              </template>
             </div>
             <div v-if="item.remarkDetail" :class="['remarkBox', 'remark-top-8']">
               <RemarkChs :remark-detail="item.remarkDetail" :margin-top="8" />
@@ -622,7 +649,7 @@
     </template>
     <template v-else>
       <template v-if="resObj">
-        <!-- 段落对齐方式和备注在此模式里没有写，如果段落里添加了英文后需要在此添加段落对齐和备注 -->
+        <!-- 段落对齐方式和备注在此模式里没有写，如果段落里添加了英文后需要在此添加段落对齐和备注、大小图片、生词样式 -->
         <div class="NPC-sentences-list">
           <div
             v-for="(item, index) in resObj.sentList"
@@ -1424,6 +1451,8 @@ export default {
           enwords: dItem.sentencesEn ? dItem.sentencesEn : [],
           paraAlign: dItem.paraAlign,
           remarkDetail,
+          sourceList: dItem.sourceList ? dItem.sourceList : [],
+          sourcePosition: dItem.sourcePosition,
         };
         resArr.push(paraObj);
       });
@@ -1473,6 +1502,8 @@ export default {
             sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
             paraAlign: dItem.paraAlign,
+            sourceList: dItem.sourceList ? dItem.sourceList : [],
+            sourcePosition: dItem.sourcePosition,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1881,15 +1912,16 @@ export default {
       > img {
         display: block;
         max-width: 100%;
-        margin: 8px auto;
+        margin: 0 auto;
       }
     }
 
     .article-content {
       box-sizing: border-box;
-      display: flex;
-      align-items: flex-start;
-      justify-content: flex-start;
+
+      // display: flex;
+      // align-items: flex-start;
+      // justify-content: flex-start;
       width: 100%;
 
       &.hasRemark {

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

@@ -70,7 +70,20 @@
                 isHasRemark ? 'hasRemark' : '',
               ]"
             >
-              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
+              <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'before'">
+                <img
+                  v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
+                  :src="item.sourceList[0].file_url_open"
+                />
+                <video
+                  :src="item.sourceList[0].file_url_open"
+                  width="100%"
+                  height="400"
+                  controls
+                  controlsList="nodownload"
+                  v-else
+                ></video>
+              </template>
               <div :class="['para-' + item.paraAlign]">
                 <div
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -416,7 +429,20 @@
                     : ''
                 }}
               </div>
-              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
+              <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'after'">
+                <img
+                  v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
+                  :src="item.sourceList[0].file_url_open"
+                />
+                <video
+                  :src="item.sourceList[0].file_url_open"
+                  width="100%"
+                  height="400"
+                  controls
+                  controlsList="nodownload"
+                  v-else
+                ></video>
+              </template>
             </div>
             <div v-if="item.remarkDetail" :class="['remarkBox', 'remark-top-8']">
               <RemarkChs :remark-detail="item.remarkDetail" :margin-top="8" />
@@ -1141,6 +1167,8 @@ export default {
           isTitle: dItem.isTitle,
           paraAlign: dItem.paraAlign,
           remarkDetail,
+          sourceList: dItem.sourceList ? dItem.sourceList : [],
+          sourcePosition: dItem.sourcePosition,
         };
         resArr.push(paraObj);
       });
@@ -1193,6 +1221,8 @@ export default {
             sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
             paraAlign: dItem.paraAlign,
+            sourceList: dItem.sourceList ? dItem.sourceList : [],
+            sourcePosition: dItem.sourcePosition,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1782,9 +1812,10 @@ export default {
 
   .article-content {
     box-sizing: border-box;
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
+
+    // display: flex;
+    // align-items: flex-start;
+    // justify-content: flex-start;
     width: 100%;
 
     &.hasRemark {

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

@@ -64,7 +64,20 @@
                   : '',
               ]"
             >
-              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
+              <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'before'">
+                <img
+                  v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
+                  :src="item.sourceList[0].file_url_open"
+                />
+                <video
+                  :src="item.sourceList[0].file_url_open"
+                  width="100%"
+                  height="400"
+                  controls
+                  controlsList="nodownload"
+                  v-else
+                ></video>
+              </template>
               <div :class="['para-' + item.paraAlign]">
                 <div
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -397,7 +410,20 @@
                     : ''
                 }}
               </div>
-              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
+              <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'after'">
+                <img
+                  v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
+                  :src="item.sourceList[0].file_url_open"
+                />
+                <video
+                  :src="item.sourceList[0].file_url_open"
+                  width="100%"
+                  height="400"
+                  controls
+                  controlsList="nodownload"
+                  v-else
+                ></video>
+              </template>
             </div>
           </div>
           <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
@@ -1028,6 +1054,8 @@ export default {
           dhaspinyin,
           isTitle: dItem.isTitle,
           paraAlign: dItem.paraAlign,
+          sourceList: dItem.sourceList ? dItem.sourceList : [],
+          sourcePosition: dItem.sourcePosition,
         };
         resArr.push(paraObj);
       });
@@ -1076,6 +1104,8 @@ export default {
             sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
             paraAlign: dItem.paraAlign,
+            sourceList: dItem.sourceList ? dItem.sourceList : [],
+            sourcePosition: dItem.sourcePosition,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);

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

@@ -1419,7 +1419,8 @@ export default {
 
       > img {
         display: block;
-        width: 100%;
+        max-width: 100%;
+        margin: 0 auto;
       }
     }
   }

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

@@ -1403,7 +1403,8 @@ export default {
 
       > img {
         display: block;
-        width: 100%;
+        max-width: 100%;
+        margin: 0 auto;
       }
     }
   }

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

@@ -1258,6 +1258,7 @@ export default {
       > img {
         display: block;
         max-width: 100%;
+        margin: 0 auto;
       }
     }
   }