amend manage order

src/pages/my/manage/orders/index.css

@@ -9,7 +9,7 @@
 
 .order-tip-wrap {
     position: relative;
-    height: 500px;
+    height: 450px;
     width: 100%;
     background-color: transparent;
 }

src/pages/my/manage/orders/index.js

@@ -1,15 +1,8 @@
 import React, {Component} from 'react'
 import './index.css'
 import {withRouter} from 'react-router-dom'
-import {
-    SearchBar,
-    NavBar,
-    Accordion,
-    ActivityIndicator,
-    List
-} from 'antd-mobile'
+import {SearchBar, NavBar, ActivityIndicator, List, Tabs} from 'antd-mobile'
 import {Icon} from 'antd'
-import classNames from 'classnames'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 import {order_by_id, orderbyprops} from "../../../../utils/gql"
@@ -17,333 +10,320 @@ import {DisplayRender} from "../../order/display"
 
 const Item = List.Item;
 
+const tabs = [
+  { title: '待发货' },
+  { title: '待收货' },
+  { title: '已完成' },
+  { title: '查询订单' }
+];
+
 class Orders extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            accordionKey: undefined
-        }
+  constructor(props) {
+    super(props)
+    this.state = {
     }
+  }
 
-    render() {
-        let {accordionKey} = this.state
-        return (
-            <div className='goods-wrap'>
-                <NavBar
-                    className='navbar'
-                    mode="light"
-                    icon={<Icon type="left"/>}
-                    onLeftClick={() => {
-                        this.props.history.go(-1)
-                    }}
-                >订单管理</NavBar>
-                <div className='content-wrap'>
-                    <div className='my-list-subtitle' style={{color: 'grey'}}><Icon type="bulb"
-                                                                                    style={{marginRight: 10}}/>{accordionKey ? '折叠单项以展开更多分类' : '请选择需要打开的分类'}
-                    </div>
-                    <Accordion className="my-accordion" onChange={(key) => {
-                        this.setState({
-                            accordionKey: key[0]
-                        })
-                    }}>
-                        <Accordion.Panel header="查询订单"
-                                         className={classNames({'hidden': accordionKey !== undefined && accordionKey !== '0'})}>
-                            <Search/>
-                        </Accordion.Panel>
-                        <Accordion.Panel header="待发货"
-                                         className={classNames({'hidden': accordionKey !== undefined && accordionKey !== '1'})}>
-                            <Shiping/>
-                        </Accordion.Panel>
-                        <Accordion.Panel header="待收货"
-                                         className={classNames({'hidden': accordionKey !== undefined && accordionKey !== '2'})}>
-                            <Unbox/>
-                        </Accordion.Panel>
-                        <Accordion.Panel header="已完成"
-                                         className={classNames({'hidden': accordionKey !== undefined && accordionKey !== '3'})}>
-                            <Completed/>
-                        </Accordion.Panel>
-                    </Accordion>
-                </div>
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div className='goods-wrap'>
+        <NavBar
+          className='navbar'
+          mode="light"
+          icon={<Icon type="left"/>}
+          onLeftClick={() => {
+            this.props.history.go(-1)
+          }}
+        >订单管理</NavBar>
+        <Tabs
+          tabs={tabs}
+          // onChange={(tab, index) => { console.log('onChange', index, tab); }}
+        >
+          <Shiping/>
+          <Unbox/>
+          <Completed/>
+          <Search/>
+        </Tabs>
+      </div>
+    )
+  }
 }
 
 class Search extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            value: '',
-            searchValue: ''
-        }
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: '',
+      searchValue: ''
     }
+  }
 
-    componentDidMount() {
-        this.autoFocusInst.focus();
-    }
+  componentDidMount() {
+    this.autoFocusInst.focus();
+  }
 
-    onChange = (value) => {
-        this.setState({value});
-    };
+  onChange = (value) => {
+    this.setState({value});
+  };
 
-    render() {
-        return (
-            <div>
-                <SearchBar
-                    ref={ref => this.autoFocusInst = ref}
-                    placeholder="请在此处输入订单编号"
-                    value={this.state.value}
-                    onSubmit={searchValue => this.setState({searchValue})}
-                    onCancel={() => this.setState({value: ''})}
-                    onChange={value => this.setState({value})}
-                />
-                <SearchQuery id={this.state.searchValue}/>
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div className='order-body'>
+        <SearchBar
+          ref={ref => this.autoFocusInst = ref}
+          placeholder="请在此处输入订单编号"
+          value={this.state.value}
+          onSubmit={searchValue => this.setState({searchValue})}
+          onCancel={() => this.setState({value: ''})}
+          onChange={value => this.setState({value})}
+        />
+        <SearchQuery id={this.state.searchValue}/>
+      </div>
+    )
+  }
 }
 
 class SearchQuery extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
 
-    shouldComponentUpdate(nextProps) {
-        return nextProps.id !== this.props.id;
-    }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.id !== this.props.id;
+  }
 
-    statusRender = (status) => {
-        switch (status) {
-            case '0':
-                return '等待付款'
-            case '1':
-                return '等待发货'
-            case '2':
-                return '等待收货'
-            case '3':
-                return '等待评价'
-            case '4':
-                return '完成'
-            default:
-                return '等待确认'
-        }
+  statusRender = (status) => {
+    switch (status) {
+      case '0':
+        return '等待付款'
+      case '1':
+        return '等待发货'
+      case '2':
+        return '等待收货'
+      case '3':
+        return '等待评价'
+      case '4':
+        return '完成'
+      default:
+        return '等待确认'
     }
+  }
 
-    render() {
-        let {id} = this.props
-        return (
-            <Query query={gql(order_by_id)} variables={{id}} className='search-query'>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return (
-                                <div className="loading-center">
-                                    <ActivityIndicator text="加载中..." size="large"/>
-                                </div>
-                            )
-                        }
-                        if (error) {
-                            return 'error!'
-                        }
-                        data = data.orderbyid
-                        if (data === null) {
-                            return (
-                                <div className='order-tip-wrap'>
-                                    <div className='order-tip'>请输入正确的订单号</div>
-                                </div>
-                            )
-                        } else {
-                            let {id, orderStatus, orderTotalPay, productTotalPay, count, remark, user_id, createdAt, orderLogistics_id, orderPay_id} = data
-                            let {telephone: telephoneUser, username: usernameUser, email} = user_id
-                            let {consigneeName, consigneeTel, consignAddress} = orderLogistics_id
-                            let logisticsFee, LogisticsStatus, expressCreatedAt
-                            if (orderLogistics_id !== null) {
-                                logisticsFee = orderLogistics_id.logisticsFee
-                                LogisticsStatus = orderLogistics_id.LogisticsStatus
-                                expressCreatedAt = orderLogistics_id.createdAt
-                            }
-                            if (orderPay_id !== null) {
+  render() {
+    let {id} = this.props
+    return (
+      <Query query={gql(order_by_id)} variables={{id}} className='search-query'>
+        {
+          ({loading, error, data}) => {
+            if (loading) {
+              return (
+                <div className="loading-center">
+                  <ActivityIndicator text="加载中..." size="large"/>
+                </div>
+              )
+            }
+            if (error) {
+              return 'error!'
+            }
+            data = data.orderbyid
+            if (data === null) {
+              return (
+                <div className='order-tip-wrap'>
+                  <div className='order-tip'>请输入正确的订单号</div>
+                </div>
+              )
+            } else {
+              let {id, orderStatus, orderTotalPay, productTotalPay, count, remark, user_id, createdAt, orderLogistics_id, orderPay_id} = data
+              let {telephone: telephoneUser, username: usernameUser, email} = user_id
+              let {consigneeName, consigneeTel, consignAddress} = orderLogistics_id
+              let logisticsFee, LogisticsStatus, expressCreatedAt
+              if (orderLogistics_id !== null) {
+                logisticsFee = orderLogistics_id.logisticsFee
+                LogisticsStatus = orderLogistics_id.LogisticsStatus
+                expressCreatedAt = orderLogistics_id.createdAt
+              }
+              if (orderPay_id !== null) {
 
-                            }
+              }
 
-                            const all = {
-                                '订单编号': id,
-                                '状态': this.statusRender(orderStatus),
-                                "备注": remark,
-                                "产品总量": count,
-                                "产品总计价格": productTotalPay,
-                                "订单总计价格": orderTotalPay,
-                                "收货人": consigneeName,
-                                "收货人联系号码": consigneeTel,
-                                "收货地址": consignAddress,
-                                "下单时间": createdAt,
-                                "用户名称": usernameUser,
-                                "用户邮箱": email,
-                                "用户电话": telephoneUser,
-                                "物流费用": logisticsFee,
-                                "物流状态": LogisticsStatus,
-                                "发货时间": expressCreatedAt
-                            }
+              const all = {
+                '订单编号': id,
+                '状态': this.statusRender(orderStatus),
+                "备注": remark,
+                "产品总量": count,
+                "产品总计价格": productTotalPay,
+                "订单总计价格": orderTotalPay,
+                "收货人": consigneeName,
+                "收货人联系号码": consigneeTel,
+                "收货地址": consignAddress,
+                "下单时间": createdAt,
+                "用户名称": usernameUser,
+                "用户邮箱": email,
+                "用户电话": telephoneUser,
+                "物流费用": logisticsFee,
+                "物流状态": LogisticsStatus,
+                "发货时间": expressCreatedAt
+              }
 
-                            return (
-                                <List>
-                                    {
-                                        Object.keys(all).map((key, index) => (
-                                                <Item key={index}><span className='item-title'>{key}：</span><span
-                                                    className='item-value'>{all[key]}</span></Item>
-                                            )
-                                        )
-                                    }
-                                </List>
-                            )
-                        }
-                    }
-                }
-            </Query>
-        )
-    }
+              return (
+                <List>
+                  {
+                    Object.keys(all).map((key, index) => (
+                        <Item key={index}><span className='item-title'>{key}：</span><span
+                          className='item-value'>{all[key]}</span></Item>
+                      )
+                    )
+                  }
+                </List>
+              )
+            }
+          }
+        }
+      </Query>
+    )
+  }
 }
 
 class Shiping extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
 
-    render() {
-        return (
-            <Query query={gql(orderbyprops)} variables={{orderStatus: '1'}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return (
-                                <div className="loading-center">
-                                    <ActivityIndicator text="加载中..." size="large"/>
-                                </div>
-                            )
-                        }
-                        if (error) {
-                            return 'error!'
-                        }
-                        data = data.orderbyprops
+  render() {
+    return (
+      <Query query={gql(orderbyprops)} variables={{orderStatus: '1'}}>
+        {
+          ({loading, error, data}) => {
+            if (loading) {
+              return (
+                <div className="loading-center">
+                  <ActivityIndicator text="加载中..." size="large"/>
+                </div>
+              )
+            }
+            if (error) {
+              return 'error!'
+            }
+            data = data.orderbyprops
 
-                        return (
-                            <div>
-                                {
-                                    data.length === 0 ?
-                                        <div className='order-tip-wrap'>
-                                            <div className='order-tip'>还没有这种订单</div>
-                                        </div>
-                                        :
-                                        <DisplayRender
-                                            data={data}
-                                            orderStatus='1'
-                                            button={false}
-                                            history={this.props.history}
-                                        />
-                                }
-                            </div>
-                        )
-                    }
+            return (
+              <div>
+                {
+                  data.length === 0 ?
+                    <div className='order-tip-wrap'>
+                      <div className='order-tip'>还没有这种订单</div>
+                    </div>
+                    :
+                    <DisplayRender
+                      data={data}
+                      orderStatus='1'
+                      button={false}
+                      history={this.props.history}
+                    />
                 }
-            </Query>
-        )
-    }
+              </div>
+            )
+          }
+        }
+      </Query>
+    )
+  }
 }
 
 class Unbox extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
 
-    render() {
-        return (
-            <Query query={gql(orderbyprops)} variables={{orderStatus: '2'}}>
+  render() {
+    return (
+      <Query query={gql(orderbyprops)} variables={{orderStatus: '2'}}>
+        {
+          ({loading, error, data}) => {
+            if (loading) {
+              return (
+                <div className="loading-center">
+                  <ActivityIndicator text="加载中..." size="large"/>
+                </div>
+              )
+            }
+            if (error) {
+              return 'error!'
+            }
+            data = data.orderbyprops
+            // console.log(data)
+            return (
+              <div>
                 {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return (
-                                <div className="loading-center">
-                                    <ActivityIndicator text="加载中..." size="large"/>
-                                </div>
-                            )
-                        }
-                        if (error) {
-                            return 'error!'
-                        }
-                        data = data.orderbyprops
-                        // console.log(data)
-                        return (
-                            <div>
-                                {
-                                    data.length === 0 ?
-                                        <div className='order-tip-wrap'>
-                                            <div className='order-tip'>还没有这种订单</div>
-                                        </div>
-                                        :
-                                        <DisplayRender
-                                            data={data}
-                                            orderStatus='2'
-                                            button={false}
-                                            history={this.props.history}
-                                        />
-                                }
-                            </div>
-                        )
-                    }
+                  data.length === 0 ?
+                    <div className='order-tip-wrap'>
+                      <div className='order-tip'>还没有这种订单</div>
+                    </div>
+                    :
+                    <DisplayRender
+                      data={data}
+                      orderStatus='2'
+                      button={false}
+                      history={this.props.history}
+                    />
                 }
-            </Query>
-        )
-    }
+              </div>
+            )
+          }
+        }
+      </Query>
+    )
+  }
 }
 
 class Completed extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
 
-    render() {
-        return (
-            <Query query={gql(orderbyprops)} variables={{orderStatus: '3'}}>
+  render() {
+    return (
+      <Query query={gql(orderbyprops)} variables={{orderStatus: '3'}}>
+        {
+          ({loading, error, data}) => {
+            if (loading) {
+              return (
+                <div className="loading-center">
+                  <ActivityIndicator text="加载中..." size="large"/>
+                </div>
+              )
+            }
+            if (error) {
+              return 'error!'
+            }
+            data = data.orderbyprops
+            // console.log(data)
+            return (
+              <div>
                 {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return (
-                                <div className="loading-center">
-                                    <ActivityIndicator text="加载中..." size="large"/>
-                                </div>
-                            )
-                        }
-                        if (error) {
-                            return 'error!'
-                        }
-                        data = data.orderbyprops
-                        // console.log(data)
-                        return (
-                            <div>
-                                {
-                                    data.length === 0 ?
-                                        <div className='order-tip-wrap'>
-                                            <div className='order-tip'>还没有这种订单</div>
-                                        </div>
-                                        :
-                                        <DisplayRender
-                                            data={data}
-                                            orderStatus='3'
-                                            button={false}
-                                            history={this.props.history}
-                                        />
-                                }
-                            </div>
-                        )
-                    }
+                  data.length === 0 ?
+                    <div className='order-tip-wrap'>
+                      <div className='order-tip'>还没有这种订单</div>
+                    </div>
+                    :
+                    <DisplayRender
+                      data={data}
+                      orderStatus='3'
+                      button={false}
+                      history={this.props.history}
+                    />
                 }
-            </Query>
-        )
-    }
+              </div>
+            )
+          }
+        }
+      </Query>
+    )
+  }
 }
 
 export default withRouter(Orders)

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

@@ -25,7 +25,7 @@
 
 .order-body {
     height: inherit;
-    margin-top: 50px;
+    margin-top: 95px;
 }
 
 .order-card-bottom {