shuhi-app/pages/login/login.vue

<template>
	<view class="login-container">
		<!-- Logo和标题区域 -->
		<view class="logo-section">
			<image class="logo" src="/static/img/logo.png" mode="aspectFit" />
		</view>

		<!-- 表单区域 -->
		<view class="form-section">
			<u--form :model="formData" ref="uForm">
				<u-form-item>
					<u-input :prefixIconStyle="prefixIconStyle" :placeholder-style="placeholderStyle"
						:custom-style="customStyle" v-model="formData.username" placeholder="请输入用户名"
						prefixIcon="account" />
				</u-form-item>

				<u-form-item>
					<u-input :prefixIconStyle="prefixIconStyle" :placeholder-style="placeholderStyle"
						:custom-style="customStyle" v-model="formData.password" type="password" placeholder="请输入密码"
						prefixIcon="lock" />
				</u-form-item>

				<u-form-item>
					<u-input :prefixIconStyle="prefixIconStyle" :placeholder-style="placeholderStyle"
						:custom-style="customStyle" v-model="formData.code" placeholder="请输入验证码" prefixIcon="chat">
						<template #suffix>
							<u-button custom-style="width:200rpx" color="#22ac38" size="small" @click="getVerifyCode"
								:disabled="isCountingDown">
								{{ countDownText }}
							</u-button>
						</template>
					</u-input>
				</u-form-item>
			</u--form>

			<u-button custom-style="margin-top:5%" type="primary" block @click="handleLogin" color="#22ac38"
				shape="circle">登录</u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const prefixIconStyle = "font-size:50rpx"
	const placeholderStyle = "font-size:32rpx"
	const customStyle = reactive({
		"font-size": '40rpx',
		height: '90rpx'
	})

	let {
		proxy
	} = getCurrentInstance()

	const formData = reactive({
		username: '',
		password: '',
		code: ''
	})

	const uForm = ref(null)

	const isCountingDown = ref(false)
	const countdown = ref(60)
	const countDownText = ref('获取验证码')

	const startCountDown = () => {
		isCountingDown.value = true
		countdown.value = 60
		countDownText.value = `${countdown.value}秒重发`

		const timer = setInterval(() => {
			countdown.value--
			countDownText.value = `${countdown.value}秒重发`

			if (countdown.value <= 0) {
				clearInterval(timer)
				isCountingDown.value = false
				countDownText.value = '重新发送'
			}
		}, 1000)
	}

	const getVerifyCode = () => {
		if (isCountingDown.value) return
		if (!formData.username) return uni.$u.toast('请输入用户名')
		if (!formData.password) return uni.$u.toast('请输入密码')

		let data = {
			username: formData.username,
			password: formData.password
		}
		// TODO: 调用发送验证码的API
		uni.showLoading({
			mask: true,
			title: "发送中..."
		})
		uni.$u.http.post('/app/appUser/sendMobileCode', data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '验证码发送成功,请注意查收',
					icon: 'none'
				})
				startCountDown()
			} else {
				uni.$u.toast(res.msg)
			}
		}).finally(() => uni.hideLoading())
	}

	const handleLogin = () => {
		// 实现登录逻辑
		if (!formData.username) return uni.$u.toast('请输入用户名')
		if (!formData.password) return uni.$u.toast('请输入密码')
		// if (!formData.code) return uni.$u.toast('请输入验证码')

		// TODO: 调用登录API /app/appUser/login
		uni.showLoading({
			mask: true,
			title: "登录中..."
		})
		// /actuator/debug/loginNotCode  ///app/appUser/login
		uni.$u.http.post('/actuator/debug/loginNotCode', formData).then(res => {
			if (res.code == 200) {
				uni.$u.toast('登录成功')
				uni.switchTab({
					url: "/pages/index/index"
				})
				console.log(res,'xxxxx')
				uni.setStorageSync('token', res.data)
                getUserInfo()
				uni.$u.ttsModule.speak('书嗨，不辜负每一个爱书的人')
			} else {
				uni.$u.toast(res.msg)
			}
		}).finally(() => uni.hideLoading())
	}

    //获取登陆人信息并存储本地 /app/appUser/getUserInfoById
    function getUserInfo(){
        uni.$u.http.get('/app/appUser/getUserInfoById').then(res => {
            if (res.code == 200) {
                uni.setStorageSync('userInfo', res.data)
            }
        })
    }

	//检测token是否可用
	function checkToken() {
		// /app/appUser/checkToken
		uni.showLoading({
			title: "检测登录状态..."
		})
		uni.$u.http.get('/app/appUser/checkToken').then(res => {
			if (res.code == 200) {
				uni.$u.toast('登录成功')
				uni.switchTab({
					url: "/pages/index/index"
				})
			} else {
				uni.$u.toast('请先登录')
			}
		}).finally(() => uni.hideLoading())
	}

	onLoad(() => {
		let token = uni.getStorageSync('token')
		if (token) {
			checkToken()
		}
	})
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss" scoped>
	.login-container {
		padding: 5% 60rpx;

		.logo-section {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.logo {
			width: 300rpx;
			height: 300rpx;
		}

		.form-section {
			margin-top: 40rpx;
		}
	}
</style>