Browse Source

【ID1005344】上传图片格式说明

chenrui 4 years ago
parent
commit
5c67ae7d49
1 changed files with 34 additions and 22 deletions
  1. 34 22
      src/views/shop/bannerSetting.vue

+ 34 - 22
src/views/shop/bannerSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false">
+  <a-card :bordered="false" class="bannerSetting-wrap">
     <div class="add">
       <a-button
         type="primary"
@@ -86,6 +86,7 @@
       @cancel="close"
       width="45%">
       <a-form
+        class="bannerSetting-form"
         id="components-form-demo-validate-other"
         :form="form"
         ref="form"
@@ -154,23 +155,19 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item label="上传图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-          <Upload
-            v-if="title != '查看详情'"
-            id="bannerSetting-photoPath"
-            v-decorator="[
-              'formData.image',
-              {
-                initialValue: formData.image,
-                rules: [{ required: true, message: '请上传轮播图!' }]
-              }
-            ]"
-            ref="bannerImage"
-            :fileSize="0.25"
-            :disabled="disabled"
-            @change="getbannerImage"
-            listType="picture-card"
-            upText="上传"
-          ></Upload>
+
+          <div v-if="title != '查看详情'">
+            <Upload
+              class="upload"
+              id="bannerSetting-photoPath"
+              v-decorator="[ 'formData.image', { initialValue: formData.image, rules: [{ required: true, message: '请上传轮播图!' }] } ]"
+              ref="bannerImage"
+              :fileSize="0.25"
+              :disabled="disabled"
+              @change="getbannerImage"
+              listType="picture-card" ></Upload>
+            <span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。</span>
+          </div>
           <img v-else :src="formData.image" style="max-width:400px ;height: auto;" />
         </a-form-item>
         <a-form-item label="备注" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
@@ -470,8 +467,23 @@ export default {
 }
 </script>
 
-<style scoped>
-.addBtn {
-  margin-bottom: 20px;
-}
+<style lang="less">
+  .bannerSetting-wrap{
+    .addBtn {
+      margin-bottom: 20px;
+    }
+  }
+  .bannerSetting-form{
+    .upload{
+      width: 100%!important;
+      margin-bottom: 10px;
+    }
+    /* 商品图片描述 */
+    .upload-desc{
+      display: block;
+      font-size: 12px;
+      color: #808695;
+      line-height: 1.5em;
+    }
+  }
 </style>