job-master/src/views/login/login.vue

<template>
	<div class="login-box">
		<div class="login-content">
			<h2 class="title">菊城人才市场招聘后台管理系统</h2>
			<div class="sub-title">欢迎使用</div>
			<a-form>
				<a-space direction="vertical">
					<a-row :gutter="10">
						<a-col :span="24">
							<a-form-item>
								<a-input size="large" placeholder="账号" v-model:value="createForm.mobile">
									<template #prefix>
										<user-outlined type="user" />
									</template>
								</a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="10">
						<a-col :span="24">
							<a-form-item>
								<a-input size="large" type="password" placeholder="密码"
									v-model:value="createForm.password">
									<template #prefix>
										<LockOutlined />
									</template>
									<template #suffix>
										<a-tooltip title="Extra information">
											<EyeInvisibleOutlined style="color: rgba(0, 0, 0, 0.25)" />
										</a-tooltip>
									</template>
								</a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="10">
						<a-col span="12">
							<a-form-item>
								<a-input v-model:value="captcha" placeholder="图形验证码" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item>
								<image-container :imgObj="{src: codeImage,width: '100%',height: '40px', mode: 'fill'}"
									@click="getCaptcha"></image-container>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="10">
						<a-col span="16">
							<a-form-item>
								<a-input v-model:value="createForm.sms_code" placeholder="短信验证码" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="8">
							<a-form-item>
								<a-button  type="primary" block size="large" @click="sendCode"
									:disabled="state.disabled">
									{{ state.codeTxt }}</a-button>
							</a-form-item>
						</a-col>
					</a-row>
			<!-- 		<a-row type="flex" justify="end">
						<a-col :span="6">
							<a-form-item>
								<div>忘记密码？</div>
							</a-form-item>
						</a-col>
					</a-row> -->
					<a-row>
						<a-col :span="24">
							<a-button size="large"  @click="toLogin" style="width: 100%;" type="primary">登录</a-button>
						</a-col>
					</a-row>
				</a-space>

			</a-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onBeforeUnmount } from 'vue';
	import { Login, PostSmsSend, GetCaptcha } from '@/apis/models';
	import { useAsRouter } from '@/hooks/useAsRouter'
	import { UserOutlined, InfoCircleOutlined, LockOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { message } = useCommon();
	const { routerTo } = useAsRouter();
	let capt_id = ref<String>('')
	let codeImage = ref<String>('')
	let captcha = ref<String>('')


	const createForm = ref<Object>({
		mobile: '',
		password: '',
		sms_code: ''
	})

	interface State {
		count : number;
		sending : boolean;
		disabled : boolean;
	}
	const state = ref<State>({
		count: 60,
		codeTxt: '获取验证码',
		disabled: false,
	});

	let timer = ref<any>(null)
	const sendCode = () => {
		if (!createForm.value.mobile) {
			message.warn('请输入手机号')
			return false;
		}
		PostSmsSend({ mobile: createForm.value.mobile, captcha: captcha.value, capt_id: capt_id.value }).then(res => {
			message.success('发送验证码成功，验证码有效期为一分钟');
			timer.value = setInterval(function () {
				if (state.value.count > 1) {
					state.value.count = state.value.count - 1;
					state.value.codeTxt = '剩余' + (state.value.count - 1) + '秒';
					state.value.disabled = true
				} else {
					clearInterval(timer.value);
					state.value.count = 60;
					state.value.codeTxt = '获取验证码';
					state.value.disabled = false
				};
			}, 1000)
		})
	};

	onBeforeUnmount(() => {
		clearInterval(timer.value);
	})
	const toLogin = () => {
		createForm.value.sms_code = Number(createForm.value.sms_code)
		if (!createForm.value.mobile) {
			message.warning('请输入登录账号');
			return false;
		}
		if (!createForm.value.password) {
			message.warning('请输入密码');
			return false;
		}
		Login(createForm.value).then(res => {
			sessionStorage.setItem('token', res.data.jwttoken.accesstoken);
			routerTo('/home');
			createForm.value = {
				mobile: '',
				password: ''
			}
		})
		// sessionStorage.setItem('token', '1321');
		// routerTo('/home');
	}


	const getCaptcha = () => {
		capt_id.value = ''
		GetCaptcha().then(res => {
			capt_id.value = res.data.capt_id;
			codeImage.value = res.data.img;
		})
	}

	onMounted(() => {
		getCaptcha()
	})
</script>

<style lang="less">
	@import 'login.less';
</style>