tab2.page.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import { Component } from '@angular/core';
  2. import {
  3. IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon,
  4. IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle,
  5. IonCardContent, IonProgressBar, IonGrid, IonRow, IonCol, IonListHeader,
  6. IonLabel, IonList, IonItem, IonAvatar, IonBadge, IonFab, IonFabButton
  7. } from '@ionic/angular/standalone';
  8. import { addIcons } from 'ionicons';
  9. import {
  10. notificationsOutline, calendarNumber, checkmarkCircle, ellipseOutline,
  11. timeOutline, barbell, body, walk, add, refresh, fitness
  12. } from 'ionicons/icons';
  13. @Component({
  14. selector: 'app-tab2',
  15. templateUrl: 'tab2.page.html',
  16. styleUrls: ['tab2.page.scss'],
  17. standalone: true,
  18. imports: [
  19. IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon,
  20. IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle,
  21. IonCardContent, IonProgressBar, IonGrid, IonRow, IonCol, IonListHeader,
  22. IonLabel, IonList, IonItem, IonAvatar, IonBadge, IonFab, IonFabButton
  23. ]
  24. })
  25. export class Tab2Page {
  26. // 周训练数据
  27. weekDays = [
  28. { shortName: '周一', name: 'Monday', trained: true, active: false },
  29. { shortName: '周二', name: 'Tuesday', trained: false, active: true },
  30. { shortName: '周三', name: 'Wednesday', trained: true, active: false },
  31. { shortName: '周四', name: 'Thursday', trained: false, active: false },
  32. { shortName: '周五', name: 'Friday', trained: false, active: false },
  33. { shortName: '周六', name: 'Saturday', trained: false, active: false },
  34. { shortName: '周日', name: 'Sunday', trained: false, active: false }
  35. ];
  36. // 计算属性
  37. get completedWorkouts(): number {
  38. return this.weekDays.filter(day => day.trained).length;
  39. }
  40. get totalWorkouts(): number {
  41. return this.weekDays.length;
  42. }
  43. get completionRate(): number {
  44. return this.completedWorkouts / this.totalWorkouts;
  45. }
  46. // 推荐计划
  47. recommendedPlans = [
  48. {
  49. name: '全身燃脂训练',
  50. duration: 28,
  51. difficulty: '中级',
  52. image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
  53. isNew: true
  54. },
  55. {
  56. name: '核心力量提升',
  57. duration: 35,
  58. difficulty: '高级',
  59. image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
  60. isNew: false
  61. },
  62. {
  63. name: '瑜伽晨间唤醒',
  64. duration: 20,
  65. difficulty: '初级',
  66. image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
  67. isNew: true
  68. }
  69. ];
  70. // 我的计划
  71. myPlans = [
  72. {
  73. name: '30天减脂挑战',
  74. progress: 65,
  75. nextTime: '明天 7:00',
  76. remaining: 12,
  77. icon: 'barbell'
  78. },
  79. {
  80. name: '上肢力量训练',
  81. progress: 30,
  82. nextTime: '后天 19:30',
  83. remaining: 5,
  84. icon: 'body'
  85. },
  86. {
  87. name: '晨跑计划',
  88. progress: 80,
  89. nextTime: '今天 6:00',
  90. remaining: 3,
  91. icon: 'walk'
  92. }
  93. ];
  94. constructor() {
  95. addIcons({
  96. notificationsOutline,
  97. calendarNumber,
  98. checkmarkCircle,
  99. ellipseOutline,
  100. timeOutline,
  101. barbell,
  102. body,
  103. walk,
  104. add,
  105. refresh,
  106. fitness
  107. });
  108. }
  109. // 刷新计划
  110. refreshPlans() {
  111. console.log('刷新计划数据');
  112. // 这里可以添加实际刷新逻辑
  113. }
  114. // 打开计划详情
  115. openPlan(plan: any) {
  116. console.log('打开计划:', plan.name);
  117. // 这里可以添加导航逻辑
  118. }
  119. // 创建新计划
  120. createNewPlan() {
  121. console.log('创建新计划');
  122. // 这里可以添加创建逻辑
  123. }
  124. }