feat: add my page

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

.eslintrc

@@ -1,10 +1,26 @@
 {
-  "extends": ["taro"],
+  "extends": [
+    "taro"
+  ],
   "rules": {
-    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
+    "no-unused-vars": [
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
+      "error",
+      {
+        "varsIgnorePattern": "Taro"
+      }
+    ],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".tsx"
+        ]
+      }
+    ]
   },
-    "parser": "@typescript-eslint/parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
@@ -12,4 +28,4 @@
     "useJSXTextNode": true,
     "project": "./tsconfig.json"
   }
-  }
+}

src/app.scss

@@ -8,4 +8,14 @@
 .flex-item{
   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') {
+// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
-  require('nerv-devtools')
+//   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 { AtCard, AtNoticebar } from 'taro-ui';
-import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Image } from '@tarojs/components';
+import Taro, { Component, Config } from '@tarojs/taro';
 
-import './index.scss'
+import logoImg from '../../assets/images/logo.png';
-import logoImg from '../../assets/images/logo.png'
+import { mapDefaultProps } from '../../models/utils';
-import { IndexProps } from './type';
 
-@connect(({ index }): IndexProps => ({ ...index }))
+import './index.scss';
-export default class Index extends Component<IndexProps> {
+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 {
+    const data = this.props
-      data
+    const info = (
-    } = this.props
+      <AtCard className='base-info' title='基本信息'>
+        <View>软件版本: {data.version}</View>
+        <View>当前高度: {data.block}</View>
+        <View>流通数量: {data.supply}</View>
+        <View>百 分 比: {data.percent}</View>
+        <View>当前收益: {data.lastNumber}</View>
+        <View>来    自: {data.lastMiner} {data.lastName}</View>
+      </AtCard>
+    )
     return (
       <View className='page page-index'>
         <AtNoticebar close marquee icon='volume-plus'>
-          通知: 钱包目前处于测试阶段 如果发现BUG 请及时反馈!
+          {this.state.notify}
         </AtNoticebar>
         <View className='logo'>
           <Image src={logoImg} className='img' mode='scaleToFill' />
         </View>
         <View className='page-title'>泰瑞管家</View>
-        <AtCard className='base-info' title='基本信息'>
+        {info}
-          <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>
-        </AtCard>
       </View>
     )
   }

src/pages/index/model.ts

@@ -1,33 +1,30 @@
-import { getInfo } from './service'
+import { DefaultModel } from '../../models/types';
-import { DefaultModel } from 'src/models/types';
+
-import { IndexProps } from './type';
+import { getInfo } from './service';
+import { IndexModel } from './type';
 
 export default {
   namespace: 'index',
   state: {
-    data: {
+    version: 0,
-      version: 0,
+    block: 0,
-      block: 0,
+    supply: 0,
-      supply: 0,
+    percent: '0.00',
-      percent: '0.00',
+    lastMiner: 0,
-      lastMiner: 0,
+    lastName: 'system',
-      lastName: 'system',
+    lastNumber: 0,
-      lastNumber: 0,
-    }
   },
   effects: {
     *getCurrentInfo({ }, { call, put }) {
       let info = yield call(getInfo);
       yield put({
-        type: "setState", payload: {
+        type: "setState", payload: info
-          data: 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 {
+import { DefaultProps } from "../../models/types";
-  dispatch?: any,
+
-  data: IndexData
+export type IndexProps = IndexModel & DefaultProps
-}
+
-export interface IndexData {
+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

@@ -31,4 +31,12 @@
             line-height: 34px;
         }
     }
-}
+}
+
+.my {
+  padding: 30px;
+}
+
+.account {
+  margin-top: 30px;
+}

src/pages/my/index.tsx

@@ -1,36 +1,106 @@
-import Taro, { Component, Config } from '@tarojs/taro'
+import { connect } from '@tarojs/redux';
-import { View, Text, Image } from '@tarojs/components'
+import { AtList, AtListItem } from 'taro-ui';
-import defaultImage from '../../assets/images/logo.png'
+import Taro, { Component, Config } from '@tarojs/taro';
-import './index.scss'
+import { View, Text, Image } from '@tarojs/components';
 
-class Index extends Component {
+import coinKit from '../../utils/coin-kit';
-    config: Config = {
+import { mapDefaultProps } from '../../models/utils';
-        navigationBarTitleText: '个人中心',
+import defaultImage from '../../assets/images/logo.png';
-        disableScroll: true
+
-    }
+import './index.scss';
-    state = {
+import { MyIndexProps, MyState } from './type';
-        nickName: 'MiaoWoo',
+
-        avatarUrl: defaultImage
+@connect(mapDefaultProps)
-    }
+class Index extends Component<MyIndexProps, MyState> {
-    render() {
+  config: Config = {
-        const {
+    navigationBarTitleText: '个人中心',
-            nickName,
+    enablePullDownRefresh: true
-            avatarUrl
+  }
-        } = this.state;
+  state = {
-        return (
+    nickName: 'MiaoWoo',
-            <View className='more'>
+    avatarUrl: defaultImage,
-                <View className='user flex-wrp'>
+  }
-                    <View className='avatar flex-item'>
+
-                        <Image className='userinfo-avatar' src={avatarUrl}></Image>
+  onPullDownRefresh() {
-                    </View>
+    const { dispatch } = this.props;
-                    <View className='user-info flex-item'>
+    if (dispatch) {
-                        <Text className='userinfo-nickname'>{nickName}</Text>
+      dispatch({
-                        <Text className='edit'>查看或编辑个人主页</Text>
+        type: 'my/getAccounts',
-                    </View>
+        playload: '02078AC7F16BAF88F9A6F8FA05D5C9F697596402D9EB774A36C74E52A3470EA85B'
-                </View>
+      })
-            </View>
-        )
     }
+  }
+
+  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='page'>
+        <View className='user flex-wrp'>
+          <View className='avatar flex-item'>
+            <Image className='userinfo-avatar' src={avatarUrl}></Image>
+          </View>
+          <View className='user-info flex-item'>
+            <Text className='userinfo-nickname'>{nickName}</Text>
+            <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>
+    )
+  }
 }
 
-export default Index
+export default Index

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,29 +1,25 @@
-import i18n from '@/i18n/index.js'
-
 function formatShortTime(time, count = 4) {
-	const t = Math.floor(time / 86400);
+  const t = Math.floor(time / 86400);
-	const h = Math.floor((time / 3600) % 24);
+  const h = Math.floor((time / 3600) % 24);
-	const m = Math.floor((time / 60) % 60);
+  const m = Math.floor((time / 60) % 60);
-	const s = Math.floor(time % 60);
+  const s = Math.floor(time % 60);
-	var timeStr = '';
+  var timeStr = '';
-	if (t > 0) {
+  if (t > 0) {
-		timeStr = timeStr + t + '天';
+    timeStr = timeStr + t + '天';
-		count--;
+    count--;
-	}
+  }
-	if (h > 0 && count > 0) {
+  if (h > 0 && count > 0) {
-		timeStr = timeStr + h + '时';
+    timeStr = timeStr + h + '时';
-		count--;
+    count--;
-	}
+  }
-	if (m > 0 && count > 0) {
+  if (m > 0 && count > 0) {
-		timeStr = timeStr + m + '分';
+    timeStr = timeStr + m + '分';
-		count--;
+    count--;
-	}
+  }
-	if (count > 0) {
+  if (count > 0) {
-		timeStr = timeStr + s + '秒';
+    timeStr = timeStr + s + '秒';
-	}
+  }
-	return timeStr;
+  return timeStr;
 }
 
-module.exports = {
+export { formatShortTime }
-	formatShortTime
-}