no message

src/views/setting/agreement/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="app-container">
+    <!-- tradeContent -->
+
     <div class="title">用户协议</div>
     <el-form ref="mainForm" label-width="80px" label-position="top">
       <el-form-item label="" prop="content1">
@@ -78,6 +80,32 @@
 		  </el-form-item>
 		</el-form>
 
+    <div class="title">以旧换新协议</div>
+		<el-form ref="mainForm" label-width="80px" label-position="top">
+		  <el-form-item label="" prop="content4">
+		    <el-upload
+		      ref="imageListUpload4"
+		      class="avatar-uploader4"
+		      :action="baseURL + 'common/upload'"
+		      :headers="myHeaders"
+		      multiple
+		      name="file"
+		      :show-file-list="false"
+		      :on-success="uploadSuccess4"
+		      :on-error="uploadError4"
+		      :before-upload="beforeUpload4">
+		    </el-upload>
+		    <!--富文本编辑器组件-->
+		    <el-row v-loading="quillImgLoading4">
+		      <quill-editor
+		        v-model="mainForm.content4"
+		        ref="myQuillEditor4"
+		        :options="editorOption4">
+		      </quill-editor>
+		    </el-row>
+		  </el-form-item>
+		</el-form>
+
     <div class="page-footer">
       <div class="footer" :class="classObj">
         <el-button type="primary" @click="submitForm" :loading="formLoading">{{ formLoading ? '保存中 ...' : '保 存' }}</el-button>
@@ -169,26 +197,47 @@ export default {
       },
       editorImages2: [],
 			
-	  quillImgLoading3: false, // 富文本上传图片loading
-	  editorOption3: { // 富文本配置
-	    placeholder: '请输入公共内容',
-	    theme: 'snow',
-	    modules: {
-	      toolbar: {
-	        container: toolbarOptions,
-	        handlers: {
-	          'image': function (value) {
-	            if (value) {
-	              document.querySelector('.avatar-uploader3 input').click()
-	            } else {
-	              this.quill.format('image', false);
-	            }
-	          }
-	        }
-	      }
-	    }
-	  },
-	  editorImages3: [],
+      quillImgLoading3: false, // 富文本上传图片loading
+      editorOption3: { // 富文本配置
+        placeholder: '请输入公共内容',
+        theme: 'snow',
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              'image': function (value) {
+                if (value) {
+                  document.querySelector('.avatar-uploader3 input').click()
+                } else {
+                  this.quill.format('image', false);
+                }
+              }
+            }
+          }
+        }
+      },
+      editorImages3: [],
+
+      quillImgLoading4: false, // 富文本上传图片loading
+      editorOption4: { // 富文本配置
+        placeholder: '请输入公共内容',
+        theme: 'snow',
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              'image': function (value) {
+                if (value) {
+                  document.querySelector('.avatar-uploader4 input').click()
+                } else {
+                  this.quill.format('image', false);
+                }
+              }
+            }
+          }
+        }
+      },
+      editorImages4: [],
 
       formLoading: false,
     }
@@ -216,7 +265,8 @@ export default {
         this.mainForm = {
           content1: res.data.userAgreementContent,
           content2: res.data.privacyStatementContent,
-		  content3: res.data.serviceContent,
+		      content3: res.data.serviceContent,
+		      content4: res.data.tradeContent,
         }
       })
     },
@@ -227,7 +277,8 @@ export default {
         companyWechatId: JSON.parse(localStorage.getItem("greemall_user")).companyWechatId,
         userAgreementContent: this.mainForm.content1,
         privacyStatementContent: this.mainForm.content2,
-		serviceContent: this.mainForm.content3,
+		    serviceContent: this.mainForm.content3,
+        tradeContent: this.mainForm.content4,
       }).then(res => {
         this.formLoading = false;
         this.$successMsg('编辑成功');
@@ -246,7 +297,6 @@ export default {
 
     // 富文本图片上传成功
     uploadSuccess1(res, file, fileList) {
-      console.log(fileList);
       fileList.forEach(item => {
         if(this.editorImages1.indexOf(item.response.data.url) < 0) {
           this.editorImages1.push(item.response.data.url);
@@ -319,45 +369,83 @@ export default {
       this.$errorMsg('图片插入失败');
     },
 	
-	// 富文本图片上传前
-	beforeUpload3() {
-	  this.quillImgLoading3 = true;
-	},
-	
-	// 富文本图片上传成功
-	uploadSuccess3(res, file, fileList) {
-	  console.log(fileList);
-	  fileList.forEach(item => {
-	    if(this.editorImages3.indexOf(item.response.data.url) < 0) {
-	      this.editorImages3.push(item.response.data.url);
-	    }
-	  })
-	  this.showImage3()
-	  this.quillImgLoading3 = false;
-	},
-	
-	showImage3() {
-	  console.log(this.editorImages3);
-	  let quill = this.$refs.myQuillEditor3.quill;
-	  this.editorImages3.forEach(item => {
-	    // 获取光标所在位置
-	    let length = quill.getSelection().index;
-	    // 插入图片  res.info为服务器返回的图片地址
-	    console.log(item);
-	    quill.insertEmbed(length, 'image', item);
-	    // this.$refs.imageListUpload2.clearFiles()
-	    // 调整光标到最后
-	    quill.setSelection(length + 1);
-	  })
-	  this.editorImages3 = [];
-	  this.$refs.imageListUpload3.clearFiles();
-	},
-	
-	// 富文本图片上传失败
-	uploadError3() {
-	  this.quillImgLoading3 = false;
-	  this.$errorMsg('图片插入失败');
-	},
+    // 富文本图片上传前
+    beforeUpload3() {
+      this.quillImgLoading3 = true;
+    },
+    
+    // 富文本图片上传成功
+    uploadSuccess3(res, file, fileList) {
+      console.log(fileList);
+      fileList.forEach(item => {
+        if(this.editorImages3.indexOf(item.response.data.url) < 0) {
+          this.editorImages3.push(item.response.data.url);
+        }
+      })
+      this.showImage3()
+      this.quillImgLoading3 = false;
+    },
+    
+    showImage3() {
+      console.log(this.editorImages3);
+      let quill = this.$refs.myQuillEditor3.quill;
+      this.editorImages3.forEach(item => {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.info为服务器返回的图片地址
+        console.log(item);
+        quill.insertEmbed(length, 'image', item);
+        // this.$refs.imageListUpload2.clearFiles()
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      })
+      this.editorImages3 = [];
+      this.$refs.imageListUpload3.clearFiles();
+    },
+    
+    // 富文本图片上传失败
+    uploadError3() {
+      this.quillImgLoading3 = false;
+      this.$errorMsg('图片插入失败');
+    },
+
+
+    // ----------
+    // 富文本图片上传前
+    beforeUpload4() {
+      this.quillImgLoading4 = true;
+    },
+    
+    // 富文本图片上传成功
+    uploadSuccess4(res, file, fileList) {
+      fileList.forEach(item => {
+        if(this.editorImages4.indexOf(item.response.data.url) < 0) {
+          this.editorImages4.push(item.response.data.url);
+        }
+      })
+      this.showImage4()
+      this.quillImgLoading4 = false;
+    },
+    
+    showImage4() {
+      let quill = this.$refs.myQuillEditor4.quill;
+      this.editorImages4.forEach(item => {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        quill.insertEmbed(length, 'image', item);
+        // this.$refs.imageListUpload2.clearFiles()
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      })
+      this.editorImages4 = [];
+      this.$refs.imageListUpload4.clearFiles();
+    },
+    
+    // 富文本图片上传失败
+    uploadError4() {
+      this.quillImgLoading4 = false;
+      this.$errorMsg('图片插入失败');
+    },
   }
 }
 </script>