save

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

@@ -2,13 +2,16 @@ import React, {Component} from 'react'
 import './index.css'
 import {withRouter} from 'react-router-dom'
 import {
-
+    SearchBar,
     NavBar,
     Accordion,
-
+    ActivityIndicator
 } from 'antd-mobile'
-import { Icon} from 'antd'
+import {Icon} from 'antd'
 import classNames from 'classnames'
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+import {order_by_id} from "../../../../utils/gql"
 
 class Orders extends Component {
     constructor(props) {
@@ -31,7 +34,9 @@ class Orders extends Component {
                     }}
                 >订单管理</NavBar>
                 <div className='content-wrap'>
-                    <div className='my-list-subtitle' style={{color: 'grey'}}><Icon type="bulb" style={{marginRight: 10}}/>{accordionKey? '折叠单项以展开更多分类':'请选择需要打开的分类'}</div>
+                    <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]
@@ -60,27 +65,80 @@ class Orders extends Component {
     }
 }
 
-class Search extends  Component {
+class Search extends Component {
     constructor(props) {
         super(props)
         this.state = {
-
+            value: '',
+            searchValue: ''
         }
     }
 
+    componentDidMount() {
+        this.autoFocusInst.focus();
+    }
+
+    onChange= (value) => {
+        this.setState({ value });
+    };
+
     render() {
         return (
-            <div>search</div>
+            <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>
         )
     }
 }
 
-class Shiping extends Component {
+class SearchQuery extends Component {
     constructor(props) {
         super(props)
         this.state = {
 
         }
+        console.log('mount / mount again')
+    }
+
+    render() {
+        let {id} = this.props
+        return (
+            <Query query={gql(order_by_id)} variables={{id}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!'
+                        }
+                        console.log(data.orderbyid)
+                        return (
+                            <div>1</div>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+class Shiping extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
     }
 
     render() {
@@ -93,9 +151,7 @@ class Shiping extends Component {
 class Completed extends Component {
     constructor(props) {
         super(props)
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
@@ -108,9 +164,7 @@ class Completed extends Component {
 class Commented extends Component {
     constructor(props) {
         super(props)
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {

src/utils/gql.js

@@ -262,6 +262,66 @@ const orderbyprops = `
         }
     }
 `
+
+const order_by_id = `
+    query orderbyid($id: ID) {
+        orderbyid: order_by_id(id: $id) {
+            deliveryTime
+            remark
+            updatedAt
+            orderLogistics_id {
+                updatedAt
+                logisticsFee
+                expressId
+                createdAt
+                consigneeTel
+                id
+                consignAddress
+                LogisticsStatus
+                consigneeName
+            }
+            payTime
+            orderTotalPay
+            createdAt
+            orderStatus
+            userAddress_id {
+                address
+                updatedAt
+                telephone
+                default
+                city
+                username
+                postcode
+                createdAt
+                deletedAt
+                id
+                area
+                province
+            }
+            id
+            orderShipFee
+            count
+            user_id {
+                email
+                updatedAt
+                password
+                telephone
+                username
+                createdAt
+                openid
+                id
+            }
+            productTotalPay
+            orderPay_id {
+                id
+                totalPay
+                transactionId
+                payTime
+            }
+        }
+    }
+`
+
 const orderProduct_by_props = `
     query orderProductbyprops($order_id: ID) {
     orderProductbyprops: orderProduct_by_props(order_id: $order_id) {
@@ -536,6 +596,7 @@ export {
     userAddressbyprops,
     user_default_address,
     orderbyprops,
+    order_by_id,
     orderProduct_by_props,
     create_order,
     create_order_product,