个人中心
This commit is contained in:
wangshiming
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user