save

src/pages/my/manage/index.js

@@ -29,7 +29,7 @@ class Manage extends Component {
                     <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}/>
+                    <Route path="/my/manage/*" component={Orders}/>
                 </Switch>
             </div>
         )

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

@@ -0,0 +1,25 @@
+.item-value {
+    float: right;
+    font-weight: 500;
+}
+
+.item-title {
+    font-size: 15px!important;
+}
+
+.order-tip-wrap {
+    position: relative;
+    height: 200px;
+    width: 100%;
+}
+
+.order-tip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.search-query {
+    min-height: 200px;
+}

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

@@ -5,13 +5,17 @@ import {
     SearchBar,
     NavBar,
     Accordion,
-    ActivityIndicator
+    ActivityIndicator,
+    List
 } 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"
+import {DisplayRender} from "../../order/display"
+
+const Item = List.Item;
 
 class Orders extends Component {
     constructor(props) {
@@ -43,19 +47,23 @@ class Orders extends Component {
                         })
                     }}>
                         <Accordion.Panel header="查询订单"
-                                         className={classNames({'hidden': accordionKey === '1' || accordionKey === '2' || accordionKey === '3'})}>
+                                         className={classNames({'hidden': accordionKey === '1' || accordionKey === '2' || accordionKey === '3' || accordionKey === '4'})}>
                             <Search/>
                         </Accordion.Panel>
                         <Accordion.Panel header="待发货"
-                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '2' || accordionKey === '3'})}>
+                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '2' || accordionKey === '3' || accordionKey === '4'})}>
                             <Shiping/>
                         </Accordion.Panel>
-                        <Accordion.Panel header="已确认"
-                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '1' || accordionKey === '3'})}>
+                        <Accordion.Panel header="待收货"
+                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '1' || accordionKey === '3' || accordionKey === '4'})}>
+                            <Unbox/>
+                        </Accordion.Panel>
+                        <Accordion.Panel header="待评价"
+                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '1' || accordionKey === '2' || accordionKey === '4'})}>
                             <Completed/>
                         </Accordion.Panel>
-                        <Accordion.Panel header="已评价"
-                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '1' || accordionKey === '2'})}>
+                        <Accordion.Panel header="已完成"
+                                         className={classNames({'hidden': accordionKey === '0' || accordionKey === '1' || accordionKey === '2' || accordionKey === '3'})}>
                             <Commented/>
                         </Accordion.Panel>
                     </Accordion>
@@ -118,6 +126,8 @@ class SearchQuery extends Component {
             case '2':
                 return '等待收货'
             case '3':
+                return '等待评价'
+            case '4':
                 return '完成'
             default:
                 return '等待确认'
@@ -127,7 +137,7 @@ class SearchQuery extends Component {
     render() {
         let {id} = this.props
         return (
-            <Query query={gql(order_by_id)} variables={{id}}>
+            <Query query={gql(order_by_id)} variables={{id}} className='search-query'>
                 {
                     ({loading, error, data}) => {
                         if (loading) {
@@ -143,15 +153,16 @@ class SearchQuery extends Component {
                         data = data.orderbyid
                         if (data === null) {
                             return (
-                                <div>请输入正确的订单号</div>
+                                <div className='order-tip-wrap'>
+                                    <div className='order-tip'>请输入正确的订单号</div>
+                                </div>
                             )
                         } else {
                             let {id, orderStatus, orderTotalPay, productTotalPay, count, remark, user_id, userAddress_id, createdAt, orderLogistics_id, orderPay_id} = data
-                            let {telephoneUser, usernameUser, email} = user_id
+                            let {telephone: telephoneUser, username: usernameUser, email} = user_id
                             let {province, city, area, address, telephone, username} = userAddress_id
-                            let expressId, logisticsFee, LogisticsStatus, expressCreatedAt
+                            let logisticsFee, LogisticsStatus, expressCreatedAt
                             if (orderLogistics_id !== null) {
-                                expressId = orderLogistics_id.expressId
                                 logisticsFee = orderLogistics_id.logisticsFee
                                 LogisticsStatus = orderLogistics_id.LogisticsStatus
                                 expressCreatedAt = orderLogistics_id.createdAt
@@ -160,26 +171,35 @@ class SearchQuery extends Component {
 
                             }
 
+                            const all = {
+                                '订单编号': id,
+                                '状态': this.statusRender(orderStatus),
+                                "备注": remark,
+                                "产品总量": count,
+                                "产品总计价格": productTotalPay,
+                                "订单总计价格": orderTotalPay,
+                                "订单人名称": username,
+                                "订单电话": telephone,
+                                "订单地址": province + city + area + address,
+                                "下单时间": createdAt,
+                                "用户名称": usernameUser,
+                                "用户邮箱": email,
+                                "用户电话": telephoneUser,
+                                "物流费用": logisticsFee,
+                                "物流状态": LogisticsStatus,
+                                "发货时间": expressCreatedAt
+                            }
+
                             return (
-                                <div>
-                                    <div>ID：{id}</div>
-                                    <div>状态：{this.statusRender(orderStatus)}</div>
-                                    <div>备注：{remark}</div>
-                                    <div>产品总量：{count}</div>
-                                    <div>产品总计价格：{productTotalPay}</div>
-                                    <div>订单总计价格：{orderTotalPay}</div>
-                                    <div>订单人名称：{username}</div>
-                                    <div>订单电话：{telephone}</div>
-                                    <div>订单地址：{province + city + area + address}</div>
-                                    <div>下单时间：{createdAt}</div>
-                                    <div>用户名称：{usernameUser}</div>
-                                    <div>用户邮箱：{email}</div>
-                                    <div>用户电话：{telephoneUser}</div>
-                                    <div>物流ID：{expressId}</div>
-                                    <div>物流费用：{logisticsFee}</div>
-                                    <div>物流状态：{LogisticsStatus}</div>
-                                    <div>发货时间：{expressCreatedAt}</div>
-                                </div>
+                                <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>
                             )
                         }
                     }
@@ -198,6 +218,54 @@ class Shiping extends Component {
     render() {
         return (
             <Query query={gql(orderbyprops)} variables={{orderStatus: '1'}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading-center">
+                                    <ActivityIndicator text="Loading..." 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>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+class Unbox extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <Query query={gql(orderbyprops)} variables={{orderStatus: '2'}}>
                 {
                     ({loading, error, data}) => {
                         if (loading) {
@@ -215,10 +283,17 @@ class Shiping extends Component {
                         return (
                             <div>
                                 {
-                                    data.length === 0?
-                                        '还没有这种订单'
+                                    data.length === 0 ?
+                                        <div className='order-tip-wrap'>
+                                            <div className='order-tip'>还没有这种订单</div>
+                                        </div>
                                         :
-                                        <div>还未展示</div>
+                                        <DisplayRender
+                                            data={data}
+                                            orderStatus='2'
+                                            button={false}
+                                            history={this.props.history}
+                                        />
                                 }
                             </div>
                         )
@@ -237,7 +312,7 @@ class Completed extends Component {
 
     render() {
         return (
-            <Query query={gql(orderbyprops)} variables={{orderStatus: '2'}}>
+            <Query query={gql(orderbyprops)} variables={{orderStatus: '3'}}>
                 {
                     ({loading, error, data}) => {
                         if (loading) {
@@ -255,10 +330,17 @@ class Completed extends Component {
                         return (
                             <div>
                                 {
-                                    data.length === 0?
-                                        '还没有这种订单'
+                                    data.length === 0 ?
+                                        <div className='order-tip-wrap'>
+                                            <div className='order-tip'>还没有这种订单</div>
+                                        </div>
                                         :
-                                        <div>还未展示</div>
+                                        <DisplayRender
+                                            data={data}
+                                            orderStatus='3'
+                                            button={false}
+                                            history={this.props.history}
+                                        />
                                 }
                             </div>
                         )
@@ -277,7 +359,7 @@ class Commented extends Component {
 
     render() {
         return (
-            <Query query={gql(orderbyprops)} variables={{orderStatus: '3'}}>
+            <Query query={gql(orderbyprops)} variables={{orderStatus: '4'}}>
                 {
                     ({loading, error, data}) => {
                         if (loading) {
@@ -295,10 +377,17 @@ class Commented extends Component {
                         return (
                             <div>
                                 {
-                                    data.length === 0?
-                                        '还没有这种订单'
+                                    data.length === 0 ?
+                                        <div className='order-tip-wrap'>
+                                            <div className='order-tip'>还没有这种订单</div>
+                                        </div>
                                         :
-                                        <div>还未展示</div>
+                                        <DisplayRender
+                                            data={data}
+                                            orderStatus='4'
+                                            button={false}
+                                            history={this.props.history}
+                                        />
                                 }
                             </div>
                         )

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

@@ -4,6 +4,7 @@ import {Row, Col} from 'antd'
 import {NavBar, Icon, ActivityIndicator, Button} from 'antd-mobile'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
+import classNames from 'classnames'
 
 import {orderbyprops, orderProduct_by_props} from "../../../../utils/gql"
 import './index.css'
@@ -119,11 +120,11 @@ class DisplayRender extends Component {
     }
 
     render() {
-        let {data, orderStatus} = this.props
+        let {data, orderStatus, button = true} = this.props
         let content = orderStatus === '0' ? '需付款' : '实付款'
 
         return (
-            <div className='content-wrap'>
+            <div className={classNames({'content-wrap': button})}>
                 {
                     data.length === 0 ?
                         <div>
@@ -175,7 +176,13 @@ class DisplayRender extends Component {
                                     <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
                                 </div>
 
-                                <ButtonGroupRender orderStatus={this.props.orderStatus}/>
+                                {
+                                    button?
+                                        <ButtonGroupRender orderStatus={this.props.orderStatus}/>
+                                        :
+                                        ''
+                                }
+
                             </div>
                         ))
                 }
@@ -229,5 +236,6 @@ const ButtonGroupRender = (props) => {
 
 export default withRouter(Display)
 export {
+    DisplayRender,
     ButtonGroupRender
 }