嗨森逛PC管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
high-web/src/app/admin/discount-package/discount-package-edit/discount-package-edit.compo...

203 lines
11 KiB

3 years ago
<!-- start 面包屑 -->
<nz-breadcrumb>
<nz-breadcrumb-item>
优惠包管理
</nz-breadcrumb-item>
<nz-breadcrumb-item>
编辑优惠券包
</nz-breadcrumb-item>
</nz-breadcrumb>
<div class="inner-content">
<div class="main">
<nz-steps [nzCurrent]="current">
<nz-step nzTitle="配置基本信息"></nz-step>
<nz-step nzTitle="配置优惠券"></nz-step>
</nz-steps>
<form style="margin-top: 30px;" *ngIf="current === 0" nz-form [formGroup]="validateForm">
<div nz-row>
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>优惠券包标题</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请输入优惠券包标题">
<input nz-input type="text" formControlName="title" placeholder="请输入优惠券包标题标题" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>使用归属</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请选择使用归属">
<nz-select formControlName="usingAttribution" nzAllowClear nzPlaceHolder="选择使用归属类型">
<nz-option *ngFor="let item of usingAttribution" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>优惠券包类型</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请选择优惠券包类型">
<nz-select nzShowSearch nzAllowClear formControlName="salesType" nzPlaceHolder="请选择优惠券包类型">
<nz-option nzLabel="售卖" nzValue="1"></nz-option>
<nz-option nzLabel="赠送" nzValue="2"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24" *ngIf="validateForm.value['salesType'] === '1'">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>售卖价格</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请输入售卖价格">
<nz-input-group nzSuffix="RMB" nzPrefix="¥">
<input type="text" formControlName="price" placeholder="请输入售卖价格" nz-input />
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24" *ngIf="validateForm.value['salesType'] === '1'">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>限购数量</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请输入限购数量">
<nz-input-number formControlName="purchaseNum" [nzMin]="1" [nzMax]="99" [nzStep]="1"></nz-input-number>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>列表展示图</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-upload
nzAction="{{POST_URL}}/fileUpload/uploadfile"
nzListType="picture-card"
[(nzFileList)]="listImg"
[nzShowButton]="listImg.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 [nzSpan]="3" nzRequired>轮播展示图</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-upload
nzAction="{{POST_URL}}/fileUpload/uploadfile"
nzListType="picture-card"
[nzMultiple]="true"
[(nzFileList)]="bannerImg"
[nzShowButton]="bannerImg.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]="24">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>详情展示图</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-upload
nzAction="{{POST_URL}}/fileUpload/uploadfile"
nzListType="picture-card"
[(nzFileList)]="detailsImg"
[nzMultiple]="true"
[nzShowButton]="detailsImg.length < 5"
[nzPreview]="handlePreview"
>
<i nz-icon nzType="plus"></i>
<div class="ant-upload-text">上传图片</div>
</nz-upload>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modal" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
<ng-template #modal>
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
</ng-template>
</nz-modal>
</nz-form-control>
</nz-form-item>
</div>
</div>
</form>
<div style="margin-top: 60px;" *ngIf="current === 1">
<span>共计 {{11}} 条数据</span>
<div class="operating-button">
<button nz-button nzType="primary" class="right-btn" (click)="getAdd()" ><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
</div>
<nz-table #basicTable [nzData]="listOfData">
<thead>
<tr>
<th>奖励名称</th>
<th>数量</th>
<th>图片</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.name }}</td>
<td>{{ data.num }}</td>
<td>
<img class="head_img" src="{{FILE_URL + data.img}}" onerror="this.src='../../../../assets/admin/navigation/icon.png'" alt="">
</td>
<td>
<a (click)="deleteActivateAward(data.id)">删除</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
<div nz-row>
<div nz-col [nzSpan]="24" class="search-area">
<button nz-button [nzType]="'primary'" (click)="pre()">上一步</button>
<button nz-button [nzType]="'primary'" (click)="getNest()">{{current == 0 ? '下一步': '提交'}}</button>
</div>
</div>
</div>
</div>
3 years ago
<nz-modal [(nzVisible)]="isVisible" nzTitle="配置优惠券" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
3 years ago
<div class="title">基本信息</div>
<form nz-form [formGroup]="validateFormAward" class="login-form">
3 years ago
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>优惠券范围</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="请选择优惠券范围">
<nz-select formControlName="usingScope" (ngModelChange)="getDiscountPackageByList($event)" nzAllowClear nzPlaceHolder="请选择优惠券使用范围">
<nz-option *ngFor="let item of usingScope" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
3 years ago
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>奖励名称</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="请输入奖励名称">
<input nz-input type="text" formControlName="name" placeholder="请输入奖励名称" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>奖励数量</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="请输入奖励数量">
<input nz-input type="number" formControlName="num" placeholder="请输入奖励名称" />
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>