react-ui/src/pages/Invite/index.tsx

import React, { useState, useEffect } from 'react';
import { useModel } from 'umi';
import { Card, Input, Button, Space, Typography, Row, Col, message } from 'antd';
import { CopyOutlined, UserAddOutlined, GiftOutlined, ShareAltOutlined } from '@ant-design/icons';
import { getUserInviteCode, getUserByInviteCode } from './service';

const { Title, Text, Paragraph } = Typography;

const InvitePage: React.FC = () => {
    const [myInviteCode, setMyInviteCode] = useState<string>('');
    const [inputInviteCode, setInputInviteCode] = useState<string>('');
    const [loading, setLoading] = useState<boolean>(false);
    const [submitting, setSubmitting] = useState<boolean>(false);

    // 获取当前用户信息
    const { initialState } = useModel('@@initialState');
    const userId = initialState?.currentUser?.userId || '';

    // 获取我的邀请码
    const fetchMyInviteCode = async () => {
        if (!userId) {
            message.error('用户信息获取失败');
            return;
        }

        setLoading(true);
        try {
            const response = await getUserInviteCode();
            if (response.code === 200) {
                // 根据后端返回的数据结构调整
                setMyInviteCode(response.msg);
            } else {
                message.error(response.msg || '获取邀请码失败');
            }
        } catch (error) {
            message.error('获取邀请码失败');
        } finally {
            setLoading(false);
        }
    };

    // 复制邀请码
    const copyInviteCode = () => {
        if (myInviteCode) {
            navigator.clipboard.writeText(myInviteCode).then(() => {
                message.success('邀请码已复制到剪贴板');
            }).catch(() => {
                message.error('复制失败，请手动复制');
            });
        }
    };

    // 查询邀请码对应的用户
    const handleSubmitInviteCode = async () => {
        if (!inputInviteCode.trim()) {
            message.warning('请输入邀请码');
            return;
        }

        setSubmitting(true);
        try {
            const response = await getUserByInviteCode(inputInviteCode.trim());

            if (response.code === 200) {
                message.success(`邀请码有效，对应用户ID: ${response.data}`);
                setInputInviteCode('');
                // 这里可以根据业务需求进行后续操作，比如关注用户等
            } else {
                message.error(response.msg || '邀请码无效');
            }
        } catch (error) {
            message.error('查询邀请码失败');
        } finally {
            setSubmitting(false);
        }
    };

    useEffect(() => {
        fetchMyInviteCode();
    }, []);

    return (
        <div
            style={{
                padding: '32px 24px',
                maxWidth: '800px',
                margin: '0 auto',
                minHeight: '100vh',
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            }}
        >
            {/* 头部标题区域 */}
            <div style={{ textAlign: 'center', marginBottom: '40px' }}>
                <GiftOutlined
                    style={{
                        fontSize: '48px',
                        color: '#fff',
                        marginBottom: '16px',
                        filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.2))'
                    }}
                />
                <Title
                    level={1}
                    style={{
                        color: '#fff',
                        margin: 0,
                        fontSize: '32px',
                        fontWeight: 600,
                        textShadow: '0 2px 4px rgba(0,0,0,0.3)'
                    }}
                >
                    邀请码管理
                </Title>
                <Paragraph
                    style={{
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: '16px',
                        margin: '8px 0 0 0'
                    }}
                >
                    邀请好友，共享美好体验
                </Paragraph>
            </div>

            <Row gutter={[24, 24]}>
                {/* 我的邀请码 */}
                <Col xs={24} lg={12}>
                    <Card
                        title={
                            <Space>
                                <ShareAltOutlined style={{ color: '#1890ff' }} />
                                <span style={{ color: '#1890ff', fontWeight: 600 }}>我的邀请码</span>
                            </Space>
                        }
                        style={{
                            height: '100%',
                            borderRadius: '16px',
                            boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
                            border: 'none',
                            background: 'rgba(255,255,255,0.95)',
                            backdropFilter: 'blur(10px)'
                        }}
                        bodyStyle={{ padding: '24px' }}
                    >
                        <Space direction="vertical" style={{ width: '100%' }} size="large">
                            <div style={{
                                padding: '20px',
                                background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
                                borderRadius: '12px',
                                textAlign: 'center'
                            }}>
                                <Text
                                    type="secondary"
                                    style={{
                                        fontSize: '14px',
                                        display: 'block',
                                        marginBottom: '16px'
                                    }}
                                >
                                    分享下方邀请码给好友，邀请他们加入
                                </Text>
                                <div style={{
                                    background: '#fff',
                                    padding: '16px',
                                    borderRadius: '8px',
                                    border: '2px dashed #d9d9d9',
                                    marginBottom: '16px'
                                }}>
                                    <Text
                                        copyable={false}
                                        style={{
                                            fontSize: '24px',
                                            fontWeight: 'bold',
                                            color: '#1890ff',
                                            fontFamily: 'Monaco, monospace',
                                            letterSpacing: '2px'
                                        }}
                                    >
                                        {loading ? '加载中...' : (myInviteCode || '暂无邀请码')}
                                    </Text>
                                </div>
                                <Button
                                    type="primary"
                                    size="large"
                                    icon={<CopyOutlined />}
                                    onClick={copyInviteCode}
                                    disabled={!myInviteCode}
                                    style={{
                                        borderRadius: '8px',
                                        height: '44px',
                                        fontSize: '16px',
                                        fontWeight: 500,
                                        boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
                                    }}
                                    block
                                >
                                    复制邀请码
                                </Button>
                            </div>
                        </Space>
                    </Card>
                </Col>

                {/* 输入邀请码 */}
                <Col xs={24} lg={12}>
                    <Card
                        title={
                            <Space>
                                <UserAddOutlined style={{ color: '#52c41a' }} />
                                <span style={{ color: '#52c41a', fontWeight: 600 }}>查询邀请码</span>
                            </Space>
                        }
                        style={{
                            height: '100%',
                            borderRadius: '16px',
                            boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
                            border: 'none',
                            background: 'rgba(255,255,255,0.95)',
                            backdropFilter: 'blur(10px)'
                        }}
                        bodyStyle={{ padding: '24px' }}
                    >
                        <Space direction="vertical" style={{ width: '100%' }} size="large">
                            <div style={{
                                padding: '20px',
                                background: 'linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%)',
                                borderRadius: '12px'
                            }}>
                                <Text
                                    type="secondary"
                                    style={{
                                        fontSize: '14px',
                                        display: 'block',
                                        marginBottom: '20px',
                                        textAlign: 'center'
                                    }}
                                >
                                    输入邀请码
                                </Text>
                                <Space direction="vertical" style={{ width: '100%' }} size="middle">
                                    <Input
                                        value={inputInviteCode}
                                        onChange={(e) => setInputInviteCode(e.target.value)}
                                        placeholder="请输入邀请码"
                                        size="large"
                                        style={{
                                            borderRadius: '8px',
                                            fontSize: '16px',
                                            height: '48px',
                                            textAlign: 'center',
                                            fontFamily: 'Monaco, monospace',
                                            letterSpacing: '1px'
                                        }}
                                        onPressEnter={handleSubmitInviteCode}
                                    />
                                    <Button
                                        type="primary"
                                        size="large"
                                        icon={<UserAddOutlined />}
                                        onClick={handleSubmitInviteCode}
                                        loading={submitting}
                                        disabled={!inputInviteCode.trim()}
                                        style={{
                                            borderRadius: '8px',
                                            height: '44px',
                                            fontSize: '16px',
                                            fontWeight: 500,
                                            background: '#52c41a',
                                            borderColor: '#52c41a',
                                            boxShadow: '0 4px 12px rgba(82, 196, 26, 0.3)'
                                        }}
                                        block
                                    >
                                        邀请码
                                    </Button>
                                </Space>
                            </div>
                        </Space>
                    </Card>
                </Col>
            </Row>

            {/* 底部装饰 */}
            <div style={{
                textAlign: 'center',
                marginTop: '40px',
                padding: '20px',
                background: 'rgba(255,255,255,0.1)',
                borderRadius: '12px',
                backdropFilter: 'blur(10px)'
            }}>
                <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px' }}>
                    通过邀请码连接更多朋友，一起享受精彩体验
                </Text>
            </div>
        </div>
    );
};

export default InvitePage;