Skip to content

J
jinfa-platform
Commit 19e62fad authored by Bill's avatar Bill
Browse files
Options

refactor: 首页组件重构

parent 13aa9fff
Show whitespace changes
Inline Side-by-side
Showing with 287 additions and 264 deletions
src/layouts/BasicLayout.tsx
View file @ 19e62fad
......@@ -147,7 +147,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
const prolayoutStyle = isHome
? {
minHeight: '100vh',
minWidth: '1280px'
minWidth: '1380px'
}
: {}
......
src/pages/home/components/Authorize/index.tsx
View file @ 19e62fad
......@@ -2,18 +2,23 @@ import React from 'react';
import { getAuth } from '@/utils/auth';
interface Iprops {
/**
* 准入权限URL
*/
url: string,
canView?: boolean
canView?: boolean,
children: React.ReactNode
}
const Authorize: React.FC<Iprops> = (props) => {
const Authorize: React.FC<Iprops> = (props: Iprops) => {
const { url, canView, children } = props;
const auth = getAuth();
const authUrls = auth.urls;
return (
<>
{
authUrls.includes(props.url) || props.canView
? props.children
authUrls.includes(url) || canView
? children
: null
}
</>
......
src/pages/home/components/Centers/AfterSoldCenter.tsx
View file @ 19e62fad
......@@ -6,6 +6,9 @@ import { PublicApi } from '@/services/api';
import { Link } from 'umi'
import Authorize from '../Authorize';
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetAfterSaleTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
interface Iprops {};
......@@ -20,18 +23,15 @@ const KEY_TITLE = {
const EXCHANGE_APPLICATION = `/memberCenter/afterService/exchangeApplication/exchangeQuery`
const EXCHANGE_HANDLE = '/memberCenter/afterService/exchangeManage/exchangeQuery';
const SettlementAbility: React.FC<Iprops> = () => {
const AfterSoldCenter: React.FC<Iprops> = () => {
const { loading, responseData, ref, isError } = useViewRequest<GetReportMemberHomeGetAfterSaleTallyResponse, any>(PublicApi.getReportMemberHomeGetAfterSaleTally, {})
const auth = getAuth();
const roleType = auth.memberRoleType;
const request = useCallback(async () => {
const res = await PublicApi.getReportMemberHomeGetAfterSaleTally();
return res;
}, [])
return (
<AbilityContainer
<Layout
viewRef={ref}
title="售后中心"
tips="轻松完成订单售后在线换货、退货、维修环节"
tips={"轻松完成订单售后在线换货、退货、维修环节"}
extra={
<Authorize
url={roleType == 1 ? EXCHANGE_HANDLE : EXCHANGE_APPLICATION}
......@@ -41,22 +41,17 @@ const SettlementAbility: React.FC<Iprops> = () => {
</div>
</Authorize>
}
request={request}
loading={loading}
isError={isError}
>
{
({loading, requestData}) => {
return (
<>
{
loading
? <Skeleton active />
: Object.keys(requestData).map((record) => {
responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetAfterSaleTallyResponse) => {
return (
<div className={styles.wrapRow} key={record}>
<span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
<div className={styles.rowValues}>
{
requestData[record].map((item, key) => {
responseData[record].map((item, key) => {
return (
<div className={styles.wrapCol} key={key}>
<div className={styles.colTitle}>{item.name}</div>
......@@ -74,12 +69,8 @@ const SettlementAbility: React.FC<Iprops> = () => {
)
})
}
</>
)
}
}
</AbilityContainer>
</Layout>
)
}
export default SettlementAbility
export default AfterSoldCenter
src/pages/home/components/Centers/Contract.tsx
View file @ 19e62fad
import React, { useMemo } from 'react';
import React, { Fragment, useMemo } from 'react';
import { Button } from 'antd';
import Layout from './layout';
import useViewRequest from '../../hooks/useViewRequest';
import { PublicApi } from '@/services/api';
import { BellOutlined } from '@ant-design/icons';
import theme from '@/../config/lingxi.theme.config';
import { GetReportMemberHomeGetContractTallyResponse } from '@/services/ReportApi';
import styles from './center.less'
import { Link } from 'umi';
interface Iprops {}
const KEY_TITLE = {
"contractManageList": '合同管理',
"contractCoordinationList": '合同协同',
"applyAmountOrderList": '合同请款'
}
const Constract: React.FC<Iprops> = (props: Iprops) => {
const { loading, isError, hasRequest, responseData, ref } = useViewRequest(PublicApi.getReportMemberHomeGetEnhanceTally, {})
const constractTipsStyle = useMemo(() => ({
backgroundColor: theme["@secondary-color"],
color: theme["@primary-color"],
padding: '8px 12px',
fontSize: 12,
fontWeight: 500,
display: 'flex',
FlexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
// flexDirection: 'row',
}), [])
const { loading, isError, hasRequest, responseData, ref } = useViewRequest<GetReportMemberHomeGetContractTallyResponse, any>(PublicApi.getReportMemberHomeGetContractTally, {})
return (
<Layout
......@@ -30,13 +27,40 @@ const Constract: React.FC<Iprops> = (props: Iprops) => {
tips="提供在电子签章申请，合同管理、电子合同签订、合同请款、合同协同等功能"
loading={loading}
>
<div style={constractTipsStyle}>
<Fragment>
<div className={styles.ding_tips}>
<div>
<BellOutlined />
<span style={{marginLeft: '12px'}}>您还没有申请电子签章，请先申请电子签章</span>
</div>
<Button size="small" type="primary">点击申请</Button>
</div>
{
responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetContractTallyResponse) => {
return (
<div className={styles.wrapRow} key={record}>
<span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
<div className={styles.rowValues}>
{
responseData[record].map((item, key) => {
return (
<div className={styles.wrapCol} key={key}>
<div className={styles.colTitle}>{item.name}</div>
{
item.link
? <Link to={item.link} className={styles.colValue}>{item.count}</Link>
: <div className={styles.colValue}>{item.count}</div>
}
</div>
)
})
}
</div>
</div>
)
})
}
</Fragment>
</Layout>
)
}
......
src/pages/home/components/Centers/FundCenter.tsx
View file @ 19e62fad
import React, { useCallback} from 'react';
import AbilityContainer from './Container';
import styles from './center.less'
import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
import settlement_accountReceive from '@/assets/imgs/settlement_accountReceive.png';
import settlement_accountPayable from '@/assets/imgs/settlement_accountPayable.png';
import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
import { Row, Col, Skeleton } from 'antd';
import { PublicApi } from '@/services/api';
import { Link } from 'umi'
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import Layout from './layout';
import { GetReportMemberHomeGetAccountTallyResponse } from '@/services/ReportApi';
interface Iprops {};
const KEY_TO_TITLE = {
......@@ -18,10 +19,7 @@ const KEY_TO_TITLE = {
}
const FundCenter: React.FC<Iprops> = () => {
const request = useCallback(async () => {
const res = await PublicApi.getReportMemberHomeGetAccountTally();
return res;
}, [])
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetAccountTallyResponse, any>(PublicApi.getReportMemberHomeGetAccountTally, {})
const userAuth = getAuth();
const urls = userAuth.urls;
......@@ -50,19 +48,12 @@ const FundCenter: React.FC<Iprops> = () => {
]
return (
<AbilityContainer
<Layout
viewRef={ref}
title="资金账户管理"
tips={"提供资金账户管理、授信额度管理等功能。"}
request={request}
tips="提供资金账户管理、授信额度管理等功能。"
loading={loading}
>
{
({loading, requestData}) => {
return (
<div>
{
loading
? <Skeleton active />
: (
<>
<div className={styles.centerRow}>
{
......@@ -84,13 +75,13 @@ const FundCenter: React.FC<Iprops> = () => {
</div>
<div>
{
Object.keys(requestData).map((record) => {
responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetAccountTallyResponse) => {
return (
<div className={styles.wrapRow} key={record}>
<span className={styles.rowTitle}>{KEY_TO_TITLE[record]}</span>
<div className={styles.rowValues}>
{
requestData[record].map((item, key) => {
responseData[record].map((item, key) => {
return (
<div className={styles.wrapCol} key={key}>
<div className={styles.colTitle}>{item.name}</div>
......@@ -110,14 +101,7 @@ const FundCenter: React.FC<Iprops> = () => {
}
</div>
</>
)
}
</div>
)
}
}
</AbilityContainer>
</Layout>
)
}
......
src/pages/home/components/Centers/ProcessCenter.tsx
View file @ 19e62fad
......@@ -35,7 +35,7 @@ const ProcessCenter: React.FC<Iprops> = () => {
isError={isError}
>
{
responseData && Object.keys(responseData).map((record) => {
responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetEnhanceTallyResponse) => {
return (
<div className={styles.wrapRow} key={record}>
<span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
......
src/pages/home/components/Centers/ProductCenter.tsx
View file @ 19e62fad
import React, { useCallback } from 'react';
import AbilityContainer from './Container';
import { Row, Col, Space, Skeleton } from 'antd';
import React, { useCallback, useMemo } from 'react';
import { Space } from 'antd';
import styles from './center.less';
import { PublicApi } from '@/services/api';
import { Link } from 'umi';
import Authorize from '../Authorize';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetCommodityTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
interface Iprops {};
......@@ -13,55 +15,53 @@ const ADD_BRAND = "/memberCenter/commodityAbility/trademark/add";
const ADD_PRODUCT = '/memberCenter/commodityAbility/commodity/products/add';
const ProductCenter: React.FC<Iprops> = () => {
const request = useCallback(async () => {
const res = await PublicApi.getReportMemberHomeGetCommodityTally();
return res;
}, [])
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetCommodityTallyResponse, any>(PublicApi.getReportMemberHomeGetCommodityTally, {})
const extraList = useMemo(() => [
{
title: '设置库存',
authUrl: ADD_REPOSITORIES
},
{
title: '创建品牌',
authUrl: ADD_BRAND
},
{
title: '创建商品',
authUrl: ADD_PRODUCT
}
], [])
return (
<AbilityContainer
tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理"
<Layout
viewRef={ref}
title="商品中心"
tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理"
loading={loading}
isError={isError}
extra={
<Space>
{
extraList.map((_item) => {
return (
<Authorize
url={ADD_REPOSITORIES}
>
<div>
<Link to={ADD_REPOSITORIES}>设置库存</Link>
</div>
</Authorize>
<Authorize
url={ADD_BRAND}
>
<div>
<Link to={ADD_BRAND}>创建品牌</Link>
</div>
</Authorize>
<Authorize
url={ADD_PRODUCT}
url={_item.authUrl}
key={_item.authUrl}
>
<div>
<Link to={ADD_PRODUCT}>创建商品</Link>
<Link to={_item.authUrl}>{_item.title}</Link>
</div>
</Authorize>
)
})
}
</Space>
}
request={request}
>
{
({loading, requestData}) => {
const isArray = Array.isArray(requestData);
return (
<>
{
loading
? <Skeleton active />
: <div className={styles.wrapRow}>
<div className={styles.wrapRow}>
<span className={styles.rowTitle}>商品</span>
<div className={styles.rowValues}>
{
isArray && requestData.map((item, key) => {
responseData && responseData.map((item: GetReportMemberHomeGetCommodityTallyResponse[0], key) => {
return (
<div className={styles.wrapCol} key={key}>
<div className={styles.colTitle}>{item.name}</div>
......@@ -76,13 +76,7 @@ const ProductCenter: React.FC<Iprops> = () => {
}
</div>
</div>
}
</>
)
}
}
</AbilityContainer>
</Layout>
)
}
......
src/pages/home/components/Centers/SettlementCenter.tsx
View file @ 19e62fad
import React, { useCallback } from 'react';
import AbilityContainer from './Container';
import { Row, Col, Skeleton } from 'antd';
import React from 'react';
import styles from './center.less'
import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
......@@ -10,6 +8,9 @@ import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
import { PublicApi } from '@/services/api'
import { Link } from 'umi'
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetSettleAccountTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
interface Iprops {};
const KEY_TITLE = {
......@@ -19,6 +20,8 @@ const KEY_TITLE = {
receivableList: '应收账款结算'
}
const SettlementCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetSettleAccountTallyResponse, any>(PublicApi.getReportMemberHomeGetSettleAccountTally, {})
const userAuth = getAuth();
const urls = userAuth.urls;
const tagsList = [
......@@ -48,24 +51,15 @@ const SettlementCenter: React.FC<Iprops> = () => {
url: '/memberCenter/balance/accountsReceivable/invoice'
}
]
const request = useCallback(async () => {
const res = await PublicApi.getReportMemberHomeGetSettleAccountTally();
return res;
}, [])
return (
<AbilityContainer
<Layout
viewRef={ref}
title="结算中心"
tips="提供资资金结算、发票管理等功能"
request={request}
loading={loading}
isError={isError}
>
{
({loading, requestData}) => {
return (
<>
{
loading
? <Skeleton active />
: <>
<div className={styles.centerRow}>
{
tagsList.map((item) => {
......@@ -85,13 +79,13 @@ const SettlementCenter: React.FC<Iprops> = () => {
}
</div>
{
Object.keys(requestData).map((record) => {
responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetSettleAccountTallyResponse) => {
return (
<div className={styles.wrapRow} key={record}>
<span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
<div className={styles.rowValues}>
{
requestData[record].map((item, key) => {
responseData[record].map((item, key) => {
return (
<div className={styles.wrapCol} key={key}>
<div className={styles.colTitle}>{item.name}</div>
......@@ -110,12 +104,7 @@ const SettlementCenter: React.FC<Iprops> = () => {
})
}
</>
}
</>
)
}
}
</AbilityContainer>
</Layout>
)
}
......
src/pages/home/components/Centers/ShopCenter.tsx
View file @ 19e62fad
import React, { useCallback } from 'react';
import AbilityContainer from './Container';
import React, { Fragment, useMemo } from 'react';
import styles from './center.less'
import create_shop from '@/assets/imgs/create_shop.png';
import { BellOutlined } from '@ant-design/icons'
import { BellOutlined, RightOutlined } from '@ant-design/icons'
import { Button } from 'antd';
import { Link } from 'umi';
import Authorize from '../Authorize';
import { PublicApi } from '@/services/api';
import { Skeleton, Row, Col } from 'antd';
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetTemplateWebMemberShopWebFindCurrMemberShopResponse } from '@/services/TemplateV2Api';
import Layout from './layout';
interface Iprops {}
const SHOP_CENTER = '/memberCenter/shopAbility/template'
const CREATE_SHOP = '/memberCenter/shopAbility/infoManage';
const ShopCenter: React.FC<Iprops> = () => {
///template/shop/findShopList
const { loading, responseData, isError, ref } = useViewRequest<GetTemplateWebMemberShopWebFindCurrMemberShopResponse, any>(PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop, {})
const userAuth = getAuth();
const request = useCallback(async () => {
const {code, data} = await PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop();
return {
code: code,
data: {
totalCount: code === 1000 && data.id || 0
}
}
}, [])
const tagList = useMemo(() => [
{
icon: create_shop,
url: SHOP_CENTER,
title: "创建店铺"
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "店铺模板"
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "店铺装修"
}
], [])
return (
<AbilityContainer
<Layout
viewRef={ref}
title="店铺中心"
tips="轻松完成店铺的创建、店铺风格选择、店铺个性化装修"
extra={
......@@ -37,61 +48,43 @@ const ShopCenter: React.FC<Iprops> = () => {
</div>
</Authorize>
}
request={request}
loading={loading}
>
<Fragment>
{
({loading, requestData}) => {
return (
loading
? <Skeleton active />
: <div className={styles.centerRow}>
<Authorize url={CREATE_SHOP} canView={true}>
<div className={styles.tagsSpecial} >
<Link to={CREATE_SHOP} className={styles.tagsItem}>
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>创建店铺</div>
</Link>
{
requestData.totalCount === 0
? <div className={styles.ding_tips}>
<div className={styles.ding_icon}>
responseData && responseData.id && (
<div className={styles.ding_tips}>
<div>
<BellOutlined />
<span style={{marginLeft: '12px'}}>您还没有申请电子签章，请先申请电子签章</span>
</div>
<span>你还没有创建店铺，请先创建店铺</span>
<Button size="small" type="primary">点击申请</Button>
</div>
: null
)
}
</div>
</Authorize>
<Authorize url={SHOP_CENTER} canView={true}>
<div className={styles.centerCol}>
<Link to={SHOP_CENTER} className={styles.tagsItem} >
<div className={styles.icon}>
<img src={create_shop} />
<div className={styles.centerRow}>
{
tagList.map((_item) => {
return (
<Authorize url={_item.url} canView={true} key={_item.title}>
<Link to={_item.url} className={styles.tagsItem}>
<div className={styles.hoverLink}>
<img src={create_shop} className={styles.icon}/>
<div className={styles.text}>{_item.title}</div>
<div className={styles.hoverIconConatiner}>
<div className={styles.hoverIcon}>
<RightOutlined style={{ color: '#fff', fontSize: '8px'}} />
</div>
<div className={styles.text}>店铺模板</div>
</Link>
</div>
</Authorize>
<Authorize url={SHOP_CENTER} canView={true}>
<div className={styles.centerCol}>
<Link to={SHOP_CENTER} className={styles.tagsItem} >
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>店铺装修</div>
</Link>
</div>
</Authorize>
</div>
)
})
}
}
</AbilityContainer>
</div>
</Fragment>
</Layout>
)
}
......
src/pages/home/components/Centers/TradeCenter.tsx
View file @ 19e62fad
import React, {useCallback} from 'react';
import AbilityContainer from './Container';
import { Row, Col, Skeleton } from 'antd';
import styles from './center.less'
import { PublicApi } from '@/services/api';
import { Link } from 'umi'
import Authorize from '../Authorize';
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetTradeTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
interface Iprops {};
const KEY_TITLE = {
'commodityInquiryList': '商品询价',
'inquiryQuotationList': '询价报价',
......@@ -22,14 +25,14 @@ const PURCHASE_URL = '/memberCenter/tranactionAbility/purchaseOrder/orderList';
const SALE_URL = '/memberCenter/tranactionAbility/saleOrder/orderList';
const TradeCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetTradeTallyResponse, any>(PublicApi.getReportMemberHomeGetTradeTally, {})
const auth = getAuth();
const roleType = auth.memberRoleType;
const request = useCallback(async () => {
const res = await PublicApi.getReportMemberHomeGetTradeTally();
return res;
}, [])
return (
<AbilityContainer
<Layout
viewRef={ref}
title="交易中心"
tips="提供在线发布需求，在线询价、在线报价、订单交易、签订电子合同等功能"
extra={
......@@ -40,26 +43,17 @@ const TradeCenter: React.FC<Iprops> = () => {
<Link to={roleType == 1 ? SALE_URL : PURCHASE_URL}>进入交易中心</Link>
</div>
</Authorize>
}
request={request}
loading={loading}
>
{
({loading, requestData}) => {
return (
<>
{
loading
? [1,2,3].map((item) => (
<Skeleton active key={item} />
))
: Object.keys(requestData).map((record) => {
responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetTradeTallyResponse) => {
return (
<div className={styles.wrapRow} key={record}>
<span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
<div className={styles.rowValues}>
{
requestData[record].map((item, key) => {
responseData[record].map((item, key) => {
return (
<div className={styles.wrapCol} key={key}>
<div className={styles.colTitle}>{item.name}</div>
......@@ -76,15 +70,8 @@ const TradeCenter: React.FC<Iprops> = () => {
</div>
)
})
}
</>
)
}
}
</AbilityContainer>
</Layout>
)
}
......
src/pages/home/components/Centers/center.less
View file @ 19e62fad
.tagsItem {
min-width: 160px;
.ding_tips {
background-color: @secondary-color;
color: @primary-color;
padding: 8px 12px;
font-size: 12;
font-weight: 500;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 8px;
padding-left: 12px;
padding-right: 10px;
}
// .tagsSpecial {
// width: 160px;
// margin-right: 16px;
// .ding_tips {
// color: @main-color;
// background: rgba(0, 179, 122, 0.12);
// padding: 10px;
// display: flex;
// flex-direction: row;
// position: relative;
// margin-top: 20px;
// .ding_icon {
// margin-right: 10px;
// }
// &:before {
// content: '';
// position: absolute;
// top: -10px;
// left: 20px;
// width: 0;
// height: 0;
// border-left: 10px solid transparent;
// border-right: 10px solid transparent;
// border-bottom: 10px solid rgba(0, 179, 122, 0.12);;
// }
// }
// }
.centerRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.centerCol {
// width: 256px;
margin-right: 16px;
}
.tagsItem {
min-width: 265px;
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 12px;
background: #FAFBFC;
align-self: flex-start;
margin: 18px 16px 18px 0;
margin: @margin-md @margin-md 0px 0;
.icon {
width: 32px;
......@@ -27,45 +81,42 @@
margin: 0 0 15px 5px;
}
}
.tagsSpecial {
width: 160px;
margin-right: 16px;
.ding_tips {
color: @main-color;
background: rgba(0, 179, 122, 0.12);
padding: 10px;
.hoverLink {
display: flex;
flex-direction: row;
position: relative;
margin-top: 20px;
align-items: center;
width: 100%;
.ding_icon {
margin-right: 10px;
&:hover {
.hoverIconConatiner {
display: block;
}
&:before {
content: '';
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 179, 122, 0.12);;
}
.hoverIconConatiner {
display: none;
.hoverIcon {
background-color: #C0C4CC;
width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
}
.centerRow {
.hoverLink {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.centerCol {
width: 160px;
margin-right: 16px;
.text {
flex: 1;
}
}
}
}
......
src/pages/home/hooks/useViewRequest.tsx
View file @ 19e62fad
import { Loading3QuartersOutlined, TrophyOutlined } from '@ant-design/icons';
import { useInViewport } from '@umijs/hooks';
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
interface ResponseDataType {
code: number,
......@@ -14,13 +13,15 @@ function useViewRequest<T, P>(fn: (postData: P) => Promise<ResponseDataType & {
const [loading, setLoading] = useState<boolean>(false);
const [isError, setIsError] = useState<boolean>(false);
const [inViewPort, ref] = useInViewport<HTMLDivElement>();
const [hasRequest, setHasRequest] = useState<boolean>()
const [hasRequest, setHasRequest] = useState<boolean>(false)
const [responseData, setResponseData] = useState<T | null>(null);
// const hasFetchingRef = useRef(false);
const fetchData = useCallback(async (params) => {
setLoading(() => true);
try {
const { data, code, message } = await fn(params);
setHasRequest(() => true)
// throw new Error("123");
if (code === 1000) {
setResponseData(data as T)
......@@ -34,10 +35,11 @@ function useViewRequest<T, P>(fn: (postData: P) => Promise<ResponseDataType & {
}, [fn])
useEffect(() => {
if (!inViewPort || !fn || loading) {
if (!inViewPort || !fn || loading || hasRequest) {
return;
}
async function init() {
// hasFetchingRef.current = true
await fetchData(params)
}
init()
......
src/services/api.ts
View file @ 19e62fad
......@@ -22,6 +22,7 @@ import * as PlatformApi from './PlatformApi';
import * as ProductV2Api from './ProductV2Api';
import * as TemplateV2Api from './TemplateV2Api';
import * as MemberV2Api from './MemberV2Api';
import * as ReportV2Api from './ReportV2Api';
/**
......@@ -56,5 +57,6 @@ export const PublicApi = {
...PlatformApi,
...ProductV2Api,
...TemplateV2Api,
...MemberV2Api
...MemberV2Api,
...ReportV2Api
}
ytt.config.ts
View file @ 19e62fad
......@@ -23,7 +23,8 @@ const tokenList = [
{ name: 'Platform', token: 'cadc3b13452c3ec67b5ef0c57063f12142e857a9eaa64669e80165adf42f5861', categoryIds: [0] }, // 平台后台v2
{ name: 'ProductV2', token: 'b915026587fa1f6edf056f3335817fe2d4b350b0aa84da456786e15e83d45827', categoryIds: [0], }, // 商品服务V2
{ name: 'TemplateV2', token: 'f0187aed046ac19accbed5c780cade01cf11b50a37099dab9d456195a4abd0d3', 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