1
This commit is contained in:
parent
9e6da05991
commit
d06fb9a9de
@ -1,7 +1,15 @@
|
|||||||
// 登陆相关接口
|
// 登陆相关接口
|
||||||
import request from '@/utils/index'
|
import request from '@/utils/index'
|
||||||
|
import { SmsType } from '@/constants/sms'
|
||||||
|
|
||||||
|
// 获取短信验证码
|
||||||
|
export const sendSMSCode = (phone: string, type: SmsType) => {
|
||||||
|
return request.post('/v1/auth/sendSMSCode', {
|
||||||
|
phone,
|
||||||
|
type,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 轮播接口
|
|
||||||
export const getBannerList = () => request.get('/v1/home/home_banners')
|
export const getBannerList = () => request.get('/v1/home/home_banners')
|
||||||
// GPU说明列表
|
// GPU说明列表
|
||||||
export const getGpuList = () => request.get('/v1/home/home_products')
|
export const getGpuList = () => request.get('/v1/home/home_products')
|
||||||
|
|||||||
5
src/constants/sms.ts
Normal file
5
src/constants/sms.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export enum SmsType {
|
||||||
|
REGISTER = 'register',
|
||||||
|
LOGIN = 'login',
|
||||||
|
RESET_PASSWORD = 'restp', // 注意:按你后端实际字段来,如果是 restp 就用 restp
|
||||||
|
}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
@finish-failed="onFinishFailed" >
|
@finish-failed="onFinishFailed" >
|
||||||
<div class="login-content-title">Fast亼算云账号注册</div>
|
<div class="login-content-title">Fast亼算云账号注册</div>
|
||||||
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号!' }]">
|
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号!' }]">
|
||||||
<SmsCodeInput v-model:value="formState.phone" />
|
<SmsCodeInput v-model:value="formState.phone" @send="handleSendCode" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<!-- 手动控制密码字段的错误状态 -->
|
<!-- 手动控制密码字段的错误状态 -->
|
||||||
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
|
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
|
||||||
@ -35,15 +35,22 @@
|
|||||||
import { reactive, ref, shallowRef, computed, onMounted } from 'vue';
|
import { reactive, ref, shallowRef, computed, onMounted } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import apis from '@/apis';
|
import apis from '@/apis';
|
||||||
|
import { sendSMSCode } from '@/apis/home'
|
||||||
import { message, type FormInstance } from 'ant-design-vue';
|
import { message, type FormInstance } from 'ant-design-vue';
|
||||||
import SmsCodeInput from '@/components/SmsCodeInput.vue';
|
import SmsCodeInput from '@/components/SmsCodeInput.vue';
|
||||||
import { validatePassword } from '@/utils/validotors'; // 根据实际路径调整
|
import { validatePassword } from '@/utils/validotors'; // 根据实际路径调整
|
||||||
|
import { SmsType } from '@/constants/sms';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
|
|
||||||
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
|
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
|
||||||
const codeHelp = shallowRef('');
|
const codeHelp = shallowRef('');
|
||||||
const checked = ref(false);
|
const checked = ref(false);
|
||||||
|
|
||||||
|
// 获取 SmsCodeInput 的 ref(用于重置倒计时)
|
||||||
|
const smsInputRef = ref<InstanceType<typeof SmsCodeInput>>();
|
||||||
|
|
||||||
interface FormState {
|
interface FormState {
|
||||||
phone: string;
|
phone: string;
|
||||||
code: string;
|
code: string;
|
||||||
@ -64,6 +71,8 @@ const clearCodeError = () => {
|
|||||||
codeValidateStatus.value = '';
|
codeValidateStatus.value = '';
|
||||||
codeHelp.value = '';
|
codeHelp.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const querenPassword = (rule, value) => {
|
const querenPassword = (rule, value) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return Promise.reject('请输入密码!');
|
return Promise.reject('请输入密码!');
|
||||||
@ -89,12 +98,35 @@ const onFinish = async (values: FormState) => {
|
|||||||
message.error(error);
|
message.error(error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const onFinishFailed = (errorInfo: any) => {
|
const onFinishFailed = (errorInfo: any) => {
|
||||||
console.log('表单验证失败:', errorInfo);
|
console.log('表单验证失败:', errorInfo);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 处理获取验证码
|
||||||
|
const handleSendCode = async () => {
|
||||||
|
if (!formState.phone || !/^\d{11}$/.test(formState.phone)) {
|
||||||
|
message.warning('请输入正确的手机号');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 调用短信接口(注册场景)
|
||||||
|
const res: any = await sendSMSCode(formState.phone, SmsType.REGISTER);
|
||||||
|
console.log('发送验证码请求成功:', res);
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success(res.msg);
|
||||||
|
// 重置子组件的倒计时
|
||||||
|
} else {
|
||||||
|
message.error(res.message);
|
||||||
|
}
|
||||||
|
// message.success('验证码已发送');
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('发送验证码失败:', error);
|
||||||
|
message.error(error?.response?.data?.message || '发送失败,请稍后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.login-content-title {
|
.login-content-title {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user