refactor: 重构首页

src/pages/content/announcements/index.tsx

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

@@ -80,7 +80,8 @@ const ADVERTISE_APP_COLUMN_TYPE = {
 // 内容管理 - 公告栏目
 const ANNOUNCE_COLUMN_TYPE = {
   '1': '会员首页公告',
-  '2': '注册须知'
+  '2': '注册须知',
+  '3': '入库须知'
 }
 
 // 内容管理 - 图片管理 - 使用场景

src/pages/home/components/Order/columnChart.tsx

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

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

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

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

+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

-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

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

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

@@ -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 => ({