gxt_app/pages/profile/index.uvue

<template>
    <view class="page-container">
        <!-- 背景图 -->
        <image class="bg-image" src="/static/images/profile/1.png" mode="widthFix"></image>

        <scroll-view class="page-content" style="flex: 1">
            <!-- 用户信息头部 -->
            <view class="header">
                <image class="avatar" src="/static/images/login/2.png" mode="aspectFill"></image>
                <text class="user-name">{{ userName }}</text>
            </view>

            <!-- 信息卡片区域 -->
            <view class="info-cards">
                <!-- 电话卡片 -->
                <view class="info-card">
                    <image class="card-icon" src="/static/images/profile/2.png" mode="aspectFit"></image>
                    <text class="card-label">电话</text>
                    <text class="card-value">{{ userPhone }}</text>
                </view>

                <!-- 部门卡片 -->
                <view class="info-card">
                    <image class="card-icon" src="/static/images/profile/3.png" mode="aspectFit"></image>
                    <text class="card-label">部门</text>
                    <text class="card-value">{{ userDept }}</text>
                </view>
            </view>

            <!-- 通讯录 -->
            <view class="contact-item">
                <text class="contact-text">{{userRole}}</text>
            </view>

            <!-- 功能菜单 -->
            <view class="menu-section">
                <view v-for="(item, index) in menuList" :key="index" class="menu-item" @click="handleMenuClick(item)">
                    <image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
                    <text class="menu-title">{{ item.title }}</text>
                    <text class="menu-arrow">›</text>
                </view>
            </view>

            <!-- 注销账号 -->
            <view class="logout-wrapper">
                <text class="logout-btn" @click="handleLogout">注销账号</text>
            </view>
        </scroll-view>

        <!-- 底部 TabBar -->
        <custom-tabbar :current="4" />
    </view>
</template>

<script setup lang="uts">
    import { ref, onMounted } from 'vue'
    import { getUserInfo } from '../../utils/storage'
    import { logout as logoutApi } from '../../api/auth/logout'
    import { useAuth } from '../../composables/useAuth'
    // @ts-ignore
    import manifest from '@/manifest.json'

    // 用户信息
    const userName = ref<string>('')
    const userPhone = ref<string>('')
    const userDept = ref<string>('')
	const userRole = ref<string>('')
    
    // 版本信息
    const manifestVersion = manifest.versionName as string | null
    const version = ref<string>(manifestVersion != null ? manifestVersion : '1.0.0')

    // 认证管理
    const auth = useAuth()
    const clearAuth = auth.logout
    const getCurrentAccessToken = auth.getCurrentAccessToken

    // 菜单列表
    type MenuItem = {
        id: number
        title: string
        icon: string
        path?: string
        action?: string
    }

    const menuList = ref<MenuItem[]>([
        {
            id: 1,
            title: '关于版本',
            icon: '/static/images/profile/5.png',
            action: 'version'
        },
        {
            id: 2,
            title: '关于我们',
            icon: '/static/images/profile/6.png',
            path: '/pages/profile/about/index'
        },
        {
            id: 3,
            title: '隐私条款',
            icon: '/static/images/profile/7.png',
            path: '/pages/profile/privacy/index'
        },
        {
            id: 4,
            title: '通用设置',
            icon: '/static/images/profile/8.png',
            path: '/pages/profile/settings/index'
        }
    ])

    // 通讯录点击
    const handleContactClick = (): void => {
        uni.showToast({
            title: '功能开发中',
            icon: 'none'
        })
    }

    // 菜单点击
    const handleMenuClick = (item: MenuItem): void => {
        if (item.action == 'version') {
            uni.showModal({
                title: '版本信息',
                content: `当前版本：v${version.value}`,
                showCancel: false
            })
            return
        }

        if (item.path != null && item.path.length > 0) {
            uni.navigateTo({
                url: item.path,
                fail: (err: any) => {
                    uni.showToast({
                        title: '功能开发中',
                        icon: 'none'
                    })
                }
            })
        }
    }

    // 执行退出登录（必须在 handleLogout 之前定义）
    const doLogout = async (): Promise<void> => {
        try {
            await logoutApi()
        } catch (e: any) {
            console.log('退出登录接口调用失败', e)
        } finally {
            clearAuth()
        }
    }

    // 退出登录
    const handleLogout = (): void => {
        uni.showModal({
            title: '提示',
            content: '确定要退出登录吗？',
            success: (res) => {
                // 提取属性（any 类型不能直接访问属性）
                const confirm = res.confirm as boolean

                if (confirm) {
                    // 使用异步函数包装
                    doLogout()
                }
            }
        })
    }

    // 初始化
    onMounted(() => {
        const userInfo = getUserInfo()
        if (userInfo != null) {
            const nickName = userInfo['nickName'] as string | null
            userName.value = nickName ?? ''

            const phone = userInfo['phone'] as string | null
            if (phone != null && phone.length > 0) {
                userPhone.value = phone
            }

            const deptName = userInfo['deptName'] as string | null
            if (deptName != null && deptName.length > 0) {
                userDept.value = deptName
            }
			
			const roleNames = userInfo['roleNames'] as string | null
			if (roleNames != null && roleNames.length > 0) {
			    userRole.value = roleNames
			}
        }
    })
</script>

<style lang="scss">
    .page-container {
        position: relative;
        flex: 1;
        background: #f5f8fb;
        padding-top: env(safe-area-inset-top);
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .page-content {
        position: relative;
        flex: 1;
        padding-bottom: 100rpx;
        z-index: 1;
    }

    .header {
        padding: 80rpx 30rpx 40rpx;
        flex-direction: row;
        align-items: center;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border: 1rpx solid #ccc;
            border-radius: 60rpx;
            background-color: #fff;
            margin-right: 30rpx;
        }

        .user-name {
            font-size: 40rpx;
            color: #ffffff;
            font-weight: bold;
        }
    }

    .info-cards {
        padding: 0 30rpx;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30rpx;

        .info-card {
            width: 330rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            padding: 30rpx 24rpx;
            
            /* #ifndef APP-HARMONY */
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
            /* #endif */

            .card-icon {
                width: 48rpx;
                height: 48rpx;
                margin-bottom: 16rpx;
            }

            .card-label {
                font-size: 26rpx;
                color: #666666;
                margin-bottom: 12rpx;
            }

            .card-value {
                font-size: 32rpx;
                color: #333333;
                font-weight: bold;
            }
        }
    }

    .contact-item {
        margin: 0 30rpx 30rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 24rpx;
        flex-direction: row;
        align-items: center;
        
        /* #ifndef APP-HARMONY */
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
        /* #endif */

        .contact-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
        }

        .contact-text {
            flex: 1;
            font-size: 32rpx;
            color: #333333;
        }

        .contact-arrow {
            font-size: 48rpx;
            color: #cccccc;
            line-height: 48rpx;
        }
    }

    .menu-section {
        margin: 0 30rpx 30rpx;
        background-color: #ffffff;
        border-radius: 24rpx;
        overflow: hidden;
        
        /* #ifndef APP-HARMONY */
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
        /* #endif */

        .menu-item {
            flex-direction: row;
            align-items: center;
            padding: 30rpx;
            border-bottom: 1rpx solid #f0f0f0;

            &:last-child {
                border-bottom: none;
            }

            .menu-icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 24rpx;
            }

            .menu-title {
                flex: 1;
                font-size: 32rpx;
                color: #333333;
            }

            .menu-arrow {
                font-size: 48rpx;
                color: #cccccc;
                line-height: 48rpx;
            }
        }
    }

    .logout-wrapper {
        margin: 0 30rpx 30rpx;
        background-color: #ffffff;
        border-radius: 24rpx;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        
        /* #ifndef APP-HARMONY */
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
        /* #endif */

        .logout-btn {
            font-size: 32rpx;
            color: #666666;
            padding: 20rpx 0;
        }
    }
</style>