|
@@ -1,31 +1,33 @@
|
|
|
<ion-header [translucent]="true">
|
|
|
- <!-- <ion-toolbar>
|
|
|
- <ion-title>个人信息</ion-title>
|
|
|
- </ion-toolbar> -->
|
|
|
</ion-header>
|
|
|
-
|
|
|
<ion-content>
|
|
|
- <div *ngIf="!editing">
|
|
|
- <!-- 显示个人信息界面 -->
|
|
|
+
|
|
|
+ <!-- 根据登录状态显示不同界面 -->
|
|
|
+ <div *ngIf="!currentUser?.id"> <!-- 如果没有登录显示未登录界面 -->
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>未登录</ion-card-title>
|
|
|
+ <ion-card-subtitle>请您登录后继续使用</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ <ion-button fill="clear" routerLink="/login">登录</ion-button>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="currentUser?.id"> <!-- 如果登录成功显示个人信息界面 -->
|
|
|
<div class="profile-header">
|
|
|
<div class="avatar-section">
|
|
|
<input type="file" (change)="onFileSelected($event)" accept="image/*" id="fileInput" hidden>
|
|
|
<label for="fileInput">
|
|
|
<img [src]="user.avatarUrl" alt="Avatar" class="avatar-img">
|
|
|
- <ion-icon name="create-outline" class="edit-icon" (click)="startEditing()"></ion-icon>
|
|
|
+ <ion-icon name="create-outline" class="edit-icon" routerLink="/edit-info"></ion-icon>
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="profile-details">
|
|
|
- <!-- 用户名 -->
|
|
|
- <div class="username">{{ user.username }}</div>
|
|
|
-
|
|
|
- <!-- 校区和楼栋 -->
|
|
|
+ <div class="username">{{user.name}}</div>
|
|
|
<div class="campus-building">
|
|
|
<div class="campus">{{ user.campus }}</div>
|
|
|
<div class="building">{{ user.building }}</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 性别 -->
|
|
|
<div class="gender">
|
|
|
<ion-icon [name]="user.gender === 'male' ? 'man' : 'woman'"></ion-icon>
|
|
|
<div>{{ user.gender === 'male' ? '男' : '女' }}</div>
|
|
@@ -34,66 +36,31 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 编辑个人信息界面 -->
|
|
|
-<div *ngIf="editing">
|
|
|
- <ion-item>
|
|
|
- <ion-label position="stacked">用户名</ion-label>
|
|
|
- <ion-input [(ngModel)]="editedUser.username" type="text"></ion-input>
|
|
|
+<!-- 其他功能条目 -->
|
|
|
+<ion-list lines="full" class="ion-no-margin" >
|
|
|
+ <ion-item routerLink="/mine/completed">
|
|
|
+ <ion-icon slot="start" name="checkmark-circle"></ion-icon>
|
|
|
+ <ion-label>已完成</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
</ion-item>
|
|
|
- <ion-item (click)="fileInput.click()">
|
|
|
- <ion-label position="stacked">上传新头像</ion-label>
|
|
|
- <input type="file" #fileInput style="display: none;" (change)="onFileSelected($event)">
|
|
|
- <ion-avatar class="avatar-right" style="cursor: pointer;">
|
|
|
- <img [src]="editedUser.avatarUrl || user.avatarUrl" alt="Avatar">
|
|
|
- </ion-avatar>
|
|
|
+ <ion-item routerLink="/mine/in-progress">
|
|
|
+ <ion-icon slot="start" name="hourglass"></ion-icon>
|
|
|
+ <ion-label>进行中</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-label position="stacked">楼栋号</ion-label>
|
|
|
- <ion-input [(ngModel)]="editedUser.building" type="text"></ion-input>
|
|
|
+ <ion-item routerLink="/mine/not-completed">
|
|
|
+ <ion-icon slot="start" name="close-circle"></ion-icon>
|
|
|
+ <ion-label>未完成</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-label position="stacked">校区名称</ion-label>
|
|
|
- <ion-input [(ngModel)]="editedUser.campus" type="text"></ion-input>
|
|
|
+ <ion-item routerLink="/mine/pending">
|
|
|
+ <ion-icon slot="start" name="alert-circle"></ion-icon>
|
|
|
+ <ion-label>待接单</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-label>性别</ion-label>
|
|
|
- <ion-select [(ngModel)]="editedUser.gender">
|
|
|
- <ion-select-option value="male">男</ion-select-option>
|
|
|
- <ion-select-option value="female">女</ion-select-option>
|
|
|
- <ion-select-option value="other">其他</ion-select-option>
|
|
|
- </ion-select>
|
|
|
+ <ion-item (click)="logout()" class="logout-button">
|
|
|
+ <ion-icon slot="start" routerLink="/login" name="log-out"></ion-icon>
|
|
|
+ <ion-label>退出登录</ion-label>
|
|
|
</ion-item>
|
|
|
- <ion-button expand="block" color="primary" (click)="saveChanges()">保存</ion-button>
|
|
|
- <ion-button expand="block" color="danger" (click)="cancelEditing()">取消</ion-button>
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- 其他功能条目 -->
|
|
|
- <ion-list lines="full" class="ion-no-margin" *ngIf="!editing">
|
|
|
- <ion-item routerLink="/mine/completed">
|
|
|
- <ion-icon slot="start" name="checkmark-circle"></ion-icon>
|
|
|
- <ion-label>已完成</ion-label>
|
|
|
- <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
- </ion-item>
|
|
|
- <ion-item routerLink="/mine/in-progress">
|
|
|
- <ion-icon slot="start" name="hourglass"></ion-icon>
|
|
|
- <ion-label>进行中</ion-label>
|
|
|
- <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
- </ion-item>
|
|
|
- <ion-item routerLink="/mine/not-completed">
|
|
|
- <ion-icon slot="start" name="close-circle"></ion-icon>
|
|
|
- <ion-label>未完成</ion-label>
|
|
|
- <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
- </ion-item>
|
|
|
- <ion-item routerLink="/mine/pending">
|
|
|
- <ion-icon slot="start" name="alert-circle"></ion-icon>
|
|
|
- <ion-label>待接单</ion-label>
|
|
|
- <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
- </ion-item>
|
|
|
- <ion-item (click)="logout()" class="logout-button">
|
|
|
- <ion-icon slot="start" name="log-out"></ion-icon>
|
|
|
- <ion-label>退出登录</ion-label>
|
|
|
- </ion-item>
|
|
|
- </ion-list>
|
|
|
+</ion-list>
|
|
|
</ion-content>
|