BUG 27732

src/components/AiUploader/AiUploader.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="ai-uploader">
-    <div class="fileList">
+    <div class="imgList" v-if="type == 'image'">
       <div class="item" v-for="(item, i) in fileList" :key="i">
-        <template v-if="type == 'image'">
-          <ai-image :src="item.url" :preview="preview"/>
-          <div class="info">
-            <i>{{ item.fileSizeStr }}</i>
-          </div>
-        </template>
-        <template v-else>
-          <ai-image :preview="preview" :file="item"/>
-          <div class="info">
-            <span>{{ item.name }} </span>
-            <i>{{ item.fileSizeStr }}</i>
-          </div>
-        </template>
+        <ai-image :src="item.url" :preview="preview"/>
+        <u-icon class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
+      </div>
+      <div v-if="!disabled&&(fileList.length == 0 || (multiple && fileList.length < limit))" class="default"
+           @click="upload">
+        <u-icon name="photo" size="64" :label="placeholder" label-pos="bottom" label-color="#89b"/>
+      </div>
+    </div>
+    <div class="fileList" v-else>
+      <div class="item" v-for="(item, i) in fileList" :key="i">
+        <ai-image :preview="preview" :file="item"/>
+        <div class="info">
+          <span>{{ item.name }} </span>
+          <i>{{ item.fileSizeStr }}</i>
+        </div>
         <template v-if="!disabled">
           <div class="btn" @tap="handleReUpload(i)">
             重新上传
@@ -26,8 +28,7 @@
       </div>
       <div v-if="!disabled&&(fileList.length == 0 || (multiple && fileList.length < limit))" class="default"
            @click="upload">
-        <i class="iconfont iconfont-iconAdd"/>
-        <span>{{ placeholder }}</span>
+        <u-icon name="photo" size="64" :label="placeholder" label-pos="bottom" label-color="#89b"/>
       </div>
     </div>
   </div>
@@ -175,6 +176,32 @@ export default {
   line-height: normal;
   margin-bottom: 16px;
 
+  ::v-deep.imgList {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item {
+      position: relative;
+
+      .delBtn {
+        position: absolute;
+        right: -8px;
+        top: -8px;
+        z-index: 999;
+        border-radius: 50%;
+        overflow: hidden;
+        background-color: #fff;
+      }
+    }
+
+
+    image {
+      width: 30vw;
+      height: 30vw;
+      margin: 0 2px 2px 0;
+    }
+  }
+
   .fileList {
     .item {
       display: flex;
@@ -221,27 +248,23 @@ export default {
       }
     }
 
-    .default {
-      width: 240px;
-      height: 240px;
-      box-sizing: border-box;
-      border-radius: 8px;
-      background: #f3f4f7;
-      color: #89b;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
 
-      .iconfont-iconAdd {
-        font-size: 64px;
-      }
+  }
 
-      span {
-        display: block;
-        text-align: center;
-        font-size: 28px;
-      }
+  .default {
+    width: 30vw;
+    height: 30vw;
+    box-sizing: border-box;
+    border-radius: 8px;
+    background: #f3f4f7;
+    color: #89b;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .iconfont-iconAdd {
+      font-size: 64px;
     }
   }
 }