重构美化主界面，图片上传至网络

E-Cover-app/src/app/settings/settings.component.html

@@ -70,7 +70,7 @@
   </div>
 
   <div class="container">
-    <div class="row">
+    <div class="row" (click)="logOut()">
       <div class="info-item">
         <ion-icon aria-hidden="true" name="log-out-outline" class="info-icon"></ion-icon>
         <span class="fontSize">退出登录</span>

E-Cover-app/src/app/settings/settings.component.ts

@@ -3,18 +3,23 @@ import { Router, RouterModule } from '@angular/router';
 import { IonicModule, NavController } from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { arrowBackOutline, bagRemoveOutline, chevronForwardOutline, closeCircleOutline, createOutline, handRightOutline, informationCircleOutline, lockOpenOutline, logOutOutline, shieldCheckmarkOutline, skullOutline } from 'ionicons/icons';
-addIcons({createOutline,arrowBackOutline,chevronForwardOutline,handRightOutline,lockOpenOutline,bagRemoveOutline,
-  shieldCheckmarkOutline,informationCircleOutline,skullOutline,logOutOutline,closeCircleOutline
+import { CloudUser } from 'src/lib/ncloud';
+addIcons({
+  createOutline, arrowBackOutline, chevronForwardOutline, handRightOutline, lockOpenOutline, bagRemoveOutline,
+  shieldCheckmarkOutline, informationCircleOutline, skullOutline, logOutOutline, closeCircleOutline
 })
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
   standalone: true,
-  imports: [IonicModule,RouterModule]
+  imports: [IonicModule, RouterModule]
 })
 export class SettingsComponent implements OnInit {
-  constructor(private navCtrl:NavController,private route:Router) { }
+  currentUser: CloudUser | undefined;
+  constructor(private navCtrl: NavController, private route: Router) {
+    this.currentUser = new CloudUser();
+  }
   ngOnInit() { }
   /**
    * @返回按钮事件
@@ -23,7 +28,14 @@ export class SettingsComponent implements OnInit {
     this.navCtrl.back();
   }
 
-  goUserInfo(){
+  goUserInfo() {
     this.route.navigate(['userInfo']);
   }
+
+  logOut() {
+    this.currentUser?.logout();
+    console.log('已退出登录');
+    this.route.navigate(['tabs/tab3']);
+  }
+
 }

E-Cover-app/src/app/tab1/tab1.page.html

@@ -1,64 +1,65 @@
-<div id="banner">
-    <swiper-container autoplay-delay="5000" loop="true">
-        <swiper-slide><ion-img
-                src=""
-                class="banner-image" style="display: block;"/></swiper-slide>
-        <swiper-slide><ion-img
-                src="/assets/tab1-style-img/banner1.png"
-                class="banner-image" style="display: block;"/></swiper-slide>
-    </swiper-container>
+<ion-header collapse="fade" mode="ios">
+    <ion-toolbar>
+        <ion-button slot="start">南昌
+            <ion-icon slot="end" name="caret-down-outline"></ion-icon>
+        </ion-button>
+        <ion-searchbar></ion-searchbar>
+    </ion-toolbar>
+</ion-header>
 
-    <div id="header">
-        <div id="header-left">
-            <ion-icon name="location-outline" size="large" aria-hidden="true"></ion-icon>
-            位置信息
-        </div>
-
-        <div id="header-right">
-            <ion-icon name="notifications-outline" size="large" aria-label="Favorite"></ion-icon>
-        </div>
+<ion-content [fullscreen]="true">
+    <div id="banner">
+        <swiper-container autoplay-delay="2000" loop="true">
+            <swiper-slide><ion-img
+                    src="https://s1.imagehub.cc/images/2024/12/23/bcbfbe53f07beb02e098379c762b65ff.jpg" /></swiper-slide>
+            <swiper-slide><ion-img
+                    src="https://s1.imagehub.cc/images/2024/12/23/0e8a11de31ce876d4491003574b43ce3.jpeg" /></swiper-slide>
+        </swiper-container>
     </div>
 
-    <div style="background:none;">
-        <ion-card>
-            <ion-button fill="clear" (click)="goGenerateOption()">
-                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
-            </ion-button>
-            <p>
-                测试
-            </p>
-        </ion-card>
-
-        <ion-card>
-            <ion-button fill="clear">
-                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
-            </ion-button>
-            <p>
-                未设置
-            </p>
-        </ion-card>
-
-        <ion-card>
-            <ion-button fill="clear">
-                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
-            </ion-button>
-            <p>
-                未设置
-            </p>
-        </ion-card>
+    <ion-card>
+        <div class="main-button">
+            <ion-img src="https://s1.imagehub.cc/images/2024/12/23/e3a6e359ba4ad7745017c4b116cbfed4.png" />
+                <p>个性搭配</p>
+        </div>
+        <div class="main-button">
+            <ion-img src="https://s1.imagehub.cc/images/2024/12/23/6c4cba617f748bd770195fa1d02ac473.png" />
+                <p>趋势分析</p>
+        </div>
+        <div class="main-button">
+            <ion-img src="https://s1.imagehub.cc/images/2024/12/23/4b30d81d915b24113540c7585809c689.png" />
+                <p>搭配贴士</p>
+        </div>
+        <div class="main-button">
+            <ion-img src="https://s1.imagehub.cc/images/2024/12/24/027b63214e367d15647408d3c9322177.png" />
+                <p>绿色时尚</p>
+        </div>
+    </ion-card>
 
-        <ion-card>
-            <ion-button fill="clear">
-                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
-            </ion-button>
-            <p>
-                未设置
-            </p>
-        </ion-card>
 
-    </div>
-</div>
-<ion-content>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    v
+    v
+    v
+    v
+    vv
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
+    <h3>数据库渲染测试</h3>
     <h3>数据库渲染测试</h3>
     <h3 *ngFor="let user of userInfoList">{{ user.get('name')}}</h3>
 </ion-content>

E-Cover-app/src/app/tab1/tab1.page.scss

@@ -1,66 +1,72 @@
-#banner {
-    width: 100%;
-    height: 350px;
+ion-header {
+    position: absolute;
+    display: flex;
+    align-items: center;
+
+    ion-button {
+        --background: none;
+        --border-radius: 1000px;
+    }
+
+    ion-searchbar {
+        --background: #f8f8f882;
+        --border-radius: 1000px;
+        padding: 0;
+        padding-right: 20px;
+    }
 }
 
-swiper-container {
-    position: absolute;
-    z-index: 0;
+#banner {
     width: 100%;
     height: 350px;
-    swiper-slide,ion-img {
+
+    swiper-container {
         width: 100%;
         height: 100%;
-        object-fit: cover;
     }
-}
 
-#header {
-    height: 50px;
-    background-color: rgba(255, 255, 255, 0);
-    color: white;
-    padding: 10px;
-}
-
-#header-left {
-    float: left;
-    display: flex;
-    align-items: center;
+    ion-img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+    }
 }
 
-#header-right {
-    float: right;
-}
+ion-card {
+    border-radius: 20px;
+    width: 100%;
+    margin: 0;
+    top: -15px;
+    z-index: 1;
+    box-shadow:none;
 
+    .main-button {
+        width: 21%;
+        margin: 20px 2%;
+        float: left;
+    }
 
-ion-card {
-    height: 140px;
-    width: 100px;
-    margin: 10px 0px 10px 0px;
-    background: none;
-    outline: none;
-    box-shadow: none !important;
-    float: left;
-    ion-button {
-        width: 100px;
-        height: 100px;
-        img{
-            display: block;
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-        }
+    ion-img {
+        width: 100%;
+        height: 21vw;
     }
+
     p {
         text-align: center;
-        font-size: 20px;
-        margin: 0;
+        font-size: 16px;
+        @font-face {
+            font-family: 'main-button-font';
+            src: url(/assets/fonts/mainButton.TTC);
+        }
+        font-family: 'main-button-font';
+        margin: 10px 0;
         padding: 0;
-        color: white;
+        color: black;
     }
 }
 
 ion-content {
     --background: #f8f8f8;
     --color: #000;
+    height: 200vh;
 }

E-Cover-app/src/app/tab1/tab1.page.ts

@@ -2,12 +2,12 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { IonicModule } from '@ionic/angular';
 import { addIcons } from 'ionicons';
-import { notificationsOutline, locationOutline } from 'ionicons/icons';
+import { notificationsOutline, locationOutline, caretDownOutline } from 'ionicons/icons';
 import { Router } from '@angular/router';
 import { register } from 'swiper/element/bundle';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { CommonModule } from '@angular/common';
-
+addIcons({ caretDownOutline});
 register();
 
 addIcons({ 'location-outline': locationOutline, 'notifications-outline': notificationsOutline })

E-Cover-app/src/app/tab3/tab3.page.html

@@ -1,7 +1,4 @@
 <ion-content>
-  <ion-header>
-    我的
-  </ion-header>
   <div id="banner">
     <div id="header">
       <ion-button shape="round">
@@ -41,6 +38,35 @@
       </ion-button>
     </div>
   </div>
+  <ion-card style="--background:#f8f8f8">
+    <div class="card">
+      <p>赞过帖子</p>
+      <p>11</p>
+    </div>
+    <div class="card">
+      <p>我的风格</p>
+      <p>11</p>
+    </div>
+    <div class="card">
+      <p>收藏帖子</p>
+      <p>11</p>
+    </div>
+    <div class="card">
+      <p>生成历史</p>
+      <p>11</p>
+    </div>
 
-
+    <ion-segment value="myPost" swipeGesture="true">
+      <ion-segment-button value="myPost" content-id="myPost">
+        <ion-label>帖子</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="news" content-id="news">
+        <ion-label>动态</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+    <ion-segment-view>
+      <ion-segment-content id="myPost">First</ion-segment-content>
+      <ion-segment-content id="news">Second</ion-segment-content>
+    </ion-segment-view>
+  </ion-card>
 </ion-content>

E-Cover-app/src/app/tab3/tab3.page.scss

@@ -1,5 +1,5 @@
 ion-content {
-    --background: #f8f8f8;
+    --background: #000000;
     color: black;
 
     ion-header {
@@ -12,17 +12,45 @@ ion-content {
         display: none;
         position: absolute;
     }
+
+    ion-card {
+        width: 100%;
+        margin: 0;
+        border-radius: 20px;
+        --background: none;
+        color: white;
+
+        p {
+            margin: 0;
+        }
+
+        ion-segment{
+            width: 40%;
+        }
+        ion-segment-button{
+            font-size: medium;
+            --color:gray;
+            --color-checked:black;
+            --indicator-color:orange;
+            --indicator-height: 5px;
+        }
+        ion-segment-view{
+            color: #000000;
+        }
+    }
 }
-#banner{
-    background:rgba(0, 0, 0, 0.849);
+
+#banner {
+    background: rgb(36, 36, 36);
 }
+
 #header {
     color: rgb(255, 255, 255);
     font-size: 15px;
     display: flex;
     align-items: center;
     justify-content: end;
-    padding:10px 2px;
+    padding: 10px 2px;
 
     ion-text {
         font-size: 20px;
@@ -36,55 +64,75 @@ ion-content {
         margin: 5px;
         --background: rgba(255, 255, 255, 0.075);
         --color: white;
-        --box-shadow:0 0 1px white;
+        --box-shadow: 0 0 1px white;
     }
 
     ion-icon[name='card-outline'] {
         margin: 5px 10px;
     }
 }
-.tags{
-    --background:none;
+
+.tags {
+    --background: none;
     box-shadow: none;
     display: inline;
     border: #414040 1px solid;
-    padding:0 5px;
+    padding: 0 5px;
     margin: 0 2px;
 }
-#avatarAndName{
+
+#avatarAndName {
     display: flex;
     align-items: center;
     justify-content: start;
 }
-#personInfo{
+
+#personInfo {
     padding: 15px;
 }
-#avatar{
+
+#avatar {
     width: 20%;
     border-radius: 50%;
     margin-right: 20px;
 }
-#nameAndTags h1{
-    margin:5px;
+
+#nameAndTags h1 {
+    margin: 5px;
 }
-#personInfo p{
+
+#personInfo p {
     color: gray;
 }
-#count{
+
+#count {
     display: flex;
     align-items: center;
     justify-content: start;
 }
-#count h3{
-    margin:auto 0;
+
+#count h3 {
+    margin: auto 0;
 }
-#count p{
+
+#count p {
     margin-right: 20px;
 }
+
 #badge {
-    --background:none;
-    --box-shadow:none;
-    --padding-start:2px;
+    --background: none;
+    --box-shadow: none;
+    --padding-start: 2px;
     color: white;
-    font-size:medium;
+    font-size: medium;
+}
+
+.card {
+    width: 21%;
+    height: 20vw;
+    background-color: #414040;
+    float: left;
+    margin: 15px 2%;
+    border-radius: 10px;
+    padding: 10px;
 }

E-Cover-app/src/app/tabs/tabs.page.html

@@ -13,7 +13,7 @@
       <ion-label>社区</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3" (click)="valiate()">
+    <ion-tab-button tab="tab3" href="/tabs/tab3">
       <ion-icon aria-hidden="true" name="square"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>

E-Cover-app/src/app/tabs/tabs.page.ts

@@ -16,8 +16,4 @@ export class TabsPage {
   constructor(private modalCtrl: ModalController) {
     addIcons({ triangle, ellipse, square });
   }
-
-  async valiate() {
-    
-  }
 }

E-Cover-app/src/app/user-info/user-info.component.html

@@ -17,7 +17,7 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
-    <div class="row">
+    <div class="row" (click)="edit('name')">
       <div class="info-item">
         <span class="fontSize">昵称</span>
       </div>

E-Cover-app/src/app/user-info/user-info.component.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { IonicModule, NavController } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { arrowBackOutline, chevronForwardOutline } from 'ionicons/icons';
 import { CloudUser } from 'src/lib/ncloud';
+import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 addIcons({ arrowBackOutline, chevronForwardOutline });
 @Component({
   selector: 'app-user-info',
@@ -14,12 +16,19 @@ addIcons({ arrowBackOutline, chevronForwardOutline });
 })
 export class UserInfoComponent implements OnInit {
   currentUser: CloudUser | undefined;
-  constructor(private navCtrl: NavController) { 
+  constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
     this.currentUser = new CloudUser();
   }
+  async ionViewWillEnter() {
+    await this.currentUser?.updateCache();
+  }
   ngOnInit() { }
 
   goBack() {
     this.navCtrl.back();
   }
+
+  edit(option: string) {
+    let user = openUserEditModal(this.modalCtrl, option);
+  }
 }

E-Cover-app/src/global.scss

@@ -34,4 +34,4 @@
 
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import '@ionic/angular/css/palettes/dark.system.css';
+//@import '@ionic/angular/css/palettes/dark.system.css';

E-Cover-app/src/lib/ncloud.ts

@@ -4,6 +4,7 @@ export class CloudObject {
     id: string | null = null;
     createdAt: any;
     updatedAt: any;
+    sessionToken: string | null = ""
     data: Record<string, any> = {};
 
     constructor(className: string) {
@@ -36,11 +37,13 @@ export class CloudObject {
             url += `/${this.id}`;
             method = "PUT";
         }
-
+        console.log("准备发送"+method+"请求:"+url+"，body为：");
         const body = JSON.stringify(this.data);
+        console.log(body);
         const response = await fetch(url, {
             headers: {
                 "content-type": "application/json;charset=UTF-8",
+                "x-parse-session-token": this.sessionToken||"",
                 "x-parse-application-id": "hcx"
             },
             body: body,
@@ -48,7 +51,7 @@ export class CloudObject {
             mode: "cors",
             credentials: "omit"
         });
-
+        console.log(response);
         const result = await response?.json();
         if (result?.error) {
             console.error(result?.error);
@@ -82,6 +85,7 @@ export class CloudObject {
 // CloudQuery.ts
 export class CloudQuery {
     className: string;
+    sessionToken: string | null = "";
     whereOptions: Record<string, any> = {};
 
     constructor(className: string) {
@@ -154,7 +158,16 @@ export class CloudQuery {
         let objList = list.map((item: any) => this.dataToObj(item))
         return objList || [];
     }
-
+    /**
+     * @返回第一个查找到的结果
+     * @返回结果参考:CloudObject {
+     * id: 'e3wWcCfNwm', 
+     * data: {…}, 
+     * className: '_User', 
+     * sessionToken:"r:c0f4fe9cb8eb83d7f0295ff57e948419"
+     * createdAt: '2024-12-17T02:41:34.768Z', 
+     * updatedAt: '2024-12-23T00:33:15.961Z'}
+     */
     async first() {
         let url = `http://1.94.237.145:1337/parse/classes/${this.className}?`;
 
@@ -166,7 +179,8 @@ export class CloudQuery {
         const response = await fetch(url, {
             headers: {
                 "if-none-match": "W/\"1f0-ghxH2EwTk6Blz0g89ivf2adBDKY\"",
-                "x-parse-application-id": "hcx"
+                "x-parse-application-id": "hcx",
+                "x-parse-session-token":this.sessionToken||"",
             },
             body: null,
             method: "GET",
@@ -198,23 +212,10 @@ export class CloudUser extends CloudObject {
     constructor() {
         super("_User"); // 假设用户类在Parse中是"_User"
         // 读取用户缓存信息
-        console.log("正在读取用户缓存信息");
-        let userCacheStr = localStorage.getItem("NCloud/hcx/User")
-        if (userCacheStr) {
-            let userData = JSON.parse(userCacheStr)
-            // 设置用户信息
-            this.id = userData?.id;
-            this.className = "_User";
-            this.updatedAt = userData?.updatedAt;
-            this.createdAt = userData?.createdAt;
-            this.sessionToken = userData?.sessionToken;
-            this.data = userData.data // 保存用户数据
-            console.log("用户缓存信息读取完毕：");
-            console.log(this);
-        }
+        this.readCache();
     }
 
-    sessionToken: string | null = ""
+    //sessionToken: string | null = ""
     /** 获取当前用户信息 */
     async current() {
         if (!this.sessionToken) {
@@ -222,20 +223,6 @@ export class CloudUser extends CloudObject {
             return null;
         }
         return this;
-        /*const response = await fetch(`http://1.94.237.145:1337/parse/users/me`, {
-            headers: {
-                "x-parse-application-id": "hcx",
-                "x-parse-session-token": this.sessionToken // 使用sessionToken进行身份验证
-            },
-            method: "GET"
-        });
-
-        const result = await response?.json();
-        if (result?.error) {
-            console.error(result?.error);
-            return null;
-        }
-        return result;*/
     }
 
     /**更新用户缓存 */
@@ -247,29 +234,14 @@ export class CloudUser extends CloudObject {
         let query = new CloudQuery("_User");
         query.equalTo("objectId", this.id)
         console.log("设置条件：objectId==" + this.id)
-        let user:any = await query.first()
+        let user: any = await query.first()
         console.log("查询到条件用户信息：")
         console.log(user)
         //需要把sessionToken也保存起来
         user.sessionToken = this.sessionToken
         localStorage.setItem("NCloud/hcx/User", JSON.stringify(user))
         console.log("已将该信息更新至用户缓存！请检查");
-        console.log("准备读取新的用户缓存信息");
-        let userCacheStr = localStorage.getItem("NCloud/hcx/User")
-        console.log("读取到的用户缓存信息：");
-        console.log(userCacheStr);
-        if (userCacheStr) {
-            let userData = JSON.parse(userCacheStr)
-            // 设置用户信息
-            this.id = userData?.id;
-            this.className = "_User";
-            this.updatedAt = userData?.updatedAt;
-            this.createdAt = userData?.createdAt;
-            this.sessionToken = userData?.sessionToken;
-            this.data = userData.data // 保存用户数据
-            console.log("用户缓存信息读取完毕：");
-            console.log(this);
-        }
+        this.readCache();
     }
 
     /** 登录 */
@@ -292,7 +264,7 @@ export class CloudUser extends CloudObject {
         // 设置用户信息
         this.id = result?.objectId;
         this.sessionToken = result?.sessionToken;
-        this.updatedAt=result?.updatedAt;
+        this.updatedAt = result?.updatedAt;
         this.className = '_User';
         this.createdAt = result?.createdAt;
         let excludedKeys = ["objectId", "sessionToken", "createdAt", "updatedAt"];
@@ -307,13 +279,33 @@ export class CloudUser extends CloudObject {
         return this;
     }
 
-    async loginByPhone(phone: string, verCode: string): Promise<CloudUser | null> {
-        const response = await fetch(`http://1.94.237.145:1337/parse/users`, {
+    async loginByPhone(phone: string, verCode: string, trueVerCode: string): Promise<CloudUser | null> {
+        if (trueVerCode !== verCode) {
+            console.error('验证码错误');
+            return null;
+        }
+        let query = new CloudQuery("_User");
+        query.equalTo("phone", phone);
+        let user: any = await query.first();
+        //查询手机号对应的用户信息
+        let username: string='';
+        let password: string='secretpassword';
+        if (!user?.id) {
+            console.error('该手机号未注册');
+            //用户名即为手机号
+            username = phone.slice(0, 3) + '****' + phone.slice(-4);
+            console.log('该手机号未注册，即将自动创建该用户：'+username+'，密码为：'+password);
+        }
+        //如果用户存在，则直接登录
+        console.log('该手机号已注册，即将直接登录该用户')
+        username = user.get('username');
+        console.log('用户名：'+username+'，密码为：'+password);
+        const response = await fetch(`http://1.94.237.145:1337/parse/login`, {
             headers: {
                 "x-parse-application-id": "hcx",
                 "Content-Type": "application/json"
             },
-            body: JSON.stringify({ username: phone, password: verCode }),
+            body: JSON.stringify({ username,password }), // 假设后端需要这个字段名
             method: "POST"
         });
 
@@ -322,6 +314,23 @@ export class CloudUser extends CloudObject {
             console.error(result?.error);
             return null;
         }
+
+        // 设置用户信息
+        this.id = result?.objectId;
+        this.sessionToken = result?.sessionToken;
+        this.updatedAt = result?.updatedAt;
+        this.className = '_User';
+        this.createdAt = result?.createdAt;
+        let excludedKeys = ["objectId", "sessionToken", "createdAt", "updatedAt"];
+        for (let key of excludedKeys) {
+            delete result[key];
+        }
+        this.data = result; // 保存用户数据
+
+        // 缓存用户信息
+        console.log("登录成功后即将缓存的信息如下：");
+        console.log(this);
+        localStorage.setItem("NCloud/hcx/User", JSON.stringify(this));
         return this;
     }
 
@@ -387,4 +396,35 @@ export class CloudUser extends CloudObject {
         this.data = result; // 保存用户数据
         return this;
     }
+
+    /**
+     * @读取缓存
+     * @读取示例：json{
+     *  id: "5b29481e037c6a007f7d0320",
+     *  className: "_User",
+     *  createdAt: "2018-06-27T09:54:38.815Z",
+     *  updatedAt: "2018-06-27T09:54:38.815Z",
+     *  sessionToken: "<KEY>",
+     *  data: {...}
+     * }
+     */
+    readCache(){
+        console.log("正在执行readCache方法：读取用户缓存信息");
+        let userCacheStr = localStorage.getItem("NCloud/hcx/User")
+        console.log("读取到的用户缓存信息：");
+        console.log(userCacheStr);
+        if (userCacheStr) {
+            let userData = JSON.parse(userCacheStr)
+            // 设置用户信息
+            this.id = userData?.id;
+            this.className = "_User";
+            this.updatedAt = userData?.updatedAt;
+            this.createdAt = userData?.createdAt;
+            this.sessionToken = userData?.sessionToken;
+            this.data = userData.data // 保存用户数据
+            console.log("用户缓存信息读取完毕：");
+            console.log(this);
+        }
+        return this;
+    }
 }

E-Cover-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -0,0 +1,20 @@
+<!--头部内容，包含标题和返回按钮-->
+<ion-header>
+    <div class="header-container">
+        <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
+        <p class="header-title">编辑{{ option }}</p>
+        @if(option=='name'){
+        <p (click)="goToSave(option)" class="header-title">完成</p>
+        }
+        @else{
+        <p class="header-title">    </p>
+        }
+    </div>
+</ion-header>
+<!--正文部分-->
+<ion-content>
+    @if(option=='name'){
+    <ion-input style="width: 100%;--background:white;color: black;--padding-start: 10px;
+        height: 70px;font-size: large;" type="text" placeholder="请输入" [(ngModel)]="name"></ion-input>
+    }
+</ion-content>

E-Cover-app/src/lib/user/modal-user-edit/modal-user-edit.component.scss

@@ -0,0 +1,34 @@
+ion-content{
+    --background: #f8f8f8;
+    color: black;
+}
+ion-header {
+    background-color: #f8f8f8;
+    padding: 20px 10px;
+    color: black;
+    box-shadow: none;
+
+    .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        height: 100%;
+        /* 确保容器占满整个 header 高度 */
+        padding: 10px;
+    }
+
+    .back-icon {
+        left: 10px;
+        /* 图标距左侧的距离 */
+        cursor: pointer;
+    }
+
+    .header-title {
+        font-size: 18px;
+        /* 根据需要调整字体大小 */
+        font-weight: bold;
+        /* 可选，加粗字体 */
+        margin: 0;
+    }
+}

E-Cover-app/src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -1,15 +1,56 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, Input, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBackOutline } from 'ionicons/icons';
+import { CloudUser } from 'src/lib/ncloud';
+addIcons({ arrowBackOutline })
 @Component({
   selector: 'app-modal-user-edit',
   templateUrl: './modal-user-edit.component.html',
   styleUrls: ['./modal-user-edit.component.scss'],
   standalone: true,
-})
-export class ModalUserEditComponent  implements OnInit {
+  imports: [IonicModule, FormsModule],
 
-  constructor() { }
+})
+export class ModalUserEditComponent implements OnInit {
+  option!: string;
+  currentUser: CloudUser | undefined;
+  name: string = '';
+  constructor(private modalCtrl: ModalController) {
+    this.currentUser = new CloudUser();
+  }
+  ngOnInit() { }
+  goBack() {
+    this.modalCtrl.dismiss(null, 'cancel');
+  }
 
-  ngOnInit() {}
+  goToSave(option: string) {
+    console.log("即将保存" + option + "字段");
+    if (this.currentUser?.id) {
+      this.currentUser.data[option] = this.name;
+    }
+    console.log("已保存字段，对象如下：");
+    console.log(this.currentUser);
+    this.currentUser?.set(this.currentUser?.data)
+    this.currentUser?.save();
+  }
 
 }
+
+export async function openUserEditModal(modalCtrl: ModalController, option: string): Promise<CloudUser | null> {
+  const modal = await modalCtrl.create({
+    component: ModalUserEditComponent,
+    componentProps: { option },
+
+  });
+  await modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}

E-Cover-app/src/lib/user/modal-user-login-main/modal-user-login-main.component.ts

@@ -55,7 +55,7 @@ export class ModalUserLoginMainComponent implements OnInit {
   }
   getVerCode() {
     //随机生成四位数的验证码
-    this.trueVerCode = Math.floor(Math.random() * 10000).toString()
+    this.trueVerCode = (Math.floor(Math.random() * 9000)+1000).toString();
     console.log("获取验证码成功" + this.trueVerCode);
     const apiUrl = `http://api.smsbao.com/sms?u=peppa&p=94d5a383c32c4d85bfbfc2599e64a8dc&m=${this.phoneNumber}&c=${encodeURIComponent("【衣靠】您的验证码是" + this.trueVerCode)}`;
     console.log("请求地址:" + apiUrl);
@@ -72,17 +72,17 @@ export class ModalUserLoginMainComponent implements OnInit {
   }
   async loginByPhone() {
     console.log("登录被点击：手机号登录");
-    // if (!this.username || !this.password) {
-    //   console.log("请输入完整")
-    //   return
-    // }
     let user: any = new CloudUser();
-    user = await user.loginByPhone(this.phoneNumber, this.verCode);
-    // if (user?.id) {
-    //   this.modalCtrl.dismiss(user, "confirm")
-    // } else {
-    //   console.log("登录失败");
-    // }
+    user = await user.loginByPhone(this.phoneNumber, this.verCode,this.trueVerCode);
+    if (user?.id) {
+      console.log("登录成功，关闭模态loginByUsername");
+      this.modalCtrl.dismiss(user, "confirm")
+      console.log("loginMain传递信息如下：")
+      console.log(user)
+      console.log("已关闭")
+    } else {
+      console.log("登录失败");
+    }
   }
   /**
    * @用户名登录页面功能函数