57 lines
2.5 KiB
JavaScript
57 lines
2.5 KiB
JavaScript
import React from "react";
|
|
import toast from "react-hot-toast";
|
|
|
|
export default function PaymentModal({ isOpen, onClose, amount }) {
|
|
if (!isOpen) return null;
|
|
|
|
const handlePayment = () => {
|
|
toast.error("微信支付接口调用失败");
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
|
|
<div className="bg-white w-[90%] max-w-md rounded-lg">
|
|
<div className="p-4 border-b">
|
|
<div className="flex justify-between items-center">
|
|
<h3 className="text-lg font-medium">支付方式</h3>
|
|
<button onClick={onClose} className="text-gray-400">
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="text-center mb-4">
|
|
<p>支付金额</p>
|
|
<p className="text-xl font-bold">{amount.toFixed(2)}元</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-4">
|
|
<div className="flex items-center">
|
|
<svg
|
|
className="w-6 h-6 mr-3 text-[#07c160]"
|
|
viewBox="0 0 28 28"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9.442 15.027c-0.12 0.060-0.239 0.088-0.359 0.088-0.239 0-0.458-0.109-0.598-0.309l-0.050-0.070-2.157-4.633c-0.020-0.040-0.020-0.070-0.020-0.109 0-0.199 0.159-0.359 0.359-0.359 0.080 0 0.149 0.020 0.219 0.060l2.546 1.796c0.189 0.129 0.408 0.199 0.648 0.199 0.189 0 0.369-0.050 0.527-0.139l12.036-7.284c-2.267-2.616-5.821-4.314-9.843-4.314-7.005 0-12.69 5.247-12.69 11.721 0 3.514 1.796 6.668 4.593 8.743 0.219 0.159 0.359 0.408 0.359 0.697 0 0.080-0.020 0.159-0.040 0.229-0.129 0.478-0.349 1.264-0.359 1.294-0.020 0.070-0.040 0.149-0.040 0.219 0 0.199 0.159 0.359 0.359 0.359 0.070 0 0.139-0.020 0.199-0.070l2.367-1.365c0.189-0.109 0.408-0.169 0.627-0.169 0.109 0 0.229 0.020 0.329 0.050 1.614 0.478 3.347 0.737 5.148 0.737 7.005 0 12.69-5.247 12.69-11.721 0-1.944-0.548-3.769-1.505-5.375l-14.342 8.693z" />
|
|
</svg>
|
|
<span>微信支付</span>
|
|
</div>
|
|
<div className="w-6 h-6 rounded-full border-2 border-yellow-400 flex items-center justify-center">
|
|
<div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="w-full bg-yellow-400 text-white py-3 rounded-full"
|
|
onClick={handlePayment}
|
|
>
|
|
确认支付
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|