feat: add my page

Signed-off-by: MiaoWoo <admin@yumc.pw>

.eslintrc

@@ -1,8 +1,24 @@
 {
-  "extends": ["taro"],
+  "extends": [
+    "taro"
+  ],
   "rules": {
-    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
+    "no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "Taro"
+      }
+    ],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".tsx"
+        ]
+      }
+    ]
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

src/app.scss

@@ -9,3 +9,13 @@
   flex-grow: 1;
   text-align: center;
 }
+
+.page {
+  position: relative;
+  background-color: #FDFDFD;
+
+  view,
+  div {
+    box-sizing: border-box;
+  }
+}

src/app.tsx

@@ -9,9 +9,9 @@ import './app.scss'
 
 // 如果需要在 h5 环境中开启 React Devtools
 // 取消以下注释：
-if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
-  require('nerv-devtools')
-}
+// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
+//   require('nerv-devtools')
+// }
 
 const app = dva.createApp({
   initialState: {},

src/models/index.ts

@@ -1,2 +1,3 @@
 import Index from '../pages/index/model'
-export default [Index];
+import My from '../pages/my/model'
+export default [Index, My];

src/models/types.ts

@@ -1,3 +1,18 @@
+/**
+ * @type P: Type of payload
+ * @type C: Type of callback
+ */
+export type Dispatch = <P = any, C = (payload: P) => void>(action: {
+  type: string;
+  payload?: P;
+  callback?: C;
+  [key: string]: any;
+}) => any;
+
+export interface DefaultProps {
+  dispatch: Dispatch
+}
+
 export interface DefaultModel<T> {
   namespace: string,
   state: T,

src/models/utils.ts

@@ -0,0 +1,6 @@
+let mapDefaultProps = ({ def }) => ({ ...def })
+
+export {
+  mapDefaultProps
+}
+

src/pages/index/index.scss

@@ -1,13 +1,3 @@
-.page {
-  position: relative;
-  background-color: #FDFDFD;
-
-  view,
-  div {
-    box-sizing: border-box;
-  }
-}
-
 .page-index {
   padding: 0 0 30px;
 

src/pages/index/index.tsx

@@ -1,18 +1,23 @@
-import { AtCard, AtNoticebar } from 'taro-ui'
 import { connect } from '@tarojs/redux';
-import { View, Image } from '@tarojs/components'
-import Taro, { Component, Config } from '@tarojs/taro'
+import { AtCard, AtNoticebar } from 'taro-ui';
+import { View, Image } from '@tarojs/components';
+import Taro, { Component, Config } from '@tarojs/taro';
 
-import './index.scss'
-import logoImg from '../../assets/images/logo.png'
-import { IndexProps } from './type';
+import logoImg from '../../assets/images/logo.png';
+import { mapDefaultProps } from '../../models/utils';
 
-@connect(({ index }): IndexProps => ({ ...index }))
-export default class Index extends Component<IndexProps> {
+import './index.scss';
+import { IndexProps, IndexState } from './type';
+
+@connect(mapDefaultProps)
+export default class Index extends Component<IndexProps, IndexState> {
   config: Config = {
     navigationBarTitleText: '首页',
     enablePullDownRefresh: true
   }
+  state = {
+    notify: '通知: 钱包目前处于测试阶段 如果发现BUG 请及时反馈!'
+  }
 
   componentDidMount() {
     Taro.startPullDownRefresh();
@@ -25,26 +30,27 @@ export default class Index extends Component<IndexProps> {
   }
 
   render() {
-    const {
-      data
-    } = this.props
-    return (
-      <View className='page page-index'>
-        <AtNoticebar close marquee icon='volume-plus'>
-          通知: 钱包目前处于测试阶段 如果发现BUG 请及时反馈!
-        </AtNoticebar>
-        <View className='logo'>
-          <Image src={logoImg} className='img' mode='scaleToFill' />
-        </View>
-        <View className='page-title'>泰瑞管家</View>
+    const data = this.props
+    const info = (
       <AtCard className='base-info' title='基本信息'>
         <View>软件版本: {data.version}</View>
         <View>当前高度: {data.block}</View>
         <View>流通数量: {data.supply}</View>
         <View>百 分 比: {data.percent}</View>
-          <View>当前收益: {data.lastMiner}</View>
-          <View>来    自: {data.lastNumber} {data.lastName}</View>
+        <View>当前收益: {data.lastNumber}</View>
+        <View>来    自: {data.lastMiner} {data.lastName}</View>
       </AtCard>
+    )
+    return (
+      <View className='page page-index'>
+        <AtNoticebar close marquee icon='volume-plus'>
+          {this.state.notify}
+        </AtNoticebar>
+        <View className='logo'>
+          <Image src={logoImg} className='img' mode='scaleToFill' />
+        </View>
+        <View className='page-title'>泰瑞管家</View>
+        {info}
       </View>
     )
   }

src/pages/index/model.ts

@@ -1,11 +1,11 @@
-import { getInfo } from './service'
-import { DefaultModel } from 'src/models/types';
-import { IndexProps } from './type';
+import { DefaultModel } from '../../models/types';
+
+import { getInfo } from './service';
+import { IndexModel } from './type';
 
 export default {
   namespace: 'index',
   state: {
-    data: {
     version: 0,
     block: 0,
     supply: 0,
@@ -13,21 +13,18 @@ export default {
     lastMiner: 0,
     lastName: 'system',
     lastNumber: 0,
-    }
   },
   effects: {
     *getCurrentInfo({ }, { call, put }) {
       let info = yield call(getInfo);
       yield put({
-        type: "setState", payload: {
-          data: info
-        }
+        type: "setState", payload: info
       });
     }
   },
   reducers: {
-    setState(state: IndexProps, { payload }) {
+    setState(state: IndexModel, { payload }) {
       return { ...state, ...payload }
     }
   }
-} as DefaultModel<IndexProps>
+} as DefaultModel<IndexModel>

src/pages/index/service.ts

@@ -1,7 +1,8 @@
-import { getCurrentInfo, getBlockInfo, getAccount, getHistoryTransactions } from '../../rpc/tera'
-import coinKit from '../../utils/coin-kit'
 import Taro from '@tarojs/taro';
 
+import coinKit from '../../utils/coin-kit'
+import { getCurrentInfo, getBlockInfo, getAccount, getHistoryTransactions } from '../../rpc/tera'
+
 const MAX_CENT = 1e9
 
 async function getInfo() {

src/pages/index/type.ts

@@ -1,8 +1,8 @@
-export interface IndexProps {
-  dispatch?: any,
-  data: IndexData
-}
-export interface IndexData {
+import { DefaultProps } from "../../models/types";
+
+export type IndexProps = IndexModel & DefaultProps
+
+export interface IndexModel {
   version: number;
   block: number;
   supply: number;
@@ -11,3 +11,6 @@ export interface IndexData {
   lastName: string;
   lastNumber: number;
 }
+export interface IndexState {
+  notify: string
+}

src/pages/my/index.scss

@@ -32,3 +32,11 @@
         }
     }
 }
+
+.my {
+  padding: 30px;
+}
+
+.account {
+  margin-top: 30px;
+}

src/pages/my/index.tsx

@@ -1,24 +1,61 @@
-import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text, Image } from '@tarojs/components'
-import defaultImage from '../../assets/images/logo.png'
-import './index.scss'
+import { connect } from '@tarojs/redux';
+import { AtList, AtListItem } from 'taro-ui';
+import Taro, { Component, Config } from '@tarojs/taro';
+import { View, Text, Image } from '@tarojs/components';
 
-class Index extends Component {
+import coinKit from '../../utils/coin-kit';
+import { mapDefaultProps } from '../../models/utils';
+import defaultImage from '../../assets/images/logo.png';
+
+import './index.scss';
+import { MyIndexProps, MyState } from './type';
+
+@connect(mapDefaultProps)
+class Index extends Component<MyIndexProps, MyState> {
   config: Config = {
     navigationBarTitleText: '个人中心',
-        disableScroll: true
+    enablePullDownRefresh: true
   }
   state = {
     nickName: 'MiaoWoo',
-        avatarUrl: defaultImage
+    avatarUrl: defaultImage,
   }
+
+  onPullDownRefresh() {
+    const { dispatch } = this.props;
+    if (dispatch) {
+      dispatch({
+        type: 'my/getAccounts',
+        playload: '02078AC7F16BAF88F9A6F8FA05D5C9F697596402D9EB774A36C74E52A3470EA85B'
+      })
+    }
+  }
+
+  componentDidMount() {
+    Taro.startPullDownRefresh();
+  }
+
   render() {
     const {
       nickName,
       avatarUrl
     } = this.state;
+    const accounts = this.props.accounts.map(a => {
+      return <AtListItem
+        key={a.Num}
+        hasBorder={false}
+        title={`${a.Num}(${a.Name})`}
+        note={`${coinKit.toNumber(a.Value)}`}
+        iconInfo={{
+          size: 20,
+          color: 'green',
+          value: 'credit-card',
+        }}
+        extraThumb={defaultImage}
+      />
+    })
     return (
-            <View className='more'>
+      <View className='page'>
         <View className='user flex-wrp'>
           <View className='avatar flex-item'>
             <Image className='userinfo-avatar' src={avatarUrl}></Image>
@@ -28,6 +65,39 @@ class Index extends Component {
             <Text className='edit'>查看或编辑个人主页</Text>
           </View>
         </View>
+        <View className='my'>
+          <AtList hasBorder={false}>
+            <AtListItem
+              hasBorder={false}
+              title='创建/绑定私钥'
+              iconInfo={{
+                size: 20,
+                color: 'red',
+                value: 'lock',
+              }} />
+            <AtListItem
+              hasBorder={false}
+              title='创建账户'
+              iconInfo={{
+                size: 20,
+                color: 'green',
+                value: 'credit-card',
+              }} />
+          </AtList>
+          <View className='account'>
+            <AtList >
+              <AtListItem
+                hasBorder={false}
+                title='账户列表'
+                iconInfo={{
+                  size: 20,
+                  color: 'blue',
+                  value: 'numbered-list',
+                }} />
+              {accounts}
+            </AtList>
+          </View>
+        </View>
       </View>
     )
   }

src/pages/my/model.ts

@@ -0,0 +1,24 @@
+import { DefaultModel } from '../../models/types';
+
+import { getAccounts } from './service';
+import { MyProps } from './type';
+
+export default {
+  namespace: 'my',
+  state: {
+    accounts: []
+  },
+  effects: {
+    *['getAccounts']({ playload }, { call, put }) {
+      let accounts = yield call(getAccounts, playload);
+      yield put({
+        type: "setState", playload: accounts
+      });
+    }
+  },
+  reducers: {
+    setState(state: MyProps, { playload }) {
+      return { ...state, ...playload }
+    }
+  }
+} as DefaultModel<MyProps>

src/pages/my/service.ts

@@ -0,0 +1,15 @@
+import Taro from '@tarojs/taro';
+
+import { getAccountListByKey } from '../../rpc/tera';
+
+async function getAccounts(key: string) {
+  Taro.showLoading({
+    title: '加载中...'
+  })
+  let result = await getAccountListByKey(key);
+  Taro.hideLoading()
+  Taro.stopPullDownRefresh()
+  return { accounts: result };
+}
+
+export { getAccounts }

src/pages/my/type.ts

@@ -0,0 +1,12 @@
+import { Account } from '../../rpc/types';
+import { DefaultProps } from '../../models/types';
+
+export type MyIndexProps = MyProps & DefaultProps
+
+export interface MyProps {
+  accounts: Account[];
+}
+export interface MyState {
+  nickName: string;
+  avatarUrl: any;
+}

src/rpc/index.ts

@@ -1,4 +1,4 @@
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
 
 let host = 'https://teraapi.sixi.com'
 
@@ -15,7 +15,7 @@ function printRequest(method: string, path: string, data: any, response: any, co
 
 function showError(content) {
   Taro.showModal({
-    title: "网络请求错误",
+    title: '网络请求错误',
     content,
     showCancel: false
   })

src/rpc/tera.ts

@@ -1,4 +1,4 @@
-import rpc from './index'
+import rpc from './index';
 import { BlockInfo, CurrentInfo, Account } from './types';
 
 async function getCurrentInfo(): Promise<CurrentInfo> {
@@ -29,9 +29,18 @@ async function getHistoryTransactions(id: number, count: number = 3, getDes: num
   return result.History;
 }
 
+async function getAccountListByKey(key: string): Promise<Account[]> {
+  let result = await rpc.get('/api/v1/GetAccountListByKey', {
+    Key: key,
+    AllData: 1
+  })
+  return result.arr;
+}
+
 export {
   getAccount,
   getCurrentInfo,
   getBlockInfo,
-  getHistoryTransactions
+  getHistoryTransactions,
+  getAccountListByKey
 }

src/utils/time-kit.ts

@@ -1,5 +1,3 @@
-import i18n from '@/i18n/index.js'
-
 function formatShortTime(time, count = 4) {
   const t = Math.floor(time / 86400);
   const h = Math.floor((time / 3600) % 24);
@@ -24,6 +22,4 @@ function formatShortTime(time, count = 4) {
   return timeStr;
 }
 
-module.exports = {
-	formatShortTime
-}
+export { formatShortTime }