HomeUser.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="com-user">
  3. <view class="user-main">
  4. <image class="avatar" :src="userInfo && userInfo.avatar ? userInfo.avatar : '/static/default-avatar.png'"></image>
  5. <view class="uc">
  6. <view class="name">Hi,你好!</view>
  7. <view class="tip" v-if="!userInfo || !userInfo.id">为了向您提供更好的服务,请登录!</view>
  8. <view class="tip" v-if="userInfo && userInfo.id">
  9. <view>余额:<text>{{ userInfo.balance }}</text></view>
  10. <view>积分:<text>{{ userInfo.point }}</text></view>
  11. </view>
  12. </view>
  13. <view class="ur" v-if="!userInfo || !userInfo.id" @click="goLogin">登录</view>
  14. <view class="qr iconfont icon-qr-extract" v-if="userInfo && userInfo.id" @click="goMemberCode"></view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. props: {
  21. userInfo: {
  22. type: Object,
  23. default: { id: '', avatar: '', name: '', balance: '', point: '' }
  24. }
  25. },
  26. methods: {
  27. // 去登录
  28. goLogin() {
  29. this.$navTo('pages/login/index')
  30. },
  31. // 跳转会员码
  32. goMemberCode(userId) {
  33. this.$navTo('pages/user/code', { userId: this.userInfo.id })
  34. },
  35. }
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .com-user {
  40. width: 100%;
  41. height: auto;
  42. padding: 0 20rpx 20rpx;
  43. margin-top: -60rpx;
  44. position: relative;
  45. z-index: 2;
  46. .user-main{
  47. width: 100%;
  48. padding: 20rpx;
  49. background: #f5f5f5;
  50. border-radius: 20rpx;
  51. border: #cccccc solid 1rpx;
  52. display: flex;
  53. align-items: center;
  54. .avatar{
  55. width: 130rpx;
  56. height: 130rpx;
  57. border-radius: 50%;
  58. }
  59. .uc{
  60. flex: 1;
  61. padding-left: 10rpx;
  62. .name{
  63. font-size: 32rpx;
  64. font-weight: 500;
  65. color: #000;
  66. }
  67. .tip{
  68. font-size: 24rpx;
  69. color: #666;
  70. margin-top: 10rpx;
  71. }
  72. }
  73. .ur{
  74. width: 140rpx;
  75. height: 60rpx;
  76. display: flex;
  77. align-items: center;
  78. border-radius: 60rpx;
  79. justify-content: center;
  80. color: #fff;
  81. font-size: 26rpx;
  82. background-color: $fuint-theme;
  83. }
  84. .qr{
  85. width: 80rpx;
  86. height: 80rpx;
  87. display: flex;
  88. align-items: center;
  89. border-radius: 6rpx;
  90. justify-content: center;
  91. text-align: center;
  92. color: $fuint-theme;
  93. font-size: 68rpx;
  94. background-color: #fff;
  95. border: solid 1rpx $fuint-theme;
  96. padding: 2rpx;
  97. }
  98. }
  99. }
  100. </style>