pull/1/head
yuanye 3 years ago
parent c95c854062
commit 5315c6f9f4
  1. 117
      src/app/admin/activate/activate-edit/activate-edit.component.html
  2. 52
      src/app/admin/activate/activate-edit/activate-edit.component.scss
  3. 185
      src/app/admin/activate/activate-edit/activate-edit.component.ts
  4. BIN
      src/assets/images/post.png

@ -34,7 +34,7 @@
formControlName="productIdArray"
nzPlaceHolder="请选择有抽奖资格的产品"
>
<nz-option *ngFor="let item of listOfOption" [nzLabel]="item.couponName" [nzValue]="item.id"></nz-option>
<nz-option *ngFor="let item of listOfOption" [nzLabel]="item['couponName']" [nzValue]="item['id']"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
@ -67,10 +67,38 @@
</div>
</div>
</form>
<form style="margin-top: 30px;" *ngIf="current === 1" nz-form [formGroup]="validateFormAward">
<div nz-row>
<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>Action 一 {{ data.name }}</a>
<nz-divider nzType="vertical"></nz-divider>
<a>Delete</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
</form>
<div nz-row>
<div nz-col [nzSpan]="24" class="search-area">
<button nz-button [nzType]="'primary'" (click)="pre()">上一步</button>
@ -79,3 +107,84 @@
</div>
</div>
</div>
<nz-modal [(nzVisible)]="isVisible" nzTitle="配置奖励" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<div class="title">基本信息</div>
<form nz-form [formGroup]="validateFormAward" class="login-form">
<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>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>奖励图片</nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-upload
nzAction="{{POST_URL}}/fileUpload/uploadfile"
nzListType="picture-card"
[(nzFileList)]="logoFile"
[nzShowButton]="logoFile.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>
</form>
<div class="title" >奖品信息</div>
<div nz-row *ngFor="let control of listOfControl; let i = index">
<div nz-col class="gutter-row" [nzSpan]="20">
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>代理商</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="请选择代理商">
<nz-select *ngIf="control.isEdit" nzShowSearch nzAllowClear [(ngModel)]="control.agentId" (ngModelChange)="getDiscount($event , i)" nzPlaceHolder="请选择代理商状态">
<nz-option *ngFor="let item of agentData" nzLabel="{{item.agentName}}" nzValue="{{item.id}}"></nz-option>
</nz-select>
<span *ngIf="!control.isEdit">{{control.agentName}}</span>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>优惠券</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="请选择优惠券">
<nz-select *ngIf="control.isEdit" nzShowSearch nzAllowClear [(ngModel)]="control.prizeId" (ngModelChange)="getDiscountName($event , i)" nzPlaceHolder="请选择优惠券">
<nz-option *ngFor="let item of discountList" nzLabel="{{item['highDiscount'].discountName}}" nzValue="{{item['highDiscount'].id}}"></nz-option>
</nz-select>
<span *ngIf="!control.isEdit">{{control.discountName}}</span>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col class="gutter-row" [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzRequired>奖励数量</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="请输入奖励数量">
<input nz-input type="number" *ngIf="control.isEdit" [(ngModel)]="control.prizeNum" placeholder="请输入奖励数量" />
<span *ngIf="!control.isEdit">{{control.prizeNum}}</span>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-col class="gutter-row" [nzSpan]="4">
<button nz-button nzType="default" (click)="removeField(i , $event)"><i nz-icon nzType="delete" nzTheme="outline"></i>删除</button>
<br/>
<button class="btn" *ngIf="control.isEdit" nz-button nzType="primary" (click)="addField(i)"><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
</div>
</div>
</nz-modal>

@ -1,7 +1,56 @@
.main {
width: 90%;
margin-left: 5%;
.title {
.idCard {
img {
width: 200px;
}
.userImg {
width: 90px;
}
}
.post_p_l {
margin-left: 5% ;
}
.main_post_p {
font-size: 12px;
color: #999999;
margin-top: -10px;
}
.btn {
margin-top: 20px;
}
.bottom_solid {
border-bottom: 1px solid #e4e4e4;
}
.btn-post {
width: 20%;
margin-left: 40%;
margin-top: 40px;
}
}
.pics{
display: flex;
align-items: center;
}
.pic{
width:10rem;
height:8rem;
margin-right: 1rem;
position: relative;
}
.delPic{
width:1rem !important;
height:1rem;
position: absolute;
right: -10px;top:-10px;
}
.btn {
margin-top: 20px;
}
.title {
width: 100%;
height: 46px;
line-height: 46px;
@ -10,5 +59,4 @@
color: #1890ff;
background-color: #f3f9ff;
margin-bottom: 20px;
}
}

@ -4,6 +4,20 @@ import {NzMessageService} from '_ng-zorro-antd@9.3.0@ng-zorro-antd';
import {ActivatedRoute} from '_@angular_router@9.0.7@@angular/router';
import {CouponService} from '../../../services/coupon.service';
import {ActivateService} from '../../../services/activate.service';
import {NzUploadFile} from 'ng-zorro-antd';
import {environment} from '../../../../environments/environment';
import {Observable, Observer} from 'rxjs';
import {AgentService} from "../../../services/agent.service";
import {DiscountService} from "../../../services/discount.service";
function getBase64(file: File): Promise<string | ArrayBuffer | null> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
@Component({
selector: 'app-activate-edit',
@ -17,14 +31,36 @@ export class ActivateEditComponent implements OnInit {
data: any;
editFlag = false;
id: number;
agentId: number;
listOfOption: string[] = [];
current = 0;
listOfData = [];
agentData = [];
current = 1;
listOfControl = [{
isEdit: true,
agentId: null,
agentName: null,
prizeNum: null,
prizeId: null,
discountName: null,
loading : false
}];
FILE_URL = environment.imageUrl;
POST_URL = environment.baseUrl;
isVisible = false;
logoFile = [];
previewImage: string | undefined = '';
previewVisible = false;
discountList = []; // 列表数据
constructor(
private fb: FormBuilder,
private coupon: CouponService,
private activate: ActivateService,
private message: NzMessageService, // 信息提示
private activatedRoute: ActivatedRoute,
private agent: AgentService,
private discount: DiscountService,
private msg: NzMessageService,
) { }
ngOnInit(): void {
@ -44,17 +80,31 @@ export class ActivateEditComponent implements OnInit {
});
this.validateFormAward = this.fb.group({
activityInfoId: [null, [Validators.required]],
img: [null, [Validators.required]],
name: [null, [Validators.required]],
img: [null, [Validators.required]],
num: [null, [Validators.required]],
});
const whereObject = {
pageNum: 1 ,
pageSize: 200 ,
status: 2 ,
pageSize: 800 ,
status: 2
};
const whereObjectA = {
pageNum: 1 ,
pageSize: 800 ,
type: 1
};
this.getCouponList(whereObject);
this.getListAgent(whereObjectA);
}
public getCouponList(whereObject) {
whereObject.status = 2;
this.coupon.getCouponList(whereObject, data => {
if (data['return_code'] === '000000') {
this.listOfOption = data['return_data'].list;
@ -64,6 +114,52 @@ export class ActivateEditComponent implements OnInit {
});
}
// 绑定优惠券
public getDiscount(id: number , i ): void {
this.listOfControl[i].agentName = this.agentData.find(item => {
return item.id == id;
}).agentName;
this.agentId = id;
const whereObject = {};
whereObject['pageNum'] = 1;
whereObject['pageSize'] = 10000;
whereObject['agentId'] = id;
this.agent.getDiscountAgentList(whereObject, data => {
if (data['return_code'] === '000000') {
this.discountList = data['return_data'].list;
} else {
this.message.error(data['return_msg']);
}
});
}
getDiscountName(id: number , i ) {
this.listOfControl[i].discountName = this.discountList.find(item => {
return item['highDiscount'].id == id;
})['highDiscount'].discountName;
console.log(this.listOfControl);
}
public getListAgent(whereObject) {
this.agent.getListAgent(whereObject, data => {
if (data['return_code'] === '000000') {
this.agentData = data['return_data'].list;
} else {
this.message.error(data['return_msg']);
}
});
}
// 图片查看
handlePreview = async (file: NzUploadFile) => {
if (!file.url && !file.preview) {
// tslint:disable-next-line:no-non-null-assertion
file.preview = await getBase64(file.originFileObj!);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
}
// 返回
getBack() {
history.back();
@ -128,8 +224,10 @@ export class ActivateEditComponent implements OnInit {
// 下一步
getNest(): void {
if (this.current === 1) {
if (this.current === 0) {
this.editActivityInfo();
} else {
}
}
@ -140,4 +238,79 @@ export class ActivateEditComponent implements OnInit {
}
// 新增
addField(i): void {
if (
this.listOfControl[i].prizeId == null ||
this.listOfControl[i].prizeNum == null ||
this.listOfControl[i].agentId == null
) {
this.message.error('请填写必填项!');
return;
}
this.listOfControl[i].isEdit = false;
const control = {
isEdit: true,
agentId: null,
agentName: null,
prizeNum: null,
prizeId: null,
discountName: null,
loading : false
};
this.listOfControl.push(control);
}
// 删除资质
removeField(i, e: MouseEvent): void {
e.preventDefault();
if (this.listOfControl.length > 1) {
this.listOfControl.splice(i, 1);
this.listOfControl[i - 1].isEdit = true;
}
}
// 添加配置
getAdd(): void {
this.isVisible = true;
}
handleOk(): void {
// tslint:disable-next-line:forin
for (const i in this.validateFormAward.controls) {
this.validateFormAward.controls[i].markAsDirty();
this.validateFormAward.controls[i].updateValueAndValidity();
if (this.validateFormAward.controls[i].errors != null) {
this.message.error('必填项不能为空');
return;
}
}
if (
this.listOfControl[this.listOfControl.length - 1].prizeId == null ||
this.listOfControl[this.listOfControl.length - 1].prizeNum == null ||
this.listOfControl[this.listOfControl.length - 1].agentId == null
) {
this.message.error('请填写必填项!');
return;
}
this.validateForm.value.ruleArray = [{
partakeMode: 1,
productType: 1 ,
productIdArray: this.validateForm.value.productIdArray
}];
console.log(this.listOfControl);
}
handleCancel(): void {
this.isVisible = false;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Loading…
Cancel
Save