From 8530a237072242ed172580d398c4ef56f11bc13b Mon Sep 17 00:00:00 2001 From: wangshiming Date: Mon, 29 Nov 2021 15:10:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/.gitignore | 1 + .../pro/components/user/user.component.html | 2 +- .../routes/account/account-routing.module.ts | 31 +++ src/app/routes/account/account.module.ts | 29 +++ .../components/center/center.component.html | 131 +++++++++++ .../components/center/center.component.less | 46 ++++ .../center/center.component.spec.ts | 23 ++ .../components/center/center.component.ts | 211 +++++++++++++++++ .../edit-info/edit-info.component.html | 15 ++ .../edit-info/edit-info.component.less | 6 + .../edit-info/edit-info.component.spec.ts | 23 ++ .../edit-info/edit-info.component.ts | 207 +++++++++++++++++ .../edit-name/edit-name.component.html | 31 +++ .../edit-name/edit-name.component.less | 11 + .../edit-name/edit-name.component.spec.ts | 31 +++ .../edit-name/edit-name.component.ts | 216 ++++++++++++++++++ .../edit-password.component.html | 78 +++++++ .../edit-password/edit-password.component.ts | 97 ++++++++ .../account/services/account.service.ts | 61 +++++ src/app/routes/routes-routing.module.ts | 14 +- src/app/shared/index.ts | 9 + src/app/shared/shared-delon.module.ts | 3 +- src/app/shared/shared-zorro.module.ts | 12 + 23 files changed, 1285 insertions(+), 3 deletions(-) create mode 100644 .husky/.gitignore create mode 100644 src/app/routes/account/account-routing.module.ts create mode 100644 src/app/routes/account/account.module.ts create mode 100644 src/app/routes/account/components/center/center.component.html create mode 100644 src/app/routes/account/components/center/center.component.less create mode 100644 src/app/routes/account/components/center/center.component.spec.ts create mode 100644 src/app/routes/account/components/center/center.component.ts create mode 100644 src/app/routes/account/components/edit-info/edit-info.component.html create mode 100644 src/app/routes/account/components/edit-info/edit-info.component.less create mode 100644 src/app/routes/account/components/edit-info/edit-info.component.spec.ts create mode 100644 src/app/routes/account/components/edit-info/edit-info.component.ts create mode 100644 src/app/routes/account/components/edit-name/edit-name.component.html create mode 100644 src/app/routes/account/components/edit-name/edit-name.component.less create mode 100644 src/app/routes/account/components/edit-name/edit-name.component.spec.ts create mode 100644 src/app/routes/account/components/edit-name/edit-name.component.ts create mode 100644 src/app/routes/account/components/edit-password/edit-password.component.html create mode 100644 src/app/routes/account/components/edit-password/edit-password.component.ts create mode 100644 src/app/routes/account/services/account.service.ts diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 00000000..31354ec1 --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/src/app/layout/pro/components/user/user.component.html b/src/app/layout/pro/components/user/user.component.html index ece6ea2f..ed7633c0 100644 --- a/src/app/layout/pro/components/user/user.component.html +++ b/src/app/layout/pro/components/user/user.component.html @@ -4,7 +4,7 @@
-
+
个人中心
diff --git a/src/app/routes/account/account-routing.module.ts b/src/app/routes/account/account-routing.module.ts new file mode 100644 index 00000000..c6412c83 --- /dev/null +++ b/src/app/routes/account/account-routing.module.ts @@ -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 {} diff --git a/src/app/routes/account/account.module.ts b/src/app/routes/account/account.module.ts new file mode 100644 index 00000000..5bfacc1a --- /dev/null +++ b/src/app/routes/account/account.module.ts @@ -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 {} diff --git a/src/app/routes/account/components/center/center.component.html b/src/app/routes/account/components/center/center.component.html new file mode 100644 index 00000000..a48faeea --- /dev/null +++ b/src/app/routes/account/components/center/center.component.html @@ -0,0 +1,131 @@ +
+ + +

个人中心

+ + + + +
+
+ 手机号码/账号 +
+
{{ infoData.phone }}
+
+ 已绑定 + 未绑定 +
+
+ + +
修改
+ + + + +
+
+ 账户密码 +
+
定期更换密码有助于账号安全
+
+ 已设置 + 未设置 +
+
+ + +
修改
+ + + + +
diff --git a/src/app/routes/account/components/center/center.component.less b/src/app/routes/account/components/center/center.component.less new file mode 100644 index 00000000..96f8b59c --- /dev/null +++ b/src/app/routes/account/components/center/center.component.less @@ -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; + } + } +} diff --git a/src/app/routes/account/components/center/center.component.spec.ts b/src/app/routes/account/components/center/center.component.spec.ts new file mode 100644 index 00000000..cdcb358d --- /dev/null +++ b/src/app/routes/account/components/center/center.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [AccountComponentsCenterComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AccountComponentsCenterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/account/components/center/center.component.ts b/src/app/routes/account/components/center/center.component.ts new file mode 100644 index 00000000..2115d11b --- /dev/null +++ b/src/app/routes/account/components/center/center.component.ts @@ -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) => { + 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(); + } + }); + } +} diff --git a/src/app/routes/account/components/edit-info/edit-info.component.html b/src/app/routes/account/components/edit-info/edit-info.component.html new file mode 100644 index 00000000..d40f4edc --- /dev/null +++ b/src/app/routes/account/components/edit-info/edit-info.component.html @@ -0,0 +1,15 @@ +
+ +
+ +
+ + + + + + +
+
+ +
diff --git a/src/app/routes/account/components/edit-info/edit-info.component.less b/src/app/routes/account/components/edit-info/edit-info.component.less new file mode 100644 index 00000000..9711336e --- /dev/null +++ b/src/app/routes/account/components/edit-info/edit-info.component.less @@ -0,0 +1,6 @@ +:host { + .myForm { + width: 600px; + margin: 5rem auto; + } +} diff --git a/src/app/routes/account/components/edit-info/edit-info.component.spec.ts b/src/app/routes/account/components/edit-info/edit-info.component.spec.ts new file mode 100644 index 00000000..a8f871cb --- /dev/null +++ b/src/app/routes/account/components/edit-info/edit-info.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [OfficialWebsiteComponentsMemberEditInfoComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OfficialWebsiteComponentsMemberEditInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/account/components/edit-info/edit-info.component.ts b/src/app/routes/account/components/edit-info/edit-info.component.ts new file mode 100644 index 00000000..45b0121c --- /dev/null +++ b/src/app/routes/account/components/edit-info/edit-info.component.ts @@ -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) => { + 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); + } +} diff --git a/src/app/routes/account/components/edit-name/edit-name.component.html b/src/app/routes/account/components/edit-name/edit-name.component.html new file mode 100644 index 00000000..ce2ccf04 --- /dev/null +++ b/src/app/routes/account/components/edit-name/edit-name.component.html @@ -0,0 +1,31 @@ + + + +
+ + +
+ + + + + diff --git a/src/app/routes/account/components/edit-name/edit-name.component.less b/src/app/routes/account/components/edit-name/edit-name.component.less new file mode 100644 index 00000000..4d054d96 --- /dev/null +++ b/src/app/routes/account/components/edit-name/edit-name.component.less @@ -0,0 +1,11 @@ +:host { + .valid-code { + position: relative; + } + .btn-code { + position: absolute; + right: 0; + top: 0; + z-index: 9; + } +} diff --git a/src/app/routes/account/components/edit-name/edit-name.component.spec.ts b/src/app/routes/account/components/edit-name/edit-name.component.spec.ts new file mode 100644 index 00000000..928e52ed --- /dev/null +++ b/src/app/routes/account/components/edit-name/edit-name.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [AccountComponentsEditNameComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AccountComponentsEditNameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/account/components/edit-name/edit-name.component.ts b/src/app/routes/account/components/edit-name/edit-name.component.ts new file mode 100644 index 00000000..14e9686f --- /dev/null +++ b/src/app/routes/account/components/edit-name/edit-name.component.ts @@ -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 { + // return new Observable((observer: Observer) => { + // 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); + } + }); + } +} diff --git a/src/app/routes/account/components/edit-password/edit-password.component.html b/src/app/routes/account/components/edit-password/edit-password.component.html new file mode 100644 index 00000000..4c4681a4 --- /dev/null +++ b/src/app/routes/account/components/edit-password/edit-password.component.html @@ -0,0 +1,78 @@ + +
+ + 新密码 + + + + + + + + + + + 确认新密码 + + + + + + + + + + + 手机号 + 158****4444 + + + + Captcha + + +
+
+ +
+
+ + {{ count > 0 ? '请等待' + count + 's' : '获取验证码' }} +
+
+ + +
+
+ + +
diff --git a/src/app/routes/account/components/edit-password/edit-password.component.ts b/src/app/routes/account/components/edit-password/edit-password.component.ts new file mode 100644 index 00000000..fb6ff72a --- /dev/null +++ b/src/app/routes/account/components/edit-password/edit-password.component.ts @@ -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(); + } + } +} diff --git a/src/app/routes/account/services/account.service.ts b/src/app/routes/account/services/account.service.ts new file mode 100644 index 00000000..7e25b5d7 --- /dev/null +++ b/src/app/routes/account/services/account.service.ts @@ -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); + } +} diff --git a/src/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts index b1e59f60..7726d684 100644 --- a/src/app/routes/routes-routing.module.ts +++ b/src/app/routes/routes-routing.module.ts @@ -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 { RouterModule, Routes } from '@angular/router'; // layout @@ -14,7 +22,11 @@ const routes: Routes = [ children: [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { 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 diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts index 86cfaf5c..7b37910b 100644 --- a/src/app/shared/index.ts +++ b/src/app/shared/index.ts @@ -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 export * from './components/delay/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/scrollbar/index'; export * from './components/address/index'; +export * from './components/captcha/index'; // Utils export * from './utils/yuan'; diff --git a/src/app/shared/shared-delon.module.ts b/src/app/shared/shared-delon.module.ts index 6b3c0e99..097d78f6 100644 --- a/src/app/shared/shared-delon.module.ts +++ b/src/app/shared/shared-delon.module.ts @@ -2,5 +2,6 @@ import { PageHeaderModule } from '@delon/abc/page-header'; import { SEModule } from '@delon/abc/se'; import { STModule } from '@delon/abc/st'; 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 ]; diff --git a/src/app/shared/shared-zorro.module.ts b/src/app/shared/shared-zorro.module.ts index 794dc59c..8bbf3e97 100644 --- a/src/app/shared/shared-zorro.module.ts +++ b/src/app/shared/shared-zorro.module.ts @@ -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 { NzBadgeModule } from 'ng-zorro-antd/badge'; 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 { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzTableModule } from 'ng-zorro-antd/table'; +import { NzListModule } from 'ng-zorro-antd/list'; export const SHARED_ZORRO_MODULES = [ NzButtonModule, @@ -28,4 +38,6 @@ export const SHARED_ZORRO_MODULES = [ NzIconModule, NzSpinModule, NzDividerModule, + NzStepsModule, + NzListModule, ];