Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

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

@@ -21,17 +21,20 @@
             </el-radio-group>
           </div>
           <div class="remark-box" @click="showRemark(index)"><SvgIcon icon-class="edit-line" />添加备注</div>
-          <!-- <el-upload
+          <el-upload
             action="no"
             accept="image/*,video/*"
+            :file-list="item.sourceList"
             :http-request="handleImage"
             :before-upload="handleBeforeImage"
             :on-exceed="handleExceed"
             :limit="1"
             :key="index"
+            @click.native="handleItem(index)"
+            class="upload-resource"
           >
-            <span>上传图片/视频</span>
-          </el-upload> -->
+            <div class="remark-box"><i class="el-icon-upload"></i>上传图片/视频</div>
+          </el-upload>
         </template>
         <div v-for="(items, indexs) in item.sentenceStr" :key="indexs + 'words'" class="sentence-box">
           <div class="sentence">
@@ -188,6 +191,7 @@ export default {
       showStyleFlag: false,
       remarkVisible: false,
       remark: null,
+      activeItem: null,
     };
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -256,9 +260,12 @@ export default {
         `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
       );
     },
+    // 记录段落
+    handleItem(index) {
+      this.activeItem = this.data.detail[index];
+    },
     // 图片上传前处理
-    handleBeforeImage(file, index) {
-      console.log(index);
+    handleBeforeImage(file) {
       // 判断文件是否为图片
       if (!file.type.includes('image') && !file.type.includes('video')) {
         this.$message.error('请选择图片或视频文件');
@@ -266,11 +273,13 @@ export default {
       }
     },
     // 图片上传
-    handleImage(file, index) {
+    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];
-          console.log(index);
+          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);
         }
       });
     },
@@ -415,4 +424,8 @@ export default {
   border: 1px solid #165dff;
   border-radius: 2px;
 }
+
+.upload-resource {
+  text-align: left;
+}
 </style>

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"
@@ -1355,7 +1382,7 @@ export default {
           this.isHasRemark = true;
         }
         let paraArr = [];
-        if (!dItem.isTitle) {
+        if (dItem.paraAlign !== 'center') {
           paraArr = [
             {
               pinyin: '',
@@ -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);
@@ -1685,12 +1716,14 @@ export default {
       display: flex;
       flex-flow: wrap;
       justify-content: center;
+      width: 100%;
     }
 
     .para-right {
       display: flex;
       flex-flow: wrap;
       justify-content: end;
+      width: 100%;
     }
 
     .NNPE-words {
@@ -1879,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" />
@@ -1075,7 +1101,7 @@ export default {
         }
 
         let paraArr = [];
-        if (!dItem.isTitle) {
+        if (dItem.paraAlign !== 'center') {
           paraArr = [
             {
               pinyin: '',
@@ -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);
@@ -1626,12 +1656,14 @@ export default {
       display: flex;
       flex-flow: wrap;
       justify-content: center;
+      width: 100%;
     }
 
     .para-right {
       display: flex;
       flex-flow: wrap;
       justify-content: end;
+      width: 100%;
     }
 
     .NNPE-words {
@@ -1780,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">
@@ -972,7 +998,7 @@ export default {
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let paraArr = [];
-        if (!dItem.isTitle) {
+        if (dItem.paraAlign !== 'center') {
           paraArr = [
             {
               pinyin: '',
@@ -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);
@@ -1295,12 +1325,14 @@ export default {
       display: flex;
       flex-flow: wrap;
       justify-content: center;
+      width: 100%;
     }
 
     .para-right {
       display: flex;
       flex-flow: wrap;
       justify-content: end;
+      width: 100%;
     }
 
     .NNPE-words {

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;
       }
     }
   }