kulley 6 年 前
コミット
10edaef1e2

+ 3 - 3
src/pages/my/all/index.js

@@ -76,7 +76,7 @@ const shopIcon = [
     {
         icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/order.png',
         text: '订单管理',
-        id: 'order'
+        id: 'orders'
     }
 ]
 
@@ -105,7 +105,7 @@ class All extends Component {
                                   this.props.history.push({
                                       pathname: '/my/order',
                                       state: {
-                                          page: order.id
+                                          kind: order.id
                                       }
                                   })
                               }}
@@ -169,7 +169,7 @@ class All extends Component {
                               hasLine={false}
                               onClick={(shop) => {
                                   this.props.history.push({
-                                      pathname: '/my/shop',
+                                      pathname: '/my/manage',
                                       state: {
                                           page: shop.id
                                       }

+ 2 - 2
src/pages/my/index.js

@@ -4,7 +4,7 @@ import All from './all'
 import Order from './order'
 import Tools from './tools'
 import Member from './member'
-import Shop from './shop'
+import Manage from './manage'
 import {Switch, Route} from 'react-router-dom'
 
 const My = () => (
@@ -15,7 +15,7 @@ const My = () => (
             <Route path="/my/order" component={Order}/>
             <Route path="/my/tools" component={Tools}/>
             <Route path="/my/member" component={Member}/>
-            <Route path="/my/shop" component={Shop}/>
+            <Route path="/my/manage" component={Manage}/>
         </Switch>
     </div>
 )

+ 0 - 0
src/pages/my/shop/index.css → src/pages/my/manage/goods/index.css


+ 29 - 0
src/pages/my/manage/goods/index.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+
+class Goods extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='goods-navbar-wrap'>
+                <NavBar
+                    className='goods-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >商品管理</NavBar>
+            </div>
+
+        )
+    }
+}
+
+export default withRouter(Goods)

+ 39 - 0
src/pages/my/manage/index.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react'
+import Shop from './shop'
+import Goods from './goods'
+import Orders from './orders'
+import {withRouter, Route, Switch} from 'react-router-dom'
+
+class Manage extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            page: ''
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if (location && location.state) {
+            this.props.history.push({
+                pathname: '/my/manage/' + location.state.page,
+                state: {}
+            })
+        }
+    }
+
+    render() {
+        return (
+            <div className='manage-wrap'>
+                <Switch>
+                    <Route path="/my/manage/shop" component={Shop}/>
+                    <Route path="/my/manage/goods" component={Goods}/>
+                    <Route path="/my/manage/orders" component={Orders}/>
+                    <Route path="/my/manage/*" component={Shop}/>
+                </Switch>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Manage)

+ 0 - 0
src/pages/my/tools/index.css → src/pages/my/manage/orders/index.css


+ 29 - 0
src/pages/my/manage/orders/index.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+
+class Orders extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='orders-navbar-wrap'>
+                <NavBar
+                    className='orders-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >订单管理</NavBar>
+            </div>
+
+        )
+    }
+}
+
+export default withRouter(Orders)

+ 0 - 0
src/pages/my/manage/shop/index.css


+ 29 - 0
src/pages/my/manage/shop/index.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+
+class Shop extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='shop-navbar-wrap'>
+                <NavBar
+                    className='shop-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >店铺管理</NavBar>
+            </div>
+
+        )
+    }
+}
+
+export default withRouter(Shop)

+ 0 - 0
src/pages/my/member/card/index.css


+ 29 - 0
src/pages/my/member/card/index.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+
+class Card extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='card-navbar-wrap'>
+                <NavBar
+                    className='card-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >会员卡</NavBar>
+            </div>
+
+        )
+    }
+}
+
+export default withRouter(Card)

+ 0 - 0
src/pages/my/member/coupon/index.css


+ 29 - 0
src/pages/my/member/coupon/index.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+
+class Coupon extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='coupon-navbar-wrap'>
+                <NavBar
+                    className='coupon-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >优惠券</NavBar>
+            </div>
+
+        )
+    }
+}
+
+export default withRouter(Coupon)

+ 0 - 0
src/pages/my/member/credit/index.css


+ 29 - 0
src/pages/my/member/credit/index.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+
+class Credit extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='credit-navbar-wrap'>
+                <NavBar
+                    className='credit-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >我的积分</NavBar>
+            </div>
+
+        )
+    }
+}
+
+export default withRouter(Credit)

+ 24 - 16
src/pages/my/member/index.js

@@ -1,28 +1,36 @@
 import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
-import {withRouter} from 'react-router-dom'
+import Card from './card'
+import Coupon from './coupon'
+import Credit from './credit'
+import {withRouter, Route, Switch} from 'react-router-dom'
 
 class Member extends Component {
     constructor(props) {
         super(props)
-        this.state = {}
+        this.state = {
+            page: ''
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if (location && location.state) {
+            this.props.history.push({
+                pathname: '/my/member/' + location.state.page,
+                state: {}
+            })
+        }
     }
 
     render() {
         return (
-            <div className='member-wrap'>
-                <div className='member-navbar-wrap'>
-                    <NavBar
-                        className='member-navbar'
-                        mode="light"
-                        icon={<Icon type="left"/>}
-                        onLeftClick={() => {this.props.history.push({pathname: '/my/all'})}}
-                        rightContent={[
-                            <Icon key="1" type="ellipsis"/>,
-                        ]}
-                    >会员详情</NavBar>
-                </div>
+            <div className='manage-wrap'>
+                <Switch>
+                    <Route path="/my/member/card" component={Card}/>
+                    <Route path="/my/member/coupon" component={Coupon}/>
+                    <Route path="/my/member/credit" component={Credit}/>
+                    <Route path="/my/member/*" component={Card}/>
+                </Switch>
             </div>
         )
     }

+ 0 - 0
src/pages/my/order/detail/index.css


+ 33 - 0
src/pages/my/order/detail/index.js

@@ -0,0 +1,33 @@
+import {Component} from "react"
+import React from "react"
+import './index.css'
+import {NavBar, Icon} from 'antd-mobile'
+
+class Detail extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='detail-wrap'>
+                    <div className='navbar'>
+                        <NavBar
+                            mode="light"
+                            icon={<Icon type="left"/>}
+                            onLeftClick={() => {
+                                this.props.history.go(-1)
+                            }}
+                        >订单详情</NavBar>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Detail

+ 4 - 4
src/pages/my/order/index.css → src/pages/my/order/display/index.css

@@ -1,7 +1,3 @@
-.order-my-content {
-    padding-top: 45px;
-}
-
 .order-card {
     margin-top: 20px;
     background-color: white;
@@ -52,6 +48,10 @@
     padding: 5px 10px 5px 0;
 }
 
+.order-card-button-group>a:hover {
+
+}
+
 .order-button {
     border-radius: 50px;
     background-color: white;

+ 215 - 0
src/pages/my/order/display/index.js

@@ -0,0 +1,215 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon, ActivityIndicator, Button} from 'antd-mobile'
+import {Row, Col} from 'antd'
+import {withRouter} from 'react-router-dom'
+import {orderbyprops, orderProduct_by_props} from "../../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+
+class Order extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            navTitle: '待付款',
+            kind: 'pay',
+            orderStatus: '0'
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if (location && location.state) {
+            let navTitle = '',
+                orderStatus = '0'
+            let kind = location.state.kind
+            switch (kind) {
+                case 'pay':
+                    navTitle = '待付款'
+                    orderStatus = '0'
+                    break
+                case 'ship':
+                    navTitle = '待发货'
+                    orderStatus = '1'
+                    break
+                case 'unbox':
+                    navTitle = '待收货'
+                    orderStatus = '2'
+                    break
+                case 'judge':
+                    navTitle = '待评价'
+                    orderStatus = '3'
+                    break
+                default:
+                    navTitle = '无效页面'
+                    break
+            }
+            this.setState({
+                navTitle,
+                kind,
+                orderStatus
+            })
+        }
+    }
+
+    render() {
+        let {navTitle, orderStatus} = this.state
+        return (
+            <div className='order-wrap'>
+                <div className='navbar'>
+                    <NavBar
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            this.props.history.go(-2)
+                        }}
+                    >{navTitle}</NavBar>
+                </div>
+                <Query query={gql(orderbyprops)} variables={{user_id: "test", orderStatus}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            return (
+                                <OrderRender data={data.orderbyprops} orderStatus={orderStatus}/>
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Order)
+
+class OrderRender extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    orderCardContentRender = (data) => {
+        if (data.length === 1) {
+            return (
+                <Row style={{width: '100%'}}>
+                    <Col span={6} style={{height: '100%'}}>
+                        <div className='order-product-img' style={{backgroundImage: `url('${data[0].product_id.img}')`}}/>
+                    </Col>
+                    <Col span={16} offset={2}>
+                        <div className='order-product-name'>{data[0].product_id.name}</div>
+                    </Col>
+                </Row>
+            )
+        } else {
+            return (data.map(data => (
+                <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}} key={data.id}/>
+            )))
+        }
+    }
+
+    orderCardButtonGroupRender = () => {
+        let {orderStatus} = this.props
+        switch (orderStatus) {
+            case '0':
+                return (
+                    <div className='order-card-button-group'>
+                        <Button size="small" className='pay-button order-button'>去支付</Button>
+                    </div>
+                )
+            case '1':
+                return (
+                    <div className='order-card-button-group'>
+                        <Button size="small" className='ship-button order-button'>催发货</Button>
+                        &nbsp;&nbsp;
+                        <Button size="small" className='cancel-button order-button'>取消订单</Button>
+                    </div>
+                )
+            case '2':
+                return (
+                    <div className='order-card-button-group'>
+                        <Button size="small" className='unbox-button order-button'>查看物流</Button>
+                        &nbsp;&nbsp;
+                        <Button size="small" className='cancel-button order-button'>取消订单</Button>
+                    </div>
+                )
+            case '3':
+                return (
+                    <div className='order-card-button-group'>
+                        <Button size="small" className='judge-button order-button'>去评价</Button>
+                        &nbsp;&nbsp;
+                        <Button size="small" className='more-button order-button'>售后</Button>
+                    </div>
+                )
+            default:
+                return (
+                    <div>
+                        ok
+                    </div>
+                )
+        }
+    }
+
+    render() {
+        let {data} = this.props
+        return (
+            <div className='content-wrap'>
+                {
+                    data.length === 0 ?
+                        <div>
+                            还没有这种订单呢
+                        </div>
+                        :
+                        data.map(order => (
+                            <div key={order.id} className='order-card'>
+                                <Query query={gql(orderProduct_by_props)} variables={{order_id: order.id}}>
+                                    {
+                                        ({loading, error, data}) => {
+                                            if (loading) {
+                                                return (
+                                                    <div className="loading-center">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                )
+                                            }
+                                            if (error) {
+                                                return 'error!'
+                                            }
+                                            data = data.orderProductbyprops
+                                            return (
+                                                <div>
+                                                    <div className='order-card-top'>JD</div>
+                                                    <div className='order-card-content'>
+                                                        {
+                                                            this.orderCardContentRender(data)
+                                                        }
+                                                    </div>
+                                                    <div className='order-card-bottom'>
+                                                        <div
+                                                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                                                        </div>
+                                                        <div className='order-card-pay'>¥{order.productTotalPay}</div>
+                                                    </div>
+
+                                                    {this.orderCardButtonGroupRender()}
+
+                                                </div>
+                                            )
+                                        }
+                                    }
+                                </Query>
+                            </div>
+                        ))
+                }
+            </div>
+        )
+    }
+}

+ 22 - 193
src/pages/my/order/index.js

@@ -1,215 +1,44 @@
 import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon, ActivityIndicator, Button} from 'antd-mobile'
-import {Row, Col} from 'antd'
-import {withRouter} from 'react-router-dom'
-import {orderbyprops, orderProduct_by_props} from "../../../utils/gql"
-import {Query} from "react-apollo"
-import gql from "graphql-tag"
+import Display from './display'
+import Detail from "./detail"
+import {withRouter, Route, Switch} from 'react-router-dom'
 
 class Order extends Component {
     constructor(props) {
         super(props)
-        this.state = {
-            navTitle: '',
-            page: 'pay',
-            orderStatus: ''
-        }
+        this.state = {}
     }
 
     componentWillMount() {
         let {location} = this.props
         if (location && location.state) {
-            let navTitle = '',
-                orderStatus = '0'
-            let page = location.state.page
-            switch (page) {
-                case 'pay':
-                    navTitle = '待付款'
-                    orderStatus = '0'
-                    break
-                case 'ship':
-                    navTitle = '待发货'
-                    orderStatus = '1'
-                    break
-                case 'unbox':
-                    navTitle = '待收货'
-                    orderStatus = '2'
-                    break
-                case 'judge':
-                    navTitle = '待评价'
-                    orderStatus = '3'
-                    break
-                default:
-                    navTitle = '无效页面'
-                    break
+            if(['pay', 'ship', 'unbox', 'judge'].indexOf(location.state.kind)>-1) {
+                this.props.history.push({
+                    pathname: '/my/order/display',
+                    state: {
+                        kind: location.state.kind
+                    }
+                })
+            } else {
+                this.props.history.push({
+                    pathname: '/my/order/detail',
+                    state: {}
+                })
             }
-            this.setState({
-                navTitle,
-                page,
-                orderStatus
-            })
         }
     }
 
     render() {
-        let {navTitle, orderStatus} = this.state
         return (
             <div className='order-wrap'>
-                <div className='order-navbar-wrap navbar'>
-                    <NavBar
-                        mode="light"
-                        icon={<Icon type="left"/>}
-                        onLeftClick={() => {
-                            this.props.history.push({pathname: '/my/all'})
-                        }}
-                    >{navTitle}</NavBar>
-                </div>
-                <Query query={gql(orderbyprops)} variables={{user_id: "test", orderStatus}}>
-                    {
-                        ({loading, error, data}) => {
-                            if (loading) {
-                                return (
-                                    <div className="loading-center">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
-                                )
-                            }
-                            if (error) {
-                                return 'error!'
-                            }
-                            return (
-                                <OrderRender data={data.orderbyprops} orderStatus={orderStatus}/>
-                            )
-                        }
-                    }
-                </Query>
+                <Switch>
+                    <Route path="/my/order/display" component={Display}/>
+                    <Route path="/my/order/detail" component={Detail}/>
+                    <Route path="/my/order/*" component={Display}/>
+                </Switch>
             </div>
         )
     }
 }
 
-export default withRouter(Order)
-
-class OrderRender extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
-
-    orderCardContentRender = (data) => {
-        if (data.length === 1) {
-            return (
-                <Row style={{width: '100%'}}>
-                    <Col span={6} style={{height: '100%'}}>
-                        <div className='order-product-img' style={{backgroundImage: `url('${data[0].product_id.img}')`}}/>
-                    </Col>
-                    <Col span={16} offset={2}>
-                        <div className='order-product-name'>{data[0].product_id.name}</div>
-                    </Col>
-                </Row>
-            )
-        } else {
-            return (data.map(data => (
-                <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}}/>
-            )))
-        }
-    }
-
-    orderCardButtonGroupRender = () => {
-        let {orderStatus} = this.props
-        switch (orderStatus) {
-            case '0':
-                return (
-                    <div className='order-card-button-group'>
-                        <Button size="small" className='pay-button order-button'>去支付</Button>
-                    </div>
-                )
-            case '1':
-                return (
-                    <div className='order-card-button-group'>
-                        <Button size="small" className='ship-button order-button'>催发货</Button>
-                        &nbsp;&nbsp;
-                        <Button size="small" className='cancel-button order-button'>取消订单</Button>
-                    </div>
-                )
-            case '2':
-                return (
-                    <div className='order-card-button-group'>
-                        <Button size="small" className='unbox-button order-button'>查看物流</Button>
-                        &nbsp;&nbsp;
-                        <Button size="small" className='cancel-button order-button'>取消订单</Button>
-                    </div>
-                )
-            case '3':
-                return (
-                    <div className='order-card-button-group'>
-                        <Button size="small" className='judge-button order-button'>去评价</Button>
-                        &nbsp;&nbsp;
-                        <Button size="small" className='more-button order-button'>售后</Button>
-                    </div>
-                )
-            default:
-                return (
-                    <div>
-                        ok
-                    </div>
-                )
-        }
-    }
-
-    render() {
-        let {data} = this.props
-        return (
-            <div className='order-my-content'>
-                {
-                    data.length === 0 ?
-                        <div>
-                            还没有这种订单呢
-                        </div>
-                        :
-                        data.map(order => (
-                            <div key={order.id} className='order-card'>
-                                <Query query={gql(orderProduct_by_props)} variables={{order_id: order.id}}>
-                                    {
-                                        ({loading, error, data}) => {
-                                            if (loading) {
-                                                return (
-                                                    <div className="loading-center">
-                                                        <ActivityIndicator text="Loading..." size="large"/>
-                                                    </div>
-                                                )
-                                            }
-                                            if (error) {
-                                                return 'error!'
-                                            }
-                                            data = data.orderProductbyprops
-                                            return (
-                                                <div>
-                                                    <div className='order-card-top'>JD</div>
-                                                    <div className='order-card-content'>
-                                                        {
-                                                            this.orderCardContentRender(data)
-                                                        }
-                                                    </div>
-                                                    <div className='order-card-bottom'>
-                                                        <div
-                                                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
-                                                        </div>
-                                                        <div className='order-card-pay'>¥{order.productTotalPay}</div>
-                                                    </div>
-
-                                                    {this.orderCardButtonGroupRender()}
-
-                                                </div>
-                                            )
-                                        }
-                                    }
-                                </Query>
-                            </div>
-                        ))
-                }
-            </div>
-        )
-    }
-}
+export default withRouter(Order)

+ 0 - 28
src/pages/my/shop/index.js

@@ -1,28 +0,0 @@
-import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
-import {withRouter} from 'react-router-dom'
-
-class Shop extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
-
-    render() {
-        return (
-            <div className='shop-wrap'>
-                <div className='shop-navbar-wrap'>
-                    <NavBar
-                        className='shop-navbar'
-                        mode="light"
-                        icon={<Icon type="left"/>}
-                        onLeftClick={() => {this.props.history.push({pathname: '/my/all'})}}
-                    >店铺详情</NavBar>
-                </div>
-            </div>
-        )
-    }
-}
-
-export default withRouter(Shop)

+ 41 - 30
src/pages/my/tools/address/index.js

@@ -1,7 +1,7 @@
 import {Component} from "react"
 import React from "react"
 import {userAddressbyprops} from "../../../../utils/gql"
-import {ActivityIndicator} from 'antd-mobile'
+import {ActivityIndicator, NavBar} from 'antd-mobile'
 import {Icon, Row, Col} from 'antd'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
@@ -46,40 +46,51 @@ class Address extends Component {
         let {addressChoosed, addressID} = this.state
         return (
             <div>
-                <Query query={gql(userAddressbyprops)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
-                    {
-                        ({loading, error, data}) => {
-                            if (loading) {
+                <div className='navbar'>
+                    <NavBar
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            this.props.history.go(-2)
+                        }}
+                    >地址管理</NavBar>
+                </div>
+                <div className='content-wrap'>
+                    <Query query={gql(userAddressbyprops)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
+                        {
+                            ({loading, error, data}) => {
+                                if (loading) {
+                                    return (
+                                        <div className="loading-center">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    )
+                                }
+                                if (error) {
+                                    return 'error!'
+                                }
+
+                                data = data.userAddressbyprops
+
                                 return (
-                                    <div className="loading-center">
-                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    <div>
+                                        {
+                                            this.state.single ?
+                                                <SingleAddress addressID={addressID} addressChoosed={addressChoosed} changePage={this.changePage}/>
+                                                :
+                                                <AddressRender
+                                                    defaultAddress={this.getDefaultAddress(data)}
+                                                    otherAddress={this.getOtherAddress(data)}
+                                                    changePage={this.changePage}
+                                                    changeAddress={this.changeAddress}
+                                                />
+                                        }
                                     </div>
                                 )
                             }
-                            if (error) {
-                                return 'error!'
-                            }
-
-                            data = data.userAddressbyprops
-
-                            return (
-                                <div>
-                                    {
-                                        this.state.single ?
-                                            <SingleAddress addressID={addressID} addressChoosed={addressChoosed} changePage={this.changePage}/>
-                                            :
-                                            <AddressRender
-                                                defaultAddress={this.getDefaultAddress(data)}
-                                                otherAddress={this.getOtherAddress(data)}
-                                                changePage={this.changePage}
-                                                changeAddress={this.changeAddress}
-                                            />
-                                    }
-                                </div>
-                            )
                         }
-                    }
-                </Query>
+                    </Query>
+                </div>
             </div>
         )
     }

+ 5 - 36
src/pages/my/tools/index.js

@@ -1,6 +1,4 @@
 import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
 import Message from './message'
 import Address from './address'
 import {withRouter, Route, Switch} from 'react-router-dom'
@@ -20,46 +18,17 @@ class Tools extends Component {
                 pathname: '/my/tools/' + location.state.page,
                 state: {}
             })
-            let navTitle = ''
-            switch (location.state.page) {
-                case 'address':
-                    navTitle = '地址管理'
-                    break
-                case 'message':
-                    navTitle = '系统通知'
-                    break
-                default:
-                    navTitle = '无效页面'
-                    break
-            }
-            this.setState({
-                navTitle
-            })
         }
     }
 
     render() {
-        let {navTitle} = this.state
-
         return (
             <div className='tools-wrap'>
-                <div className='tools-navbar-wrap navbar'>
-                    <NavBar
-                        className='tools-navbar'
-                        mode="light"
-                        icon={<Icon type="left"/>}
-                        onLeftClick={() => {
-                            // this.props.history.push({pathname: '/my/all'})
-                            this.props.history.go(-2)
-                        }}
-                    >{navTitle}</NavBar>
-                </div>
-                <div className="content-wrap">
-                    <Switch>
-                        <Route exact path="/my/tools/address" component={Address}/>
-                        <Route path="/my/tools/message" component={Message}/>
-                    </Switch>
-                </div>
+                <Switch>
+                    <Route path="/my/tools/address" component={Address}/>
+                    <Route path="/my/tools/message" component={Message}/>
+                    <Route path="/my/tools/*" component={Address}/>
+                </Switch>
             </div>
         )
     }

+ 10 - 1
src/pages/my/tools/message/index.js

@@ -1,5 +1,6 @@
 import {Component} from "react"
 import React from "react"
+import {NavBar, Icon} from 'antd-mobile'
 
 class Message extends Component {
     constructor(props) {
@@ -12,7 +13,15 @@ class Message extends Component {
     render() {
         return (
             <div>
-                Message
+                <div className='navbar'>
+                    <NavBar
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            this.props.history.go(-2)
+                        }}
+                    >系统消息</NavBar>
+                </div>
             </div>
         )
     }