shuhi-app/pages/my/page/user-info.vue

<template>
    <view class="user-info-page">
        <!-- 头像区域 -->
        <view class="avatar-section">
            <view class="avatar-wrap">
                <text>头像：</text>
                <u-avatar :size="50" :src="userInfo.avatar"></u-avatar>
                <u-button type="success" style="width:200rpx" size="small" @click="handleEditAvatar">去修改</u-button>
            </view>
        </view>

        <!-- 基本信息区域 -->
        <view class="info-section">
            <view class="section-title">基本信息</view>
            <view class="info-card">
                <u-cell-group :border="false">
                    <u-cell title="姓名" :value="userInfo.nickName || '无'" />
                    <u-cell title="性别" :value="userInfo.sex == 0 ? '男' : userInfo.sex == 1 ? '女' : '未知' || '无'" />
                    <u-cell title="生日" :value="userInfo.birthday || '无'" />
                    <u-cell title="学历" :value="userInfo.education || '无'" />
                    <u-cell title="毕业学校" :value="userInfo.school || '无'" :border="false" />
                </u-cell-group>
            </view>
        </view>

        <!-- 账号信息区域 -->
        <view class="info-section">
            <view class="section-title">用户账号</view>
            <view class="info-card">
                <u-cell-group :border="false">
                    <u-cell title="账号" :value="userInfo.userName" />
                    <u-cell title="创建日期" :value="userInfo.createTime" />
                    <u-cell title="最近登录" :value="userInfo.loginDate || '--'" :border="false" />
                </u-cell-group>
            </view>
        </view>

        <!-- 员工资料区域 -->
        <view class="info-section">
            <view class="section-title">员工资料</view>
            <view class="info-card">
                <u-cell-group :border="false">
                    <u-cell title="公司" :value="userInfo.company || '无'" />
                    <u-cell title="员工编号" :value="userInfo.employeeId || '无'" />
                    <u-cell title="职位" :value="userInfo.position || '无'" :border="false" />
                </u-cell-group>
            </view>
        </view>

        <!-- 联系方式区域 -->
        <view class="info-section">
            <view class="section-title">联系方式</view>
            <view class="info-card">
                <u-cell-group :border="false">
                    <u-cell title="电话" :value="userInfo.phonenumber" />
                    <u-cell title="邮箱" :value="userInfo.email || '无'" />
                    <u-cell title="住址" :value="userInfo.address || '无'" :border="false" />
                </u-cell-group>
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue'
import baseUrl from '@/config/request.js';

const userInfo = ref({
    avatar: '/static/images/avatar.jpg',
    name: '无',
    gender: '无',
    birthday: '无',
    education: '无',
    school: '无',
    username: '用户账号',
    account: 'fxt',
    createTime: '2024-06-12 12:00:00',
    lastLogin: '',
    company: '无',
    employeeId: '无',
    position: '无',
    phone: '18888888888',
    email: '无',
    address: '无'
})

//获取用户信息
function getUserInfo() {
    uni.$u.http.get('/app/appUser/getUserInfoById').then(res => {
        if (res.code == 200) {
            userInfo.value = res.data
        }
    })
}
getUserInfo()

//设置头像 /app/appUser/setAvatar 入参 avatarfile
function setAvatar(avatarfile) {
    uni.$u.http.post('/app/appUser/setAvatar?avatarfile='+avatarfile).then(res => {
        if (res.code == 200) {
            userInfo.value.avatar = avatarfile
            uni.showToast({
                title: '头像设置成功',
                icon: 'success'
            })
        }
    })
}

const handleEditAvatar = () => {
    const token = uni.getStorageSync('token')
    uni.chooseImage({
        count: 1,
        success: (res) => {
            const filePath = res.tempFilePaths[0]
            uni.uploadFile({
                url: `${baseUrl}/common/upload`,
                filePath: filePath,
                name: 'file',
                header: {
                    "Authorization": token
                },
                success: (uploadRes) => {
                    const data = JSON.parse(uploadRes.data)
                    if (data.code === 200) {
                       setAvatar(data.url)
                    } else {
                        uni.showToast({
                            title: '上传失败',
                            icon: 'none'
                        })
                    }
                },
                fail: () => {
                    uni.showToast({
                        title: '上传失败',
                        icon: 'none'
                    })
                }
            })
        }
    })
}
</script>

<style>
page {
    background: #F5F6FA;
}
</style>
<style lang="scss" scoped>
.user-info-page {
    padding: 20rpx;
    box-sizing: border-box;

    .avatar-section {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 40rpx;
        margin-bottom: 20rpx;

        .avatar-wrap {
            display: flex;
            align-items: center;
            gap: 30rpx;
        }
    }

    .info-section {
        margin-bottom: 20rpx;

        .section-title {
            font-size: 28rpx;
            color: #666;
            padding: 20rpx 10rpx;
            font-weight: 500;
        }

        .info-card {
            background: #FFFFFF;
            border-radius: 16rpx;
            overflow: hidden;
        }
    }
}
</style>