Merge remote-tracking branch 'origin/master'

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
                                       }
                                   })
                               }}
@@ -139,7 +139,7 @@ class All extends Component {
                     </div>
                 </div>
 
-                <div className='my-card member-card'>
+                <div className='my-card member-card' style={{display: 'none'}}>
                     <div className='card-title'>
                         会员中心
                     </div>
@@ -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
                                       }

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>
 )

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)

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)

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)

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)

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)

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)

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)

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>
         )
     }

src/pages/my/order/detail/index.css

@@ -0,0 +1,61 @@
+.detail-address-wrap {
+    height: 190px;
+    position: relative;
+}
+
+.detail-address-backgroud-top {
+    background-color: #f44;
+    height: 100px;
+    color: white;
+    padding: 10px 20px;
+}
+
+.detail-status {
+    font-size: 18px;
+    float: left;
+}
+
+.detail-pay {
+    float: right;
+}
+
+.detail-address-backgroud-bottom {
+    background-color: white;
+    height: 80px;
+}
+
+.detail-address-content {
+    background-color: white;
+    height: 100px;
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    width: 90%;
+    transform: translate(-50%, -50%);
+    border-radius: 10px;
+    border: 1px solid #F3F3F3;
+    box-shadow: 0 1px 10px #F3F3F3;
+    padding: 20px 5px;
+}
+
+.detail-address-content-icon {
+    width: 20px;
+    height: 100%;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.detail-address-content-username-phone {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.detail-store-name {
+    width: 100%;
+    background-color: white;
+    height: 40px;
+    padding: 0 15px;
+    color: black;
+    font-size: 15px;
+    line-height: 40px;
+}

src/pages/my/order/detail/index.js

@@ -0,0 +1,153 @@
+import {Component} from "react"
+import React from "react"
+import './index.css'
+import {NavBar, Icon as Iconm} from 'antd-mobile'
+import {Row, Col, Icon} from 'antd'
+import {orderProduct_by_props} from "../../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+
+class Detail extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            data: {}
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if (location && location.state) {
+            this.setState({
+                data: location.state.data
+            })
+        }
+    }
+
+    statusRender = (status) => {
+        switch (status) {
+            case '0':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="clock-circle"/>&nbsp;
+                        <span>等待付款</span>
+                    </div>
+                )
+            case '1':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="shop"/>&nbsp;
+                        <span>等待发货</span>
+                    </div>
+                )
+            case '2':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="gift"/>&nbsp;
+                        <span>等待收货</span>
+                    </div>
+                )
+            case '3':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="like"/>&nbsp;
+                        <span>完成</span>
+                    </div>
+                )
+            default:
+                return (
+                    <div className='detail-status'>
+                        <Icon type="clock-circle"/>&nbsp;
+                        <span>等待确认</span>
+                    </div>
+                )
+        }
+    }
+
+    productsRender = (data) => {
+        return (
+            data.map(data=> (
+                <div onClick={()=>{
+                    this.props.history.push({
+                        pathname: '/home/detail',
+                        state: {
+                            id: data.id
+                        }
+                    })
+                }}>
+                    <Row style={{width: '100%'}}>
+                        <Col span={6} style={{height: '100px'}}>
+                            <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}}/>
+                        </Col>
+                        <Col span={16} offset={2}>
+                            <div className='order-product-name'>{data.product_id.name}</div>
+                        </Col>
+                    </Row>
+                </div>
+            ))
+        )
+    }
+
+    render() {
+        let {data} = this.state
+        return (
+            <div>
+                <div className='detail-wrap'>
+                    <div className='navbar'>
+                        <NavBar
+                            mode="light"
+                            icon={<Iconm type="left"/>}
+                            onLeftClick={() => {
+                                this.props.history.go(-1)
+                            }}
+                        >订单详情</NavBar>
+                    </div>
+                    <div className='content-wrap'>
+                        <div className='detail-address-wrap'>
+                            <div className='detail-address-backgroud-top'>
+                                {this.statusRender(data.orderStatus)}
+                                <div className='detail-pay'>
+                                    ￥{data.productTotalPay}
+                                </div>
+                            </div>
+                            <div className='detail-address-backgroud-bottom'/>
+                            <div className='detail-address-content'>
+                                <Row>
+                                    <Col span={4} className='detail-address-content-icon'>
+                                        <Icon type="pushpin"/>
+                                    </Col>
+                                    <Col span={20}>
+                                        <div className='detail-address-content-username-phone'>
+                                            {data.userAddress_id.username}&nbsp;&nbsp;{data.userAddress_id.telephone}
+                                        </div>
+                                        <div>
+                                            地址：{data.userAddress_id.province + data.userAddress_id.city + data.userAddress_id.area + data.userAddress_id.address}
+                                        </div>
+                                    </Col>
+                                </Row>
+                            </div>
+                        </div>
+                        <div className='detail-goods-wrap'>
+                            <div className='detail-store-name'>JD</div>
+                            <Query query={gql(orderProduct_by_props)} variables={{order_id: data.id}}>
+                                {
+                                    ({loading, error, data}) => {
+                                        if (error) {
+                                            return 'error!'
+                                        }
+                                        data = data.orderProductbyprops
+                                        return (
+                                            <div>{this.productsRender(data)}</div>
+                                        )
+                                    }
+                                }
+                            </Query>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Detail

src/pages/my/order/display/index.css

@@ -0,0 +1,88 @@
+.order-card {
+    margin-top: 20px;
+    background-color: white;
+}
+
+.order-card-content {
+    height: 100px;
+    background-color: #f5f5f9;
+    display: flex;
+    padding: 5px 0;
+}
+
+.order-product-img {
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 90px;
+    margin-left: 5px;
+    height: 100%;
+}
+
+.order-card-bottom {
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+    height: 35px;
+    line-height: 35px;
+}
+
+.order-card-pay {
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 500;
+    color: black;
+    margin-right: 10px;
+}
+
+.order-card-count {
+    display: inline-block;
+}
+
+.order-card-button-group {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid #F3F3F3;
+    height: 45px;
+    line-height: 45px;
+    padding: 5px 10px 5px 0;
+}
+
+.order-card-button-group>a:hover {
+
+}
+
+.order-button {
+    border-radius: 50px;
+    background-color: white;
+    height: 30px;
+    width: 75px;
+    border: 1px solid #F3F3F3 !important;
+}
+
+.pay-button {
+    border: 1px solid #f44 !important;
+    color: #f44;
+}
+
+.ship-button {
+
+}
+
+.cancel-button {
+    border: 1px solid #f44 !important;
+    color: #f44;
+    width: 85px;
+}
+
+.unbox-button {
+    width: 85px;
+}
+
+.judge-button {
+
+}
+
+.more-button {
+
+}

src/pages/my/order/display/index.js

@@ -0,0 +1,267 @@
+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 Display 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 (
+                                <DisplayRender data={data.orderbyprops} orderStatus={orderStatus}
+                                               history={this.props.history}/>
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Display)
+
+class DisplayRender 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}/>
+            )))
+        }
+    }
+
+    orderCardBottomRender = (order) => {
+        let {orderStatus} = this.props
+        switch (orderStatus) {
+            case '0':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;需付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            case '1':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            case '2':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            case '3':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            default:
+                return (
+                    <div>1</div>
+                )
+        }
+    }
+
+    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'>
+                                <div className='order-card-top'>JD</div>
+
+                                <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-content' onClick={() => {
+                                                        this.props.history.push({
+                                                            pathname: '/my/order/detail',
+                                                            state: {
+                                                                data: order
+                                                            }
+                                                        })
+                                                    }}>
+                                                        {
+                                                            this.orderCardContentRender(data)
+                                                        }
+                                                    </div>
+                                                </div>
+                                            )
+                                        }
+                                    }
+                                </Query>
+
+                                {this.orderCardBottomRender(order)}
+
+                                {this.orderCardButtonGroupRender()}
+                            </div>
+                        ))
+                }
+            </div>
+        )
+    }
+}

src/pages/my/order/index.css

@@ -1,31 +0,0 @@
-.order-my-content {
-    padding-top: 45px;
-}
-
-.order-card {
-    margin-top: 20px;
-    background-color: white;
-}
-
-.order-card-content {
-    height: 100px;
-    background-color: #ebedf0;
-}
-
-.order-card-bottom {
-    display: flex;
-    justify-content: flex-end;
-    align-items: baseline;
-}
-
-.order-card-pay {
-    display: inline-block;
-    font-size: 18px;
-    font-weight: 500;
-    color: black;
-    margin-right: 10px;
-}
-
-.order-card-count {
-    display: inline-block;
-}

src/pages/my/order/index.js

@@ -1,144 +1,44 @@
 import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon, ActivityIndicator} from 'antd-mobile'
-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}/>
-                            )
-                        }
-                    }
-                </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 = {}
-    }
-
-    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!'
-                                            }
-                                            console.log(data)
-                                            return (
-                                                <div>
-                                                    <div className='order-card-top'>JD</div>
-                                                    <div className='order-card-content'></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>
-                                                </div>
-                                            )
-                                        }
-                                    }
-                                </Query>
-                            </div>
-                        ))
-                }
-            </div>
-        )
-    }
-}
+export default withRouter(Order)

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)

src/pages/my/tools/address/index.css

@@ -25,9 +25,9 @@
 }
 
 .ellipsis {
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
 }
 
 .address-address {

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>
         )
     }

src/pages/my/tools/address/singleaddress/index.js

@@ -193,7 +193,7 @@ class DefaultAndSaveButton extends Component {
         // let {data} = this.props
         return (
             <div className='address-button'>
-                <Button block size='large'>设为默认并保存</Button>
+                <Button block size='large' style={{outline: 'none'}}>设为默认并保存</Button>
             </div>
         )
     }
@@ -210,7 +210,7 @@ class SaveAddressButton extends Component {
         // let {data} = this.props
         return (
             <div className='address-button'>
-                <Button type='primary' block size='large'>保存并使用</Button>
+                <Button type='primary' block size='large' style={{outline: 'none'}}>保存并使用</Button>
             </div>
         )
     }

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>
         )
     }

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>
         )
     }

src/utils/gql.js

@@ -166,34 +166,9 @@ const orderProduct_by_props = `
             }
             orderPay
             createdAt
-            order_id {
-                deliveryTime
-                updatedAt
-    
-                payTime
-                orderTotalPay
-                createdAt
-                orderStatus
-    
-                id
-                orderShipFee
-                count
-    
-                productTotalPay
-            }
             id
             count
             productPay
-            user_id {
-                email
-                updatedAt
-                password
-                telephone
-                username
-                createdAt
-                openid
-                id
-            }
         }
     }
 `