购物车下单返回的页面数据更新问题

src/pages/cart/all/detail/index.js

@@ -19,6 +19,8 @@ class CartDetail extends Component {
     //获取数据
     componentWillMount(){
         let cartList =  JSON.parse(sessionStorage.getItem("cartList"))
+        // console.log('CartDetail componentWillMount cartList session',cartList)
+        // console.log('CartDetail componentWillMount cartList props',this.props.cartList)
         let cartListLength = cartList ? cartList.length : 0
 
         this.setState({
@@ -29,8 +31,18 @@ class CartDetail extends Component {
             }else {
                 this.checkedAll('',true)
             }
-        }) 
+        })
+    }
 
+    componentWillReceiveProps(nextProps) {
+        // console.log("CartDetail componentWillReceiveProps",nextProps)
+        if(nextProps.updateData){
+            this.props.refetch().then(()=>{
+                this.setState({
+                    cartList:nextProps.cartList
+                })
+            })
+        }
     }
 
     //获取输入框的值
@@ -123,6 +135,7 @@ class CartDetail extends Component {
 
     //全选或全不选,判断全选状态
     checkedAll=(e,check)=>{
+        if(e) e.stopPropagation()
         let checked = e.target ? e.target.checked : check 
 
         if(checked===true){
@@ -169,10 +182,11 @@ class CartDetail extends Component {
             }
         }) 
         // console.log('cartList',this.state.cartList)
-        console.log('shopping',shopping)
+        // console.log('shopping',shopping)
         sessionStorage.setItem("cartList",JSON.stringify(this.state.cartList))
         sessionStorage.setItem("shopping",JSON.stringify(shopping))
         sessionStorage.setItem("totalPrice",JSON.stringify(this.state.totalPrice))
+        sessionStorage.setItem("totalCount",JSON.stringify(this.state.selectedCount))
         this.props.history.push({
             pathname: '/cart/orders',
             state:{}
@@ -187,7 +201,7 @@ class CartDetail extends Component {
                     {
                         cartList.map((item,index)=>{
                             return(
-                                <div key={index}>
+                                <div key={item.id+'detail'}>
                                     <div className="cart-list">
                                         <div className="cart-list-checkbox">
                                             <Checkbox
@@ -232,7 +246,7 @@ class CartDetail extends Component {
                                 checked={isSelectAll}
                                 onChange={(e)=>{this.checkedAll(e,'')}}
                                 style={{marginLeft:15}}
-                            />,
+                            />
                             <span className="jiesuan-checkbox_label">全选</span>
                         </div>
                         <div className={classNames({

src/pages/cart/all/edit/index.js

@@ -199,7 +199,7 @@ class CartEdit extends Component {
                             {
                                 this.state.cartList.map((item,index)=>{
                                     return(
-                                        <div key={index}>
+                                        <div key={item.id+'edit'}>
                                             <div className="cart-list">
                                                 <div className="cart-list-checkbox">
                                                     <Checkbox
@@ -246,7 +246,7 @@ class CartEdit extends Component {
                                                 checked={this.state.isSelectAll}
                                                 onChange={(e)=>{this.checkedAll(e,'')}}
                                                 style={{marginLeft:15}}
-                                            />,
+                                            />
                                             <span className="jiesuan-checkbox_label">全选</span>
                                         </div>
                                         <div className="jiesuan-total">

src/pages/cart/all/index.css

@@ -57,6 +57,7 @@
     width: 10%;
     display: flex;
     align-items: center;
+    z-index: 0;
 }
 
 .cart-list-image {
@@ -107,6 +108,7 @@
     align-items: center;
     background-color: #fdfbfb;
     border-top: 1px solid #f5f5f9;
+    z-index: 3;
 }
 
 .jiesuan-disabled {

src/pages/cart/all/index.js

@@ -14,16 +14,25 @@ class All extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            page: 'detail'
+            page: 'detail',
+            updateData:false
         }
     }
 
     componentWillMount() {
+        // console.log('cartAll componentWillMount',this.props)
         this.getHash()
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
-        this.getHash()
+    componentDidMount() {
+        // console.log('cartAll componentDidMount',this.props)
+        let state = this.props.history.location.state
+        let updateData = state ? state.updateData : false
+        if(updateData){
+            this.setState({
+                updateData
+            })
+        }
     }
 
     getHash = () => {
@@ -46,11 +55,11 @@ class All extends Component {
     }
 
     renderPage = (data, refetch) => {
-        let {page} = this.state
+        let {page,updateData} = this.state
 
         switch (page) {
             case 'detail':
-                return <CartDetail cartList={data.cartList}/>
+                return <CartDetail cartList={data.cartList} refetch={refetch} updateData={updateData}/>
             case 'edit':
                 return <CartEdit cartList={data.cartList} refetch={refetch}/>
             default:
@@ -60,6 +69,7 @@ class All extends Component {
 
     render() {
         let {page} = this.state
+        // console.log('render',page,this.props)
 
         return (
             <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
@@ -76,7 +86,7 @@ class All extends Component {
                         if (error) {
                             return 'error!'
                         }
-                        // console.log('cart data',data)
+                        // console.log('cart all data',data)
 
                         return (
                             <div className='cart-wrap'>
@@ -85,7 +95,7 @@ class All extends Component {
                                         mode="light"
                                         rightContent={[
                                             data.cartList.length ?
-                                                <span className='navbar-button' key={"1"} onClick={this.changeCartPage}>
+                                                <span className='navbar-button' key={"cart-navbar"} onClick={this.changeCartPage}>
                                                 {page === 'detail' ? "编辑" : "完成"}
                                             </span> : ''
                                         ]}

src/pages/cart/orders/index.js

@@ -4,6 +4,7 @@ import {NavBar, Icon, List, Picker} from 'antd-mobile'
 import classNames from 'classnames'
 import {Mutation} from "react-apollo"
 import gql from "graphql-tag"
+import moment from 'moment';
 
 import {create_order} from "../../../utils/gql"
 
@@ -30,6 +31,7 @@ class CartOrders extends Component {
             cartList: [],
             unfoldList: [],
             totalPrice: JSON.parse(sessionStorage.getItem('totalPrice')),
+            totalCount: JSON.parse(sessionStorage.getItem('totalCount')),
             delivery: ["快递配送"],
             height: '100%',
             unfoldStatus: true,
@@ -38,6 +40,7 @@ class CartOrders extends Component {
     }
 
     componentWillMount() {
+        // console.log('CartOrders componentWillMount',this.props)
         let cartList = JSON.parse(sessionStorage.getItem("shopping"))
         if (cartList.length > 3) {
             let cartList1 = cartList.slice(0, 3)
@@ -68,12 +71,35 @@ class CartOrders extends Component {
     }
 
     onSubmitOrder = (create_order) => {
-        const orderContent = {
+        let {totalCount, totalPrice} = this.state
+        let createdAt = moment().format('YYYY-MM-DD HH:mm:ss');
+        let tag = "18726202125".replace(/[^0-9]/ig, "").slice(-4);
+        let id = createdAt.replace(/[^0-9]/ig, "").substr(2) + tag;
+
+        let shopping = JSON.parse(sessionStorage.getItem("shopping"))
+        let deleteIdList = shopping.map(item => item.id)
 
+        const orderContent = {
+             deliveryTime: "",
+             updatedAt: "",
+             orderLogistics_id: "",
+             payTime: "",
+             orderTotalPay: totalPrice,
+             createdAt,
+             orderStatus: "0",
+             userAddress_id: "",
+             id,
+             orderShipFee: 0,
+             count: totalCount,
+             user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA",
+             productTotalPay: totalPrice,
+             orderPay_id: "",
+             deleteId:deleteIdList
         }
 
         create_order({variables:orderContent}).then((data)=>{
-            // console.log('delete data',data)
+            // console.log('create_order data',data)
+            sessionStorage.removeItem("cartList");
 
             this.props.history.push({
                 pathname:'/cart/pay',
@@ -93,7 +119,13 @@ class CartOrders extends Component {
                         mode="light"
                         icon={<Icon type="left"/>}
                         onLeftClick={() => {
-                            this.props.history.goBack()
+                            // this.props.history.goBack()
+                            this.props.history.push({
+                                pathname:'/cart',
+                                state:{
+                                    updateData:true
+                                }
+                            })
                         }}
                     >订单确认</NavBar>
                 </div>

src/utils/gql.js

@@ -199,54 +199,62 @@ const orderProduct_by_props = `
 `
 
 const create_order = `
-    mutation createorder($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) {
+    mutation createorder($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, 
+                         $deleteId: [String]) {
         createorder: create_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) {
-            deliveryTime
-            updatedAt
-            orderLogistics_id {
+            result
+            order {
+                deliveryTime
                 updatedAt
-                logisticsFee
-                expressId
+                orderLogistics_id {
+                    updatedAt
+                    logisticsFee
+                    expressId
+                    createdAt
+                    consigneeTel
+                    id
+                    consignAddress
+                    LogisticsStatus    
+                    consigneeName
+                }
+                payTime
+                orderTotalPay
                 createdAt
-                consigneeTel
+                orderStatus
+                userAddress_id {
+                    address
+                    updatedAt
+                    telephone
+                    default
+                    city
+                    username
+                    postcode
+                    createdAt
+                    deletedAt
+                    id    
+                    area
+                    province
+                }
                 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
-            productTotalPay
-            orderPay_id {
-                id        
-                totalPay
-                transactionId
-                payTime
-            }
+                orderShipFee
+                count
+                productTotalPay
+                orderPay_id {
+                    id        
+                    totalPay
+                    transactionId
+                    payTime
+                }
+            } 
         }
+        delete_userCart(where: {
+            id: {
+                _in: $deleteId
+            }
+        }) 
     }
 `
 
-
 export {
     productbyprops,
     productbyid,