套餐包使用详情

src/components/PackageModal/PackageModal.tsx

@@ -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>
+    )
+}

src/components/balance/BalanceHead.tsx

@@ -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 >
     )
 }

src/components/balance/balance-head.css

@@ -28,8 +28,8 @@
     display: none;
     background-color: #ffffff;
     position: absolute;
-    width: 120px;
+    /* width: 120px; */
-    height: 100px;
+    /* height: 100px; */
     left: -50px;
     top: 40px;
     /* border: 1px solid red; */
@@ -40,8 +40,8 @@
 }
 
 .moneyModal-box {
-    width: 120px;
+    /* width: 120px; */
-    height: 100px;
+    /* 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;

src/request/api.ts

@@ -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 })
+
+
 //---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------