tab3.page.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!-- 我的布局 -->
  2. <ion-header>
  3. <ion-toolbar>
  4. <ion-buttons slot="start">
  5. <ion-button>
  6. 用户信息
  7. </ion-button>
  8. <ion-avatar>
  9. <ion-img src="assets/img/头像.jpg"></ion-img>
  10. </ion-avatar>
  11. </ion-buttons>
  12. <ion-buttons slot="end">
  13. <ion-button>
  14. <ion-icon name="settings"></ion-icon>
  15. </ion-button>
  16. <ion-button>
  17. <ion-icon name="moon"></ion-icon>
  18. </ion-button>
  19. </ion-buttons>
  20. </ion-toolbar>
  21. </ion-header>
  22. <ion-content>
  23. <ion-card class="bianju">
  24. <img alt="" src="https://gd-hbimg.huaban.com/db3495ffea73e3551181abbfd45adbeee8b532369f3b3-N2AKKf_fw1200webp" />
  25. <ion-card-header>
  26. <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
  27. <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
  28. <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
  29. </ion-card-header>
  30. <!-- 新增:根据用户状态,显示登录/登出按钮,执行跳转或登出函数 -->
  31. <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login">登录</ion-button>
  32. <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
  33. <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
  34. </ion-card>
  35. <!-- 金刚区 - 一行九列金刚区按钮
  36. <ion-title>我的会员</ion-title>
  37. <ion-row>
  38. <ion-col size="2" *ngFor="let item of myItems">
  39. <ion-button expand="block">{{ item.title }}</ion-button>
  40. </ion-col>
  41. </ion-row> -->
  42. <!-- 金刚区 - 二行三列 -->
  43. <ion-label>我的钱包</ion-label>
  44. <ion-row >
  45. <ion-col size="4" >
  46. <ion-card>
  47. <ion-card-content>
  48. <ion-label>金币余额: 100</ion-label>
  49. </ion-card-content>
  50. </ion-card>
  51. </ion-col>
  52. <ion-col size="4" class="location">
  53. <ion-card>
  54. <ion-card-content>
  55. <ion-label>今日收益:100¥</ion-label>
  56. </ion-card-content>
  57. </ion-card>
  58. </ion-col>
  59. <ion-button expand="block" >去赚钱</ion-button>
  60. </ion-row>
  61. <!-- 金刚区 - 十行一列金刚区按钮 -->
  62. <ion-row>
  63. <ion-col size="12">
  64. <ion-button expand="block">作者中心</ion-button>
  65. <ion-button expand="block">阅读喜好</ion-button>
  66. <ion-button expand="block">奖品中心</ion-button>
  67. <ion-button expand="block">我的评论</ion-button>
  68. <ion-button expand="block">我的收藏</ion-button>
  69. <ion-button expand="block">已购书籍</ion-button>
  70. <ion-button expand="block">绑兑换码</ion-button>
  71. <ion-button expand="block">客服咨询</ion-button>
  72. <ion-button expand="block">功能建议</ion-button>
  73. <ion-button expand="block">蚂蚁能量</ion-button>
  74. </ion-col>
  75. </ion-row>
  76. </ion-content>