tab3.page.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <ion-menu contentId="main-content">
  2. <ion-header>
  3. <ion-toolbar>
  4. <ion-title>Menu Content</ion-title>
  5. </ion-toolbar>
  6. </ion-header>
  7. <ion-content class="ion-padding">This is the menu content.</ion-content>
  8. </ion-menu>
  9. <div class="ion-page" id="main-content">
  10. <ion-header>
  11. <ion-toolbar>
  12. <ion-buttons slot="start">
  13. <ion-menu-button></ion-menu-button>
  14. </ion-buttons>
  15. <ion-title>Menu</ion-title>
  16. </ion-toolbar>
  17. </ion-header>
  18. </div>
  19. <ion-content>
  20. <div class="profile-container">
  21. <div class="user-info">
  22. <!-- 个人信息 -->
  23. @if(!currentUser?.id){
  24. <img src="https://cdn.wantuju.com/pngsucai/imgRegular/20210801/ea7d60e8-133f-40b9-9f12-4ad402c97c62%20_63338_wantuju.jpg" alt="用户头像" class="avatar" />
  25. <div class="user-details">
  26. <h2>昵称</h2>
  27. <p>基本信息:年龄、性别等</p>
  28. </div>
  29. <div class="auth-text">
  30. <span class="login" (click)="login()">登录</span>/
  31. <span class="register" (click)="signup()">注册</span>
  32. </div>
  33. }
  34. @if(currentUser?.id){
  35. <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
  36. <div class="user-details">
  37. <h2>{{currentUser?.get("username")}}</h2>
  38. <p>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</p>
  39. </div>
  40. <div class="auth-text">
  41. <span class="edituser" (click)="editUser()">编辑资料</span>
  42. </div>
  43. }
  44. </div>
  45. <!-- 医疗服务 -->
  46. <ion-card-header>
  47. <ion-card-title>医疗服务</ion-card-title>
  48. </ion-card-header>
  49. <ion-card-content>
  50. <div class="button-row">
  51. <ion-button expand="full" fill="outline" color="light" routerLink="/tabs/inquiry">
  52. <img src="https://img.tukuppt.com/png_preview/00/06/02/Ci3mfMQItP.jpg!/fw/780" alt="报病查诊" class="button-icon"/>
  53. </ion-button>
  54. <ion-button expand="full" fill="outline" color="light" routerLink="/appointments">
  55. <img src="assets/appointments.png" alt="预约记录" class="button-icon" />
  56. </ion-button>
  57. <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
  58. <img src="assets/discussions.png" alt="讨论记录" class="button-icon" />
  59. </ion-button>
  60. <ion-button expand="full" fill="outline" color="light" routerLink="/doctors">
  61. <img src="assets/doctors.png" alt="关注的医生" class="button-icon" />
  62. </ion-button>
  63. </div>
  64. </ion-card-content>
  65. <!-- 医生关注 -->
  66. <ion-card-header>
  67. <ion-card-title>医生关注</ion-card-title>
  68. </ion-card-header>
  69. <ion-card-content>
  70. <ion-list>
  71. <ion-item>
  72. <ion-label>医生姓名 1</ion-label>
  73. <ion-icon slot="end" name="chevron-forward"></ion-icon>
  74. </ion-item>
  75. <ion-item>
  76. <ion-label>医生姓名 2</ion-label>
  77. <ion-icon slot="end" name="chevron-forward"></ion-icon>
  78. </ion-item>
  79. </ion-list>
  80. </ion-card-content>
  81. <!-- 常用服务 -->
  82. <ion-card-header>
  83. <ion-card-title>常用服务</ion-card-title>
  84. </ion-card-header>
  85. <ion-card-content>
  86. <ion-list>
  87. <ion-item button routerLink="/bills">
  88. <ion-label>我的账单</ion-label>
  89. <ion-icon slot="end" name="chevron-forward"></ion-icon>
  90. </ion-item>
  91. <ion-item button routerLink="/orders">
  92. <ion-label>商城订单</ion-label>
  93. <ion-icon slot="end" name="chevron-forward"></ion-icon>
  94. </ion-item>
  95. <ion-item button routerLink="/checkups">
  96. <ion-label>体检订单</ion-label>
  97. <ion-icon slot="end" name="chevron-forward"></ion-icon>
  98. </ion-item>
  99. </ion-list>
  100. </ion-card-content>
  101. </div>
  102. </ion-content>
  103. @if(currentUser?.id){
  104. <ion-button (click)="logout()" color="light">登出</ion-button>
  105. }