feat:login and hot command

src/app/app-routing.module.ts

@@ -51,7 +51,12 @@ const routes: Routes = [
   {
     path:'dynamic',
     loadChildren:()=>import('./dynamic/dynamic.module').then(m=>m.DynamicPageModule)
+  },
+  {
+    path: 'hot-recommendations',
+    loadChildren: () => import('./hot-recommendations/hot-recommendations.module').then( m => m.HotRecommendationsPageModule)
   }
+
 ];
 @NgModule({
   imports: [

src/app/dynamic/dynamic.page.html

@@ -30,9 +30,5 @@
     <ion-label>时间</ion-label>
     <ion-input [(ngModel)]="newTime"></ion-input>
   </ion-item>
-  <ion-item>
-    <ion-label>上传图片</ion-label>
-    <input type="file" (change)="onFileSelected($event)" />
-  </ion-item>
   <ion-button expand="block" (click)="submitDongTai()">提交动态</ion-button>
 </ion-content>

src/app/dynamic/dynamic.page.ts

@@ -39,17 +39,12 @@ export class DynamicPage implements OnInit {
     this.loadDongTai();
   }
 
-  async createDongTai(biaoti: string, neirong: string, time: string, imageFile: File) {
-    await this.parseService.createDongTai(biaoti, neirong, time, imageFile);
+  async createDongTai(biaoti: string, neirong: string, time: string) {
+    await this.parseService.createDongTai(biaoti, neirong, time);
     this.loadDongTai();
   }
 
-  onFileSelected(event: any) {
-    const file: File = event.target.files[0];
-    if (file) {
-      this.createDongTai(this.newBiaoti, this.newNeirong, this.newTime, file);
-    }
-  }
+  
   async submitDongTai() {
     console.log(111);
     // this.navCtrl.navigateForward('../../app/tab3');

src/app/hot-recommendations/hot-recommendations-routing.module.ts

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

src/app/hot-recommendations/hot-recommendations.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 { HotRecommendationsPageRoutingModule } from './hot-recommendations-routing.module';
+
+import { HotRecommendationsPage } from './hot-recommendations.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HotRecommendationsPageRoutingModule
+  ],
+  declarations: [HotRecommendationsPage]
+})
+export class HotRecommendationsPageModule {}

src/app/hot-recommendations/hot-recommendations.page.html

@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>热门推荐</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-card *ngFor="let recommendation of recommendations">
+      <img [src]="recommendation.image" *ngIf="recommendation.image" />
+      <ion-card-content>
+        <p>{{ recommendation.neirong }}</p>
+      </ion-card-content>
+    </ion-card>
+  </ion-list>
+</ion-content>

src/app/hot-recommendations/hot-recommendations.page.scss

@@ -0,0 +1,20 @@
+ion-card {
+    margin: 16px;
+  }
+  
+  ion-card img {
+    width: 100%;
+    height: auto;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+  
+  ion-card-content {
+    padding: 16px;
+  }
+  
+  ion-card p {
+    margin: 0;
+    font-size: 16px;
+  }
+  

src/app/hot-recommendations/hot-recommendations.page.spec.ts

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

src/app/hot-recommendations/hot-recommendations.page.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+Parse.initialize("dev");
+(Parse as any).serverURL = 'http://web2023.fmode.cn:9999/parse'
+import * as Parse from 'parse';
+@Component({
+  selector: 'app-hot-recommendations',
+  templateUrl: './hot-recommendations.page.html',
+  styleUrls: ['./hot-recommendations.page.scss'],
+})
+export class HotRecommendationsPage implements OnInit {
+
+  recommendations: any[] = [];
+  constructor() { }
+
+  ngOnInit() {
+    this.loadRecommendations();
+  }
+
+  async loadRecommendations() {
+    const TuiJian = Parse.Object.extend('TuiJian');
+    const query = new Parse.Query(TuiJian);
+    try {
+      const results = await query.find();
+      this.recommendations = results.map(result => ({
+        id: result.id,
+        neirong: result.get('neirong'),
+        image: result.get('image')
+      }));
+    } catch (error) {
+      console.error('Error while fetching recommendations', error);
+    }
+  }
+}

src/app/tab1/tab1.page.html

@@ -85,7 +85,7 @@
       <ion-list-header>
         <ion-label>推荐的陪玩</ion-label>
       </ion-list-header>
-      <ion-item *ngFor="let player of recommendedPlayers">
+      <ion-item *ngFor="let player of recommendedPlayers" class="recommended-player-card">
         <ion-avatar slot="start">
           <img [src]="player.avatar" />
         </ion-avatar>
@@ -97,6 +97,10 @@
     </ion-list>
   </div>
 
+  <ion-button expand="full" class="more-button" (click)="loadMorePlayers()">
+    更多
+  </ion-button>
+
   <div *ngIf="isSearching">
     <ion-list>
       <ion-item>
@@ -114,13 +118,13 @@
       <ion-item>
         <ion-label>热门房间</ion-label>
       </ion-item>
-      <div class="room-container">
+      <!-- <div class="room-container">
         <div *ngFor="let room of popularRooms" class="room-box">
           <img [src]="room.image" />
           <div>{{ room.title }}</div>
           <div>{{ room.subtitle }}</div>
         </div>
-      </div>
+      </div> -->
     </ion-list>
   </div>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -2,11 +2,6 @@ ion-toolbar {
   --background: #3880ff;
 }
 
-ion-avatar {
-  border-radius: 50%;
-  overflow: hidden;
-}
-
 ion-label h2 {
   font-weight: bold;
 }
@@ -23,10 +18,6 @@ ion-row {
   margin-top: 20px;
 }
 
-ion-card {
-  text-align: center;
-}
-
 .scroll-container {
   display: flex;
   overflow-x: scroll;
@@ -36,3 +27,67 @@ ion-card {
 .scroll-content {
   display: inline-flex;
 }
+
+ion-card {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin: 10px 0;
+}
+
+ion-avatar {
+  margin-right: 15px;
+}
+
+ion-card-content {
+  flex: 1;
+}
+
+.card-image {
+  width: 100px;  /* 增大头像宽度 */
+  height: 100px; /* 增大头像高度 */
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+ion-item.recommended-player-card {
+  --background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin: 15px 0; /* 增加卡片之间的间距 */
+  padding: 15px; /* 增加卡片内部的间距 */
+  display: flex;
+  align-items: center;
+}
+
+ion-item.recommended-player-card ion-avatar {
+  margin-right: 20px; /* 增加头像与内容之间的间距 */
+}
+
+ion-item.recommended-player-card ion-avatar img {
+  width: 100px; /* 增大头像宽度 */
+  height: 100px; /* 增大头像高度 */
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+ion-item.recommended-player-card ion-label {
+  flex: 1;
+  font-size: 1.2em; /* 增大字体尺寸 */
+}
+
+ion-item.recommended-player-card ion-label h2 {
+  margin: 0;
+  font-size: 1.5em; /* 增大标题字体尺寸 */
+}
+
+ion-item.recommended-player-card ion-label p {
+  margin: 5px 0 0;
+  font-size: 1.2em; /* 增大内容字体尺寸 */
+}
+
+.more-button {
+  margin: 20px 0;
+  --background: #3880ff;
+  --color: white;
+}

src/app/tab1/tab1.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-
+import { NavController } from '@ionic/angular';
 @Component({
   selector: 'app-home',
   templateUrl: 'Tab1.page.html',
@@ -14,25 +14,17 @@ export class Tab1Page {
     '比心十周年·免单真金等你拿',
     '十年如初·因你而延续'
   ];
-  popularRooms = [
-    { title: '故事读文💗心安', subtitle: '直播间', image: 'assets/room1.jpg' },
-    { title: '欢迎来到大东北', subtitle: '聊天室', image: 'assets/room2.jpg' },
-    { title: '有听过这样温柔...', subtitle: '聊天室', image: 'assets/room3.jpg' },
-    { title: '[配对]赖 c', subtitle: '80s💗', image: 'assets/room4.jpg' },
-    { title: '[海龟汤] 0707', subtitle: 'DM.狐狸✌️', image: 'assets/room5.jpg' },
-    { title: '浪漫播客🎧💗...', subtitle: '浪漫播客.小 e', image: 'assets/room6.jpg' }
-  ];
 
   recommendedPlayers = [
-    { name: 'Player 1', info: '技术大神', avatar: 'assets/avatar1.png' },
+    { name: 'Player 1', info: '技术大神111111111111111111111111111111111111111111111111111111111111111111111111111', avatar: 'assets/avatar1.png' },
     { name: 'Player 2', info: '包赢承诺', avatar: 'assets/avatar2.png' },
     { name: 'Player 3', info: '优质声优', avatar: 'assets/avatar3.png' },
-    { name: 'Player 4', info: '同城代练', avatar: 'assets/avatar4.png' },
+    { name: 'Player 4', info: '同城代练11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', avatar: 'assets/avatar4.png' },
   ];
 
   selectedSegment = 'online';
 
-  constructor() {}
+  constructor(private navCtrl: NavController) {}
 
   showSearch() {
     this.isSearching = true;
@@ -50,4 +42,8 @@ export class Tab1Page {
     const query = this.searchQuery.toLowerCase();
     this.filteredItems = this.recommendedPlayers.filter(player => player.name.toLowerCase().includes(query)).map(player => player.name);
   }
+
+  loadMorePlayers() {
+    this.navCtrl.navigateForward('/hot-recommendations');
+  }
 }

src/app/tab3/tab3.page.html

@@ -17,11 +17,13 @@
 <ion-content>
   <div class="profile-header">
     <ion-avatar class="profile-avatar"  (click)="goToLogin()" >
-        <img src="../../assets/avatar1.png"  />
+        <img src="https://ionicframework.com/docs/img/demos/card-media.png"  />
     </ion-avatar>
     <div class="profile-info">
       <div class="profile-name">
-        <ion-card-title>用户名11236</ion-card-title>
+        <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
+        <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
+        <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
       </div>
     </div>
     <ion-button fill="outline" expand="block" (click)="goToEditInfo()" class="edit-button">

src/app/tab3/tab3.page.ts

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
-
+// Parse.initialize("dev");
+// (Parse as any).serverURL = 'http://web2023.fmode.cn:9999/parse'
+import * as Parse from 'parse';
 @Component({
   selector: 'app-my',
   templateUrl: 'Tab3.page.html',
   styleUrls: ['Tab3.page.scss'],
 })
+
+
 export class Tab3Page {
   segment = 'posts';
   searchQuery = '';
@@ -16,6 +20,13 @@ export class Tab3Page {
     { image: 'https://example.com/room2.jpg', title: '房间2', subtitle: 'subtitle2' },
     
   ];
+  user:Parse.User | undefined;
+  async ngOnInit() {
+    this.user = await Parse.User.current()
+    setInterval(async ()=>{
+    this.user = await Parse.User.current()
+  },1000)
+}
   isSearching: boolean | undefined;
 
   constructor(private navCtrl: NavController) {}

src/app/tabs/tabs-routing.module.ts

@@ -23,6 +23,11 @@ const routes: Routes = [
       path:'dynamic',
       loadChildren:()=>import('../dynamic/dynamic.module').then(m=>m.DynamicPageModule)
       },
+      {
+        path: 'hot-recommendations',
+        loadChildren: () => import('../hot-recommendations/hot-recommendations.module').then( m => m.HotRecommendationsPageModule)
+      },
+    
       {
         path: '',
         redirectTo: '/tabs/tab1',

src/app/tabs/tabs.page.html

@@ -17,6 +17,11 @@
       <ion-label>dynamic</ion-label>
     </ion-tab-button>
 
+    <!-- <ion-tab-button tab="hot-recommendations" href="../../app/dynamic/dynamic.page.html">
+      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-label>dynamic</ion-label>
+    </ion-tab-button> -->
+
     <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
       <ion-label>Tab 2</ion-label>

src/server/parse.service.ts

@@ -23,19 +23,12 @@ serverURL = "http://web2023.fmode.cn:9999/parse"
     return await query.find();
   }
 
-  async createDongTai(biaoti: string, neirong: string, time: string, imageFile?: File): Promise<Parse.Object> {
+  async createDongTai(biaoti: string, neirong: string, time: string): Promise<Parse.Object> {
     const DongTai = Parse.Object.extend('DongTai');
     const dongtai = new DongTai();
     dongtai.set('biaoti', biaoti);
     dongtai.set('neirong', neirong);
     dongtai.set('time', time);
-
-    if (imageFile) {
-      const parseFile = new Parse.File(imageFile.name, imageFile);
-      await parseFile.save();
-      dongtai.set('image', parseFile);
-    }
-
     return await dongtai.save();
   }