feat:edit

src/modules/user/edit-info/edit-info.page.html

@@ -1,47 +1,32 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>资料编辑</ion-title>
+    <ion-title>编辑信息</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">资料编辑</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>{{currentUser?.get('username')}} - {{currentUser?.id}}</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-input label="姓名" type="text" [(ngModel)]="userInfo.name"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-input label="手机" type="tel" [(ngModel)]="userInfo.mobile"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-select label="性别" [(ngModel)]="userInfo.gender">
-            <ion-select-option value="男">男</ion-select-option>
-            <ion-select-option value="女">女</ion-select-option>
-          </ion-select>
-        </ion-item>
-        <ion-item>
-          <ion-label>生日</ion-label>
-          <ion-datetime-button datetime="birthday"></ion-datetime-button>
-          <ion-modal [keepContentsMounted]="true">
-            <ng-template>
-              <ion-datetime id="birthday" displayFormat="MM/DD/YYYY" [(ngModel)]="userInfo.birthday"></ion-datetime>
-            </ng-template>
-          </ion-modal>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-
-  <ion-button expand="block" (click)="save()">保存</ion-button>
-  <ion-button expand="block" (click)="cancel()">取消</ion-button>
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-label position="floating">姓名</ion-label>
+      <ion-input [(ngModel)]="userInfo.name"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">手机号码</ion-label>
+      <ion-input [(ngModel)]="userInfo.mobile"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">性别</ion-label>
+      <ion-select [(ngModel)]="userInfo.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>
+    <ion-item>
+      <ion-label position="floating">生日</ion-label>
+      <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="userInfo.birthday"></ion-datetime>
+    </ion-item>
+  </ion-list>
+  <ion-button expand="full" (click)="save()">保存</ion-button>
+  <ion-button expand="full" (click)="cancel()">取消</ion-button>
 </ion-content>

src/modules/user/edit-info/edit-info.page.scss

@@ -0,0 +1,67 @@
+// edit-info.page.scss
+
+ion-header {
+    --background: var(--ion-color-primary);
+    --color: white;
+    ion-title {
+      font-weight: bold;
+    }
+    ion-back-button {
+      color: white;
+    }
+  }
+  
+  ion-content {
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
+    --padding-start: 1rem;
+    --padding-end: 1rem;
+    background-color: #f0f0f5;
+  }
+  
+  ion-card {
+    margin-top: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  ion-card-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--ion-color-primary);
+  }
+  
+  ion-card-content {
+    ion-item {
+      --inner-padding: 8px;
+      --highlight-color-focused: var(--ion-color-primary);
+    }
+    ion-label {
+      color: var(--ion-color-medium);
+      font-size: 0.9rem;
+    }
+  }
+  
+  ion-button {
+    margin: 1rem;
+    border-radius: 20px;
+    font-size: 1rem;
+    font-weight: bold;
+  }
+  
+  ion-footer {
+    ion-toolbar {
+      background: var(--ion-color-primary);
+      --color: white;
+      ion-button {
+        --background: var(--ion-color-secondary);
+        --background-activated: var(--ion-color-secondary-shade);
+        --background-focused: var(--ion-color-secondary-shade);
+        --background-hover: var(--ion-color-secondary-tint);
+      }
+      ion-button[color="medium"] {
+        --background: var(--ion-color-medium);
+      }
+    }
+  }
+  

src/modules/user/edit-info/edit-info.page.ts

@@ -37,35 +37,19 @@ export class EditInfoPage implements OnInit {
   save() {
     this.currentUser = Parse.User.current();
     if (this.currentUser) {
-      console.log(this.userInfo);
-  
-      // 检查并处理生日日期格式
-      this.userInfo.birthday = this.userInfo.birthday || new Date().toISOString();
-      if (!this.isValidDate(this.userInfo.birthday)) {
-        console.error('无效的日期格式');
-        // 可以在界面上给用户反馈
-        return;
-      }
+      console.log(this.userInfo)
+      this.userInfo.birthday = this.userInfo.birthday || new Date()
       this.userInfo.birthday = new Date(this.userInfo.birthday);
-  
-      // 设置用户信息
       for (const key in this.userInfo) {
         if (this.userInfo.hasOwnProperty(key)) {
           this.currentUser.set(key, this.userInfo[key]);
         }
       }
-  
-      // 保存用户信息
       this.currentUser.save().then(() => {
-        console.log('用户信息保存成功');
-        this.navController.back(); // 返回上一页或者进行其他导航操作
+        this.navController.back();
       }).catch((error) => {
-        console.error('保存用户信息时出错: ', error);
-        // 可以在界面上给用户反馈保存失败的原因
+        console.error('Error saving user data: ', error);
       });
-    } else {
-      console.error('未能获取当前用户');
-      // 可以在界面上给用户反馈需要登录才能保存信息
     }
   }