add 添加并完善orderCenter

src/case/ShopApp/src/App.js

@@ -1,14 +1,18 @@
 import React, { Component } from 'react';
 import './App.css';
+
+import {PageContext,NumContext} from './context/context'
+
 // import 'antd-mobile/dist/antd-mobile.css';
 import HomePage from './components/HomePage/HomePage'
 import ShopCarPage from './components/ShopCarPage/ShopCarPage'
 import UserPage from './components/UserPage/UserPage'
-import {PageContext,NumContext} from './context/context'
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
 import ProductDetail from './components/ProductDetailPage/ProductDetail'
 import OrderPage from './components/OrderPage/OrederPage'
+import OrderCenterPage from './components/OrderCenterPage/OrderCenterPage'
+import AddressPage from './components/AddressPage/AddressPage'
 
 import {graphqls} from './api/graphql_request'
 import {getProductById,getProductByProps} from './api/graphql/product'
@@ -65,55 +69,76 @@ class ShopApp extends Component {
   renderPage(page=""){
     console.log('renderPage',page)
     const setNum=this.setNum.bind(this)
-    if(page==='detail'){
-      return(
-        <div className="pageWrap">
-          <ProductDetail product_id={this.state.product_id} setNum={setNum} />
-        </div>
-        )
-    }else if(page==='order'){
-      return(
-        <div className="pageWrap">
-        <OrderPage product={this.getProductByIds()} num={this.state.num}/>
-        </div>)
-    }else if(page==='index'){
-      console.log('index 渲染了')
-      return(
-        <div>
-          <div className="pageWrap indexPage">
-            <HomePage changePage={this.changePage}/>
-          </div>
-          <TabBarBottom changePage={this.changePage}/>
-        </div>
-        )
-    }
-    else if(page==='shopCar'){
-      console.log('shopCar 渲染了')
-      return(
-        <div>
+
+    switch(page){
+      case ('detail'):
+        return(
           <div className="pageWrap">
-            <ShopCarPage />
+            <ProductDetail product_id={this.state.product_id} setNum={setNum} />
           </div>
-          <TabBarBottom changePage={this.changePage}/>
-        </div>
-        )
-    }else if(page==='user'){
-      console.log('user 渲染了')
-      return(
-        <div>
+          )
+  
+      case('order'):
+        return(
           <div className="pageWrap">
-          <UserPage />
+            <OrderPage product={this.getProductByIds()} num={this.state.num}/>
           </div>
-          <TabBarBottom changePage={this.changePage}/>
-        </div>
-        )
-    }else if(page==='addressList'){
-
-    }else if(page==='editAddress'){
-
+          )
+  
+      case('shopCar'):
+        console.log('shopCar 渲染了')
+        return(
+          <div>
+            <div className="pageWrap">
+              <ShopCarPage />
+            </div>
+            <TabBarBottom changePage={this.changePage}/>
+          </div>
+          )
+  
+      case('user'):
+        console.log('user 渲染了')
+        return(
+          <div>
+            <div className="pageWrap">
+            <UserPage changePage={this.changePage}/>
+            </div>
+            <TabBarBottom changePage={this.changePage}/>
+          </div>
+          )
+      case('index'):
+        console.log('index 渲染了')
+        return(
+          <div>
+            <div className="pageWrap indexPage">
+              <HomePage />
+            </div>
+            <TabBarBottom changePage={this.changePage}/>
+          </div>
+          )
+      case('orderCenter'):
+        console.log('orderCenter 渲染了')
+          return(
+            <div className="pageWrap">
+              <OrderCenterPage />
+            </div>
+          )
+      case('addressPage'):
+        console.log('addressPage 渲染了')
+          return(
+            <div className="pageWrap">
+              <AddressPage />
+            </div>
+          )
+      default:
+        console.log('页面显示错误')
+        return (<div>页面显示错误</div>)
+        //break
     }
   }
 
+
+
   console(page){
     this.console.log(page)
   }

src/case/ShopApp/src/api/graphql/order.js

@@ -0,0 +1,85 @@
+export const getOrderByProps=`query orderbyprops($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
+    orderbyprops: order_by_props(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
+        deliveryTime
+        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
+        }
+    }
+}`
+
+export const getProductByProps=`query orderProductbyprops($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $count: Int, $productPay: Float, $user_id: ID) {
+    orderProductbyprops: orderProduct_by_props(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id count: $count productPay: $productPay user_id: $user_id) {
+        remark
+        updatedAt
+        product_id {
+            category
+            updatedAt
+            unit
+            name
+            createdAt
+            status
+            id
+            intro
+            price
+            img
+            stock
+        }
+        orderPay
+        createdAt
+        id
+        count
+        productPay
+    }
+}`

src/case/ShopApp/src/components/AddressPage/AddressPage.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class AddressPage extends Component {
+  render() {
+    return (
+      <div>
+        addresspage
+      </div>
+    )
+  }
+}

src/case/ShopApp/src/components/App/NavBar.jsx

@@ -14,7 +14,7 @@ export default class NavBars extends Component{
                             <NavBar
                             mode="dark"
                             icon={<Icon type="left" />}
-                            onLeftClick={() => changePage('index','')}
+                            onLeftClick={() =>  changePage('index')}
                             rightContent={[
                                 <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                                 <Icon key="1" type="ellipsis" />,

src/case/ShopApp/src/components/OrderCenterPage/OrderCard.jsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+
+import ProductCard from './ProductCard'
+
+export default class OrderCard extends Component {
+  toPay(){
+
+  }
+  render() {
+    const order=this.props.order||[]
+    console.log('这里是orderCard')
+    return (
+      <div>
+        <WingBlank size="lg">
+            <WhiteSpace size="lg" />
+                <Card>
+                    <Card.Header
+                    title={<span className="titleWrap"><span>{'订单号:'+order.id}</span><span>{order.createdAt}</span></span>}
+                    extra={<span>支付状态:{order.orderStatus==='0'?'未支付':'已支付'}</span>}
+                    />
+                    <Card.Body>
+                    <div className="OrderProductList">
+                        {
+                            (order.orderProducts||[]).map((item)=>{
+                                return (<ProductCard key={item.id} />)
+                            })
+                        }
+                    </div>
+                    </Card.Body>
+                    <Card.Footer content="" extra={<div>{order.orderStatus==='0'?<button onClick={this.toPay.bind(this)}>去支付</button>:''}</div>} />
+                </Card>
+            <WhiteSpace size="lg" />
+        </WingBlank>
+      </div>
+    )
+  }
+}

src/case/ShopApp/src/components/OrderCenterPage/OrderCenterPage.css

@@ -0,0 +1,15 @@
+
+.headTitle{
+    text-align: center;
+    padding: 5px 0;
+    font-size: 15px;
+    font-weight: bold;
+}
+.orderList *{
+    font-size: 12px;
+}
+
+.titleWrap{
+    display: flex;
+    flex-direction: column;
+}

src/case/ShopApp/src/components/OrderCenterPage/OrderCenterPage.jsx

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import OrderCard from './OrderCard'
+import './OrderCenterPage.css'
+
+
+import {graphqls} from '../../api/graphql_request'
+import {getOrderByProps,getProductByProps} from '../../api/graphql/order'
+
+export default class OrderCenterPage extends Component {
+  constructor(props){
+    super(props)
+    this.state={
+        orderList:[]
+    }
+  }
+
+  componentDidMount(){
+      this.getOrder()
+  }
+  //获取订单，并根据订单id获取订单产品信息，之后重构数据结构
+  getOrder(){
+    let user_id=sessionStorage.getItem('openid')
+    graphqls(getOrderByProps,{user_id}).then((res)=>{
+        //console.log(res.orderbyprops)
+        let orderArr=res.orderbyprops
+        for(let i=0;i<orderArr.length;i++){
+            //根据order_id获取订单产品信息,可以优化,可以只发出一次请求获取所有订单产品信息之后再经行处理
+            graphqls(getProductByProps,{order_id:orderArr[i].id}).then((res)=>{
+                //console.log('order_id',orderArr[i].id)
+                //console.log('getProductByProps',res)
+                orderArr[i].orderProducts=res.orderProductbyprops
+
+                if(i===orderArr.length-1){
+                    console.log('----order-----',orderArr)
+                    this.setState({
+                        orderList:orderArr
+                    })
+                }
+            })
+        }
+    })
+  }
+
+  render() {
+    const orderList=this.state.orderList||[]
+    return (
+      <div>
+      <div className="headTitle">订单列表</div>
+       <div className="orderList">
+        {
+            orderList.map((item)=>{
+                return(<OrderCard order={item} key={item.id}/>)
+            })
+        }
+       </div>
+      </div>
+    )
+  }
+}

src/case/ShopApp/src/components/OrderCenterPage/ProductCard.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+
+
+
+export default class ProductCard extends Component {
+  render() {
+    //console.log('productCard------------',this.props)
+    console.log('这里是productCard')
+    return (
+      <div>
+        <WingBlank size="lg">
+            <WhiteSpace size="lg" />
+                <Card>
+                    <Card.Header
+                    title="This is title"
+                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
+                    extra={<span>this is extra</span>}
+                    />
+                    <Card.Body>
+                    <div>This is content of `Card`</div>
+                    </Card.Body>
+                    <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
+                </Card>
+            <WhiteSpace size="lg" />
+        </WingBlank>
+      </div>
+    )
+  }
+}

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.jsx

@@ -24,8 +24,9 @@ class ShopCarPage extends Component{
         const user_id=sessionStorage.getItem('openid')
         graphqls(getShopCarByProps,{user_id}).then((response)=>{
             let sumPrice=0,shopCarCount=0;
-
-            response.userCartbyprops.map((item)=>{
+            //請求失敗,默认空数组
+            
+            (response.userCartbyprops||[]).map((item)=>{
                 sumPrice+=item.count*item.product_id.price
                 shopCarCount+=item.count
                 return 1

src/case/ShopApp/src/components/UserPage/userPage.jsx

@@ -4,6 +4,7 @@ import Head from './Head'
 import {graphqls} from '../../api/graphql_request'
 import {getUserByProps} from '../../api/graphql/user'
 
+
 import './UserPage.css'
 
 
@@ -28,16 +29,18 @@ class UserPage extends Component{
         })
     }
 
+    
+
     render(){
         return(
             <div className="UserPageWrap">
                 <div className="headerWrap">
                     <Head user={this.state.user}/></div>
                 <div className="toWrap">
-                    <div className='toOrderCenter'>
-                    <span></span><span>我的订单</span><span></span>
+                    <div className='toOrderCenter' onClick={()=>this.props.changePage('orderCenter')}>
+                        <span></span><span>我的订单</span><span></span>
                     </div>
-                    <div className='toAddressCenter'>
+                    <div className='toAddressCenter' onClick={()=>this.props.changePage('addressPage')}>
                         <span></span><span>我的地址</span><span></span>
                     </div>
                 </div>