perf: get verifycode button

This commit is contained in:
zchengo
2022-12-02 22:00:23 +08:00
parent 4d04c7bb90
commit a58ccd18a8
3 changed files with 34 additions and 4 deletions
+14 -2
View File
@@ -70,7 +70,8 @@
</a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" />
<a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :disabled="disabled">
<a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
:disabled="disabled">
{{ buttonText }}</a-button>
</a-form-item>
<a-form-item name="newEmail" :rules="[{ required: true, message: '请输入新邮箱!' }]">
@@ -87,7 +88,8 @@
</a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" />
<a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :disabled="disabled">
<a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
:disabled="disabled">
{{ buttonText }}</a-button>
</a-form-item>
</a-form>
@@ -176,6 +178,7 @@ export default {
const visible = ref(false)
const visibleLogo = ref(false)
const delUserVisible = ref(false)
const loading = ref(false)
const disabled = ref(false)
const buttonText = ref('获取验证码')
@@ -225,15 +228,22 @@ export default {
const onGetCode = () => {
if (user.email == '') {
message.warn('邮箱不能为空')
return
}
loading.value = true
let param = {
email: user.email
}
getVerifyCode(param).then((res) => {
if (res.data.code == 0) {
loading.value = false
disabled.value = true
buttonText.value = '验证码已发送'
}
if (res.data.code == 10004) {
loading.value = false
message.error('验证码发送失败')
}
})
}
@@ -265,6 +275,7 @@ export default {
// 点击取消按钮
const onCancel = () => {
disabled.value = false
modalFormRef.value.resetFields()
visible.value = false
delUserVisible.value = false
@@ -278,6 +289,7 @@ export default {
visible,
visibleLogo,
delUserVisible,
loading,
disabled,
buttonText,
userInfo,
+10 -1
View File
@@ -5,7 +5,7 @@
</a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" />
<a-button @click="onGetCode" size="large" :disabled="disabled" style="width: 40%;float: right;">
<a-button @click="onGetCode" size="large" :disabled="disabled" :loading="loading" style="width: 40%;float: right;">
{{ buttonText }}</a-button>
</a-form-item>
<a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
@@ -39,6 +39,7 @@ export default {
password2: '',
});
const loading = ref(false)
const disabled = ref(false)
const buttonText = ref('获取验证码')
@@ -63,15 +64,22 @@ export default {
const onGetCode = () => {
if (formData.email == '') {
message.warn('邮箱不能为空')
return
}
loading.value = true
let param = {
email: formData.email
}
getVerifyCode(param).then((res) => {
if (res.data.code == 0) {
loading.value = false
disabled.value = true
buttonText.value = '验证码已发送'
}
if (res.data.code == 10004) {
loading.value = false
message.error('验证码发送失败')
}
})
}
@@ -82,6 +90,7 @@ export default {
return {
formData,
loading,
disabled,
buttonText,
onSubmit,
+10 -1
View File
@@ -6,7 +6,7 @@
</a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" />
<a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :disabled="disabled">
<a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
{{ buttonText }}</a-button>
</a-form-item>
<a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
@@ -40,6 +40,7 @@ export default {
password2: '',
});
const loading = ref(false)
const disabled = ref(false)
const buttonText = ref('获取验证码')
@@ -71,15 +72,22 @@ export default {
const onGetCode = () => {
if (formData.email == '') {
message.warn('邮箱不能为空')
return
}
loading.value = true
let param = {
email: formData.email
}
getVerifyCode(param).then((res) => {
if (res.data.code == 0) {
loading.value = false
disabled.value = true
buttonText.value = '验证码已发送'
}
if (res.data.code == 10004) {
loading.value = false
message.error('验证码发送失败')
}
})
}
@@ -90,6 +98,7 @@ export default {
return {
formData,
loading,
disabled,
buttonText,
onRegister,