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

head显示套餐包

Browse Source
This commit is contained in:
lyp 2025-03-11 14:06:21 +08:00
parent 45fd7c0e5d
commit 535c7264b3
3 changed files with 200 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/recharge/RechargeHead.tsx
View File

@ -5,43 +5,43 @@ import { useEffect, useState, useContext } from "react";
import { Axios, DevUserId } from "../../util/AjaxUtils.ts"; import { Axios, DevUserId } from "../../util/AjaxUtils.ts";
import { EventSourcePolyfill } from 'event-source-polyfill'; import { EventSourcePolyfill } from 'event-source-polyfill';
import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts"; import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
// import { import {
// get, get,
// } from "../../util/AjaxUtils.ts"; } from "../../util/AjaxUtils.ts";
// import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
type SseMsg = { type SseMsg = {
msg: string; msg: string;
type: string; type: string;
} }
export default function RechargeHead() { export default function RechargeHead() {
// const dispath = useDispatch() const dispath = useDispatch()
const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false); const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
const globalContext = useContext(GlobalContext); const globalContext = useContext(GlobalContext);
const globalDispatchContext = useContext(GlobalDispatchContext); const globalDispatchContext = useContext(GlobalDispatchContext);
const [messageApi] = message.useMessage(); const [messageApi] = message.useMessage();
// const getMyPackNum = () => { const getMyPackNum = () => {
// get<any>({ get<any>({
// messageApi, messageApi,
// url: `/api/proj/servicepkg/packageorder/count/self`, url: `/api/proj/servicepkg/packageorder/count/self`,
// onBefore() { onBefore() {
// }, },
// onSuccess({ data }) { onSuccess({ data }) {
// dispath({ dispath({
// type: 'upPackNum', type: 'upPackNum',
// val: { val: {
// ALL: data.ALL, ALL: data.ALL,
// MATERIAL: data.MATERIAL, MATERIAL: data.MATERIAL,
// } }
// }) })
// }, },
// onFinally() { onFinally() {
// } }
// }) })
// } }
// sse // sse
const initSse = () => { const initSse = () => {
let evtSource; let evtSource;
@ -60,7 +60,7 @@ export default function RechargeHead() {
reloadUser(messageApi, globalDispatchContext).then(() => { reloadUser(messageApi, globalDispatchContext).then(() => {
setIsPaymentModalOpen(false); setIsPaymentModalOpen(false);
}); });
// getMyPackNum() getMyPackNum()
} }
}; };

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

@ -1,15 +1,16 @@
import './head.css' import './head.css'
// import { NodeJS } from 'types/node'; // import { NodeJS } from 'types/node';
import { useDispatch, import {
// useSelector useDispatch,
} from 'react-redux' useSelector
} from 'react-redux'
import BalanceHead from '../../components/balance/BalanceHead.tsx'; import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx'; import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import { import {
// Empty, // Empty,
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table,
// Form, Button, InputNumber // Form, Button, InputNumber
} from "antd"; } from "antd";
// import type { TableProps, FormProps } from 'antd'; // import type { TableProps, FormProps } from 'antd';
interface DataType { interface DataType {
usericId: string; usericId: string;
@ -112,7 +113,7 @@ import PasswordChange from "../../components/password/PasswordChange.tsx";
// import headRightBg from '../../assets/head-right-bg.png'; // import headRightBg from '../../assets/head-right-bg.png';
import InvoiceList from "../../components/invoice/InvoiceList.tsx"; import InvoiceList from "../../components/invoice/InvoiceList.tsx";
import logoImg from '../../static/head/logo.png' import logoImg from '../../static/head/logo.png'
import userImg from '../../static/homeimg/userimg.png' // import userImg from '../../static/homeimg/userimg.png'
import kf from '../../static/head/kf.png' import kf from '../../static/head/kf.png'
import kfImg from '../../static/head/kfImg.png' import kfImg from '../../static/head/kfImg.png'
import { reMenuActive } from '../../util/cache'; import { reMenuActive } from '../../util/cache';
@ -127,11 +128,13 @@ import type {
} from 'antd'; } from 'antd';
// import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx' // import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
export default function Head() { export default function Head() {
const [packloading, setPackloading] = useState(false)
const [packList, setPackList] = useState<any[]>([]) //服务包列表 const [packList, setPackList] = useState<any[]>([]) //服务包列表
const [packPage, setPackPage] = useState(1) //服务包分页 const [packPage, setPackPage] = useState(1) //服务包分页
const [packTotal, setPackTotal] = useState(0) //服务包总数 const [packTotal, setPackTotal] = useState(0) //服务包总数
const [packageType, setPackageType] = useState('')
// 获取我得服务包信息 // 获取我得服务包信息
const getPickList = (page: number) => { const getPickList = (page: number, packageType: string) => {
get<any>({ get<any>({
messageApi, messageApi,
@ -140,10 +143,11 @@ export default function Head() {
params: { params: {
page: page, page: page,
rows: 10, rows: 10,
packageType: packageType
} }
}, },
onBefore() { onBefore() {
setPackloading(true)
}, },
onSuccess({ data }) { onSuccess({ data }) {
@ -152,7 +156,7 @@ export default function Head() {
}, },
onFinally() { onFinally() {
setPackloading(false)
} }
}) })
} }
@ -171,8 +175,51 @@ export default function Head() {
// const [selectIc, setSelectIc] = useState('') //选中的邀请码 // const [selectIc, setSelectIc] = useState('') //选中的邀请码
// const redxuState: any = useSelector(state => state) const redxuState: any = useSelector(state => state)
// const packNum = redxuState.packNum // const [packageType, setPackageType] = useState('')
const packNum = redxuState.packNum
const packItems: MenuProps['items'] = [
{
key: '1',
label: (
<div
onClick={() => {
setPackageModal(true)
setPackPage(1);
getPickList(1, 'ALL')
setPackageType('ALL')
}}
>
<span style={{
fontWeight: 'bold'
}}>全托管 : {packNum.ALL}件</span>
</div>
),
},
{
key: '2',
label: (
<div
onClick={() => {
setPackageModal(true)
setPackPage(1);
getPickList(1, 'MATERIAL')
setPackageType('MATERIAL')
}}
>
<span style={{
fontWeight: 'bold'
}}>写材料 : {packNum.MATERIAL}件</span>
</div>
),
},
]
// 消息通知弹窗 // 消息通知弹窗
const [noticeModal, setNoticeModal] = useState(false) const [noticeModal, setNoticeModal] = useState(false)
// 客服弹窗 // 客服弹窗
@ -774,32 +821,32 @@ export default function Head() {
await reloadUser(messageApi, globalDispatchContext); await reloadUser(messageApi, globalDispatchContext);
}; };
// 我的套餐包统计 // 我的套餐包统计
// const getMyPackNum = () => { const getMyPackNum = () => {
// get<any>({ get<any>({
// messageApi, messageApi,
// url: `/api/proj/servicepkg/packageorder/count/self`, url: `/api/proj/servicepkg/packageorder/count/self`,
// onBefore() { onBefore() {
// }, },
// onSuccess({ data }) { onSuccess({ data }) {
// // console.log(data); // console.log(data);
// dispath({ dispath({
// type: 'upPackNum', type: 'upPackNum',
// val: { val: {
// ALL:data.ALL, ALL: data.ALL,
// MATERIAL:data.MATERIAL, MATERIAL: data.MATERIAL,
// } }
// }) })
// }, },
// onFinally() { onFinally() {
// } }
// }) })
// } }
useEffect(() => { useEffect(() => {
getUnRead() getUnRead()
setInterval(reloadUserInterval, 5 * 60 * 1000); setInterval(reloadUserInterval, 5 * 60 * 1000);
// getMyPackNum() getMyPackNum()
}, []) }, [])
@ -905,7 +952,8 @@ export default function Head() {
// setCouponModal(true) // setCouponModal(true)
setPackageModal(true) setPackageModal(true)
setPackPage(1); setPackPage(1);
getPickList(1) getPickList(1, '')
setPackageType('')
} }
}, },
@ -940,6 +988,32 @@ export default function Head() {
{/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */} {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
<div className="right"> <div className="right">
<div className='kf' onClick={() => {
setkfModal(true)
}}>
<div className='kfIcon'>
<img src={kf} width={20} alt="" />
</div>
<div className='kfText'>
在线客服
</div>
</div>
<div className='headLine'></div>
{/* <div className='head-nav' onClick={() => {
window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
}}>
<QuestionCircleOutlined />
</div> */}
{/* <div className='headLine'></div> */}
<BalanceHead />
{/* <div className='headLine'></div> */}
<RechargeHead />
<div className='headLine'></div>
{/* <div className='kf' onClick={() => { {/* <div className='kf' onClick={() => {
setPackageModal(true) setPackageModal(true)
setPackPage(1); setPackPage(1);
@ -964,28 +1038,29 @@ export default function Head() {
</div> </div>
</div> </div>
</div> */} </div> */}
{/* <div className='headLine'></div> */}
<div className='kf' onClick={() => {
setkfModal(true)
}}>
<div className='kfIcon'>
<img src={kf} width={20} alt="" />
</div>
<div className='kfText'>
在线客服
</div>
</div> <Dropdown
<div className='headLine'></div>
{/* <div className='head-nav' onClick={() => { menu={{ items: packItems }}
window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程') >
}}>
<QuestionCircleOutlined /> <div className='kfText' style={{
</div> */} fontSize: 16,
{/* <div className='headLine'></div> */} color: '#FF9F08',
<BalanceHead /> fontWeight: 700,
{/* <div className='headLine'></div> */} cursor: 'pointer'
<RechargeHead /> }}
// onClick={() => {
// setPackageModal(true)
// setPackPage(1);
// getPickList(1,packageType)
// }}
>套餐包</div>
</Dropdown>
<div className='headLine'></div> <div className='headLine'></div>
<div className='invitationButton' onClick={() => { <div className='invitationButton' onClick={() => {
setinvitationModal(true) setinvitationModal(true)
@ -1013,9 +1088,9 @@ export default function Head() {
{/*<MessageHead/>*/} {/*<MessageHead/>*/}
<div style={{ display: 'flex', alignContent: 'center', padding: '0', cursor: 'pointer' }}> <div style={{ display: 'flex', alignContent: 'center', padding: '0', cursor: 'pointer' }}>
<div style={{ width: '50px', height: '50px', borderRadius: '25px', marginLeft: '', marginRight: '10px' }} > {/* <div style={{ width: '50px', height: '50px', borderRadius: '25px', marginLeft: '', marginRight: '10px' }} >
<img src={userImg} alt="" width={50} height={50} /> <img src={userImg} alt="" width={50} height={50} />
</div> </div> */}
<Dropdown menu={{ <Dropdown menu={{
items: items items: items
}}> }}>
@ -1161,23 +1236,25 @@ export default function Head() {
setPackageModal(false) setPackageModal(false)
setPackPage(1); setPackPage(1);
}}> }}>
<Table <Spin tip="加载中..." spinning={packloading} >
columns={packColumns} <Table
dataSource={packList} columns={packColumns}
pagination={{ dataSource={packList}
defaultPageSize: 10, // 设置默认一页显示 5 条数据, pagination={{
current: packPage, defaultPageSize: 10, // 设置默认一页显示 5 条数据,
total: packTotal, current: packPage,
onChange: (page: number) => { total: packTotal,
setPackPage(page); onChange: (page: number) => {
getPickList(page) setPackPage(page);
// console.log(page); getPickList(page, packageType)
// console.log(page);
} }
}} }}
rowKey="packageOrderId" rowKey="packageOrderId"
/> />
</Spin>
</Modal> </Modal>
<Modal title="邀请码" <Modal title="邀请码"
destroyOnClose destroyOnClose
@ -1194,7 +1271,7 @@ export default function Head() {
}}> }}>
<Spin tip="加载中..." spinning={isLoading}> <Spin tip="加载中..." spinning={isLoading}>
{/* <div className='invitation-box'> */} {/* <div className='invitation-box'> */}
{/* <div className='invBox-top'> {/* <div className='invBox-top'>
<div className='invBox-title'> <div className='invBox-title'>
我的邀请码 我的邀请码
</div> </div>
@ -1229,7 +1306,7 @@ export default function Head() {
</div> </div>
</div> </div>
</div> */} </div> */}
{/* <div className='invBox-top'> {/* <div className='invBox-top'>
<div className='invBox-titleTop' <div className='invBox-titleTop'
> >
@ -1257,7 +1334,7 @@ export default function Head() {
</div> */} </div> */}
{/* <div className='invBox-bot'> {/* <div className='invBox-bot'>
<div className='invBox-tips' > <div className='invBox-tips' >
{icRebateRatio ? {icRebateRatio ?

44
src/route/proj/ProjNew.tsx
View File

@ -44,31 +44,31 @@ interface DataType {
packageOrderId: string; packageOrderId: string;
} }
// import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
export default function ProjNew() { export default function ProjNew() {
// const dispath = useDispatch() const dispath = useDispatch()
// 更新redux的套餐包信息 // 更新redux的套餐包信息
// const getMyPackNum = () => { const getMyPackNum = () => {
// get<any>({ get<any>({
// messageApi, messageApi,
// url: `/api/proj/servicepkg/packageorder/count/self`, url: `/api/proj/servicepkg/packageorder/count/self`,
// onBefore() { onBefore() {
// }, },
// onSuccess({ data }) { onSuccess({ data }) {
// dispath({ dispath({
// type: 'upPackNum', type: 'upPackNum',
// val: { val: {
// ALL: data.ALL, ALL: data.ALL,
// MATERIAL: data.MATERIAL, MATERIAL: data.MATERIAL,
// } }
// }) })
// }, },
// onFinally() { onFinally() {
// } }
// }) })
// } }
const [debounceTimer, setDebounceTimer] = useState<any>(null); const [debounceTimer, setDebounceTimer] = useState<any>(null);
// 创建一个 ref 来引用推荐列表容器 // 创建一个 ref 来引用推荐列表容器
const recommendListRef = useRef<HTMLDivElement>(null); const recommendListRef = useRef<HTMLDivElement>(null);
@ -1094,7 +1094,7 @@ export default function ProjNew() {
reloadUser(messageApi, globalDispatchContext).then(() => { reloadUser(messageApi, globalDispatchContext).then(() => {
messageApi.success('扣款成功'); messageApi.success('扣款成功');
}); });
// getMyPackNum() getMyPackNum()
}, },
onFinally() { onFinally() {
setLoading(false); setLoading(false);