From 1fab74e445262c04f2b8e86cb425a0436beea04d Mon Sep 17 00:00:00 2001
From: Taric Xin <LincolnLin@swireproperties.com>
Date: Thu, 28 Apr 2022 16:04:37 +0800
Subject: [PATCH] edit

---
 .../dynamic-setting-h5.component.html            | 16 ++++++++++------
 .../dynamic-setting-h5.component.ts              | 11 +++++++++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html
index 3d52444d..5df97748 100644
--- a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html
+++ b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html
@@ -112,19 +112,23 @@
                                 <!-- 图片上传 -->
                                 <ng-container *ngSwitchCase="12">
                                     <div>
-                                        <nz-upload class="avatar-uploader" [nzAction]="service.$api_upload_url"
+                                        <nz-upload #filst class="avatar-uploader" [nzAction]="service.$api_upload_url"
                                             [nzName]="'multipartFile'" nzName="avatar" nzListType="picture-card"
-                                            [nzShowUploadList]="false" (nzChange)="uploadChange($event,item)">
-                                            <ng-container *ngIf="!item.itemValue">
+                                            [nzShowUploadList]="{showPreviewIcon:true,showRemoveIcon:true}"
+                                            [nzFileList]="item.itemValue?[{uid:item.id,name:'',url:item.itemValue}]:[]"
+                                            (nzChange)="uploadChange($event,item)" [nzLimit]="1"
+                                            [nzShowButton]="filst?.nzFileList?.length===0 " [nzPreview]="nzPreview"
+                                            [nzRemove]="nzRemove">
+                                            <div>
                                                 <i class="upload-icon" nz-icon
                                                     [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
                                                 <div class="ant-upload-text">上传</div>
-                                            </ng-container>
-                                            <div style="width: 102px;height: 102px;display: flex;align-items: center;justify-content: center;"
+                                            </div>
+                                            <!-- <div style="width: 102px;height: 102px;display: flex;align-items: center;justify-content: center;"
                                                 *ngIf="item.itemValue" (click)="$event.cancelBubble = true">
                                                 <img nz-image [nzSrc]="item.itemValue"
                                                     style="max-width: 102px;max-height: 102px;" />
-                                            </div>
+                                            </div> -->
                                         </nz-upload>
                                         <p>支持
                                             <ng-container *ngFor="let item of item.remark?.format">
diff --git a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts
index 5c3b0261..a3013280 100644
--- a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts
+++ b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts
@@ -98,6 +98,17 @@ export class DynamicSettingH5Component implements OnInit {
     }
   }
 
+  nzPreview = (file: NzUploadFile) => {
+    this.showImg(file.url);
+  };
+  nzRemove = (file: NzUploadFile) => {
+    const config = this.configList.find((c: any) => c.id === file.uid);
+    if (config) {
+      config.itemValue = '';
+    }
+    return true;
+  };
+
   showImg(url: any) {
     this.nzImageService.preview([{ src: url }]);
   }