gxt_app/pages/login/index.uvue

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

        <scroll-view class="login-content">
            <!-- Logo 和标题 -->
            <view class="header">
                <image class="logo" src="/static/images/login/2.png" mode="aspectFit"></image>
                <text class="title">工效通APP</text>
            </view>

            <!-- 登录表单卡片 -->
            <view class="form-card">
                <!-- 账号输入 -->
                <view class="form-item">
                    <text class="label">账号</text>
                    <input class="input" type="text" placeholder="请输入您的账号" v-model="username" />
                </view>

                <!-- 密码输入 -->
                <view class="form-item">
                    <text class="label">密码</text>
                    <view class="input-wrapper">
                        <input class="input" :type="showPassword ? 'text' : 'password'" placeholder="请输入您的密码" v-model="password" />
                        <image class="eye-icon" :src="showPassword ? '/static/images/login/4.png' : '/static/images/login/3.png'" mode="aspectFit" @click="handleTogglePassword"></image>
                    </view>
                </view>

                <!-- 记住密码 -->
                <view class="remember-box">
                    <checkbox :checked="rememberPassword" @click="handleRememberChange" class="checkbox" />
                    <text class="remember-text">记住密码</text>
                </view>

                <!-- 登录按钮 -->
                <button class="login-btn"  @click="handleLogin">
                    <text class="login-btn-text">{{ loading ? "登录中..." : "登录" }}</text>
                </button>
            </view>

            <!-- 底部信息 -->
            <view class="footer">
                <text class="version">v{{ version }}</text>
                <text class="company">宇光同行</text>
            </view>
        </scroll-view>
		
		<!-- 自定义选择器弹窗 -->
		<view v-if="showPasswordPicker" class="picker-modal">
		    <view class="modal-mask" @click="showPasswordPicker = false"></view>
		    <view class="modal-content">
		        <view class="modal-header">
		            <text class="modal-title">修改密码</text>
		            <text class="modal-close" @click="showPasswordPicker = false">取消</text>
		        </view>
				<view class="form-item-input">
				    <text class="label-picker">新密码</text>
				    <view class="view-input-picker">
				        <input class="input-picker" :type="showNewPassword ? 'text' : 'password'" placeholder="请输入新密码" v-model="newpassword" />
				        <image class="eye-icon-picker" :src="showNewPassword ? '/static/images/login/4.png' : '/static/images/login/3.png'" mode="aspectFit" @click="handleToggleNewPassword"></image>
				    </view>
				</view>
				<view class="form-item-input">
				    <text class="label-picker">确认密码</text>
				    <view class="view-input-picker">
				        <input class="input-picker" :type="showConfirmPassword ? 'text' : 'password'" placeholder="请输入确认密码" v-model="confirmpassword" />
				        <image class="eye-icon-picker" :src="showConfirmPassword ? '/static/images/login/4.png' : '/static/images/login/3.png'" mode="aspectFit" @click="handleToggleConfirmPassword"></image>
				    </view>
				</view>
				<view class="form-item-btn">
					<button class="btn-primary"  @click="handleRestPassword">
						确认
					</button>
				</view>
		    </view>
		</view>
    </view>
</template>

<script setup lang="uts">
    import { ref, computed, onMounted } from 'vue'
    import { loginByAccount, getUserInfo, resetPassword } from '../../api/auth/login'
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
    import {
        saveAccessToken,
        saveUserInfo,
        getRememberedAccount,
        saveRememberedAccount,
        clearRememberedAccount
    } from '../../utils/storage'
    import { validatePassword } from '../../utils/validate'
    import { encryptAES } from '../../utils/crypto'
    // @ts-ignore
    import manifest from '@/manifest.json'

    // 表单数据
    const username = ref<string>("")
    const password = ref<string>("")
	const newpassword = ref<string>("")
	const confirmpassword = ref<string>("")
    const rememberPassword = ref<boolean>(false)
    const showPassword = ref<boolean>(false)
	const showNewPassword = ref<boolean>(false)
	const showConfirmPassword = ref<boolean>(false)
    const loading = ref<boolean>(false)
	const showPasswordPicker = ref<boolean>(false)

    // 版本号
    const manifestVersion = manifest.versionName as string | null
    const version = ref<string>(manifestVersion != null ? manifestVersion : '1.0.0')

    // 是否可以登录
    const canLogin = computed((): boolean => {
        return username.value.length > 0 && password.value.length > 0 && !loading.value
    })

    // 记住密码切换
    const handleRememberChange = (): void => {
        rememberPassword.value = !rememberPassword.value
    }

    // 切换密码显示/隐藏
    const handleTogglePassword = (): void => {
        showPassword.value = !showPassword.value
    }
	
	// 切换密码显示/隐藏
	const handleToggleNewPassword = (): void => {
	    showNewPassword.value = !showNewPassword.value
	}
	
	// 切换密码显示/隐藏
	const handleToggleConfirmPassword = (): void => {
	    showConfirmPassword.value = !showConfirmPassword.value
	}

	const handleRestPassword = async (): Promise<void> => {
		try {
			if(newpassword.value != confirmpassword.value){
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'error'
				})
				return;
			}
			await resetPassword(username.value, password.value, newpassword.value);
			showPasswordPicker.value = false;
			uni.showToast({
				title: '修改成功,请重新登录',
				icon: 'success'
			})
			newpassword.value = ""
			confirmpassword.value = "";
		} catch (e: any) {
		    uni.showToast({
		        title: e.message ?? '密码修改失败',
		        icon: 'none',
		        duration: 2000
		    })
		}
	};
    // 登录处理
    const handleLogin = async (): Promise<void> => {

        // 验证输入
        if (username.value.trim().length == 0) {
            uni.showToast({
                title: '请输入账号',
                icon: 'none',
                duration: 2000
            })
            return
        }

        if (password.value.trim().length == 0) {
            uni.showToast({
                title: '请输入密码',
                icon: 'none',
                duration: 2000
            })
            return
        }

        // // 验证密码强度
        // if (!validatePassword(password.value)) {
        //     uni.showToast({
        //         title: '密码强度不足：需包含数字、大小写字母、特殊字符，至少6位',
        //         icon: 'none',
        //         duration: 3000
        //     })
        //     return
        // }

        try {
            loading.value = true
            const result = await loginByAccount(username.value, password.value)
            // 提取 data 部分
            const resultObj = result as UTSJSONObject
            // const data = resultObj['data'] as UTSJSONObject
					
			const isInitPassword = resultObj["isInitPassword"] as boolean | null;
			// console.log("================"+ code)
			if(isInitPassword==true){
				showPasswordPicker.value = true;
				return
			}

            // 保存登录信息
            saveAccessToken(resultObj['token'] as string)

			const userInfoJson = await getUserInfo();
			console.log(userInfoJson);

			const userInfoObj = userInfoJson as UTSJSONObject
			const userInfo = userInfoObj['user'] as UTSJSONObject
			const deptInfo = userInfo['dept'] as UTSJSONObject
			const permissions = userInfoObj['permissions'] as any[]
            saveUserInfo({
                userId: userInfo['userId'],
                userName: userInfo['userName'],
				nickName: userInfo['nickName'],
				phone: userInfo['phonenumber'],
				deptName: deptInfo['deptName'],
				roleNames: userInfoObj['roleNames'],
				permissions: permissions
            })

            // 保存或清除记住的账号密码
            if (rememberPassword.value) {
                saveRememberedAccount(username.value, password.value)
            } else {
                clearRememberedAccount()
            }

            uni.showToast({
                title: '登录成功',
                icon: 'success'
            })

            // 跳转到首页
            setTimeout(() => {
                uni.redirectTo({
                    url: '/pages/index/index'
                })
            }, 1000)

        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '登录失败',
                icon: 'none',
                duration: 2000
            })
        } finally {
            loading.value = false
        }
    }

    // 初始化：加载记住的账号密码
    onMounted(() => {
		checkUpdate()
        const remembered = getRememberedAccount()
        if (remembered != null) {
            username.value = remembered['username'] as string
            password.value = remembered['password'] as string
            rememberPassword.value = true
        }
    })
</script>

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

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

    .login-content {
        position: relative;
        flex: 1;
        padding: 60rpx 40rpx;
        z-index: 1;
    }

    .header {
        align-items: center;
        margin-bottom: 80rpx;
    }

    .logo {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 40rpx;
    }

    .title {
        font-size: 48rpx;
        color: #ffffff;
        font-weight: bold;
        // #ifndef APP-HARMONY
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        // #endif

    }

    .form-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 24rpx;
        padding: 50rpx 40rpx;
         // #ifndef APP-HARMONY
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
        // #endif
        margin-bottom: 100rpx;
    }

    .form-item {
        margin-bottom: 40rpx;
    }

    .label {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .input-wrapper {
        position: relative;
        width: 100%;
    }

    .input {
        width: 100%;
        height: 90rpx;
        padding: 0 100rpx 0 30rpx;
        background-color: #f5f5f5;
        border-radius: 12rpx;
        font-size: 30rpx;
        color: #333333;
        border: 1rpx solid transparent;
    }

    .input:focus {
        border-color: #007aff;
        background-color: #ffffff;
    }

    .eye-icon {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 40rpx;
        height: 40rpx;
    }

    .remember-box {
        flex-direction: row;
        align-items: center;
        margin-bottom: 50rpx;
    }

    .checkbox {
        transform: scale(0.8);
    }

    .remember-text {
        font-size: 28rpx;
        color: #1677ff;
        margin-left: 12rpx;
    }

    .login-btn {
        width: 100%;
        height: 100rpx;
        background-color: #0081ff;
        border-radius: 50rpx;
        color: #ffffff;
        // #ifndef APP-HARMONY
        box-shadow: 0 8rpx 16rpx rgba(0, 122, 255, 0.3);
        // #endif
    }

    .login-btn-text {
        font-size: 36rpx;
        color: #ffffff !important;
        font-weight: bold;
    }

    .footer {
        position: fixed;
        bottom: 60rpx;
        left: 0;
        right: 0;
        align-items: center;
        z-index: 2;
    }

    .version {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 15rpx;
    }

    .company {
        font-size: 24rpx;
        color: #333333;
    }
	.picker-modal {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 1000;
	}
	
	.modal-mask {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.5);
	}
	
	.modal-content {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #ffffff;
	    border-top-left-radius: 16rpx;
	    border-top-right-radius: 16rpx;
	    max-height: 1000rpx;
	}
	
	.modal-header {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    padding: 30rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}
	
	.modal-title {
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #333333;
	}
	
	.modal-close {
	    font-size: 28rpx;
	    color: #007aff;
	}
	
	.form-item-btn{
		flex: 1;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.form-item-input{
		flex: 1;
		flex-direction: row;
		background-color: #ffffff;
		padding: 10px;
	}
	
	.btn-primary {
		z-index: 999;
		font-size: 15px;
		border-radius: 10rpx;
		width: 100px;
		padding: 5px;
		background-color: #165DFF;
		line-height: 45rpx;
		color: #ffffff;
		.btn-text{
			color: #ffffff;
			padding: 5px 15px;
		}
	}
	.label-picker{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		width: 180rpx;
		padding: 20rpx;
	}
	
	.input-picker {
	    width: 70%;
	    height: 90rpx;
	    padding: 0 100rpx 0 30rpx;
	    background-color: #f5f5f5;
	    border-radius: 12rpx;
	    font-size: 30rpx;
	    color: #333333;
	    border: 1rpx solid transparent;
	}
	
	.eye-icon-picker {
	    position: absolute;
	    right: 230rpx;
	    top: 50%;
	    transform: translateY(-50%);
	    width: 40rpx;
	    height: 40rpx;
	}
	
</style>