update:加入了按钮呼吸和动能细则评判

TFPower-app/src/app/rili/rili.component.scss → TFPower-app/src/app/tab2/rili/rili.component.scss

@@ -33,7 +33,7 @@
 .dot {
   width: 20px; /* 圆点的直径 */
   height: 20px; /* 圆点的直径 */
-  background-color: blue; /* 圆点的颜色 */
+  background-color: #009b7d; /* 圆点的颜色 */
   border-radius: 50%; /* 圆形 */
   top: 0; /* 在顶部 */
   transform: translateY(-50%); /* 向上移动圆点，使其居中 */
@@ -49,8 +49,8 @@
 }
 
 .selected {
-  border: 1px solid blue; /* 选中日期的背景色 */
-  color: rgb(0, 132, 255); /* 选中日期的字体颜色 */
+  border: 1px solid  #009b7d;; /* 选中日期的背景色 */
+  color: #009b7d; /* 选中日期的字体颜色 */
 }
 
 .daka{

TFPower-app/src/app/tab2/tab2.page.html

@@ -52,10 +52,17 @@
         <app-tianqi></app-tianqi>
         <ion-card>
           <ion-card-header>
+            <div class="inline-container">
+              <ion-icon name="alert-circle-outline" style="margin-right: 2px;"></ion-icon>
+              <ion-label class="link" (click)="chakan()">点击查看动能细则</ion-label>
+            </div>
             <ion-card-title>打卡区域</ion-card-title>
             <div class="power-label">
               <strong>我的动能</strong>
-              <p class="stat-value">{{ user.get('power') }}</p>
+              <div class="power-content">
+                <img src="assets/images/power.png" alt="Power Icon">
+                <p class="stat-value">{{ user.get('power') }}</p>
+              </div>
             </div>
           </ion-card-header>
           <ion-card-content>
@@ -63,7 +70,7 @@
             <div class="card-info">
               <ion-button [disabled]="getButtonState(realDate).isDisabled"
                 (click)="getButtonState(realDate).buttonText === '补签' ? handleMakeupClick() : markAttendance()"
-                class="check">
+                class="check pulse-button">
                 {{ getButtonState(realDate).buttonText }}
               </ion-button>
             </div>
@@ -94,33 +101,17 @@
     </ng-template>
 
 
-    <ion-card>
-      <!-- 未登录 -->
-      @if(!currentUser?.id){
-      <ion-card-header>
-        <ion-card-title>请登录</ion-card-title>
-        <ion-card-subtitle>暂无信息</ion-card-subtitle>
-      </ion-card-header>
-      }
-      <!-- 未登录 -->
-      @if(currentUser?.id){
-      <ion-card-header>
-        <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
-        <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}
-        </ion-card-subtitle>
-      </ion-card-header>
-      }
-      <ion-card-content>
-        @if(!currentUser?.id){
-        <ion-button expand="block" (click)="signup()">注册</ion-button>
-        <ion-button expand="block" (click)="login()">登录</ion-button>
-        }
-        @if(currentUser?.id){
-        <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
-        <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
-        }
-      </ion-card-content>
-    </ion-card>
+
+    <!-- 未登录 -->
+    <div *ngIf="!currentUser?.id" class="button-group">
+      <ion-label class="link" (click)="signup()">注册</ion-label>
+      <ion-label class="link" (click)="login()">登录</ion-label>
+    </div>
+
+    <!-- 已登录 -->
+    <div *ngIf="currentUser?.id" class="button-group">
+      <ion-label class="link" (click)="logout()">登出</ion-label>
+    </div>
 
   </div>
 

TFPower-app/src/app/tab2/tab2.page.scss

@@ -285,9 +285,13 @@ ion-content {
   justify-content: center; 
   gap: 20px;
 }
+.inline-container {
+  display: flex;
+}
+
 
 /* 圆形打卡按钮 */
-.checkin ion-button {
+.checkin .check {
 
   --background: #009b7d;
   --color: white;
@@ -296,19 +300,42 @@ ion-content {
   --border-width: 1px;
   --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
   --ripple-color: deeppink;
-   width: 100px; 
+  width: 100px; 
   height: 100px; 
   font-size: 18px;
   --border-radius: 50%; 
   display: flex;
   align-items: center;
   justify-content: center;
-   --padding-start: 16px;
+  --padding-start: 16px;
   --padding-end: 16px;
   --padding-top: 12px;
   --padding-bottom: 12px;
 }
+//按钮脉冲效果
+.pulse-button {
+  animation: pulse-animation 1.5s infinite;
+  border-radius: 50%; 
+}
 
+@keyframes pulse-animation {
+0% {
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+    box-shadow: 0 1px 10px rgba(0, 147, 223, 0.6), 0 1px 5px rgba(0, 147, 223, 0.2) inset;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    border: 1px solid rgba(59, 235, 235, 0.7);
+    box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
+  }
+}
 
 .circle-btn:disabled {
   background-color: #dcdcdc;
@@ -329,17 +356,38 @@ ion-content {
 }
 
 /* 统计值 */
-ion-card .power-label {
+.power-label {
   position: absolute;
   top: 5px;
   right: 30px;
-  font-size: 14px !important; 
+  font-size: 14px !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.power-label strong {
+  font-weight: bold;
+}
+
+.power-content {
+  display: flex;
+  align-items: center; /* 确保图片和文本垂直居中对齐 */
+  gap: 4px; /* 控制图标和数字之间的间距 */
+}
+
+.power-content img {
+  height: 20px; /* 调整图片大小 */
+  width: 20px; /* 调整图片大小 */
 }
 
 .checkin .stat-value {
+  margin: 0;
   font-size: 24px !important; 
   color: #000000;
 }
+
+
 ion-card {
     border-radius: 15px; 
     background-color: #f9f9f9; 
@@ -347,7 +395,18 @@ ion-card {
     border: 1px solid #e0e0e0; 
   }
 
+.button-group {
+  display: flex;
+  gap: 5px; /* 按钮之间的间距 */
+  justify-content: left; /* 水平居中 */
+}
 
+.button-group ion-button {
+  width: 5%; /* 按钮宽度调整为小巧 */
+  height: 5%;
+  --padding-start: 10px;
+  --padding-end: 10px;
+}
 
 
 

TFPower-app/src/app/tab2/tab2.page.ts

@@ -19,8 +19,8 @@ import { AlertController } from '@ionic/angular';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { TestPageComponent } from './test-page/test-page.component';
-import { TianqiComponent } from '../tianqi/tianqi.component';
-import { RiliComponent } from '../rili/rili.component';
+import { TianqiComponent } from './tianqi/tianqi.component';
+import { RiliComponent } from './rili/rili.component';
 
 @Component({
   selector: 'app-tab2',
@@ -145,7 +145,7 @@ export class Tab2Page implements OnInit {
     } else if (bmi >= 25 && bmi < 29.9) {
       return '您的BMI稍微偏高，可以增加运动，控制饮食！(≧◡≦)';
     } else {
-      return '您的BMI较高，建议积极锻炼，控制体重！(｡•́︿•̀｡)';
+      return '您的BMI太高了，建议积极锻炼，控制体重！(｡•́︿•̀｡)';
     }
   }
 
@@ -161,12 +161,9 @@ export class Tab2Page implements OnInit {
     // 使用 currentUser 的 pointer 查询用户相关数据
     cloudQuery.equalTo("user", currentUser.toPointer());
     try {
-      // 执行查询并获取数据
       this.planUser = await cloudQuery.find();
-      // 确保查询结果存在且有效
       if (this.planUser && this.planUser.length > 0) {
         const user = this.planUser[0];
-        // 获取和处理已打卡日期
         const checkedDays = user.get("checkeddays") || [];
         if (Array.isArray(checkedDays)) {
           checkedDays.forEach((date: string) => {
@@ -201,6 +198,44 @@ export class Tab2Page implements OnInit {
     }
     this.consecutiveDays = count;
   }
+  //查看动能细则
+  async chakan() {
+    // 动能细则的内容
+    const powerDetails = `
+   
+      普通打卡: 每天获得 5 动能。
+      连续打卡第七天: 额外获得 10 动能。
+      连续打卡第十五天: 额外获得 20 动能。
+      连续打卡第三十天: 额外获得 30 动能。
+      补签:补签之后，连续打卡天数会清零。
+      动能后续能够在商城兑换联名奖品哦！
+  `;
+
+    // 创建 alert 对话框
+    const alert = await this.alertController.create({
+      header: '动能细则',
+      message: powerDetails,  // 显示动能细则内容
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('操作被取消');
+          }
+        },
+        {
+          text: '确认',
+          handler: () => {
+            console.log('动能细则已确认');
+          }
+        }
+      ]
+    });
+
+    // 显示对话框
+    await alert.present();
+  }
 
   // 格式化日期
   formatDate(date: Date): string {
@@ -241,29 +276,21 @@ export class Tab2Page implements OnInit {
   async markAttendance() {
     const currentDate = this.realDate;
     const formattedDate = this.formatDate(currentDate);
-
-    // 如果今天已经打卡
     if (this.checkInHistory.has(formattedDate)) {
       this.showToast('今天已经打卡过了', 'warning');
       return;
     }
-
-    // 如果是未来日期
     if (currentDate > this.correctDate(new Date())) {
       this.showToast('不能打卡未来的日期', 'danger');
       return;
     }
-
-    // 正常打卡
     this.checkInHistory.add(formattedDate);
     this.days = this.checkInHistory.size;
     this.calculateConsecutiveDays();
-
     let currentUser = new CloudUser();
     const cloudQuery = new CloudQuery("fitUser");
     cloudQuery.equalTo("user", currentUser.toPointer());
     const userData = await cloudQuery.find();
-
     if (userData.length > 0) {
       const user = userData[0];
       let checkedDays = user.get("checkeddays") || [];
@@ -271,24 +298,19 @@ export class Tab2Page implements OnInit {
       user.set({ "checkeddays": checkedDays });
       user.set({ "days": this.days });
       user.set({ "sucdays": this.consecutiveDays });
-
-      // 计算奖励
-      let totalReward = this.dailyReward; // 每天签到奖励
-      totalReward += this.getConsecutiveReward(this.consecutiveDays); // 连续签到奖励
-      user.set({ "power": user.get("power") + totalReward }); // 增加总 power 奖励
-
+      let totalReward = this.dailyReward;
+      totalReward += this.getConsecutiveReward(this.consecutiveDays);
+      user.set({ "power": user.get("power") + totalReward });
       await user.save();
       this.loadPlanUser();
-      this.showToast('打卡成功，获得了 ' + totalReward + ' Power');
+      this.showToast('打卡成功，获得了 ' + totalReward + ' 动能');
     }
   }
-
+  //补签操作
   async handleMakeupSignIn(user: CloudUser): Promise<string> {
-    // 如果用户有足够的动力值
     if (user.get("power") >= this.powerForMakup) {
       const currentDate = this.realDate;
       const formattedDate = this.formatDate(currentDate);
-
       // 将补签日期添加到已打卡的日期集合
       if (!this.checkInHistory.has(formattedDate)) {
         this.checkInHistory.add(formattedDate);
@@ -302,8 +324,7 @@ export class Tab2Page implements OnInit {
         user.set({ "checkeddays": checkedDays });
       }
       user.set({ "days": this.days });
-      user.set({ "sucdays": this.consecutiveDays });
-
+      user.set({ "sucdays": 1 });
       await user.save();
       return '补签成功！';
     } else {
@@ -311,7 +332,7 @@ export class Tab2Page implements OnInit {
     }
   }
 
-  // 补签点击事件
+  // 补签点击提示事件
   async handleMakeupClick() {
     const confirmed = window.confirm('补签将消耗 ' + this.powerForMakup + ' 动能，且连续打卡天数清零！确定补签吗？');
     if (confirmed) {
@@ -567,7 +588,6 @@ export class Tab2Page implements OnInit {
 # 对话环节
 0.导诊（根据用户基本情况，引导选择合适的训练计划） 
 1.预设的问询方式（根据学员自述情况进行引导）
-
 - 打招呼，以学员自述为主
 - 当信息充足时，确认学员的目标与需求，并进入下一个环节 
 2.拓展的问询细节 
@@ -579,7 +599,7 @@ export class Tab2Page implements OnInit {
 - 完成训练计划时，请在消息结尾附带: [交流完成]
 # 开始话语
 当您准备好了，可以以一个健身教练的身份，向来访的学员打招呼。
-你好！欢迎来到健身房，我是${coach?.get("name")}教练，${coach?.get("desc")}。今天你想要专注锻炼哪个部位呢？或者有什么具体的健身目标吗？`);
+你好！欢迎来到WiseFitness健身房，我是${coach?.get("name")}教练，在${coach?.get("specialize")}方面颇有造诣。今天你想询问关于这个方面的哪些问题呢？`);
       },
       onMessage: (chat: FmodeChat, message: FmodeChatMessage) => {
         console.log("onMessage", message)

TFPower-app/src/app/tianqi/tianqi.component.ts → TFPower-app/src/app/tab2/tianqi/tianqi.component.ts

@@ -13,15 +13,12 @@ addIcons({ checkmark })
   imports: [CommonModule]
 })
 export class TianqiComponent implements OnInit {
-
   time: string = "";
   yulu: string = "";
-
   juti: string = "";
   loading: HTMLIonLoadingElement | null = null;
   weather: any = [
   ];
-
   async fetchWeatherData() {
     // 第一个请求，获取 adcode
     const apiUrl = '/api/api/weather/city/101240101';
@@ -69,20 +66,9 @@ export class TianqiComponent implements OnInit {
     });
     return result.join(''); // 将拼音数组转换为字符串
   }
-
-
   ngOnInit() {
-
-
-
-
-
   }
   public gptre: string = "";
   public progress = 0;
   public Complete = false
-
-
-
-
 }