jurong_circle_front_app/pages/login/login.vue

<template>
	<view class="login-container">
		<view class="login-title">
			<view class="title">
				用户登录
			</view>
			<view class="sub-title">
				欢迎回到炬融圈
			</view>
		</view>
		<view style="display: flex;justify-content: center;">
			<image src="../../static/login/login-img.png" mode="" class="login-img"></image>
		</view>
		<view class="login-form">
			<u-form :model="userLogin.userForm" ref="userLoginRef" :border-bottom="false" :error-type="['message']"
				label-width="0">
				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/user.png" prop="username">
					<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号" type="number" maxlength="11"
						placeholder-style="color: #737373;" />
				</u-form-item>
				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Lock.png" prop="password">
					<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码" maxlength="20"
						placeholder-style="color: #737373;" />
				</u-form-item>
				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Globe.png" prop="captcha">
					<u-input v-model="userLogin.userForm.captcha" placeholder="请输入验证码" maxlength="4"
						placeholder-style="color: #737373;" />
					<template v-slot:right>
						<image @click="loadCaptcha" class="captcha-img" :src="captcha" mode=""></image>
					</template>
				</u-form-item>
				<view class="reflash" @click="reflash">
					<image class="reflash-icon" src="/static/icon/Repeat.png" mode=""></image>
					刷新验证码
				</view>
				<view class="rember">
					<u-checkbox v-model="userLogin.userForm.is_rember">记住我</u-checkbox>
				</view>
				<view class="forget-pwd">忘记密码？</view>
				<u-button class="submit-btn" :ripple="true" shape="circle" type="primary" @click="submit">登录</u-button>
				<view class="register">
					<view class="register-text">没有账号？</view>
					<view class="register-link" @click="handleRegister">点击注册？
						<image class="register-link-icon" src="/static/icon/Chevron right.png" mode=""></image>
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app';
	import { captchaAPI } from '@/api/captcha.js';
	import { authAPI } from '../../api/auth';

	// 表单图标样式
	const inputIcon = {
		width: '32rpx',
		verticalAlign: 'middle'
	}

	// 登录表单
	const captcha = ref()
	const captchaId = ref()
	const userLoginRef = ref()
	const userLogin = reactive({
		userForm: {
			username: '',
			password: '',
			captcha: '',
			is_rember: false
		},
		ruls: {
			username: [
				{
					required: true,
					message: '请输入用户名或手机号',
					trigger: ['change']
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					message: '请输入正确的手机号格式',
					trigger: ['blur']
				}
			],
			password: [
				{
					required: true,
					message: '请输入密码',
					trigger: ['change']
				}
			],
			captcha: [{
				required: true,
				message: '请输入验证码',
				trigger: ['blur']
			},
			{
				min: 4,
				max: 4,
				message: '验证码长度为4位',
				trigger: 'blur'
			}],
		}
	})

	// 初始化绑定
	onReady(() => {
		userLoginRef.value.setRules(userLogin.ruls);
	});

	onMounted(() => {
		try {
			loadCaptcha()
			loadCache()
		} catch (err) {
			console.log("login Error === ", err);
		}
	})

	// 刷新
	const reflash = () => {
		// userLoginRef.value.resetFields()
		loadCaptcha()
	}

	// 请求验证码
	const loadCaptcha = () => {
		captchaAPI.generate().then(res => {
			captcha.value = res.data.image
			captchaId.value = res.data.captchaId
		})
	}

	const loadCache = () => {
		let is_rember = uni.getStorageSync("rember")
		if (is_rember) {
			userLogin.userForm.is_rember = true
			userLogin.userForm.username = is_rember.username
			userLogin.userForm.password = is_rember.password
		}
	}

	// 登录处理
	const submit = () => {
		userLoginRef.value.validate((valid : any) => {
			if (valid) {
				// 登录逻辑
				const loginData = {
					username: userLogin.userForm.username,
					password: userLogin.userForm.password,
					captchaId: captchaId.value,
					captchaText: userLogin.userForm.captcha
				}
				authAPI.login(loginData).then(response => {
					console.log('登录结果', response);
					uni.clearStorageSync()
					if (response.success) {
						// 激活用户
						uni.setStorageSync("token", response.token)
						if (userLogin.userForm.is_rember) {
							uni.setStorageSync("rember", {
								username: userLogin.userForm.username,
								password: userLogin.userForm.password,
							})
						}
						uni.setStorageSync("user", response.user)
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							success() {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/home/index'
									})
								}, 1000)
							}
						})
					} else if (response.token) {
						// 未激活用户
						uni.setStorageSync("token", response.token)
						if (userLogin.userForm.is_rember) {
							uni.setStorageSync("rember", {
								username: userLogin.userForm.username,
								password: userLogin.userForm.password,
							})
						}
						uni.setStorageSync("user", response.user)
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							success() {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/home/index'
									})
								}, 1000)
							}
						})
					}
				}).catch((err) => {
					setTimeout(() => {
						userLogin.userForm.captcha = ''
						loadCaptcha()
					}, 1000)
				})
			}
		});
	}

	// 注册
	const handleRegister = () => {
		uni.redirectTo({
			url: '/pages/register/register'
		})
	}
</script>

<style scoped lang="scss">
	.login-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #CAE5FF 0%, #FFFFFF 100%);

		.login-title {
			padding: 80rpx 0 0 0;

			.title {
				font-family: SF Pro;
				font-weight: 650;
				font-style: Expanded Semibold;
				font-size: 60rpx;
				leading-trim: NONE;
				line-height: 80rpx;
				letter-spacing: 0%;
				text-align: center;
				color: #7087FF;
			}

			.sub-title {
				font-family: SF Pro;
				font-weight: 700;
				font-style: Bold;
				font-size: 32rpx;
				leading-trim: NONE;
				line-height: 48rpx;
				letter-spacing: 0%;
				text-align: center;
				color: #FFFFFF;
			}

		}

		.login-img {
			max-width: 1000rpx;
			width: 100%;
		}

		.login-form {
			padding: 10rpx 32rpx;

			.captcha-img {
				width: 200rpx;
				height: 80rpx;
			}

			.reflash {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;


				// 文字
				font-family: Work Sans;
				font-weight: 400;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #3781EF;

				.reflash-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.forget-pwd {
				text-align: center;

				font-family: Work Sans;
				font-weight: 400;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				text-align: center;
				color: #3781EF;
				margin: 20rpx 0;
			}

			.submit-btn {
				width: 240rpx;
				height: 96rpx;

				// 文字
				font-family: SF Pro;
				font-weight: 650;
				font-style: Expanded Semibold;
				font-size: 40rpx;
				leading-trim: NONE;
				line-height: 46rpx;
				letter-spacing: 0%;
				text-align: center;
			}

			.register {
				margin: 40rpx 0 80rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				// 文字
				font-family: Work Sans;
				font-weight: 400;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				text-align: center;


				.register-text {
					color: #737373;
				}

				.register-link {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #3781EF;

					.register-link-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

	}
</style>