update:loginpage

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

@@ -1,38 +1,66 @@
-<!-- 用户登录状态 -->
-<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="密码" placeholder="请输入密码" type="password" value="password"></ion-input>
-   </ion-item>
-   @if(type=="signup"){
-     <ion-item>
-       <ion-input [value]="password2" (ionChange)="password2Change($event)" label="确认密码" placeholder="请再次输入密码" type="password" value="password"></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-buttons slot="start">
+      <ion-button class="back-button"(click)="dismissModal()">
+        <ion-icon name="chevron-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
 
-</ion-card-content>
-</ion-card>
+  <ion-text class="logo-text">
+    <h1>慧吃</h1>
+  </ion-text>
+
+  <ion-content class="login-page">
+  <ion-card class="login-card" >
+
+    <ion-card-content>
+      <ion-item class="no-border">
+        <ion-input 
+          [value]="username" 
+          (ionChange)="usernameChange($event)" 
+          placeholder="请输入账号/手机号" 
+          clearInput>
+        </ion-input>
+      </ion-item>
+      
+      <ion-item class="no-border">
+        <ion-input 
+          [value]="password" 
+          (ionChange)="passwordChange($event)" 
+          placeholder="请输入密码" 
+          type="password" 
+          clearInput>
+        </ion-input>
+      </ion-item>
+
+      @if(type=='signup'){
+      <ion-item class="no-border">
+        <ion-input 
+          [value]="password2" 
+          (ionChange)="password2Change($event)"  
+          placeholder="请再次输入密码" 
+          type="password" 
+          clearInput>
+        </ion-input>
+      </ion-item>
+}
+      <!-- 登录和注册按钮 -->
+      <ion-button 
+        expand="block" 
+        class="auth-button" 
+        (click)="type === 'login' ? login() : signup()">
+        {{ type === 'login' ? '登录' : '注册' }}
+      </ion-button>
+
+      <!-- 登录/注册切换 -->
+      <ion-row class="auth-toggle">
+        <ion-col>
+          <ion-label 
+            color="primary" 
+            (click)="toggleType()">
+            {{ type === 'login' ? '没有账号？注册' : '已有账号？登录' }}
+          </ion-label>
+        </ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.scss

@@ -0,0 +1,74 @@
+@font-face {
+  font-family: 'CuteFont'; /* 给字体定义一个名字 */
+  src: url('/assets/fonts/仓耳非白W05.ttf') format('truetype'); /* 指定字体文件路径 */
+}
+
+.back-arrow-icon {
+  color: #ccc; /* 将箭头颜色设为浅灰色 */
+  font-size: 10px; /* 可根据实际情况调整箭头大小 */
+}
+
+.back-button {
+  opacity: 0.2;  /* 0 表示完全透明，1 表示完全不透明 */
+  --background: transparent;  /* 确保背景透明 */
+  --border: none;             /* 删除边框 */
+  --box-shadow: none;         /* 删除阴影 */
+}
+
+.auth-button{
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 1px;
+}
+ion-item {
+  width: 100%; /* 保证占满容器宽度 */
+  margin-bottom: 16px; /* 设置输入框间距，避免重叠 */
+}
+.no-border {
+  --border-style: none; /* 去掉下边框 */
+}
+ion-input {
+  --border-radius: 10px;
+  --background: #f0f0f0;  /* 设置背景色 */
+  --padding-start: 5px;   /* 左侧内边距 */
+  --padding-end: 5px;     /* 右侧内边距 */
+  --border: 2px solid #ddd; 
+  text-align: center;
+}
+
+ion-input::placeholder {
+  color: #0e0101; /* 占位符的颜色 */
+}
+
+/* 去除 label 默认的样式 */
+ion-label {
+  font-size: 14px;
+  color: #333;
+}
+
+/* 自定义 logo 样式 */
+.logo-text {
+  text-align: center;
+  margin-top: 30px; /* 向下移动 30px */
+}
+
+.logo-text h1 {
+  font-size: 40px; /* 设置字体大小 */
+  font-weight: bold; /* 字体加粗 */
+  color: black; /* 字体颜色为黑色 */
+  font-family: 'CuteFont', sans-serif; /* Q版字体样式，假设这是你自定义的字体 */
+}
+
+.login-page {
+  --background: transparent; /* 使背景透明 */
+}
+ion-content {
+  --border-width: 0;     /* 删除边框 */
+  --box-shadow: none;    /* 删除阴影 */            /* 如果需要，删除内边距 */
+}
+
+ion-card {
+  border: none;         /* 删除边框 */
+  box-shadow: none;     /* 删除阴影 */
+}
+

smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -1,7 +1,9 @@
 import { Input, OnInit } from '@angular/core';
 import { Component } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { ModalController } from '@ionic/angular/standalone';
+import { IonButtons, IonIcon, IonText, ModalController } from '@ionic/angular/standalone';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonRow, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBack, arrowBackOutline, chevronBack } from 'ionicons/icons';
 import { CloudUser } from 'src/lib/ncloud';
 
 @Component({
@@ -9,81 +11,88 @@ import { CloudUser } from 'src/lib/ncloud';
   templateUrl: './modal-user-login.component.html',
   styleUrls: ['./modal-user-login.component.scss'],
   standalone: true,
-  imports: [IonicModule
-  ],
+  imports:[IonLabel,IonCol,IonRow,IonButton,IonInput,IonItem,IonCardContent,IonCardSubtitle,IonCardTitle,IonCardHeader,IonContent,IonTitle,IonCard,IonToolbar,IonHeader,IonIcon,IonButtons
+    ,IonText
+  ]
 })
-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){
-    console.log(ev)
-    this.username = ev?.detail?.value
+export class ModalUserLoginComponent implements OnInit {
+  @Input() type: "login" | "signup" = "login"; // 登录或注册状态
+  username: string = ""; // 用户名
+  password: string = ""; // 密码
+  password2: string = ""; // 确认密码
+
+  constructor(private modalCtrl: ModalController) {
+    addIcons({chevronBack,arrowBack});
   }
-  password:string = ""
-  passwordChange(ev:any){
-    this.password = ev?.detail?.value
+
+  ngOnInit() {}
+
+  // 输入框值变化
+  usernameChange(ev: any) {
+    this.username = ev?.detail?.value || '';
   }
-  password2:string = ""
-  password2Change(ev:any){
-    this.password2 = ev?.detail?.value
+
+  passwordChange(ev: any) {
+    this.password = ev?.detail?.value || '';
   }
-  constructor(private modalCtrl:ModalController) { }
 
-  ngOnInit() {}
+  password2Change(ev: any) {
+    this.password2 = ev?.detail?.value || '';
+  }
 
-  async login(){
-    if(!this.username || !this.password){
-      console.log("请输入完整")
-      return
+  // 登录功能
+  async login() {
+    if (!this.username || !this.password) {
+      console.log("请输入完整");
+      return;
     }
-    let user:any = new CloudUser();
-    user = await user.login(this.username,this.password);
-    if(user?.id){
-       this.modalCtrl.dismiss(user,"confirm")
-    }else{
-      console.log("登录失败")
+    const user = new CloudUser();
+    const result = await user.login(this.username, this.password);
+    if (result?.id) {
+      this.modalCtrl.dismiss(result, "confirm");
+    } else {
+      console.log("登录失败");
     }
   }
 
-  async signup(){
-    if(!this.username || !this.password || !this.password2){
-      console.log("请输入完整")
-      return
+  // 注册功能
+  async signup() {
+    if (!this.username || !this.password || !this.password2) {
+      console.log("请输入完整");
+      return;
     }
-    if(this.password!=this.password2){
-      console.log("两次密码不符，请修改")
-      return
+    if (this.password !== this.password2) {
+      console.log("两次密码不符，请修改");
+      return;
     }
-
-    let user:any = new CloudUser();
-    user = await user.signUp(this.username,this.password);
-    if(user){
-      this.type = "login"
-      console.log("注册成功请登录")
+    const user = new CloudUser();
+    const result = await user.signUp(this.username, this.password);
+    if (result) {
+      this.type = "login";
+      console.log("注册成功，请登录");
     }
   }
 
-}
+  // 切换登录/注册
+  toggleType() {
+    this.type = this.type === 'login' ? 'signup' : 'login';
+  }
 
+  dismissModal() {
+    this.modalCtrl.dismiss();
+  }
+}
 
-export async function openUserLoginModal(modalCtrl:ModalController,type:"login"|"signup"="login"):Promise<CloudUser|null>{
+export async function openUserLoginModal(modalCtrl: ModalController, type: "login" | "signup" = "login"): Promise<CloudUser | null> {
   const modal = await modalCtrl.create({
     component: ModalUserLoginComponent,
-    componentProps:{
-      type:type
-    },
+    componentProps: { type }
   });
-  modal.present();
-
+  await modal.present();
+  
   const { data, role } = await modal.onWillDismiss();
-
   if (role === 'confirm') {
     return data;
   }
   return null;
-
-}
+}