Skip to content

Commit

Permalink
Feat/personal center validate (#1932)
Browse files Browse the repository at this point in the history 
Co-authored-by: JoJohw <v_hhwhhuang@tencent.com>
  • Loading branch information
@JoJohw
JoJohw and JoJohw authored Sep 13, 2024
1 parent dc604c2 commit 025c47d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 20 deletions.
8 changes: 4 additions & 4 deletions src/pages/src/http/personalCenterFiles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ export const getPersonalCenterUsers = (id: string) => http.get(`/api/v3/web/pers
/**
* 租户用户更新邮箱
*/
export const patchUsersEmail = (params: PatchUserEmailParams, config: Config) => http.put(`/api/v3/web/personal-center/tenant-users/${params.id}/email/`, params, config);
export const patchUsersEmail = (params: PatchUserEmailParams, config?: Config) => http.put(`/api/v3/web/personal-center/tenant-users/${params.id}/email/`, params, config);

/**
* 租户用户更新手机号
*/
export const patchUsersPhone = (params: PatchUserPhoneParams, config: Config) => http.put(`/api/v3/web/personal-center/tenant-users/${params.id}/phone/`, params, config);
export const patchUsersPhone = (params: PatchUserPhoneParams, config?: Config) => http.put(`/api/v3/web/personal-center/tenant-users/${params.id}/phone/`, params, config);

/**
* 租户用户更新头像
Expand Down Expand Up @@ -70,9 +70,9 @@ export const getPersonalCenterUserFeature = (id: string) => http.get(`/api/v3/we
/**
* 个人中心-租户修改手机号时，发送验证码
*/
export const postPersonalCenterUserPhoneCaptcha = (id: string, params: postPersonalCenterUserPhoneCaptchaParams) => http.post(`/api/v3/web/personal-center/tenant-users/${id}/phone-verification-code/`, params);
export const postPersonalCenterUserPhoneCaptcha = (id: string, params: postPersonalCenterUserPhoneCaptchaParams, config?: Config) => http.post(`/api/v3/web/personal-center/tenant-users/${id}/phone-verification-code/`, params, config);

/**
* 个人中心-租户修改邮箱时，发送验证码
*/
export const postPersonalCenterUserEmailCaptcha = (id: string, params: postPersonalCenterUserEmailCaptchaParams) => http.post(`/api/v3/web/personal-center/tenant-users/${id}/email-verification-code/ `, params);
export const postPersonalCenterUserEmailCaptcha = (id: string, params: postPersonalCenterUserEmailCaptchaParams, config?: Config) => http.post(`/api/v3/web/personal-center/tenant-users/${id}/email-verification-code/ `, params, config);
2 changes: 2 additions & 0 deletions src/pages/src/views/personal-center/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -718,6 +718,7 @@ const changeEmail = async () => {
const cancelEditEmail = () => {
currentUserInfo.value.is_inherited_email = isInheritedEmail.value;
currentUserInfo.value.custom_email = customEmail.value;
emailSelect.value = isInheritedEmail.value ? OpenDialogSelect.inherit : OpenDialogSelect.custom
isEditEmail.value = false;
isEditing();
};
Expand Down Expand Up @@ -770,6 +771,7 @@ const cancelEditPhone = () => {
currentUserInfo.value.is_inherited_phone = isInheritedPhone.value;
currentUserInfo.value.custom_phone = customPhone.value;
currentUserInfo.value.custom_phone_country_code = customPhoneCode.value;
phoneSelect.value = isInheritedPhone.value ? OpenDialogSelect.inherit :　OpenDialogSelect.custom
isEditPhone.value = false;
telError.value = false;
isEditing();
Expand Down
59 changes: 43 additions & 16 deletions src/pages/src/views/personal-center/verifyIdentityInfoDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@

<bk-form-item
class="mt-[32px] h-[40px]"
property="custom_phone"
v-if="curFormItemList.includes(formItemPropName.customPhone)">
<phoneInput
class="!w-[400px] phone-input"
Expand All @@ -44,6 +45,7 @@
:class="`!w-[400px] !h-[40px] ${captchaValidate ? 'captcha-input-validate' : ''}`"
:placeholder="t('请输入验证码')"
@blur="() => captchaValidate = false"
@input="() => captchaValidate = false"
v-model="verifyForm.captcha"
property="captcha" />
<bk-button
Expand All @@ -54,7 +56,12 @@
{{ verifyFormCaptchaBtn.disabled ? `${verifyFormCaptchaBtn.times}s` : t('获取验证码') }}
</bk-button>
</div>
<p v-if="captchaValidate" class="captcha-error-text">{{ t('验证码错误，请重试') }}</p>
<bk-overflow-title
v-if="captchaValidate"
class="captcha-error-text"
type="tips">
{{ captchaMessage }}
</bk-overflow-title>
</bk-form-item>
</bk-form>
</template>
Expand All @@ -74,7 +81,7 @@

<script setup lang="ts">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { InfoBox, Message } from 'bkui-vue';
import { InfoBox, Message, overflowTitle } from 'bkui-vue';
import type { Props as BkInfoBoxConfig } from 'bkui-vue/lib/info-box/info-box';
import { computed, defineModel, defineProps, PropType, reactive, ref, watch } from 'vue';
Expand Down Expand Up @@ -151,15 +158,22 @@ const verifyFormCaptchaBtn = reactive({
const captchaValidate = ref(false);
const captchaMessage = ref('');
const clearCaptchaValidate = () => {
captchaValidate.value = false;
captchaMessage.value = '';
};
// 发送验证码
const handleSendCaptcha = async () => {
if (props.currentVerifyConfig.type === OpenDialogType.email) {
const result = await verifyFormRef.value.validate().catch(() => false);
const result = validate.email.validator(verifyForm.email);
if (!result) return;
}
if (props.currentVerifyConfig.type === OpenDialogType.phone) {
if (telError.value) return;
}
clearCaptchaValidate();
verifyFormRef.value.clearValidate();
const captchaCoolingTime = 60;
const shutDownPointTime = 0;
const { closeTimePolling } = useCountDown({
Expand All @@ -170,18 +184,28 @@ const handleSendCaptcha = async () => {
const { userId } = props;
// 获取邮箱验证码
if (props.currentVerifyConfig.type === OpenDialogType.email) {
await postPersonalCenterUserEmailCaptcha(userId, {
email: verifyForm.email,
});
Message({ theme: 'success', message: t('发送成功') });
try {
await postPersonalCenterUserEmailCaptcha(userId, {
email: verifyForm.email,
}, { globalError: false });
Message({ theme: 'success', message: t('发送成功') });
} catch (err: any) {
captchaValidate.value = true;
captchaMessage.value = err.response.data?.error?.message;
}
}
// 获取手机验证码
if (props.currentVerifyConfig.type === OpenDialogType.phone) {
await postPersonalCenterUserPhoneCaptcha(userId, {
phone: verifyForm.custom_phone,
phone_country_code: verifyForm.custom_phone_country_code,
});
Message({ theme: 'success', message: t('发送成功') });
try {
await postPersonalCenterUserPhoneCaptcha(userId, {
phone: verifyForm.custom_phone,
phone_country_code: verifyForm.custom_phone_country_code,
}, { globalError: false });
Message({ theme: 'success', message: t('发送成功') });
} catch (err: any) {
captchaValidate.value = true;
captchaMessage.value = err.response.data?.error?.message;
}
}
})();
},
Expand All @@ -206,6 +230,7 @@ const verifyFormRef = ref(null);
const validate = useValidate();
const verifyFormRules = {
email: [validate.required, validate.email],
custom_phone: [validate.required],
captcha: [validate.required],
};
Expand All @@ -227,6 +252,7 @@ watch(isShow, (newShow) => {
const handleCloseVerifyDialog = () => {
isShow.value = false;
telError.value = false;
clearCaptchaValidate();
resetCustomForm();
};
Expand Down Expand Up @@ -256,8 +282,8 @@ const handleSubmitVerifyForm = async () => {
verification_code: verifyForm.captcha,
}, { globalError: false });
infoBoxConfig.title = t('邮箱验证成功');
} catch (err) {
captchaMessage.value = err.response.data?.errror?.message;
} catch (err: any) {
captchaMessage.value = err.response.data?.error?.message;
infoBoxConfig.type = fail;
captchaValidate.value = true;
}
Expand All @@ -272,8 +298,8 @@ const handleSubmitVerifyForm = async () => {
verification_code: verifyForm.captcha,
}, { globalError: false });
infoBoxConfig.title = t('手机号验证成功');
} catch (err) {
captchaMessage.value = err.response.data?.errror?.message;
} catch (err: any) {
captchaMessage.value = err.response.data?.error?.message;
infoBoxConfig.type = fail;
captchaValidate.value = true;
}
Expand Down Expand Up @@ -306,6 +332,7 @@ const handleSubmitVerifyForm = async () => {
}
.captcha-error-text {
width: 70%;
position: absolute;
margin: 2px 0 0;
font-size: 12px;
Expand Down

0 comments on commit 025c47d

Please sign in to comment.