移动端

frontend/src/pages/MyOrders.jsx

@@ -2,6 +2,7 @@ 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';
@@ -74,13 +75,6 @@ const MyOrders = () => {
     }
   };
 
-  const getOrderTypeTag = (order) => {
-    if (order.config) return <Tag color="blue">硬件</Tag>;
-    if (order.course) return <Tag color="purple">VC课程</Tag>;
-    if (order.activity) return <Tag color="orange">活动</Tag>;
-    return <Tag>其他</Tag>;
-  };
-
   const getOrderTitle = (order) => {
     if (order.config_name) return order.config_name;
     if (order.course_title) return order.course_title;
@@ -113,7 +107,7 @@ const MyOrders = () => {
              <Button type="primary" size="large" onClick={() => setLoginVisible(true)}>立即登录</Button>
            </div>
         ) : (
-          <div>
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
             <div style={{ marginBottom: 20, textAlign: 'right', color: '#fff' }}>
                当前登录用户: <span style={{ color: '#00b96b', fontWeight: 'bold', marginRight: 10 }}>{user.nickname}</span>
                <Button 
@@ -139,7 +133,7 @@ const MyOrders = () => {
                               <Card 
                                 hoverable
                                 onClick={() => showDetail(order)}
-                                title={<Space>{getOrderTypeTag(order)}<span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
+                                title={<Space><span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
                                 style={{ 
                                   background: 'rgba(0,0,0,0.6)', 
                                   border: '1px solid rgba(255,255,255,0.1)', 
@@ -294,7 +288,7 @@ const MyOrders = () => {
                     )
                 }
             ]} />
-          </div>
+          </motion.div>
         )}
         
         <Modal
@@ -314,7 +308,6 @@ const MyOrders = () => {
                     <Descriptions.Item label="订单号">
                         <Paragraph copyable={{ text: currentOrder.id }} style={{ marginBottom: 0 }}>{currentOrder.id}</Paragraph>
                     </Descriptions.Item>
-                    <Descriptions.Item label="订单类型">{getOrderTypeTag(currentOrder)}</Descriptions.Item>
                     <Descriptions.Item label="商品名称">{getOrderTitle(currentOrder)}</Descriptions.Item>
                     <Descriptions.Item label="下单时间">{new Date(currentOrder.created_at).toLocaleString()}</Descriptions.Item>
                     <Descriptions.Item label="状态更新时间">{new Date(currentOrder.updated_at).toLocaleString()}</Descriptions.Item>