diff --git a/src/views/Register.vue b/src/views/Register.vue index 66fa617..6669b6e 100644 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -6,12 +6,13 @@ import { useAgentStore } from '@/stores/agentStore' import { useUserStore } from '@/stores/userStore' import { useRoute, useRouter } from 'vue-router' import useApiFetch from '@/composables/useApiFetch' +import { useAliyunCaptcha } from '@/composables/useAliyunCaptcha' const router = useRouter() const route = useRoute() const agentStore = useAgentStore() const userStore = useUserStore() -const appName = import.meta.env.VITE_APP_NAME || '真爱查'; +const { runWithCaptcha } = useAliyunCaptcha() const phoneNumber = ref('') const verificationCode = ref('') @@ -29,33 +30,31 @@ function fillInviteCode() { // 从URL参数中读取邀请码并自动填入，如果用户已登录且有手机号则自动填充 onMounted(async () => { - const inviteCodeParam = route.query.invite_code; + const inviteCodeParam = route.query.invite_code if (inviteCodeParam) { - inviteCode.value = inviteCodeParam; + inviteCode.value = inviteCodeParam } // 从路由参数获取手机号（已注册用户继续注册成为代理的情况） - const mobileParam = route.query.mobile; + const mobileParam = route.query.mobile if (mobileParam) { - phoneNumber.value = mobileParam; - isPhoneDisabled.value = true; + phoneNumber.value = mobileParam + isPhoneDisabled.value = true } else { // 如果用户已登录且有手机号，自动填充手机号 - const token = localStorage.getItem("token"); + const token = localStorage.getItem('token') if (token) { - // 确保用户信息已加载 if (!userStore.mobile) { - await userStore.fetchUserInfo(); + await userStore.fetchUserInfo() } if (userStore.mobile) { - phoneNumber.value = userStore.mobile; - isPhoneDisabled.value = true; + phoneNumber.value = userStore.mobile + isPhoneDisabled.value = true } } } -}); +}) -// 是否是已注册用户（根据注册接口返回判断） const isRegisteredUser = ref(false) const isPhoneNumberValid = computed(() => { @@ -73,35 +72,60 @@ const canRegister = computed(() => { isAgreed.value }) +// 发送验证码（参考登录页逻辑，使用阿里云滑块验证码） async function sendVerificationCode() { - if (isCountingDown.value || !isPhoneNumberValid.value) return + // 1. 基础校验 + if (isCountingDown.value) return if (!isPhoneNumberValid.value) { - showToast({ message: "请输入有效的手机号" }); + showToast({ message: '请输入有效的手机号' }) return } if (!isInviteCodeValid.value) { - showToast({ message: "请先输入邀请码" }); + showToast({ message: '请先输入邀请码' }) return } - const { data, error } = await useApiFetch('auth/sendSms') - .post({ mobile: phoneNumber.value, actionType: 'agentApply' }) - .json() + // 2. 使用阿里云滑块验证码发送短信 + try { + const result = await runWithCaptcha( + // 第一个参数：调用发送短信接口的函数，传入滑块验证参数 + (captchaVerifyParam) => + useApiFetch('auth/sendSms') + .post({ + mobile: phoneNumber.value, + actionType: 'agentApply', // 根据业务选择 login 或 agentApply + captchaVerifyParam, + inviteCode: inviteCode.value.trim() // 带上邀请码，后端可能需要校验 + }) + .json(), - if (data.value && !error.value) { - if (data.value.code === 200) { - showToast({ message: "获取成功" }); - startCountdown() - // 聚焦到验证码输入框 - nextTick(() => { - const verificationCodeInput = document.getElementById('verificationCode'); - if (verificationCodeInput) { - verificationCodeInput.focus(); + // 第二个参数：滑块验证成功后，处理短信发送结果的回调 + (res) => { + if (res.code === 200) { + showToast({ message: '验证码发送成功' }) + startCountdown() + // 聚焦到验证码输入框 + nextTick(() => { + const verificationCodeInput = document.getElementById('verificationCode') + if (verificationCodeInput) { + verificationCodeInput.focus() + } + }) + return true // 告诉 runWithCaptcha 验证+发送成功 + } else { + showToast({ message: res.msg || '验证码发送失败' }) + return false // 告诉 runWithCaptcha 失败，不再继续 } - }); - } else { - showToast(data.value.msg) + } + ) + + // 如果滑块验证或短信发送失败，直接返回 + if (!result) { + return } + } catch (error) { + console.error('发送验证码失败:', error) + showToast({ message: '发送验证码失败，请重试' }) } } @@ -120,29 +144,27 @@ function startCountdown() { async function handleRegister() { if (!isPhoneNumberValid.value) { - showToast({ message: "请输入有效的手机号" }); + showToast({ message: '请输入有效的手机号' }) return } if (!isInviteCodeValid.value) { - showToast({ message: "请输入邀请码" }); + showToast({ message: '请输入邀请码' }) return } if (verificationCode.value.length !== 6) { - showToast({ message: "请输入有效的验证码" }); + showToast({ message: '请输入有效的验证码' }) return } if (!isAgreed.value) { - showToast({ message: "请先同意用户协议、隐私政策和代理管理协议" }); + showToast({ message: '请先同意用户协议、隐私政策和代理管理协议' }) return } - // 直接执行注册逻辑 performRegister() } // 执行实际的注册逻辑 async function performRegister() { try { - // 先尝试通过邀请码注册（同时注册用户和代理） const { data, error } = await registerByInviteCode({ mobile: phoneNumber.value, code: verificationCode.value, @@ -166,16 +188,17 @@ async function performRegister() { }) } - showToast({ message: "注册成功！" }); - // 跳转到代理主页 + showToast({ message: '注册成功！' }) setTimeout(() => { window.location.href = '/' }, 500) + } else { + showToast(data.value.msg || '注册失败，请重试') } } } catch (err) { console.error('注册失败:', err) - showToast({ message: "注册失败，请重试" }); + showToast({ message: '注册失败，请重试' }) } } @@ -190,36 +213,34 @@ async function applyForAgentAsRegisteredUser() { if (data.value && !error.value) { if (data.value.code === 200) { - // 保存token localStorage.setItem('token', data.value.data.accessToken) localStorage.setItem('refreshAfter', data.value.data.refreshAfter) localStorage.setItem('accessExpire', data.value.data.accessExpire) - showToast({ message: "申请成功！" }); - // 跳转到代理主页 + showToast({ message: '申请成功！' }) setTimeout(() => { window.location.href = '/' }, 500) } else { - showToast(data.value.msg || "申请失败，请重试") + showToast(data.value.msg || '申请失败，请重试') } } } catch (err) { console.error('申请失败:', err) - showToast({ message: "申请失败，请重试" }); + showToast({ message: '申请失败，请重试' }) } } function toUserAgreement() { - router.push(`/userAgreement`) + router.push('/userAgreement') } function toPrivacyPolicy() { - router.push(`/privacyPolicy`) + router.push('/privacyPolicy') } function toAgentManageAgreement() { - router.push(`/agentManageAgreement`) + router.push('/agentManageAgreement') } onUnmounted(() => { @@ -234,7 +255,7 @@ const onClickLeft = () => { + \ No newline at end of file