136 lines
4.0 KiB
Vue
136 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<div v-loading="loading_login" class="card" style="margin-top: 10px">
|
|
<NGradientText f-c-c size="18" style="padding: 10px" type="warning">登录账号</NGradientText>
|
|
<div class="card-line"></div>
|
|
<NForm
|
|
ref="formRef"
|
|
:model="fromdata"
|
|
:rules="rules"
|
|
label-align="right"
|
|
label-placement="left"
|
|
label-width="auto"
|
|
style="padding: 24px 10px 10px">
|
|
<NFormItem label="账号" path="userName">
|
|
<NInput v-model:value="fromdata.userName" placeholder="请输入手机号/车牌号" />
|
|
</NFormItem>
|
|
<NFormItem label="密码" path="passWold">
|
|
<NInput v-model:value="fromdata.passWold" placeholder="请输入密码" type="password" />
|
|
</NFormItem>
|
|
<NFormItem label="验证码" path="captcha">
|
|
<div style="display: flex; width: 100%">
|
|
<NInput
|
|
v-model:value="fromdata.captcha"
|
|
placeholder="请输入验证码"
|
|
style="flex-grow: 1; border-bottom-right-radius: 0; border-top-right-radius: 0" />
|
|
<img
|
|
:src="cpaimg"
|
|
b-r
|
|
height="34"
|
|
style="border-bottom-right-radius: 3px; border-top-right-radius: 3px"
|
|
width="85"
|
|
@click="captchas" />
|
|
</div>
|
|
</NFormItem>
|
|
<NFormItem label=" ">
|
|
<NCheckbox v-model:checked="userStore.userDataRemberData.renb">记住我</NCheckbox>
|
|
</NFormItem>
|
|
</NForm>
|
|
<div f-c-c>
|
|
<NText style="padding-right: 5px">我还没有账号</NText>
|
|
<RouterLink to="/user/register">前往注册</RouterLink>
|
|
</div>
|
|
<div class="card-line" style="margin-top: 24px"></div>
|
|
<div style="padding: 10px">
|
|
<NButton secondary strong style="width: 100%" type="info" @click="regis">登录</NButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { type FormInst, type FormItemRule } from 'naive-ui';
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import message from '@/utils/message.ts';
|
|
import { captcha, login } from '@/apis/auth';
|
|
import { UserStore } from '@/plugins';
|
|
import UseApiLoading from '@/utils/UseApiLoading.ts';
|
|
|
|
const formRef = ref<FormInst | null>(null);
|
|
const cpaimg = ref('');
|
|
|
|
const userStore = UserStore();
|
|
|
|
const fromdata = reactive({
|
|
passWold: '',
|
|
userName: '',
|
|
captcha: '',
|
|
uuid: '',
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (userStore.userDataRemberData.renb) {
|
|
fromdata.userName = userStore.userDataRemberData.user;
|
|
fromdata.passWold = userStore.userDataRemberData.pass;
|
|
}
|
|
captchas();
|
|
});
|
|
|
|
const [[loading_login], logins] = UseApiLoading(login);
|
|
|
|
const regis = () => {
|
|
formRef.value?.validate((errors: any) => {
|
|
if (!errors) {
|
|
logins(fromdata)
|
|
.then((a) => {
|
|
userStore.ishaslogin = true;
|
|
userStore.token = a.json().Data;
|
|
if (userStore.userDataRemberData.renb) {
|
|
userStore.userDataRemberData.user = fromdata.userName;
|
|
userStore.userDataRemberData.pass = fromdata.passWold;
|
|
}
|
|
window.location.replace('/');
|
|
})
|
|
.catch(() => {
|
|
captchas();
|
|
fromdata.captcha = '';
|
|
});
|
|
} else {
|
|
message.error('请确认 填写信息是否正确');
|
|
}
|
|
});
|
|
};
|
|
const captchas = () => {
|
|
captcha().then((a) => {
|
|
fromdata.uuid = a.json().Data.uuid;
|
|
cpaimg.value = a.json().Data.captcha;
|
|
});
|
|
};
|
|
|
|
const rules = {
|
|
userName: {
|
|
key: 'userName',
|
|
required: true,
|
|
message: '请输入用户名',
|
|
trigger: ['input'],
|
|
},
|
|
passWold: {
|
|
key: 'passWold',
|
|
required: true,
|
|
message: '请输入密码',
|
|
trigger: ['input'],
|
|
},
|
|
captcha: {
|
|
key: 'captcha',
|
|
required: true,
|
|
message: '验证码格式不正确 4位数字',
|
|
trigger: ['input'],
|
|
validator(rule: FormItemRule, value: string) {
|
|
const a = RegExp('^\\d{4}$').test(value);
|
|
console.log(a);
|
|
return a;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style>
|