stocktaking/pages/profile/profile.vue

<template>
  <view class="profile-container">
    <view class="avatar-section">
      <image class="avatar" :src="userInfo.avatar || '/static/profile/avatar.png'" mode="aspectFill"></image>
    </view>
    <view class="info-section">
      <view class="info-item">
        <text class="label">用户名：</text>
        <text class="value">{{ userInfo.username || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="label">姓名：</text>
        <text class="value">{{ userInfo.name || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="label">部门：</text>
        <text class="value">{{ (userInfo.department && userInfo.department.name) || '-' }}</text>
      </view>
    </view>
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
import { getUserInfo } from '@/api.js'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  onShow() {
    getUserInfo().then(response => {
      if (response.data) {
		console.log("返回数据", response.data)
        this.userInfo = response.data
      } else {
        uni.showToast({
          title: response.data.errmsg || '获取信息失败',
          icon: 'none'
        })
      }
    }).catch(() => {
      uni.showToast({ title: '网络错误', icon: 'none' })
    })
  },
  methods: {
    logout() {
      uni.removeStorageSync('token');
      uni.reLaunch({ url: '/pages/login/login' });
    }
  }
}
</script>

<style>
.profile-container {
  min-height: 100vh;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80rpx;
}
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}
.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 20rpx;
}
.username {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}
.info-section {
  width: 80%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  padding: 30rpx;
  margin-bottom: 60rpx;
}
.info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}
.info-item:last-child {
  margin-bottom: 0;
}
.label {
  color: #888;
  font-size: 28rpx;
  width: 120rpx;
}
.value {
  color: #333;
  font-size: 28rpx;
}
.logout-btn {
  width: 80%;
  height: 90rpx;
  line-height: 90rpx;
  background: #ff4d4f;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  font-weight: bold;
  margin-top: 40rpx;
}
.logout-btn:active {
  background: #d9363e;
}
</style>