Skip to content

J
jinfa-admin
Commit 701a9836 authored by Bill's avatar Bill
Browse files
Options

refactor: 重构首页

parent aa9d996a
Show whitespace changes
Inline Side-by-side
Showing with 276 additions and 112 deletions
src/pages/content/announcements/index.tsx
View file @ 701a9836
......@@ -71,8 +71,8 @@ const Announcements = () => {
title: title || '',
columnType: columnType != 0 ? columnType : '',
status: status != 0 ? status : '',
startTime: st && st * 1000,
endTime: et && et * 1000,
startTime: st,
endTime: et,
current: 1,
pageSize: 10,
...params
......
src/pages/content/utils/utils.tsx
View file @ 701a9836
......@@ -80,7 +80,8 @@ const ADVERTISE_APP_COLUMN_TYPE = {
// 内容管理 - 公告栏目
const ANNOUNCE_COLUMN_TYPE = {
'1': '会员首页公告',
'2': '注册须知'
'2': '注册须知',
'3': '入库须知'
}
// 内容管理 - 图片管理 - 使用场景
......
src/pages/home/components/Order/columnChart.tsx
View file @ 701a9836
......@@ -3,13 +3,19 @@ import React from 'react';
import { Chart, Tooltip, Point, Line, Interval } from "bizcharts";
interface IProps {
currentIndex: number,
data: {
dateTime: string | {},
count: number,
amount: number
}[],
height: number,
}
const colors = ["#6394f9", "#62daaa"];
const ColumnChart: React.FC<IProps> = (props) => {
const { data, height } = props;
return (
<Chart height={302} autoFit data={props.data} >
<Chart height={height} autoFit data={data} >
<Tooltip shared />
<Interval
tooltip={['dateTime*count', (text, num) => {
......@@ -49,4 +55,8 @@ const ColumnChart: React.FC<IProps> = (props) => {
)
}
ColumnChart.defaultProps = {
height: 302
}
export default ColumnChart;
src/pages/home/components/Order/index.tsx
View file @ 701a9836
......@@ -12,11 +12,20 @@ const OrderContainer = () => {
const { loading, responseData, ref } = useViewRequest<GetReportPlatformHomeGetTradeAndAfterSaleTallyResponse, any>(PublicApi.getReportPlatformHomeGetTradeAndAfterSaleTally, {})
const { loading: orderStatisticsLoading, responseData: orderStatisticsData, ref: orderStatisticsRef } = useViewRequest<GetReportPlatformHomeGetOrderListResponse, any>(PublicApi.getReportPlatformHomeGetOrderList, {})
const renderLoading = () => {
return (
[1, 2, 3].map((_item) => {
return (
<Col xxl={24} xl={12} lg={12} md={24} sm={24} xs={24}>
<Card loading={true} />
</Col>
)
})
)
}
const renderChild = () => {
return (
<Row gutter={[24, 12]} style={{display: 'flex', flexDirection: 'row'}} ref={ref}>
<Col xxl={6} xl={24} lg={24} md={24} sm={24} xs={24} style={{display: 'flex', flexDirection: 'column'}}>
<Row style={{height: '100%'}} gutter={[24, 12]}>
{
responseData && Object.keys(responseData).map((item, key) => {
return (
<Col xxl={24} xl={12} lg={12} md={24} sm={24} xs={24} key={item}>
......@@ -46,12 +55,24 @@ const OrderContainer = () => {
)
})
}
</List>
</Card>
</Col>
)
})
)
}
return (
<Row gutter={[24, 12]} style={{display: 'flex', flexDirection: 'row'}} ref={ref}>
<Col xxl={6} xl={24} lg={24} md={24} sm={24} xs={24} style={{display: 'flex', flexDirection: 'column'}}>
<Row style={{height: '100%'}} gutter={[24, 12]}>
{
(loading) && (
renderLoading()
) || (
renderChild()
)
}
</Row>
</Col>
......
src/pages/home/components/Order/statisticsChart.tsx
View file @ 701a9836
......@@ -13,13 +13,14 @@ import { GetReportPlatformHomeGetOrderListResponse } from '@/services/reportApi'
interface Iprops {
orderData: GetReportPlatformHomeGetOrderListResponse | null,
loading: boolean
loading: boolean,
height?: number,
}
const OrderStatistics: React.FC<Iprops> = (props) => {
const { orderData, loading } = props
const { orderData, loading, height } = props
const [timeRadio, setTimeRadio] = useState<TimeEnum>(TimeEnum.WEEK)
const [currentChartData, setCurrentChartData] = useState<Ilist[]>([]);
const [currentChartData, setCurrentChartData] = useState<{dateTime: {}, count: number, amount: number}[]>([]);
const handleChangeTime = (e) => {
setTimeRadio(e.target.value)
const dataMap = {
......@@ -61,7 +62,6 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
return (
<Card
headStyle={{borderBottom:'none'}}
style={{height: '100%'}}
title="订单统计"
bordered={false}
loading={loading}
......@@ -76,7 +76,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
<Row style={{margin: '36px 0 0 0'}}>
<Col span={24}>
{/* 折线图 */}
<ColumnChart data={currentChartData} />
<ColumnChart data={currentChartData} height={height!} />
</Col>
<Col span={24}>
<Row>
......@@ -85,7 +85,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
return (
<Col xxl={6} xl={6} lg={12} md={12} sm={24} xs={24} key={key}>
<div className={styles.lineDesc}>
<img src={item.icon} className={styles.icon} alt=""/>
<img src={item.icon} className={styles.icon}/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>{item.value}</p>
<p className={styles.lineDescTip}>{item.tips}</p>
......@@ -102,4 +102,8 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
)
}
OrderStatistics.defaultProps = {
height: 302
}
export default OrderStatistics
src/pages/home/components/PurchaseCenter/index.less 0 → 100644
View file @ 701a9836
@media (min-width: 1600px) {
.lastCard {
margin-top: 12px;
}
}
.sideListBox{
:global{
.ant-list-item-meta-title{
font-size: 24px;
font-weight: 500;
color: #303133;
}
}
}
.lineDesc{
display: flex;
align-items: center;
margin-top: 14px;
.icon {
display: block;
width: 48px;
height: 48px;
margin: 24px 16px 24px 24px;
}
.lineDescText{
p{
margin-bottom: 8px;
line-height: 1;
}
.lineDescTitle{
font-size: 24px;
font-weight: 500;
color: #303133;
overflow: hidden;
}
.lineDescTip{
font-size: 12px;
font-weight: 400;
color: #909399;
}
}
}
src/pages/home/components/PurchaseCenter/index.tsx 0 → 100644
View file @ 701a9836
import { PublicApi } from '@/services/api';
import { GetReportPlatformHomeGetTradeAndAfterSaleTallyResponse } from '@/services/reportApi';
import { GetReportMemberHomeGetPurchaseTallyResponse, GetReportPlatformHomeGetPurchaseListResponse } from '@/services/ReportV2Api';
import { RightOutlined } from '@ant-design/icons';
import { Col, Row, Card, List } from 'antd';
import React, { useMemo } from 'react';
import { Link } from 'umi';
import useViewRequest from '../../common/hooks/useViewRequest';
import OrderStatistics from '../Order/statisticsChart';
import styles from './index.less'
const PurchaseCenter = () => {
const { loading, responseData, ref } = useViewRequest<GetReportPlatformHomeGetTradeAndAfterSaleTallyResponse, any>(PublicApi.getReportPlatformHomeGetTradeAndAfterSaleTally, {})
const { loading: orderStatisticsLoading, responseData: orderStatisticsData, ref: orderStatisticsRef } = useViewRequest<GetReportPlatformHomeGetPurchaseListResponse, any>(PublicApi.getReportPlatformHomeGetPurchaseList, {})
const listItem = useMemo(() => {
return [
{
name: '待审核采购询价',
count: 0,
link: '/'
},
{
name: '待审核采购竞价',
count: 1,
link: '/'
},
{
name: '待审核招标项目',
count: 2,
link: '/'
}
]
}, [])
return (
<Row gutter={[24, 12]} style={{display: 'flex', flexDirection: 'row'}} ref={ref}>
<Col xxl={6} xl={24} lg={24} md={24} sm={24} xs={24} style={{display: 'flex', flexDirection: 'column'}}>
<Card
headStyle={{borderBottom:'none'}}
title={'待处理采购哦'}
bordered={false}
style={{height: '100%'}}
loading={loading}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
{
listItem.map((row) => {
return (
<List.Item
key={row.name}
actions={[<Link to={row?.link}>查看&nbsp;<RightOutlined /></Link>]}
>
<List.Item.Meta
title={row.count.toString()}
description={row.name}
/>
</List.Item>
)
})
}
</List>
</Card>
</Col>
<Col xxl={18} xl={24} lg={24} ref={orderStatisticsRef}>
<OrderStatistics height={158} orderData={orderStatisticsData} loading={orderStatisticsLoading}/>
</Col>
</Row>
)
}
export default PurchaseCenter
src/pages/home/components/Settlement/index.tsx
View file @ 701a9836
import React, { useEffect, useState} from 'react';
import React, { useEffect, useMemo, useState} from 'react';
import { Row, Col } from 'antd';
import styles from './index.less';
import cx from 'classnames';
......@@ -12,125 +12,128 @@ import feeIcon3 from '@/asserts/home-icon-17.png'
import feeIcon4 from '@/asserts/home-icon-18.png'
import feeIcon5 from '@/asserts/home-icon-19.png'
import feeIcon6 from '@/asserts/home-icon-20.png'
import {useInViewport} from '@umijs/hooks';
import { Link } from 'umi';
import { GetReportPlatformHomeGetAccountAndSettleAccountTallyResponse } from '@/services/reportApi';
import useViewRequest from '../../common/hooks/useViewRequest';
const Settlement: React.FC = () => {
const [settlements, setSettlements] = useState<any>({});
//@ts-ignore
// const [productInViewPort] = useInViewport(() => document.querySelector('#product'));
const [inViewPort, ref] = useInViewport<HTMLDivElement>();
const [settlementStatus, setSettlementStatus] = useState({
hasGetData: false,
loading: false,
})
const { loading, responseData, ref } = useViewRequest<GetReportPlatformHomeGetAccountAndSettleAccountTallyResponse, any>(PublicApi.getReportPlatformHomeGetAccountAndSettleAccountTally, {})
/**
* /report/platform/home/getTradeAndAfterSaleTally
* 获取交易与售后计数报表
*/
useEffect(() => {
if(inViewPort && !settlementStatus.hasGetData) {
setSettlementStatus((state) => ({...state, loading: true }))
PublicApi.getReportPlatformHomeGetAccountAndSettleAccountTally()
.then(({data, code}) => {
setSettlementStatus((state) => ({...state, loading: false, hasGetData: true }))
if(code === 1000) {
// setOrderData(data);
setSettlements(data);
console.log(data);
const list = useMemo(() => {
return [
{
title: '待付款代收账款结算',
icon: feeIcon1,
count: responseData?.toBePay?.count,
link: responseData?.toBePay?.link
},
{
title: '已完成代收账款结算',
icon: feeIcon2,
count: responseData?.complete?.count,
link: responseData?.complete?.link
}
})
];
}, [responseData])
const otherList = useMemo(() => {
return {
"group1": [
{
title: "待审核提现申请",
count: responseData?.tobeValifyCashout?.count,
icon: feeIcon3,
link: responseData?.tobeValifyCashout?.link,
name: responseData?.tobeValifyCashout?.name,
},
{
title: '待支付提现申请',
icon: feeIcon4,
count: responseData?.tobePayCashout.count,
link: responseData?.tobePayCashout?.link,
name: responseData?.tobePayCashout?.name,
}
],
"group2": [
{
title: "待付款积分结算",
count: responseData?.tobeValifyCashout?.count,
icon: feeIcon5,
link: responseData?.tobeValifyCashout?.link,
name: responseData?.tobeValifyCashout?.name,
},
{
title: '已完成积分结算',
icon: feeIcon6,
count: responseData?.tobePayCashout.count,
link: responseData?.tobePayCashout?.link,
name: responseData?.tobePayCashout?.name,
}
}, [inViewPort])
]
}
}, [responseData])
return (
<Row gutter={[24, 24]} style={{marginTop: 9, marginBottom: 0}} ref={ref}>
<Col xxl={5} xl={5} lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<div className={styles.notePaperBox}>
<div className={styles.notePaperContainer}>
<div className={styles.noteHeader}>
<img src={feeIcon1} alt=""/>
<span className={styles.text}>待付款代收账款结算</span>
</div>
<div className={styles.noteGap}></div>
<div className={styles.noteBody}>
<span className={styles.value}>{settlements.toBePay?.count}</span>
<Link to={settlements.toBePay?.link}>查看 <RightOutlined /></Link>
</div>
</div>
</div>
</Col>
<Col xxl={5} xl={5}lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<div className={cx(styles.notePaperBox, styles.notePaperBoxGreen)}>
{
list.map((_row, index) => {
const boxCx = cx(styles.notePaperBox, {
[styles.notePaperBoxGreen]: index === 1
})
return (
<Col xxl={5} xl={5} lg={12} md={12} sm={24} xs={24} style={{ paddingBottom: 0 }}>
<div className={boxCx}>
<div className={styles.notePaperContainer}>
<div className={styles.noteHeader}>
<img src={feeIcon2} alt=""/>
<span className={styles.text}>已完成代收账款结算</span>
<img src={_row.icon} alt=""/>
<span className={styles.text}>{_row.title}</span>
</div>
<div className={styles.noteGap}></div>
<div className={styles.noteBody}>
<span className={styles.value}>{settlements.complete?.count}</span>
<Link to={settlements.complete?.link}>查看</Link>
<span className={styles.value}>{_row.count}</span>
{
_row.link && (
<Link to={_row.link}>查看 <RightOutlined /></Link>
) || (
<div>查看 <RightOutlined /></div>
)
}
</div>
</div>
</div>
</Col>
<Col xxl={7} xl={7} lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
)
})
}
{
Object.keys(otherList).map((_row: keyof typeof otherList | string & {}) => {
return (
<Col xxl={7} xl={7} lg={12} md={12} sm={24} xs={24} style={{ paddingBottom: 0 }} key={_row}>
<Row >
<Col span={24} style={{padding:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<div className={styles.info}>
<img src={feeIcon3} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>{settlements.tobeValifyCashout?.count}</p>
<p className={styles.lineDescTip}>待审核提现申请</p>
</div>
</div>
<Link to={settlements.tobeValifyCashout?.link}>查看&nbsp;<RightOutlined /></Link>
</div>
</Col>
<Col span={24} style={{paddingBottom:0, marginTop: '12px'}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<div className={styles.info}>
<img src={feeIcon4} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>{settlements.tobePayCashout?.count}</p>
<p className={styles.lineDescTip}>待支付提现申请</p>
</div>
</div>
<Link to={settlements.tobePayCashout?.link}>查看&nbsp;<RightOutlined /></Link>
</div>
</Col>
</Row>
</Col>
<Col xxl={7} xl={7} lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<Row>
<Col span={24} style={{padding:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<div className={styles.info}>
<img src={feeIcon5} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>{settlements.scoreToBePay?.count}</p>
<p className={styles.lineDescTip}>待付款积分结算</p>
</div>
</div>
<Link to={settlements.scoreToBePay?.link}>查看&nbsp;<RightOutlined /></Link>
</div>
</Col>
<Col span={24} style={{paddingBottom:0, marginTop: '12px'}}>
{
otherList[_row].map((_item: { icon: any, count: number, title: string, link: string, name: string}, index: number) => {
return (
<Col span={24} style={{ padding:0, marginTop: index === 1 ? '12px' : 0 }}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<div className={styles.info}>
<img src={feeIcon6} alt=""/>
<img src={_item.icon} />
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>{settlements.scoreComplete?.count}</p>
<p className={styles.lineDescTip}>已完成积分结算</p>
<p className={styles.lineDescTitle}>{_item?.count}</p>
<p className={styles.lineDescTip}>{_item?.title}</p>
</div>
</div>
<Link to={settlements.scoreComplete?.link}>查看&nbsp;<RightOutlined /></Link>
<Link to={_item?.link}>查看&nbsp;<RightOutlined /></Link>
</div>
</Col>
)
})
}
</Row>
</Col>
)
})
}
</Row>
)
}
......
src/pages/home/index.tsx
View file @ 701a9836
......@@ -8,6 +8,7 @@ import DataCenter from './components/DataCenter'
import RiskCenter from './components/RiseCenter';
import MemberStatisticsContainer from './components/MemberStatistics/MemberStatisticsContainer';
import OrderContainer from './components/Order';
import PurchaseCenter from './components/PurchaseCenter';
const Home: React.FC<{}> = () => {
......@@ -25,12 +26,13 @@ const Home: React.FC<{}> = () => {
<Space direction="vertical" style={{width:'100%', height: '100%'}} >
<OrderContainer />
</Space>
<Space direction="vertical" style={{width:'100%', height: '100%'}} >
<PurchaseCenter />
</Space>
{/* 商品品牌统计 */}
<div id="product">
<Space direction="vertical" style={{width:'100%'}}>
<StatisticsColumn />
</Space>
</div>
{/* 付款提现统计 */}
<Space direction="vertical" style={{width:'100%'}}>
......
src/services/api.ts
View file @ 701a9836
......@@ -15,6 +15,7 @@ import * as EnhanceApi from './enhanceApi';
import * as AfterServiceApi from './AfterServiceApi';
import * as PurchaseApi from './PurchaseApi';
import * as PlatformApi from './PlatformApi';
import * as ReportApiV2 from './ReportV2Api';
/**
* 可在这里写入自定义的接口
......@@ -42,4 +43,5 @@ export const PublicApi = {
...AfterServiceApi,
...PurchaseApi,
...PlatformApi,
...ReportApiV2,
}
ytt.config.ts
View file @ 701a9836
......@@ -16,7 +16,8 @@ const tokenList = [
{ name: 'enhance', token: '594a7e7ff17f6f40fb9fb726c1da9a3f282a926a8d386eb6cbfd668a3f75f251', categoryIds: [0] }, // 加工服务
{ name: 'AfterService', token: 'bac1c7ca2c63869ec87085b0b33e830fea19f707dea5763f1bf8f2dc5996bde8', categoryIds: [0] }, // 售后服务
{ name: 'Platform', token: 'cadc3b13452c3ec67b5ef0c57063f12142e857a9eaa64669e80165adf42f5861', categoryIds: [0] }, // 平台后台v2
{ name: 'MemberV2', token: '87f86a297246fbf1c0dff7d34f13729cb194935a95db077a5009ac4ea48cea6f', categoryIds: [0] } //会员服务 V2
{ name: 'MemberV2', token: '87f86a297246fbf1c0dff7d34f13729cb194935a95db077a5009ac4ea48cea6f', categoryIds: [0] }, //会员服务 V2
{ name: 'ReportV2', token: 'dab50c384c27f1c981a03f2c44ad76d1e7e1f60b4520bd279cea67f5cf146cee', categoryIds: [0] }, // 报表服务v2
]
const getConfigMap = (tokens) => tokens.map(v => ({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment