<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" width="500px" :title="title" :showCancelBtn="false" :showOkBtn="false">
|
<a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
|
<a-form-item name="phone">
|
<a-input size="large" v-model:value="formState.phone" placeholder="请输入手机号" />
|
</a-form-item>
|
<a-form-item name="smscode">
|
<CountdownInput size="large" v-model:value="formState.smscode" placeholder="输入6位验证码" :sendCodeApi="sendCodeApi" />
|
</a-form-item>
|
<a-form-item>
|
<a-button size="large" type="primary" block @click="updatePhone">
|
确认
|
</a-button>
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
|
<script lang="ts" setup name="user-replace-phone-modal">
|
import BasicModal from "/@/components/Modal/src/BasicModal.vue";
|
import { CountdownInput } from '/@/components/CountDown';
|
import { useUserStore } from "/@/store/modules/user";
|
import { useMessage } from "/@/hooks/web/useMessage";
|
import { defineEmits, ref, reactive, toRaw } from "vue";
|
import { useModalInner } from "/@/components/Modal";
|
import { getCaptcha } from "/@/api/sys/user";
|
import { SmsEnum } from "/@/views/sys/login/useLogin";
|
import { Rule } from "/@/components/Form";
|
import { rules } from "/@/utils/helper/validator";
|
import { Form } from "ant-design-vue";
|
import { updateMobile } from "../UserSetting.api";
|
import { duplicateCheck } from "/@/views/system/user/user.api";
|
|
const userStore = useUserStore();
|
const { createMessage } = useMessage();
|
const formState = reactive<Record<string, any>>({
|
phone:'',
|
smscode:''
|
});
|
const formRef = ref();
|
const userData = ref<any>({})
|
|
const validatorRules: Record<string, Rule[]> = {
|
phone: [{...rules.duplicateCheckRule("sys_user",'phone',formState,{ label:'手机号' })[0]},{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' }],
|
smscode: [{ required: true,message:'请输入验证码' }],
|
};
|
const useForm = Form.useForm;
|
const title = ref<string>('');
|
const emit = defineEmits(['register','success']);
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
formRef.value.resetFields();
|
formRef.value.clearValidate();
|
setModalProps({ confirmLoading: false });
|
title.value = '修改手机号';
|
//赋值
|
data.record.smscode = '';
|
Object.assign(formState, data.record);
|
userData.value = data.record;
|
});
|
|
/**
|
* 倒计时执行前的函数
|
*/
|
function sendCodeApi() {
|
return getCaptcha({ mobile: formState.phone, smsmode: SmsEnum.REGISTER });
|
}
|
|
/**
|
* 更新手机号
|
*/
|
async function updatePhone() {
|
await formRef.value.validateFields();
|
updateMobile(formState).then((res) =>{
|
if(res.success){
|
createMessage.success("修改手机号成功")
|
emit("success")
|
closeModal();
|
}else{
|
createMessage.warning(res.message)
|
}
|
})
|
}
|
</script>
|
