import { useEffect, useState, useRef } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { message } from 'antd'; import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage'; import { updateUserUIState, sendCode } from '@/utils/api'; import { px2vmin, px2vw, px2vh } from '@/utils/viewport'; import { getOssUrl } from '@/utils/oss'; // const giftProgressBar = getOssUrl('gift-progress-bar.png'); // Unused const sendCodeNo = getOssUrl('send-code-no.png'); const sendCodeImage = getOssUrl('send-code.png'); const backButton = getOssUrl('backbutn.png'); const focusGradient = 'linear-gradient(90deg, #FFC900 11%, #13A6FF 32%, #806EFF 50%, #FF8EEC 66%, #FE4F51 89%)'; interface LocationState { loginType?: 'phone' | 'email'; areaCode?: string; phoneNumber?: string; email?: string; } export const VerificationCodePage = () => { const location = useLocation(); const navigate = useNavigate(); const state = location.state as LocationState | null; // 根据传入的数据初始化状态 const [areaCode, setAreaCode] = useState(state?.areaCode || '+86'); const [phoneNumber, setPhoneNumber] = useState(state?.phoneNumber || ''); const [email, setEmail] = useState(state?.email || ''); const [isAreaCodeFocused, setIsAreaCodeFocused] = useState(false); const [isPhoneFocused, setIsPhoneFocused] = useState(false); const [isEmailFocused, setIsEmailFocused] = useState(false); const [selectedLoginType] = useState<'phone' | 'qq' | 'email'>(state?.loginType || 'phone'); const [isAreaCodeOpen, setIsAreaCodeOpen] = useState(false); const areaCodeContainerRef = useRef(null); const phoneRef = useRef(null); const emailRef = useRef(null); const areaCodeOptions = [ { code: '+86', label: '中国', flag: getOssUrl('china.png') }, { code: '+44', label: '英国', flag: getOssUrl('england.png') }, ]; useEffect(() => { // 记录用户当前所在页面 setStorage(STORAGE_KEYS.CURRENT_PAGE, 'verification-code'); const visited = getVisitedRoutes(); const userId = getUserId(); if (userId) { updateUserUIState(userId, { current_page: 'verification-code', visited_routes: visited, }).catch(() => { // 同步失败不影响前端流程 }); } }, []); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (areaCodeContainerRef.current && !areaCodeContainerRef.current.contains(event.target as Node)) { setIsAreaCodeOpen(false); setIsAreaCodeFocused(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const handleBack = () => { navigate('/first-login', { state: { loginType: selectedLoginType, areaCode, phoneNumber, email, }, }); }; // 处理发送验证码按钮点击 const handleSendCode = async () => { // 验证输入 if (selectedLoginType === 'phone' && !phoneNumber) { message.error('请输入手机号码'); return; } if (selectedLoginType === 'email' && !email) { message.error('请输入邮箱地址'); return; } try { // 确定发送类型 const sendType = selectedLoginType === 'email' ? 'email' : 'domestic_sms'; // 发送验证码 const response = await sendCode({ area_code: selectedLoginType === 'phone' ? areaCode : undefined, phone: selectedLoginType === 'phone' ? phoneNumber : undefined, email: selectedLoginType === 'email' ? email : undefined, send_type: sendType, }); if (response.success) { message.success('验证码已发送'); // 跳转到验证码输入页面 navigate('/verification-input', { state: { loginType: selectedLoginType, areaCode, phoneNumber, email, }, }); } else { message.error('发送验证码失败，请重试'); } } catch (error) { const errorMessage = error instanceof Error ? error.message : '发送验证码失败'; message.error(errorMessage); } }; return (