feat:modaluseredit and update:modaluserlogin

docs-prod/schema.md

@@ -3,10 +3,13 @@
 ```plantuml
 ' 聊天项目类图英文版
 @startuml
-class User { 
+class _User { 
     + objectId: String //用户唯一标识符
-    + name: String //用户名
+    + username: String //用户名
+    + realname: String //真实姓名
     + password: String //用户密码
+    + gender: String //性别
+    + age: Number //年龄
     + email: String //用户邮箱
     + avatar: String //用户头像
     + bio: String //用户个人简介

soul-app/src/app/tab2/tab2.page.ts

@@ -34,16 +34,25 @@ export class Tab2Page {
   async clickToConsult(chatpartner:CloudObject) {
     // 验证用户登录
     let currentUser = new CloudUser();
+    let userPrompt = ``
     if(!currentUser?.id){
       console.log("用户未登录，请登录后重试")
       let user = await openUserLoginModal(this.modalCtrl)
       if(!user?.id){
         return
-      }
+      }     
+    }
+    if(currentUser?.get("realname")){
+      userPrompt += `当前来访的用户，姓名：${currentUser?.get("realname")}`
+    }
+    if(currentUser?.get("gender")){
+      userPrompt += `，性别：${currentUser?.get("gender")}`
+    }
+    if(currentUser?.get("age")){
+      userPrompt += `，年龄：${currentUser?.get("age")}`
     }
     // 弹窗形式聊天：开始咨询
     localStorage.setItem("company","E4KpGvTEto")
-
     let consult = new CloudObject("ChatRecord")
     let now = new Date();
     let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
@@ -68,6 +77,7 @@ export class Tab2Page {
         每次回复用户消息都在消息结尾附带[祝你有愉快的一天]
         # 开始话语
         当您准备好了，可以以一个关心用户的朋友的身份，向来访的用户打招呼。
+        ${userPrompt}
         `);
       },
       onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{

soul-app/src/app/tab3/tab3.page.html

@@ -33,7 +33,7 @@
       <ion-card-content>
       @if(!currentUser?.id){
         <div style="display: flex; justify-content: space-between;">
-          <!--<ion-button expand="block"  color="danger" (click)="signup()" style="flex: 1; margin-right: 5px;">注册</ion-button>-->
+          <ion-button expand="block"  color="danger" (click)="signup()" style="flex: 1; margin-right: 5px;">注册</ion-button>
           <ion-button expand="block"  color="danger" (click)="login()" style="flex: 1; margin-left: 5px;">登录</ion-button>
         </div>
       }

soul-app/src/app/tab3/tab3.page.ts

@@ -5,6 +5,7 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { ModalController } from '@ionic/angular/standalone';
+import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 
 @Component({
   selector: 'app-tab3',
@@ -29,17 +30,18 @@ export class Tab3Page {
     if(user?.id){
       this.currentUser = user
     }
-    //直接登录测试
-    //let user:any = new CloudUser();
-    //user = await user.login("馒头","123");
+  }
+  async signup(){
+    //弹出注册窗口
+    let user = await openUserLoginModal(this.modalCtrl,"signup");
+    if(user?.id){
+      this.currentUser = user
+    }
   }
   logout(){
     this.currentUser?.logout();
-  }
-  signup(){
-
   }
   editUser(){
-
+    openUserEditModal(this.modalCtrl)
   }
 }

soul-app/src/lib/ncloud.ts

@@ -243,20 +243,6 @@ export class CloudUser extends CloudObject {
             return null;
         }
         return this;
-        //const response = await fetch(`http://dev.fmode.cn:1337/parse/users/me`, {
-            //headers: {
-                //"x-parse-application-id": "dev",
-                //"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;
     }
 
     /** 登录 */
@@ -344,4 +330,44 @@ export class CloudUser extends CloudObject {
         this.data = result; // 保存用户数据
         return this;
     }
+
+    override async save() {
+        let method = "POST";
+        let url = `http://dev.fmode.cn:1337/parse/users`;
+    
+        // 更新用户信息
+        if (this.id) {
+            url += `/${this.id}`;
+            method = "PUT";
+        }
+    
+        let data:any = JSON.parse(JSON.stringify(this.data))
+        delete data.createdAt
+        delete data.updatedAt
+        delete data.ACL
+        delete data.objectId
+        const body = JSON.stringify(data);
+        let headersOptions:any = {
+            "content-type": "application/json;charset=UTF-8",
+            "x-parse-application-id": "dev",
+            "x-parse-session-token": this.sessionToken, // 添加sessionToken以进行身份验证
+        }
+        const response = await fetch(url, {
+            headers: headersOptions,
+            body: body,
+            method: method,
+            mode: "cors",
+            credentials: "omit"
+        });
+    
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+        }
+        if (result?.objectId) {
+            this.id = result?.objectId;
+        }
+        localStorage.setItem("NCloud/dev/User",JSON.stringify(this.data))
+        return this;
+    }
 }

soul-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -1,3 +1,32 @@
-<p>
-  modal-user-edit works!
-</p>
+<!-- 用户登录状态 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>
+      用户名：{{currentUser?.get("username")}}
+    </ion-card-title>
+    <ion-card-subtitle >请输入您的详细资料</ion-card-subtitle>
+   </ion-card-header>
+ <ion-card-content>
+
+   <ion-item>
+     <ion-input [value]="userData['realname']" (ionChange)="userDataChange('realname',$event)" label="姓名" placeholder="请您输入真实姓名"></ion-input>
+   </ion-item>
+   <ion-item>
+    <ion-input [value]="userData['username']" (ionChange)="userDataChange('username',$event)" label="昵称" placeholder="请您输入用户网名"></ion-input>
+  </ion-item>
+   <ion-item>
+     <ion-input type="number" [value]="userData['age']" (ionChange)="userDataChange('age',$event)" label="年龄" placeholder="请您输入年龄"></ion-input>
+    </ion-item>
+  <ion-item>
+     <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" placeholder="请您输入男/女"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像" placeholder="请您输入头像地址"></ion-input>
+     </ion-item>
+
+   <ion-button expand="block" color="danger" (click)="save()">保存</ion-button>
+   <ion-button expand="block" color="danger" (click)="cancel()">取消</ion-button>
+ 
+
+  </ion-card-content>
+</ion-card>

soul-app/src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -1,15 +1,65 @@
-import { Component, OnInit } from '@angular/core';
+import { Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonInput, IonItem, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
+import { CloudUser } from 'src/lib/ncloud';
 
 @Component({
   selector: 'app-modal-user-edit',
   templateUrl: './modal-user-edit.component.html',
   styleUrls: ['./modal-user-edit.component.scss'],
   standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
+    IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    IonInput,IonItem,
+    IonSegment,IonSegmentButton,IonLabel
+  ],
 })
 export class ModalUserEditComponent  implements OnInit {
 
-  constructor() { }
+  currentUser:CloudUser|undefined
+  userData:any = {}
+  userDataChange(key:string,ev:any){
+    let value = ev?.detail?.value
+    if(value){
+      this.userData[key] = value
+    }
+  }
+  constructor(private modalCtrl:ModalController) { 
+    this.currentUser = new CloudUser();
+    this.userData = this.currentUser.data;
+  }
 
   ngOnInit() {}
 
+  async save(){
+    Object.keys(this.userData).forEach(key=>{
+      if(key=="age"){
+        this.userData[key] = Number(this.userData[key])
+      }
+    })
+
+    this.currentUser?.set(this.userData)
+    await this.currentUser?.save()
+    this.modalCtrl.dismiss(this.currentUser,"confirm")
+  }
+  cancel(){
+    this.modalCtrl.dismiss(null,"cancel")
+
+  }
 }
+
+export async function openUserEditModal(modalCtrl:ModalController):Promise<CloudUser|null>{
+  const modal = await modalCtrl.create({
+    component: ModalUserEditComponent,
+    breakpoints:[0.7,1.0],
+    initialBreakpoint:0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null
+}

soul-app/src/lib/user/modal-user-login/modal-user-login.component.html

@@ -15,7 +15,7 @@
   </ion-card-header>
   <ion-card-content>
     <ion-item>
-      <ion-input [value]="username" (ionChange)="usernameChange($event)" label="账号" placeholder="请您输入账号/手机号"></ion-input>
+      <ion-input [value]="username" (ionChange)="usernameChange($event)" label="昵称" placeholder="昵称"></ion-input>
     </ion-item>
     <ion-item>
       <ion-input [value]="password" (ionChange)="passwordChange($event)" label="密码" type="password" value="password"></ion-input>