page-edit 更新

CraftsMart-angular/src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { PageChatPanelComponent } from 'src/modules/craftsmart/page-chat-panel/p
 import { PageItemDetailComponent } from 'src/modules/craftsmart/page-item-detail/page-item-detail.component';
 import { PageLoginComponent } from 'src/modules/craftsmart/page-login/page-login.component';
 import { PageMineComponent } from 'src/modules/craftsmart/page-mine/page-mine.component';
+import { EditInfoComponent } from 'src/modules/craftsmart/edit-info/edit-info.component';
 
 
 const routes: Routes = [
@@ -17,6 +18,7 @@ const routes: Routes = [
    { path: 'page-cart', component: PageCartComponent },
    { path: 'page-mine', component: PageMineComponent },
    { path: 'page-login', component: PageLoginComponent },
+   { path: 'edit-info', component: EditInfoComponent },
    {path:'page-item-detail/:name',component:PageItemDetailComponent},
    {path:'page-chat-panel',component:PageChatPanelComponent}
 ];

CraftsMart-angular/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { NavTabsComponent } from 'src/modules/craftsmart/nav-tabs/nav-tabs.compo
 import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import { PageDiscoverComponent } from 'src/modules/craftsmart/page-discover/page-discover.component';
 import { PageLoginComponent } from 'src/modules/craftsmart/page-login/page-login.component';
+import { EditInfoComponent } from 'src/modules/craftsmart/edit-info/edit-info.component';
 // import { PageLoginComponent } from 'src/modules/user/page-login/page-login.component';
 
 
@@ -23,6 +24,8 @@ const routes: Routes = [
   {path:'discover',component:PageDiscoverComponent},
   { path: 'mine', component: PageMineComponent },
   { path: 'login', component: PageLoginComponent },
+  { path: 'edit-info', component: EditInfoComponent },
+
 
 
   // { path: 'login', component: PageLoginComponent },

CraftsMart-angular/src/modules/craftsmart/craftsmart-routing.module.ts

@@ -8,7 +8,7 @@ import { PageDiscoverComponent } from './page-discover/page-discover.component';
 import { PageItemDetailComponent } from './page-item-detail/page-item-detail.component';
 import { PageChatPanelComponent } from './page-chat-panel/page-chat-panel.component';
 import { PageLoginComponent } from './page-login/page-login.component';
-
+import { EditInfoComponent } from './edit-info/edit-info.component';
 
 const routes: Routes = [
   {
@@ -18,6 +18,7 @@ const routes: Routes = [
       { path:"page-cart", component:PageCartComponent },
       { path:"page-mine", component:PageMineComponent },
       { path:"page-login", component:PageLoginComponent },
+      { path:"edit-info", component:EditInfoComponent},
       { path:"page-discover", component:PageDiscoverComponent },
       { path:"page-item-detail/:name", component:PageItemDetailComponent },
       {path:"page-chat-panel",component:PageChatPanelComponent},

CraftsMart-angular/src/modules/craftsmart/craftsmart.module.ts

@@ -11,6 +11,7 @@ import { HomeComponent } from './home/home.component';
 import { PageChatPanelComponent } from './page-chat-panel/page-chat-panel.component';
 import { FormsModule } from '@angular/forms';
 import { PageLoginComponent } from './page-login/page-login.component';
+import { EditInfoComponent } from './edit-info/edit-info.component';
 
 
 @NgModule({
@@ -22,6 +23,7 @@ import { PageLoginComponent } from './page-login/page-login.component';
     HomeComponent,
     PageChatPanelComponent,
     PageLoginComponent,
+    EditInfoComponent,
     
   ],
   imports: [

CraftsMart-angular/src/modules/craftsmart/edit-info/edit-info.component.html

@@ -0,0 +1,48 @@
+<ion-header [translucent]="true">
+    <ion-toolbar>
+      <ion-title>资料编辑</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content [fullscreen]="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">资料编辑</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>{{currentUser?.get('name')}} - {{currentUser?.id}}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item>
+            <ion-input label="姓名" type="text" [(ngModel)]="userInfo.name"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-input label="手机" type="tel" [(ngModel)]="userInfo.mobile"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-select label="性别" [(ngModel)]="userInfo.gender">
+              <ion-select-option value="男">男</ion-select-option>
+              <ion-select-option value="女">女</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label>生日</ion-label>
+            <ion-datetime-button datetime="birthday"></ion-datetime-button>
+            <ion-modal [keepContentsMounted]="true">
+              <ng-template>
+                <ion-datetime id="birthday" displayFormat="MM/DD/YYYY" [(ngModel)]="userInfo.birthday"></ion-datetime>
+              </ng-template>
+            </ion-modal>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  
+    <ion-button expand="block" (click)="save()">保存</ion-button>
+    <ion-button expand="block" (click)="cancel()">取消</ion-button>
+  </ion-content>
+  

CraftsMart-angular/src/modules/craftsmart/edit-info/edit-info.component.spec.ts

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

CraftsMart-angular/src/modules/craftsmart/edit-info/edit-info.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import * as Parse from 'parse';
+
+@Component({
+  selector: 'app-edit-info',
+  templateUrl: './edit-info.component.html',
+  styleUrls: ['./edit-info.component.scss']
+})
+export class EditInfoComponent implements OnInit {
+
+  userInfo: any = {
+    name: '',
+    mobile: '',
+    gender: '',
+    birthday: ''
+  };
+  currentUser: Parse.User | undefined;
+  lcmUser: Parse.Object<Parse.Attributes> | undefined;
+
+  constructor(private navController: NavController) {}
+
+  ngOnInit() {
+    this.currentUser = Parse.User.current();
+    if (this.currentUser) {
+      let json = this.currentUser.toJSON();
+      for (const key in json) {
+        if (this.userInfo.hasOwnProperty(key)) {
+          this.userInfo[key] = json[key];
+        }
+      }
+    }
+
+    if (this.currentUser) {
+      const LcmUser = Parse.Object.extend('LcmUser');
+      const query = new Parse.Query(LcmUser);
+      query.equalTo('objectId', this.currentUser.id);
+      query.first().then((lcmUser) => {
+        if (lcmUser) {
+          this.lcmUser = lcmUser;
+          console.log('Found corresponding LcmUser data: ', this.lcmUser);
+        } else {
+          console.log('LcmUser data not found');
+        }
+      }).catch((error) => {
+        console.error('Error querying LcmUser data: ', error);
+      });
+    }
+  }
+
+  save() {
+    if (this.lcmUser) {
+      for (const key in this.userInfo) {
+        if (this.userInfo.hasOwnProperty(key)) {
+          this.lcmUser.set(key, this.userInfo[key]);
+        }
+      }
+      this.lcmUser.save().then(() => {
+        console.log('Successfully saved to LcmUser table');
+        this.navController.back();
+      }).catch((error) => {
+        console.error('Error saving to LcmUser table: ', error);
+      });
+    }
+  }
+
+  cancel() {
+    this.navController.back();
+  }
+
+}

CraftsMart-angular/src/modules/craftsmart/page-login/page-login.component.html

@@ -21,7 +21,10 @@
   
         <ion-list [inset]="true">
           <ion-item>
-            <ion-input [(ngModel)]="userName" label="账号" placeholder="请输入用户名"></ion-input>
+            <ion-input [(ngModel)]="name" label="用户名" placeholder="请输入用户名称"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-input [(ngModel)]="userName" label="账号" placeholder="请输入账号"></ion-input>
           </ion-item>
           <ion-item>
             <ion-input [(ngModel)]="password" label="密码" type="password" placeholder="请输入密码"></ion-input>

CraftsMart-angular/src/modules/craftsmart/page-login/page-login.component.ts

@@ -11,6 +11,7 @@ Parse.serverURL = 'http://web2023.fmode.cn:9999/parse';
 })
 export class PageLoginComponent {
 
+  name:string = "";
   userName: string = "";
   password: string = "";
 
@@ -57,37 +58,10 @@ export class PageLoginComponent {
     }
   }
 
-  // async login() {
-  //   let user;
-  //   try {
-  //       const query = new Parse.Query('LcmUser');
-  //       query.equalTo('username', this.userName);
-  //       query.equalTo('password', this.password);
-  //       user = await query.first();
-  //   } catch (error: any) {
-  //       let message: string = "";
-  //       if (error?.message.indexOf("is required") > -1) {
-  //           message = "必须输入账号或邮箱";
-  //       }
-  //       if (error?.message.indexOf("Invalid username") > -1) {
-  //           message = "账号或密码错误，请检查";
-  //       }
-  //       this.presentAlert({
-  //           header: "登录失败",
-  //           subHeader: "状态码:" + error.code,
-  //           message: message || error.message
-  //       });
-  //   }
-
-  //   console.log(user);
-  //   if (user?.id) {
-  //       this.navCtrl.back();
-  //   }
-  // }
-
   async register() {
     let LcmUser = Parse.Object.extend("LcmUser");
     let user = new LcmUser();
+    user.set("name", this.name);
     user.set("username", this.userName);
     user.set("password", this.password);
 

CraftsMart-angular/src/modules/craftsmart/page-mine/page-mine.component.html

@@ -5,7 +5,7 @@
     <ion-avatar aria-hidden="true" slot="start">
       <img alt="" src="../../../assets/image/head.jpg" />
     </ion-avatar>
-    <ion-label>{{user1?.get("username") || '未登录'}}</ion-label>
+    <ion-label>{{user1?.get("name") || '登陆后查看'}}</ion-label>
   </ion-item>
 
   <ion-list [inset]="true">
@@ -38,12 +38,12 @@
   <ion-card-header>
     <ion-card-title>{{user1?.get("username") || '未登录'}}</ion-card-title>
     <ion-card-subtitle *ngIf="!user1?.id">请您登陆后继续使用</ion-card-subtitle>
-    <ion-card-subtitle *ngIf="user1?.id">{{user1?.get("username")}}-{{user1?.get("gender")}}</ion-card-subtitle>
+    <ion-card-subtitle *ngIf="user1?.id">{{user1?.get("name")}}-{{user1?.get("username")}}</ion-card-subtitle>
   </ion-card-header>
 
   <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
   <ion-button *ngIf="!user1?.id" fill="clear" routerLink="/craftsmart/page-login">登录</ion-button>
-  <ion-button *ngIf="user1?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
+  <ion-button *ngIf="user1?.id" fill="clear" routerLink="/craftsmart/edit-info">编辑资料</ion-button>
  <ion-button *ngIf="user1?.id" fill="clear" (click)="logout()">登出</ion-button>
 </ion-card>
 

CraftsMart-angular/src/modules/craftsmart/page-mine/page-mine.component.scss

@@ -30,4 +30,10 @@
   
   .center-list{
 width: 150px;
+}
+ion-card-title{
+margin-top: 8px;
+}
+ion-card-header{
+  padding-bottom: 0;
 }