Merge remote-tracking branch 'origin/master'

src/pages/my/all/index.css

@@ -0,0 +1,44 @@
+.my-wrap {
+    height: 100%;
+}
+
+.avatar-area {
+    height: 20%;
+    background-color: #397f44;
+    position: relative;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 65px;
+    height: 65px;
+    background-color: #e8e8e8;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.nickname {
+    color: white;
+    font-weight: 600;
+    font-size: 18px;
+    position: absolute;
+    left: 50%;
+    top: 90%;
+    transform: translate(-50%, -50%);
+}
+
+.my-card {
+    background-color: white;
+    margin-top: 15px;
+    height: 150px
+}
+
+.card-title {
+    height: 60px;
+    line-height: 60px;
+    padding-left: 20px;
+    font-size: 18px;
+    border-bottom: 1px solid #F3F3F3;
+}

src/pages/my/all/index.js

@@ -1,5 +1,65 @@
 import React, {Component} from 'react'
 import './index.css'
+import {Grid} from 'antd-mobile'
+
+const orderIcon = [
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '待付款',
+        id: 'pay'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '待发货',
+        id: 'ship'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '待收货',
+        id: 'unbox'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '待评价',
+        id: 'judge'
+    }
+]
+
+const toolsIcon = [
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '收货地址',
+        id: 'address'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '购物车',
+        id: 'cart'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '系统通知',
+        id: 'message'
+    }
+]
+
+const memberIcon = [
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '会员卡',
+        id: 'card'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '优惠券',
+        id: 'coupon'
+    },
+    {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        text: '积分',
+        id: 'credit'
+    }
+]
 
 class All extends Component {
     constructor(props) {
@@ -10,8 +70,58 @@ class All extends Component {
     }
 
     render() {
+        let {changePageInMy} = this.props;
         return (
-            <div>all</div>
+            <div className='my-wrap all'>
+                <div className='avatar-area'>
+                    <div className='avatar'/>
+                    <div className='nickname'>110</div>
+                </div>
+                <div className='my-card order-card'>
+                    <div className='card-title'>
+                        电商订单
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={orderIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(order) => {
+                                  changePageInMy('order', {id: order.id})
+                              }}
+                        />
+                    </div>
+                </div>
+
+                <div className='my-card tools-card'>
+                    <div className='card-title'>
+                        我的工具
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={toolsIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(tools) => {
+                                  changePageInMy('tools', {id: tools.id})
+                              }}
+                        />
+                    </div>
+                </div>
+
+                <div className='my-card member-card'>
+                    <div className='card-title'>
+                        会员中心
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={memberIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(member) => {
+                                  changePageInMy('member', {id: member.id})
+                              }}
+                        />
+                    </div>
+                </div>
+            </div>
         )
     }
 }

src/pages/my/index.js

@@ -2,6 +2,8 @@ import React, {Component} from 'react'
 import './index.css'
 import All from './all'
 import Order from './order'
+import Tools from './tools'
+import Member from './member'
 
 class My extends Component {
     constructor(props) {
@@ -12,7 +14,7 @@ class My extends Component {
         }
     }
 
-    changePageInHome = (page, param, hidden) => {
+    changePageInMy = (page, param, hidden) => {
         this.props.changeTabBar('my', hidden !== undefined ? hidden : true)
         this.setState({
             page,
@@ -25,9 +27,13 @@ class My extends Component {
 
         switch (page) {
             case 'all':
-                return <All changePageInHome={this.changePageInHome} {...param}/>
+                return <All changePageInMy={this.changePageInMy} {...param}/>
             case 'order':
-                return <Order changePageInHome={this.changePageInHome} {...param}/>
+                return <Order changePageInMy={this.changePageInMy} {...param}/>
+            case 'tools':
+                return <Tools changePageInMy={this.changePageInMy} {...param}/>
+            case 'member':
+                return <Member changePageInMy={this.changePageInMy} {...param}/>
             default:
                 return <div>这个页面不应该出现是</div>
         }

src/pages/my/member/index.js

@@ -0,0 +1,31 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+
+class Member extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {changePageInMy} = this.props
+        return (
+            <div className='member-wrap'>
+                <div className='member-navbar-wrap'>
+                    <NavBar
+                        className='member-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => changePageInMy('all', {}, false)}
+                        rightContent={[
+                            <Icon key="1" type="ellipsis"/>,
+                        ]}
+                    >会员详情</NavBar>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Member

src/pages/my/order/index.js

@@ -1,18 +1,29 @@
 import React, {Component} from 'react'
 import './index.css'
-import All from "../all"
+import {NavBar, Icon} from 'antd-mobile'
 
 class Order extends Component {
     constructor(props) {
         super(props)
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
+        let {changePageInMy} = this.props
         return (
-            <div>order</div>
+            <div className='order-wrap'>
+                <div className='order-navbar-wrap'>
+                    <NavBar
+                        className='order-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => changePageInMy('all', {}, false)}
+                        rightContent={[
+                            <Icon key="1" type="ellipsis"/>,
+                        ]}
+                    >订单详情</NavBar>
+                </div>
+            </div>
         )
     }
 }

src/pages/my/tools/index.js

@@ -0,0 +1,31 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+
+class Tools extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {changePageInMy} = this.props
+        return (
+            <div className='tools-wrap'>
+                <div className='tools-navbar-wrap'>
+                    <NavBar
+                        className='tools-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => changePageInMy('all', {}, false)}
+                        rightContent={[
+                            <Icon key="1" type="ellipsis"/>,
+                        ]}
+                    >工具详情</NavBar>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Tools