{
+ const [form] = Form.useForm();
+ const [loading, setLoading] = useState(false);
+ const [countdown, setCountdown] = useState(0);
+
+ const handleSendCode = async () => {
+ try {
+ const phone = form.getFieldValue('phone_number');
+ if (!phone) {
+ message.error('请输入手机号');
+ return;
+ }
+
+ // 简单的手机号校验
+ if (!/^1[3-9]\d{9}$/.test(phone)) {
+ message.error('请输入有效的手机号');
+ return;
+ }
+
+ await sendSms({ phone_number: phone });
+ message.success('验证码已发送');
+
+ setCountdown(60);
+ const timer = setInterval(() => {
+ setCountdown((prev) => {
+ if (prev <= 1) {
+ clearInterval(timer);
+ return 0;
+ }
+ return prev - 1;
+ });
+ }, 1000);
+
+ } catch (error) {
+ console.error(error);
+ message.error('发送失败: ' + (error.response?.data?.error || '网络错误'));
+ }
+ };
+
+ const handleSubmit = async (values) => {
+ setLoading(true);
+ try {
+ const res = await phoneLogin(values);
+
+ message.success('登录成功');
+ onLoginSuccess(res.data);
+ onClose();
+ } catch (error) {
+ console.error(error);
+ message.error('登录失败: ' + (error.response?.data?.error || '网络错误'));
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default LoginModal;
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
new file mode 100644
index 0000000..973540c
--- /dev/null
+++ b/frontend/src/context/AuthContext.jsx
@@ -0,0 +1,49 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const storedUser = localStorage.getItem('user');
+ if (storedUser) {
+ try {
+ setUser(JSON.parse(storedUser));
+ } catch (e) {
+ console.error("Failed to parse user from storage", e);
+ localStorage.removeItem('user');
+ }
+ }
+ setLoading(false);
+ }, []);
+
+ const login = (userData) => {
+ setUser(userData);
+ localStorage.setItem('user', JSON.stringify(userData));
+ if (userData.token) {
+ localStorage.setItem('token', userData.token);
+ }
+ };
+
+ const logout = () => {
+ setUser(null);
+ localStorage.removeItem('user');
+ localStorage.removeItem('token');
+ };
+
+ const updateUser = (data) => {
+ const newUser = { ...user, ...data };
+ setUser(newUser);
+ localStorage.setItem('user', JSON.stringify(newUser));
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/frontend/src/pages/MyOrders.jsx b/frontend/src/pages/MyOrders.jsx
index fe21286..99f4335 100644
--- a/frontend/src/pages/MyOrders.jsx
+++ b/frontend/src/pages/MyOrders.jsx
@@ -1,54 +1,72 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, List, Tag, Typography, message, Space, Statistic, Divider, Modal, Descriptions } from 'antd';
import { MobileOutlined, LockOutlined, SearchOutlined, CarOutlined, InboxOutlined, SafetyCertificateOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, UserOutlined, EnvironmentOutlined, PhoneOutlined } from '@ant-design/icons';
-import { sendSms, queryMyOrders } from '../api';
+import { queryMyOrders } from '../api';
import { motion } from 'framer-motion';
+import LoginModal from '../components/LoginModal';
+import { useAuth } from '../context/AuthContext';
const { Title, Text, Paragraph } = Typography;
const MyOrders = () => {
- const [step, setStep] = useState(0); // 0: Input Phone, 1: Verify Code, 2: Show Orders
const [loading, setLoading] = useState(false);
- const [phone, setPhone] = useState('');
const [orders, setOrders] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [currentOrder, setCurrentOrder] = useState(null);
- const [form] = Form.useForm();
+ const [loginVisible, setLoginVisible] = useState(false);
+
+ const { user, login } = useAuth();
+
+ useEffect(() => {
+ if (user) {
+ // 如果已登录，自动查询订单
+ if (user.phone_number) {
+ handleQueryOrders(user.phone_number);
+ }
+ } else {
+ // Don't auto-show login modal on mount if not logged in, just show the "Please login" UI
+ // setLoginVisible(true);
+ }
+ }, [user]);
const showDetail = (order) => {
setCurrentOrder(order);
setModalVisible(true);
};
- const handleSendSms = async (values) => {
+ const handleQueryOrders = async (phone) => {
setLoading(true);
try {
- const { phone_number } = values;
- await sendSms({ phone_number });
- message.success('验证码已发送');
- setPhone(phone_number);
- setStep(1);
- } catch (error) {
- console.error(error);
- message.error('发送验证码失败，请重试');
- } finally {
- setLoading(false);
- }
- };
-
- const handleQueryOrders = async (values) => {
- setLoading(true);
- try {
- const { code } = values;
- const response = await queryMyOrders({ phone_number: phone, code });
+ // 使用 queryMyOrders 接口，这里我们需要调整该接口以支持仅传手机号（如果已登录）
+ // 或者，既然已登录，后端应该能通过 Token 知道是谁，直接查这个人的订单
+ // 但目前的 queryMyOrders 是 POST {phone_number, code}，这主要用于免登录查询
+ // 我们应该使用 OrderViewSet 的 list 方法，它已经支持 filter(wechat_user=user)
+ // 但前端 api.js 中 getOrder 是查单个，我们需要一个 getMyOrders 接口
+
+ // 修改策略：如果已登录，直接调用 queryMyOrders，但不需要 code？
+ // 后端 my_orders 接口目前强制需要 code。
+ // 应该使用 OrderViewSet 的标准 list 接口，它会根据 Token 返回自己的订单。
+ // api.js 中没有导出 getOrders list 接口，我们可以临时用 queryMyOrders 但绕过 code 检查？
+ // 不，最好的方式是使用标准的 GET /orders/，后端 OrderViewSet.get_queryset 已经处理了 get_current_wechat_user
+
+ // 让我们先用 GET /orders/ 试试，需要在 api.js 确认是否有 export
+ // 检查 api.js 发现没有 getOrderList， 只有 getOrder(id)
+ // 我们需要修改 api.js 或在此处直接调用
+
+ // 为了不修改 api.js 太多，我们引入 axios 实例自己发请求，或者假设 api.js 有一个 getMyOrderList
+ // 实际上，查看 api.js， queryMyOrders 是 POST /orders/my_orders/，这是免登录版本
+ // 我们应该用 GET /orders/，因为 get_queryset 已经过滤了。
+
+ // 临时引入 api 实例
+ const { default: api } = await import('../api');
+ const response = await api.get('/orders/');
setOrders(response.data);
- setStep(2);
if (response.data.length === 0) {
- message.info('未查询到相关订单');
+ message.info('您暂时没有订单');
}
} catch (error) {
console.error(error);
- message.error('验证失败或查询出错');
+ message.error('查询出错');
} finally {
setLoading(false);
}
@@ -75,119 +93,32 @@ const MyOrders = () => {
-
我的订单查询
+ 我的订单
Secure Order Verification System
- {step < 2 ? (
-
-
-
-
-
+ {!user ? (
+
+ 请先登录以查看您的订单
+
+
) : (
-
+
+ 当前登录用户: {user.nickname}
(
{
)}
+
+ setLoginVisible(false)}
+ onLoginSuccess={(userData) => {
+ login(userData);
+ if (userData.phone_number) {
+ handleQueryOrders(userData.phone_number);
+ }
+ }}
+ />
);
diff --git a/frontend/src/pages/ProductDetail.jsx b/frontend/src/pages/ProductDetail.jsx
index da032c7..bfd2634 100644
--- a/frontend/src/pages/ProductDetail.jsx
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -4,6 +4,7 @@ import { Button, Row, Col, Tag, Statistic, Modal, Form, Input, InputNumber, mess
import { ShoppingCartOutlined, SafetyCertificateOutlined, ThunderboltOutlined, EyeOutlined, StarOutlined } from '@ant-design/icons';
import { getConfigs, createOrder, nativePay } from '../api';
import ModelViewer from '../components/ModelViewer';
+import { useAuth } from '../context/AuthContext';
import './ProductDetail.css';
const ProductDetail = () => {
@@ -16,9 +17,22 @@ const ProductDetail = () => {
const [submitting, setSubmitting] = useState(false);
const [form] = Form.useForm();
+ const { user } = useAuth();
+
// 优先从 URL 获取，如果没有则从 localStorage 获取，不再默认绑定 flw666
const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
+ useEffect(() => {
+ // 自动填充用户信息
+ if (user) {
+ form.setFieldsValue({
+ phone_number: user.phone_number,
+ // 如果后端返回了地址信息，这里也可以填充
+ // shipping_address: user.shipping_address
+ });
+ }
+ }, [isModalOpen, user]); // 当弹窗打开或用户状态变化时填充
+
useEffect(() => {
console.log('[ProductDetail] Current ref_code:', refCode);
}, [refCode]);