refactor:login

E-Cover-app/src/app/generate-option/generate-option.component.ts

@@ -12,7 +12,6 @@ import { TaskGeneratePrompt } from 'src/agent/tasks/generate/generate-prompt';
 import { TaskGeneratePicture } from 'src/agent/tasks/generate/generate-picture';
 import { FmodeChat, ChatPanelOptions, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
 import { CloudUser } from 'src/lib/ncloud';
-import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 addIcons({ 'arrow-back-outline': arrowBackOutline, radioButtonOffOutline, closeCircleOutline, checkmarkCircleOutline, reloadOutline });
 @Component({
   selector: 'app-generate-option',
@@ -268,7 +267,7 @@ export class GenerateOptionComponent implements OnInit {
     let currentUser = new CloudUser();
     if(!currentUser?.id){
       console.log("用户未登录，请先登录");
-      openUserLoginModal(this.modalCtrl as any);
+      //openUserLoginModal(this.modalCtrl as any);
       return false;
     }
     return true;

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

@@ -1,29 +1,83 @@
-<ion-content [fullscreen]="true">
-  <!-- 用户登录状态 -->
-  <ion-card>
-    <!-- 未登录 -->
-     @if(!currentUser?.id){
-       <ion-card-header>
-         <ion-card-title>请登录</ion-card-title>
-         <ion-card-subtitle>暂无信息</ion-card-subtitle>
-        </ion-card-header>
+<ion-content>
+  <ion-header>
+    我的
+  </ion-header>
+  <div id="banner">
+    <div id="header">
+      <ion-button shape="round">
+        <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>
+    </div>
+    <div id="personInfo">
+      <div id="avatarAndName">
+        <img id="avatar" [src]="currentUser?.get('avatar') ||'assets/icon/default_avatar.jpg'" alt="头像" />
+        <div id="nameAndTags">
+          <h1>{{currentUser?.get('name')}}</h1>
+          <ion-card class="tags">社交恐惧症</ion-card>
+          <ion-card class="tags">穿衣有肉</ion-card>
+        </div>
+      </div>
+      @if(currentUser?.get('signature')){
+      <p>{{ currentUser?.get('signature') }}</p>
       }
-        <!-- 未登录 -->
-     @if(currentUser?.id){
-      <ion-card-header>
-        <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
-        <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</ion-card-subtitle>
-      </ion-card-header>
+      @else{
+        <p>这家伙很懒，什么都没有留下</p>
       }
-      <ion-card-content>
-      @if(!currentUser?.id){
-        <ion-button expand="block" (click)="signup()">注册</ion-button>
-        <ion-button expand="block" (click)="login()">登录</ion-button>
-      }
-     @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
-    }
-    </ion-card-content>
-  </ion-card>
-</ion-content>
+
+      
+    </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>
+    </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

@@ -0,0 +1,72 @@
+ion-content {
+    --background: #f8f8f8;
+    color: black;
+
+    ion-header {
+        background: #f8f8f8;
+        color: black;
+        text-align: center;
+        box-shadow: none;
+        padding: 10px;
+        font-size: large;
+        display: none;
+        position: absolute;
+    }
+}
+#banner{
+    background:rgba(0, 0, 0, 0.849);
+}
+#header {
+    color: rgb(255, 255, 255);
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding:10px 2px;
+
+    ion-text {
+        font-size: 20px;
+        margin: 5px;
+    }
+
+    ion-button {
+        font-size: 15px;
+        --padding-start: 15px;
+        --padding-end: 15px;
+        margin: 5px;
+        --background: rgba(255, 255, 255, 0.075);
+        --color: white;
+        --box-shadow:0 0 1px white;
+    }
+
+    ion-icon[name='card-outline'] {
+        margin: 5px 10px;
+    }
+}
+.tags{
+    --background:none;
+    box-shadow: none;
+    display: inline;
+    border: #414040 1px solid;
+    padding:0 5px;
+    margin: 0 2px;
+}
+#avatarAndName{
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+#personInfo{
+    padding: 15px;
+}
+#avatar{
+    width: 20%;
+    border-radius: 50%;
+    margin-right: 20px;
+}
+#nameAndTags h1{
+    margin:5px;
+}
+#personInfo p{
+    color: gray;
+}

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

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 import { ModalController } from '@ionic/angular/standalone';
-import { CloudUser,CloudObject } from 'src/lib/ncloud';
+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})
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
@@ -12,29 +15,22 @@ import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-log
   imports: [IonicModule],
 })
 export class Tab3Page {
-  currentUser:CloudUser|undefined
-  constructor(private modalCtrl: ModalController) {
-    this.currentUser = new CloudUser();
+  currentUser: CloudUser | undefined
+  constructor(private modalCtrl: ModalController, private router: Router) {
   }
-  async login(){
-    //弹窗登录
-    let user=await openUserLoginModal(this.modalCtrl);
-    if(user?.id){
-      this.currentUser = user;
-    }
 
-  }
-  async signup(){
+  async signup() {
     //弹窗注册
-    let user=await openUserLoginModal(this.modalCtrl,"signup");
-    if(user?.id){
-      this.currentUser = user;
-    }
+    //let user=await openUserLoginModal(this.modalCtrl,"signup");
+    //if(user?.id){
+    // this.currentUser = user;
+    //}
   }
-  logout(){
+  logout() {
     this.currentUser?.logout();
   }
-  editUser(){
+  editUser() {
 
   }
+
 }

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">
+    <ion-tab-button tab="tab3" href="/tabs/tab3" (click)="valiate()">
       <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

@@ -1,7 +1,9 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
-import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
+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',
@@ -11,9 +13,27 @@ import { triangle, ellipse, square } from 'ionicons/icons';
   imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
 })
 export class TabsPage {
+  user: any = new CloudUser();
   public environmentInjector = inject(EnvironmentInjector);
 
-  constructor() {
+  constructor(private modalCtrl: ModalController) {
     addIcons({ triangle, ellipse, square });
   }
+
+  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/lib/ncloud.ts

@@ -2,8 +2,8 @@
 export class CloudObject {
     className: string;
     id: string | null = null;
-    createdAt:any;
-    updatedAt:any;
+    createdAt: any;
+    updatedAt: any;
     data: Record<string, any> = {};
 
     constructor(className: string) {
@@ -151,7 +151,7 @@ export class CloudQuery {
 
         const json = await response?.json();
         let list = json?.results || []
-        let objList = list.map((item:any)=>this.dataToObj(item))
+        let objList = list.map((item: any) => this.dataToObj(item))
         return objList || [];
     }
 
@@ -183,7 +183,7 @@ export class CloudQuery {
         return null
     }
 
-    dataToObj(exists:any):CloudObject{
+    dataToObj(exists: any): CloudObject {
         let existsObject = new CloudObject(this.className);
         existsObject.set(exists);
         existsObject.id = exists.objectId;
@@ -198,17 +198,20 @@ export class CloudUser extends CloudObject {
     constructor() {
         super("_User"); // 假设用户类在Parse中是"_User"
         // 读取用户缓存信息
+        console.log("正在读取用户缓存信息");
         let userCacheStr = localStorage.getItem("NCloud/hcx/User")
-        if(userCacheStr){
+        if (userCacheStr) {
             let userData = JSON.parse(userCacheStr)
             // 设置用户信息
             this.id = userData?.objectId;
             this.sessionToken = userData?.sessionToken;
             this.data = userData; // 保存用户数据
+            console.log("用户缓存信息读取完毕：");
+            console.log(this);
         }
     }
 
-    sessionToken:string|null = ""
+    sessionToken: string | null = ""
     /** 获取当前用户信息 */
     async current() {
         if (!this.sessionToken) {
@@ -231,9 +234,41 @@ export class CloudUser extends CloudObject {
         }
         return result;*/
     }
+    /**读取用户缓存 */
+    /**更新用户缓存 */
+    async updateCache() {
+        if (!this.sessionToken) {
+            console.error("正在执行更新用户缓存：用户未登录");
+            return;
+        }
+        let query = new CloudQuery("_User");
+        query.equalTo("objectId", this.id)
+        console.log("设置条件：objectId==" + this.id)
+        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?.objectId;
+        //     this.sessionToken = userData?.sessionToken;
+        //     this.data = userData; // 保存用户数据
+        //     console.log("用户缓存信息重新读取完毕：");
+        //     console.log(this);
+        // }
+        // return this;
+    }
 
     /** 登录 */
-    async login(username: string, password: string):Promise<CloudUser|null> {
+    async loginByUsername(username: string, password: string): Promise<CloudUser | null> {
         const response = await fetch(`http://1.94.237.145:1337/parse/login`, {
             headers: {
                 "x-parse-application-id": "hcx",
@@ -248,17 +283,44 @@ 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 = result?._className;
+        this.createdAt = result?.createdAt;
+        let excludedKeys = ["objectId", "sessionToken", "createdAt", "updatedAt", "_className"];
+        for (let key of excludedKeys) {
+            delete result[key];
+        }
         this.data = result; // 保存用户数据
         // 缓存用户信息
-        console.log(result)
-        localStorage.setItem("NCloud/hcx/User",JSON.stringify(result))
+        console.log("登录成功后即将缓存的信息如下：");
+        console.log(this)
+        localStorage.setItem("NCloud/hcx/User", JSON.stringify(this))
         return this;
     }
 
+    async loginByPhone(phone: string, verCode: string): Promise<CloudUser | null> {
+        const response = await fetch(`http://1.94.237.145:1337/parse/users`, {
+            headers: {
+                "x-parse-application-id": "hcx",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ username: phone, password: verCode }),
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+        return this;
+    }
+
+
     /** 登出 */
     async logout() {
         if (!this.sessionToken) {
@@ -314,7 +376,7 @@ export class CloudUser extends CloudObject {
         // 设置用户信息
         // 缓存用户信息
         console.log(result)
-        localStorage.setItem("NCloud/hcx/User",JSON.stringify(result))
+        localStorage.setItem("NCloud/hcx/User", JSON.stringify(result))
         this.id = result?.objectId;
         this.sessionToken = result?.sessionToken;
         this.data = result; // 保存用户数据

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

@@ -1,3 +0,0 @@
-<p>
-  modal-user-edit works!
-</p>

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

@@ -1,3 +1,36 @@
-<p>
-  modal-user-login-main works!
-</p>
+<ion-content>
+  <ion-icon name="arrow-back-outline" size="large" class="back" (click)="goBack()"></ion-icon>
+  <img class="logo" src="assets/login/logo.png" alt="logo">
+
+  @if(loginType=='phone'){
+  <p>未注册的手机号验证后自动创建账户</p>
+  <div>
+    <ion-input class="input" type="tel" [(ngModel)]="phoneNumber" (input)="onPhoneNumberChange()" placeholder="请输入手机号"
+      shape="round"></ion-input>
+  </div>
+  <div>
+    <ion-input class="input" type="num" [(ngModel)]="verCode" (input)="onVerCodeChange()" placeholder="请输入验证码"
+      shape="round">
+      <ion-button slot="end" (click)="getVerCode()" [disabled]="!isVerCodeEnabled">验证码</ion-button>
+    </ion-input>
+  </div>
+
+  <ion-button id="login" expand="block" shape="round" (click)="loginByPhone()" [disabled]="!isLoginButtonEnabled">
+    登录
+  </ion-button>
+  }
+  @if(loginType=='username'){
+    <p>如需注册请使用手机号登录</p>
+  <div>
+    <ion-input class="input" [(ngModel)]="username" placeholder="请输入用户名" shape="round"></ion-input>
+  </div>
+  <div>
+    <ion-input class="input" type="password" [(ngModel)]="password" placeholder="请输入密码" shape="round"></ion-input>
+  </div>
+
+  <ion-button id="login" expand="block" shape="round" (click)="loginByUsername()">
+    登录
+  </ion-button>
+  }
+
+</ion-content>

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

@@ -0,0 +1,57 @@
+ion-content {
+    --background: #f8f8f8;
+
+    ion-button {
+        --background: rgb(234, 234, 234);
+        --box-shadow: none;
+        width: 80%;
+        height: 6%;
+        margin: 0 10%;
+        color: gray;
+    }
+
+    p {
+        color: gray;
+        font-size: smaller;
+        text-align: center;
+    }
+
+    ion-input {
+        --background: rgb(241, 241, 241);
+        --color: black;
+        --padding-start: 25px;
+        --border-radius: 1000px;
+        --highlight-color-focused: none;
+        width: 100%;
+        height: 100%;
+        font-size: 16px;
+
+        ion-button {
+            --background: none;
+            --box-shadow: none;
+            color: gray;
+            width: 30%;
+        }
+    }
+}
+
+div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 5% 10%;
+    height: 6%;
+    width: 80%;
+}
+
+.back {
+    position: absolute;
+    color: black;
+    height: 10%;
+}
+
+.logo {
+    margin: 15% auto;
+    width: 70%;
+    display: block;
+}

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

@@ -1,15 +1,127 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
+import { CloudUser } from 'src/lib/ncloud';
+import { addIcons } from 'ionicons';
+import { arrowBackOutline, logoTux, logoWechat, phonePortraitOutline } from 'ionicons/icons';
+import { FormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+addIcons({ arrowBackOutline, logoWechat, phonePortraitOutline, logoTux });
 
 @Component({
   selector: 'app-modal-user-login-main',
   templateUrl: './modal-user-login-main.component.html',
   styleUrls: ['./modal-user-login-main.component.scss'],
   standalone: true,
+  imports: [IonicModule, FormsModule],
 })
-export class ModalUserLoginMainComponent  implements OnInit {
+export class ModalUserLoginMainComponent implements OnInit {
+  phoneNumber: string = "";
+  verCode: string = "";
+  isVerCodeEnabled: boolean = false;
+  isLoginButtonEnabled: boolean = false;
+  trueVerCode: string = '';
+  @Input() loginType: string = '';
+  /**
+   * @置顶函数
+   */
+  constructor(private modalCtrl: ModalController, private http: HttpClient) { }
+  ngOnInit() { }
+  goBack() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+  /**
+   * @手机号登录页面功能函数
+   */
+  onPhoneNumberChange() {
+    if (this.phoneNumber.length == 11) {
+      this.isVerCodeEnabled = true;
+      console.log("手机号码长度:" + this.phoneNumber.length + ", 成功")
+    }
+    else {
+      this.isVerCodeEnabled = false;
+      console.log("手机号码长度:" + this.phoneNumber.length + ", 失败")
+    }
+  }
+  onVerCodeChange() {
+    if (this.verCode.length >= 4) {
+      this.isLoginButtonEnabled = true;
+      console.log("验证码长度:" + this.verCode.length + ", 成功")
+    }
+    else {
+      this.isLoginButtonEnabled = false;
+      console.log("验证码长度:" + this.verCode.length + ", 失败")
+    }
+  }
+  getVerCode() {
+    //随机生成四位数的验证码
+    this.trueVerCode = Math.floor(Math.random() * 10000).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);
+    this.http.get(apiUrl).subscribe(response => {
+      if (response === '0') {
+        console.log("短信发送成功");
+        // 处理登录成功逻辑
+      } else {
+        console.error("短信发送失败", response);
+      }
+    }, error => {
+      console.error("请求失败", error);
+    });
+  }
+  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("登录失败");
+    // }
+  }
+  /**
+   * @用户名登录页面功能函数
+   */
+  username: string = "";
+  password: string = "";
+  async loginByUsername() {
+    console.log("登录被点击：用户名登录");
+    if (!this.username || !this.password) {
+      console.log("请输入完整用户名和密码")
+      return
+    }
+    let user:any = new CloudUser();
+    user = await user.loginByUsername(this.username, this.password);
+    if (user?.id) {
+      console.log("登录成功，关闭模态loginByUsername");
+      this.modalCtrl.dismiss(user, "confirm")
+      console.log("loginMain传递信息如下：")
+      console.log(user)
+      console.log("已关闭")
+    } else {
+      console.log("登录失败");
+    }
+  }
+}
 
-  constructor() { }
+export async function openUserLoginMainModal(modalCtrl: ModalController, loginType: string): Promise<CloudUser | null> {
+  const modal = await modalCtrl.create({
+    component: ModalUserLoginMainComponent,
+    componentProps: {
+      loginType: loginType
+    },
+  });
+  await modal.present();
 
-  ngOnInit() {}
+  const { data, role } = await modal.onWillDismiss();
 
-}
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}

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

@@ -1,7 +1,7 @@
 <ion-content>
   <ion-icon name="arrow-back-outline" size="large" class="back" (click)="goBack()"></ion-icon>
   <img class="logo" src="assets/login/logo.png" alt="logo">
-  <ion-button id="phone" expand="block" shape="round" (click)="goPhoneLogin()">
+  <ion-button id="phone" expand="block" shape="round" (click)="goPhoneLoginPage()">
     <ion-icon name="phone-portrait-outline"></ion-icon>
     手机号登录
   </ion-button>
@@ -9,51 +9,11 @@
       (click)="$event.stopPropagation()">《隐私政策》</a></ion-checkbox>
   <p>其他登录方式</p>
   <div id="other">
-    <ion-button class="other" shape="round">
-      <ion-icon slot="icon-only" name="logo-tux"></ion-icon>
+    <ion-button class="other" shape="round" (click)="goUsernameLoginPage()">
+      <ion-icon slot="icon-only" name="person-outline"></ion-icon>
     </ion-button>
     <ion-button class="other" shape="round">
       <ion-icon slot="icon-only" name="logo-wechat"></ion-icon>
     </ion-button>
   </div>
-</ion-content>
-
-<!-- <ion-card>
-  <ion-card-header>
-    <ion-card-title>
-      <ion-segment [value]="type" (ionChange)="typeChange($event)">
-        <ion-segment-button value="login">
-          <ion-label>登录</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="signup">
-          <ion-label>注册</ion-label>
-        </ion-segment-button>
-      </ion-segment>
-    </ion-card-title>
-    <ion-card-subtitle>请输入账号密码</ion-card-subtitle>
-  </ion-card-header>
-
-  <ion-card-content>
-    <ion-item>
-      <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>
-    </ion-item>
-    @if(type == 'signup'){
-    <ion-item>
-      <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码2" type="password"
-        value="password2"></ion-input>
-    </ion-item>
-    }
-    @if(type == 'login'){
-    <ion-button expand="block" (click)="login()">登录</ion-button>
-    }
-    @if(type == 'signup'){
-    <ion-button expand="block" (click)="signup()">注册</ion-button>
-    }
-
-
-  </ion-card-content>
-</ion-card> -->
+</ion-content>

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

@@ -2,43 +2,48 @@ ion-content {
     --background: #f8f8f8;
 
     ion-button {
-        color: white;
-
-        ion-icon {
-            margin: 10px;
-        }
+        --background: rgb(234, 234, 234);
+        --box-shadow: none;
+        width: 80%;
+        height: 6%;
+        margin: 0 10%;
+        color: gray;
     }
 
-    ion-checkbox {
-        margin: 5% auto;
-        display: block;
-        width: 310px;
+    p {
         color: gray;
         font-size: smaller;
-        --checkbox-background: none;
-        --checkbox-background-checked: black;
-        --checkmark-color: white;
-
-        a {
-            text-decoration: none;
-        }
-    }
-
-    ion-checkbox::part(container) {
-        border-radius: 1000px;
-        border: 1px solid black;
+        text-align: center;
     }
 
-    p {
-        position: absolute;
-        bottom: 10%;
-        display: block;
+    ion-input {
+        --background: rgb(241, 241, 241);
+        --color: black;
+        --padding-start: 25px;
+        --border-radius: 1000px;
+        --highlight-color-focused: none;
         width: 100%;
-        text-align: center;
-        color: rgb(97, 97, 97);
+        height: 100%;
+        font-size: 16px;
+
+        ion-button {
+            --background: none;
+            --box-shadow: none;
+            color: gray;
+            width: 30%;
+        }
     }
 }
 
+div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 5% 10%;
+    height: 6%;
+    width: 80%;
+}
+
 .back {
     position: absolute;
     color: black;
@@ -49,34 +54,4 @@ ion-content {
     margin: 30% auto;
     width: 70%;
     display: block;
-}
-
-#other{
-    position:absolute;
-    bottom: 2%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    width: 100%;
-    height:6%;
-}
-
-#phone {
-    text-align: center;
-    --background: black;
-    height: 6%;
-    margin: 0 5%;
-}
-
-.other {
-    height: 100%;
-    width: 6vh;
-    margin: 2% 7%;
-    --background:none;
-    box-shadow: none;
-
-    ion-icon{
-        color: black;
-    }
-}
-
+}

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

@@ -1,89 +1,58 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 import { ModalController } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
 import { addIcons } from 'ionicons';
-import { arrowBackOutline, logoTux, logoWechat, phonePortraitOutline } from 'ionicons/icons';
-addIcons({ arrowBackOutline,logoWechat,phonePortraitOutline,logoTux });
+import { arrowBackOutline, logoWechat, personOutline, phonePortraitOutline } from 'ionicons/icons';
+import { openUserLoginMainModal } from '../modal-user-login-main/modal-user-login-main.component';
+addIcons({ arrowBackOutline, logoWechat, phonePortraitOutline, personOutline });
 @Component({
   selector: 'app-modal-user-login',
   templateUrl: './modal-user-login.component.html',
   styleUrls: ['./modal-user-login.component.scss'],
   standalone: true,
-  imports: [IonicModule],
+  imports: [IonicModule,],
 })
 export class ModalUserLoginComponent implements OnInit {
-  @Input()
-  type: "login" | "signup" = "login";
-  typeChange(ev: any) {
-    this.type = ev?.detail?.value || ev?.value || 'login';
-  }
-  username: string = "";
-  usernameChange(ev: any) {
-    this.username = ev?.detail?.value;
-  }
-  password: string = "";
-  passwordChange(ev: any) {
-    this.password = ev?.detail?.value;
-  }
-  password2: string = "";
-  password2Change(ev: any) {
-    this.password2 = ev?.detail?.value;
-  }
   constructor(private modalCtrl: ModalController) { }
-
   ngOnInit() { }
 
-  async login() {
-    if (!this.username || !this.password) {
-      console.log("请输入完整")
-      return
-    }
-    let user: any = new CloudUser();
-    user = await user.login(this.username, this.password);
+  goBack() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+  /**
+   * @跳转登录方式功能函数
+   */
+  async goPhoneLoginPage() {
+    const user: CloudUser | null = await openUserLoginMainModal(this.modalCtrl, 'phone');
     if (user?.id) {
-      this.modalCtrl.dismiss(user, "confirm")
+      this.modalCtrl.dismiss(user, "confirm"); // 关闭主模态并返回用户
     } else {
-      console.log("登录失败");
+      this.modalCtrl.dismiss(null, "cancel"); // 关闭主模态
     }
   }
 
-  async signup() {
-    if (!this.username || !this.password || !this.password2) {
-      console.log("请输入完整")
-      return
-    }
-    if (this.password2 != this.password) {
-      console.log("两次密码不一致")
-      return
-    }
-
-    let user: any = new CloudUser();
-    user = await user.signUp(this.username, this.password);
-    if(user){
-      this.type = "login";
-      console.log("注册成功，请登录");
+  async goUsernameLoginPage() {
+    const user: CloudUser | null = await openUserLoginMainModal(this.modalCtrl, 'username');
+    console.log("已接受返回数据，如下：");
+    console.log(user);
+    if (user?.id) {
+      console.log("即将关闭goUsernameLoginPage模态并返回用户");
+      setTimeout(async () => {
+        await this.modalCtrl.dismiss(user, "confirm");
+        console.log("模态已关闭");
+      }, 500); // 延迟500毫秒
+    } else {
+      await this.modalCtrl.dismiss(null, "cancel"); // 关闭主模态
     }
-
-  }
-
-  goBack() {
-    this.modalCtrl.dismiss(null, "cancel");
-  }
-
-  goPhoneLogin(){
-    
   }
 }
 
-export async function openUserLoginModal(modalCtrl: ModalController,type:"login"|"signup"="login"): Promise<CloudUser | null> {
+export async function openUserLoginModal(modalCtrl: ModalController): Promise<CloudUser | null> {
   const modal = await modalCtrl.create({
     component: ModalUserLoginComponent,
-    componentProps: { type:type },
-    //breakpoints: [0.5, 0.7],
-    //initialBreakpoint: 0.5
   });
-  modal.present();
+  await modal.present();
 
   const { data, role } = await modal.onWillDismiss();