<!-- start 面包屑 --> <nz-breadcrumb> <nz-breadcrumb-item> <a (click)="getBack()">卡券管理</a> </nz-breadcrumb-item> <nz-breadcrumb-item> 编辑卡券 </nz-breadcrumb-item> </nz-breadcrumb> <!-- end 面包屑 --> <nz-content class="inner-content"> <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form"> <div nz-row [nzGutter]="24"> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'couponName'" nzRequired>卡券名称</nz-form-label> <nz-form-control nzErrorTip="请输入卡券名称!"> <input nz-input placeholder="请输入卡券名称..." [formControlName]="'couponName'" id="'couponName'" /> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'couponType'" nzRequired>卡券类型</nz-form-label> <nz-form-control nzErrorTip="请选择卡券类型!"> <nz-select nzPlaceHolder="请选择卡券类型" [formControlName]="'couponType'"> <nz-option nzValue="1" nzLabel="内部卷"></nz-option> <nz-option nzValue="2" nzLabel="外部卷"></nz-option> </nz-select> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'couponPrice'" nzRequired>卡券面值</nz-form-label> <nz-form-control nzErrorTip="请输入卡券面值!"> <input nz-input placeholder="请输入卡券面值..." [formControlName]="'couponPrice'" id="'couponPrice'" /> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'salesPrice'" nzRequired>销售价格</nz-form-label> <nz-form-control nzErrorTip="请输入销售价格!"> <input nz-input placeholder="请输入销售价格..." [formControlName]="'salesPrice'" id="'salesPrice'" /> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'salesCount'" nzRequired>销售数量</nz-form-label> <nz-form-control nzErrorTip="请输入销售数量!"> <input nz-input placeholder="请输入销售数量 ..." [formControlName]="'salesCount'" id="'salesCount'" /> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'limitNumber'" nzRequired>限购数量</nz-form-label> <nz-form-control nzErrorTip="请输入限购数量!"> <input nz-input placeholder="请输入限购数量 ..." [formControlName]="'limitNumber'" id="'limitNumber'" /> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'merchantId'" nzRequired>选择商户</nz-form-label> <nz-form-control nzErrorTip="请选择商户!"> <nz-select (nzScrollToBottom)="loadMore()" (nzOnSearch)="search($event)" nzShowSearch [formControlName]="'merchantId'" nzServerSearch nzPlaceHolder="请选择商户" nzAllowClear [nzDropdownRender]="renderTemplate" > <nz-option *ngFor="let o of optionList" [nzValue]="o.id" [nzLabel]="o.merchantName"></nz-option> </nz-select> <ng-template #renderTemplate> <nz-spin *ngIf="isLoading"></nz-spin> </ng-template> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'salesEndTime'" nzRequired>截止日期</nz-form-label> <nz-form-control nzErrorTip="请选择销售截止日期!"> <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [formControlName]="'salesEndTime'" ></nz-date-picker> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'recycleDay'" nzRequired>归库天数</nz-form-label> <nz-form-control nzErrorTip="请输入归库天数!"> <nz-input-number [formControlName]="'recycleDay'" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8"> <nz-form-item> <nz-form-label [nzFor]="'isPresent'" nzRequired>是否赠送卡券</nz-form-label> <nz-form-control nzErrorTip="请选择是否赠送卡券!"> <nz-switch [formControlName]="'isPresent'" ></nz-switch> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="8" *ngIf="validateForm.value.isPresent"> <nz-form-item> <nz-form-label [nzFor]="'handselCouponList'" nzRequired>选择卡券</nz-form-label> <nz-form-control nzErrorTip="请选择卡券!"> <nz-select [formControlName]="'handselCouponList'" (nzScrollToBottom)="loadMoreCoupon()" (nzOnSearch)="searchCoupon($event)" nzShowSearch nzServerSearch nzPlaceHolder="请选择卡券" nzAllowClear [nzDropdownRender]="renderTemplateCoupon" > <nz-option *ngFor="let o of optionListCoupon" [nzValue]="o.id" [nzLabel]="o.merchantName"></nz-option> </nz-select> <ng-template #renderTemplateCoupon> <nz-spin *ngIf="isLoading"></nz-spin> </ng-template> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="24"> <nz-form-item> <nz-form-label nzRequired>卡券图片</nz-form-label> <nz-form-control> <nz-upload nzAction="{{WEB_SERVE_URL}}/fileUpload/uploadfile" nzListType="picture-card" [(nzFileList)]="couponImg" [nzShowButton]="couponImg.length < 1" [nzPreview]="handlePreview" > <i nz-icon nzType="plus"></i> <div class="ant-upload-text">上传图片</div> </nz-upload> <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false"> <ng-template #modalContent> <img [src]="previewImage" [ngStyle]="{ width: '100%' }" /> </ng-template> </nz-modal> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="24"> <nz-form-item> <nz-form-label nzRequired>卡卷轮播图</nz-form-label> <nz-form-control> <nz-upload nzAction="{{WEB_SERVE_URL}}/fileUpload/uploadfile" nzListType="picture-card" [(nzFileList)]="couponCarouselImg" [nzShowButton]="couponCarouselImg.length < 5" [nzPreview]="handlePreview" > <i nz-icon nzType="plus"></i> <div class="ant-upload-text">上传图片</div> </nz-upload> <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false"> <ng-template #modalContent> <img [src]="previewImage" [ngStyle]="{ width: '100%' }" /> </ng-template> </nz-modal> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="20"> <nz-form-item> <nz-form-label nzRequired>卡券介紹</nz-form-label> <nz-form-control> <app-richtext [content]='content' (newTextEvent)="textData($event)"></app-richtext> </nz-form-control> </nz-form-item> </div> </div> <div nz-row> <div nz-col [nzSpan]="24" class="search-area"> <button nz-button (click)="resetForm()">重置</button> <button nz-button [nzType]="'primary'" (click)="getSave()">提交</button> </div> </div> </form> </nz-content>