图片选择 优化

src/components/PicLib/index.vue

@@ -29,7 +29,7 @@
         </el-row>
         <el-row
             :gutter="24"
-            class="mgt-20 mgb-20"
+            class="mgt-20 mgb-20 pics-wrap"
         >
             <el-col :span="4">
                 <div class="img-box uploader-box">

src/views/ad/edit.vue

@@ -80,42 +80,43 @@
           size="mini"
           @click="selectAllLocation"
         >选择所有位置</el-button>
+        <el-button
+          size="mini"
+          @click="deselectAllLocation"
+        >清空</el-button>
       </el-form-item>
       <el-form-item
         label="广告头像"
         prop="ad_image"
         class="uploader-box"
       >
-        <el-upload
-          class="uploader"
-          :action="uploadUrl"
-          name="image-file"
-          :on-success="uploadSuccess"
-          :on-error="uploadErr"
-          :disabled="true"
-          :show-file-list="false"
-          :before-upload="beforeUpload"
-        >
-          <img
-            v-if="adForm.ad_image"
-            :src="adForm.ad_image"
-            class="uploader-img"
+        <div @click="openModal">
+          <el-upload
+            class="uploader"
+            :action="uploadUrl"
+            name="image-file"
+            :on-success="uploadSuccess"
+            :on-error="uploadErr"
+            :disabled="true"
+            :show-file-list="false"
+            :before-upload="beforeUpload"
           >
-          <i
-            v-else
-            class="el-icon-plus uploader-icon"
-          />
-        </el-upload>
+            <img
+              v-if="adForm.ad_image"
+              :src="adForm.ad_image"
+              class="uploader-img"
+            >
+            <i
+              v-else
+              class="el-icon-plus uploader-icon"
+            />
+          </el-upload>
+        </div>
+
         <span
           class="ipt-tip"
           style="margin-top: 6px;"
         >只能上传小于 600k 的图片</span>
-        <el-button
-          type="primary"
-          size="mini"
-          @click="openModal"
-          :disabled="!writeable"
-        >选择图片</el-button>
       </el-form-item>
       <el-form-item
         label="是否跳转"
@@ -788,6 +789,9 @@ export default {
       })
       this.adForm.locationid = locs
     },
+    deselectAllLocation() {
+      this.adForm.locationid = []
+    },
     // modal
     openModal() {
       this.modalVisible = true
@@ -815,5 +819,9 @@ export default {
 .scrollbar >>> .el-scrollbar__bar.is-horizontal {
   display: none;
 }
+
+.scrollbar >>> .pics-wrap {
+  padding:  0 4px;
+}
 </style>