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