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>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]"> <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" /> <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> {{ buttonText }}</a-button>
</a-form-item> </a-form-item>
<a-form-item name="newEmail" :rules="[{ required: true, message: '请输入新邮箱!' }]"> <a-form-item name="newEmail" :rules="[{ required: true, message: '请输入新邮箱!' }]">
@@ -87,7 +88,8 @@
</a-form-item> </a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]"> <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" /> <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> {{ buttonText }}</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
@@ -176,6 +178,7 @@ export default {
const visible = ref(false) const visible = ref(false)
const visibleLogo = ref(false) const visibleLogo = ref(false)
const delUserVisible = ref(false) const delUserVisible = ref(false)
const loading = ref(false)
const disabled = ref(false) const disabled = ref(false)
const buttonText = ref('获取验证码') const buttonText = ref('获取验证码')
@@ -225,15 +228,22 @@ export default {
const onGetCode = () => { const onGetCode = () => {
if (user.email == '') { if (user.email == '') {
message.warn('邮箱不能为空') message.warn('邮箱不能为空')
return
} }
loading.value = true
let param = { let param = {
email: user.email email: user.email
} }
getVerifyCode(param).then((res) => { getVerifyCode(param).then((res) => {
if (res.data.code == 0) { if (res.data.code == 0) {
loading.value = false
disabled.value = true disabled.value = true
buttonText.value = '验证码已发送' buttonText.value = '验证码已发送'
} }
if (res.data.code == 10004) {
loading.value = false
message.error('验证码发送失败')
}
}) })
} }
@@ -265,6 +275,7 @@ export default {
// 点击取消按钮 // 点击取消按钮
const onCancel = () => { const onCancel = () => {
disabled.value = false
modalFormRef.value.resetFields() modalFormRef.value.resetFields()
visible.value = false visible.value = false
delUserVisible.value = false delUserVisible.value = false
@@ -278,6 +289,7 @@ export default {
visible, visible,
visibleLogo, visibleLogo,
delUserVisible, delUserVisible,
loading,
disabled, disabled,
buttonText, buttonText,
userInfo, userInfo,
+10 -1
View File
@@ -5,7 +5,7 @@
</a-form-item> </a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]"> <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" /> <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> {{ buttonText }}</a-button>
</a-form-item> </a-form-item>
<a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]"> <a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
@@ -39,6 +39,7 @@ export default {
password2: '', password2: '',
}); });
const loading = ref(false)
const disabled = ref(false) const disabled = ref(false)
const buttonText = ref('获取验证码') const buttonText = ref('获取验证码')
@@ -63,15 +64,22 @@ export default {
const onGetCode = () => { const onGetCode = () => {
if (formData.email == '') { if (formData.email == '') {
message.warn('邮箱不能为空') message.warn('邮箱不能为空')
return
} }
loading.value = true
let param = { let param = {
email: formData.email email: formData.email
} }
getVerifyCode(param).then((res) => { getVerifyCode(param).then((res) => {
if (res.data.code == 0) { if (res.data.code == 0) {
loading.value = false
disabled.value = true disabled.value = true
buttonText.value = '验证码已发送' buttonText.value = '验证码已发送'
} }
if (res.data.code == 10004) {
loading.value = false
message.error('验证码发送失败')
}
}) })
} }
@@ -82,6 +90,7 @@ export default {
return { return {
formData, formData,
loading,
disabled, disabled,
buttonText, buttonText,
onSubmit, onSubmit,
+10 -1
View File
@@ -6,7 +6,7 @@
</a-form-item> </a-form-item>
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]"> <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
<a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" /> <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> {{ buttonText }}</a-button>
</a-form-item> </a-form-item>
<a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]"> <a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
@@ -40,6 +40,7 @@ export default {
password2: '', password2: '',
}); });
const loading = ref(false)
const disabled = ref(false) const disabled = ref(false)
const buttonText = ref('获取验证码') const buttonText = ref('获取验证码')
@@ -71,15 +72,22 @@ export default {
const onGetCode = () => { const onGetCode = () => {
if (formData.email == '') { if (formData.email == '') {
message.warn('邮箱不能为空') message.warn('邮箱不能为空')
return
} }
loading.value = true
let param = { let param = {
email: formData.email email: formData.email
} }
getVerifyCode(param).then((res) => { getVerifyCode(param).then((res) => {
if (res.data.code == 0) { if (res.data.code == 0) {
loading.value = false
disabled.value = true disabled.value = true
buttonText.value = '验证码已发送' buttonText.value = '验证码已发送'
} }
if (res.data.code == 10004) {
loading.value = false
message.error('验证码发送失败')
}
}) })
} }
@@ -90,6 +98,7 @@ export default {
return { return {
formData, formData,
loading,
disabled, disabled,
buttonText, buttonText,
onRegister, onRegister,