tab2.page.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <ion-header sticky>
  2. <ion-toolbar>
  3. <ion-segment [(ngModel)]="selectedTab" color="primary" class="custom-segment">
  4. <ion-segment-button value="checkin">
  5. <ion-icon aria-hidden="true" name="calendar"></ion-icon>
  6. 打卡
  7. </ion-segment-button>
  8. <ion-segment-button value="plan">
  9. <ion-icon name="checkmark-circle" aria-hidden="true"></ion-icon>
  10. 计划
  11. </ion-segment-button>
  12. <ion-segment-button value="consultation">
  13. <ion-icon name="help-circle" aria-hidden="true"></ion-icon>
  14. 问诊
  15. </ion-segment-button>
  16. </ion-segment>
  17. </ion-toolbar>
  18. </ion-header>
  19. <ion-content [fullscreen]="true">
  20. <div style="height: 56px;"></div>
  21. <!-- 打卡 -->
  22. <div *ngIf="selectedTab === 'checkin'" class="checkin">
  23. <ng-container *ngIf="planUser && planUser.length > 0; else noUserContent">
  24. <ion-card-content *ngFor="let user of planUser">
  25. <ion-card>
  26. <ion-card-header>
  27. <ion-card-title>欢迎回来!{{ user.get('name') }}</ion-card-title>
  28. </ion-card-header>
  29. <ion-card-content>
  30. <div class="greeting-container">
  31. <div class="avatar-info-container">
  32. <div class="avatar-container">
  33. <img [src]="user.get('avater')" alt="用户头像" class="avatar">
  34. </div>
  35. <div class="user-info">
  36. <ion-card>
  37. <ion-card-content>
  38. <p><strong>身高:</strong>{{ user.get('height') }} cm</p>
  39. <p><strong>体重:</strong>{{ user.get('weight') }} kg</p>
  40. <p><strong>BMI:</strong>{{ calculateBMI(user.get('height'), user.get('weight')) }}</p>
  41. <p><strong>运动目标:</strong>{{ user.get('fitnessGoals') }}</p>
  42. </ion-card-content>
  43. </ion-card>
  44. <ion-label>{{ getEncouragement(calculateBMI(user.get('height'), user.get('weight'))) }}</ion-label>
  45. </div>
  46. </div>
  47. </div>
  48. </ion-card-content>
  49. </ion-card>
  50. <app-tianqi></app-tianqi>
  51. <ion-card>
  52. <ion-card-header>
  53. <ion-card-title>打卡区域</ion-card-title>
  54. <div class="power-label">
  55. <strong>我的动能</strong>
  56. <p class="stat-value">{{ user.get('power') }}</p>
  57. </div>
  58. </ion-card-header>
  59. <ion-card-content>
  60. <app-rili (ionChange2)="onDateChange2($event)"></app-rili>
  61. <div class="card-info">
  62. <ion-button [disabled]="getButtonState(realDate).isDisabled"
  63. (click)="getButtonState(realDate).buttonText === '补签' ? handleMakeupClick() : markAttendance()"
  64. class="check">
  65. {{ getButtonState(realDate).buttonText }}
  66. </ion-button>
  67. </div>
  68. <div class="card-stats">
  69. <div class="stat-item">
  70. <p><strong>已打卡天数</strong></p>
  71. <p class="stat-value">{{ user.get('days') }}</p>
  72. </div>
  73. <div class="stat-item">
  74. <p><strong>连续打卡天数</strong></p>
  75. <p class="stat-value">{{ user.get('sucdays') }}</p>
  76. </div>
  77. </div>
  78. </ion-card-content>
  79. </ion-card>
  80. </ion-card-content>
  81. </ng-container>
  82. <ng-template #noUserContent>
  83. <ion-card>
  84. <ion-card-header>
  85. <ion-card-title>没有用户数据</ion-card-title>
  86. </ion-card-header>
  87. <ion-card-content>
  88. <p>当前没有用户信息,请稍后再试。</p>
  89. </ion-card-content>
  90. </ion-card>
  91. </ng-template>
  92. <ion-card>
  93. <!-- 未登录 -->
  94. @if(!currentUser?.id){
  95. <ion-card-header>
  96. <ion-card-title>请登录</ion-card-title>
  97. <ion-card-subtitle>暂无信息</ion-card-subtitle>
  98. </ion-card-header>
  99. }
  100. <!-- 未登录 -->
  101. @if(currentUser?.id){
  102. <ion-card-header>
  103. <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
  104. <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}
  105. </ion-card-subtitle>
  106. </ion-card-header>
  107. }
  108. <ion-card-content>
  109. @if(!currentUser?.id){
  110. <ion-button expand="block" (click)="signup()">注册</ion-button>
  111. <ion-button expand="block" (click)="login()">登录</ion-button>
  112. }
  113. @if(currentUser?.id){
  114. <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
  115. <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
  116. }
  117. </ion-card-content>
  118. </ion-card>
  119. </div>
  120. <!-- 计划 -->
  121. <div *ngIf="selectedTab === 'plan'" class="plan">
  122. <ion-card-content>
  123. <ion-card>
  124. <ion-card-header>
  125. <ion-card-title>我的本周计划</ion-card-title>
  126. </ion-card-header>
  127. <div class="plan-table">
  128. <ion-grid class="table">
  129. <ion-row>
  130. <ion-col size="1.5" class="grid-header">日期</ion-col>
  131. <ion-col size="1.5" class="grid-header">部位</ion-col>
  132. <ion-col size="1.5" class="grid-header">项目1</ion-col>
  133. <ion-col size="2.5" class="grid-header">项目2</ion-col>
  134. <ion-col size="2.5" class="grid-header">项目3</ion-col>
  135. <ion-col size="2.5" class="grid-header">项目4</ion-col>
  136. </ion-row>
  137. </ion-grid>
  138. <!-- 绑定计划数据 -->
  139. <ion-list>
  140. <ion-row *ngFor="let day of planList">
  141. <ion-item-sliding>
  142. <ion-item>
  143. <!-- 显示计划内容 -->
  144. <ion-col size="1" class="plan-column">{{ day.get('date') }}</ion-col>
  145. <ion-col size="1" class="plan-column">{{ day.get('trainingPart') }}</ion-col>
  146. <ion-col size="2.5" *ngFor="let task of day.get('trainingItems'); let i = index" class="plan-column">
  147. <div class="task-container">
  148. <span class="task-item">{{ task.item || '' }}</span>
  149. <span class="sets-reps">{{ task.sets }} x {{ task.reps }}</span>
  150. </div>
  151. </ion-col>
  152. </ion-item>
  153. <!-- 滑动时显示的按钮,设置 side="end" 来将按钮显示在右边 -->
  154. <ion-item-options side="end">
  155. <ion-item-option class="edit-btn" color="primary" shape="round" (click)="editPlan(day)">编辑
  156. </ion-item-option>
  157. <ion-item-option class="delete-btn" color="danger" shape="round" (click)="deletePlan(day)">删除
  158. </ion-item-option>
  159. </ion-item-options>
  160. </ion-item-sliding>
  161. </ion-row>
  162. </ion-list>
  163. </div>
  164. </ion-card>
  165. <ion-card-subtitle>
  166. <ion-icon name="alert-circle-outline" style="margin-right: 5px;"></ion-icon>左滑行内数据可对计划进行修改哦!
  167. </ion-card-subtitle>
  168. <ion-button expand="full" shape="round" class="reverse" (click)="regeneratePlan()">
  169. <ion-icon name="infinite-outline" style="margin-right:5px ;"></ion-icon>重新生成计划
  170. </ion-button>
  171. </ion-card-content>
  172. </div>
  173. <!-- 问诊 -->
  174. <div *ngIf="selectedTab === 'consultation'" class="consult">
  175. <ion-card-content>
  176. <div
  177. style="width: 95%; margin: auto; height: 100px; display: flex; justify-content: space-between; background-color: #ffffff; border: 1px solid #e7e7db; border-radius: 20px; overflow: hidden;"
  178. (click)="doPoemTask()">
  179. <!-- 左侧内容部分 -->
  180. <div
  181. style="display: flex; flex-direction: column; justify-content: flex-start; margin-top: 23px; margin-left: 40px; position: relative;">
  182. <!-- 品牌动态提示标签 -->
  183. <div
  184. style="position: absolute; padding: 5px; color: #fff; background-color: #009b7d; top: -25px; left: -20px; border-radius: 7px; font-size: 12px;">
  185. 健身动作
  186. </div>
  187. <!-- 标题 -->
  188. <h3>
  189. 一键<span style="color: #6dbdac; font-size: 30px; font-weight: bolder; font-family: SimSun;">生成</span>
  190. </h3>
  191. <!-- 按钮 -->
  192. <div style="color: #fff;">
  193. <ion-button size="small" class="lan">点击了解-></ion-button>
  194. </div>
  195. </div>
  196. <!-- 右侧图片部分 -->
  197. <div>
  198. <img src="assets/images/action5.png" style="height: 100px; display: flex; justify-content: flex-end;" alt="">
  199. </div>
  200. </div>
  201. <!-- 任务区域 -->
  202. <ion-card *ngIf="actionTaskVisible">
  203. <ion-card-header>
  204. <ion-card-title>动作生成</ion-card-title>
  205. </ion-card-header>
  206. <ion-card-content>
  207. <div *ngFor="let step of actionTaskList">
  208. <ion-item>
  209. <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
  210. <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
  211. <ion-icon *ngIf="step.progress === 1" name="checkmark-circle-outline"></ion-icon>
  212. <ion-icon *ngIf="step.error" name="close-circle-outline"></ion-icon>
  213. {{ step.title }}
  214. <span *ngIf="step.progress">{{ step.progress * 100 | number:'2.0-0' }}%</span>
  215. <span *ngIf="step.error" style="color:red;">{{ step.error }}</span>
  216. </ion-item>
  217. </div>
  218. </ion-card-content>
  219. </ion-card>
  220. <!-- 图片展示 -->
  221. <ion-card *ngIf="shareData.images">
  222. <ion-card-header>
  223. <ion-card-title>动作展示</ion-card-title>
  224. </ion-card-header>
  225. <ion-card-content>
  226. <div *ngFor="let imageUrl of shareData.images">
  227. <img [src]="imageUrl" alt="诊断图片" style="width: 100%; height: 400px; object-fit: cover;" />
  228. </div>
  229. </ion-card-content>
  230. </ion-card>
  231. <!-- 诊断结果 -->
  232. <!-- AI教练互动 -->
  233. <ion-card id="coaches">
  234. <ion-card-header>
  235. <ion-card-title>教练简介</ion-card-title>
  236. <ion-card-subtitle>顶级教练</ion-card-subtitle>
  237. </ion-card-header>
  238. <ion-card-content style="padding: 5px;">
  239. <ion-list>
  240. <ion-item *ngFor="let coach of coachList" lines="none">
  241. <ion-thumbnail slot="start">
  242. <img [src]="coach.get('avater') || '../../assets/images/coach1.jpg'" [alt]="coach.get('name')" />
  243. </ion-thumbnail>
  244. <div class="coach-info" style="width: 120px;">
  245. <h3>{{ coach.get('name') }}({{ coach.get('age') }}岁)</h3>
  246. <p>擅长领域:{{ coach.get('specialize')}}</p>
  247. <p>WiseFitness俱乐部</p>
  248. </div>
  249. <div style="margin-left: 10px;">
  250. <ion-button shape="round" size="small" (click)="openInquiry(coach)">
  251. <ion-icon name="logo-gitlab" style="margin-right: 5px;"></ion-icon>
  252. 立即咨询
  253. </ion-button>
  254. </div>
  255. </ion-item>
  256. </ion-list>
  257. </ion-card-content>
  258. </ion-card>
  259. <div
  260. style="width: 95%; margin: auto; height: 100px; display: flex; justify-content: space-between; background-color: #ffffff; border: 1px solid #e7e7db; border-radius: 20px; overflow: hidden;"
  261. (click)="doInqueryTask()">
  262. <!-- 左侧内容部分 -->
  263. <div
  264. style="display: flex; flex-direction: column; justify-content: flex-start; margin-top: 23px; margin-left: 40px; position: relative;">
  265. <!-- 品牌动态提示标签 -->
  266. <div
  267. style="position: absolute; padding: 5px; color: #fff; background-color: #009b7d; top: -25px; left: -20px; border-radius: 7px; font-size: 12px;">
  268. 身体疼痛
  269. </div>
  270. <!-- 标题 -->
  271. <h3>
  272. 一键<span style="color: #6dbdac; font-size: 30px; font-weight: bolder; font-family: SimSun;">诊断</span>
  273. </h3>
  274. <!-- 按钮 -->
  275. <div style="color: #fff;">
  276. <ion-button size="small" class="lan">点击诊断-></ion-button>
  277. </div>
  278. </div>
  279. <!-- 右侧图片部分 -->
  280. <div>
  281. <img src="assets/images/battle1.png" style="height: 100px; display: flex; justify-content: flex-end;" alt="">
  282. </div>
  283. </div>
  284. <ion-card *ngIf="healthTaskVisible">
  285. <ion-card-header>
  286. <ion-card-title>医疗诊断</ion-card-title>
  287. </ion-card-header>
  288. <ion-card-content>
  289. <div *ngFor="let step of healthTaskList">
  290. <ion-item>
  291. <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
  292. <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
  293. <ion-icon *ngIf="step.progress === 1" name="checkmark-circle-outline"></ion-icon>
  294. <ion-icon *ngIf="step.error" name="close-circle-outline"></ion-icon>
  295. {{ step.title }}
  296. <span *ngIf="step.progress">{{ step.progress * 100 | number:'2.0-0' }}%</span>
  297. <span *ngIf="step.error" style="color:red;">{{ step.error }}</span>
  298. </ion-item>
  299. </div>
  300. </ion-card-content>
  301. </ion-card>
  302. <ion-card *ngIf="shareData.diagResult">
  303. <ion-card-header>
  304. <ion-card-title>{{ shareData.diagResult.title }}</ion-card-title>
  305. </ion-card-header>
  306. <ion-card-content>
  307. <h2>{{ shareData.diagResult.desc }}</h2>
  308. <fm-markdown-preview class="content-style" [content]=shareData.diagResult.content>
  309. </fm-markdown-preview>
  310. </ion-card-content>
  311. </ion-card>
  312. </ion-card-content>
  313. </div>
  314. </ion-content>