矿场列表

src/pages/home/estate/index.tsx

@@ -1,103 +1,103 @@
 import React, { useEffect } from 'react';
-import { Radio } from 'antd';
-import FittedImage from 'react-fitted-image';
 import { connect, DispatchProp } from 'dva';
+import { Spin, Icon } from 'antd';
 import { formatMessage } from 'umi-plugin-locale';
-import List from '@/components/List';
-import Label from '@/components/Label';
-import { HomeEstateModelState } from './model';
-import { EstateType, Estate } from '@/types/common';
+import { HomeMineModelState } from './model';
+import { MineStatus, Mine } from '@/types/common';
 import { dispatch } from '@/utils/utils';
 
 import styles from './style.less';
 
-const RadioGroup = Radio.Group;
-const RadioButton = Radio.Button;
-
-const renderItem = (data: Estate) => {
-  const holdTab = data.type === EstateType.Hold;
-  return (
-    <div
-      className={styles.item}
-      onClick={() => dispatch({ type: 'homeEstate/gotoDetail', payload: data })}
-    >
-      <div className="avatar">
-        <FittedImage src={data.image || ''} fit="cover" />
-      </div>
-      <div className="content">
-        <span className="name">{data.name}</span>
-        <span className="desc">
-          {
-            holdTab ?
-              formatMessage({ id: 'home.estate.timeDue' }, { time: data.lockTime }) :
-              formatMessage({ id: 'home.estate.timeSold' }, { time: data.outTime })
-          }
-        </span>
-      </div>
-      <div className="postfix">
-        <span className={`cost-msg ${holdTab ? 'primary' : ''}`}>
-          {formatMessage({ id: 'home.estate.cost' })} <span>{data.inPrice}</span> LOG
-        </span>
-        {!holdTab && <span className="sold-msg">
-          {formatMessage({ id: 'home.estate.profit' })} {data.profitPrice} LOG
-        </span>}
-        {holdTab && <span className="hold-msg">
-          {formatMessage({ id: 'home.estate.profit2' })}{data.profitShow}
-        </span>}
-      </div>
-    </div>
-  );
-};
-
-const EstatePage: React.FC<HomeEstateModelState & DispatchProp> = ({
+const MinePage: React.FC<HomeMineModelState & DispatchProp> = ({
   dispatch,
-  loading,
-  refreshing,
-  tab,
+  refreshingList,
+  errorList,
   data,
-  num,
+  refreshingBasic,
+  errorBasic,
+  info,
 }) => {
+
   useEffect(() => {
-    if (!data.length) {
-      dispatch({ type: 'homeEstate/refresh' });
+    if (!data || errorList) {
+      dispatch({ type: 'homeMine/loadList' });
+    }
+    if (!info || errorBasic) {
+      dispatch({ type: 'homeMine/loadBasic' });
     }
   }, []);
 
+  const onRefresh = () => {
+    if (refreshingBasic || refreshingList) return;
+    dispatch({ type: 'homeMine/loadList', payload: true });
+    dispatch({ type: 'homeMine/loadBasic' });
+  };
+
+  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.stoneAll : 0} KG</span>
+          </span>
+        </div>
+
+        <div 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' })}{it.validTime}</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' })}{it.invalidTime}</div>
+      </div>
+    </div>
+  );
+
   return (
     <div className={styles.container}>
-      <div className={styles.header}>
-        <RadioGroup
-          buttonStyle="solid"
-          value={tab}
-          onChange={e => dispatch({ type: 'homeEstate/changeTab', payload: e.target.value })}
-        >
-          <RadioButton value={EstateType.Hold}>{formatMessage({ id: 'home.estate.hold' })}</RadioButton>
-          <RadioButton value={EstateType.Sold}>{formatMessage({ id: 'home.estate.sold' })}</RadioButton>
-        </RadioGroup>
+      {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>
 
-      <Label
-        name={formatMessage({
-          id: tab === EstateType.Hold ? 'home.estate.holdTitle' : 'home.estate.soldTitle',
-        }, { num })}
-        className={styles.label}
-      />
-
-      <List
-        className={styles.list}
-        data={data}
-        renderItem={renderItem}
-        refreshing={refreshing}
-        onRefresh={() => dispatch({ type: 'homeEstate/refresh' })}
-        loading={loading}
-        onLoadMore={() => dispatch({ type: 'homeEstate/loadMore' })}
-        itemKey={data => data.id}
-        itemSize={80}
-      />
+      <Spin className={styles.list} spinning={refreshingList}>
+        {!data ? (
+          <div className={styles.message}>
+            {formatMessage({ id: errorList ? 'common.loadError' : 'common.loading' })}
+          </div>
+        ) : data.map(renderItem)}
+      </Spin>
     </div>
   );
 };
 
 export default connect(
-  ({ homeEstate } : any) => ({ ...homeEstate }),
-)(EstatePage);
+  ({ homeMine } : any) => ({ ...homeMine }),
+)(MinePage);