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">
+        <u-icon class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
-            <i>{{ item.fileSizeStr }}</i>
       </div>
-        </template>
+      <div v-if="!disabled&&(fileList.length == 0 || (multiple && fileList.length < limit))" class="default"
-        <template v-else>
+           @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>
         <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"/>
+        <u-icon name="photo" size="64" :label="placeholder" label-pos="bottom" label-color="#89b"/>
-        <span>{{ placeholder }}</span>
       </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,9 +248,12 @@ export default {
       }
     }
 
+
+  }
+
   .default {
-      width: 240px;
+    width: 30vw;
-      height: 240px;
+    height: 30vw;
     box-sizing: border-box;
     border-radius: 8px;
     background: #f3f4f7;
@@ -236,13 +266,6 @@ export default {
     .iconfont-iconAdd {
       font-size: 64px;
     }
-
-      span {
-        display: block;
-        text-align: center;
-        font-size: 28px;
-      }
-    }
   }
 }
 </style>