staff/pages/login/index.vue

<template>
	<view class="li-login-page">
		<view class=" li-flex li-flex-col li-justify-center li-items-center  li-pt-270">
			<image class="li-w-130 li-h-130 li-rd-40" src="/static/logo.png" mode=""></image>
			<text class="li-text-38 li-text-#000000 li-mt-32 li-font-550">物业综合管理平台</text>
		</view>
		<view class="li-w-80% li-mx-auto li-mt-100">
			<!-- 账号 -->
			<wd-input :maxlength="11" placeholder="请输入账号" type='number' v-model="form.username" prefix-icon="user"
				placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
				no-border />
			<!-- 密码 -->
			<view class="li-mt-28">
				<wd-input :maxlength="11" placeholder="请输入密码" v-model="form.password" prefix-icon="lock-off"
					placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
					no-border show-password />
			</view>
			<!-- 验证码 -->
			<view class="li-flex li-items-center li-justify-between li-mt-28">
				<view class="li-w-420">
					<wd-input :maxlength="11" placeholder="请输入验证码" type='number' v-model="form.code"
						prefix-icon="secured" placeholderStyle="font-size:30rpx" :focus-when-clear="false"
						clear-trigger="focus" clearable no-border />
				</view>
				<view class="li-bg-white li-w-150 li-h-68" @click="getCode()">
					<image class="li-w-150 li-h-68" :src="captchaData.image" mode=""></image>
				</view>
			</view>
		</view>
		<!-- button -->
		<view class="li-w-85% li-mx-auto li-mt-90">
			<wd-button @click="loginHandle" block custom-class="custom-shadow">登录</wd-button>
		</view>
		<!--  -->
		<view class="li-flex li-items-center li-justify-center li-w-90% li-mx-auto li-text-#a5a5a5 li-text-24 li-mt-32">
			<wd-checkbox checked-color="#2EA1EA" v-model="check" />
			阅读并同意
			<text class="li-text-#2EA1EA li-mx-10">
				《用户协议》
			</text>
			和
			<text class="li-text-#2EA1EA li-mx-10">
				《隐私政策》
			</text>
		</view>
		<zero-loading type="wobble" v-if="loading"></zero-loading>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { captcha, login } from '@/api/login';
	import { onLoad, onShow, Uni } from '@dcloudio/uni-app';
	import { md5 } from '@/utils/common';
	declare const uni : Uni

	interface formItem {
		username : string
		password : string
		code : string,
		uuid : string
	}

	interface CaptchaData {
		uuid : string
		image : string
	}
	const loading = ref<boolean>(false)

	const form = ref<formItem>({
		username: '',
		password: '',
		code: "",
		uuid: ""
	})

	let captchaData = ref<CaptchaData>({
		uuid: '',
		image: ''
	})

	const check = ref<boolean>(true)

	const loginHandle = async () => {
		if (!check.value) {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意《用户协议》和《隐私政策》',
				duration: 2000
			})
			return;
		}
		if (!form.value.username) {
			uni.showToast({
				icon: 'none',
				title: '登录账号不能为空',
				duration: 2000
			})
			return;
		}
		if (!form.value.password) {
			uni.showToast({
				icon: 'none',
				title: '登录密码不能为空',
				duration: 2000
			})
			return;
		}
		if (!form.value.code) {
			uni.showToast({
				icon: 'none',
				title: '验证码不能为空',
				duration: 2000
			})
			return;
		}
		// 请求数据处理
		loading.value = true
		form.value.uuid = captchaData.value.uuid
		form.value.password = md5(form.value.password)
		const res = await login(form.value)
		if (res.code != 200) {
			uni.showToast({
				icon: 'none',
				title: res.msg,
				duration: 3000
			})
			form.value.password = ""
			form.value.code = ""
			loading.value = false
			getCode()
			return;
		}
		// 登录成功，保存token，跳转首页
		uni.$store.commit("setToken", res.data.token)
		setTimeout(() => {
			loading.value = false
			// 跳转至首页
			uni.switchTab({
				url: '/pages/index/index'
			})
		}, 300)

	}

	onShow(() => {
		getCode()
	});

	const getCode = async () => {
		const res = await captcha({})
		captchaData.value = res.data as CaptchaData
	}
</script>

<style lang="scss">
	.li-login-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				rgba(197, 224, 253, 0.7) 0%,
				rgba(197, 224, 253, 0.5) 20%,
				rgba(197, 224, 253, 0.1) 40%,
				rgba(242, 243, 247, 1.0) 70%,
				rgba(197, 224, 253, 0.4) 90%,
				rgba(197, 224, 253, 0.5) 100%);
		background-attachment: fixed;
	}

	::v-deep .wd-input__body {
		height: 85rpx;

	}

	::v-deep .wd-input__value {
		height: 85rpx;
	}

	::v-deep .wd-input {
		border-radius: 20rpx !important;

	}

	::v-deep .wd-input__icon {
		font-size: 42rpx !important;
		font-weight: 500 !important;
		color: #232323 !important;
		margin-right: 30rpx !important;
		margin-left: 30rpx !important;
	}

	::v-deep .wd-input__clear {
		margin-right: 20rpx !important;
	}

	::v-deep .wd-icon-eye-close {
		font-size: 28rpx !important;
	}

	.custom-shadow {
		height: 85rpx !important;
		font-size: 32rpx !important;
		box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
		background-color: #2EA1EA !important;
	}
</style>