166 lines
4.2 KiB
Vue
166 lines
4.2 KiB
Vue
<template>
|
|
<a-form
|
|
ref="formRef"
|
|
:show-label="false"
|
|
:show-require-mark="false"
|
|
size="large"
|
|
:model="formInline"
|
|
:rules="rules"
|
|
>
|
|
<a-form-item name="mobile">
|
|
<a-input v-model:value="formInline.mobile" placeholder="请输入手机号码">
|
|
<template #prefix>
|
|
<MobileOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="code">
|
|
<a-input
|
|
@keyup.enter="handleSubmit"
|
|
v-model:value.trim="formInline.code"
|
|
placeholder="验证码"
|
|
>
|
|
<template #prefix>
|
|
<SafetyCertificateOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
<template #suffix>
|
|
<a-button type="text" :disabled="isGetCode" @click="getCode">
|
|
{{ codeMsg }}<span v-if="isGetCode">s</span>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item :show-label="false">
|
|
<a-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
|
|
登录
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { message } from 'ant-design-vue';
|
|
import { ResultEnum } from '@/enums/httpEnum';
|
|
import { getInfoCaptcha } from '@/api/system/user';
|
|
import { PageEnum } from '@/enums/pageEnum';
|
|
import { MobileOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue';
|
|
const captchaImg = ref('');
|
|
// 动态加载滑块验证码组件
|
|
|
|
/**
|
|
* 定义表单接口
|
|
*/
|
|
interface FormState {
|
|
mobile: string;
|
|
code: string;
|
|
key: string;
|
|
}
|
|
|
|
/**
|
|
* 定义参数
|
|
*/
|
|
const formRef = ref();
|
|
const loading = ref(false);
|
|
const codeMsg: any = ref('获取验证码');
|
|
const isGetCode = ref(false);
|
|
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
|
|
|
|
/**
|
|
* 定义表单参数
|
|
*/
|
|
const formInline = reactive({
|
|
mobile: '',
|
|
code: '',
|
|
key: '',
|
|
});
|
|
|
|
/**
|
|
* 定义验证规则
|
|
*/
|
|
const rules = {
|
|
mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
|
|
code: { required: true, message: '请输入验证码', trigger: 'blur' },
|
|
};
|
|
|
|
/**
|
|
* 获取验证码
|
|
*/
|
|
function getCode() {
|
|
if (!formInline.mobile) {
|
|
formRef.value.validateFields('mobile');
|
|
return;
|
|
}
|
|
codeMsg.value = 60;
|
|
isGetCode.value = true;
|
|
let time = setInterval(() => {
|
|
codeMsg.value--;
|
|
if (codeMsg.value <= 0) {
|
|
clearInterval(time);
|
|
codeMsg.value = '获取验证码';
|
|
isGetCode.value = false;
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
/**
|
|
* 执行提交表单
|
|
*/
|
|
const userStore = useUserStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const handleSubmit = () => {
|
|
if (!formRef.value) return;
|
|
formRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
loading.value = true;
|
|
|
|
const params: FormState = {
|
|
mobile: formInline.mobile,
|
|
code: formInline.code,
|
|
key: formInline.key,
|
|
};
|
|
|
|
try {
|
|
const { code, msg } = await userStore.login(params);
|
|
if (code == ResultEnum.SUCCESS) {
|
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
|
message.success('登录成功，即将进入系统');
|
|
if (route.name === LOGIN_NAME) {
|
|
router.replace('/');
|
|
} else router.replace(toPath);
|
|
} else {
|
|
message.error(msg || '登录失败');
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
} else {
|
|
message({
|
|
message: '请填写完整信息',
|
|
type: 'error',
|
|
});
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.forget {
|
|
margin-bottom: 16px;
|
|
margin-top: -10px;
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
input:-webkit-autofill,
|
|
textarea:-webkit-autofill,
|
|
select:-webkit-autofill {
|
|
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
background-color: transparent !important;
|
|
background-image: none;
|
|
transition: background-color 50000s ease-in-out 0s;
|
|
}
|
|
</style>
|