index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <view class="mine-page">
  3. <view class="topContent"></view>
  4. <view class="avatar-box">
  5. <u-avatar :src="require('@/static/head.png')" size="80"></u-avatar>
  6. </view>
  7. <view class="info-box">
  8. <view class="info-item">姓名:<view class="text">{{userInfo.userName}}</view>
  9. </view>
  10. <view class="info-item">手机号:<view class="text">{{userInfo.userPhone}}</view>
  11. </view>
  12. <view class="info-item">邮箱:<view class="text">{{userInfo.userEmail}}</view>
  13. </view>
  14. </view>
  15. <view class="btn-box">
  16. <u-button type="primary" text="退出登录" @click="logout"></u-button>
  17. </view>
  18. <uni-popup ref="alertDialog" type="dialog">
  19. <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="确认退出吗?"
  20. @confirm="dialogConfirm"></uni-popup-dialog>
  21. </uni-popup>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. msgType: 'warn',
  29. userInfo: uni.getStorageSync('userInfo')
  30. }
  31. },
  32. onShow() {},
  33. methods: {
  34. logout() {
  35. this.$refs.alertDialog.open()
  36. },
  37. dialogConfirm() {
  38. this.$api.logout().then(res => {
  39. uni.removeStorageSync('token');
  40. uni.showLoading({
  41. title: '正在退出...'
  42. });
  43. setTimeout(function() {
  44. uni.hideLoading();
  45. uni.reLaunch({
  46. url: '/pages/login/index'
  47. })
  48. }, 2000);
  49. }).catch(err => {})
  50. }
  51. },
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. .mine-page {
  56. .topContent {
  57. height: 340rpx;
  58. background: url("@/static/mine.png");
  59. background-repeat: no-repeat;
  60. background-size: 100% 100%;
  61. }
  62. .avatar-box {
  63. display: flex;
  64. justify-content: center;
  65. margin-top: -100rpx;
  66. }
  67. .info-box {
  68. background-color: $uni-bg-color;
  69. border-radius: 24rpx;
  70. margin: 24rpx;
  71. padding: 12rpx 25rpx;
  72. color: #333;
  73. .info-item {
  74. display: flex;
  75. align-items: center;
  76. border-bottom: 1px solid #eee;
  77. padding: 20rpx 0;
  78. }
  79. .info-item:last-child {
  80. border-bottom: none;
  81. }
  82. .text {
  83. font-size: 26rpx;
  84. color: #000;
  85. }
  86. }
  87. .btn-box {
  88. margin: 24rpx;
  89. }
  90. }
  91. </style>