Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加银行卡绑卡

Browse Source
This commit is contained in:
潘晓云
2022-04-21 20:36:45 +08:00
parent ffdd559370
commit ee4f07ee8d
18 changed files with 683 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/routes/financial-management/components/bank-card-management/add/add.component.html Normal file
View File

@ -0,0 +1,22 @@
<page-header-wrapper [title]="''"></page-header-wrapper>
<div>
<div class="setp">
<nz-steps [nzCurrent]="current">
<nz-step *ngFor="let step of this.steps; trackBy: trackById" [nzTitle]="step.title"
[nzPercentage]="step.async ? step.percentage : null"></nz-step>
</nz-steps>
</div>
<nz-card>
<div class="content">
<app-cwc-bank-card-management-bind *ngIf="current === 0" (toNextStep)="changeCurrent($event)">
</app-cwc-bank-card-management-bind>
<div *ngIf="current === 2">
<nz-result nzStatus="success" nzTitle="绑卡成功" nzSubTitle="后续您可以使用该卡在平台进行充值">
<div nz-result-extra>
<button nz-button nzType="primary" (click)="toBandCardPage()">回到银行卡列表</button>
</div>
</nz-result>
</div>
</div>
</nz-card>
</div>

8
src/app/routes/financial-management/components/bank-card-management/add/add.component.less Normal file
View File

@ -0,0 +1,8 @@
:host {
.setp,
.content {
width: 40%;
margin: 50px auto;
}
}

24
src/app/routes/financial-management/components/bank-card-management/add/add.component.spec.ts Normal file
View File

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

93
src/app/routes/financial-management/components/bank-card-management/add/add.component.ts Normal file
View File

@ -0,0 +1,93 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { cacheConf } from '@conf/cache.conf';
import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
import { EACacheService } from '@shared';
import { NzModalService } from 'ng-zorro-antd/modal';
import { BankCardManagementService } from '../../../services/bank-card-management.service';
interface EmitType {
success: boolean,
current: number,
value: object
};
@Component({
selector: 'app-cwc-bank-card-management-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.less']
})
export class CwcBankCardManagementAddComponent implements OnInit {
schema: SFSchema = {};
ui: SFUISchema = {};
record: any;
i: any;
userInfo: any = {};
bankBranchName = '';
bankArea = '';
bankName = '';
loading = false;
current = 0; // 当前节点
verifyInfo = {};
steps: Array<any> = [
{
id: 1,
title: `绑定银行卡`,
async: false,
percentage: null
},
{
id: 2,
title: `小额鉴权`,
async: false,
percentage: null
},
{
id: 3,
title: `完成`,
async: false,
percentage: null
},
];
@ViewChild('sf', { static: false }) sf!: SFComponent;
networkTransporterId = '';
bankSfInfo: any = {} // 银行卡信息;
smallAuthentication: any = {}; //小额鉴权信息
branchBanks: any[] = [];
constructor(public service: BankCardManagementService,
public modalService: NzModalService, public router: Router,
public ar: ActivatedRoute, public eaCacheSrv: EACacheService) {
this.networkTransporterId = this.eaCacheSrv.get(cacheConf.env)?.networkTransporterId
}
ngOnInit() {
}
trackById(_: number, item: any): number {
return item.id;
}
formatCard() {
return /[1-9]\d{12,18}/;
}
changeCurrent(e: EmitType) {
if (e && e?.success) {
this.current = e?.current;
if (this.current === 1) {
this.bankSfInfo = e?.value;
}
}
}
toBandCardPage() {
this.router.navigate(['../index'], {
relativeTo: this.ar
});
}
}

8
src/app/routes/financial-management/components/bank-card-management/bind/bind.component.html Normal file
View File

@ -0,0 +1,8 @@
<div>
<sf #sf [schema]="schema" button="none" [ui]="ui">
</sf>
<div class="modal-footer" style="margin-left: 120px;">
<button nzType="primary" (click)="submit()" [disabled]="!sf?.valid" [nzLoading]="service.http.loading"
nz-button>保存</button>
</div>
</div>

24
src/app/routes/financial-management/components/bank-card-management/bind/bind.component.spec.ts Normal file
View File

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

141
src/app/routes/financial-management/components/bank-card-management/bind/bind.component.ts Normal file
View File

@ -0,0 +1,141 @@
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { cacheConf } from '@conf/cache.conf';
import { SFComponent, SFSchema, SFStringWidgetSchema, SFUISchema } from '@delon/form';
import { EACacheService } from '@shared';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { BankCardManagementService } from '../../../services/bank-card-management.service';
interface EmitType {
success: boolean,
current: number,
value: object
};
@Component({
selector: 'app-cwc-bank-card-management-bind',
templateUrl: './bind.component.html',
})
export class CwcBankCardManagementBindComponent implements OnInit {
schema: SFSchema = {};
ui: SFUISchema = {};
record: any;
i: any;
userInfo: any = {};
bankBranchName = '';
bankArea = '';
bankName = '';
loading = false;
current = 0; // 当前节点
@Output() toNextStep = new EventEmitter<EmitType>();
@ViewChild('sf', { static: false }) sf!: SFComponent;
enterpriseName = '';
branchBanks: any[] = [];
constructor(public service: BankCardManagementService, public modalService: NzModalService, public eaCacheSrv: EACacheService, public modalRef: NzModalRef) {
}
ngOnInit() {
this.initSF();
}
initSF() {
this.schema = {
properties: {
bankAccountName: {
type: 'string',
title: '企业名称',
default: this.i?.ltdName,
ui: {
widget: 'text'
}
},
bankCardNumber: {
type: 'string',
title: '银行卡号',
maxLength: 21,
ui: {
showRequired: true,
placeholder: '请输入银行卡号',
autocomplete: 'off'
} as SFStringWidgetSchema,
},
bankName: {
type: 'string',
title: '开户银行',
// readOnly: true,
ui: {
showRequired: true,
autocomplete: 'off',
placeholder: '请输入开户银行',
} as SFStringWidgetSchema,
},
ltdId: {
type: 'string',
title: '',
default: this.i?.ltdId,
ui: {
widget: 'text',
hidden: true
}
},
// bankBranchName: {
// type: 'string',
// title: '开户支行',
// ui: {
// showRequired: true,
// placeholder: '请输入开户支行',
// autocomplete: 'off'
// },
// },
// bankBranchCode: {
// type: 'string',
// title: '联行号',
// ui: {
// placeholder: '请输入联行号'
// },
// },
mobile: {
type: 'string',
title: '手机号',
maxLength: 11,
format: 'mobile',
ui: {
placeholder: '请输入手机号'
},
},
},
required: ['bankCardNumber', 'mobile', 'bankName'],
};
this.ui = {
'*': {
spanLabelFixed: 120,
grid: { span: 18 },
},
};
}
trackById(_: number, item: any): number {
return item.id;
}
submit() {
if (this.sf.valid) {
this.service.request(this.service.$api_bank_card_add, { ...this.sf.value }).subscribe(res => {
if (res) {
this.modalRef.destroy(true);
}
})
}
}
formatCard() {
return /[1-9]\d{12,18}/;
}
}

33
src/app/routes/financial-management/components/bank-card-management/index/index.component.html Normal file
View File

@ -0,0 +1,33 @@
<page-header-wrapper [title]="''"> </page-header-wrapper>
<nz-spin [nzSpinning]="service?.http?.loading"></nz-spin>
<div class="bankcard-content p-md">
<h3>{{ltdName}}</h3>
<div class="member-rights-container">
<nz-card class="single-card" *ngFor="let item of list">
<div class="bank-account-content">
<div class="mr-sm">
<nz-avatar [nzSrc]="item.bankLogoUrl" [nzSize]="50"></nz-avatar>
</div>
<div class="bank-card-right">
<div class="bank-card-title">
<div class="bank-card-name font-weight-bold text-md">{{ item.bankName }}</div>
<div class="text-md">{{item.bankCardNumber}}</div>
</div>
<div class="bank-account-txt mt-md mb-md">{{ item.bankAccountName }}</div>
</div>
</div>
<div class="text-right">
<button nzSize="default" class="del-btn" (click)="del(item)" acl [acl-ability]="['BankCardManagement-Delete']"
nz-button>删除</button>
</div>
<!-- <ng-template #actionEdit>
<span (click)="edit(item)"><i nz-icon nzType="form" nzTheme="outline"></i></span>
</ng-template> -->
</nz-card>
<button class="single-card add-btn" nz-button nzType="dashed" nzBlock (click)="add()">
<i nz-icon nzType="plus" nzTheme="outline" acl [acl-ability]="['BankCardManagement-Add']"></i>添加银行账户
</button>
</div>
</div>

78
src/app/routes/financial-management/components/bank-card-management/index/index.component.less Normal file
View File

@ -0,0 +1,78 @@
:host {
::ng-deep {
.ant-card-actions {
border-color: #ccc;
}
.single-card {
.ant-card-body {
padding: 24px 12px;
}
}
}
.member-rights-container {
display: flex;
flex-wrap: wrap;
.single-card {
position: relative;
width: 320px;
height: 150px;
margin-right: 20px;
border-color: #ccc;
overflow: hidden;
.default-flag {
position: absolute;
top: 20px;
right: 80px;
padding: 0 5px;
color: #fff;
background-color: #52C41A;
border-radius: 1px;
}
.bank-account-content {
display: flex;
.bank-card-right {
flex: 1;
overflow: hidden;
}
.bank-card-title {
display: flex;
.bank-card-name {
display: inline-block;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.bank-account-txt {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.del-btn {
padding-top: 0;
padding-bottom: 0;
border-radius: 5px;
height: 30px;
}
}
}
.bankcard-content {
height: 100%;
background-color: #fff;
}
}

24
src/app/routes/financial-management/components/bank-card-management/index/index.component.spec.ts Normal file
View File

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

92
src/app/routes/financial-management/components/bank-card-management/index/index.component.ts Normal file
View File

@ -0,0 +1,92 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NzModalService } from 'ng-zorro-antd/modal';
import { BankCardManagementService } from '../../../services/bank-card-management.service';
import { CwcBankCardManagementAddComponent } from '../add/add.component';
import { CwcBankCardManagementBindComponent } from '../bind/bind.component';
@Component({
selector: 'app-cwc-bank-card-management-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.less']
})
export class CwcBankCardManagementIndexComponent implements OnInit {
list: any = [];
ltdId = '';
ltdName = '';
constructor(public modal: NzModalService, public service: BankCardManagementService, public router: Router, public ar: ActivatedRoute) { }
ngOnInit() {
this.ltdId = this.ar.snapshot.queryParams?.ltdId;
this.ltdName = this.ar.snapshot.queryParams?.ltdName;
this.getBankList(this.ltdId);
}
getBankList(roleId = '') {
this.service.request(this.service.$api_bank_card_list, { roleId, accountType: '3' }).subscribe((res) => {
if (res) {
this.list = res;
}
});
}
add() {
const modalRef = this.modal.create({
nzTitle: '添加银行卡',
nzContent: CwcBankCardManagementBindComponent,
nzWidth: '40%',
nzFooter: null,
nzComponentParams: {
i: {
ltdId: this.ltdId,
ltdName: this?.ltdName
}
}
});
modalRef.afterOpen.subscribe(() => { });
modalRef.afterClose.subscribe((result) => {
if (result === true) {
this.getBankList(this.ltdId);
}
});
}
edit(record: any) {
const modalRef = this.modal.create({
nzTitle: '编辑',
nzWidth: '700',
nzContent: CwcBankCardManagementAddComponent,
nzComponentParams: {
record,
},
nzFooter: null,
nzMaskClosable: false,
});
modalRef.afterOpen.subscribe(() => { });
modalRef.afterClose.subscribe((result) => {
if (result) {
this.getBankList();
}
});
}
// 删除
del(record: any) {
this.modal.confirm({
nzTitle: '<b>确认删除该银行账户吗？</b>',
nzContent: `<p>银行卡号: ${record.bankCardNumber}</p>`,
nzOnOk: () =>
this.service.request(this.service.$api_bank_card_del, { id: record.id, ltdId: this.ltdId }).subscribe((res) => {
if (res === true) {
this.service.msgSrv.success('数据删除成功！');
this.getBankList();
}
}),
});
}
formatBankCard(value: any) {
return value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
}
}

7
src/app/routes/financial-management/components/platform-account/platform-account.component.html
View File

@ -39,12 +39,11 @@
<nz-card class="search-box">
<div nz-row nzGutter="8">
<div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #sf [schema]="searchSchema"
[ui]="{ '*': { spanLabelFixed: 110,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}" [compact]="true"
[button]="'none'"></sf>
<sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 110,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}"
[compact]="true" [button]="'none'"></sf>
</div>
<div nz-col [nzXl]="6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right">
<button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
<button nz-button nzType="primary" (click)="st?.load(1)">查询</button>
<button nz-button (click)="resetSF()">重置</button>
<button nz-button (click)="exportList()"> 导出</button>
</div>

54
src/app/routes/financial-management/components/platform-account/platform-account.component.ts
View File

@ -4,6 +4,7 @@ import { STComponent, STColumn, STChange, STRequestOptions } from '@delon/abc/st
import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
import { NzModalService } from 'ng-zorro-antd/modal';
import { FreightAccountService } from '../../services/freight-account.service';
import { CwcBankCardManagementBindComponent } from '../bank-card-management/bind/bind.component';
@Component({
selector: 'app-platform-account',
@ -21,7 +22,7 @@ export class PlatformAccountComponent implements OnInit {
info: any = {};
static: any = {};
constructor(public service: FreightAccountService, private router: Router, private nzModalService: NzModalService) {}
constructor(public service: FreightAccountService, private router: Router, private nzModalService: NzModalService, public modal: NzModalService) { }
ngOnInit(): void {
this.loadInfo();
@ -179,22 +180,63 @@ export class PlatformAccountComponent implements OnInit {
},
{
title: '操作',
width: 100,
className: 'text-center',
width: 120,
className: 'text-center block-td',
fixed: 'right',
buttons: [
{
text: '查看明细',
text: '查看明细 ',
click: item =>
this.router.navigate(['/financial-management/platform-account/detail/' + item.id], {
queryParams: { ltdId: item.ltdId, bankType: item.bankType, ltdName: `${item.ltdName}(${item.bankTypeLabel})` }
})
}
},
{
text: '绑定银行卡',
click: item => this.bindBankcard(item)
},
{
text: '查看银行卡',
click: item => this.viewBankcard(item)
},
]
}
];
}
/**
* 绑定银行卡
*/
bindBankcard(item: any) {
const modalRef = this.modal.create({
nzTitle: '绑定银行卡',
nzContent: CwcBankCardManagementBindComponent,
nzWidth: '40%',
nzFooter: null,
nzComponentParams: {
i: item
}
});
modalRef.afterOpen.subscribe(() => { });
modalRef.afterClose.subscribe((result) => {
if (result) this.st.reload();
});
}
/**
* 查看银行卡
*/
viewBankcard(item: any) {
this.router.navigate(['/financial-management/bank-card-management/index'], {
queryParams: {
ltdId: item?.ltdId,
ltdName: item?.ltdName
}
});
}
exportList() {
this.service.exportStart( { ...this.sf.value, pageSize: -1 }, this.service.$api_get_exportPlatformAccountBalanceByOperator,);
this.service.exportStart({ ...this.sf.value, pageSize: -1 }, this.service.$api_get_exportPlatformAccountBalanceByOperator,);
}
}

7
src/app/routes/financial-management/financial-managemen-routing.module.ts
View File

@ -33,6 +33,7 @@ import { AdvanceCollectionComponent } from './components/advance-collection/adva
import { AdvanceCollectionDetailComponent } from './components/advance-collection/advance-collection-detail/advance-collection-detail.component';
import { RefundRecordComponent } from './components/refund-record/refund-record.component';
import { AbnormalGoldDetailComponent } from './components/abnormal-gold/abnormal-gold-detail/abnormal-gold-detail.component';
import { CwcBankCardManagementIndexComponent } from './components/bank-card-management/index/index.component';
const routes: Routes = [
{ path: 'freight-account', component: FreightAccountComponent, data: { guard: { ability: ['FINANCIAL-FREIGHT-ACOUNT-list'] } } },
@ -68,11 +69,13 @@ const routes: Routes = [
{ path: 'receivable-order', component: ReceivableOrderComponent },
{ path: 'receivable-order/detail/:id', component: ReceivableOrderDetailComponent },
{ path: 'payable-order', component: PayableOrderComponent },
{ path: 'payable-order/detail/:id', component: PayableOrderDetailComponent }
{ path: 'payable-order/detail/:id', component: PayableOrderDetailComponent },
{ path: 'bank-card-management/index', component: CwcBankCardManagementIndexComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FinancialManagementRoutingModule {}
export class FinancialManagementRoutingModule { }

10
src/app/routes/financial-management/financial-management.module.ts
View File

@ -36,6 +36,9 @@ import { AdvanceCollectionComponent } from './components/advance-collection/adva
import { AdvanceCollectionDetailComponent } from './components/advance-collection/advance-collection-detail/advance-collection-detail.component';
import { RefundRecordComponent } from './components/refund-record/refund-record.component';
import { AbnormalGoldDetailComponent } from './components/abnormal-gold/abnormal-gold-detail/abnormal-gold-detail.component';
import { CwcBankCardManagementIndexComponent } from './components/bank-card-management/index/index.component';
import { CwcBankCardManagementBindComponent } from './components/bank-card-management/bind/bind.component';
import { CwcBankCardManagementAddComponent } from './components/bank-card-management/add/add.component';
const ROUTESCOMPONENTS = [
FreightAccountComponent,
@ -68,7 +71,10 @@ const ROUTESCOMPONENTS = [
AdvanceCollectionComponent,
AdvanceCollectionDetailComponent,
RefundRecordComponent,
AbnormalGoldDetailComponent
AbnormalGoldDetailComponent,
CwcBankCardManagementIndexComponent,
CwcBankCardManagementBindComponent,
CwcBankCardManagementAddComponent
];
const NOTROUTECOMPONENTS = [DriverAccountDetailComponent, FreightAccountDetailComponent, ClearingModalComponent];
@ -77,4 +83,4 @@ const NOTROUTECOMPONENTS = [DriverAccountDetailComponent, FreightAccountDetailCo
declarations: [...ROUTESCOMPONENTS, ...NOTROUTECOMPONENTS],
imports: [CommonModule, FinancialManagementRoutingModule, SharedModule]
})
export class FinancialManagementModule {}
export class FinancialManagementModule { }

14
src/app/routes/financial-management/services/bank-card-management.service.ts Normal file
View File

@ -0,0 +1,14 @@
import { Injectable, Injector } from '@angular/core';
import { BaseService } from '@shared';
@Injectable({
providedIn: 'root'
})
export class BankCardManagementService extends BaseService {
$api_bank_card_list = `/api/fcc/bankInfoOBC/list/myBankInfo`; // 获取银行卡列表
$api_bank_card_del = `/api/fcc/bankInfoOBC/delete`; // 删除银行卡
$api_bank_card_add = `/api/fcc/bankInfoOBC/save`;//新增银行卡
constructor(public injector: Injector) {
super(injector);
}
}

4
src/app/shared/shared-zorro.module.ts
View File

@ -49,6 +49,7 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
import { NzImageModule } from 'ng-zorro-antd/image';
import { NzDrawerModule } from 'ng-zorro-antd/drawer';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
export const SHARED_ZORRO_MODULES = [
NzButtonModule,
@ -92,5 +93,6 @@ export const SHARED_ZORRO_MODULES = [
NzSwitchModule,
NzImageModule,
NzDrawerModule,
NzTreeSelectModule
NzTreeSelectModule,
NzAvatarModule
];

7
src/assets/mocks/menu-data.json
View File

@ -322,6 +322,10 @@
{
"text": "交易流水",
"link": "/financial-management/transaction-flow"
},
{
"text": "银行卡管理",
"link": "/financial-management/bank-card-management/index"
}
]
},
@ -686,8 +690,7 @@
"text": "税务管理",
"icon": "iconfont icon-hetong-copy",
"group": true,
"children": [
{
"children": [{
"text": "订单上报",
"link": "/tax/orderReport"
},