amend manage order

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

@@ -521,7 +521,7 @@ class AllGoods extends Component {
   }
 
   deleteProduct = (deleteproduct, id, e) => {
-    alert('', `确定要删除此商品吗？`, [
+    alert('', `确定要删除此商品吗？删除后已有订单将不再显示此商品，建议仅下架商品`, [
       { text: '取消', onPress: () => console.log('cancel') },
       {
         text: '确定',
@@ -576,12 +576,11 @@ class AllGoods extends Component {
                           <Col className='good-name' span={11} offset={1}>{product.name}</Col>
                           <Col span={5} style={{display: 'flex', justifyContent: 'space-around'}}>
                             <Icon type="form" onClick={() => {this.setState({goodsModal: true, product, addOrUpdate: 'update'})}}/>
-                            <Mutation mutation={gql(delete_product_by_id)} refetchQueries={[
-                              {query: gql(productbyprops), variables: {}},
-                              {
-                                query: gql(productbyprops),
-                                variables: {status: '1', recommend: 1}
-                              }
+                            <Mutation
+                              mutation={gql(delete_product_by_id)}
+                              refetchQueries={[
+                                {query: gql(productbyprops), variables: {}},
+                                {query: gql(productbyprops), variables: {status: '1', recommend: 1}}
                             ]}>
                               {(deleteproduct, {loading, error}) => {
                                 if (loading)

src/pages/my/manage/index.js

@@ -14,20 +14,21 @@ class Manage extends Component {
         }
     }
 
-    componentWillMount() {
-        let {location} = this.props
-        if (location && location.state) {
-            this.props.history.replace({
-                pathname: '/my/manage/' + location.state.page,
-                state: {}
-            })
-        }
-    }
+    // componentWillMount() {
+    //     let {location} = this.props
+    //     if (location && location.state) {
+    //         this.props.history.replace({
+    //             pathname: '/my/manage/' + location.state.page,
+    //             state: {}
+    //         })
+    //     }
+    // }
 
     render() {
         return (
             <div className='manage-wrap'>
                 <Switch>
+                    <Route exact path="/my/manage" component={Orders}/>
                     <Route path="/my/manage/shop" component={Shop}/>
                     <Route path="/my/manage/goods" component={Goods}/>
                     <Route path="/my/manage/orders" component={Orders}/>

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

@@ -28,3 +28,8 @@
 .am-accordion-content {
     background: #f5f5f9!important;
 }
+
+.no-order-detail {
+    padding: 20px;
+    color: black;
+}

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

@@ -1,39 +1,98 @@
 import React, {Component} from 'react'
-import './index.css'
 import {withRouter} from 'react-router-dom'
-import {SearchBar, NavBar, ActivityIndicator, List, Tabs} from 'antd-mobile'
 import {Icon} from 'antd'
+import {SearchBar, NavBar, ActivityIndicator, List, Tabs, Modal} from 'antd-mobile'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
+
 import {order_by_id, orderbyprops} from "../../../../utils/gql"
 import {DisplayRender} from "../../order/display"
+import './index.css'
 
 const Item = List.Item;
 
 const tabs = [
-  { title: '待发货' },
-  { title: '待收货' },
-  { title: '已完成' },
-  { title: '查询订单' }
+  {
+    key: '0',
+    orderStatus: '0',
+    title: '待付款',
+    id: 'pay'
+  },
+  {
+    key: '1',
+    orderStatus: '1',
+    title: '待发货',
+    id: 'ship'
+  },
+  {
+    key: '2',
+    orderStatus: '2',
+    title: '待收货',
+    id: 'unbox'
+  },
+  {
+    key: '3',
+    orderStatus: '3',
+    title: '已完成',
+    id: 'judge'
+  }
 ];
 
 class Orders extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      tabValue: '0',
+      orderStatus: sessionStorage.getItem('select_orderStatus') || '0'
+    }
+  }
+
+  componentWillMount() {
+    const {location} = this.props
+    this.getOrderStatus(location)
+  }
+
+  getOrderStatus = (location) => {
+    let orderStatus = sessionStorage.getItem('select_orderStatus') || '0'
+    if(orderStatus){
+      this.setState({
+        orderStatus
+      })
+    }else if (location && location.state) {
+      let orderStatus = '0'
+      const kind = location.state.kind
+      switch (kind) {
+        case 'pay':
+          orderStatus = '0'
+          break
+        case 'ship':
+          orderStatus = '1'
+          break
+        case 'unbox':
+          orderStatus = '2'
+          break
+        case 'judge':
+          orderStatus = '3'
+          break
+        default:
+          break
+      }
+      this.setState({
+        orderStatus
+      })
     }
   }
 
   changeOrderStatus = (value) => {
     this.setState({
-      tabValue: value.tabValue
+      orderStatus: value.orderStatus
     })
+    sessionStorage.setItem('select_orderStatus',value.orderStatus)
   }
 
   render() {
     const { history } = this.props
-    // console.log("Orders history",history)
+    let { orderStatus } = this.state
+    // console.log("Orders orderStatus",orderStatus)
     return (
       <div className='goods-wrap'>
         <NavBar
@@ -46,17 +105,52 @@ class Orders extends Component {
         >订单管理</NavBar>
         <Tabs
           tabs={tabs}
-          initialPage={0}
+          swipeable={false}
+          initialPage={orderStatus}
           onChange={(tabValue, index) => {
-            console.log('onChange', index, tabValue);
+            // console.log('onChange', index, tabValue);
             this.changeOrderStatus(tabValue)
           }}
           // onChange={(tab, index) => { console.log('onChange', index, tab); }}
         >
-          <Shiping history={history} />
-          <Unbox history={history} />
-          <Completed history={history} />
-          <Search history={history} />
+          <Query query={gql(orderbyprops)} variables={{orderStatus}}>
+            {
+              ({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>
+                        :
+                        <div>
+                          <Search/>
+                          <DisplayRender
+                            data={data}
+                            orderStatus={orderStatus}
+                            button={false}
+                            history={this.props.history}
+                          />
+                        </div>
+                    }
+                  </div>
+                )
+              }
+            }
+          </Query>
         </Tabs>
       </div>
     )
@@ -68,7 +162,8 @@ class Search extends Component {
     super(props)
     this.state = {
       value: '',
-      searchValue: ''
+      searchValue: '',
+      orderDetailModal: false
     }
   }
 
@@ -80,18 +175,35 @@ class Search extends Component {
     this.setState({value});
   };
 
+  changeModal = (bool, e) => {
+    e.preventDefault()
+    this.setState({
+      orderDetailModal: bool
+    })
+  }
+
   render() {
+    let {value, searchValue, orderDetailModal} = this.state
     return (
       <div className='order-body'>
         <SearchBar
           ref={ref => this.autoFocusInst = ref}
           placeholder="请在此处输入订单编号"
-          value={this.state.value}
-          onSubmit={searchValue => this.setState({searchValue})}
+          value={value}
+          onSubmit={searchValue => {
+            this.setState({
+              searchValue,
+              orderDetailModal: true
+            })
+          }}
           onCancel={() => this.setState({value: ''})}
           onChange={value => this.setState({value})}
         />
-        <SearchQuery id={this.state.searchValue}/>
+        {
+          searchValue ?
+            <SearchQuery id={searchValue} changeModal={this.changeModal} orderDetailModal={orderDetailModal}/>
+            : ''
+        }
       </div>
     )
   }
@@ -103,10 +215,6 @@ class SearchQuery extends Component {
     this.state = {}
   }
 
-  shouldComponentUpdate(nextProps) {
-    return nextProps.id !== this.props.id;
-  }
-
   statusRender = (status) => {
     switch (status) {
       case '0':
@@ -125,7 +233,7 @@ class SearchQuery extends Component {
   }
 
   render() {
-    let {id} = this.props
+    const {id, orderDetailModal} = this.props
     return (
       <Query query={gql(order_by_id)} variables={{id}} className='search-query'>
         {
@@ -137,20 +245,31 @@ class SearchQuery extends Component {
                 </div>
               )
             }
-            if (error) {
-              return 'error!'
-            }
-            data = data.orderbyid
-            if (data === null) {
+            if (error) return 'error!'
+            const orderDetailData = data.orderbyid
+            if (!orderDetailData) {
               return (
-                <div className='order-tip-wrap'>
-                  <div className='order-tip'>请输入正确的订单号</div>
-                </div>
+                <Modal
+                  popup
+                  visible={orderDetailModal}
+                  onClose={(e)=>this.props.changeModal(false, e)}
+                  animationType="slide-up"
+                >
+                  <div className='close-item'>
+                    <div className='close-popup' onClick={(e)=>this.props.changeModal(false, e)}>
+                      <Icon type="close" />
+                    </div>
+                  </div>
+                  <div className='no-order-detail'>
+                    <p>未查询到相关信息</p>
+                    <p>请检查输入的订单编号是否有误！</p>
+                  </div>
+                </Modal>
               )
             } else {
-              let {id, orderStatus, orderTotalPay, productTotalPay, count, remark, user_id, createdAt, orderLogistics_id, orderPay_id} = data
+              let {id, orderStatus, orderTotalPay, productTotalPay, count, remark, user_id, createdAt, orderLogistics_id, orderPay_id} = orderDetailData
               let {telephone: telephoneUser, username: usernameUser, email} = user_id
-              let {consigneeName, consigneeTel, consignAddress} = orderLogistics_id
+              let {expressDetailName, expressId, consigneeName, consigneeTel, consignAddress} = orderLogistics_id
               let logisticsFee, LogisticsStatus, expressCreatedAt
               if (orderLogistics_id !== null) {
                 logisticsFee = orderLogistics_id.logisticsFee
@@ -177,163 +296,36 @@ class SearchQuery extends Component {
                 "用户电话": telephoneUser,
                 "物流费用": logisticsFee,
                 "物流状态": LogisticsStatus,
+                "快递名称": expressDetailName,
+                "快递单号": expressId,
                 "发货时间": 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>
-    )
-  }
-}
-
-class Shiping extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
-  render() {
-    // console.log("Shiping this.props.history",this.props.history)
-    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>
-            )
-          }
-        }
-      </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) {
-              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>
+                <Modal
+                  popup
+                  visible={orderDetailModal}
+                  onClose={(e)=>this.props.changeModal(false, e)}
+                  animationType="slide-up"
+                  className='modify-goods-modal'
+                >
+                  <div className='close-item'>
+                    <div className='close-popup' onClick={(e)=>this.props.changeModal(false, e)}>
+                      <Icon type="close" />
                     </div>
-                    :
-                    <DisplayRender
-                      data={data}
-                      orderStatus='2'
-                      button={false}
-                      history={this.props.history}
-                    />
-                }
-              </div>
-            )
-          }
-        }
-      </Query>
-    )
-  }
-}
-
-class Completed extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
-  render() {
-    return (
-      <Query query={gql(orderbyprops)} variables={{orderStatus: '3'}}>
-        {
-          ({loading, error, data}) => {
-            if (loading) {
-              return (
-                <div className="loading-center">
-                  <ActivityIndicator text="加载中..." size="large"/>
-                </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>
+                </Modal>
               )
             }
-            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>
-            )
           }
         }
       </Query>

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

@@ -1,5 +1,4 @@
-import {Component} from "react"
-import React from "react"
+import React, {Component} from 'react'
 import {Row, Col, Icon} from 'antd'
 import {NavBar} from 'antd-mobile'
 import {Query} from "react-apollo"
@@ -105,7 +104,6 @@ class Detail extends Component {
               mode="light"
               icon={<Icon type="left"/>}
               onLeftClick={() => {
-                // console.log("goback")
                 if(isAdmin){
                   this.props.history.go(-2)
                 }else {

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

@@ -117,3 +117,8 @@
 .am-tabs-pane-wrap-active {
     height: 100%!important;
 }
+
+.no-order-product {
+    justify-content: center;
+    align-items: center;
+}

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

@@ -60,7 +60,7 @@ class Display extends Component {
   }
 
   getOrderStatus = (location) => {
-    let orderStatus = sessionStorage.getItem('select_orderStatus')
+    let orderStatus = sessionStorage.getItem('select_orderStatus') || '0'
     if(orderStatus){
       this.setState({
         orderStatus
@@ -159,8 +159,8 @@ class DisplayRender extends Component {
   }
 
   orderCardContentRender = (data) => {
-    // console.log("DisplayRender this.props.history",this.props.history)
-    if (data.length === 1) {
+    // console.log("orderCardContentRender",data)
+    if (data.length === 1 && data[0].product_id) {
       return (
         <Row style={{width: '100%'}}>
           <Col span={6} style={{height: '100%'}}>
@@ -172,13 +172,19 @@ class DisplayRender extends Component {
         </Row>
       )
     } else {
-      return (data.map(data => (
-        <div
-          className='order-product-img'
-          style={{backgroundImage: `url('${data.product_id.img}')`}}
-          key={data.id}
-        />
-      )))
+      return (data.map(data => {
+        if(data.product_id) {
+          return (
+            <div
+              className='order-product-img'
+              style={{backgroundImage: `url('${data.product_id.img}')`}}
+              key={data.id}
+            />
+          )
+        }else {
+          return null
+        }
+      }))
     }
   }
 
@@ -189,7 +195,7 @@ class DisplayRender extends Component {
 
     return (
       <div >
-        <div className='order-body'>
+        <div style={{marginTop: button ? '95px' : 0}} >
           {
             data.length === 0 ?
               <div className='order-tip-wrap'>
@@ -210,10 +216,13 @@ class DisplayRender extends Component {
                             </div>
                           )
                         }
-                        if (error) {
-                          return 'error!'
-                        }
+                        if (error) return (
+                          <div className='order-card-content no-order-product' >
+                            订单所含商品已被删除，暂无法显示!
+                          </div>
+                        )
                         data = data.orderProductbyprops
+                        // console.log("DisplayRender query data",data)
                         return (
                           <div className='order-card-content' onClick={() => {
                             history.push({

src/pages/my/order/index.js

@@ -1,7 +1,8 @@
 import React, {Component} from 'react'
+import {withRouter, Route, Switch} from 'react-router-dom'
+
 import Display from './display'
 import Detail from "./detail"
-import {withRouter, Route, Switch} from 'react-router-dom'
 
 class Order extends Component {
     constructor(props) {