finish:login

E-Cover-app/src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { SettingsComponent } from './settings/settings.component';
 
 export const routes: Routes = [
   {
@@ -20,4 +21,14 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./generate-result/generate-result.component').then((m) => m.GenerateResultComponent),
   },
+  {
+    path:'settings',
+    loadComponent:()=>
+      import('./settings/settings.component').then((m)=>m.SettingsComponent),
+  },
+  {
+    path:'userInfo',
+    loadComponent:()=>
+      import('./user-info/user-info.component').then((m)=>m.UserInfoComponent),
+  },
 ];

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

@@ -0,0 +1,81 @@
+<!--头部内容，包含标题和返回按钮-->
+<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">设置</p>
+  </div>
+</ion-header>
+<!--正文部分-->
+<ion-content>
+  <div class="container">
+    <div class="row" (click)="goUserInfo()">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="shield-checkmark-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">个人资料</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="hand-right-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">账号安全</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="lock-open-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">隐私设置</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="bag-remove-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">商务合作</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="create-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">提个建议</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="information-circle-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">关于我们</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="skull-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">黑名单</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="close-circle-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">注销账号</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="info-item">
+        <ion-icon aria-hidden="true" name="log-out-outline" class="info-icon"></ion-icon>
+        <span class="fontSize">退出登录</span>
+      </div>
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </div>
+  </div>
+</ion-content>

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

@@ -0,0 +1,72 @@
+ion-header {
+    background-color: #f8f8f8;
+    padding: 20px 10px;
+    color: black;
+    box-shadow: none;
+
+    .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        height: 100%;
+        /* 确保容器占满整个 header 高度 */
+        padding: 10px;
+    }
+
+    .back-icon {
+        position: absolute;
+        left: 10px;
+        /* 图标距左侧的距离 */
+        cursor: pointer;
+    }
+
+    .header-title {
+        font-size: 18px;
+        /* 根据需要调整字体大小 */
+        font-weight: bold;
+        /* 可选，加粗字体 */
+        margin: 0;
+    }
+}
+
+ion-content {
+    --background: #f8f8f8 !important;
+    --color: black;
+}
+
+.container {
+    background-color: white; // 背景色
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0; // 行内边距
+    height: 80px;
+}
+
+.row:last-child {
+    border-bottom: none; // 最后一行不显示分隔线
+}
+
+.info-item {
+    display: flex;
+    align-items: center;
+    margin-left: 12px;
+    font-size: 18px;
+}
+
+.info-icon {
+    color: black; // 图标颜色
+    font-size:25px;
+    margin-right: 12px; // 图标与文本之间的间距
+}
+
+.arrow-icon {
+    font-size: 24px;
+    margin-right: 12px;
+}

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [SettingsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+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
+})
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss'],
+  standalone: true,
+  imports: [IonicModule,RouterModule]
+})
+export class SettingsComponent implements OnInit {
+  constructor(private navCtrl:NavController,private route:Router) { }
+  ngOnInit() { }
+  /**
+   * @返回按钮事件
+   */
+  goBack() {
+    this.navCtrl.back();
+  }
+
+  goUserInfo(){
+    this.route.navigate(['userInfo']);
+  }
+}

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

@@ -8,7 +8,7 @@
         <ion-icon slot="start" name="person-add-outline"></ion-icon>我的名片
       </ion-button>
       <ion-icon name="card-outline" size="large"></ion-icon>
-      <ion-text>设置</ion-text>
+      <ion-text (click)="goSetting()">设置</ion-text>
     </div>
     <div id="personInfo">
       <div id="avatarAndName">
@@ -23,61 +23,24 @@
       <p>{{ currentUser?.get('signature') }}</p>
       }
       @else{
-        <p>这家伙很懒，什么都没有留下</p>
+      <p>这家伙很懒，什么都没有留下</p>
       }
+      <div id="count">
+        <h3 style="display: inline;">{{ currentUser?.get('fans') }}</h3>
+        <p style="display: inline;">粉丝</p>
+        <h3 style="display: inline;">{{ currentUser?.get('subscription') }}</h3>
+        <p style="display: inline;">关注</p>
+        <h3 style="display: inline;">{{ formatNumber(currentUser?.get('like')) }}</h3>
+        <p style="display: inline;">获赞</p>
+      </div>
 
-      
-    </div>
-  </div>
-
-  <div class="profile-header">
-    <img src="assets/profile-pic.png" alt="Profile Picture" class="profile-pic">
-    <h2>野猪Peppa</h2>
-    <p>南昌 策略大师</p>
-    <div class="stats">
-      <span>粉丝: 4</span>
-      <span>关注: 7</span>
-      <span>好友: 4</span>
-      <span>赞: 51</span>
+      <ion-button id="badge">
+        <ion-icon slot="start" name="flame-outline"></ion-icon>
+        我的勋章
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-button>
     </div>
   </div>
 
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-        <div class="card">想玩剧本<br>37</div>
-      </ion-col>
-      <ion-col>
-        <div class="card">玩过剧本<br>141</div>
-      </ion-col>
-      <ion-col>
-        <div class="card">我的剧本集<br>0</div>
-      </ion-col>
-      <ion-col>
-        <div class="card">去过店铺<br>32</div>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
 
-  <ion-list>
-    <ion-item>
-      <ion-label>剧评</ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>草稿箱</ion-label>
-    </ion-item>
-  </ion-list>
-
-  <div class="reviews">
-    <div class="review">
-      <p>剧情: 10%</p>
-      <p>机制: 50%</p>
-      <p>玩法: ...</p>
-    </div>
-    <div class="review">
-      <p>剧情: 10%</p>
-      <p>机制: 50%</p>
-      <p>玩法: ...</p>
-    </div>
-  </div>
 </ion-content>

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

@@ -69,4 +69,22 @@ ion-content {
 }
 #personInfo p{
     color: gray;
+}
+#count{
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+#count h3{
+    margin:auto 0;
+}
+#count p{
+    margin-right: 20px;
+}
+#badge {
+    --background:none;
+    --box-shadow:none;
+    --padding-start:2px;
+    color: white;
+    font-size:medium;
 }

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

@@ -5,8 +5,8 @@ import { CloudUser, CloudObject } from 'src/lib/ncloud';
 import { Router } from '@angular/router';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { addIcons } from 'ionicons';
-import { cardOutline, personAddOutline } from 'ionicons/icons';
-addIcons({personAddOutline,cardOutline})
+import { cardOutline, chevronForwardOutline, flameOutline, personAddOutline } from 'ionicons/icons';
+addIcons({ personAddOutline, cardOutline,flameOutline,chevronForwardOutline })
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
@@ -16,7 +16,35 @@ addIcons({personAddOutline,cardOutline})
 })
 export class Tab3Page {
   currentUser: CloudUser | undefined
-  constructor(private modalCtrl: ModalController, private router: Router) {
+  constructor(private modalCtrl: ModalController, private router: Router) { }
+  // 格式化数字的方法
+  formatNumber(num: number): string {
+    if (num >= 10000) {
+      return (num / 10000).toFixed(1) + 'w';
+    } else if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'k';
+    } else {
+      return num+'';
+    }
+  }
+  async ionViewWillEnter() {
+    console.log("验证用户是否登录");
+    let user: any = new CloudUser();
+    user.current();
+    if (user?.id == null) {
+      console.log("用户未登录,跳转到登录页面")
+      user = await openUserLoginModal(this.modalCtrl);
+      console.log("登录用户信息:");
+      console.log(user);
+    }
+    else {
+      console.log("用户已登录,更新用户缓存信息")
+      await user.updateCache();
+      console.log("当前用户信息:");
+      console.log(user);
+    }
+    console.log("进入到我的界面，准备更新数据");
+    this.currentUser = new CloudUser();
   }
 
   async signup() {
@@ -32,5 +60,7 @@ export class Tab3Page {
   editUser() {
 
   }
-
+  goSetting(){
+    this.router.navigate(["/settings"]);
+  }
 }

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

@@ -2,8 +2,6 @@ import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, ModalController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { triangle, ellipse, square } from 'ionicons/icons';
-import { CloudUser } from 'src/lib/ncloud';
-import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 
 @Component({
   selector: 'app-tabs',
@@ -13,7 +11,6 @@ import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-log
   imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
 })
 export class TabsPage {
-  user: any = new CloudUser();
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor(private modalCtrl: ModalController) {
@@ -21,19 +18,6 @@ export class TabsPage {
   }
 
   async valiate() {
-    console.log("验证用户是否登录")
-    this.user.current();
-    if (this.user?.id == null) {
-      console.log("用户未登录,跳转到登录页面")
-      this.user = openUserLoginModal(this.modalCtrl);
-      console.log("登录用户信息:");
-      console.log(this.user);
-    }
-    else {
-      console.log("用户已登录,更新用户缓存信息")
-      await this.user.updateCache();
-      console.log("当前用户信息:");
-      console.log(this.user);
-    }
+    
   }
 }

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

@@ -0,0 +1,78 @@
+<!--头部内容，包含标题和返回按钮-->
+<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">个人资料</p>
+  </div>
+</ion-header>
+<!--正文部分-->
+<ion-content>
+  <div class="container">
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">头像</span>
+      </div>
+      <div class="value">
+        <img id="avatar" [src]="currentUser?.get('avatar') ||'assets/icon/default_avatar.jpg'" alt="头像" />
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">昵称</span>
+      </div>
+      <div class="value">
+        <span>{{ currentUser?.get('name') }}</span>
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">手机号</span>
+      </div>
+      <div class="value">
+        <span>{{ currentUser?.get('phone') }}</span>
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">性别</span>
+      </div>
+      <div class="value">
+        <span>{{ currentUser?.get('gender') }}</span>
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">所在地</span>
+      </div>
+      <div class="value">
+        <span>{{ currentUser?.get('name') }}</span>
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">生日</span>
+      </div>
+      <div class="value">
+        <span>{{ currentUser?.get('name') }}</span>
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+    <div class="row">
+      <div class="info-item">
+        <span class="fontSize">个性签名</span>
+      </div>
+      <div class="value">
+        <span>{{ currentUser?.get('signature') }}</span>
+        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+      </div>
+    </div>
+  </div>
+</ion-content>

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

@@ -0,0 +1,93 @@
+ion-header {
+    background-color: #f8f8f8;
+    padding: 20px 10px;
+    color: black;
+    box-shadow: none;
+
+    .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        height: 100%;
+        /* 确保容器占满整个 header 高度 */
+        padding: 10px;
+    }
+
+    .back-icon {
+        position: absolute;
+        left: 10px;
+        /* 图标距左侧的距离 */
+        cursor: pointer;
+    }
+
+    .header-title {
+        font-size: 18px;
+        /* 根据需要调整字体大小 */
+        font-weight: bold;
+        /* 可选，加粗字体 */
+        margin: 0;
+    }
+}
+
+ion-content {
+    --background: #f8f8f8 !important;
+    --color: black;
+}
+
+.container {
+    background-color: white; // 背景色
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0; // 行内边距
+    border-bottom: 1px solid #e5e5e548; // 分隔线
+}
+
+.row:last-child {
+    border-bottom: none; // 最后一行不显示分隔线
+}
+
+.info-item {
+    display: flex;
+    align-items: center;
+    margin-left: 12px;
+    font-size: 18px;
+}
+
+.info-icon {
+    color: black; // 图标颜色
+    font-size: 25px;
+    margin-right: 12px; // 图标与文本之间的间距
+}
+
+.arrow-icon {
+    font-size: 24px;
+    margin-right: 12px;
+}
+
+#avatar{
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.fontSize{
+    margin: 10px;
+}
+
+.value{
+    display: flex;
+    align-items: center;
+}
+
+.value span{
+    font-size: 18px;
+    margin-right: 10px;
+}

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { UserInfoComponent } from './user-info.component';
+
+describe('UserInfoComponent', () => {
+  let component: UserInfoComponent;
+  let fixture: ComponentFixture<UserInfoComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [UserInfoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, NavController } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { arrowBackOutline, chevronForwardOutline } from 'ionicons/icons';
+import { CloudUser } from 'src/lib/ncloud';
+addIcons({ arrowBackOutline, chevronForwardOutline });
+@Component({
+  selector: 'app-user-info',
+  templateUrl: './user-info.component.html',
+  styleUrls: ['./user-info.component.scss'],
+  standalone: true,
+  imports: [IonicModule]
+
+})
+export class UserInfoComponent implements OnInit {
+  currentUser: CloudUser | undefined;
+  constructor(private navCtrl: NavController) { 
+    this.currentUser = new CloudUser();
+  }
+  ngOnInit() { }
+
+  goBack() {
+    this.navCtrl.back();
+  }
+}

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

@@ -203,9 +203,12 @@ export class CloudUser extends CloudObject {
         if (userCacheStr) {
             let userData = JSON.parse(userCacheStr)
             // 设置用户信息
-            this.id = userData?.objectId;
+            this.id = userData?.id;
+            this.className = "_User";
+            this.updatedAt = userData?.updatedAt;
+            this.createdAt = userData?.createdAt;
             this.sessionToken = userData?.sessionToken;
-            this.data = userData; // 保存用户数据
+            this.data = userData.data // 保存用户数据
             console.log("用户缓存信息读取完毕：");
             console.log(this);
         }
@@ -234,7 +237,7 @@ export class CloudUser extends CloudObject {
         }
         return result;*/
     }
-    /**读取用户缓存 */
+
     /**更新用户缓存 */
     async updateCache() {
         if (!this.sessionToken) {
@@ -255,16 +258,18 @@ export class CloudUser extends CloudObject {
         let userCacheStr = localStorage.getItem("NCloud/hcx/User")
         console.log("读取到的用户缓存信息：");
         console.log(userCacheStr);
-        // if (userCacheStr) {
-        //     let userData = JSON.parse(userCacheStr)
-        //     // 设置用户信息
-        //     this.id = userData?.objectId;
-        //     this.sessionToken = userData?.sessionToken;
-        //     this.data = userData; // 保存用户数据
-        //     console.log("用户缓存信息重新读取完毕：");
-        //     console.log(this);
-        // }
-        // return this;
+        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);
+        }
     }
 
     /** 登录 */
@@ -288,9 +293,9 @@ export class CloudUser extends CloudObject {
         this.id = result?.objectId;
         this.sessionToken = result?.sessionToken;
         this.updatedAt=result?.updatedAt;
-        this.className = result?._className;
+        this.className = '_User';
         this.createdAt = result?.createdAt;
-        let excludedKeys = ["objectId", "sessionToken", "createdAt", "updatedAt", "_className"];
+        let excludedKeys = ["objectId", "sessionToken", "createdAt", "updatedAt"];
         for (let key of excludedKeys) {
             delete result[key];
         }