个人中心
This commit is contained in:
wangshiming
1
.husky/.gitignore
vendored
Normal file
1
.husky/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
_
|
||||||
@ -4,7 +4,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<nz-dropdown-menu #userMenu="nzDropdownMenu">
|
<nz-dropdown-menu #userMenu="nzDropdownMenu">
|
||||||
<div nz-menu class="width-sm">
|
<div nz-menu class="width-sm">
|
||||||
<div nz-menu-item routerLink="/pro/account/center">
|
<div nz-menu-item routerLink="/account/center">
|
||||||
<i nz-icon nzType="user" class="mr-sm"></i>
|
<i nz-icon nzType="user" class="mr-sm"></i>
|
||||||
个人中心
|
个人中心
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
31
src/app/routes/account/account-routing.module.ts
Normal file
31
src/app/routes/account/account-routing.module.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 11:06:01
|
||||||
|
* @LastEditTime: 2021-11-29 14:21:56
|
||||||
|
* @LastEditors: your name
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\account\account-routing.module.ts
|
||||||
|
*/
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { AccountComponentsCenterComponent } from './components/center/center.component';
|
||||||
|
import { AccountComponentsEditInfoComponent } from './components/edit-info/edit-info.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{ path: '', redirectTo: 'center', pathMatch: 'full' },
|
||||||
|
{
|
||||||
|
path: 'center',
|
||||||
|
component: AccountComponentsCenterComponent,
|
||||||
|
data: {
|
||||||
|
title: '账户中心',
|
||||||
|
titleI18n: 'app.my.center',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ path: 'editInfo', component: AccountComponentsEditInfoComponent },
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule],
|
||||||
|
})
|
||||||
|
export class AccountRoutingModule {}
|
||||||
29
src/app/routes/account/account.module.ts
Normal file
29
src/app/routes/account/account.module.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 11:06:01
|
||||||
|
* @LastEditTime: 2021-11-29 15:04:25
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\account\account.module.ts
|
||||||
|
*/
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { SharedModule } from '@shared';
|
||||||
|
import { AccountRoutingModule } from './account-routing.module';
|
||||||
|
import { AccountComponentsCenterComponent } from './components/center/center.component';
|
||||||
|
import { AccountComponentsEditInfoComponent } from './components/edit-info/edit-info.component';
|
||||||
|
import { AccountComponentsEditNameComponent } from './components/edit-name/edit-name.component';
|
||||||
|
import { AccountComponentsCenterEditComponent } from './components/edit-password/edit-password.component';
|
||||||
|
|
||||||
|
const COMPONENTS = [
|
||||||
|
AccountComponentsCenterComponent,
|
||||||
|
AccountComponentsEditNameComponent,
|
||||||
|
AccountComponentsEditInfoComponent,
|
||||||
|
AccountComponentsCenterEditComponent
|
||||||
|
];
|
||||||
|
const COMPONENTS_NOROUNT = [AccountComponentsEditNameComponent];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [SharedModule, AccountRoutingModule],
|
||||||
|
declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT],
|
||||||
|
})
|
||||||
|
export class AccountModule {}
|
||||||
131
src/app/routes/account/components/center/center.component.html
Normal file
131
src/app/routes/account/components/center/center.component.html
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<div class="main">
|
||||||
|
<nz-card style="margin-top: 20px; min-height: 780px;">
|
||||||
|
<!-- <div nz-row [nzGutter]="8">
|
||||||
|
<div nz-col nzSpan="4">
|
||||||
|
<ul nz-menu nzMode="inline" class="card-height" style="height: 100%">
|
||||||
|
<li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(idx)" *ngFor="let item of tabs; let idx = index">
|
||||||
|
{{ item.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div nz-col nzSpan="20" style="overflow: scroll">
|
||||||
|
<div class="info-main">
|
||||||
|
<div *ngIf="idx === 0">
|
||||||
|
<h3>基础信息</h3>
|
||||||
|
<sf #sf mode="default" layout="vertical" [formData]="infoData" [schema]="schema" [ui]="ui" button="none"></sf>
|
||||||
|
<button class="but_rigth" nz-button nzSize="large" nzType="primary" (click)="formSubmit(sf.value)">保存</button>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="idx !== 0">
|
||||||
|
<h3>安全设置</h3>
|
||||||
|
<nz-list style="border-bottom: 1px solid #f0f0f0">
|
||||||
|
<nz-list-item>
|
||||||
|
<nz-list-item-meta>
|
||||||
|
<nz-list-item-meta-title>
|
||||||
|
<div nz-row [nzGutter]="16">
|
||||||
|
<div nz-col [nzSpan]="4" class="li-label">
|
||||||
|
<span class="icon iconfont icon-shoujihao" style="color: #aaa"></span> 手机号码
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="10">{{ infoData.phone }}</div>
|
||||||
|
<div nz-col [nzSpan]="10">
|
||||||
|
<span *ngIf="infoData.phone; else elsePhone"
|
||||||
|
><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'" style="color: #52c41a"></i> 已绑定</span
|
||||||
|
>
|
||||||
|
<ng-template #elsePhone
|
||||||
|
><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'" style="color: #ccc"></i> 未绑定</ng-template
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-list-item-meta-title>
|
||||||
|
</nz-list-item-meta>
|
||||||
|
<div class="item-btn"><a (click)="edit('phone')">修改</a></div>
|
||||||
|
</nz-list-item>
|
||||||
|
<nz-list-item>
|
||||||
|
<nz-list-item-meta>
|
||||||
|
<nz-list-item-meta-title>
|
||||||
|
<div nz-row [nzGutter]="16">
|
||||||
|
<div nz-col [nzSpan]="4" class="li-label">
|
||||||
|
<span class="icon iconfont icon-mima" style="color: #aaa"></span> 登录密码
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="10">定期更换密码有助于账号安全</div>
|
||||||
|
<div nz-col [nzSpan]="10">
|
||||||
|
<span *ngIf="infoData.isPwd; else elsePwd"
|
||||||
|
><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'" style="color: #52c41a"></i> 已设置</span
|
||||||
|
>
|
||||||
|
<ng-template #elsePwd
|
||||||
|
><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'" style="color: #ccc"></i> 未设置</ng-template
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-list-item-meta-title>
|
||||||
|
</nz-list-item-meta>
|
||||||
|
<div class="item-btn"><a (click)="edit('password')">修改</a></div>
|
||||||
|
</nz-list-item>
|
||||||
|
</nz-list>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<h3 style="font-size: 20px; font-weight: 700;">个人中心</h3>
|
||||||
|
<nz-list style="border-bottom: 1px solid #f0f0f0">
|
||||||
|
<nz-list-item>
|
||||||
|
<nz-list-item-meta>
|
||||||
|
<nz-list-item-meta-title>
|
||||||
|
<div nz-row [nzGutter]="16">
|
||||||
|
<div nz-col [nzSpan]="4" class="li-label">
|
||||||
|
<span class="icon iconfont icon-shoujihao" style="color: #aaa"></span> 手机号码/账号
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="10">{{ infoData.phone }}</div>
|
||||||
|
<div nz-col [nzSpan]="10">
|
||||||
|
<span *ngIf="infoData.phone; else elsePhone"
|
||||||
|
><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'" style="color: #52c41a"></i> 已绑定</span
|
||||||
|
>
|
||||||
|
<ng-template #elsePhone
|
||||||
|
><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'" style="color: #ccc"></i> 未绑定</ng-template
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-list-item-meta-title>
|
||||||
|
</nz-list-item-meta>
|
||||||
|
<div class="item-btn"><a (click)="edit('phone')">修改</a></div>
|
||||||
|
</nz-list-item>
|
||||||
|
<nz-list-item>
|
||||||
|
<nz-list-item-meta>
|
||||||
|
<nz-list-item-meta-title>
|
||||||
|
<div nz-row [nzGutter]="16">
|
||||||
|
<div nz-col [nzSpan]="4" class="li-label">
|
||||||
|
<span class="icon iconfont icon-mima" style="color: #aaa"></span> 账户密码
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="10">定期更换密码有助于账号安全</div>
|
||||||
|
<div nz-col [nzSpan]="10">
|
||||||
|
<span *ngIf="infoData.isPwd; else elsePwd"
|
||||||
|
><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'" style="color: #52c41a"></i> 已设置</span
|
||||||
|
>
|
||||||
|
<ng-template #elsePwd
|
||||||
|
><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'" style="color: #ccc"></i> 未设置</ng-template
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-list-item-meta-title>
|
||||||
|
</nz-list-item-meta>
|
||||||
|
<div class="item-btn"><a (click)="edit('password')">修改</a></div>
|
||||||
|
</nz-list-item>
|
||||||
|
</nz-list>
|
||||||
|
<!-- <div class="info">
|
||||||
|
<nz-card style="width: 100%; margin-top: 16px" [nzBordered]="false">
|
||||||
|
<nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="infoData.nickName" [nzDescription]="content"></nz-card-meta>
|
||||||
|
<ng-template #avatarTemplate>
|
||||||
|
<nz-avatar
|
||||||
|
style="width: 80px; height: 80px; border: 1px solid #979797; border-radius: 100%"
|
||||||
|
[nzSrc]="infoData.avatar"
|
||||||
|
></nz-avatar>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template #content>
|
||||||
|
<div>用户名：{{ infoData.name }} | 手机号：{{ infoData.phone }}</div>
|
||||||
|
<div>性别：{{ infoData.sexName }} | 生日：{{ infoData.birthday }}</div>
|
||||||
|
<div>真实姓名：{{ infoData.realName }} | 身份证号码：{{ infoData.certificateNumber }}</div>
|
||||||
|
</ng-template>
|
||||||
|
</nz-card>
|
||||||
|
<a (click)="edit('info')" class="info-btn">修改</a>
|
||||||
|
</div> -->
|
||||||
|
</nz-card>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
:host {
|
||||||
|
::ng-deep {
|
||||||
|
.info-main {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
.info-main h3 {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.info-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
.item-btn {
|
||||||
|
width: 28px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.li-label {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
page-grid {
|
||||||
|
background-color: #f0f3f7;
|
||||||
|
|
||||||
|
div.container {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-row {
|
||||||
|
padding: 24px 0;
|
||||||
|
.info-icon {
|
||||||
|
margin-right: 15px;
|
||||||
|
color: #3875fb;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { AccountComponentsCenterComponent } from './center.component';
|
||||||
|
|
||||||
|
describe('AccountComponentsCenterComponent', () => {
|
||||||
|
let component: AccountComponentsCenterComponent;
|
||||||
|
let fixture: ComponentFixture<AccountComponentsCenterComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [AccountComponentsCenterComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(AccountComponentsCenterComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
211
src/app/routes/account/components/center/center.component.ts
Normal file
211
src/app/routes/account/components/center/center.component.ts
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form';
|
||||||
|
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||||
|
import { Observable, Observer } from 'rxjs';
|
||||||
|
import { AccountService } from '../../services/account.service';
|
||||||
|
import { AccountComponentsEditNameComponent } from '../edit-name/edit-name.component';
|
||||||
|
import { NzModalService } from 'ng-zorro-antd/modal';
|
||||||
|
import { AccountComponentsCenterEditComponent } from '../edit-password/edit-password.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-account-components-center',
|
||||||
|
templateUrl: './center.component.html',
|
||||||
|
styleUrls: ['./center.component.less'],
|
||||||
|
})
|
||||||
|
export class AccountComponentsCenterComponent implements OnInit {
|
||||||
|
url = `/rule?_allow_anonymous=true`;
|
||||||
|
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||||
|
i: any;
|
||||||
|
formDate: any = {};
|
||||||
|
schema!: SFSchema;
|
||||||
|
ui: SFUISchema = {};
|
||||||
|
infoData: any = {
|
||||||
|
appId: '',
|
||||||
|
appTypeId: 0,
|
||||||
|
appTypeName: '',
|
||||||
|
appUserId: 0,
|
||||||
|
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png?_allow_anonymous=true',
|
||||||
|
birthday: '',
|
||||||
|
cert: 0,
|
||||||
|
createTime: '',
|
||||||
|
email: '',
|
||||||
|
id: 0,
|
||||||
|
isPwd: true,
|
||||||
|
lastLoginDate: '',
|
||||||
|
name: '',
|
||||||
|
nickName: '',
|
||||||
|
openId: '',
|
||||||
|
phone: '',
|
||||||
|
remark: '',
|
||||||
|
sex: 0,
|
||||||
|
state: 0,
|
||||||
|
stateLocked: true,
|
||||||
|
token: '',
|
||||||
|
userType: 0,
|
||||||
|
};
|
||||||
|
tabs = [
|
||||||
|
{
|
||||||
|
name: '基本设置',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '安全设置',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
idx: any = 0;
|
||||||
|
constructor(public service: AccountService, private modal: ModalHelper, private http: _HttpClient, private router: Router, private modalService: NzModalService,) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.initSF();
|
||||||
|
this.getInfo();
|
||||||
|
}
|
||||||
|
initSF() {
|
||||||
|
this.schema = {
|
||||||
|
properties: {
|
||||||
|
avatar: {
|
||||||
|
type: 'string',
|
||||||
|
title: '头像',
|
||||||
|
ui: {
|
||||||
|
action: `/cms/upload/multipartFile/fileModel?_allow_anonymous=true`,
|
||||||
|
fileType: 'image/png,image/jpeg,image/jpg,image/png,image/gif,image/bmp',
|
||||||
|
limit: 1,
|
||||||
|
limitFileCount: 1,
|
||||||
|
resReName: 'url',
|
||||||
|
urlReName: 'url',
|
||||||
|
widget: 'upload',
|
||||||
|
descriptionI18n: '支持JPG、GIF、PNG、JPEG、BMP格式，文件小于2M',
|
||||||
|
data: {
|
||||||
|
// appId: environment.appId,
|
||||||
|
},
|
||||||
|
name: 'multipartFile',
|
||||||
|
multiple: false,
|
||||||
|
listType: 'picture-card',
|
||||||
|
change: (args: any) => {
|
||||||
|
if (args.type === 'success') {
|
||||||
|
const avatar = [
|
||||||
|
{
|
||||||
|
uid: -1,
|
||||||
|
name: 'LOGO',
|
||||||
|
status: 'done',
|
||||||
|
url: args.fileList[0].response.url,
|
||||||
|
response: {
|
||||||
|
url: args.fileList[0].response.url,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.sf?.setValue('/avatar', avatar);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUpload: (file: any, _fileList) => {
|
||||||
|
return new Observable((observer: Observer<boolean>) => {
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.service.msgSrv.warning('图片大小超过2M!');
|
||||||
|
observer.complete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
observer.next(isLt2M);
|
||||||
|
observer.complete();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
} as SFUploadWidgetSchema,
|
||||||
|
},
|
||||||
|
nickName: {
|
||||||
|
title: '昵称',
|
||||||
|
type: 'string',
|
||||||
|
minLength: 1,
|
||||||
|
maxLength: 18,
|
||||||
|
ui: {
|
||||||
|
placeholder: '请输入昵称',
|
||||||
|
width: 400,
|
||||||
|
errors: {
|
||||||
|
required: '请输入昵称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
required: ['nickName', 'avatar'],
|
||||||
|
};
|
||||||
|
this.ui = {
|
||||||
|
'*': {
|
||||||
|
spanLabel: 5,
|
||||||
|
grid: { span: 24 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
getInfo() {
|
||||||
|
const params = {
|
||||||
|
// id: this.i.id,
|
||||||
|
};
|
||||||
|
// this.service.http.post(this.service.$api_getUserInfo, params).subscribe((res) => {
|
||||||
|
// this.infoData = res.data;
|
||||||
|
// this.infoData.avatar = [
|
||||||
|
// {
|
||||||
|
// uid: -1,
|
||||||
|
// name: 'LOGO',
|
||||||
|
// status: 'done',
|
||||||
|
// url: res.data.avatar,
|
||||||
|
// response: {
|
||||||
|
// url: res.data.avatar,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(tpye: string) {
|
||||||
|
if (tpye === 'phone') {
|
||||||
|
const modalRef = this.modalService.create({
|
||||||
|
nzTitle: '修改用户名',
|
||||||
|
nzContent: AccountComponentsEditNameComponent,
|
||||||
|
nzComponentParams: { },
|
||||||
|
});
|
||||||
|
modalRef.afterClose.subscribe((result: any) => {
|
||||||
|
if (result === true) {
|
||||||
|
// this.st.load(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (tpye === 'password') {
|
||||||
|
|
||||||
|
const modalRef = this.modalService.create({
|
||||||
|
nzTitle: '设置/修改登录密码',
|
||||||
|
nzContent: AccountComponentsCenterEditComponent,
|
||||||
|
nzComponentParams: { },
|
||||||
|
});
|
||||||
|
modalRef.afterClose.subscribe((result: any) => {
|
||||||
|
if (result === true) {
|
||||||
|
// this.st.load(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// if (tpye === 'info') {
|
||||||
|
// this.router.navigate(['/account/editInfo'], {
|
||||||
|
// queryParams: { realName: this.infoData.realName, certificateNumber: this.infoData.certificateNumber },
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// if (tpye === 'name') {
|
||||||
|
// this.modal
|
||||||
|
// .createStatic(AccountComponentsEditNameComponent, { i: { name: this.infoData.name, phone: this.infoData.phone } })
|
||||||
|
// .subscribe(() => {
|
||||||
|
// this.getInfo();
|
||||||
|
// // this.st.reload();
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
changeType(type: number): void {
|
||||||
|
this.idx = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
formSubmit(value: any): void {
|
||||||
|
const params = { ...value };
|
||||||
|
this.service.request(`${this.service.$api_updateUserInfo}`, params).subscribe((res) => {
|
||||||
|
if (res === true) {
|
||||||
|
this.service.msgSrv.success('保存成功');
|
||||||
|
this.getInfo();
|
||||||
|
// this.initSF();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<div class="main">
|
||||||
|
<nz-card nzTitle="修改账户信息" style="margin-top: 20px">
|
||||||
|
<div class="myForm">
|
||||||
|
<sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" [formData]="formData"></sf>
|
||||||
|
<form nz-form>
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-control [nzSpan]="24" [nzOffset]="5">
|
||||||
|
<button nz-button type="button" nzType="primary" (click)="formSubmit()">保存</button>
|
||||||
|
<button nz-button type="button" (click)="goBack()">取消</button>
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</nz-card>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
:host {
|
||||||
|
.myForm {
|
||||||
|
width: 600px;
|
||||||
|
margin: 5rem auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { OfficialWebsiteComponentsMemberEditInfoComponent } from './edit-info.component';
|
||||||
|
|
||||||
|
describe('OfficialWebsiteComponentsMemberEditInfoComponent', () => {
|
||||||
|
let component: OfficialWebsiteComponentsMemberEditInfoComponent;
|
||||||
|
let fixture: ComponentFixture<OfficialWebsiteComponentsMemberEditInfoComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [OfficialWebsiteComponentsMemberEditInfoComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(OfficialWebsiteComponentsMemberEditInfoComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,207 @@
|
|||||||
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form';
|
||||||
|
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||||
|
import { environment } from '@env/environment';
|
||||||
|
import { Observable, Observer } from 'rxjs';
|
||||||
|
import { AccountService } from '../../services/account.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-account-components-edit-info',
|
||||||
|
templateUrl: './edit-info.component.html',
|
||||||
|
styleUrls: ['./edit-info.component.less'],
|
||||||
|
})
|
||||||
|
export class AccountComponentsEditInfoComponent implements OnInit {
|
||||||
|
@ViewChild('sf', { static: false })
|
||||||
|
sf!: SFComponent;
|
||||||
|
i: any;
|
||||||
|
schema!: SFSchema;
|
||||||
|
ui!: SFUISchema;
|
||||||
|
formData: any = {
|
||||||
|
// avatar:[
|
||||||
|
// {
|
||||||
|
// uid: -1,
|
||||||
|
// name: 'LOGO',
|
||||||
|
// status: 'done',
|
||||||
|
// url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||||
|
// response: {
|
||||||
|
// url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// name:'西四'
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(public service: AccountService, private modal: ModalHelper, private route: ActivatedRoute) {
|
||||||
|
const { realName, identity } = route.snapshot?.queryParams;
|
||||||
|
Object.assign(this.formData, { realName, certificateNumber: identity });
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.initSF();
|
||||||
|
this.getInfo();
|
||||||
|
}
|
||||||
|
initSF() {
|
||||||
|
this.schema = {
|
||||||
|
properties: {
|
||||||
|
avatar: {
|
||||||
|
type: 'string',
|
||||||
|
title: '头像',
|
||||||
|
ui: {
|
||||||
|
// action: environment.UPLOAD_URL,
|
||||||
|
fileType: 'image/png,image/jpeg,image/jpg,image/png,image/gif,image/bmp',
|
||||||
|
limit: 1,
|
||||||
|
limitFileCount: 1,
|
||||||
|
resReName: 'url',
|
||||||
|
urlReName: 'url',
|
||||||
|
widget: 'upload',
|
||||||
|
descriptionI18n: '支持JPG、GIF、PNG、JPEG、BMP格式，文件小于2M',
|
||||||
|
data: {
|
||||||
|
// appId: environment.appId,
|
||||||
|
},
|
||||||
|
name: 'multipartFile',
|
||||||
|
multiple: false,
|
||||||
|
listType: 'picture-card',
|
||||||
|
change: (args) => {
|
||||||
|
if (args.type === 'success') {
|
||||||
|
const avatar = [
|
||||||
|
{
|
||||||
|
uid: -1,
|
||||||
|
name: 'LOGO',
|
||||||
|
status: 'done',
|
||||||
|
url: args.fileList[0].response.url,
|
||||||
|
response: {
|
||||||
|
url: args.fileList[0].response.url,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.sf?.setValue('/avatar', avatar);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUpload: (file: any, _fileList) => {
|
||||||
|
return new Observable((observer: Observer<boolean>) => {
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.service.msgSrv.warning('图片大小超过2M!');
|
||||||
|
observer.complete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
observer.next(isLt2M);
|
||||||
|
observer.complete();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
} as SFUploadWidgetSchema,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
title: '用户名',
|
||||||
|
type: 'string',
|
||||||
|
ui: {
|
||||||
|
widget: 'text',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
phone: {
|
||||||
|
title: '手机号',
|
||||||
|
type: 'string',
|
||||||
|
ui: {
|
||||||
|
widget: 'text',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
nickName: {
|
||||||
|
title: '昵称',
|
||||||
|
type: 'string',
|
||||||
|
minLength: 1,
|
||||||
|
maxLength: 18,
|
||||||
|
ui: {
|
||||||
|
placeholder: '请输入昵称',
|
||||||
|
errors: {
|
||||||
|
required: '请输入昵称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
sex: {
|
||||||
|
title: '性别',
|
||||||
|
type: 'string',
|
||||||
|
default: 0,
|
||||||
|
enum: [
|
||||||
|
{ label: '未知', value: 0 },
|
||||||
|
{ label: '男', value: 1 },
|
||||||
|
{ label: '女', value: 2 },
|
||||||
|
{ label: '保密', value: 3 },
|
||||||
|
],
|
||||||
|
ui: {
|
||||||
|
widget: 'select',
|
||||||
|
} as SFSelectWidgetSchema,
|
||||||
|
},
|
||||||
|
birthday: {
|
||||||
|
title: '生日',
|
||||||
|
type: 'string',
|
||||||
|
format: 'date',
|
||||||
|
},
|
||||||
|
realName: {
|
||||||
|
title: '真实姓名',
|
||||||
|
type: 'string',
|
||||||
|
ui: {
|
||||||
|
widget: 'text',
|
||||||
|
optionalHelp: '实名认证渠道来自供应商入驻，仅在用户同意的情况下，合理用于相关业务，且平台有义务保障您的信息安全。',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
certificateNumber: {
|
||||||
|
title: '身份证号码',
|
||||||
|
type: 'string',
|
||||||
|
ui: {
|
||||||
|
widget: 'text',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
required: ['nickName', 'sex', 'avatar'],
|
||||||
|
};
|
||||||
|
this.ui = {
|
||||||
|
'*': {
|
||||||
|
spanLabel: 5,
|
||||||
|
grid: { span: 24 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
getInfo() {
|
||||||
|
const params = {
|
||||||
|
// id: this.i.id,
|
||||||
|
};
|
||||||
|
// this.service.http.post(this.service.$api_get_current_user_detail, params).subscribe((res) => {
|
||||||
|
// this.formData = res.data;
|
||||||
|
// if (!res.data.birthday) {
|
||||||
|
// this.formData.birthday = Date;
|
||||||
|
// }
|
||||||
|
// this.formData.avatar = [
|
||||||
|
// {
|
||||||
|
// uid: -1,
|
||||||
|
// name: 'LOGO',
|
||||||
|
// status: 'done',
|
||||||
|
// url: res.data.avatar,
|
||||||
|
// response: {
|
||||||
|
// url: res.data.avatar,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
// this.formData.realName = this.route.snapshot.queryParams.realName;
|
||||||
|
// // this.formData.phone = this.route.snapshot.queryParams.phone;
|
||||||
|
// this.formData.certificateNumber = this.route.snapshot.queryParams.certificateNumber;
|
||||||
|
// this.initSF();
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
formSubmit() {
|
||||||
|
const params: any = {
|
||||||
|
...this.sf.value,
|
||||||
|
};
|
||||||
|
delete params.realName;
|
||||||
|
delete params.certificateNumber;
|
||||||
|
// this.service.http.post(this.service.$api_updateUserInfo, params).subscribe((res) => {
|
||||||
|
// if (res.data) {
|
||||||
|
// this.service.msgSrv.success('修改成功');
|
||||||
|
// this.goBack();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
goBack() {
|
||||||
|
history.go(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 11:06:01
|
||||||
|
* @LastEditTime: 2021-11-29 15:08:06
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\account\components\edit-name\edit-name.component.html
|
||||||
|
-->
|
||||||
|
<sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" [formData]="formData">
|
||||||
|
<ng-template sf-template="smsVerifyCode" let-me let-ui="ui" let-schema="schema">
|
||||||
|
<div class="valid-code">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
maxlength="6"
|
||||||
|
nz-input
|
||||||
|
[ngModel]="me.formProperty.value"
|
||||||
|
(ngModelChange)="me.setValue($event)"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
/>
|
||||||
|
<button class="btn-code" nz-button nzType="link" [disabled]="count > 0" (click)="getCaptcha()">
|
||||||
|
{{ count > 0 ? '请等待' + count + 's' : '获取验证码' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</sf>
|
||||||
|
|
||||||
|
<!-- <div class="modal-footer">
|
||||||
|
<button nz-button type="button" (click)="close()">关闭</button>
|
||||||
|
<button nz-button type="button" nzType="primary" (click)="submitForm()" [disabled]="!sf.valid">确定</button>
|
||||||
|
</div> -->
|
||||||
|
<!-- <app-captcha #dun [phone]="this.i.phone" (done)="captchaDone($event)"></app-captcha> -->
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
:host {
|
||||||
|
.valid-code {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.btn-code {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 11:06:01
|
||||||
|
* @LastEditTime: 2021-11-29 11:08:35
|
||||||
|
* @LastEditors: your name
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\account\components\edit-name\edit-name.component.spec.ts
|
||||||
|
*/
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { AccountComponentsEditNameComponent } from './edit-name.component';
|
||||||
|
|
||||||
|
describe('AccountComponentsEditNameComponent', () => {
|
||||||
|
let component: AccountComponentsEditNameComponent;
|
||||||
|
let fixture: ComponentFixture<AccountComponentsEditNameComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [AccountComponentsEditNameComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(AccountComponentsEditNameComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,216 @@
|
|||||||
|
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { ErrorData, SFComponent, SFSchema, SFStringWidgetSchema, SFUISchema } from '@delon/form';
|
||||||
|
import { _HttpClient } from '@delon/theme';
|
||||||
|
// import { CaptchaComponent } from '@shared';
|
||||||
|
import { NzMessageService } from 'ng-zorro-antd/message';
|
||||||
|
import { NzModalRef } from 'ng-zorro-antd/modal';
|
||||||
|
import { Observable, Observer } from 'rxjs';
|
||||||
|
import { AccountService } from '../../services/account.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-account-components-edit-name',
|
||||||
|
templateUrl: './edit-name.component.html',
|
||||||
|
styleUrls: ['./edit-name.component.less'],
|
||||||
|
})
|
||||||
|
export class AccountComponentsEditNameComponent implements OnInit, AfterViewInit {
|
||||||
|
// @ViewChild('dun', { static: false })
|
||||||
|
// private dun!: CaptchaComponent;
|
||||||
|
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||||
|
record: any = {};
|
||||||
|
i: any;
|
||||||
|
schema!: SFSchema;
|
||||||
|
ui!: SFUISchema;
|
||||||
|
|
||||||
|
formData: any = {};
|
||||||
|
count = 0;
|
||||||
|
oldName: any;
|
||||||
|
codeTips: any;
|
||||||
|
interval$: any;
|
||||||
|
|
||||||
|
constructor(private modal: NzModalRef, public msgSrv: NzMessageService, public http: _HttpClient, public service: AccountService) {}
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
// this.dun.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.codeTips = '为了账户安全，需您的手机验证（' + this.i.phone + '）';
|
||||||
|
this.formData.oldName = this.i.name;
|
||||||
|
this.initSF();
|
||||||
|
// this.getInfo();
|
||||||
|
}
|
||||||
|
initSF() {
|
||||||
|
this.schema = {
|
||||||
|
properties: {
|
||||||
|
oldName: {
|
||||||
|
title: '用户名(旧)',
|
||||||
|
type: 'string',
|
||||||
|
default: this.formData.oldName,
|
||||||
|
ui: {
|
||||||
|
widget: 'text',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
userName: {
|
||||||
|
title: '用户名(新)',
|
||||||
|
type: 'string',
|
||||||
|
minLength: 3,
|
||||||
|
maxLength: 30,
|
||||||
|
description: '3-30个字符，支持中英文、数字、符号“_”和“-”，只能修改一次',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请输入新用户名',
|
||||||
|
errors: {
|
||||||
|
required: '请输入新用户名',
|
||||||
|
},
|
||||||
|
// validator: (val) => this.validatecomponent(val),
|
||||||
|
// blur: () => this.checkUserName(),
|
||||||
|
// validator: (val) => {
|
||||||
|
// const name = this.sf?.getValue('/oldName');
|
||||||
|
// if (name === val) {
|
||||||
|
// return [{ keyword: 'validateName', message: '新用户名不能与旧用户名一样' }];
|
||||||
|
// }
|
||||||
|
// // console.log(this.isCheck,'this.isCheck');
|
||||||
|
// // if (!this.isCheck) {
|
||||||
|
// // return [{ keyword: 'validateName', message: '用户名已存在，请修改' }];
|
||||||
|
// // }
|
||||||
|
// },
|
||||||
|
} as SFStringWidgetSchema,
|
||||||
|
},
|
||||||
|
smsVerifyCode: {
|
||||||
|
title: '验证码',
|
||||||
|
type: 'string',
|
||||||
|
maxLength: 6,
|
||||||
|
minLength: 6,
|
||||||
|
description: this.codeTips,
|
||||||
|
ui: {
|
||||||
|
widget: 'custom',
|
||||||
|
placeholder: '请输入验证码',
|
||||||
|
errors: {
|
||||||
|
required: '请输入6位验证码',
|
||||||
|
minLength: '请输入6位验证码',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
required: ['userName', 'smsVerifyCode'],
|
||||||
|
};
|
||||||
|
this.ui = {
|
||||||
|
'*': {
|
||||||
|
spanLabelFixed: 100,
|
||||||
|
grid: { span: 24 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getCaptcha() {
|
||||||
|
const params = {
|
||||||
|
// phoneNumber: phone
|
||||||
|
};
|
||||||
|
this.service.request(this.service.$api_get_msg_code, params, 'POST', true, 'FORM').subscribe((res) => {
|
||||||
|
console.log(res);
|
||||||
|
// code==503046 弹出网易盾
|
||||||
|
if (res && res.code === '1') {
|
||||||
|
this.service.msgSrv.success('发送成功');
|
||||||
|
this.codeCountDown();
|
||||||
|
} else if (res.code === '503046') {
|
||||||
|
// this.dun.popUp();
|
||||||
|
} else {
|
||||||
|
this.service.msgSrv.success(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* code倒计时 */
|
||||||
|
codeCountDown() {
|
||||||
|
this.count = 59;
|
||||||
|
this.interval$ = setInterval(() => {
|
||||||
|
this.count -= 1;
|
||||||
|
if (this.count <= 0) {
|
||||||
|
clearInterval(this.interval$);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
/* 网易盾验证通过 */
|
||||||
|
captchaDone(validate: any) {
|
||||||
|
this.codeCountDown();
|
||||||
|
}
|
||||||
|
|
||||||
|
getInfo() {
|
||||||
|
const params = {
|
||||||
|
// id: this.i.id,
|
||||||
|
};
|
||||||
|
this.service.http.post(this.service.$api_get_current_user_detail, params).subscribe((res) => {
|
||||||
|
// if (res) {
|
||||||
|
// this.getCaptcha(res.data.phone);
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 验证组件名称
|
||||||
|
* 规则：以小写字母开头，长度1-20， 仅限小写字母、数字和横线
|
||||||
|
*/
|
||||||
|
// validatecomponent(value: string): Observable<ErrorData[]> {
|
||||||
|
// return new Observable((observer: Observer<ErrorData[] | null>) => {
|
||||||
|
// if (!value || value.trim().length === 0) {
|
||||||
|
// observer.next([{ keyword: 'required', message: '用户名不能为空！' }]);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let isCheck: any;
|
||||||
|
// this.service.request(this.service.$api_checkUserName, { userName: value }, 'POST', true, 'FORM').subscribe((res) => {
|
||||||
|
// // 检查用户名
|
||||||
|
// isCheck = res;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// // 以小写字母开头，长度1-20， 仅限小写字母、数字和横线
|
||||||
|
// // const partern = /^[a-z][a-zA-Z0-9-]{0,30}$/;
|
||||||
|
|
||||||
|
// // 3-30个字符，支持中英文、数字、符号“_”和“-”
|
||||||
|
// const partern = /^[a-zA-Z0-9_\-\u4e00-\u9fa5]{3,30}$/;
|
||||||
|
// const reg = new RegExp(partern);
|
||||||
|
// const result = reg.test(value);
|
||||||
|
// const name = this.sf?.getValue('/oldName');
|
||||||
|
// if (name === value) {
|
||||||
|
// observer.next([{ keyword: 'validateName', message: '新用户名不能与旧用户名一样' }]);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// console.log(value, 'value', isCheck);
|
||||||
|
// if (!isCheck) {
|
||||||
|
// observer.next([{ keyword: 'validateName', message: '用户名已存在，请修改' }]);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (!result) {
|
||||||
|
// observer.next([{ keyword: 'validateName', message: '请输入3-30个字符,且不能含有特殊符号!' }]);
|
||||||
|
// } else {
|
||||||
|
// observer.next([]);
|
||||||
|
// }
|
||||||
|
// observer.complete();
|
||||||
|
// }, 500);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// this.usernameValidator = (control: FormControl) => {
|
||||||
|
// if (control.value === this.i.name) {
|
||||||
|
// return of(null);
|
||||||
|
// }
|
||||||
|
// return control.valueChanges.pipe(
|
||||||
|
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
close() {
|
||||||
|
this.modal.destroy();
|
||||||
|
}
|
||||||
|
submitForm() {
|
||||||
|
console.log(this.sf.value, 'this.sf.value');
|
||||||
|
const params = {
|
||||||
|
...this.sf.value,
|
||||||
|
};
|
||||||
|
this.service.http.post(this.service.$api_updateUserName, params).subscribe((res) => {
|
||||||
|
console.log(res, 'submitForm');
|
||||||
|
if (res.success) {
|
||||||
|
this.service.msgSrv.success(res.msg);
|
||||||
|
this.modal.close(true);
|
||||||
|
} else {
|
||||||
|
this.service.msgSrv.warning(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 13:50:46
|
||||||
|
* @LastEditTime: 2021-11-29 14:44:30
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\account\components\edit\edit.component.html
|
||||||
|
-->
|
||||||
|
<form nz-form [formGroup]="validateForm">
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzRequired>新密码</nz-form-label>
|
||||||
|
<nz-form-control nzErrorTip="请填写反馈类型,20字以内">
|
||||||
|
<nz-input-group [nzSuffix]="suffixTemplate">
|
||||||
|
<input
|
||||||
|
[type]="passwordVisible ? 'text' : 'password'"
|
||||||
|
nz-input
|
||||||
|
placeholder="input password"
|
||||||
|
[(ngModel)]="password"
|
||||||
|
/>
|
||||||
|
</nz-input-group>
|
||||||
|
<ng-template #suffixTemplate>
|
||||||
|
<i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
|
||||||
|
</ng-template>
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzRequired>确认新密码</nz-form-label>
|
||||||
|
<nz-form-control nzErrorTip="请填写反馈类型,20字以内">
|
||||||
|
<nz-input-group [nzSuffix]="suffixTemplate2">
|
||||||
|
<input
|
||||||
|
[type]="passwordVisible2 ? 'text' : 'password'"
|
||||||
|
nz-input
|
||||||
|
placeholder="input password"
|
||||||
|
[(ngModel)]="password2"
|
||||||
|
/>
|
||||||
|
</nz-input-group>
|
||||||
|
<ng-template #suffixTemplate2>
|
||||||
|
<i nz-icon [nzType]="passwordVisible2 ? 'eye-invisible' : 'eye'" (click)="passwordVisible2 = !passwordVisible2"></i>
|
||||||
|
</ng-template>
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzRequired>手机号</nz-form-label>
|
||||||
|
158****4444
|
||||||
|
</nz-form-item>
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label
|
||||||
|
[nzSm]="6"
|
||||||
|
[nzXs]="24"
|
||||||
|
nzFor="captcha"
|
||||||
|
nzRequired
|
||||||
|
nzTooltipTitle="Please click 'Get captcha'"
|
||||||
|
[nzTooltipIcon]="captchaTooltipIcon"
|
||||||
|
>
|
||||||
|
Captcha
|
||||||
|
</nz-form-label>
|
||||||
|
<nz-form-control
|
||||||
|
[nzSm]="14"
|
||||||
|
[nzXs]="24"
|
||||||
|
nzErrorTip="Please input the captcha you got!"
|
||||||
|
nzExtra="We must make sure that your are a human."
|
||||||
|
>
|
||||||
|
<div nz-row [nzGutter]="8">
|
||||||
|
<div nz-col [nzSpan]="12">
|
||||||
|
<input nz-input formControlName="captcha" id="captcha" />
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="12">
|
||||||
|
<button nz-button *ngIf="count < 1;" (click)="getCaptcha($event)">获取验证码</button>
|
||||||
|
<span *ngIf="count > 1;">{{ count > 0 ? '请等待' + count + 's' : '获取验证码' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
</form>
|
||||||
|
<div *nzModalFooter>
|
||||||
|
<button nz-button nzType="default" (click)="destroyModal()">取消</button>
|
||||||
|
<button nz-button nzType="primary" (click)="save()" >保存</button>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 13:50:46
|
||||||
|
* @LastEditTime: 2021-11-29 14:58:33
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\account\components\edit\edit.component.ts
|
||||||
|
*/
|
||||||
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators,ValidatorFn } from '@angular/forms';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { STChange, STColumn, STComponent, STData, STRequestOptions } from '@delon/abc/st';
|
||||||
|
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
|
||||||
|
import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
|
||||||
|
import { NzFormTooltipIcon } from 'ng-zorro-antd/form';
|
||||||
|
import { NzModalRef } from 'ng-zorro-antd/modal';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-account-components-edit',
|
||||||
|
templateUrl: './edit-password.component.html',
|
||||||
|
})
|
||||||
|
export class AccountComponentsCenterEditComponent implements OnInit {
|
||||||
|
url = `/rule?_allow_anonymous=true`;
|
||||||
|
validateForm!: FormGroup;
|
||||||
|
record: any;
|
||||||
|
count = 0;
|
||||||
|
type = 'create';
|
||||||
|
passwordVisible = false;
|
||||||
|
passwordVisible2 = false;
|
||||||
|
password?: string;
|
||||||
|
password2?: string;
|
||||||
|
interval$: any;
|
||||||
|
confirmPasswordValidator!: ValidatorFn;
|
||||||
|
captchaTooltipIcon: NzFormTooltipIcon = {
|
||||||
|
type: 'info-circle',
|
||||||
|
theme: 'twotone'
|
||||||
|
};
|
||||||
|
constructor(
|
||||||
|
public router: Router,
|
||||||
|
public ar: ActivatedRoute,
|
||||||
|
private modalRef: NzModalRef,
|
||||||
|
private fb: FormBuilder,
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.validateForm = this.fb.group({
|
||||||
|
passWord: [
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
Validators.required,
|
||||||
|
Validators.maxLength(16),
|
||||||
|
Validators.minLength(8),
|
||||||
|
Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$'),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
passWordTo: [null, [this.confirmPasswordValidator, Validators.required, Validators.maxLength(16), Validators.minLength(8)]],
|
||||||
|
voucher: [null, [Validators.required]],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
destroyModal(): void {
|
||||||
|
this.modalRef.destroy();
|
||||||
|
}
|
||||||
|
getCaptcha(e: MouseEvent): void {
|
||||||
|
e.preventDefault();
|
||||||
|
this.codeCountDown()
|
||||||
|
}
|
||||||
|
save() {
|
||||||
|
// const params = { id: this.record.id, name: this.validateForm.value.name };
|
||||||
|
// this.service.request(this.service.$api_feedbackTypeupdate, params).subscribe((res) => {
|
||||||
|
// if (res) {
|
||||||
|
// this.modalRef.close(true);
|
||||||
|
// this.service.msgSrv.success('保存成功！');
|
||||||
|
// } else {
|
||||||
|
// this.service.msgSrv.error(res.msg);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
/* code倒计时 */
|
||||||
|
codeCountDown() {
|
||||||
|
this.count = 59;
|
||||||
|
this.interval$ = setInterval(() => {
|
||||||
|
this.count -= 1;
|
||||||
|
if (this.count <= 0) {
|
||||||
|
clearInterval(this.interval$);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
submitForm(): void {
|
||||||
|
// tslint:disable-next-line: forin
|
||||||
|
for (const i in this.validateForm.controls) {
|
||||||
|
this.validateForm.controls[i].markAsDirty();
|
||||||
|
this.validateForm.controls[i].updateValueAndValidity();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
61
src/app/routes/account/services/account.service.ts
Normal file
61
src/app/routes/account/services/account.service.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-02 11:12:21
|
||||||
|
* @LastEditTime: 2021-11-05 10:04:26
|
||||||
|
* @LastEditors: your name
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: \scm-ows-ui\src\app\routes\account\services\account.service.ts
|
||||||
|
*/
|
||||||
|
import { Injectable, Injector } from '@angular/core';
|
||||||
|
import { _HttpClient } from '@delon/theme';
|
||||||
|
import { NzMessageService } from 'ng-zorro-antd/message';
|
||||||
|
import { map } from 'rxjs/operators';
|
||||||
|
import { BaseService } from 'src/app/shared/services/core/base.service';
|
||||||
|
import { EAFileUtil } from 'src/app/shared/utils/file.util';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class AccountService extends BaseService {
|
||||||
|
public $api_add_one!: string;
|
||||||
|
public $api_add_many!: string;
|
||||||
|
public $api_edit_one!: string;
|
||||||
|
public $api_edit_many!: string;
|
||||||
|
public $api_del_one!: string;
|
||||||
|
public $api_del_many!: string;
|
||||||
|
public $api_get_many!: string;
|
||||||
|
public $api_get_one!: string;
|
||||||
|
public $api_get_page!: string;
|
||||||
|
public $api_export!: string;
|
||||||
|
public $api_import!: string;
|
||||||
|
public $api_import_download_tpl!: string;
|
||||||
|
// 获取当前登录用户详情
|
||||||
|
$api_get_current_user_detail = `/cuc/user/getUserInfo`;
|
||||||
|
// 获取当前登录用户基本信息
|
||||||
|
$api_getUserInfo = `/cuc/user/getUserInfo`;
|
||||||
|
// 修改用户信息
|
||||||
|
$api_updateUserInfo = `/cuc/userBasicInfo/updateUserInfo`;
|
||||||
|
// 凭证修改手机号
|
||||||
|
$api_voucherUpdatePhone = '/cuc/userBasicInfo/forgetPassword/voucherUpdatePhone';
|
||||||
|
// 凭证修改密码
|
||||||
|
$api_voucherUpdatePassword = '/cuc/userBasicInfo/forgetPassword/voucherUpdatePassword';
|
||||||
|
// 根据当前登录用户绑定的手机号码获取短信验证码
|
||||||
|
public $api_get_msg_code = `/cuc/userBasicInfo/getLoginUserSMVerificationCode`;
|
||||||
|
// 验证手机号
|
||||||
|
$api_verifyPhone = '/cuc/userBasicInfo/forgetPassword/verifyPhone';
|
||||||
|
|
||||||
|
// 获取当前登录用户详情
|
||||||
|
$api_get_current_user_info = `/cuc/user/getUserInfo`;
|
||||||
|
|
||||||
|
// 修改用户名
|
||||||
|
$api_updateUserName = `/cuc/userBasicInfo/updateUserName`;
|
||||||
|
// 验证用户名是否已被使用
|
||||||
|
$api_checkUserName = `/cuc/userBasicInfo/checkUserName`;
|
||||||
|
|
||||||
|
// constructor(http: _HttpClient, msgSrv: NzMessageService, fileExt: EAFileUtil) {
|
||||||
|
// super(http, msgSrv, fileExt);
|
||||||
|
// }
|
||||||
|
constructor(public injector: Injector) {
|
||||||
|
super(injector);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,3 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 10:20:33
|
||||||
|
* @LastEditTime: 2021-11-29 11:05:20
|
||||||
|
* @LastEditors: your name
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\routes\routes-routing.module.ts
|
||||||
|
*/
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
// layout
|
// layout
|
||||||
@ -14,7 +22,11 @@ const routes: Routes = [
|
|||||||
children: [
|
children: [
|
||||||
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
|
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
|
||||||
{ path: 'dashboard', component: DashboardComponent },
|
{ path: 'dashboard', component: DashboardComponent },
|
||||||
{ path: 'demo', loadChildren: () => import('./demo/demo.module').then(m => m.DemoModule) }
|
{ path: 'demo', loadChildren: () => import('./demo/demo.module').then(m => m.DemoModule) },
|
||||||
|
{
|
||||||
|
path: 'account',
|
||||||
|
loadChildren: () => import('./account/account.module').then((m) => m.AccountModule),
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// passport
|
// passport
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 10:04:12
|
||||||
|
* @LastEditTime: 2021-11-29 11:19:24
|
||||||
|
* @LastEditors: your name
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\shared\index.ts
|
||||||
|
*/
|
||||||
// Modules
|
// Modules
|
||||||
export * from './components/delay/index';
|
export * from './components/delay/index';
|
||||||
export * from './components/editor/index';
|
export * from './components/editor/index';
|
||||||
@ -7,6 +15,7 @@ export * from './components/mouse-focus/index';
|
|||||||
export * from './components/status-label/index';
|
export * from './components/status-label/index';
|
||||||
export * from './components/scrollbar/index';
|
export * from './components/scrollbar/index';
|
||||||
export * from './components/address/index';
|
export * from './components/address/index';
|
||||||
|
export * from './components/captcha/index';
|
||||||
|
|
||||||
// Utils
|
// Utils
|
||||||
export * from './utils/yuan';
|
export * from './utils/yuan';
|
||||||
|
|||||||
@ -2,5 +2,6 @@ import { PageHeaderModule } from '@delon/abc/page-header';
|
|||||||
import { SEModule } from '@delon/abc/se';
|
import { SEModule } from '@delon/abc/se';
|
||||||
import { STModule } from '@delon/abc/st';
|
import { STModule } from '@delon/abc/st';
|
||||||
import { SVModule } from '@delon/abc/sv';
|
import { SVModule } from '@delon/abc/sv';
|
||||||
|
import { DelonFormModule } from '@delon/form';
|
||||||
|
|
||||||
export const SHARED_DELON_MODULES = [PageHeaderModule, STModule, SVModule, SEModule];
|
export const SHARED_DELON_MODULES = [PageHeaderModule, STModule, SVModule, SEModule,DelonFormModule ];
|
||||||
|
|||||||
@ -1,3 +1,12 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-29 10:20:33
|
||||||
|
* @LastEditTime: 2021-11-29 14:59:56
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
* @FilePath: \tms-obc-web\src\app\shared\shared-zorro.module.ts
|
||||||
|
*/
|
||||||
|
import { NzStepsModule } from 'ng-zorro-antd/steps';
|
||||||
import { NzAlertModule } from 'ng-zorro-antd/alert';
|
import { NzAlertModule } from 'ng-zorro-antd/alert';
|
||||||
import { NzBadgeModule } from 'ng-zorro-antd/badge';
|
import { NzBadgeModule } from 'ng-zorro-antd/badge';
|
||||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
import { NzButtonModule } from 'ng-zorro-antd/button';
|
||||||
@ -12,6 +21,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
|
|||||||
import { NzSelectModule } from 'ng-zorro-antd/select';
|
import { NzSelectModule } from 'ng-zorro-antd/select';
|
||||||
import { NzSpinModule } from 'ng-zorro-antd/spin';
|
import { NzSpinModule } from 'ng-zorro-antd/spin';
|
||||||
import { NzTableModule } from 'ng-zorro-antd/table';
|
import { NzTableModule } from 'ng-zorro-antd/table';
|
||||||
|
import { NzListModule } from 'ng-zorro-antd/list';
|
||||||
|
|
||||||
export const SHARED_ZORRO_MODULES = [
|
export const SHARED_ZORRO_MODULES = [
|
||||||
NzButtonModule,
|
NzButtonModule,
|
||||||
@ -28,4 +38,6 @@ export const SHARED_ZORRO_MODULES = [
|
|||||||
NzIconModule,
|
NzIconModule,
|
||||||
NzSpinModule,
|
NzSpinModule,
|
||||||
NzDividerModule,
|
NzDividerModule,
|
||||||
|
NzStepsModule,
|
||||||
|
NzListModule,
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user