From b2b474f14fcd79456ff6362679a32e418a09305a Mon Sep 17 00:00:00 2001
From: lyp <lyp@123.com>
Date: Wed, 21 May 2025 09:39:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A5=97=E9=A4=90=E5=8C=85=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PackageModal/PackageModal.tsx | 474 ++++++++++---------
 src/components/balance/BalanceHead.tsx       |   4 +-
 src/layout/head/Head.tsx                     | 243 +++++-----
 src/request/api.ts                           |   2 +-
 4 files changed, 368 insertions(+), 355 deletions(-)

diff --git a/src/components/PackageModal/PackageModal.tsx b/src/components/PackageModal/PackageModal.tsx
index acc88c2..782a919 100644
--- a/src/components/PackageModal/PackageModal.tsx
+++ b/src/components/PackageModal/PackageModal.tsx
@@ -1,283 +1,293 @@
-import { useEffect, useState, useContext } from 'react'
-// import { GlobalContext } from "../../../context/GlobalContext.ts";
+import { useState, useEffect, useContext } from 'react'
+import { Table, Spin, message, Modal } from 'antd';
+import {
+    get,
+} from "../../util/AjaxUtils.ts";
+import { getPackageDetail } from '../../request/api.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
+    TableColumnsType,
 } 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;
+        usericId: string;
+        icPriceMaterial: number;
+        icPriceAll: number;
+        createTime: string;
+        packageOrderId: string;
 
     }
-    const columns: TableProps<DataType>['columns'] = [
+
+    interface DetailType {
+        orderTitle: string; //项目名称
+        description: string; //描述
+        gmtCreate: string; //创建时间
+        mode: number;//类型 1退回 2使用
+
+    }
+    const [messageApi, contextHolder] = message.useMessage();
+    const [packList, setPackList] = useState<any[]>([]) //服务包列表
+    const [packPage, setPackPage] = useState(1) //服务包分页
+    const [packTotal, setPackTotal] = useState(0) //服务包总数
+    const [packDetailModal, setPackDetailModal] = useState(false) //服务包详情
+
+    const [detailPage, setDetailPage] = useState(1) //服务包详情分页
+    const [detailTotal, setDetailTotal] = useState(0) //服务包详情总数
+    const [detailList, setDetailList] = useState<any[]>([]) //服务包详情列表
+    // const [packageOrderId, setPackageOrderId] = useState('') //服务包id
+    const [packloading, setPackloading] = useState(false)
+    // 获取我得服务包信息
+    const getPickList = (page: number, packageType: string) => {
+
+        get<any>({
+            messageApi,
+            url: `/api/proj/servicepkg/packageorder/listpage/self`,
+            config: {
+                params: {
+                    page: page,
+                    rows: 10,
+                    packageType: packageType
+                }
+            },
+            onBefore() {
+                setPackloading(true)
+            },
+            onSuccess({ data }) {
+
+                setPackList(data.rows)
+                setPackTotal(data.total)
+
+            },
+            onFinally() {
+                setPackloading(false)
+            }
+        })
+    }
+    const globalContext = useContext(GlobalContext);
+    const [packageOrderId, setPackageOrderId] = useState('') //服务包id
+    // 获取服务包详情
+    const packageDetail = async (packageOrderId: string, page: number) => {
+        const res: any = await getPackageDetail(globalContext.user.userId, packageOrderId, { page: page, rows: 10 })
+        console.log(res);
+        setDetailList(res.rows)
+        setDetailTotal(res.total)
+
+    }
+
+    useEffect(() => {
+        getPickList(packPage, '')
+    }, [packPage])
+    useEffect(() => {
+        packageDetail(packageOrderId, detailPage)
+    }, [detailPage])
+    const packColumns: TableColumnsType<DataType> = [
         {
-            title: () => <div style={{ textAlign: 'center' }}>序号</div>,
+            title: '序号',
             dataIndex: 'index',
-            width: 70, // 设置宽度
-            key: 'index',
+            key: 'packageOrderId',
             align: 'center',
-            render: (_text, _record, index) => (page - 1) * 10 + index + 1,
+            render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
+
         },
         {
-            title: <div style={{ textAlign: 'center' }}>套餐包名称</div>,
+            title: '套餐名称',
             dataIndex: 'packageName',
-            // fixed: 'right',
-            width: 120,
+            key: 'packageOrderId',
+            // 居中显示
             align: 'center',
+        },
+        // packageType
+        {
+            title: '套餐类型',
+            dataIndex: 'packageInfoAppDTO',
+            key: 'packageOrderId',
+            // 居中显示
+            align: 'center',
+            render: (text) => {
+                return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
+            }
+        },
+        // {
+        //     title: '套餐类型',
+        //     dataIndex: 'packageInfoAppDTO',
+        //     key: 'packageOrderId',
+        //     // 居中显示
+        //     align: 'center',
+        //     render: (text) => {
+        //         return <div>{text} </div>
+        //     }
+        // },
+        {
+            title: '价格',
+            dataIndex: 'packageTotalMoney',
+            key: 'packageOrderId',
+            // 居中显示
+            align: 'center',
+            render: (text) => {
+                return <div>{text / 100}元</div>
+            }
+        },
+        {
+            title: '剩余次数',
+            dataIndex: 'packageTotalSurplusCount',
+            align: 'center',
+            key: 'packageOrderId',
+            render: (text: number) => {
+                return <div>{text} </div>
+            }
+        },
+        {
+            title: '总次数',
+            dataIndex: 'packageTotalCount',
+            align: 'center',
+            key: 'packageOrderId',
+            render: (text: any) => {
+                return <div>{text} </div>
+            }
+        },
+        {
+            title: '下单时间',
+            align: 'center',
+            dataIndex: 'gmtCreate',
+            key: 'packageOrderId',
+            // render: (text: string) => {
+            //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
+            // }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            dataIndex: 'operate',
+            key: 'packageOrderId',
+            render: (_value, record) => {
+                return <a onClick={() => {
+                    // console.log(record);
+                    setPackDetailModal(true)
+                    packageDetail(record.packageOrderId, 1)
+                    setPackageOrderId(record.packageOrderId)
+                    setDetailPage(1)
+                }}>查看详情</a>
+            }
+        },
+    ];
+
+    const detailColums: TableColumnsType<DetailType> = [
+        {
+            title: '序号',
+            dataIndex: 'index',
             key: 'packageOrderItemId',
-            ellipsis: {
-                showTitle: true,
-            },
+            align: 'center',
+            width: 100,
+            render: (_text, _record, index) => (detailPage - 1) * 10 + index + 1, // 显示序号，从1开始
 
         },
         {
-            title: <div style={{ textAlign: 'center' }}>项目名称</div>,
+            title: '项目名称',
             dataIndex: 'orderTitle',
-            // fixed: 'right',
-            width: 120,
-            align: 'center',
             key: 'packageOrderItemId',
+            align: 'center',
+            width: 150,
             ellipsis: {
                 showTitle: true,
             },
 
+
         },
         {
-            title: <div style={{ textAlign: 'center' }}>类型</div>,
+            title: '类型',
             dataIndex: 'mode',
-            // fixed: 'right',
-            width: 80,
-            align: 'center',
             key: 'packageOrderItemId',
-            render: (text) => (
-                <div >{text == '1'? '退回' : '使用'}</div> 
-            )
+            align: 'center',
+            width: 120,
+            render: (text) => {
+                return <span>
+                    {text == 1 ? '退回' : '使用'}
+                </span>
+            }
+
 
         },
-          {
-            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>,
+            title: '创建时间',
             dataIndex: 'gmtCreate',
             key: 'packageOrderItemId',
             align: 'center',
-            width: 160,
+            width: 200,
+        },
+         {
+            title: '使用数量',
+            dataIndex: 'itemUseCount',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 100,
+        },
+           {
+            title: '剩余数量',
+            dataIndex: 'itemCount',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 100,
         },
         {
-            title: <div style={{ textAlign: 'center' }}>描述</div>,
-            width: 400,
+            title: '描述',
             dataIndex: 'description',
             key: 'packageOrderItemId',
             align: 'center',
+            width: 400,
             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)
+        <Spin tip="加载中..." spinning={packloading} >
+            {contextHolder}
+            <Table
+                columns={packColumns}
+                dataSource={packList}
+                pagination={{
+                    defaultPageSize: 10, // 设置默认一页显示 5 条数据,
+                    current: packPage,
+                    total: packTotal,
+                    onChange: (page: number) => {
+                        setPackPage(page);
+                        getPickList(page, '')
+                        // console.log(page);
+                    }
+                }}
+                rowKey="packageOrderId"
+            />
+            <Modal title="套餐包使用详情"
+                centered
+                footer={null}
+                destroyOnClose
+                open={packDetailModal}
+                width={1200}
+                onCancel={() => {
+                    setPackDetailModal(false)
 
-                        }}
-                        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>
+                <Table
+                    columns={detailColums}
+                    dataSource={detailList}
+                    pagination={{
+                        defaultPageSize: 10, // 设置默认一页显示 5 条数据,
+                        current: detailPage,
+                        total: detailTotal,
+                        onChange: (page: number) => {
+                            setDetailPage(page);
+                            packageDetail(packageOrderId, page)
+                            // console.log(page);
+                        }
+                    }}
+                    rowKey="packageOrderItemId"
+                />
+
+            </Modal>
+        </Spin>
     )
 }
diff --git a/src/components/balance/BalanceHead.tsx b/src/components/balance/BalanceHead.tsx
index 93a81e8..535c2e8 100644
--- a/src/components/balance/BalanceHead.tsx
+++ b/src/components/balance/BalanceHead.tsx
@@ -130,12 +130,12 @@ export default function BalanceHead() {
                 <RecordModal></RecordModal>
 
             </Modal>
-            <Modal title="套餐包使用详情"
+            <Modal title="套餐包使用明细"
                 centered
                 footer={null}
                 destroyOnClose
                 open={packageModal}
-                width={1500}
+                width={1200}
                 onCancel={() => {
                     setPackageModal(false)
 
diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx
index 3143bf2..0c2a6ef 100644
--- a/src/layout/head/Head.tsx
+++ b/src/layout/head/Head.tsx
@@ -19,7 +19,9 @@ import BalanceHead from '../../components/balance/BalanceHead.tsx';
 import RechargeHead from '../../components/recharge/RechargeHead.tsx';
 import {
     //  Empty, 
-    Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button
+    Dropdown, MenuProps, message, Modal, Space, Spin, Input,
+    //  Table,
+      Form, Button
     //   Form, Button, InputNumber
 } from "antd";
 // import {
@@ -30,16 +32,16 @@ import titleB from '../../static/Phone/titleB.png'
 import line from '../../static/Phone/line.png'
 
 import pack from '@theme/img/pack.png'
-
+import PackAgeModal from '../../components/PackageModal/PackageModal.tsx'
 // import pack from '@theme/pack.png'
 // import type { TableProps, FormProps } from 'antd';
-interface DataType {
-    usericId: string;
-    icPriceMaterial: number;
-    icPriceAll: number;
-    createTime: string;
+// interface DataType {
+//     usericId: string;
+//     icPriceMaterial: number;
+//     icPriceAll: number;
+//     createTime: string;
 
-}
+// }
 // interface icDataType {
 //     contactName: string;//联系人姓名
 //     contactPhone: string;//联系人电话
@@ -150,9 +152,9 @@ import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
 import inv from '../../static/inv.png'
 import MyOrder from '../../components/myOrder/MyOrder.tsx'
 import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
-import type {
-    TableColumnsType,
-} from 'antd';
+// import type {
+//     TableColumnsType,
+// } from 'antd';
 // import { log } from 'console';
 // import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
 export default function Head() {
@@ -328,38 +330,38 @@ export default function Head() {
 
 
 
-    const [packloading, setPackloading] = useState(false)
-    const [packList, setPackList] = useState<any[]>([]) //服务包列表
-    const [packPage, setPackPage] = useState(1) //服务包分页
-    const [packTotal, setPackTotal] = useState(0) //服务包总数
+    // const [packloading, setPackloading] = useState(false)
+    // const [packList, setPackList] = useState<any[]>([]) //服务包列表
+    // const [packPage, setPackPage] = useState(1) //服务包分页
+    // const [packTotal, setPackTotal] = useState(0) //服务包总数
     // const [packageType, setPackageType] = useState('')
     // 获取我得服务包信息
-    const getPickList = (page: number, packageType: string) => {
+    // const getPickList = (page: number, packageType: string) => {
 
-        get<any>({
-            messageApi,
-            url: `/api/proj/servicepkg/packageorder/listpage/self`,
-            config: {
-                params: {
-                    page: page,
-                    rows: 10,
-                    packageType: packageType
-                }
-            },
-            onBefore() {
-                setPackloading(true)
-            },
-            onSuccess({ data }) {
+    //     get<any>({
+    //         messageApi,
+    //         url: `/api/proj/servicepkg/packageorder/listpage/self`,
+    //         config: {
+    //             params: {
+    //                 page: page,
+    //                 rows: 10,
+    //                 packageType: packageType
+    //             }
+    //         },
+    //         onBefore() {
+    //             setPackloading(true)
+    //         },
+    //         onSuccess({ data }) {
 
-                setPackList(data.rows)
-                setPackTotal(data.total)
+    //             setPackList(data.rows)
+    //             setPackTotal(data.total)
 
-            },
-            onFinally() {
-                setPackloading(false)
-            }
-        })
-    }
+    //         },
+    //         onFinally() {
+    //             setPackloading(false)
+    //         }
+    //     })
+    // }
     // useEffect(() => {
     //     console.log('路径',currentUrl);
 
@@ -888,81 +890,81 @@ export default function Head() {
         applyContactPhone: '',
         applyContactCompany: ''
     })
-    const packColumns: TableColumnsType<DataType> = [
-        {
-            title: '序号',
-            dataIndex: 'index',
-            key: 'packageOrderId',
-            align: 'center',
-            render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
+    // const packColumns: TableColumnsType<DataType> = [
+    //     {
+    //         title: '序号',
+    //         dataIndex: 'index',
+    //         key: 'packageOrderId',
+    //         align: 'center',
+    //         render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
 
-        },
-        {
-            title: '套餐名称',
-            dataIndex: 'packageName',
-            key: 'packageOrderId',
-            // 居中显示
-            align: 'center',
-        },
-        // packageType
-        {
-            title: '套餐类型',
-            dataIndex: 'packageInfoAppDTO',
-            key: 'packageOrderId',
-            // 居中显示
-            align: 'center',
-            render: (text) => {
-                return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
-            }
-        },
-        // {
-        //     title: '套餐类型',
-        //     dataIndex: 'packageInfoAppDTO',
-        //     key: 'packageOrderId',
-        //     // 居中显示
-        //     align: 'center',
-        //     render: (text) => {
-        //         return <div>{text} </div>
-        //     }
-        // },
-        {
-            title: '价格',
-            dataIndex: 'packageTotalMoney',
-            key: 'packageOrderId',
-            // 居中显示
-            align: 'center',
-            render: (text) => {
-                return <div>{text / 100}元</div>
-            }
-        },
-        {
-            title: '剩余次数',
-            dataIndex: 'packageTotalSurplusCount',
-            align: 'center',
-            key: 'packageOrderId',
-            render: (text: number) => {
-                return <div>{text} </div>
-            }
-        },
-        {
-            title: '总次数',
-            dataIndex: 'packageTotalCount',
-            align: 'center',
-            key: 'packageOrderId',
-            render: (text: any) => {
-                return <div>{text} </div>
-            }
-        },
-        {
-            title: '下单时间',
-            align: 'center',
-            dataIndex: 'gmtCreate',
-            key: 'packageOrderId',
-            // render: (text: string) => {
-            //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
-            // }
-        },
-    ];
+    //     },
+    //     {
+    //         title: '套餐名称',
+    //         dataIndex: 'packageName',
+    //         key: 'packageOrderId',
+    //         // 居中显示
+    //         align: 'center',
+    //     },
+    //     // packageType
+    //     {
+    //         title: '套餐类型',
+    //         dataIndex: 'packageInfoAppDTO',
+    //         key: 'packageOrderId',
+    //         // 居中显示
+    //         align: 'center',
+    //         render: (text) => {
+    //             return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
+    //         }
+    //     },
+    //     // {
+    //     //     title: '套餐类型',
+    //     //     dataIndex: 'packageInfoAppDTO',
+    //     //     key: 'packageOrderId',
+    //     //     // 居中显示
+    //     //     align: 'center',
+    //     //     render: (text) => {
+    //     //         return <div>{text} </div>
+    //     //     }
+    //     // },
+    //     {
+    //         title: '价格',
+    //         dataIndex: 'packageTotalMoney',
+    //         key: 'packageOrderId',
+    //         // 居中显示
+    //         align: 'center',
+    //         render: (text) => {
+    //             return <div>{text / 100}元</div>
+    //         }
+    //     },
+    //     {
+    //         title: '剩余次数',
+    //         dataIndex: 'packageTotalSurplusCount',
+    //         align: 'center',
+    //         key: 'packageOrderId',
+    //         render: (text: number) => {
+    //             return <div>{text} </div>
+    //         }
+    //     },
+    //     {
+    //         title: '总次数',
+    //         dataIndex: 'packageTotalCount',
+    //         align: 'center',
+    //         key: 'packageOrderId',
+    //         render: (text: any) => {
+    //             return <div>{text} </div>
+    //         }
+    //     },
+    //     {
+    //         title: '下单时间',
+    //         align: 'center',
+    //         dataIndex: 'gmtCreate',
+    //         key: 'packageOrderId',
+    //         // render: (text: string) => {
+    //         //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
+    //         // }
+    //     },
+    // ];
     // 优惠券弹窗
     // const [couponModal, setCouponModal] = useState(false)
     // const [belongArray,setBelongArray] = useState([])
@@ -1237,8 +1239,8 @@ export default function Head() {
             onClick: () => {
                 // setCouponModal(true)
                 setPackageModal(true)
-                setPackPage(1);
-                getPickList(1, '')
+                // setPackPage(1);
+                // getPickList(1, '')
                 // setPackageType('')
             }
         },
@@ -1363,8 +1365,8 @@ export default function Head() {
                             }}
                                 onClick={() => {
                                     setPackageModal(true)
-                                    setPackPage(1);
-                                    getPickList(1, '')
+                                    // setPackPage(1);
+                                    // getPickList(1, '')
                                 }}
                             >
                                 <img src={pack} width={19} height={19} alt="" />
@@ -1642,13 +1644,14 @@ export default function Head() {
                 destroyOnClose
                 centered
                 open={packageModal}
-                width={1000}
+                width={1200}
                 footer={null}
                 onCancel={() => {
                     setPackageModal(false)
-                    setPackPage(1);
+                    // setPackPage(1);
                 }}>
-                <Spin tip="加载中..." spinning={packloading} >
+                <PackAgeModal></PackAgeModal>
+                {/* <Spin tip="加载中..." spinning={packloading} >
                     <Table
                         columns={packColumns}
                         dataSource={packList}
@@ -1664,7 +1667,7 @@ export default function Head() {
                         }}
                         rowKey="packageOrderId"
                     />
-                </Spin>
+                </Spin> */}
             </Modal>
             <Modal title="邀请码"
                 destroyOnClose
diff --git a/src/request/api.ts b/src/request/api.ts
index 541b0a2..8f6d57a 100644
--- a/src/request/api.ts
+++ b/src/request/api.ts
@@ -32,7 +32,7 @@ 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 })
+export const getPackageDetail = (userId:string,packageOrderId:string,params:any) => request.get(`/operator-plugin/app/packageorderitem/listpagerelease/${userId}?packageOrderId=${packageOrderId}`, { params })
 
 
 //---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------