1

src/app/admin/activate/activate-edit/activate-edit.component.html

@@ -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>

src/app/admin/activate/activate-edit/activate-edit.component.scss

@@ -1,6 +1,55 @@
 .main {
   width: 90%;
   margin-left: 5%;
+  .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;
@@ -11,4 +60,3 @@
   background-color: #f3f9ff;
   margin-bottom: 20px;
 }
-}

src/app/admin/activate/activate-edit/activate-edit.component.ts

@@ -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 ,
+      pageSize: 800 ,
-      status: 2 ,
+      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;
+  }
+
 }