feat: 注册和登录兼容h5
This commit is contained in:
zdl
@@ -10,6 +10,7 @@ import {
|
||||
Heading,
|
||||
VStack,
|
||||
HStack,
|
||||
Stack,
|
||||
useToast,
|
||||
Icon,
|
||||
FormErrorMessage,
|
||||
@@ -22,10 +23,14 @@ import {
|
||||
AlertDialogOverlay,
|
||||
Text,
|
||||
Link as ChakraLink,
|
||||
useBreakpointValue,
|
||||
Divider,
|
||||
IconButton,
|
||||
} from "@chakra-ui/react";
|
||||
import { FaLock } from "react-icons/fa";
|
||||
import { FaLock, FaWeixin } from "react-icons/fa";
|
||||
import { useAuth } from "../../contexts/AuthContext";
|
||||
import { useAuthModal } from "../../contexts/AuthModalContext";
|
||||
import { authService } from "../../services/authService";
|
||||
import AuthHeader from './AuthHeader';
|
||||
import VerificationCodeInput from './VerificationCodeInput';
|
||||
import WechatRegister from './WechatRegister';
|
||||
@@ -37,7 +42,7 @@ const API_BASE_URL = isProduction ? "" : "http://49.232.185.254:5000";
|
||||
// 统一配置对象
|
||||
const AUTH_CONFIG = {
|
||||
// UI文本
|
||||
title: "欢迎使用价值前沿",
|
||||
title: "价值前沿",
|
||||
subtitle: "开启您的投资之旅",
|
||||
formTitle: "手机号验证",
|
||||
buttonText: "登录/注册",
|
||||
@@ -79,6 +84,10 @@ export default function AuthFormContent() {
|
||||
const [showNicknamePrompt, setShowNicknamePrompt] = useState(false);
|
||||
const [currentPhone, setCurrentPhone] = useState("");
|
||||
|
||||
// 响应式布局配置
|
||||
const isMobile = useBreakpointValue({ base: true, md: false });
|
||||
const stackDirection = useBreakpointValue({ base: "column", md: "row" });
|
||||
const stackSpacing = useBreakpointValue({ base: 4, md: 8 });
|
||||
|
||||
// 表单数据
|
||||
const [formData, setFormData] = useState({
|
||||
@@ -298,6 +307,44 @@ export default function AuthFormContent() {
|
||||
}
|
||||
};
|
||||
|
||||
// 微信H5登录处理
|
||||
const handleWechatH5Login = async () => {
|
||||
try {
|
||||
// 1. 构建回调URL
|
||||
const redirectUrl = `${window.location.origin}/home/wechat-callback`;
|
||||
|
||||
// 2. 显示提示
|
||||
toast({
|
||||
title: "即将跳转",
|
||||
description: "正在跳转到微信授权页面...",
|
||||
status: "info",
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// 3. 获取微信H5授权URL
|
||||
const response = await authService.getWechatH5AuthUrl(redirectUrl);
|
||||
|
||||
if (!response || !response.auth_url) {
|
||||
throw new Error('获取授权链接失败');
|
||||
}
|
||||
|
||||
// 4. 延迟跳转，让用户看到提示
|
||||
setTimeout(() => {
|
||||
window.location.href = response.auth_url;
|
||||
}, 500);
|
||||
} catch (error) {
|
||||
console.error('微信H5登录失败:', error);
|
||||
toast({
|
||||
title: "跳转失败",
|
||||
description: error.message || "请稍后重试",
|
||||
status: "error",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 组件卸载时清理
|
||||
useEffect(() => {
|
||||
isMountedRef.current = true;
|
||||
@@ -311,8 +358,8 @@ export default function AuthFormContent() {
|
||||
<>
|
||||
<Box width="100%">
|
||||
<AuthHeader title={config.title} subtitle={config.subtitle} />
|
||||
<HStack spacing={8} align="stretch">
|
||||
<Box flex="4">
|
||||
<Stack direction={stackDirection} spacing={stackSpacing} align="stretch">
|
||||
<Box flex={{ base: "1", md: "4" }}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<VStack spacing={4}>
|
||||
<Heading size="md" color="gray.700" alignSelf="flex-start">{config.formTitle}</Heading>
|
||||
@@ -320,12 +367,43 @@ export default function AuthFormContent() {
|
||||
<Input name="phone" value={formData.phone} onChange={handleInputChange} placeholder="请输入11位手机号" />
|
||||
<FormErrorMessage>{errors.phone}</FormErrorMessage>
|
||||
</FormControl>
|
||||
<VerificationCodeInput value={formData.verificationCode} onChange={handleInputChange} onSendCode={sendVerificationCode} countdown={countdown} isLoading={isLoading} isSending={sendingCode} error={errors.verificationCode} colorScheme="green" />
|
||||
|
||||
{/* 验证码输入框 + 移动端微信图标 */}
|
||||
<Box width="100%" position="relative">
|
||||
<VerificationCodeInput value={formData.verificationCode} onChange={handleInputChange} onSendCode={sendVerificationCode} countdown={countdown} isLoading={isLoading} isSending={sendingCode} error={errors.verificationCode} colorScheme="green" />
|
||||
|
||||
{/* 移动端：验证码下方的微信登录图标 */}
|
||||
{isMobile && (
|
||||
<HStack spacing={0} mt={2} alignItems="center">
|
||||
<Text fontSize="xs" color="gray.500">其他登录方式：</Text>
|
||||
<IconButton
|
||||
aria-label="微信登录"
|
||||
icon={<Icon as={FaWeixin} w={4} h={4} />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="#07C160"
|
||||
borderRadius="md"
|
||||
minW="24px"
|
||||
minH="24px"
|
||||
_hover={{
|
||||
bg: "green.50",
|
||||
color: "#06AD56"
|
||||
}}
|
||||
_active={{
|
||||
bg: "green.100"
|
||||
}}
|
||||
onClick={handleWechatH5Login}
|
||||
isDisabled={isLoading}
|
||||
/>
|
||||
</HStack>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Button type="submit" width="100%" size="lg" colorScheme="green" color="white" borderRadius="lg" isLoading={isLoading} loadingText={config.loadingText} fontWeight="bold"><Icon as={FaLock} mr={2} />{config.buttonText}</Button>
|
||||
|
||||
{/* 隐私声明 */}
|
||||
<Text fontSize="xs" color="gray.500" textAlign="center" mt={2}>
|
||||
登录即表示你同意价值前沿{" "}
|
||||
登录即表示您同意价值前沿{" "}
|
||||
<ChakraLink
|
||||
as="a"
|
||||
href="/home/user-agreement"
|
||||
@@ -353,10 +431,16 @@ export default function AuthFormContent() {
|
||||
</VStack>
|
||||
</form>
|
||||
</Box>
|
||||
<Box flex="1">
|
||||
<Center width="100%" bg="gray.50" borderRadius="lg" p={8}><WechatRegister /></Center>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
{/* 桌面端：右侧二维码扫描 */}
|
||||
{!isMobile && (
|
||||
<Box flex="1">
|
||||
<Center width="100%" bg="gray.50" borderRadius="lg" p={8}>
|
||||
<WechatRegister />
|
||||
</Center>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* 只在需要时才渲染 AlertDialog，避免创建不必要的 Portal */}
|
||||
|
||||
Reference in New Issue
Block a user