119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { connect, DispatchProp, routerRedux } from 'dva';
|
|
import { Spin, Icon } from 'antd';
|
|
import { formatMessage } from 'umi-plugin-locale';
|
|
import { HomeMineModelState } from './model';
|
|
import { MineStatus, Mine } from '@/types/common';
|
|
import { dispatch } from '@/utils/utils';
|
|
|
|
import styles from './style.less';
|
|
import { displayTime } from '@/utils/transform';
|
|
|
|
const MinePage: React.FC<HomeMineModelState & DispatchProp> = ({
|
|
dispatch,
|
|
refreshingList,
|
|
errorList,
|
|
data,
|
|
refreshingBasic,
|
|
errorBasic,
|
|
info,
|
|
}) => {
|
|
|
|
useEffect(() => {
|
|
if (!data || errorList || !info || errorBasic) {
|
|
dispatch({ type: 'homeMine/load' });
|
|
}
|
|
}, []);
|
|
|
|
const onRefresh = () => {
|
|
if (refreshingBasic || refreshingList) return;
|
|
dispatch({ type: 'homeMine/refresh' });
|
|
};
|
|
|
|
const renderBanner = (
|
|
<div className={styles.banner}>
|
|
<div className="bg" />
|
|
<span className="title">{formatMessage({ id: 'home.mine.lastday' })}</span>
|
|
<span className="content">
|
|
<span className="large">+{info ? info.revenueLastday : 0}</span>
|
|
VIC
|
|
</span>
|
|
<div className={styles.card}>
|
|
<div className="left">
|
|
<span className="line">
|
|
<span className="title2">{formatMessage({ id: 'home.mine.acc' })}</span>
|
|
<span className="value">{info ? info.revenueAll : 0} VIC</span>
|
|
</span>
|
|
<span className="line">
|
|
<span className="title2">{formatMessage({ id: 'home.mine.valid' })}</span>
|
|
<span className="value">{info ? info.activeFund : 0} KG</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => dispatch(routerRedux.push('/mine'))}
|
|
className="right app-btn"
|
|
>
|
|
{formatMessage({ id: 'home.mine.retrieve' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderItem = (it: Mine) => (
|
|
<div className={styles.item} key={it.id}>
|
|
<div className="line">
|
|
<div>{formatMessage({ id: 'home.mine.validTime' })}{displayTime(it.createdAt)}</div>
|
|
<div className="amount">+{it.amount} KG</div>
|
|
</div>
|
|
<div className="line">
|
|
<div>
|
|
{formatMessage({ id: 'home.mine.status' })}
|
|
{formatMessage({ id: `home.mine.status${it.status}` })}
|
|
</div>
|
|
<div className="small">{formatMessage({ id: 'home.mine.invalidTime' })}{displayTime(it.expiresAt)}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
let body;
|
|
if (data) {
|
|
if (data.length) {
|
|
body = data.map(renderItem);
|
|
} else {
|
|
body = (
|
|
<div className={styles.message}>
|
|
{formatMessage({ id: 'home.mine.none' })}
|
|
</div>
|
|
);
|
|
}
|
|
} else {
|
|
body = (
|
|
<div className={styles.message}>
|
|
{formatMessage({ id: errorList ? 'common.loadError' : 'common.loading' })}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{renderBanner}
|
|
|
|
<div className={styles.controller}>
|
|
<div className="content" onClick={onRefresh}>
|
|
<Icon type="sync" spin={refreshingBasic || refreshingList} />
|
|
<span className="desc">{formatMessage({ id: 'home.mine.refresh' })}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Spin className={styles.list} spinning={refreshingList}>
|
|
{body}
|
|
</Spin>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(
|
|
({ homeMine } : any) => ({ ...homeMine }),
|
|
)(MinePage);
|