hurui
/
high-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交修改

Browse Source
pull/1/head
袁野 4 years ago
parent 94d7b88224
commit 77e6d558ce
6 changed files with 368 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 195
      src/app/admin/coupon/coupon-edit/coupon-edit.component.html
  2. 6
      src/app/admin/coupon/coupon-edit/coupon-edit.component.scss
  3. 25
      src/app/admin/coupon/coupon-edit/coupon-edit.component.spec.ts
  4. 163
      src/app/admin/coupon/coupon-edit/coupon-edit.component.ts
  5. 2
      src/app/admin/coupon/coupon-list/coupon-list.component.html
  6. 5
      src/app/app-routing.module.ts

195
src/app/admin/coupon/coupon-edit/coupon-edit.component.html
Unescape View File

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

6
src/app/admin/coupon/coupon-edit/coupon-edit.component.scss
Unescape View File

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

25
src/app/admin/coupon/coupon-edit/coupon-edit.component.spec.ts
Unescape View File

@ -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();
});
});

163
src/app/admin/coupon/coupon-edit/coupon-edit.component.ts
Unescape View File

@ -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']);
}
});
}
}

2
src/app/admin/coupon/coupon-list/coupon-list.component.html
Unescape View File

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

5
src/app/app-routing.module.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save