149 lines
5.4 KiB
TypeScript
149 lines
5.4 KiB
TypeScript
import './balance-head.css'
|
|
import { useContext, useState } from "react";
|
|
import { GlobalContext } from "../../context/GlobalContext.ts";
|
|
import { Modal } from 'antd';
|
|
import moneyImg from '@theme/img/head/money.png'
|
|
import CapitalModal from '../CapitalModal/CapitalModal.tsx';
|
|
import RecordModal from '../RecordModal/RecordModal.tsx'
|
|
import PackageModal from '../PackageModal/PackageModal.tsx'
|
|
import capitalImg from '../../static/capita.png'
|
|
import recordImg from '../../static/record.png'
|
|
import packImg from '../../static/packimg.png'
|
|
|
|
export default function BalanceHead() {
|
|
const globalContext = useContext(GlobalContext);
|
|
// const [isLoading, setIsLoading] = useState(false)
|
|
// const [moneyModal, setMoneyModal] = useState(false)
|
|
// 资金流水弹窗
|
|
const [capitalModal, setCapitalModal] = useState(false)
|
|
// 分账记录弹窗
|
|
const [recordModal, setRecordModal] = useState(false)
|
|
|
|
// 套餐包使用详情弹窗
|
|
const [packageModal, setPackageModal] = useState(false)
|
|
return (
|
|
<div className="head-item balance-head">
|
|
<div className="label">
|
|
<img src={moneyImg} alt="" />
|
|
<div style={{
|
|
color: 'var(--color-kefu)',
|
|
}}>余额</div>
|
|
|
|
</div>
|
|
<div className="balance" onClick={() => {
|
|
// console.log('查看余额')
|
|
// setMoneyModal(true)
|
|
}}>
|
|
{/* ￥ */}
|
|
{/* <img src={moneyImg} alt="" width={17} height={19} style={{marginRight:10}}/> */}
|
|
{globalContext.user.balance}
|
|
<div className='transparentBox'></div>
|
|
<div className='moneyModal'>
|
|
<div className='moneyModal-box'>
|
|
<div className='moneyModal-triangle'></div>
|
|
<div className='moneyModal-title' onClick={() => {
|
|
setCapitalModal(true)
|
|
}}>
|
|
<img src={capitalImg} style={{ marginTop: 1 }} width={15} height={20} alt="" />
|
|
<div style={{
|
|
marginLeft: 10,
|
|
}}>
|
|
资金流水
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
width: 68,
|
|
height: 1,
|
|
background: '#EAEAEA',
|
|
// marginLeft: 0
|
|
}}></div>
|
|
<div className='moneyModal-title' onClick={() => {
|
|
setRecordModal(true)
|
|
}}>
|
|
<img src={recordImg} style={{ marginTop: 1 }} width={20} height={20} alt="" />
|
|
<div style={{
|
|
marginLeft: 5,
|
|
}}>
|
|
分账记录
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
width: 68,
|
|
height: 1,
|
|
background: '#EAEAEA',
|
|
// marginLeft: 18
|
|
}}></div>
|
|
<div className='moneyModal-title' onClick={() => {
|
|
setPackageModal(true)
|
|
}}>
|
|
<img src={packImg} style={{ marginTop: 1 }} width={20} height={20} alt="" />
|
|
<div style={{
|
|
marginLeft: 5,
|
|
}}>
|
|
套餐包使用
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <Modal title="流水和分账"
|
|
footer={null}
|
|
destroyOnClose
|
|
open={moneyModal}
|
|
// width={1500}
|
|
onCancel={() => {
|
|
setMoneyModal(false)
|
|
|
|
}}>
|
|
<div style={{ cursor: 'pointer' }} onClick={() => {
|
|
setCapitalModal(true)
|
|
}}>资金流水</div>
|
|
<div style={{ cursor: 'pointer' }} onClick={() => {
|
|
setRecordModal(true)
|
|
}}>分账记录</div>
|
|
</Modal> */}
|
|
<Modal title="资金流水"
|
|
centered
|
|
footer={null}
|
|
destroyOnClose
|
|
open={capitalModal}
|
|
width={1500}
|
|
onCancel={() => {
|
|
setCapitalModal(false)
|
|
|
|
}}>
|
|
|
|
<CapitalModal></CapitalModal>
|
|
|
|
</Modal>
|
|
<Modal title="分账记录"
|
|
centered
|
|
footer={null}
|
|
destroyOnClose
|
|
open={recordModal}
|
|
width={1200}
|
|
onCancel={() => {
|
|
setRecordModal(false)
|
|
|
|
}}>
|
|
|
|
<RecordModal></RecordModal>
|
|
|
|
</Modal>
|
|
<Modal title="套餐包使用明细"
|
|
centered
|
|
footer={null}
|
|
destroyOnClose
|
|
open={packageModal}
|
|
width={1200}
|
|
onCancel={() => {
|
|
setPackageModal(false)
|
|
|
|
}}>
|
|
|
|
<PackageModal></PackageModal>
|
|
|
|
</Modal>
|
|
</div >
|
|
)
|
|
} |