Merge branch 'master' of http://gogs.ioobot.com:6680/xy/online

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

@@ -153,4 +153,12 @@ export const createOrderProducts=`mutation createorderProduct($remark: String, $
         count
         productPay
     }
+}`
+
+export const DELETE_ORDER=`mutation deleteorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
+    deleteorder: delete_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id)
+}`
+
+export const DELETE_ORDER_PRODUCT=`mutation deleteorderProduct($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID, $count: Int, $productPay: Float, $user_id: ID) {
+    deleteorderProduct: delete_orderProduct(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id)
 }`

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

@@ -31,7 +31,7 @@ export default class OrderCard extends Component {
 
                     </div>
                     </Card.Body>
-                    <Card.Footer content="" extra={<div>{order.orderStatus==='0'?<button onClick={this.toPay.bind(this)}>去支付</button>:''}</div>} />
+                    <Card.Footer content={<button onClick={()=>this.props.toDeleteOrder(order.id)}>删除</button>} extra={<div>{order.orderStatus==='0'?<button onClick={()=>this.props.toPay(order.id)}>去支付</button>:''}</div>} />
                 </Card>
             <WhiteSpace size="lg" />
         </WingBlank>

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

@@ -11,7 +11,7 @@
     -webkit-overflow-scrolling: touch;
     overflow-x: scroll;
     white-space: nowrap;
-    height: 455px;
+    height: 425px;
 }
 .orderList *{
     font-size: 12px;

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

@@ -1,28 +1,36 @@
 import React, { Component } from 'react'
 import OrderCard from './OrderCard'
 import { ActivityIndicator } from 'antd-mobile';
+import TabBarTop from './OrderTabTop'
+
 import './OrderCenterPage.css'
 
 
 import {graphqls} from '../../api/graphql_request'
-import {getOrderByProps,getProductByProps} from '../../api/graphql/order'
+import {getOrderByProps,getProductByProps,DELETE_ORDER,DELETE_ORDER_PRODUCT} from '../../api/graphql/order'
 
 export default class OrderCenterPage extends Component {
   constructor(props){
     super(props)
     this.state={
         orderList:[],
-        loading:true
+        loading:true,
+        tabs:[{title:"全部订单"},{title:"未支付"},{title:"已支付"},{title:"待评论"}],
+        select:"未支付"
     }
+
+    this.toPay=this.toPay.bind(this)
+    this.toDeleteOrder=this.toDeleteOrder.bind(this)
+    this.tabChange=this.tabChange.bind(this)
   }
 
   componentDidMount(){
-      this.getOrder()
+    let user_id=sessionStorage.getItem('openid')
+    this.getOrder({user_id})
   }
   //获取订单，并根据订单id获取订单产品信息，之后重构数据结构
-  getOrder(){
-    let user_id=sessionStorage.getItem('openid')
-    graphqls(getOrderByProps,{user_id}).then((res)=>{
+  getOrder(data){
+    graphqls(getOrderByProps,data).then((res)=>{
         //console.log(res.orderbyprops)
         let orderArr=res.orderbyprops||[]
         for(let i=0;i<orderArr.length;i++){
@@ -31,9 +39,13 @@ export default class OrderCenterPage extends Component {
                 //console.log('order_id',orderArr[i].id)
                 //console.log('getProductByProps',res)
                 orderArr[i].orderProducts=res.orderProductbyprops
-
+                
                 if(i===orderArr.length-1){
                     //console.log('----orderList-----',orderArr)
+                    orderArr.sort((a,b)=>{
+                        return new Date(b.createdAt).getTime()-new Date(a.createdAt).getTime()
+                    })
+                    sessionStorage.setItem('orderList',JSON.stringify(orderArr))
                     this.setState({
                         orderList:orderArr,
                         loading:false
@@ -44,17 +56,61 @@ export default class OrderCenterPage extends Component {
     })
   }
 
+  deleteOrder(data){
+    graphqls(DELETE_ORDER,data).then(e=>{
+        let user_id=sessionStorage.getItem('openid')
+        this.getOrder({user_id})
+    })
+  }
+
+  deleteOrderProduct(data){
+    graphqls(DELETE_ORDER_PRODUCT,data).then(e=>{
+        let user_id=sessionStorage.getItem('openid')
+        this.getOrder({user_id})
+    })
+  }
+  
+  //删除订单
+  toDeleteOrder(id){
+    console.log('order_id',id)
+    this.deleteOrder({id})
+    this.deleteOrderProduct({order_id:id})
+  }
+
+  toPay(id){
+    console.log('order_id',id)
+  }
+
+  tabChange(e){
+    //有待优化，请求？(响应太慢，放弃)or使用缓存(徐分别处理，增加了代码量，这里采用)
+    console.log(e)
+    let orderList=JSON.parse(sessionStorage.getItem('orderList'))||[]
+    if(e.title==='未支付'){
+        orderList=orderList.filter((item)=>{
+            return item.orderStatus==="0"
+        })
+        this.setState({orderList})
+    }else if(e.title==='已支付'){
+        orderList=orderList.filter((item)=>{
+            return item.orderStatus==="1"
+        })
+        this.setState({orderList})
+    }else{
+        this.setState({orderList})
+    }
+  }
+
   render() {
     const orderList=this.state.orderList||[]
     return (
       <div>
       <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-      <div className="headTitle">订单列表</div>
+       <TabBarTop tabChange={this.tabChange} tabs={this.state.tabs}/>
        <div className="orderList">
         {
             orderList.map((item,index)=>{
                 console.log(index,item)
-                return(<OrderCard order={item} key={item.id}/>)
+                return(<OrderCard order={item} key={item.id} toPay={this.toPay} toDeleteOrder={this.toDeleteOrder}/>)
             })
         }
        </div>

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

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { Tabs, WhiteSpace } from 'antd-mobile';
+
+class TabBarTop extends Component {
+    render() {
+      //console.log('this.state.products',this.state.products)
+      return (
+        <div>
+          <WhiteSpace />
+            <Tabs  onChange={e=>this.props.tabChange(e)} tabs={this.props.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
+            </Tabs>
+          <WhiteSpace />
+        </div>
+      );
+    }
+  }
+
+  export default TabBarTop

src/case/ShopApp/src/components/ProductDetailPage/ActionSheet.css

@@ -1,4 +1,4 @@
-.mask{
+.detailWrap .mask{
     position: absolute;
     top: 0;
     left: 0;
@@ -15,7 +15,7 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    height: 200px;
+    height: 163px;
     width: 100%;
     background: #fff;
     z-index: 1;
@@ -35,6 +35,7 @@
     border: none;
     padding: 17px 0;
     color: #fff;
+    font-size: 12px;
 }
 
 .buttonWraps button:nth-child(1){

src/case/ShopApp/src/components/ProductDetailPage/ProductDetail.jsx

@@ -23,7 +23,8 @@ export default class ProductDetail extends Component{
         graphqls(getProductById,{id:this.props.product_id}).then((e)=>{
             console.log('productId',e.productbyid)
             this.setState({
-                product:e.productbyid
+                product:e.productbyid,
+                loading:false
             })
         })
     }

src/case/ShopApp/src/components/ProductDetailPage/UserAction.css

@@ -11,7 +11,7 @@
     padding: 16px 0px;
     flex-grow: 1;
     border: none;
-    
+    font-size: 12px;
 }
 
 .actionWrap .service,.actionWrap  .toCar{

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.css

@@ -21,6 +21,7 @@
     position: absolute;
     bottom: 45px;
     width: 100%;
+    height: 48px;
     left: 0;
     display: flex;
     z-index: 4;
@@ -28,7 +29,7 @@
 
 .footer .message{
     flex-basis: 200px;
-    padding: 15px 0;
+    line-height: 48px;
     text-align: center;
     background: #f18e47;
     color: #ffffff;
@@ -37,7 +38,6 @@
 .footer .toPay{
     flex-grow: 1;
     color: #ffffff;
-    padding: 15px 0;
     text-align: center;
     border: none;
 }