提交代码

src/app/app.routes.ts

@@ -24,6 +24,11 @@ export const routes: Routes = [
         loadChildren: () => import('./pages/account/account.routes').then(m => m.ACCOUNT_ROUTES),
         canActivate: [InitGuardService]
       },
+      {
+        path: 'merchant',
+        loadChildren: () => import('./pages/merchant/merchant.routes').then(m => m.MERCHANT_ROUTES),
+        canActivate: [InitGuardService]
+      },
       {
         path: 'goods',
         loadChildren: () => import('./pages/goods/goods.routes').then(m => m.GOODS_ROUTES),

src/app/pages/merchant/mer-add/mer-add.component.html

@@ -0,0 +1,79 @@
+<form nz-form [formGroup]="form" (ngSubmit)="submitForm()">
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>登录账户</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="登录账户填写有误！">
+      <input nz-input formControlName="loginName"/>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>角色权限</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色权限选择有误！">
+      <nz-select nzShowSearch formControlName="roleId">
+        <nz-option *ngFor="let item of roleData" nzValue="{{item.id}}" nzLabel="{{item.roleName}}"></nz-option>
+      </nz-select>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24">logo</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24">
+      <nz-upload
+        class="logo-uploader"
+        nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        nzName="avatar"
+        nzListType="picture-card"
+        [nzShowUploadList]="false"
+        [nzBeforeUpload]="beforeUpload"
+        (nzChange)="handleChange($event)"
+      >
+        <ng-container *ngIf="!logoUrl">
+          <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
+          <div class="ant-upload-text">上传</div>
+        </ng-container>
+        <img *ngIf="logoUrl" [src]="logoUrl" style="width: 100%" />
+      </nz-upload>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>商户名称</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24">
+      <input nz-input formControlName="directorName"/>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>商户地址</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24">
+      <input nz-input formControlName="address"/>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>负责人</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24">
+      <input nz-input formControlName="directorName"/>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>负责人电话</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24">
+      <input nz-input formControlName="directorTel"/>
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-label [nzSm]="6" [nzXs]="24">客服电话</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24">
+      <input nz-input formControlName="customerServiceTel"/>
+    </nz-form-control>
+  </nz-form-item>
+
+  <div nz-flex [nzJustify]="'center'">
+    <button nz-button nzType="primary" class="submit-btn">保存</button>
+  </div>
+
+</form>

src/app/pages/merchant/mer-add/mer-add.component.less

@@ -0,0 +1,7 @@
+form {
+  text-align: center;
+  width: 500px;
+}
+.logo-uploader {
+  text-align: left;
+}

src/app/pages/merchant/mer-add/mer-add.component.ts

@@ -0,0 +1,122 @@
+import { Component } from '@angular/core';
+import {MerService} from "../../../servies/merchant/mer.service";
+import {NzModalModule, NzModalService} from "ng-zorro-antd/modal";
+import {FormGroup, FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NgForOf, NgIf} from "@angular/common";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {
+  NzFormControlComponent,
+  NzFormDirective,
+  NzFormItemComponent,
+  NzFormLabelComponent,
+  NzFormModule
+} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {NzUploadFile, NzUploadModule} from "ng-zorro-antd/upload";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {Observable, Observer} from "rxjs";
+import {NzMessageService} from "ng-zorro-antd/message";
+
+@Component({
+  selector: 'app-mer-add',
+  standalone: true,
+  imports: [
+    FormsModule,
+    NgForOf,
+    NzButtonComponent,
+    NzColDirective,
+    NzFlexDirective,
+    NzFormControlComponent,
+    NzFormDirective,
+    ReactiveFormsModule,
+    NzFormItemComponent,
+    NzFormLabelComponent,
+    NzInputDirective,
+    NzSelectComponent,
+    NzOptionComponent,
+    NzModalModule,
+    NzFormModule,
+    NzUploadModule,
+    NzIconDirective,
+    NgIf
+  ],
+  templateUrl: './mer-add.component.html',
+  styleUrl: './mer-add.component.less'
+})
+export class MerAddComponent {
+
+  loading = false;
+  logoUrl?: string;
+
+  form: FormGroup;
+  // 角色数据
+  roleData: any = [];
+
+  constructor(private fb: NonNullableFormBuilder,
+              private merService: MerService,
+              private message: NzMessageService,
+              private modal: NzModalService) {
+    // 初始化表单
+    this.form = this.fb.group({
+      loginName: ['', [Validators.required]],
+      roleId: ['', [Validators.required]],
+      merLogo: [''],
+      merName: [''],
+      directorName: [''],
+      directorTel: [''],
+      customerServiceTel: [''],
+      address: [''],
+    });
+  }
+
+  submitForm() {
+
+  }
+
+  private getBase64(img: File, callback: (img: string) => void): void {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result!.toString()));
+    reader.readAsDataURL(img);
+  }
+
+  handleChange(info: { file: NzUploadFile }): void {
+    switch (info.file.status) {
+      case 'uploading':
+        this.loading = true;
+        break;
+      case 'done':
+        // Get this url from response in real world.
+        this.getBase64(info.file!.originFileObj!, (img: string) => {
+          this.loading = false;
+          this.logoUrl = img;
+        });
+        break;
+      case 'error':
+        this.message.error('Network error');
+        this.loading = false;
+        break;
+    }
+  }
+
+  beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
+    return new Observable((observer: Observer<boolean>) => {
+      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+      if (!isJpgOrPng) {
+        this.message.error('You can only upload JPG file!');
+        observer.complete();
+        return;
+      }
+      const isLt2M = file.size! / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.message.error('Image must smaller than 2MB!');
+        observer.complete();
+        return;
+      }
+      observer.next(isJpgOrPng && isLt2M);
+      observer.complete();
+    });
+  };
+}

src/app/pages/merchant/mer-list/mer-list.component.html

@@ -0,0 +1 @@
+<p>mer-list works!</p>

src/app/pages/merchant/mer-list/mer-list.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-mer-list',
+  standalone: true,
+  imports: [],
+  templateUrl: './mer-list.component.html',
+  styleUrl: './mer-list.component.less'
+})
+export class MerListComponent {
+
+}

src/app/pages/merchant/merchant.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class MerchantModule { }

src/app/pages/merchant/merchant.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import {MerAddComponent} from "./mer-add/mer-add.component";
+import {MerListComponent} from "./mer-list/mer-list.component";
+
+export const MERCHANT_ROUTES: Routes = [
+  { path: 'mer-list', component: MerListComponent },
+  { path: 'mer-add', component: MerAddComponent }
+];

src/app/servies/merchant/mer.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../environments/environment";
+import {ObjectData} from "../../utils/objectData.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MerService {
+
+  constructor(private http: HttpClient) { }
+
+  /**
+   * 创建商户
+   * @param params
+   * @param callBack
+   */
+  public create(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'mer/create', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 修改商户
+   * @param params
+   * @param callBack
+   */
+  public update(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'mer/update', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询商户
+   * @param merNo
+   * @param callBack
+   */
+  public queryMer(merNo: string, callBack:any) {
+    this.http.get(environment.baseUrl + 'mer/queryMer?merNo=' + merNo).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询商户列表
+   * @param params
+   * @param callBack
+   */
+  public queryList(params: object, callBack:any) {
+    this.http.get(environment.baseUrl + 'mer/queryList?' + ObjectData.objectByString(params)).subscribe(data => {
+      callBack(data);
+    });
+  }
+}