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">{{ nickName }}({{ 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 class="menu-item" @click="handlePassword()">
					<image class="menu-icon" src="/static/images/profile/7.png" mode="aspectFit"></image>
					<text class="menu-title">修改密码</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item">
					<image class="menu-icon" src="/static/images/profile/5.png" mode="aspectFit"></image>
					<text class="menu-title">版本：{{version}}</text>
					<text class="menu-title-download" v-if="isNewVersion" @click="handleVersionClick()">升级</text>
				</view>
			</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="/static/images/profile/7.png" mode="aspectFit"></image>
                    <text class="menu-title">修改密码</text>
                    <text class="menu-arrow">›</text>
                </view>
            </view> -->

            <!-- 退出 -->
            <view class="logout-wrapper">
                <text class="logout-btn" @click="handleLogout">退出</text>
            </view>
        </scroll-view>

        <!-- 下载进度遮罩（仅更新数据不重建，无闪烁） -->
        <view v-if="isDownload" class="download-progress-mask">
            <view class="download-progress-box">
                <text class="download-progress-title">下载中...</text>
                <view class="download-progress-bar">
                    <view class="download-progress-fill" :style="{ width: downloadProgress + '%' }"></view>
                </view>
                <text class="download-progress-text">{{ downloadProgress }}%</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref, onMounted } from 'vue'
    import { getUserInfo, getStoreIsKey } from '../../utils/storage'
    import { logout as logoutApi } from '../../api/auth/logout'
    import { useAuth } from '../../composables/useAuth'
	import { encryptAES, decryptAES } from '../../utils/crypto'
	import { getIsKey } from '../../api/auth/login'
	import { getConfigKey } from '../../api/system/config.uts'
	import { getBaseUrl } from '../../utils/request'
	
    // @ts-ignore
    import manifest from '@/manifest.json'

    // 用户信息
    const userName = ref<string>('')
    const userPhone = ref<string>('')
    const userDept = ref<string>('')
	const userRole = ref<string>('')
    const isNewVersion = ref<boolean>(false)
	const nickName = ref<string>('')
	const isDownload = ref<boolean>(false)
	const downloadProgress = ref<number>(0)
	
    // 版本信息
    const manifestVersion = manifest.versionName as string | null
    const version = ref<string>(manifestVersion != null ? manifestVersion : '1.0.0')
	const versionServer = ref<string>('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/7.png',
            path: '/pages/profile/password/index'
        },
		{
            id: 2,
            title: '关于版本',
            icon: '/static/images/profile/5.png',
            action: 'version'
        },
        {
            id: 3,
            title: '关于我们',
            icon: '/static/images/profile/6.png',
            path: '/pages/profile/about/index'
        },
        {
            id: 4,
            title: '通用设置',
            icon: '/static/images/profile/8.png',
            path: '/pages/profile/settings/index'
        }
    ])

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

	const compareVersion = (newVersion: string, currentVersion: string): boolean => {
		const newVer = newVersion.split('.').map(item => parseInt(item))
		const currentVer = currentVersion.split('.').map(item => parseInt(item))
		
		const maxLength = Math.max(newVer.length, currentVer.length)
		
		for (let i = 0; i < maxLength; i++) {
			const newNum = i < newVer.length ? newVer[i] : 0
			const currentNum = i < currentVer.length ? currentVer[i] : 0
			
			if (newNum > currentNum) {
				return true
			} else if (newNum < currentNum) {
				return false
			}
		}
		return false
	}
	
	const checkVersion = async (): Promise<void> => {
		const versionJSON = await getConfigKey("gxt.android.version") as UTSJSONObject
		versionServer.value = versionJSON['msg'] as string
		const hasNewVersion = compareVersion(versionServer.value, version.value) // true
		console.log("versionServer:"+versionServer.value)
		console.log("hasNewVersion:"+hasNewVersion)
		if(hasNewVersion){
			isNewVersion.value = true
		}
	}

	const handlePassword = (): void =>{
		uni.navigateTo({
		    url:"/pages/profile/password/index",
		    fail: (err: any) => {
		        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 {
			uni.setStorageSync("login_key", "0")
            clearAuth()
        }
    }

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

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

	// 安装APK的单独函数
	const installApkFile = (filePath: string): void => {
	  uni.installApk({
		filePath: filePath,
		success: () => {
		  console.log('安装成功');
		  uni.showToast({
			title: '安装成功',
			icon: 'success'
		  });
		},
		fail: (error) => {
		  console.error('安装失败:', error);
		  uni.showToast({
			title: '安装失败',
			icon: 'none'
		  });
		},
		complete: (res) => {
		  console.log('安装完成:', res);
		}
	  });
	}
	
	
	
	const installApkWithProgress = (): void => {		
	    // #ifdef APP-ANDROID
			isDownload.value = true;
			downloadProgress.value = 0;
			let donwloadUrl = '';
			donwloadUrl = getBaseUrl() + '/profile/app/gxt-release-'+versionServer.value+'.apk'
		
			// 下载APK
			const downloadTask = uni.downloadFile({
				url: donwloadUrl,
				filePath: `${uni.env.USER_DATA_PATH}/${Date.now()}_test.apk`, // 使用时间戳防止重名
				success: (downloadRes) => {
					isDownload.value = false;
					if (downloadRes.statusCode == 200) {
					// 确认安装
						uni.showModal({
						  title: '安装提示',
						  content: '下载完成，是否立即安装？',
						  success: (modalRes) => {
							if (modalRes.confirm) {
							  installApkFile(downloadRes.tempFilePath);
							}
						  }
						});
					} else {
						uni.showToast({
						  title: '下载失败',
						  icon: 'error'
						});
					}
				},
				fail: (error) => {
				  isDownload.value = false;
				  uni.showToast({
					title: '下载失败',
					icon: 'none'
				  });
				  console.error('下载失败:', error);
				}
			});
	
			// 监听下载进度（更新页面内进度条，节流 5% 减轻渲染压力）
			let lastProgress = -5;
			downloadTask.onProgressUpdate((res) => {
				const p = Math.round(res.progress);
				if (p - lastProgress >= 5 || p >= 100) {
					lastProgress = p;
					downloadProgress.value = p;
				}
			});
		// #endif
		// #ifdef APP-HARMONY
			uni.showToast({
				title: '请登录PC端，扫描二维码下载并安装',
				icon: 'none'
			});
		// #endif
		// #ifdef APP-IOS
			uni.showToast({
				title: '请登录PC端，扫描二维码下载并安装',
				icon: 'none'
			});
		// #endif
	}
	
	// 菜单点击
	const handleVersionClick = (): void => {
	    installApkWithProgress();
	}
	
    // 初始化
    onMounted(() => {
		checkVersion();
        const userInfo = getUserInfo()
        if (userInfo != null) {
            const nickNameRaw = userInfo['nickName'] as string | null
			const phone = userInfo['phone'] as string | null
			const userNameRaw = userInfo['userName'] as string | null
			
			const isKey = getStoreIsKey();
			if(isKey == "1"){
				userName.value = decryptAES(userNameRaw ?? '')
				nickName.value = decryptAES(nickNameRaw ?? '')
				if (phone != null && phone.length > 0) {
					userPhone.value = decryptAES(phone ?? '')
				}
			}else{
				userName.value = userNameRaw ?? ''
				nickName.value = nickNameRaw ?? ''
				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-title-download {
			    font-size: 30rpx;
			    color: #5500ff;
			}

            .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;
        }
    }

    .download-progress-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        align-items: center;
        justify-content: center;
    }
    .download-progress-box {
        width: 500rpx;
        padding: 60rpx;
        background-color: #ffffff;
        border-radius: 24rpx;
        align-items: center;
    }
    .download-progress-title {
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 30rpx;
    }
    .download-progress-bar {
        width: 100%;
        height: 16rpx;
        background-color: #f0f0f0;
        border-radius: 8rpx;
        overflow: hidden;
        margin-bottom: 20rpx;
    }
    .download-progress-fill {
        height: 100%;
        background-color: #0081ff;
        border-radius: 8rpx;
        transition: width 0.2s ease;
    }
    .download-progress-text {
        font-size: 28rpx;
        color: #666666;
    }
</style>