修改提示框样式、完成付费片单、推荐跳转
Change-Id: Ie84c53d4e306435144b1f26ceb39cc182e99d57a
diff --git a/src/pages/UserCenter/UserRecharge.jsx b/src/pages/UserCenter/UserRecharge.jsx
index 7a2f9b3..b1dff24 100644
--- a/src/pages/UserCenter/UserRecharge.jsx
+++ b/src/pages/UserCenter/UserRecharge.jsx
@@ -1,42 +1,183 @@
-// export default Recharge;
+// // export default Recharge;
+// import React, { useState } from 'react';
+// import axios from 'axios';
+// import { useUser } from '../../context/UserContext';
+// import toast from 'react-hot-toast';
+// import { confirmAlert } from 'react-confirm-alert';
+// import 'react-confirm-alert/src/react-confirm-alert.css';
+
+// const UserRecharge = () => {
+// 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 UserRecharge;
import React, { useState } from 'react';
import axios from 'axios';
import { useUser } from '../../context/UserContext';
+import toast from 'react-hot-toast';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
const UserRecharge = () => {
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('未登录，无法充值');
+ toast.error('未登录，无法充值');
return;
}
if (!amount || isNaN(amount) || Number(amount) <= 0) {
- setMessage('请输入有效的充值金额');
+ toast.error('请输入有效的充值金额');
return;
}
- setMessage('');
- setShowPayDialog(true);
+
+ confirmAlert({
+ title: '确认支付',
+ message: `确认充值 ${amount} 元吗？`,
+ buttons: [
+ {
+ label: '确认支付',
+ onClick: () => handlePayConfirm(),
+ },
+ {
+ label: '取消',
+ onClick: () => toast('已取消充值'),
+ },
+ ],
+ });
};
- // 模拟支付弹窗点击“确认支付”
const handlePayConfirm = async () => {
setPayProcessing(true);
- setMessage('');
- // 模拟支付等待 2 秒
+ toast.loading('正在处理支付...', { id: 'recharge' });
+
setTimeout(async () => {
try {
- // 支付成功后调用后端充值接口
const response = await axios.post('/echo/user/recharge', null, {
params: {
userId,
@@ -44,23 +185,16 @@
},
});
- setMessage(response.data.message || '充值成功！');
+ toast.success(response.data.message || '充值成功！', { id: 'recharge' });
setAmount('');
} catch (error) {
- setMessage(error.response?.data?.message || '充值失败，请重试');
+ toast.error(error.response?.data?.message || '充值失败，请重试', { id: 'recharge' });
} 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>
@@ -72,56 +206,14 @@
min="1"
value={amount}
onChange={(e) => setAmount(e.target.value)}
- disabled={loading || payProcessing}
+ disabled={payProcessing}
style={{ marginLeft: 8, width: 120 }}
/>
</label>
</div>
- <button onClick={handleSubmit} disabled={loading || payProcessing}>
- {loading || payProcessing ? '处理中...' : '提交充值'}
+ <button onClick={handleSubmit} disabled={payProcessing}>
+ {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>
);
};