个人中心
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>
|
||||
Reference in New Issue
Block a user