0210331-赏金商店

src/app/bounty-store/bounty-store-routing.module.ts

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

src/app/bounty-store/bounty-store.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 { BountyStorePageRoutingModule } from './bounty-store-routing.module';
+
+import { BountyStorePage } from './bounty-store.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BountyStorePageRoutingModule
+  ],
+  declarations: [BountyStorePage]
+})
+export class BountyStorePageModule {}

src/app/bounty-store/bounty-store.page.html

@@ -0,0 +1,59 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>赏金商店</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="top-box">
+    <div class="left-section">
+      <div class="top-text">当前赏金（元）</div>
+      <div class="amount">{{ currentBounty }}</div>
+    </div>
+    <div class="right-section">
+      <div class="top-text">累计支出（元）</div>
+      <div class="amount">{{ totalSpent }}</div>
+    </div>
+  </div>
+
+  <div class="activity-box">
+    <ion-card (click)="openPopup('娱乐')">
+      <ion-card-header>
+        <ion-icon name="game-controller" color="primary"></ion-icon>
+        <ion-card-title>娱乐</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card (click)="openPopup('电影')">
+      <ion-card-header>
+        <ion-icon name="film" color="secondary"></ion-icon>
+        <ion-card-title>电影</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card (click)="openPopup('放纵餐')">
+      <ion-card-header>
+        <ion-icon name="restaurant" color="tertiary"></ion-icon>
+        <ion-card-title>放纵餐</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card (click)="openPopup('其他')">
+      <ion-card-header>
+        <ion-icon name="ellipsis-horizontal" color="dark"></ion-icon>
+        <ion-card-title>其他</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+    
+    <!-- <ion-card (click)="openPopup('其他')">
+      <ion-card-header>
+        <ion-icon name="ellipsis-horizontal" color="dark"></ion-icon>
+        <ion-card-title>其他</ion-card-title>
+      </ion-card-header>
+    </ion-card> -->
+    
+  </div>
+</ion-content>

src/app/bounty-store/bounty-store.page.scss

@@ -0,0 +1,41 @@
+.top-box {
+    background-color: #4CAF50;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+  
+    .left-section, .right-section {
+      text-align: center;
+      color: #fff;
+      padding: 15px;
+      border-radius: 15px;
+      margin: 10px;
+      font-size: 20px;
+    }
+    .amount {
+      font-size: 28px;
+      font-weight: bold;
+    }
+  }
+  
+  .activity-box {
+    ion-card {
+      margin: 10px;
+  
+      ion-card-header {
+        ion-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  
+    .other-card ion-card {
+      margin: 10px;
+  
+      ion-card-header {
+        ion-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }

src/app/bounty-store/bounty-store.page.spec.ts

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

src/app/bounty-store/bounty-store.page.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-bounty-store',
+  templateUrl: 'bounty-store.page.html',
+  styleUrls: ['bounty-store.page.scss']
+})
+export class BountyStorePage {
+
+  currentBounty: number = 100;
+  totalSpent: number = 50;
+
+  constructor(private alertController: AlertController) {}
+
+  async openPopup(activity: string) {
+    const alert = await this.alertController.create({
+      header: '消费详情',
+      inputs: [
+        {
+          name: 'amount',
+          type: 'number',
+          placeholder: '消费金额（元）'
+        },
+        {
+          name: 'note',
+          type: 'text',
+          placeholder: '备注信息'
+        }
+      ],
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确认',
+          handler: (data: any) => {
+            // 处理确认消费的逻辑，更新赏金余额和消费记录
+            const amount = parseFloat(data.amount);
+            if (!isNaN(amount) && amount > 0) {
+              this.currentBounty -= amount;
+              this.totalSpent += amount;
+            }
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+}

src/app/tab3/tab3.page.ts

@@ -12,11 +12,13 @@ export class Tab3Page {
   constructor(private navCtrl: NavController, private toastController: ToastController) {}
 
   async onItemClick(item: string) {
-    const toast = await this.toastController.create({
-      message: `Clicked on ${item}`,
-      duration: 2000,
-    });
-    toast.present();
+    if(item == '赏金商店')
+    this.navCtrl.navigateRoot('tabs/bounty-store')
+    // const toast = await this.toastController.create({
+    //   message: `Clicked on ${item}`,
+    //   duration: 2000,
+    // });
+    // toast.present();
   }
 
   async logout() {

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

@@ -31,6 +31,10 @@ const routes: Routes = [
         path: "tree",
         loadChildren: () => import('../../modules/tab/tree/tree.module').then(mod => mod.TreePageModule)
       },
+      {
+        path: 'bounty-store',
+        loadChildren: () => import('../bounty-store/bounty-store.module').then(mod => mod.BountyStorePageModule)
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',