import React, { useState, useEffect } from 'react'; import { Form, Input, Button, Card, List, Tag, Typography, message, Space, Statistic, Divider, Modal, Descriptions, Tabs } from 'antd'; import { MobileOutlined, LockOutlined, SearchOutlined, CarOutlined, InboxOutlined, SafetyCertificateOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, UserOutlined, EnvironmentOutlined, PhoneOutlined, CalendarOutlined } from '@ant-design/icons'; import { getMySignups } from '../api'; import { motion } from 'framer-motion'; import LoginModal from '../components/LoginModal'; import { useAuth } from '../context/AuthContext'; import { useNavigate } from 'react-router-dom'; const { Title, Text, Paragraph } = Typography; const MyOrders = () => { const [loading, setLoading] = useState(false); const [orders, setOrders] = useState([]); const [activities, setActivities] = useState([]); const [modalVisible, setModalVisible] = useState(false); const [currentOrder, setCurrentOrder] = useState(null); const [signupInfoModalVisible, setSignupInfoModalVisible] = useState(false); const [currentSignupInfo, setCurrentSignupInfo] = useState(null); const [loginVisible, setLoginVisible] = useState(false); const navigate = useNavigate(); const { user, login } = useAuth(); useEffect(() => { if (user) { handleQueryData(); } }, [user]); const showDetail = (order) => { setCurrentOrder(order); setModalVisible(true); }; const showSignupInfo = (info) => { setCurrentSignupInfo(info); setSignupInfoModalVisible(true); }; const handleQueryData = async () => { setLoading(true); try { const { default: api } = await import('../api'); // Parallel fetch const [ordersRes, activitiesRes] = await Promise.allSettled([ api.get('/orders/'), getMySignups() ]); if (ordersRes.status === 'fulfilled') { setOrders(ordersRes.value.data); } if (activitiesRes.status === 'fulfilled') { setActivities(activitiesRes.value.data); } } catch (error) { console.error(error); message.error('查询出错'); } finally { setLoading(false); } }; const getStatusTag = (status) => { switch (status) { case 'paid': return } color="success">已支付; case 'pending': return } color="warning">待支付; case 'shipped': return } color="processing">已发货; case 'cancelled': return } color="default">已取消; default: return {status}; } }; const getOrderTitle = (order) => { if (order.config_name) return order.config_name; if (order.course_title) return order.course_title; if (order.activity_title) return order.activity_title; // Fallback to ID if no name/title if (order.config) return `硬件 ID: ${order.config}`; if (order.course) return `课程 ID: ${order.course}`; if (order.activity) return `活动 ID: ${order.activity}`; return '未知商品'; }; return (
我的订单 Secure Order Verification System
{!user ? (
请先登录以查看您的订单
) : (
当前登录用户: {user.nickname}
我的订单, children: ( ( showDetail(order)} title={订单号: {order.id} {getStatusTag(order.status)}} style={{ background: 'rgba(0,0,0,0.6)', border: '1px solid rgba(255,255,255,0.1)', marginBottom: 10, backdropFilter: 'blur(10px)' }} headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }} bodyStyle={{ padding: '20px' }} >
{order.total_price} 元 {new Date(order.created_at).toLocaleString()}
{order.config_image ? ( {getOrderTitle(order)} ) : (
)}
{getOrderTitle(order)}
数量: x{order.quantity}
{(order.courier_name || order.tracking_number) && (
物流信息
快递公司: {order.courier_name || '未知'}
快递单号: {order.tracking_number ? (
e.stopPropagation()}> {order.tracking_number}
) : ( 暂无单号 )}
)}
)} locale={{ emptyText:
暂无订单信息
}} /> ) }, { key: '2', label: 我的活动, children: ( { const activity = item.activity_info || item.activity || item; return ( navigate(`/activity/${activity.id}`)} cover={
{activity.title}
} style={{ background: 'rgba(0,0,0,0.6)', border: '1px solid rgba(255,255,255,0.1)', marginBottom: 10, backdropFilter: 'blur(10px)', overflow: 'hidden' }} headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }} bodyStyle={{ padding: '16px' }} >
{activity.title}
{new Date(activity.start_time).toLocaleDateString()}
{activity.location || '线上活动'}
{activity.status || '已报名'} {item.signup_info && Object.keys(item.signup_info).length > 0 && ( )}
); }} locale={{ emptyText:
暂无活动报名
}} /> ) } ]} /> )} 订单详情} open={modalVisible} onCancel={() => setModalVisible(false)} footer={[ ]} width={600} centered > {currentOrder && ( {currentOrder.id} {getOrderTitle(currentOrder)} {new Date(currentOrder.created_at).toLocaleString()} {new Date(currentOrder.updated_at).toLocaleString()} {getStatusTag(currentOrder.status)} ¥{currentOrder.total_price} {currentOrder.customer_name} {currentOrder.phone_number} {currentOrder.shipping_address} {currentOrder.salesperson_name && ( {currentOrder.salesperson_name} {currentOrder.salesperson_code && {currentOrder.salesperson_code}} )} {(currentOrder.status === 'shipped' || currentOrder.courier_name) && ( <> {currentOrder.courier_name || '未知'} {currentOrder.tracking_number ? ( {currentOrder.tracking_number} ) : '暂无单号'} )} )} setLoginVisible(false)} onLoginSuccess={(userData) => { login(userData); if (userData.phone_number) { handleQueryData(); } }} /> setSignupInfoModalVisible(false)} footer={[ ]} > {currentSignupInfo && ( {Object.entries(currentSignupInfo).map(([key, value]) => ( {typeof value === 'object' ? JSON.stringify(value) : String(value)} ))} )}
); }; export default MyOrders;