添加爱心互助banner图上传

epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss

@@ -86,7 +86,7 @@
 	}
 
 	.mw-show {
-		padding: 40px 0 100px;
+		padding-top: 40px;
 		&.z-preview {
 			position: fixed;
 			z-index: 100000;
@@ -108,7 +108,7 @@
 			}
 
 			.mw-phone {
-				margin: 50px auto;
+        margin: 50px auto;
 				min-height: 540px;
 				// box-shadow: 0 0 0 8px rgba(#000, 0.1);
 				.d-cpt-operate {
@@ -129,7 +129,8 @@
 			position: relative;
 			margin: 0 auto;
 			width: 375px;
-			min-height: 500px;
+      height: 560px;
+      overflow: auto;
 			background-color: #ffffff;
 			background-color: #f7f6f9;
 			box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);
@@ -232,16 +233,16 @@
 					position: absolute;
 					top: -1000px;
 					bottom: -1000px;
-					right: -50px;
+					right: 0px;
 					width: 50px;
 					padding: 5px 0;
 					height: 200px;
 					margin: auto 0;
 					border-radius: 0 4px 4px 0;
-					border-left: 1px solid #bb5;
+					border: 1px solid #bb5;
 					background-color: #ffffff;
 					text-align: center;
-
+          z-index: 1000;
 					&.z-small {
 						height: 71px;
 					}
@@ -1138,3 +1139,25 @@
     }
 	}
 }
+
+.d-set-banners {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  .upload-demos {
+    display: block;
+    width: 20px;
+    height: 20px;
+    color: #ccc;
+    text-align: center;
+    line-height: 18px;
+    border: 1px dashed #ccc;
+    overflow: hidden;
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+}
+}

epmet-oper-web/src/views/modules/customer/customize/MiniHome.vue

@@ -179,6 +179,19 @@
                   <img src="@/assets/img/modules/wx-mini/index-set/info.png">
                   <span>{{ focusedCpt.configurationDescription }}</span>
                 </div>
+
+                <div class="d-set-banners">
+                  <span>Banner图</span>
+                  <el-upload
+                    class="upload-demos"
+                    :show-file-list="false"
+                    :on-success="handleBannerSuccess"
+                    :before-upload="beforeBannerUpload"
+                    :action="uploadUlr"
+                    >
+                    <i class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </div>
               </el-form>
 
               <div class="d-operate">
@@ -512,7 +525,8 @@ export default {
       lastSavedCptList: [],
       focusedCpt: {
         tempOnlyId: ''
-      }
+      },
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/customerlogo/upload'
     }
   },
 
@@ -893,6 +907,32 @@ export default {
       if (loading) {
         loading.close()
       }
+    },
+    // 上传爱心互助banner图
+    beforeBannerUpload (file) {
+      console.log('file', file.size / 1024)
+      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const imgs = ['png', 'PNG']
+      const extension = imgs.includes(testmsg)
+      const isLt2M = file.size / 1024 < 100
+
+      if (!extension) {
+        this.$message.error('上传图片只能是png格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 100KB!')
+      }
+      return extension && isLt2M
+    },
+    handleBannerSuccess (res, file) {
+      console.log('res', res)
+      console.log('files', file)
+      if (res.code === 0 && res.msg === 'success') {
+        this.focusedCpt.configuration = {
+          url: res.data.url
+        }
+        this.focusedCpt.configuration = JSON.stringify(this.focusedCpt.configuration)
+      }
     }
   }
 }

epmet-oper-web/src/views/modules/productConfig/homeCustom/index.vue

@@ -188,6 +188,19 @@
                   <img src="@/assets/img/modules/wx-mini/index-set/info.png">
                   <span>{{ focusedCpt.configurationDescription }}</span>
                 </div>
+                <div class="d-set-banners">
+                  <span>Banner图</span>
+                  <el-upload
+                    class="upload-demos"
+                    :show-file-list="false"
+                    :on-success="handleBannerSuccess"
+                    :before-upload="beforeBannerUpload"
+                    :action="uploadUlr"
+                    >
+                    <i class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </div>
+
               </el-form>
 
               <div class="d-operate">
@@ -519,7 +532,8 @@ export default {
       lastSavedCptList: [],
       focusedCpt: {
         tempOnlyId: ''
-      }
+      },
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/customerlogo/upload'
     }
   },
 
@@ -820,7 +834,7 @@ export default {
     },
     // 聚焦实例组件
     focusCpt (item) {
-      console.log('聚焦实例组件')
+      console.log('聚焦实例组件', item)
       if (this.isInPreview) return
       if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
         this.cleanFocusCpt()
@@ -870,6 +884,32 @@ export default {
     // 改变可用列表组件展开与收起
     shiftCptTypeItemUnfold (item) {
       item.isUnfold = !item.isUnfold
+    },
+    // 上传爱心互助banner图
+    beforeBannerUpload (file) {
+      console.log('file', file.size / 1024)
+      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const imgs = ['png', 'PNG']
+      const extension = imgs.includes(testmsg)
+      const isLt2M = file.size / 1024 < 100
+
+      if (!extension) {
+        this.$message.error('上传图片只能是png格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 100KB!')
+      }
+      return extension && isLt2M
+    },
+    handleBannerSuccess (res, file) {
+      console.log('res', res)
+      console.log('files', file)
+      if (res.code === 0 && res.msg === 'success') {
+        this.focusedCpt.configuration = {
+          url: res.data.url
+        }
+        this.focusedCpt.configuration = JSON.stringify(this.focusedCpt.configuration)
+      }
     }
   }
 }