提交修改

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

@@ -1 +1,194 @@
-<p>coupon-edit works!</p>
+<!-- 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]="'couponName'">
+                            <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]="'salesPrice'" 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]="'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]="'merchantId'" nzRequired>选择商户</nz-form-label>
+                    <nz-form-control nzErrorTip="请选择是否赠送卡券!">
+                        <nz-select
+                                (nzScrollToBottom)="loadMore()"
+                                nzPlaceHolder="请选择商户"
+                                nzAllowClear
+                                [nzDropdownRender]="renderTemplate"
+                        >
+                            <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></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]="'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 *ngIf="validateForm.value.isPresent" [nzSpan]="8">-->
+<!--                <nz-form-item>-->
+<!--                    <nz-form-label [nzFor]="'handselCouponList'" nzRequired>是否赠送卡券</nz-form-label>-->
+<!--                    <nz-form-control nzErrorTip="请选择是否赠送卡券!">-->
+<!--                        <nz-select-->
+<!--                                (nzScrollToBottom)="loadMore()"-->
+<!--                                nzPlaceHolder="Select users"-->
+<!--                                nzAllowClear-->
+<!--                                [nzDropdownRender]="renderTemplate"-->
+<!--                        >-->
+<!--                            <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></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]="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]="16">
+                <nz-form-item>
+                    <nz-form-label>商户简介</nz-form-label>
+                    <nz-form-control>
+                    </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>

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

@@ -0,0 +1,6 @@
+button {
+  margin-left: 8px;
+}
+:host ::ng-deep .ant-upload  {
+  background-color: #ffffff;
+}

src/app/admin/coupon/coupon-edit/coupon-edit.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CouponEditComponent } from './coupon-edit.component';
-
-describe('CouponEditComponent', () => {
-  let component: CouponEditComponent;
-  let fixture: ComponentFixture<CouponEditComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CouponEditComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CouponEditComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,4 +1,20 @@
 import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {environment} from '../../../../environments/environment';
+import {MerchantService} from '../../../services/merchant.service';
+import {NzMessageService, NzUploadFile} from 'ng-zorro-antd';
+import {ActivatedRoute} from '@angular/router';
+import {ValidatorsService} from '../../../services/validators.service';
+import {Observable} from 'rxjs';
+
+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-coupon-edit',
@@ -7,9 +23,154 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CouponEditComponent implements OnInit {
 
-  constructor() { }
+  randomUserUrl = 'https://api.randomuser.me/?results=10';
+  optionList: string[] = [];
+  selectedUser = null;
+  isLoading = false;
+
+
+
+  validateForm!: FormGroup;
+  data: any;
+  editFlag = false;
+  id: number;
+  couponImg = [];
+  couponCarouselImg = [];
+  WEB_SERVE_URL = environment.baseUrl;
+  previewImage: string | undefined = '';
+  previewVisible = false;
+
+  constructor(
+      private fb: FormBuilder,
+      private merchant: MerchantService,
+      private message: NzMessageService, // 信息提示
+      private activatedRoute: ActivatedRoute,
+  ) {
+  }
+
+
+
+  loadMore(): void {
+    this.isLoading = true;
+    console.log('1');
+    // this.getRandomNameList.subscribe(data => {
+    //   this.isLoading = false;
+    //   this.optionList = [...this.optionList, ...data];
+    // });
+  }
 
   ngOnInit(): void {
+    this.activatedRoute.queryParams.subscribe(queryParams => {
+      if (queryParams.merchantId != null) {
+        this.editFlag = true;
+        this.id = queryParams.merchantId;
+        this.getDetails(queryParams.merchantId);
+      }
+    });
+    this.validateForm = this.fb.group({
+      couponName: [null, [Validators.required]],
+      couponPrice: [null, [Validators.required]],
+      couponType: [null, [Validators.required]],
+      salesEndTime: [null, [Validators.required]],
+      recycleDay: [1, [Validators.required]],
+      limitNumber: [null, [Validators.required]],
+      salesPrice: [null, [Validators.required]],
+      salesCount: [null, [Validators.required]],
+      isPresent: [false, [Validators.required]],
+      handselCouponList: [null],
+      status: [null],
+      createTime: [null],
+      secUser: {},
+    });
   }
 
+  // 返回
+  getBack() {
+    history.back();
+  }
+
+  // 重置
+  public resetForm(): void {
+    this.validateForm.reset();
+  }
+
+  // 保存
+  public getSave(): void {
+    // tslint:disable-next-line:forin
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+      if (this.validateForm.controls[i].errors != null) {
+        this.message.error('必填项不能为空');
+        return;
+      }
+    }
+
+    this.validateForm.value['secUser']['telephone'] = this.validateForm.value.loginTelephone;
+    this.validateForm.value['secUser']['password'] = this.validateForm.value.password;
+    // if (this.logoFile.length !== 0) {
+    //   if (this.logoFile[0]['response'] != null) {
+    //     this.validateForm.value.merchantLogo = this.logoFile[0]['response']['return_data'][0];
+    //   } else {
+    //     this.validateForm.value.merchantLogo = this.logoFile[0].name;
+    //   }
+    // }
+
+    if (this.editFlag) {
+      this.validateForm.value.id = this.id;
+      this.merchant.updateMerchant(this.validateForm.value, data => {
+        if (data['return_code'] === '000000') {
+          this.getBack();
+          this.message.success('修改成功');
+        } else {
+          this.message.create('error', '修改失败');
+        }
+      });
+    } else {
+
+      this.merchant.insertMerchant(this.validateForm.value, data => {
+        console.log(data);
+        if (data['return_code'] === '000000') {
+          this.getBack();
+          this.message.success('添加成功');
+        } else {
+          this.message.create('error', '保存失败');
+        }
+      });
+    }
+  }
+
+  // 图片查看
+  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;
+  }
+
+  public getDetails(id) {
+    this.merchant.getMerchantById(id, data => {
+      if (data['return_code'] === '000000') {
+        data['return_data'].loginTelephone = data['return_data'].secUser.loginName;
+        data['return_data'].password = data['return_data'].secUser.password;
+        if (data['return_data']['merchantLogo'] != null && data['return_data']['merchantLogo'] !== '') {
+          const logo = String(data['return_data']['merchantLogo']);
+          const logoArray = [];
+          logoArray.push(
+              {
+                uid: 1,
+                name: logo,
+                status: 'done',
+                url: environment.imageUrl + logo
+              });
+          // this.logoFile = logoArray;
+        }
+        this.validateForm.patchValue(data['return_data']);
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
 }

src/app/admin/coupon/coupon-list/coupon-list.component.html

@@ -42,7 +42,7 @@
         <span style="font-weight: bold; font-size: 20px">{{name}}</span>
     </span>
     <div class="operating-button">
-        <button nz-button nzType="primary" class="right-btn" [routerLink]="['/admin/merchantStore/store-edit']" ><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
+        <button nz-button nzType="primary" class="right-btn" [routerLink]="['/admin/coupon/coupon-edit']" ><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
     </div>
     <nz-table
             class="table"

src/app/app-routing.module.ts

@@ -36,6 +36,11 @@ const routes: Routes = [
         loadChildren: () => import('./admin/merchant-store/merchant-store.module').then(m => m.MerchantStoreModule),
         canActivate: [InitGuardService]
       },
+      {
+        path: 'coupon',
+        loadChildren: () => import('./admin/coupon/coupon.module').then(m => m.CouponModule),
+        canActivate: [InitGuardService]
+      },
       {
         path: 'system',
         loadChildren: () => import('./admin/system/system.module').then(m => m.SystemModule),