Reinit project

src/pages/home/estate/index.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+import { Radio } from 'antd';
+import FittedImage from 'react-fitted-image';
+import { connect, DispatchProp } from 'dva';
+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 { 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> = ({
+  dispatch,
+  loading,
+  refreshing,
+  tab,
+  data,
+  num,
+}) => {
+  useEffect(() => {
+    if (!data.length) {
+      dispatch({ type: 'homeEstate/refresh' });
+    }
+  }, []);
+
+  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>
+      </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}
+      />
+    </div>
+  );
+};
+
+export default connect(
+  ({ homeEstate } : any) => ({ ...homeEstate }),
+)(EstatePage);