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-21 09:39:30 +08:00
parent eecabc4fb0
commit b2b474f14f
4 changed files with 368 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

474
src/components/PackageModal/PackageModal.tsx
View File

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

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

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

243
src/layout/head/Head.tsx
View File

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

2
src/request/api.ts
View File

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