mini

frontend/src/pages/MyOrders.jsx

@@ -1,8 +1,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 { queryMyOrders, getMySignups } from '../api';
-import { motion } from 'framer-motion';
+import { getMySignups } from '../api';
 import LoginModal from '../components/LoginModal';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
@@ -75,6 +74,24 @@ 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;
+    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 (
     <div style={{ 
       minHeight: '80vh', 
@@ -96,7 +113,7 @@ const MyOrders = () => {
              <Button type="primary" size="large" onClick={() => setLoginVisible(true)}>立即登录</Button>
            </div>
         ) : (
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+          <div>
             <div style={{ marginBottom: 20, textAlign: 'right', color: '#fff' }}>
                当前登录用户: <span style={{ color: '#00b96b', fontWeight: 'bold', marginRight: 10 }}>{user.nickname}</span>
                <Button 
@@ -122,7 +139,7 @@ const MyOrders = () => {
                               <Card 
                                 hoverable
                                 onClick={() => showDetail(order)}
-                                title={<Space><span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
+                                title={<Space>{getOrderTypeTag(order)}<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)', 
@@ -143,7 +160,7 @@ const MyOrders = () => {
                                         {order.config_image ? (
                                             <img 
                                                 src={order.config_image} 
-                                                alt={order.config_name} 
+                                                alt={getOrderTitle(order)} 
                                                 style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)' }} 
                                             />
                                         ) : (
@@ -161,7 +178,7 @@ const MyOrders = () => {
                                             </div>
                                         )}
                                         <div>
-                                          <div style={{ color: '#fff', fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{order.config_name || `商品 ID: ${order.config}`}</div>
+                                          <div style={{ color: '#fff', fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{getOrderTitle(order)}</div>
                                           <div style={{ color: '#888' }}>数量: <span style={{ color: '#00b96b' }}>x{order.quantity}</span></div>
                                         </div>
                                      </Space>
@@ -277,7 +294,7 @@ const MyOrders = () => {
                     )
                 }
             ]} />
-          </motion.div>
+          </div>
         )}
         
         <Modal
@@ -297,7 +314,8 @@ const MyOrders = () => {
                     <Descriptions.Item label="订单号">
                         <Paragraph copyable={{ text: currentOrder.id }} style={{ marginBottom: 0 }}>{currentOrder.id}</Paragraph>
                     </Descriptions.Item>
-                    <Descriptions.Item label="商品名称">{currentOrder.config_name}</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>
                     <Descriptions.Item label="当前状态">{getStatusTag(currentOrder.status)}</Descriptions.Item>
@@ -344,7 +362,7 @@ const MyOrders = () => {
           onLoginSuccess={(userData) => {
             login(userData);
             if (userData.phone_number) {
-               handleQueryOrders(userData.phone_number);
+               handleQueryData();
             }
           }}
         />

frontend/src/pages/VCCourseDetail.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message } from 'antd';
-import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, BookOutlined, FormOutlined } from '@ant-design/icons';
-import { getVCCourseDetail, createOrder } from '../api';
-import { motion } from 'framer-motion';
+import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, BookOutlined, FormOutlined, CalendarOutlined } from '@ant-design/icons';
+import { getVCCourseDetail, createOrder, nativePay, queryOrderStatus } from '../api';
 import { useAuth } from '../context/AuthContext';
+import { QRCodeSVG } from 'qrcode.react';
 
 const { Title, Paragraph } = Typography;
 
@@ -19,6 +19,12 @@ const VCCourseDetail = () => {
   const [submitting, setSubmitting] = useState(false);
   const [form] = Form.useForm();
   
+  // Payment states
+  const [payMode, setPayMode] = useState(false);
+  const [qrCodeUrl, setQrCodeUrl] = useState(null);
+  const [currentOrderId, setCurrentOrderId] = useState(null);
+  const [paySuccess, setPaySuccess] = useState(false);
+  
   // 优先从 URL 获取，如果没有则从 localStorage 获取
   const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
 
@@ -37,33 +43,85 @@ const VCCourseDetail = () => {
   }, [id]);
 
   useEffect(() => {
-    if (isModalOpen && user && user.phone_number) {
-        form.setFieldsValue({
-            phone_number: user.phone_number
-        });
+    if (isModalOpen) {
+        // Reset payment state when modal opens
+        setPayMode(false);
+        setQrCodeUrl(null);
+        setCurrentOrderId(null);
+        setPaySuccess(false);
+        
+        if (user && user.phone_number) {
+            form.setFieldsValue({
+                phone_number: user.phone_number
+            });
+        }
     }
   }, [isModalOpen, user, form]);
 
+  // Polling for payment status
+  useEffect(() => {
+    let timer;
+    if (payMode && !paySuccess && currentOrderId) {
+      timer = setInterval(async () => {
+        try {
+          const response = await queryOrderStatus(currentOrderId);
+          if (response.data.status === 'paid') {
+            setPaySuccess(true);
+            message.success('支付成功！报名已完成。');
+            setTimeout(() => {
+                setIsModalOpen(false);
+            }, 2000); // Wait 2 seconds before closing
+            clearInterval(timer);
+          }
+        } catch (error) {
+          console.error('Check payment status failed:', error);
+        }
+      }, 3000);
+    }
+    return () => clearInterval(timer);
+  }, [payMode, paySuccess, currentOrderId]);
+
   const handleEnroll = async (values) => {
       setSubmitting(true);
       try {
-          const orderData = {
-              course: course.id,
-              customer_name: values.customer_name,
-              phone_number: values.phone_number,
-              ref_code: refCode,
-              quantity: 1,
-              // 将其他信息放入收货地址字段中
-              shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
-          };
+          const isFree = course.price === 0 || parseFloat(course.price) === 0;
           
-          await createOrder(orderData);
-          if (course.price === 0 || parseFloat(course.price) === 0) {
+          if (isFree) {
+              const orderData = {
+                  course: course.id,
+                  customer_name: values.customer_name,
+                  phone_number: values.phone_number,
+                  ref_code: refCode || "",
+                  quantity: 1,
+                  // 将其他信息放入收货地址字段中
+                  shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
+              };
+              
+              await createOrder(orderData);
               message.success('报名成功！您已成功加入课程。');
+              setIsModalOpen(false);
           } else {
-              message.success('报名咨询已提交，我们的课程顾问将尽快与您联系！');
+              // Paid course - use nativePay to generate QR code
+              const orderData = {
+                  goodid: course.id,
+                  type: 'course',
+                  quantity: 1,
+                  customer_name: values.customer_name,
+                  phone_number: values.phone_number,
+                  ref_code: refCode || "",
+                  shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
+              };
+              
+              const response = await nativePay(orderData);
+              if (response.data && response.data.code_url) {
+                  setQrCodeUrl(response.data.code_url);
+                  setCurrentOrderId(response.data.order_id);
+                  setPayMode(true);
+                  message.success('订单创建成功，请扫码支付');
+              } else {
+                  throw new Error('Failed to generate payment QR code');
+              }
           }
-          setIsModalOpen(false);
       } catch (error) {
           console.error(error);
           message.error('提交失败，请重试');
@@ -103,11 +161,7 @@ const VCCourseDetail = () => {
         返回课程列表
       </Button>
 
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-      >
+      <div>
         <Row gutter={[40, 40]}>
             <Col xs={24} md={16}>
                 <div style={{ textAlign: 'left', marginBottom: 40 }}>
@@ -168,6 +222,14 @@ const VCCourseDetail = () => {
                             <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><BookOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 课时</span>}>
                                 {course.lesson_count} 课时
                             </Descriptions.Item>
+                            {course.is_fixed_schedule && (course.start_time || course.end_time) && (
+                                <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><CalendarOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 开课时间</span>}>
+                                    <div>
+                                        {course.start_time && <div>开始：{new Date(course.start_time).toLocaleString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}</div>}
+                                        {course.end_time && <div>结束：{new Date(course.end_time).toLocaleString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}</div>}
+                                    </div>
+                                </Descriptions.Item>
+                            )}
                         </Descriptions>
                         
                         {/* 讲师简介 */}
@@ -255,43 +317,75 @@ const VCCourseDetail = () => {
                 </div>
             </Col>
         </Row>
-      </motion.div>
+      </div>
 
       {/* Enroll Modal */}
       <Modal
-        title={`报名/咨询 - ${course.title}`}
+        title={payMode ? '微信扫码支付' : `报名/咨询 - ${course.title}`}
         open={isModalOpen}
         onCancel={() => setIsModalOpen(false)}
         footer={null}
         destroyOnHidden
+        width={payMode ? 400 : 520}
       >
-        <p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式，我们将为您安排课程顾问。</p>
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleEnroll}
-        >
-          <Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
-            <Input placeholder="例如：李同学" />
-          </Form.Item>
-          <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
-            <Input placeholder="13800000000" />
-          </Form.Item>
-          <Form.Item label="微信号" name="wechat_id">
-            <Input placeholder="选填，方便微信沟通" />
-          </Form.Item>
-          <Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
-            <Input placeholder="example@email.com" />
-          </Form.Item>
-          <Form.Item label="备注/留言" name="message">
-            <Input.TextArea rows={4} placeholder="您想了解的任何问题..." />
-          </Form.Item>
-          
-          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
-            <Button onClick={() => setIsModalOpen(false)}>取消</Button>
-            <Button type="primary" htmlType="submit" loading={submitting}>提交报名</Button>
-          </div>
-        </Form>
+        {payMode ? (
+            <div style={{ textAlign: 'center', padding: '20px 0' }}>
+                {paySuccess ? (
+                    <div style={{ color: '#52c41a' }}>
+                        <div style={{ fontSize: 48, marginBottom: 16 }}>🎉</div>
+                        <h3>支付成功！</h3>
+                        <p>正在跳转...</p>
+                    </div>
+                ) : (
+                    <>
+                        <div style={{ background: '#fff', padding: '10px', borderRadius: '4px', display: 'inline-block', border: '1px solid #eee' }}>
+                            {qrCodeUrl ? (
+                                <QRCodeSVG value={qrCodeUrl} size={200} />
+                            ) : (
+                                <Spin size="large" />
+                            )}
+                        </div>
+                        <p style={{ marginTop: 20, fontSize: 16, fontWeight: 'bold' }}>¥{course.price}</p>
+                        <p style={{ color: '#666', marginTop: 10 }}>请使用微信扫一扫支付</p>
+                        <div style={{ marginTop: 20, fontSize: 12, color: '#999' }}>
+                            支付完成后将自动完成报名
+                        </div>
+                    </>
+                )}
+            </div>
+        ) : (
+            <>
+                <p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式，我们将为您安排课程顾问。</p>
+                <Form
+                  form={form}
+                  layout="vertical"
+                  onFinish={handleEnroll}
+                >
+                  <Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
+                    <Input placeholder="例如：李同学" />
+                  </Form.Item>
+                  <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
+                    <Input placeholder="13800000000" />
+                  </Form.Item>
+                  <Form.Item label="微信号" name="wechat_id">
+                    <Input placeholder="选填，方便微信沟通" />
+                  </Form.Item>
+                  <Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
+                    <Input placeholder="example@email.com" />
+                  </Form.Item>
+                  <Form.Item label="备注/留言" name="message">
+                    <Input.TextArea rows={4} placeholder="您想了解的任何问题..." />
+                  </Form.Item>
+                  
+                  <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+                    <Button onClick={() => setIsModalOpen(false)}>取消</Button>
+                    <Button type="primary" htmlType="submit" loading={submitting}>
+                        {parseFloat(course.price) > 0 ? '去支付' : '提交报名'}
+                    </Button>
+                  </div>
+                </Form>
+            </>
+        )}
       </Modal>
     </div>
   );