edit

src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html

@@ -109,6 +109,40 @@
                                             *ngFor="let re of item.remark"></nz-option>
                                     </nz-select>
                                 </ng-container>
+                                <!-- 图片上传 -->
+                                <ng-container *ngSwitchCase="12">
+                                    <div>
+                                        <nz-upload 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">
+                                                <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;"
+                                                *ngIf="item.itemValue" (click)="$event.cancelBubble = true">
+                                                <img nz-image [nzSrc]="item.itemValue"
+                                                    style="max-width: 102px;max-height: 102px;" />
+                                            </div>
+                                        </nz-upload>
+                                        <p>支持
+                                            <ng-container *ngFor="let item of item.remark?.format">
+                                                {{item}},
+                                            </ng-container>
+                                            格式，文件小于{{item.remark?.size || 2}}M（建议尺寸
+                                            {{item.remark?.width || 750}}px * {{item.remark?.height|| 1622}}px）。
+                                            <a *ngIf="item.remark?.caseImage"
+                                                (click)="showImg(item.remark?.caseImage)">查看示例</a>
+                                        </p>
+                                    </div>
+                                </ng-container>
+                                <!-- 文本域 -->
+                                <ng-container *ngSwitchCase="13">
+                                    <textarea rows="4" nz-input [(ngModel)]="item.itemValue" style="width: 400px;"
+                                        [maxlength]="item.remark?.maxLength"
+                                        [placeholder]="item.remark?.placeholder || ''"></textarea>
+                                </ng-container>
                                 <!-- 开关选项 -->
                                 <ng-container *ngSwitchCase="999">
                                     <ng-content select="custom-element"></ng-content>

src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts

@@ -10,6 +10,9 @@
  */
 import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
 import { BaseService } from '@shared';
+import { NzImageService } from 'ng-zorro-antd/image';
+import { NzUploadFile } from 'ng-zorro-antd/upload';
+import { of } from 'rxjs';
 
 const JSONTYPE = new Set([5, 6, 9, 999]);
 @Component({
@@ -37,7 +40,7 @@ export class DynamicSettingH5Component implements OnInit {
   @Input()
   itemValue = 'itemValue';
   listUrls: any;
-  constructor(public service: BaseService) {}
+  constructor(public service: BaseService, private nzImageService: NzImageService) {}
 
   ngOnInit() {}
 
@@ -84,5 +87,17 @@ export class DynamicSettingH5Component implements OnInit {
     });
     this.saveEvent.emit(params);
   }
+
+  uploadChange(info: { file: NzUploadFile; type?: string }, item: any): void {
+    switch (info.type) {
+      case 'success':
+        item.itemValue = info.file.response.data.fullFilePath;
+        break;
+    }
+  }
+
+  showImg(url: any) {
+    this.nzImageService.preview([{ src: url }]);
+  }
 }
 // [0]?.response?.data.fullFilePath