UserAccountInfo.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
  3. <el-descriptions-item>
  4. <template #label>
  5. <descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
  6. </template>
  7. {{ user.levelName || '无' }}
  8. </el-descriptions-item>
  9. <el-descriptions-item>
  10. <template #label>
  11. <descriptions-item-label icon="ep:suitcase" label=" 成长值 " />
  12. </template>
  13. {{ user.experience || 0 }}
  14. </el-descriptions-item>
  15. <el-descriptions-item>
  16. <template #label>
  17. <descriptions-item-label icon="ep:coin" label=" 当前积分 " />
  18. </template>
  19. {{ user.point || 0 }}
  20. </el-descriptions-item>
  21. <el-descriptions-item>
  22. <template #label>
  23. <descriptions-item-label icon="ep:coin" label=" 总积分 " />
  24. </template>
  25. {{ user.totalPoint || 0 }}
  26. </el-descriptions-item>
  27. <el-descriptions-item>
  28. <template #label>
  29. <descriptions-item-label icon="svg-icon:member_balance" label=" 当前余额 " />
  30. </template>
  31. {{ fenToYuan(wallet.balance || 0) }}
  32. </el-descriptions-item>
  33. <el-descriptions-item>
  34. <template #label>
  35. <descriptions-item-label icon="svg-icon:member_expenditure_balance" label=" 支出金额 " />
  36. </template>
  37. {{ fenToYuan(wallet.totalExpense || 0) }}
  38. </el-descriptions-item>
  39. <el-descriptions-item>
  40. <template #label>
  41. <descriptions-item-label icon="svg-icon:member_recharge_balance" label=" 充值金额 " />
  42. </template>
  43. {{ fenToYuan(wallet.totalRecharge || 0) }}
  44. </el-descriptions-item>
  45. </el-descriptions>
  46. </template>
  47. <script lang="ts" setup>
  48. import { DescriptionsItemLabel } from '@/components/Descriptions'
  49. import * as UserApi from '@/api/member/user'
  50. import * as WalletApi from '@/api/pay/wallet/balance'
  51. import { fenToYuan } from '@/utils'
  52. withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; column?: number }>(), {
  53. column: 2
  54. }) // 用户信息
  55. </script>
  56. <style lang="scss" scoped>
  57. .cell-item {
  58. display: inline;
  59. }
  60. .cell-item::after {
  61. content: ':';
  62. }
  63. .kefu-descriptions {
  64. ::v-deep(.el-descriptions__cell) {
  65. display: flex;
  66. align-items: center;
  67. justify-content: space-between;
  68. .el-descriptions__label {
  69. width: 120px;
  70. display: block;
  71. text-align: left;
  72. }
  73. .el-descriptions__content {
  74. flex: 1;
  75. text-align: end;
  76. }
  77. }
  78. }
  79. </style>