generated from template/vite-react-template
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { Modal } from 'antd';
|
||
import { create } from 'zustand';
|
||
|
||
interface PayModalStore {
|
||
open: boolean;
|
||
setOpen: (open: boolean) => void;
|
||
money: number;
|
||
setMoney: (money: number) => void;
|
||
}
|
||
export const usePayModalStore = create<PayModalStore>((set) => ({
|
||
open: false,
|
||
setOpen: (open: boolean) => set({ open }),
|
||
money: 0,
|
||
setMoney: (money: number) => set({ money }),
|
||
}));
|
||
|
||
export const PayModal = () => {
|
||
const { open, setOpen, money } = usePayModalStore();
|
||
return (
|
||
<Modal open={open} onCancel={() => setOpen(false)} maskClosable={false} footer={null}>
|
||
<div className='px-4 py-4 flex flex-col gap-4 select-none'>
|
||
<h2 className='text-2xl font-bold mb-4'>支付确认</h2>
|
||
<p className='text-lg'>请确认支付金额：{money} 元</p>
|
||
<div className='flex gap-2'>
|
||
<button className='bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 cursor-pointer'>微信支付</button>
|
||
<button className='bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 cursor-pointer'>支付宝支付</button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|