提交 | 用户 | age
|
ec9478
|
1 |
<template> |
V |
2 |
<Form class="p-4" :model="formData" :rules="getFormRules" ref="formRef"> |
|
3 |
<FormItem name="account" class="enter-x"> |
|
4 |
<Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" /> |
|
5 |
</FormItem> |
|
6 |
<FormItem name="mobile" class="enter-x"> |
|
7 |
<Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" /> |
|
8 |
</FormItem> |
|
9 |
<FormItem name="sms" class="enter-x"> |
|
10 |
<CountdownInput |
|
11 |
size="large" |
|
12 |
v-model:value="formData.sms" |
|
13 |
:placeholder="t('sys.login.smsCode')" |
|
14 |
/> |
|
15 |
</FormItem> |
|
16 |
<FormItem name="password" class="enter-x"> |
|
17 |
<StrengthMeter |
|
18 |
size="large" |
|
19 |
v-model:value="formData.password" |
|
20 |
:placeholder="t('sys.login.password')" |
|
21 |
/> |
|
22 |
</FormItem> |
|
23 |
<FormItem name="confirmPassword" class="enter-x"> |
|
24 |
<InputPassword |
|
25 |
size="large" |
|
26 |
visibilityToggle |
|
27 |
v-model:value="formData.confirmPassword" |
|
28 |
:placeholder="t('sys.login.confirmPassword')" |
|
29 |
/> |
|
30 |
</FormItem> |
|
31 |
|
|
32 |
<FormItem class="enter-x" name="policy"> |
|
33 |
<!-- No logic, you need to deal with it yourself --> |
|
34 |
<Checkbox v-model:checked="formData.policy" size="small"> |
|
35 |
{{ t('sys.login.policy') }} |
|
36 |
</Checkbox> |
|
37 |
</FormItem> |
|
38 |
|
|
39 |
<Button |
|
40 |
type="primary" |
|
41 |
size="large" |
|
42 |
block |
|
43 |
@click="handleReset" |
|
44 |
:loading="loading" |
|
45 |
class="enter-x" |
|
46 |
> |
|
47 |
{{ t('sys.login.registerButton') }} |
|
48 |
</Button> |
|
49 |
<Button size="large" block class="mt-4 enter-x" @click="handleBackLogin"> |
|
50 |
{{ t('sys.login.backSignIn') }} |
|
51 |
</Button> |
|
52 |
</Form> |
|
53 |
</template> |
|
54 |
<script lang="ts"> |
|
55 |
import { defineComponent, reactive, ref } from 'vue'; |
|
56 |
|
|
57 |
import { Form, Input, Button, Divider, Checkbox } from 'ant-design-vue'; |
|
58 |
import { StrengthMeter } from '/@/components/StrengthMeter'; |
|
59 |
import { CountdownInput } from '/@/components/CountDown'; |
|
60 |
|
|
61 |
import { useI18n } from '/@/hooks/web/useI18n'; |
|
62 |
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'; |
|
63 |
|
|
64 |
export default defineComponent({ |
|
65 |
name: 'RegisterPasswordForm', |
|
66 |
components: { |
|
67 |
Button, |
|
68 |
Form, |
|
69 |
FormItem: Form.Item, |
|
70 |
Input, |
|
71 |
Divider, |
|
72 |
InputPassword: Input.Password, |
|
73 |
Checkbox, |
|
74 |
StrengthMeter, |
|
75 |
CountdownInput, |
|
76 |
}, |
|
77 |
setup() { |
|
78 |
const { t } = useI18n(); |
|
79 |
const { setLoginState } = useLoginState(); |
|
80 |
|
|
81 |
const formRef = ref<any>(null); |
|
82 |
const loading = ref(false); |
|
83 |
|
|
84 |
const formData = reactive({ |
|
85 |
account: '', |
|
86 |
password: '', |
|
87 |
confirmPassword: '', |
|
88 |
mobile: '', |
|
89 |
sms: '', |
|
90 |
policy: false, |
|
91 |
}); |
|
92 |
|
|
93 |
const { getFormRules } = useFormRules(formData); |
|
94 |
const { validForm } = useFormValid(formRef); |
|
95 |
|
|
96 |
async function handleReset() { |
|
97 |
const data = await validForm(); |
|
98 |
if (!data) return; |
|
99 |
console.log(data); |
|
100 |
} |
|
101 |
|
|
102 |
function handleBackLogin() { |
|
103 |
setLoginState(LoginStateEnum.LOGIN); |
|
104 |
} |
|
105 |
|
|
106 |
return { |
|
107 |
t, |
|
108 |
formRef, |
|
109 |
formData, |
|
110 |
getFormRules, |
|
111 |
handleReset, |
|
112 |
loading, |
|
113 |
handleBackLogin, |
|
114 |
}; |
|
115 |
}, |
|
116 |
}); |
|
117 |
</script> |