From eecabc4fb01d9f2ecacc085d3a07f77537e89b4c Mon Sep 17 00:00:00 2001 From: lyp Date: Tue, 20 May 2025 17:10:45 +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 | 283 +++++++++++++++++++ src/components/balance/BalanceHead.tsx | 39 ++- src/components/balance/balance-head.css | 11 +- src/request/api.ts | 4 + src/static/packimg.png | Bin 0 -> 3314 bytes 5 files changed, 332 insertions(+), 5 deletions(-) create mode 100644 src/components/PackageModal/PackageModal.tsx create mode 100644 src/static/packimg.png diff --git a/src/components/PackageModal/PackageModal.tsx b/src/components/PackageModal/PackageModal.tsx new file mode 100644 index 0000000..acc88c2 --- /dev/null +++ b/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['columns'] = [ + { + title: () =>
序号
, + dataIndex: 'index', + width: 70, // 设置宽度 + key: 'index', + align: 'center', + render: (_text, _record, index) => (page - 1) * 10 + index + 1, + }, + { + title:
套餐包名称
, + dataIndex: 'packageName', + // fixed: 'right', + width: 120, + align: 'center', + key: 'packageOrderItemId', + ellipsis: { + showTitle: true, + }, + + }, + { + title:
项目名称
, + dataIndex: 'orderTitle', + // fixed: 'right', + width: 120, + align: 'center', + key: 'packageOrderItemId', + ellipsis: { + showTitle: true, + }, + + }, + { + title:
类型
, + dataIndex: 'mode', + // fixed: 'right', + width: 80, + align: 'center', + key: 'packageOrderItemId', + render: (text) => ( +
{text == '1'? '退回' : '使用'}
+ ) + + }, + { + title:
使用数量
, + dataIndex: 'itemUseCount', + // fixed: 'right', + width: 80, + align: 'center', + key: 'packageOrderItemId', + + }, + { + title:
剩余数量
, + dataIndex: 'itemCount', + // fixed: 'right', + width: 80, + align: 'center', + key: 'packageOrderItemId', + + }, + + // { + // title:
关联订单编号
, + // dataIndex: 'orderId', + // // fixed: 'right', + // width: 120, + // align: 'center', + // key: 'packageOrderItemId', + // ellipsis: { + // showTitle: true, + // }, + + // }, + // { + // title:
关联订单类型
, + // dataIndex: 'orderType', + // key: 'orderType', + // width: 160, + // align: 'center', + // render: (text) => ( + //
{text == 'ai' ? 'AI喵著' : text}
+ // ) + // }, + { + title:
交易时间
, + dataIndex: 'gmtCreate', + key: 'packageOrderItemId', + align: 'center', + width: 160, + }, + { + title:
描述
, + 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([]); + const [keyWords, setKeyWords] = useState('') + const [startTime, setStartTime] = useState(null) + const [endTime, setEndTime] = useState(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 ( +
+ {messageContext} + +
+ { + setNowValue(e.target.value) + if (!e.target.value) { + setKeyWords('') + } + }} + onSearch={(value: string) => { + console.log(value); + setKeyWords(value) + + }} + style={{ width: 198, height: 36, marginRight: 12 }} + > + + + + +
+
+ { + // setPage(currentPage); + // }, + // showSizeChanger: false, + // current: page + + // } + // } + pagination={false} + // scroll={{ y: 500 }} + bordered + key="packageOrderItemId" rowKey="packageOrderItemId" + /> + +
+ { + setPage(page) + }} /> +
+ + + ) +} diff --git a/src/components/balance/BalanceHead.tsx b/src/components/balance/BalanceHead.tsx index 2d0dd7e..93a81e8 100644 --- a/src/components/balance/BalanceHead.tsx +++ b/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 (
@@ -50,7 +55,7 @@ export default function BalanceHead() { width: 68, height: 1, background: '#EAEAEA', - marginLeft: 18 + // marginLeft: 0 }}>
{ setRecordModal(true) @@ -62,6 +67,22 @@ export default function BalanceHead() { 分账记录
+
+
{ + setPackageModal(true) + }}> + +
+ 套餐包使用 +
+
@@ -82,6 +103,7 @@ export default function BalanceHead() { }}>分账记录 */} + { + setPackageModal(false) + + }}> + + + + ) } \ No newline at end of file diff --git a/src/components/balance/balance-head.css b/src/components/balance/balance-head.css index b80a420..20eba10 100644 --- a/src/components/balance/balance-head.css +++ b/src/components/balance/balance-head.css @@ -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; diff --git a/src/request/api.ts b/src/request/api.ts index 15fe264..541b0a2 100644 --- a/src/request/api.ts +++ b/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 }) + + //--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- diff --git a/src/static/packimg.png b/src/static/packimg.png new file mode 100644 index 0000000000000000000000000000000000000000..50f869928b1aadefacf90aaacf182367fe92e597 GIT binary patch literal 3314 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 literal 0 HcmV?d00001