About page&home/estate change

src/app.ts

@@ -1,13 +1,10 @@
 
 export const dva = {
   config: {
-    onError(err: ErrorEvent | any) {
+    onError(err: ErrorEvent) {
       err.preventDefault();
       // tslint:disable-next-line: no-console
       console.error(err.message);
-      if (err.name === 'ChunkLoadError') {
-        location.reload();
-      }
     },
   },
 };

src/config.ts

@@ -0,0 +1,16 @@
+
+export default {
+  exitPaths: [
+    '/check',
+    '/home/estate',
+    '/home/fund',
+    '/home/market',
+    '/home/profile',
+  ],
+  baseURL: 'https://server.fiv.tacever.org/v1',
+  // baseURL: 'http://yapi.faronear.org/mock/20/v1',
+  linkAndroid: 'xxx',
+  linkIOS: '',
+  linkTelegram: 'https://t.me/fivhome',
+  linkEmail: 'team-fiv@outlook.com',
+};

src/locales/en-US.ts

@@ -174,4 +174,11 @@ export default {
   'system.chooseLang': 'Choose Language',
 
   'about.title': '关于第五维度',
+  'about.desc': '数字货币财富管理平台',
+  'about.appTitle': '下载 APP',
+  'about.appDesc': '（点击相应图标获取 APP 下载地址）',
+  'about.comTitle': '加入社区',
+  'about.comDesc': '（点击相应图标获取社区地址）',
+  'about.contact': '联系我们',
+  'about.copyright': 'Copyright ©2019 第五维度',
 }

src/locales/zh-CN.ts

@@ -156,7 +156,7 @@ export default {
   'profile.identity': '实名认证',
   'profile.share': '社区推广',
   'profile.msg': '消息中心',
-  'profile.about': '关于洛格',
+  'profile.about': '关于第五维度',
 
   'account.title': '我的账户',
   'account.nickname': '昵称',
@@ -174,4 +174,11 @@ export default {
   'system.chooseLang': '请选择语言',
 
   'about.title': '关于第五维度',
+  'about.desc': '数字货币财富管理平台',
+  'about.appTitle': '下载 APP',
+  'about.appDesc': '（点击相应图标获取 APP 下载地址）',
+  'about.comTitle': '加入社区',
+  'about.comDesc': '（点击相应图标获取社区地址）',
+  'about.contact': '联系我们',
+  'about.copyright': 'Copyright ©2019 第五维度',
 }

src/pages/about/index.tsx

@@ -3,19 +3,89 @@
  * Routes:
  *   - ./src/pages/routes
  */
-import React from 'react';
-import Header from '@/components/Header';
+import React, { useState } from 'react';
 import { formatMessage } from 'umi-plugin-locale';
+import FittedImage from 'react-fitted-image';
+import { Modal } from 'antd';
+import { QRCanvas } from 'qrcanvas-react';
+import Header from '@/components/Header';
+import config from '@/config';
+import logo from '@/assets/bg_login.png';
+import pAndroid from '@/assets/a_android.png';
+import pIOS from '@/assets/a_ios.png';
+import pTelegram from '@/assets/a_telegram.png';
 
 import styles from './style.less';
 
 const AboutPage: React.FC = () => {
+  const [info, setInfo] = useState('');
+
+  const showInfo = (
+    <Modal
+      visible={Boolean(info)}
+      title={formatMessage({ id: 'common.prompt' })}
+      footer={null}
+      onCancel={() => setInfo('')}
+    >
+      <div className={styles.dlg}>
+        {info && <QRCanvas options={{
+          data: info,
+          size: 240,
+        }} />}
+        <span>{info}</span>
+      </div>
+    </Modal>
+  );
+
   return (
     <div className={styles.container}>
       <Header title={formatMessage({ id: 'about.title' })} />
       <div className={styles.body}>
-        body
+        <div className="logo">
+          <FittedImage src={logo} fit="cover" />
         </div>
+
+        <span className="app-name">{formatMessage({ id: 'app.name' })}</span>
+        <span className="app-desc">{formatMessage({ id: 'about.desc' })}</span>
+
+        <div className={styles.content}>
+          {(config.linkAndroid || config.linkIOS) && (
+            <div className="section">
+              <span className="title">{formatMessage({ id: 'about.appTitle' })}</span>
+              <span className="desc">{formatMessage({ id: 'about.appDesc' })}</span>
+              <div className="icon-list">
+                {config.linkAndroid && <div className="icon-item" onClick={() => setInfo(config.linkAndroid)}>
+                  <div className="icon-icon"><FittedImage src={pAndroid} /></div>
+                  <span className="icon-name">Android</span>
+                </div>}
+                {config.linkIOS && <div className="icon-item" onClick={() => setInfo(config.linkIOS)}>
+                  <div className="icon-icon"><FittedImage src={pIOS} /></div>
+                  <span className="icon-name">iOS</span>
+                </div>}
+              </div>
+            </div>
+          )}
+          {config.linkTelegram && (
+            <div className="section">
+              <span className="title">{formatMessage({ id: 'about.comTitle' })}</span>
+              <span className="desc">{formatMessage({ id: 'about.comDesc' })}</span>
+              <div className="icon-list">
+                <div className="icon-item" onClick={() => setInfo(config.linkTelegram)}>
+                  <div className="icon-icon"><FittedImage src={pTelegram} /></div>
+                  <span className="icon-name">Telegram</span>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="section">
+            <span className="title">{formatMessage({ id: 'about.contact' })}</span>
+            <span className="desc">{config.linkEmail}</span>
+          </div>
+        </div>
+
+        <div>{formatMessage({ id: 'about.copyright' })}</div>
+      </div>
+      {showInfo}
     </div>
   );
 }

src/pages/about/style.less

@@ -1,3 +1,5 @@
+@import '../../global.less';
+
 .container {
   height: 100%;
   display: flex;
@@ -6,4 +8,73 @@
 
 .body {
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+
+  :global {
+    .logo {
+      width: 64px;
+      margin: 16px 0 10px;
+    }
+
+    .app-name, .app-desc {
+      color: #000;
+      font-size: 0.9rem;
+    }
+
+    .app-desc {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.content {
+  align-self: stretch;
+  border: 1px solid @hint-color;
+  margin: 0 20px;
+  border-radius: 4px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .section:nth-child(n+2) {
+      margin-top: 10px;
+    }
+
+    .desc {
+      font-size: 0.8rem;
+    }
+
+    .icon-list {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .icon-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 8px 10px 0;
+    }
+
+    .icon-icon {
+      width: 64px;
+    }
+  }
+}
+
+.dlg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

src/pages/home/estate/index.tsx

@@ -20,7 +20,7 @@ const MinePage: React.FC<HomeMineModelState & DispatchProp> = ({
 
   useEffect(() => {
     if (!data || errorList) {
-      dispatch({ type: 'homeMine/loadList' });
+      dispatch({ type: 'homeMine/loadList', payload: false });
     }
     if (!info || errorBasic) {
       dispatch({ type: 'homeMine/loadBasic' });
@@ -29,8 +29,7 @@ const MinePage: React.FC<HomeMineModelState & DispatchProp> = ({
 
   const onRefresh = () => {
     if (refreshingBasic || refreshingList) return;
-    dispatch({ type: 'homeMine/loadList', payload: true });
-    dispatch({ type: 'homeMine/loadBasic' });
+    dispatch({ type: 'homeMine/refresh' });
   };
 
   const renderBanner = (

src/pages/home/estate/model.ts

@@ -1,6 +1,7 @@
 import { Model } from 'dva';
 import { Mines, MineBasic } from '@/types/common';
-import { getMineList, getMineBasic } from './service';
+import { getMineList, getMineBasic, refresh, RefreshData } from './service';
+import { message } from 'antd';
 
 export interface HomeMineModelState {
   refreshingList: boolean;
@@ -78,6 +79,38 @@ const MineModel: Model = {
         });
       }
     },
+
+    *refresh(_, { put, call, select }) {
+      const { refreshingBasic } = yield select((state: any) => state.homeMine);
+      if (refreshingBasic) return;
+
+      yield put({
+        type: 'onUpdateState',
+        refreshingBasic: true,
+        refreshingList: true,
+        errorBasic: false,
+        errorList: false,
+      });
+      try {
+        const info = (yield call(refresh)) as RefreshData;
+        yield put({
+          type: 'onUpdateState',
+          info: info.basic,
+          data: info.list,
+          refreshingBasic: false,
+          refreshingList: false,
+          errorBasic: false,
+        });
+      } catch (e) {
+        message.error(e.message);
+        yield put({
+          type: 'onUpdateState',
+          refreshingBasic: false,
+          refreshingList: false,
+          errorBasic: true,
+        });
+      }
+    },
   },
 
   reducers: {

src/pages/home/estate/service.ts

@@ -2,6 +2,11 @@ import http from '@/utils/http';
 import { Mines, MineBasic } from '@/types/common';
 import { loadMineList, storeMineList } from '@/utils/storage';
 
+export interface RefreshData {
+  basic: MineBasic;
+  list: Mines;
+}
+
 export async function getMineBasic(): Promise<MineBasic> {
   const {
     ok,
@@ -33,3 +38,16 @@ export async function getMineList(refresh = false): Promise<Mines> {
   }
   throw Error(msg);
 }
+
+export async function refresh(): Promise<RefreshData> {
+  const {
+    ok,
+    data,
+    msg,
+  } = await http.get<RefreshData>('/fund/refresh');
+  if (ok && data) {
+    storeMineList(data);
+    return data;
+  }
+  throw Error(msg);
+}

src/pages/routes.tsx

@@ -7,7 +7,6 @@ import styles from './index.css';
 
 const unauthorizedPaths = [
   '/check',
-  '/register',
 ];
 
 const Page: React.FC<RouterTypes & UserModelState> = ({

src/utils/h5plus.ts

@@ -1,5 +1,6 @@
 import { dispatch, getState } from './utils';
 import { routerRedux } from 'dva';
+import config from '@/config';
 
 const isApp = () => {
   const r = typeof window.plus !== 'undefined';
@@ -32,13 +33,6 @@ const scan = () => {
   });
 };
 
-const firstPaths = [
-  '/check',
-  '/home/estate',
-  '/home/fund',
-  '/home/market',
-  '/home/profile',
-];
 const backButtonHandler = () => {
   const barcode = window.plus.barcode.getBarcodeById(barcodeId);
   if (barcode) {
@@ -46,7 +40,7 @@ const backButtonHandler = () => {
     return;
   }
   const { pathname } = getState().router.location;
-  if (firstPaths.includes(pathname)) {
+  if (config.exitPaths.includes(pathname)) {
     window.plus.runtime.quit();
   } else {
     dispatch(routerRedux.goBack());

src/utils/http.ts

@@ -3,6 +3,7 @@ import { formatMessage } from 'umi-plugin-locale';
 import _ from 'lodash';
 import { globalState } from '@/services/common';
 import { isDev, dispatch } from './utils';
+import config from '@/config';
 
 export interface AppResp<T = any> {
   ok: boolean,
@@ -19,8 +20,7 @@ const errorMap = {
   403: 'common.403',
 };
 
-const baseURL = 'https://server.fiv.tacever.org/v1';
-// const baseURL = 'http://yapi.faronear.org/mock/20/v1';
+const { baseURL } = config;
 const instance = axios.create({
   baseURL,
 });