修改复选框bug，添加graphql

src/configs/url.js

@@ -1,3 +1,3 @@
-const graphqlFC = 'http://ec.ioobot.cn/graphql';
+const graphqlFC = 'https://ec.ioobot.cn/graphql';
 
 export {graphqlFC}

src/pages/cart/CartEdit.jsx

@@ -8,19 +8,22 @@ class CartEdit extends Component {
     constructor(props) {
         super(props);
         this.state = {
-
+            isSelectAll:false,
+            selectedCount:0
         }
     }
 
     //获取数据
     componentWillMount(){
-        const cartList = [
-            {id:'1',name:'test1',count:1,img:'',price:10},
-            {id:'2',name:'test2',count:2,img:'',price:20}
-        ];
+        // const cartList = [
+        //     {id:'1',name:'test1',count:1,img:'',price:10},
+        //     {id:'2',name:'test2',count:2,img:'',price:20}
+        // ];
         this.setState({
-            cartList
-        })
+            cartList:this.props.cartList
+        },()=>{
+            this.checkedAll('',false);
+        });
 
     }
 
@@ -36,6 +39,7 @@ class CartEdit extends Component {
                 }
             })
         });
+        this.sumCount();
     };
 
     // 增加
@@ -50,6 +54,7 @@ class CartEdit extends Component {
                 }
             })
         });
+        this.sumCount();
     };
 
     // 减少
@@ -64,6 +69,7 @@ class CartEdit extends Component {
                 }
             })
         });
+        this.sumCount();
     };
 
     //结算传值
@@ -71,10 +77,10 @@ class CartEdit extends Component {
         let {cartList} = this.state;
         let listLength = cartList.length;
 
-        alert('', '确定删除所选商品？', [
+        alert('', `确定要删除这${this.state.selectedCount}种商品吗？`, [
             { text: '取消', onPress: () => console.log('cancel') },
             {
-                text: '确认',
+                text: '确定',
                 onPress: () =>
                     new Promise((resolve) => {
                         for (let i = 0; i < listLength; i++) {
@@ -92,6 +98,7 @@ class CartEdit extends Component {
                     }),
             },
         ]);
+        this.sumCount();
     };
 
     //删除
@@ -106,7 +113,7 @@ class CartEdit extends Component {
             })
         });
         setTimeout(()=>{
-            this.sumPrice()
+            this.sumCount();
         },1)
     };
 
@@ -120,28 +127,59 @@ class CartEdit extends Component {
                 return ele
             })
         });
+
+        let flag = this.state.cartList.every((ele,index)=>{
+            if(ele.checked===false) {
+                return false;
+            }else {
+                return true;
+            }
+        });
+
+        if(flag===true){
+            this.setState({isSelectAll:true});
+        }else {
+            this.setState({isSelectAll:false});
+        }
+        this.sumCount();
     };
 
     //全选或全不选,判断全选状态
-    checkedAll=(e)=>{
-        // console.log('CheckedAll e',e);
-        if(e.target.checked===true){
+    checkedAll=(e,check)=>{
+        let checked = e.target ? e.target.checked : check;
+
+        if(checked===true){
             this.setState({
                 cartList:this.state.cartList.map((ele,index)=>{
                     ele.checked=true;
                     return ele
-                })
-            })
-        }else  if(e.target.checked===false){
+                }),
+                isSelectAll:true
+            });
+        }else  if(checked===false){
             this.setState({
                 cartList:this.state.cartList.map((ele,index)=>{
                     ele.checked=false;
                     return ele
-                })
-            })
+                }),
+                isSelectAll:false
+            });
         }
+        this.sumCount();
     };
 
+    //计算总合计
+    sumCount=()=>{
+        let selectedCount=0;
+        this.state.cartList.forEach((ele,index)=>{
+            if(ele.checked===true){
+                selectedCount+=ele.count;
+            }
+        });
+        this.setState({
+            selectedCount
+        });
+    };
 
     render() {
         let {cartList} = this.state;
@@ -163,12 +201,12 @@ class CartEdit extends Component {
                                             />
                                         </div>
                                         <div className="cart-list-image">
-                                            <img src={ele.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                            <img src={ele.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
                                         </div>
                                         <div className="cart-list-intro">
-                                            <div>{ele.name}</div>
+                                            <div>{ele.product_id.name}</div>
                                             <div>颜色尺码等</div>
-                                            <div>¥ {ele.price}</div>
+                                            <div>¥ {ele.product_id.price}</div>
                                         </div>
                                         <div className="cart-list-count">
                                             <div className="selected">
@@ -196,7 +234,11 @@ class CartEdit extends Component {
                         <div className="footer">
                             <div className="jiesuan">
                                 <div className="jiesuan-checkbox">
-                                    <Checkbox onChange={(e)=>{this.checkedAll(e)}} style={{marginLeft:15}}/>,
+                                    <Checkbox
+                                        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/CartItem.jsx

@@ -17,12 +17,12 @@ class CartItem extends Component {
 
     //获取数据
     componentWillMount(){
-        const cartList = [
-            {id:'1',name:'test1',count:1,img:'',price:10},
-            {id:'2',name:'test2',count:2,img:'',price:20}
-        ];
+        // const cartList = [
+        //     {id:'1',name:'test1',count:1,img:'',price:10},
+        //     {id:'2',name:'test2',count:2,img:'',price:20}
+        // ];
         this.setState({
-            cartList
+            cartList:this.props.cartList
         },()=>{
             this.checkedAll('',true);
         });
@@ -100,6 +100,20 @@ class CartItem extends Component {
                 return ele
             })
         });
+
+        let flag = this.state.cartList.every((ele,index)=>{
+            if(ele.checked===false) {
+                return false;
+            }else {
+                return true;
+            }
+        });
+
+        if(flag===true){
+            this.setState({isSelectAll:true});
+        }else {
+            this.setState({isSelectAll:false});
+        }
         this.sumPrice();
     };
 
@@ -132,7 +146,7 @@ class CartItem extends Component {
         let totalPrice=0,selectedCount=0;
         this.state.cartList.forEach((ele,index)=>{
             if(ele.checked===true){
-                totalPrice+=ele.count*ele.price;
+                totalPrice+=ele.count*ele.product_id.price;
                 selectedCount+=ele.count;
             }
         });
@@ -173,12 +187,12 @@ class CartItem extends Component {
                                             />
                                         </div>
                                         <div className="cart-list-image">
-                                            <img src={ele.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                            <img src={ele.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
                                         </div>
                                         <div className="cart-list-intro">
-                                            <div>{ele.name}</div>
+                                            <div>{ele.product_id.name}</div>
                                             <div>颜色尺码等</div>
-                                            <div>¥ {ele.price}</div>
+                                            <div>¥ {ele.product_id.price}</div>
                                         </div>
                                         <div className="cart-list-count">
                                             <div className="selected">
@@ -213,7 +227,7 @@ class CartItem extends Component {
                         </div>
                         <div className={classNames({
                             'jiesuan-total': true,
-                            'jiesuan-disabled': !this.state.isSelectAll
+                            'jiesuan-disabled': !this.state.selectedCount
                         })}>
                             <span>合计：</span>
                             <span className="jiesuan-total_price">¥ {this.state.totalPrice}</span>
@@ -221,7 +235,7 @@ class CartItem extends Component {
                         <button
                             className={classNames({
                                 'jiesuan-button': true,
-                                'jiesuan-disabled': !this.state.isSelectAll
+                                'jiesuan-disabled': !this.state.selectedCount
                             })}
                             disabled={!this.state.isSelectAll}
                             onClick={()=>{this.settleAccounts()}}

src/pages/cart/index.js

@@ -1,9 +1,11 @@
 import React, {Component} from 'react'
-import { NavBar } from 'antd-mobile';
+import { NavBar,ActivityIndicator } from 'antd-mobile';
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
 
 import CartItem from "./CartItem";
 import CartEdit from "./CartEdit";
-
+import {cart_by_userid} from "../../utils/gql";
 
 class Cart extends Component {
     constructor(props) {
@@ -22,25 +24,42 @@ class Cart extends Component {
     render() {
         let {content} = this.state;
         return (
-            <div>
-                <NavBar
-                    mode="light"
-                    style={{borderBottom: '1px solid #ebedf0'}}
-                    rightContent={[
-                        <span key={"1"} onClick={this.changeCartPage}>
-                              {content ? "编辑":"完成"}
-                        </span>
-                    ]}
-                >购物袋
-                </NavBar>
+            <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
                 {
-                    content ?
-                        <CartItem/>:<CartEdit/>
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!'
+                        }
+                        console.log('cart data',data);
+                        return (
+                            <div>
+                                <NavBar
+                                    mode="light"
+                                    style={{borderBottom: '1px solid #ebedf0'}}
+                                    rightContent={[
+                                        <span key={"1"} onClick={this.changeCartPage}>{content ? "编辑":"完成"}</span>
+                                    ]}
+                                >购物袋
+                                </NavBar>
+                                {
+                                    content ?
+                                        <CartItem cartList={data.cartList}/>:<CartEdit cartList={data.cartList}/>
 
+                                }
+                            </div>
+                        )
+                    }
                 }
-            </div>
+            </Query>
         )
     }
 }
 
-export default Cart
+export default Cart;

src/utils/gql.js

@@ -34,7 +34,30 @@ const productbyid = `
     }
 `
 
+const cart_by_userid = `
+    query findUserCart($user_id:ID){
+        cartList:userCart_by_props(user_id:$user_id){
+            count
+            createdAt
+            id
+            product_id{
+                category
+                createdAt
+                img
+                intro
+                name
+                price
+                status
+                stock
+                unit
+                updatedAt
+            }
+        }
+    }
+`
+
 export {
     productbyprops,
-    productbyid
+    productbyid,
+    cart_by_userid
 }