64 lines
3.6 KiB
JavaScript
64 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import { List, InfiniteScroll, Space, DatePicker, Button, Popup, Radio, Result } from 'antd-mobile';
|
|
import { DownOutline, SearchOutline, UndoOutline } from 'antd-mobile-icons';
|
|
import Styles from './mobile.module.less';
|
|
export default function Render(props) {
|
|
const { accountOpers, hasMore, month, type, chooseMonth, chooseType, monthStr } = props.data;
|
|
const { t, loadMore, setType, setMonth, setChooseMonth, setChooseType, navigateBack } = props.methods;
|
|
return (<div className={Styles.container}>
|
|
<Space justify="between" className={Styles.control}>
|
|
<Button size="small" fill="none" onClick={() => setChooseMonth(true)}>
|
|
{monthStr || t('chooseMonth')}
|
|
<DownOutline />
|
|
</Button>
|
|
<Button size="small" fill="none" onClick={() => setChooseType(true)}>
|
|
<SearchOutline />
|
|
{t(`type.${type}`)}
|
|
</Button>
|
|
</Space>
|
|
<DatePicker visible={chooseMonth} value={month || null} onClose={() => setChooseMonth(false)} max={new Date()} precision="month" onConfirm={(value) => {
|
|
setMonth(value);
|
|
setChooseMonth(false);
|
|
}}/>
|
|
<Popup visible={chooseType} onMaskClick={() => setChooseType(false)} onClose={() => setChooseType(false)}>
|
|
<Radio.Group onChange={(type) => {
|
|
setType(type);
|
|
setChooseType(false);
|
|
}} value={type}>
|
|
<Space className={Styles.types} justify="around">
|
|
<Radio value="both">{t('type.both')}</Radio>
|
|
<Radio value="in">{t('type.in')}</Radio>
|
|
<Radio value="out">{t('type.out')}</Radio>
|
|
</Space>
|
|
</Radio.Group>
|
|
</Popup>
|
|
{accountOpers?.length ? <div style={{ flex: 1 }}>
|
|
<List>
|
|
{accountOpers.map((oper, idx) => {
|
|
const { value, time, type, symbol, avail, bgColor } = oper;
|
|
return (<List.Item className={Styles.item} key={idx} prefix={<div className={Styles.symbol} style={{
|
|
backgroundColor: bgColor,
|
|
}}>
|
|
{symbol}
|
|
</div>} description={<Space direction="horizontal" justify="between" className={Styles.main}>
|
|
<span>{time}</span>
|
|
<span>{t('account:attr.avail')}:{avail}</span>
|
|
</Space>}>
|
|
<Space direction="horizontal" justify="between" className={Styles.sub}>
|
|
<span className={Styles.type}>{type}</span>
|
|
<span style={{
|
|
color: bgColor,
|
|
}}>{value}</span>
|
|
</Space>
|
|
</List.Item>);
|
|
})}
|
|
</List>
|
|
<InfiniteScroll hasMore={hasMore} loadMore={loadMore}/>
|
|
</div> : (<div className={Styles.empty}>
|
|
<Result icon={<UndoOutline />} status='success' title={t('common::noData')} description={<Button onClick={() => navigateBack()}>
|
|
{t('common::back')}
|
|
</Button>}/>
|
|
</div>)}
|
|
</div>);
|
|
}
|