You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.2 KiB
76 lines
2.2 KiB
<template>
|
|
<div class="container">
|
|
<div class="box">
|
|
<h1 class="title">404</h1>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { proxy } = getCurrentInstance();
|
|
const store = useStore();
|
|
|
|
const refsForm = ref(null);
|
|
const loading = ref(false);
|
|
const form = reactive({
|
|
phone: '',
|
|
password: '',
|
|
verifyCode: '',
|
|
});
|
|
const lastTime = computed(() => store.state.local.lastSendMessageTime);
|
|
const waitTime = ref(60);
|
|
const sendStep = ref(60);
|
|
const rules = reactive({
|
|
phone: [{ required: true, message: '请输入手机号码' }],
|
|
password: [{ required: true, message: '请输入登录密码' }],
|
|
verifyCode: [{ required: true, message: '请输入验证码' }],
|
|
});
|
|
|
|
waitTime.value = Math.max(0, unref(sendStep) - Math.ceil((new Date().getTime() - unref(lastTime)) / 1000));
|
|
setInterval(() => {
|
|
waitTime.value = Math.max(0, unref(sendStep) - Math.ceil((new Date().getTime() - unref(lastTime)) / 1000));
|
|
}, 1000);
|
|
|
|
const handleSms = async () => {
|
|
if (form.phone) {
|
|
loading.value = true;
|
|
await store.dispatch('auth/sms', { phone: form.phone, type: 1 });
|
|
loading.value = false;
|
|
} else {
|
|
proxy.$message.warning('请输入手机号码');
|
|
}
|
|
};
|
|
const handleLogin = async () => {
|
|
loading.value = true;
|
|
try {
|
|
await unref(refsForm).validate();
|
|
await store.dispatch('auth/login', form);
|
|
} catch (e) {
|
|
console.info('取消登录', e);
|
|
}
|
|
loading.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000 url('~/global/login-bgp.png') center center / 100% 100% no-repeat;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: @color-white;
|
|
.box {
|
|
width: 420px;
|
|
padding: 30px;
|
|
background: #1a2229;
|
|
border-radius: 10px;
|
|
.title {
|
|
font-size: 48px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|