userBar.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <view>
  3. <view class="userCard flex align_center justify_between" @click="toUser">
  4. <view class="userCard-info flex align_center justify_between">
  5. <view>
  6. <u-image v-if="!isLogin" src="/static/def_personal_avatar.png" width="80" height="80"></u-image>
  7. <u-image v-if="userInfo.sex==1" src="/static/def_patient_boy@2x.png" width="80" height="80"></u-image>
  8. <u-image v-if="userInfo.sex==0" src="/static/def_patient_girl@2x.png" width="80" height="80"></u-image>
  9. </view>
  10. <view>
  11. <view v-if="!isLogin" style="font-size: 40rpx;">
  12. 请点击登录
  13. </view>
  14. <view v-else style="color: #FFEB3B;">
  15. <view>{{userInfo.name}}</view>
  16. <view>{{userInfo.mobile}}</view>
  17. </view>
  18. </view>
  19. </view>
  20. <view :style="{color: isLogin?'#fff':''}">
  21. <text v-if="isLogin">退出</text>
  22. <u-icon name="arrow-right"></u-icon>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. props:{
  30. isLogin:{
  31. type: Boolean,
  32. default: false
  33. },
  34. userInfo: {
  35. type: Object
  36. }
  37. },
  38. data() {
  39. return {
  40. }
  41. },
  42. methods: {
  43. toUser(){
  44. this.$emit('toUser')
  45. },
  46. }
  47. }
  48. </script>
  49. <style lang="less">
  50. .userCard{
  51. padding:1.2em 1em;
  52. background-image: linear-gradient(#58c4c4 30%,#65e2e2);
  53. .userCard-info{
  54. > view{
  55. &:last-child{
  56. margin-left: 0.5em;
  57. >view{
  58. padding: 0.2em;
  59. }
  60. }
  61. }
  62. }
  63. .user-photo{
  64. display: block;
  65. width: 120rpx;
  66. height: 120rpx;
  67. border-radius: 50%;
  68. overflow: hidden;
  69. }
  70. }
  71. </style>