0210331-bounty-store

package-lock.json

@@ -16,7 +16,7 @@
         "@angular/platform-browser": "^17.0.2",
         "@angular/platform-browser-dynamic": "^17.0.2",
         "@angular/router": "^17.0.2",
-        "@ionic/angular": "^8.0.0",
+        "@ionic/angular": "^8.2.4",
         "@types/parse": "^3.0.9",
         "angular-calendar": "^0.31.1",
         "date-fns": "^3.6.0",
@@ -3217,11 +3217,11 @@
       "dev": true
     },
     "node_modules/@ionic/angular": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.2.0.tgz",
-      "integrity": "sha512-47y/J3yqLwzHqe+50QTTIr+9AYbjpu9IR+p33bRbxJhUEaUCl5VKzLwjL94bVi+eTVwr786eu2kK8TRTaPyEBw==",
+      "version": "8.2.4",
+      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.2.4.tgz",
+      "integrity": "sha512-g1TqPkozujTSDo7DjiweGIQS9Pl5ZtauCj6dy60/MJek5ptKXQ2Yvgjs6U3SndQhGwzJ6W/mDJbYNc+wurfm4g==",
       "dependencies": {
-        "@ionic/core": "8.2.0",
+        "@ionic/core": "8.2.4",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -3246,11 +3246,11 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.2.0.tgz",
-      "integrity": "sha512-+TjHDFluiGYVNiQZOLsETCE+om5FKYbaOKkfmCQYvRGxlg4WtOwaX6YCrpP4MMuerGt36PA196oh/JTcVe9ByA==",
+      "version": "8.2.4",
+      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.2.4.tgz",
+      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
       "dependencies": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.1",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
@@ -4636,9 +4636,9 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.18.2.tgz",
-      "integrity": "sha512-GLYbzv3Bq/oUbQk3CH09zkjISANccyE5/A1C7+1JZhdnWUx1MRuWQR9/2uzSPR7kF0sdppwzXvArl7VqYCxLOQ==",
+      "version": "4.19.1",
+      "resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.19.1.tgz",
+      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
       "bin": {
         "stencil": "bin/stencil"
       },

package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^17.0.2",
     "@angular/platform-browser-dynamic": "^17.0.2",
     "@angular/router": "^17.0.2",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.2.4",
     "@types/parse": "^3.0.9",
     "angular-calendar": "^0.31.1",
     "date-fns": "^3.6.0",

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,51 @@
+<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>
+  </div>
+</ion-content>

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

@@ -0,0 +1,42 @@
+.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,13 +12,18 @@ 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() {
     try {
       await Parse.User.logOut();

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

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