feat.liao.4.3

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

@@ -0,0 +1,70 @@
+// drift-bottle.component.ts
+import { Component, OnInit } from '@angular/core';
+import { 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';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {}
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("DriftBottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: any[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞着…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      bottleToCatch.set("status", "catched");
+      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 = '';
+  }
+}

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

@@ -0,0 +1,31 @@
+<!-- drift-bottle.component.html -->
+<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">
+    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button" (click)="catchDriftBottle()">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio id="backgroundAudio" autoplay loop>
+    <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_20241224222429.html

@@ -0,0 +1,31 @@
+<!-- drift-bottle.component.html -->
+<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">
+    <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 id="backgroundAudio" autoplay loop>
+    <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_20241224223756.html

@@ -0,0 +1,31 @@
+<!-- drift-bottle.component.html -->
+<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 id="backgroundAudio" autoplay loop>
+    <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_20241224223759.ts

@@ -0,0 +1,73 @@
+// drift-bottle.component.ts
+import { Component, OnInit } from '@angular/core';
+import { 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';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {}
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("DriftBottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: any[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞着…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      bottleToCatch.set("status", "catched");
+      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/my-drift-bottle/my-drift-bottle.component_20241224222958.html

@@ -0,0 +1,3 @@
+<p>
+  my-drift-bottle works!
+</p>

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

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

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

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

@@ -0,0 +1,14 @@
+<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>

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+  import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonicModule,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+ 
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224736.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

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

@@ -0,0 +1,14 @@
+<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>

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224835.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 115px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224843.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 015px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224846.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 105px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224958.scss

@@ -0,0 +1,54 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 105px;
+  margin: auto;
+  top: 10px;
+  color:rgb(69, 166, 180);
+  }
+  

.history/soul-app/src/app/tabs/tabs.routes_20241224223752.ts

@@ -0,0 +1,82 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+
+export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () =>
+          import('../tab3/tab3.page').then((m) => m.Tab3Page),
+      },
+      {
+        path: 'topic-detail',
+        loadComponent: () =>
+          import('../topic-detail/topic-detail.component').then((m) => m.TopicDetailComponent),
+      },
+      {
+        path: 'topic-detail2',
+        loadComponent: () =>
+          import('../topic-detail2/topic-detail2.component').then((m) => m.TopicDetail2Component),
+      },
+      {
+        path: 'topic-detail3',
+        loadComponent: () =>
+          import('../topic-detail3/topic-detail3.component').then((m) => m.TopicDetail3Component),
+      },
+      {
+        path: 'page-psysurvey',
+        loadComponent: () =>
+          import('../page-psysurvey/page-psysurvey.component').then((m) => m.PagePsysurveyComponent),
+      },
+      {
+        path: 'page-publishsurvey',
+        loadComponent: () =>
+          import('../page-publishsurvey/page-publishsurvey.component').then((m) => m.PagePublishsurveyComponent),
+      },
+      {
+        path: 'consult-picture',
+        loadComponent: () =>
+          import('../consult-picture/consult-picture.component').then((m) => m.ConsultPictureComponent),
+      },
+      {
+        path: 'report-modal',
+        loadComponent: () =>
+          import('../report-modal/report-modal.component').then((m) => m.ReportModalComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full',
+      },
+      {
+        path: 'drift-bottle',
+        loadComponent: () =>
+          import('../drift-bottle/drift-bottle.component').then((m) => m.DriftBottleComponent),
+      },
+      {
+        path: 'my-drift-bottle',
+        loadComponent: () =>
+          import('../my-drift-bottle/my-drift-bottle.component').then((m) => m.MyDriftBottleComponent),
+      },
+      
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224231644.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+ 
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+      
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}
+
+
+

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224232127.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+ 
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+      
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+      
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}
+
+
+

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

@@ -1,28 +1,31 @@
+<!-- drift-bottle.component.html -->
 <ion-content [fullscreen]="true">
-  <div class="top-image" >
+  <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" >
-    <ion-button  fill="clear" class="custom-button">
-        我的漂流瓶
-      </ion-button>
+  <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" >
+  <div class="button-container right-button"  (click)="catchDriftBottle()">
     <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
   </div>
 
-   <!-- 背景音乐 -->
-   <audio id="backgroundAudio" autoplay loop>
+  <!-- 背景音乐 -->
+  <audio id="backgroundAudio" autoplay loop>
     <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>

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

@@ -1,9 +1,11 @@
+// drift-bottle.component.ts
 import { Component, OnInit } from '@angular/core';
 import { 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';
 
 @Component({
   selector: 'app-drift-bottle',
@@ -16,12 +18,56 @@ import { ModalController } from '@ionic/angular/standalone';
   ]
 })
 export class DriftBottleComponent implements OnInit {
+  alertHeader: string = '';
+  alertMessage: string = '';
 
-  constructor(private router: Router, private modalCtrl: ModalController) {}
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private http: HttpClient
+  ) {}
 
   ngOnInit() {}
 
-  throwDriftBottleModal(){
-    openThrowDriftBottleModal(this.modalCtrl)
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("DriftBottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: any[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞着…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      bottleToCatch.set("status", "catched");
+      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'])
   }
 }

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

@@ -0,0 +1,14 @@
+<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>

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

@@ -0,0 +1,54 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 105px;
+  margin: auto;
+  top: 10px;
+  color:rgb(69, 166, 180);
+  }
+  

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MyDriftBottleComponent } from './my-drift-bottle.component';
+
+describe('MyDriftBottleComponent', () => {
+  let component: MyDriftBottleComponent;
+  let fixture: ComponentFixture<MyDriftBottleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MyDriftBottleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MyDriftBottleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+ 
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

soul-app/src/app/tabs/tabs.routes.ts

@@ -66,6 +66,12 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../drift-bottle/drift-bottle.component').then((m) => m.DriftBottleComponent),
       },
+      {
+        path: 'my-drift-bottle',
+        loadComponent: () =>
+          import('../my-drift-bottle/my-drift-bottle.component').then((m) => m.MyDriftBottleComponent),
+      },
+      
     ],
   },
   {

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

@@ -25,6 +25,7 @@ import { CommonModule } from '@angular/common';
 })
 export class ThrowDriftBottleComponent implements OnInit {
   driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+ 
 
   constructor(private modalCtrl: ModalController) {}
 
@@ -33,9 +34,11 @@ export class ThrowDriftBottleComponent implements OnInit {
   throw() {
     console.log('投掷漂流瓶:');
     console.log(`内容: ${this.driftbottleData.content}`);
+    
     // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
     const driftbottleData = {
       content: this.driftbottleData.content,
+      
     };
 
     let driftbottle = new CloudObject("Driftbottle");
@@ -43,6 +46,7 @@ export class ThrowDriftBottleComponent implements OnInit {
     driftbottle.save().then(data => {
       console.log('漂流瓶已成功投掷', data);
       this.modalCtrl.dismiss(driftbottle, "confirm");
+      
     }).catch(err => {
       console.error('投掷漂流瓶时出错');
     });