diff --git a/src/pages/Recharge/Recharge.css b/src/pages/Recharge/Recharge.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/Recharge/Recharge.css
diff --git a/src/pages/Recharge/Recharge.jsx b/src/pages/Recharge/Recharge.jsx
new file mode 100644
index 0000000..0df1837
--- /dev/null
+++ b/src/pages/Recharge/Recharge.jsx
@@ -0,0 +1,192 @@
+// import React, { useState } from 'react';
+// import axios from 'axios';
+// import { useUser } from '../../context/UserContext';
+
+// const Recharge = () => {
+//   const [amount, setAmount] = useState('');
+//   const [loading, setLoading] = useState(false);
+//   const [message, setMessage] = useState('');
+
+//   // 从上下文获取当前登录用户
+//   const { user } = useUser();
+//   const userId = user?.userId;
+
+//   const handleRecharge = async () => {
+//     if (!userId) {
+//       setMessage('未登录，无法充值');
+//       return;
+//     }
+//     if (!amount || isNaN(amount) || Number(amount) <= 0) {
+//       setMessage('请输入有效的充值金额');
+//       return;
+//     }
+//     setLoading(true);
+//     setMessage('');
+//     try {
+//       // 充值接口调用，注意后端用的是请求参数形式传递 userId 和 amount
+//       const response = await axios.post('/echo/user/recharge', null, {
+//         params: {
+//           userId,
+//           amount: Number(amount),
+//         },
+//       });
+//       setMessage(response.data.message || '充值成功！');
+//       setAmount('');
+//     } catch (error) {
+//       setMessage(error.response?.data?.message || '充值失败，请重试');
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   return (
+//     <div className="recharge-page">
+//       <h2>充值服务</h2>
+//       <div>
+//         <label>
+//           充值金额：
+//           <input
+//             type="number"
+//             min="1"
+//             value={amount}
+//             onChange={(e) => setAmount(e.target.value)}
+//             disabled={loading}
+//           />
+//         </label>
+//       </div>
+//       <button onClick={handleRecharge} disabled={loading}>
+//         {loading ? '处理中...' : '提交充值'}
+//       </button>
+//       {message && <p>{message}</p>}
+//     </div>
+//   );
+// };
+
+// export default Recharge;
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useUser } from '../../context/UserContext';
+
+const Recharge = () => {
+  const [amount, setAmount] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [showPayDialog, setShowPayDialog] = useState(false);
+  const [payProcessing, setPayProcessing] = useState(false);
+
+  const { user } = useUser();
+  const userId = user?.userId;
+
+  // 点击提交充值，打开模拟支付弹窗
+  const handleSubmit = () => {
+    if (!userId) {
+      setMessage('未登录，无法充值');
+      return;
+    }
+    if (!amount || isNaN(amount) || Number(amount) <= 0) {
+      setMessage('请输入有效的充值金额');
+      return;
+    }
+    setMessage('');
+    setShowPayDialog(true);
+  };
+
+  // 模拟支付弹窗点击“确认支付”
+  const handlePayConfirm = async () => {
+    setPayProcessing(true);
+    setMessage('');
+
+    // 模拟支付等待 2 秒
+    setTimeout(async () => {
+      try {
+        // 支付成功后调用后端充值接口
+        const response = await axios.post('/echo/user/recharge', null, {
+          params: {
+            userId,
+            amount: Number(amount),
+          },
+        });
+
+        setMessage(response.data.message || '充值成功！');
+        setAmount('');
+      } catch (error) {
+        setMessage(error.response?.data?.message || '充值失败，请重试');
+      } finally {
+        setPayProcessing(false);
+        setShowPayDialog(false);
+      }
+    }, 2000);
+  };
+
+  // 取消支付弹窗
+  const handlePayCancel = () => {
+    setShowPayDialog(false);
+    setMessage('支付已取消');
+  };
+
+  return (
+    <div className="recharge-page" style={{ maxWidth: 400, margin: 'auto', padding: 20 }}>
+      <h2>充值服务</h2>
+      <div style={{ marginBottom: 12 }}>
+        <label>
+          充值金额：
+          <input
+            type="number"
+            min="1"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            disabled={loading || payProcessing}
+            style={{ marginLeft: 8, width: 120 }}
+          />
+        </label>
+      </div>
+      <button onClick={handleSubmit} disabled={loading || payProcessing}>
+        {loading || payProcessing ? '处理中...' : '提交充值'}
+      </button>
+
+      {message && <p style={{ marginTop: 12 }}>{message}</p>}
+
+      {/* 模拟支付弹窗 */}
+      {showPayDialog && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1000,
+          }}
+        >
+          <div
+            style={{
+              backgroundColor: '#fff',
+              padding: 20,
+              borderRadius: 8,
+              width: 300,
+              textAlign: 'center',
+              boxShadow: '0 0 10px rgba(0,0,0,0.25)',
+            }}
+          >
+            <h3>模拟支付</h3>
+            <p>支付金额：{amount} 元</p>
+
+            {payProcessing ? (
+              <p>支付处理中，请稍候...</p>
+            ) : (
+              <>
+                <button onClick={handlePayConfirm} style={{ marginRight: 10 }}>
+                  确认支付
+                </button>
+                <button onClick={handlePayCancel}>取消</button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Recharge;