feat.liao.5.5

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228104048.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService // 注入用户服务
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: CloudObject[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞到…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.alertHeader = '错误';
+        this.alertMessage = '用户未登录，请先登录。';
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchTime: new Date()
+      });
+
+      bottleToCatch.save().then(() => {
+        this.alertHeader = '成功';
+        this.alertMessage = '捞到啦！快去看看吧！';
+      }).catch((err: any) => {
+        console.error('更新漂流瓶状态时出错:', err);
+        this.alertHeader = '错误';
+        this.alertMessage = '发生错误，请重试。';
+      });
+    }).catch((err) => {
+      console.error('获取漂流瓶时出错:', err);
+      this.alertHeader = '错误';
+      this.alertMessage = '发生错误，请重试。';
+    });
+  }
+
+  dismissAlert() {
+    this.alertHeader = '';
+    this.alertMessage = '';
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}
+
+
+

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228104239.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService // 注入用户服务
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: CloudObject[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞到…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.alertHeader = '错误';
+        this.alertMessage = '用户未登录，请先登录。';
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchtime: new Date()
+      });
+
+      bottleToCatch.save().then(() => {
+        this.alertHeader = '成功';
+        this.alertMessage = '捞到啦！快去看看吧！';
+      }).catch((err: any) => {
+        console.error('更新漂流瓶状态时出错:', err);
+        this.alertHeader = '错误';
+        this.alertMessage = '发生错误，请重试。';
+      });
+    }).catch((err) => {
+      console.error('获取漂流瓶时出错:', err);
+      this.alertHeader = '错误';
+      this.alertMessage = '发生错误，请重试。';
+    });
+  }
+
+  dismissAlert() {
+    this.alertHeader = '';
+    this.alertMessage = '';
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}
+
+
+

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105341.ts

@@ -0,0 +1,126 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule, ToastController } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService, // 注入用户服务
+    private toastCtrl: ToastController // 注入 ToastController
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  async catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    try {
+      const driftingBottles = await query.find();
+
+      if (driftingBottles.length === 0) {
+        this.presentToast('没捞到…', 'middle');
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.presentToast('用户未登录，请先登录。', 'middle');
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchtime: new Date()
+      });
+
+      await bottleToCatch.save();
+      this.presentToast('捞到啦！快去看看吧！', 'middle');
+    } catch (err) {
+      console.error('获取漂流瓶时出错:', err);
+      this.presentToast('发生错误，请重试。', 'middle');
+    }
+  }
+
+  async presentToast(message: string, position: 'top' | 'middle' | 'bottom') {
+    const toast = await this.toastCtrl.create({
+      message: message,
+      duration: 2000,
+      position: position
+    });
+    toast.present();
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105431.html

@@ -0,0 +1,30 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" (click)="goMydriftbottle()">
+    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button" (click)="catchDriftBottle()">
+    <img src="assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio #backgroundAudio loop autoplay>
+    <source src="assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105530.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule, AlertController } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService, // 注入用户服务
+    private alertController: AlertController // 注入 AlertController
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  async catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    try {
+      const driftingBottles = await query.find();
+
+      if (driftingBottles.length === 0) {
+        this.presentAlert('失败', '没捞到…');
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.presentAlert('错误', '用户未登录，请先登录。');
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchtime: new Date()
+      });
+
+      await bottleToCatch.save();
+      this.presentAlert('成功', '捞到啦！快去看看吧！');
+    } catch (err) {
+      console.error('获取漂流瓶时出错:', err);
+      this.presentAlert('错误', '发生错误，请重试。');
+    }
+  }
+
+  async presentAlert(header: string, message: string) {
+    const alert = await this.alertController.create({
+      header: header,
+      message: message,
+      buttons: ['OK']
+    });
+
+    await alert.present();
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105531.html

@@ -0,0 +1,30 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" (click)="goMydriftbottle()">
+    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button" (click)="catchDriftBottle()">
+    <img src="assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio #backgroundAudio loop autoplay>
+    <source src="assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105550.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService // 注入用户服务
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: CloudObject[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞到…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.alertHeader = '错误';
+        this.alertMessage = '用户未登录，请先登录。';
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchTime: new Date()
+      });
+
+      bottleToCatch.save().then(() => {
+        this.alertHeader = '成功';
+        this.alertMessage = '捞到啦！快去看看吧！';
+      }).catch((err: any) => {
+        console.error('更新漂流瓶状态时出错:', err);
+        this.alertHeader = '错误';
+        this.alertMessage = '发生错误，请重试。';
+      });
+    }).catch((err) => {
+      console.error('获取漂流瓶时出错:', err);
+      this.alertHeader = '错误';
+      this.alertMessage = '发生错误，请重试。';
+    });
+  }
+
+  dismissAlert() {
+    this.alertHeader = '';
+    this.alertMessage = '';
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}
+
+
+

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105708.html

@@ -0,0 +1,30 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" (click)="goMydriftbottle()">
+    <ion-button fill="clear" class="custom-button">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button" (click)="catchDriftBottle()">
+    <img src="assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio #backgroundAudio loop autoplay>
+    <source src="assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105726.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule, AlertController } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService, // 注入用户服务
+    private alertController: AlertController // 注入 AlertController
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  async catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    try {
+      const driftingBottles = await query.find();
+
+      if (driftingBottles.length === 0) {
+        this.presentAlert('失败', '没捞到…');
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.presentAlert('错误', '用户未登录，请先登录。');
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchtime: new Date()
+      });
+
+      await bottleToCatch.save();
+      this.presentAlert('成功', '捞到啦！快去看看吧！');
+    } catch (err) {
+      console.error('获取漂流瓶时出错:', err);
+      this.presentAlert('错误', '发生错误，请重试。');
+    }
+  }
+
+  async presentAlert(header: string, message: string) {
+    const alert = await this.alertController.create({
+      header: header,
+      message: message,
+      buttons: ['OK']
+    });
+
+    await alert.present();
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105735.html

@@ -0,0 +1,30 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" (click)="goMydriftbottle()">
+    <ion-button fill="clear" class="custom-button">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button" (click)="catchDriftBottle()">
+    <img src="assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio #backgroundAudio loop autoplay>
+    <source src="assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241228105810.ts

@@ -0,0 +1,126 @@
+import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule, ToastController } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule, // 添加 CommonModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+  @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private renderer: Renderer2,
+    private userService: UserService, // 注入用户服务
+    private toastCtrl: ToastController // 注入 ToastController
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
+        audio.loop = true;
+        audio.play().catch((error: any) => {
+          console.error('Failed to play audio:', error);
+        });
+      } else {
+        console.warn('Audio element not found');
+      }
+
+      let listenLeaveInt = setInterval(() => {
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
+          clearInterval(listenLeaveInt);
+        }
+      }, 500);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stop();
+  }
+
+  stop() {
+    if (this.audioElement && this.audioElement.nativeElement) {
+      const audio = this.audioElement.nativeElement;
+      audio.pause();
+      audio.currentTime = 0; // 重置音频时间
+      console.log('Audio element paused and reset');
+    } else {
+      console.warn('Audio element not found during destroy');
+    }
+    console.log('ngOnDestroy called');
+  }
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  async catchDriftBottle() {
+    const query = new CloudQuery("Driftbottle");
+    query.equalTo("status", "drifting");
+
+    try {
+      const driftingBottles = await query.find();
+
+      if (driftingBottles.length === 0) {
+        this.presentToast('没捞到…', 'middle');
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      const username = this.userService.getUsername(); // 获取当前用户的用户名
+      if (!username) {
+        console.error('用户未登录或未找到用户名');
+        this.presentToast('用户未登录，请先登录。', 'middle');
+        return;
+      }
+
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchtime: new Date()
+      });
+
+      await bottleToCatch.save();
+      this.presentToast('捞到啦！快去看看吧！', 'middle');
+    } catch (err) {
+      console.error('获取漂流瓶时出错:', err);
+      this.presentToast('发生错误，请重试。', 'middle');
+    }
+  }
+
+  async presentToast(message: string, position: 'top' | 'middle' | 'bottom') {
+    const toast = await this.toastCtrl.create({
+      message: message,
+      duration: 2000,
+      position: position
+    });
+    toast.present();
+  }
+
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle']);
+  }
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241228110004.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+import { IonHeader, IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader, IonCardHeader, IonCardTitle, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar } from '@ionic/angular/standalone';
+import { CloudQuery, CloudUser } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule, // 添加 CommonModule
+    
+    IonHeader, IonToolbar, IonTitle, IonContent,
+    IonList, IonListHeader, IonItem, IonCardTitle,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+  ]
+})
+export class MyDriftBottleComponent implements OnInit {
+  filteredDriftbottles2:any[]=[];
+  Driftbottles: any[]=[];
+  filteredDriftbottles: any[]=[];
+  username: String='';
+  
+
+  constructor(private router: Router, private userService: UserService) {}
+
+  ngOnInit() {
+    this.getDriftbottles(); // 获取所有漂流瓶并进行过滤
+  }
+
+  async getDriftbottles() {
+    let query=new CloudQuery("Driftbottle");
+    this.Driftbottles = await query.find(); 
+      this.filterDriftbottles(); 
+      this.filterDriftbottles2(); 
+
+  }
+
+  filterDriftbottles() {
+    let user = new CloudUser();
+    console.log(user)
+    this.filteredDriftbottles = this.Driftbottles.filter(driftbottle => {
+      console.log(driftbottle.get("username"), user.get("username"))
+      return (driftbottle.get("username") === user.get("username") || driftbottle.get("username") === 'all');
+    });
+  }
+  filterDriftbottles2(){
+    let user = new CloudUser();
+    console.log(user)
+    this.filteredDriftbottles2 = this.Driftbottles.filter(driftbottle => {
+      console.log(driftbottle.get("catcher"), user.get("username"))
+      return (driftbottle.get("catcher") === user.get("username") || driftbottle.get("catcher") === 'all');
+    });
+  }
+
+  
+
+  goDriftbottle() {
+    this.router.navigate(['tabs/drift-bottle']);
+  }
+
+  gothrowNewDriftbottle() {
+    this.router.navigate(['tabs/throw-drift-bottle']); // 假设这是投掷新漂流瓶的路由
+  }
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241228110005.html

@@ -0,0 +1,58 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goDriftbottle()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        我的漂流瓶
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        <h2>我扔出的漂流瓶</h2>
+      </ion-label>
+    </ion-item>
+    
+    <section *ngIf="filteredDriftbottles.length > 0">
+      <ion-card *ngFor="let bottle of filteredDriftbottles">
+        <ion-card-header>
+          <ion-card-title>{{ bottle.get('content') }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <p>扔出时间: {{ bottle.get('throwtime') }}</p>
+        </ion-card-content>
+      </ion-card>
+    </section>
+
+    <ion-item>
+      <ion-label>
+        <h2>我捞上的漂流瓶</h2>
+      </ion-label>
+    </ion-item>
+    
+    <section *ngIf="filteredDriftbottles2.length > 0">
+      <ion-card *ngFor="let bottle of filteredDriftbottles2">
+        <ion-card-header>
+          <ion-card-title>{{ bottle.get('content') }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <p>打捞时间: {{ bottle.get('catchtime') }}</p>
+        </ion-card-content>
+      </ion-card>
+    </section>
+  </ion-list>
+
+  <div style="display: flex; justify-content: center; margin-top: auto;">
+    <ion-button (click)="gothrowNewDriftbottle()" expand="full">
+      投掷新的漂流瓶
+    </ion-button>
+  </div>
+</ion-content>

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241228110041.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+
+import { IonHeader, IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader, IonCardHeader, IonCardTitle, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar } from '@ionic/angular/standalone';
+import { CloudQuery, CloudUser } from 'src/lib/ncloud';
+import { UserService } from 'src/app/user.service'; // 假设这是你的用户服务
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule, // 添加 CommonModule
+    
+    IonHeader, IonToolbar, IonTitle, IonContent,
+    IonList, IonListHeader, IonItem, IonCardTitle,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+  ]
+})
+export class MyDriftBottleComponent implements OnInit {
+  filteredDriftbottles2:any[]=[];
+  Driftbottles: any[]=[];
+  filteredDriftbottles: any[]=[];
+  username: String='';
+  
+
+  constructor(private router: Router, private userService: UserService) {}
+
+  ngOnInit() {
+    this.getDriftbottles(); // 获取所有漂流瓶并进行过滤
+  }
+
+  async getDriftbottles() {
+    let query=new CloudQuery("Driftbottle");
+    this.Driftbottles = await query.find(); 
+      this.filterDriftbottles(); 
+      this.filterDriftbottles2(); 
+
+  }
+
+  filterDriftbottles() {
+    let user = new CloudUser();
+    console.log(user)
+    this.filteredDriftbottles = this.Driftbottles.filter(driftbottle => {
+      console.log(driftbottle.get("username"), user.get("username"))
+      return (driftbottle.get("username") === user.get("username") || driftbottle.get("username") === 'all');
+    });
+  }
+  filterDriftbottles2(){
+    let user = new CloudUser();
+    console.log(user)
+    this.filteredDriftbottles2 = this.Driftbottles.filter(driftbottle => {
+      console.log(driftbottle.get("catcher"), user.get("username"))
+      return (driftbottle.get("catcher") === user.get("username") || driftbottle.get("catcher") === 'all');
+    });
+  }
+
+  
+
+  goDriftbottle() {
+    this.router.navigate(['tabs/drift-bottle']);
+  }
+
+  gothrowNewDriftbottle() {
+    this.router.navigate(['tabs/drift-bottle']); // 假设这是投掷新漂流瓶的路由
+  }
+}

soul-app/src/app/drift-bottle/drift-bottle.component.html

@@ -9,7 +9,7 @@
   </div>
 
   <div class="button-container middle-button" (click)="goMydriftbottle()">
-    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+    <ion-button fill="clear" class="custom-button">
       我的漂流瓶
     </ion-button>
   </div>
@@ -26,5 +26,5 @@
   </audio>
 
   <!-- 弹窗提示 -->
-  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
+  
 </ion-content>

soul-app/src/app/drift-bottle/drift-bottle.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, Renderer2, ElementRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, ToastController } from '@ionic/angular';
 import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
 import { ModalController } from '@ionic/angular/standalone';
 import { HttpClient } from '@angular/common/http';
@@ -20,27 +20,24 @@ import { CommonModule } from '@angular/common'; // 导入 CommonModule
   ]
 })
 export class DriftBottleComponent implements OnInit, OnDestroy {
-  alertHeader: string = '';
-  alertMessage: string = '';
-
   @ViewChild('backgroundAudio', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
 
   constructor(
     private router: Router,
     private modalCtrl: ModalController,
-    private route:ActivatedRoute,
+    private route: ActivatedRoute,
     private http: HttpClient,
     private renderer: Renderer2,
-    private userService: UserService // 注入用户服务
+    private userService: UserService, // 注入用户服务
+    private toastCtrl: ToastController // 注入 ToastController
   ) {}
 
   ngOnInit() {
-
-    this.route.params.subscribe(data=>{
-        if (this.audioElement && this.audioElement.nativeElement) {
-          const audio = this.audioElement.nativeElement;
+    this.route.params.subscribe(data => {
+      if (this.audioElement && this.audioElement.nativeElement) {
+        const audio = this.audioElement.nativeElement;
         audio.loop = true;
-        audio.play().catch((error:any) => {
+        audio.play().catch((error: any) => {
           console.error('Failed to play audio:', error);
         });
       } else {
@@ -48,19 +45,20 @@ export class DriftBottleComponent implements OnInit, OnDestroy {
       }
 
       let listenLeaveInt = setInterval(() => {
-        let isLeave = location.pathname?.indexOf("drift-bottle")==-1
-        if(isLeave){
-          this.stop()
+        let isLeave = location.pathname?.indexOf("drift-bottle") == -1;
+        if (isLeave) {
+          this.stop();
           clearInterval(listenLeaveInt);
         }
       }, 500);
-    })
+    });
   }
 
   ngOnDestroy() {
-    this.stop()
+    this.stop();
   }
-  stop(){
+
+  stop() {
     if (this.audioElement && this.audioElement.nativeElement) {
       const audio = this.audioElement.nativeElement;
       audio.pause();
@@ -75,16 +73,16 @@ export class DriftBottleComponent implements OnInit, OnDestroy {
   throwDriftBottleModal() {
     openThrowDriftBottleModal(this.modalCtrl);
   }
-//点击捞一个时，随机打捞一个状态为漂流中的漂流瓶，将其状态（status）改为被打捞，打捞时间（catchtime）改为当前时间，打捞者（catcher）改为该用户的username
-//如果打捞成功，则在页面中间显示“打捞成功！快去看看吧！”，如果数据库中没有状态为drifting的漂流瓶，则打捞失败，在页面中间显示“没捞着哭哭~”
-  catchDriftBottle() {
+
+  async catchDriftBottle() {
     const query = new CloudQuery("Driftbottle");
     query.equalTo("status", "drifting");
 
-    query.find().then((driftingBottles: any[]) => {
+    try {
+      const driftingBottles = await query.find();
+
       if (driftingBottles.length === 0) {
-        this.alertHeader = '失败';
-        this.alertMessage = '没捞到…';
+        this.presentToast('没捞到…', 'middle');
         return;
       }
 
@@ -94,33 +92,32 @@ export class DriftBottleComponent implements OnInit, OnDestroy {
       const username = this.userService.getUsername(); // 获取当前用户的用户名
       if (!username) {
         console.error('用户未登录或未找到用户名');
-        this.alertHeader = '错误';
-        this.alertMessage = '用户未登录，请先登录。';
+        this.presentToast('用户未登录，请先登录。', 'middle');
         return;
       }
 
-      bottleToCatch.set("status", "caught");
-      bottleToCatch.set("catcher", username); // 设置打捞者
-      bottleToCatch.set("catchTime", new Date()); // 设置打捞时间
-
-      bottleToCatch.save().then(() => {
-        this.alertHeader = '成功';
-        this.alertMessage = '捞到啦！快去看看吧！';
-      }).catch((err: any) => {
-        console.error('更新漂流瓶状态时出错:', err);
-        this.alertHeader = '错误';
-        this.alertMessage = '发生错误，请重试。';
+      // 使用对象来设置多个字段
+      bottleToCatch.set({
+        status: "caught",
+        catcher: username,
+        catchtime: new Date()
       });
-    }).catch((err) => {
+
+      await bottleToCatch.save();
+      this.presentToast('捞到啦！快去看看吧！', 'middle');
+    } catch (err) {
       console.error('获取漂流瓶时出错:', err);
-      this.alertHeader = '错误';
-      this.alertMessage = '发生错误，请重试。';
-    });
+      this.presentToast('发生错误，请重试。', 'middle');
+    }
   }
 
-  dismissAlert() {
-    this.alertHeader = '';
-    this.alertMessage = '';
+  async presentToast(message: string, position: 'top' | 'middle' | 'bottom') {
+    const toast = await this.toastCtrl.create({
+      message: message,
+      duration: 2000,
+      position: position
+    });
+    toast.present();
   }
 
   goMydriftbottle() {

soul-app/src/app/my-drift-bottle/my-drift-bottle.component.html

@@ -51,7 +51,7 @@
   </ion-list>
 
   <div style="display: flex; justify-content: center; margin-top: auto;">
-    <ion-button (click)="throwNewDriftbottle()" expand="full">
+    <ion-button (click)="gothrowNewDriftbottle()" expand="full">
       投掷新的漂流瓶
     </ion-button>
   </div>

soul-app/src/app/my-drift-bottle/my-drift-bottle.component.ts

@@ -65,7 +65,7 @@ export class MyDriftBottleComponent implements OnInit {
     this.router.navigate(['tabs/drift-bottle']);
   }
 
-  throwNewDriftbottle() {
-    this.router.navigate(['tabs/throw-drift-bottle']); // 假设这是投掷新漂流瓶的路由
+  gothrowNewDriftbottle() {
+    this.router.navigate(['tabs/drift-bottle']); // 假设这是投掷新漂流瓶的路由
   }
 }