Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

套餐包使用详情

Browse Source
This commit is contained in:
lyp 2025-05-20 17:10:45 +08:00
parent fd005fd3bb
commit eecabc4fb0
5 changed files with 332 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
src/components/PackageModal/PackageModal.tsx Normal file
View File

@ -0,0 +1,283 @@
import { useEffect, useState, useContext } from 'react'
// import { GlobalContext } from "../../../context/GlobalContext.ts";
import { GlobalContext } from "../../context/GlobalContext.ts";
import useMessage from "antd/es/message/useMessage";
import { Table, Spin, DatePicker, Button, Input, Pagination } from 'antd';
import dayjs, { } from 'dayjs';
const { Search } = Input;
import { ClearOutlined } from '@ant-design/icons';
import type {
TableProps,
DatePickerProps
} from 'antd';
import { getPackageDetail } from '../../request/api'
// import dayjs, { } from 'dayjs';
import locale from 'antd/es/date-picker/locale/zh_CN';
export default function PackageModal() {
interface DataType {
index?: number;
}
const columns: TableProps<DataType>['columns'] = [
{
title: () => <div style={{ textAlign: 'center' }}>序号</div>,
dataIndex: 'index',
width: 70, // 设置宽度
key: 'index',
align: 'center',
render: (_text, _record, index) => (page - 1) * 10 + index + 1,
},
{
title: <div style={{ textAlign: 'center' }}>套餐包名称</div>,
dataIndex: 'packageName',
// fixed: 'right',
width: 120,
align: 'center',
key: 'packageOrderItemId',
ellipsis: {
showTitle: true,
},
},
{
title: <div style={{ textAlign: 'center' }}>项目名称</div>,
dataIndex: 'orderTitle',
// fixed: 'right',
width: 120,
align: 'center',
key: 'packageOrderItemId',
ellipsis: {
showTitle: true,
},
},
{
title: <div style={{ textAlign: 'center' }}>类型</div>,
dataIndex: 'mode',
// fixed: 'right',
width: 80,
align: 'center',
key: 'packageOrderItemId',
render: (text) => (
<div >{text == '1'? '退回' : '使用'}</div>
)
},
{
title: <div style={{ textAlign: 'center' }}>使用数量</div>,
dataIndex: 'itemUseCount',
// fixed: 'right',
width: 80,
align: 'center',
key: 'packageOrderItemId',
},
{
title: <div style={{ textAlign: 'center' }}>剩余数量</div>,
dataIndex: 'itemCount',
// fixed: 'right',
width: 80,
align: 'center',
key: 'packageOrderItemId',
},
// {
// title: <div style={{ textAlign: 'center' }}>关联订单编号</div>,
// dataIndex: 'orderId',
// // fixed: 'right',
// width: 120,
// align: 'center',
// key: 'packageOrderItemId',
// ellipsis: {
// showTitle: true,
// },
// },
// {
// title: <div style={{ textAlign: 'center' }}>关联订单类型</div>,
// dataIndex: 'orderType',
// key: 'orderType',
// width: 160,
// align: 'center',
// render: (text) => (
// <div >{text == 'ai' ? 'AI喵著' : text}</div>
// )
// },
{
title: <div style={{ textAlign: 'center' }}>交易时间</div>,
dataIndex: 'gmtCreate',
key: 'packageOrderItemId',
align: 'center',
width: 160,
},
{
title: <div style={{ textAlign: 'center' }}>描述</div>,
width: 400,
dataIndex: 'description',
key: 'packageOrderItemId',
align: 'center',
ellipsis: {
showTitle: true,
},
},
];
const dateFormat = 'YYYY-MM-DD';
const [messageApi, messageContext] = useMessage();
const [isLoading, setIsLoading] = useState(false)
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
const [nowValue, setNowValue] = useState('');
const [tableData, setTableData] = useState<any[]>([]);
const [keyWords, setKeyWords] = useState('')
const [startTime, setStartTime] = useState<any | null>(null)
const [endTime, setEndTime] = useState<any | null>(null)
// 更改开始日期
const startTimeChange: DatePickerProps['onChange'] = (date) => {
// const time = dayjs(date).format(dateFormat)
// console.log('日期', date, dateString);
setStartTime(date)
};
const endTimeChange: DatePickerProps['onChange'] = (date) => {
// console.log(date, dateString);
// console.log('日期', date, dateString);
setEndTime(date)
// dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
};
// 初始化搜索条件及分页
const init = () => {
setNowValue('')
setKeyWords('')
setStartTime(null)
setEndTime(null)
setPage(1)
}
const globalContext = useContext(GlobalContext);
const getData = async (page: any) => {
setIsLoading(true)
try {
const res: any = await getPackageDetail(globalContext.user.userId, {
page: page,
rows: 10,
keywords: keyWords,
startTime: startTime ? dayjs(startTime).format(dateFormat) : '',
endTime: endTime ? dayjs(endTime).format(dateFormat) : '',
})
setIsLoading(false)
setTableData(res.rows)
setTotal(res.total)
} catch (error: any) {
if (error.response) {
const data = error.response.data;
messageApi.open({
type: 'error',
content: data.msg ? data.msg : `${data.path}(${data.status})`,
});
} else {
console.error(error)
}
}
// setPage(res.page)
}
useEffect(() => {
getData(page)
}, [page])
useEffect(() => {
getData(1)
}, [keyWords, startTime, endTime])
return (
<div>
{messageContext}
<Spin tip="加载中..." spinning={isLoading}>
<div style={{ marginBottom: 10 }}>
<Search placeholder="请输入关键字"
value={nowValue}
allowClear
// value={keyWords}
onChange={(e: any) => {
setNowValue(e.target.value)
if (!e.target.value) {
setKeyWords('')
}
}}
onSearch={(value: string) => {
console.log(value);
setKeyWords(value)
}}
style={{ width: 198, height: 36, marginRight: 12 }}
></Search>
<DatePicker placeholder="开始时间"
style={{ width: 198, marginRight: 12 }}
locale={locale}
onChange={startTimeChange}
value={startTime}
allowClear
/>
<DatePicker placeholder="结束时间"
style={{ width: 198, marginRight: 12 }}
locale={locale}
onChange={endTimeChange}
value={endTime}
allowClear
/>
<Button
style={{
// marginLeft: 10,
// backgroundColor: '#FF9F08'
}}
icon={<ClearOutlined />}
onClick={() => {
init()
}}
>
清除
</Button>
</div>
<div style={{
height: 620,
}}>
<Table columns={columns} dataSource={tableData}
// pagination={
// {
// pageSize: 10,
// total: total,
// onChange: (currentPage) => {
// setPage(currentPage);
// },
// showSizeChanger: false,
// current: page
// }
// }
pagination={false}
// scroll={{ y: 500 }}
bordered
key="packageOrderItemId" rowKey="packageOrderItemId"
/>
</div>
<div className='product-release-pagination'>
<Pagination current={page} total={total} defaultPageSize={10} onChange={(page) => {
setPage(page)
}} />
</div>
</Spin>
</div>
)
}

39
src/components/balance/BalanceHead.tsx
View File

@ -5,8 +5,11 @@ 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)
@ -16,6 +19,8 @@ export default function BalanceHead() {
// 分账记录弹窗
const [recordModal, setRecordModal] = useState(false)
// 套餐包使用详情弹窗
const [packageModal, setPackageModal] = useState(false)
return (
<div className="head-item balance-head">
<div className="label">
@ -50,7 +55,7 @@ export default function BalanceHead() {
width: 68,
height: 1,
background: '#EAEAEA',
marginLeft: 18
// marginLeft: 0
}}></div>
<div className='moneyModal-title' onClick={() => {
setRecordModal(true)
@ -62,6 +67,22 @@ export default function BalanceHead() {
分账记录
</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>
@ -82,6 +103,7 @@ export default function BalanceHead() {
}}>分账记录</div>
</Modal> */}
<Modal title="资金流水"
centered
footer={null}
destroyOnClose
open={capitalModal}
@ -95,6 +117,7 @@ export default function BalanceHead() {
</Modal>
<Modal title="分账记录"
centered
footer={null}
destroyOnClose
open={recordModal}
@ -107,6 +130,20 @@ export default function BalanceHead() {
<RecordModal></RecordModal>
</Modal>
<Modal title="套餐包使用详情"
centered
footer={null}
destroyOnClose
open={packageModal}
width={1500}
onCancel={() => {
setPackageModal(false)
}}>
<PackageModal></PackageModal>
</Modal>
</div >
)
}

11
src/components/balance/balance-head.css
View File

@ -28,8 +28,8 @@
display: none;
background-color: #ffffff;
position: absolute;
width: 120px;
height: 100px;
/* width: 120px; */
/* height: 100px; */
left: -50px;
top: 40px;
/* border: 1px solid red; */
@ -40,8 +40,8 @@
}
.moneyModal-box {
width: 120px;
height: 100px;
/* width: 120px; */
/* height: 100px; */
display: flex;
flex-direction: column;
justify-content: space-evenly;
@ -70,6 +70,9 @@
font-size: 16px;
color: #333333;
font-weight: 400;
padding:15px 20px ;
/* background-color: pink; */
width: 120px;
}
.transparentBox{
background-color: transparent;

4
src/request/api.ts
View File

@ -31,6 +31,10 @@ export const getInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string) =>
// 修改开票信息
export const updateInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string, params: any) => request.put(`/operator-plugin/api/invoicerecharge/update/${invoiceRechargeId}`, params)
// 获取套餐包使用详情
export const getPackageDetail = (userId:string,params:any) => request.get(`/operator-plugin/app/packageorderitem/listpagerelease/${userId}`, { params })
//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

BIN
src/static/packimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB