Browse Source

refactor: separation page code

add socket.io test

Signed-off-by: MiaoWoo <admin@yumc.pw>
master
MiaoWoo 11 months ago
parent
commit
1e8601d148
18 changed files with 754 additions and 306 deletions
  1. +29
    -23
      package.json
  2. +13
    -0
      project.weapp.json
  3. +1
    -0
      src/models/types.ts
  4. +18
    -2
      src/models/utils.ts
  5. +13
    -0
      src/pages/index/components/base-info.tsx
  6. +21
    -20
      src/pages/index/index.tsx
  7. +6
    -0
      src/pages/index/model.ts
  8. +24
    -0
      src/pages/my/components/account-header.tsx
  9. +33
    -0
      src/pages/my/components/account-list.tsx
  10. +44
    -0
      src/pages/my/components/components.scss
  11. +9
    -0
      src/pages/my/components/index.ts
  12. +15
    -0
      src/pages/my/components/user-info.tsx
  13. +0
    -35
      src/pages/my/index.scss
  14. +16
    -66
      src/pages/my/index.tsx
  15. +12
    -5
      src/pages/my/model.ts
  16. +17
    -8
      src/pages/my/service.ts
  17. +17
    -0
      src/rpc/socket.ts
  18. +466
    -147
      yarn.lock

+ 29
- 23
package.json View File

@@ -9,7 +9,7 @@
"css": "sass"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:wx": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
@@ -17,7 +17,7 @@
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:wx": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
@@ -29,33 +29,39 @@
"author": "",
"license": "MIT",
"dependencies": {
"@tarojs/async-await": "^1.3.10",
"@tarojs/components": "1.3.10",
"@tarojs/redux": "^1.3.10",
"@tarojs/redux-h5": "^1.3.10",
"@tarojs/router": "1.3.10",
"@tarojs/taro": "1.3.10",
"@tarojs/taro-alipay": "1.3.10",
"@tarojs/taro-h5": "1.3.10",
"@tarojs/taro-qq": "1.3.10",
"@tarojs/taro-quickapp": "1.3.10",
"@tarojs/taro-swan": "1.3.10",
"@tarojs/taro-tt": "1.3.10",
"@tarojs/taro-weapp": "1.3.10",
"@tarojs/async-await": "^1.3.11",
"@tarojs/components": "1.3.11",
"@tarojs/redux": "^1.3.11",
"@tarojs/redux-h5": "^1.3.11",
"@tarojs/router": "1.3.11",
"@tarojs/taro": "1.3.11",
"@tarojs/taro-alipay": "1.3.11",
"@tarojs/taro-h5": "1.3.11",
"@tarojs/taro-qq": "1.3.11",
"@tarojs/taro-quickapp": "1.3.11",
"@tarojs/taro-swan": "1.3.11",
"@tarojs/taro-tt": "1.3.11",
"@tarojs/taro-weapp": "1.3.11",
"bufferutil": "^4.0.1",
"dva-core": "^1.4.0",
"dva-loading": "^3.0.12",
"nerv-devtools": "^1.4.0",
"nervjs": "^1.4.0",
"taro-ui": "^2.2.1"
"socket.io-client": "^2.2.0",
"supports-color": "^7.0.0",
"taro-ui": "^2.2.1",
"utf-8-validate": "^5.0.2",
"weapp.socket.io": "^2.0.1"
},
"devDependencies": {
"@tarojs/cli": "^1.3.10",
"@tarojs/plugin-babel": "1.3.10",
"@tarojs/plugin-csso": "1.3.10",
"@tarojs/plugin-sass": "1.3.10",
"@tarojs/plugin-uglifyjs": "1.3.10",
"@tarojs/webpack-runner": "1.3.10",
"@tarojs/cli": "^1.3.11",
"@tarojs/plugin-babel": "1.3.11",
"@tarojs/plugin-csso": "1.3.11",
"@tarojs/plugin-sass": "^1.3.11",
"@tarojs/plugin-uglifyjs": "^1.3.11",
"@tarojs/webpack-runner": "1.3.11",
"@types/react": "^16.4.6",
"@types/socket.io-client": "^1.4.32",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/parser": "^1.6.0",
"babel-eslint": "^8.2.3",
@@ -72,6 +78,6 @@
"stylelint": "9.3.0",
"stylelint-config-taro-rn": "1.3.10",
"stylelint-taro-rn": "1.3.10",
"typescript": "^3.0.1"
"typescript": "^3.5.3"
}
}

+ 13
- 0
project.weapp.json View File

@@ -0,0 +1,13 @@
{
"miniprogramRoot": "./dist",
"projectname": "TeraWallet",
"description": "泰瑞管理工具",
"appid": "wx243ba1a5ae302a75",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram"
}

+ 1
- 0
src/models/types.ts View File

@@ -11,6 +11,7 @@ export type Dispatch = <P = any, C = (payload: P) => void>(action: {

export interface DefaultProps {
dispatch: Dispatch
[key: string]: Function
}

export interface DefaultModel<T> {


+ 18
- 2
src/models/utils.ts View File

@@ -1,5 +1,21 @@
let mapDefaultProps = (obj: any) => ((def) => ({ ...def[obj.name.toLowerCase()] }))
import { Dispatch } from "./types";

let mapModelProps = (name: string) => ((def: { [x: string]: any; }) => ({ ...def[name] }))
let mapModelActions = (name: string, actions: { [key: string]: string }) => ((dispatch: Dispatch) => {
let acts = Object.keys(actions).map(action => {
return {
[action]: function __run(args: any) {
dispatch({
type: `${name}/${action}`,
payload: args
})
}
}
}).reduce((p, n) => ({ ...p, ...n }))
return { ...acts, dispatch }
})

export {
mapDefaultProps
mapModelProps,
mapModelActions
}

+ 13
- 0
src/pages/index/components/base-info.tsx View File

@@ -0,0 +1,13 @@
import { AtCard } from "taro-ui";
import { View } from "@tarojs/components";

export default ({ info }) => (
<AtCard className='base-info' title='基本信息'>
<View>软件版本: {info.version}</View>
<View>当前高度: {info.block}</View>
<View>流通数量: {info.supply}</View>
<View>百 分 比: {info.percent}</View>
<View>当前收益: {info.lastNumber}</View>
<View>来 自: {info.lastMiner} {info.lastName}</View>
</AtCard>
)

+ 21
- 20
src/pages/index/index.tsx View File

@@ -1,15 +1,21 @@
import { connect } from '@tarojs/redux';
import { AtCard, AtNoticebar } from 'taro-ui';
import { AtNoticebar } from 'taro-ui';
import { View, Image } from '@tarojs/components';
import Taro, { Component, Config } from '@tarojs/taro';

import logoImg from '../../assets/images/logo.png';
import { mapDefaultProps } from '../../models/utils';
import { mapModelProps, mapModelActions } from '../../models/utils';

import './index.scss';
import { Actions } from './model';
import BaseInfo from './components/base-info'
import { IndexProps, IndexState } from './type';

@connect(mapDefaultProps(Index))
// import WsClient from '../../rpc/socket'

const PAGE_NAME = 'index'

@connect(mapModelProps(PAGE_NAME), mapModelActions(PAGE_NAME, Actions))
class Index extends Component<IndexProps, IndexState> {
config: Config = {
navigationBarTitleText: '首页',
@@ -19,38 +25,33 @@ class Index extends Component<IndexProps, IndexState> {
notify: '通知: 钱包目前处于测试阶段 如果发现BUG 请及时反馈!'
}

switchWs() {
// if (WsClient.connected) {
// WsClient.disconnect();
// } else {
// WsClient.connect();
// }
}

componentDidMount() {
Taro.startPullDownRefresh();
}

async onPullDownRefresh() {
await this.props.dispatch({
type: 'index/getCurrentInfo'
})
onPullDownRefresh() {
this.props[Actions.getCurrentInfo]();
}

render() {
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.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'>
<View className='logo' onClick={() => this.switchWs()}>
<Image src={logoImg} className='img' mode='scaleToFill' />
</View>
<View className='page-title'>泰瑞管家</View>
{info}
<BaseInfo info={this.props} />
</View>
)
}


+ 6
- 0
src/pages/index/model.ts View File

@@ -3,6 +3,10 @@ import { DefaultModel } from '../../models/types';
import { getInfo } from './service';
import { IndexModel } from './type';

let Actions = {
getCurrentInfo: 'getCurrentInfo'
}

export default {
namespace: 'index',
state: {
@@ -28,3 +32,5 @@ export default {
}
}
} as DefaultModel<IndexModel>

export { Actions }

+ 24
- 0
src/pages/my/components/account-header.tsx View File

@@ -0,0 +1,24 @@
import { AtList, AtListItem } from "taro-ui";

const AccountHeader = () => (
<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>
)

export default AccountHeader

+ 33
- 0
src/pages/my/components/account-list.tsx View File

@@ -0,0 +1,33 @@
import { AtList, AtListItem } from "taro-ui";

import coinKit from "../../../utils/coin-kit";
import { Account } from '../../../rpc/types';

const AccountList = ({ accounts, defaultImage }) => (
<AtList >
<AtListItem
hasBorder={false}
title='账户列表'
iconInfo={{
size: 20,
color: 'blue',
value: 'numbered-list',
}} />
{(accounts || []).map((a: Account) => {
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}
/>
})}
</AtList>
)

export default AccountList

+ 44
- 0
src/pages/my/components/components.scss View File

@@ -0,0 +1,44 @@
.flex-wrp{
display: flex;
justify-content: center;
align-items: center;
}
.flex-item{
flex-grow: 1;
text-align: center;
}

.user {
width: 725px;
background: #ffffff;
padding: 30px 25px 30px 0;
margin: 15rpx 0 0 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #dcdcdc;
box-shadow: 0 2px 5px #eeeeee;
.userinfo-avatar{
margin-top: 30px;
flex: 1;
display: inline-block;
width: 100px!important;
height: 100px!important;
border-radius: 80px;
}
.user-info{
flex: 5;
text-align: left;
text,div,span{
display: block;
}
.userinfo-nickname{
padding: 8px 0 10px 0;
font-size: 30px;
color: #818A8F;
}
.edit{
font-size: 30px;
color: #bababa;
line-height: 34px;
}
}
}

+ 9
- 0
src/pages/my/components/index.ts View File

@@ -0,0 +1,9 @@
import UserInfo from './user-info'
import AccountHeader from './account-header'
import AccountList from './account-list'

export {
UserInfo,
AccountHeader,
AccountList
}

+ 15
- 0
src/pages/my/components/user-info.tsx View File

@@ -0,0 +1,15 @@
import { View, Text, Image } from '@tarojs/components';

import './components.scss'

export default ({ avatarUrl, nickName }) => (
<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>
)

+ 0
- 35
src/pages/my/index.scss View File

@@ -1,38 +1,3 @@
.user {
width: 725px;
background: #ffffff;
padding: 30px 25px 30px 0;
margin: 15rpx 0 0 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #dcdcdc;
box-shadow: 0 2px 5px #eeeeee;
.userinfo-avatar{
margin-top: 30px;
flex: 1;
display: inline-block;
width: 100px!important;
height: 100px!important;
border-radius: 80px;
}
.user-info{
flex: 5;
text-align: left;
text,div,span{
display: block;
}
.userinfo-nickname{
padding: 8px 0 10px 0;
font-size: 30px;
color: #818A8F;
}
.edit{
font-size: 30px;
color: #bababa;
line-height: 34px;
}
}
}

.my {
padding: 30px;
}


+ 16
- 66
src/pages/my/index.tsx View File

@@ -1,16 +1,18 @@
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';
import { View } from '@tarojs/components';

import coinKit from '../../utils/coin-kit';
import { mapDefaultProps } from '../../models/utils';
import defaultImage from '../../assets/images/logo.png';
import { mapModelProps, mapModelActions } from '../../models/utils';

import './index.scss';
import { Actions } from './model';
import { MyIndexProps, MyState } from './type';
import { UserInfo, AccountHeader, AccountList } from './components'

@connect(mapDefaultProps(My))
const PAGE_NAME = 'my'

@connect(mapModelProps(PAGE_NAME), mapModelActions(PAGE_NAME, Actions))
class My extends Component<MyIndexProps, MyState> {
config: Config = {
navigationBarTitleText: '个人中心',
@@ -19,16 +21,14 @@ class My extends Component<MyIndexProps, MyState> {
state = {
nickName: 'MiaoWoo',
avatarUrl: defaultImage,
publicKey: '191864'
}
defaultProps = {
accounts: []
}

onPullDownRefresh() {
const { dispatch } = this.props;
if (dispatch) {
dispatch({
type: 'my/getAccounts',
playload: '02078AC7F16BAF88F9A6F8FA05D5C9F697596402D9EB774A36C74E52A3470EA85B'
})
}
this.props[Actions.getAccounts](this.state.publicKey)
}

componentDidMount() {
@@ -40,63 +40,13 @@ class My extends Component<MyIndexProps, MyState> {
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>
<UserInfo nickName={nickName} avatarUrl={avatarUrl} />
<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>
<AccountHeader />
<View className='account' />
<AccountList accounts={this.props.accounts} defaultImage={defaultImage} />
</View>
</View>
)


+ 12
- 5
src/pages/my/model.ts View File

@@ -3,22 +3,29 @@ import { DefaultModel } from '../../models/types';
import { getAccounts } from './service';
import { MyProps } from './type';

let Actions = {
getAccounts: 'getAccounts'
}

export default {
namespace: 'my',
state: {
accounts: []
},
effects: {
*['getAccounts']({ playload }, { call, put }) {
let accounts = yield call(getAccounts, playload);
*[Actions.getAccounts]({ payload }, { call, put }) {
let accounts = yield call(getAccounts, payload);
yield put({
type: "setState", playload: accounts
type: "setState",
payload: accounts
});
}
},
reducers: {
setState(state: MyProps, { playload }) {
return { ...state, ...playload }
setState(state: MyProps, { payload }) {
return { ...state, ...payload }
}
}
} as DefaultModel<MyProps>

export { Actions }

+ 17
- 8
src/pages/my/service.ts View File

@@ -1,15 +1,24 @@
import Taro from '@tarojs/taro';

import { getAccountListByKey } from '../../rpc/tera';
import { getAccountListByKey, getAccount } from '../../rpc/tera';

async function getAccounts(key: string) {
Taro.showLoading({
title: '加载中...'
})
let result = await getAccountListByKey(key);
Taro.hideLoading()
Taro.stopPullDownRefresh()
return { accounts: result };
console.log(key)
try {
if (!key) { return { accounts: [] } }
Taro.showLoading({
title: '加载中...'
})
if (/[0-9]*/.test(key)) {
let account = await getAccount(Number(key));
key = account.PubKeyStr;
}
let result = await getAccountListByKey(key);
return { accounts: result };
} finally {
Taro.hideLoading();
Taro.stopPullDownRefresh();
}
}

export { getAccounts }

+ 17
- 0
src/rpc/socket.ts View File

@@ -0,0 +1,17 @@
import io from 'weapp.socket.io'

const client = io('https://tera-ws.miaowoo.cc/web', {
path: '/ws',
transports: ['websocket'],
autoConnect: false
})

client.on('connect', () => {
console.log('connect')
})

client.on('message', (msg) => {
console.log(msg)
})

export default client

+ 466
- 147
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save