feat: new pet-edit in market

src/app/app-routing.module.ts

@@ -45,12 +45,18 @@ const routes: Routes = [
         path: 'pet/:id',
         loadChildren: () => import('../modules/study/case-js-module/case-pet-detail/case-pet-detail.module').then( m => m.CasePetDetailPageModule)
       },
+      {
+        path: 'pet/edit/:id', // 编辑宠物
+        loadChildren: () => import('../modules/study/case-js-module/case-pet-edit/case-pet-edit.module').then( m => m.CasePetEditPageModule)
+      },
     ]
   },
   {
     path: 'aigc',
     loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
   },
+ 
+
 
 
  

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.page.html

@@ -1,6 +1,9 @@
 <ion-header>
   <ion-toolbar>
     <ion-title>Pet Market</ion-title>
+    <ion-buttons slot="end">
+      <ion-button routerLink="/study/pet/edit/new" >发布</ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
@@ -13,7 +16,7 @@
   </ion-segment>
   <ion-button (click)="toggleSort()">Sort by Price</ion-button>
   <ion-list>
-    <ion-card *ngFor="let pet of pets" routerLink="/study/pet/{{pet.id}}">
+    <ion-card *ngFor="let pet of pets">
       <ion-card-header>
         <ion-card-title>{{ pet.get('name') }}</ion-card-title>
       </ion-card-header>
@@ -21,6 +24,8 @@
         Type: {{ pet.get('type') }}<br>
         Price: {{ pet.get('price') | currency }}
       </ion-card-content>
+      <ion-button fill="clear" routerLink="/study/pet/{{pet.id}}">详情</ion-button>
+      <ion-button *ngIf="pet?.get('user')?.id == user?.id" fill="clear" routerLink="/study/pet/edit/{{pet.id}}">编辑</ion-button>
     </ion-card>
   </ion-list>
 </ion-content>

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.page.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PetService } from './pet.service';
-
+import Parse from "parse";
 @Component({
   selector: 'app-case-parse-petmarket',
   templateUrl: './case-parse-petmarket.page.html',
@@ -14,8 +14,9 @@ export class CaseParsePetmarketPage implements OnInit {
   sortByPrice: boolean = false;
 
   constructor(private petService: PetService) {}
-
+  user:Parse.User|undefined
   ngOnInit() {
+    this.user = Parse.User.current();
     this.fetchPets();
   }
 

src/modules/study/case-js-module/case-pet-edit/case-pet-edit-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CasePetEditPage } from './case-pet-edit.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CasePetEditPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CasePetEditPageRoutingModule {}

src/modules/study/case-js-module/case-pet-edit/case-pet-edit.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CasePetEditPageRoutingModule } from './case-pet-edit-routing.module';
+
+import { CasePetEditPage } from './case-pet-edit.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CasePetEditPageRoutingModule
+  ],
+  declarations: [CasePetEditPage]
+})
+export class CasePetEditPageModule {}

src/modules/study/case-js-module/case-pet-edit/case-pet-edit.page.html

@@ -0,0 +1,23 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>case-pet-edit</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-list>
+    <ion-item>
+      <ion-input label="昵称" type="text" [(ngModel)]="petInfo.name"></ion-input>
+    </ion-item>
+    <ion-item>
+      <!-- <ion-label>种类</ion-label> -->
+      <ion-input label="种类" type="text" [(ngModel)]="petInfo.type"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input label="价格" type="number" [(ngModel)]="petInfo.price"></ion-input>
+    </ion-item>
+  </ion-list>
+
+  <ion-button expand="block" (click)="save()">保存</ion-button>
+  <ion-button expand="block" color="light" (click)="cancel()">取消</ion-button>
+</ion-content>

src/modules/study/case-js-module/case-pet-edit/case-pet-edit.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CasePetEditPage } from './case-pet-edit.page';
+
+describe('CasePetEditPage', () => {
+  let component: CasePetEditPage;
+  let fixture: ComponentFixture<CasePetEditPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CasePetEditPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/modules/study/case-js-module/case-pet-edit/case-pet-edit.page.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import Parse from "parse";
+@Component({
+  selector: 'app-case-pet-edit',
+  templateUrl: './case-pet-edit.page.html',
+  styleUrls: ['./case-pet-edit.page.scss'],
+})
+export class CasePetEditPage implements OnInit {
+
+  constructor(
+    private route:ActivatedRoute,
+    private navCtrl:NavController
+  ) { 
+
+  }
+
+  // 宠物相关可编辑字段
+  petInfo:any = {
+
+  }
+  async save(){
+    // 将petInfo当前编辑元素，逐个set到this.pet的Parse.Object里面去
+    console.log(this.petInfo)
+    console.log(this.pet)
+    Object.keys(this.petInfo).forEach(key=>{
+      this.pet?.set(key,this.petInfo[key])
+    })
+    // 判断，当创建宠物无创建者，则将Parse.User的.toPointer()指针，赋值给user字段
+    if(!this.pet?.get("user")?.id) this.pet?.set("user",this.user?.toPointer())
+    await this.pet?.save()
+    this.navCtrl.back();
+  }
+  cancel(){
+    this.navCtrl.back();
+  }
+
+  user:Parse.User|undefined
+  ngOnInit() {
+    this.user = Parse.User.current();
+    this.loadPetById()
+  }
+
+  pet:Parse.Object|undefined
+  async loadPetById(){
+    // let id = location.pathname.split("/").pop();
+    let id = this.route.snapshot.params["id"]
+
+    if(id&&id!="new"){
+      let query = new Parse.Query("Pet");
+      this.pet = await query.get(id);
+    }else{
+      let Pet = Parse.Object.extend("Pet");
+      this.pet = new Pet();
+    }
+    this.petInfo = this.pet?.toJSON()
+  }
+
+}