Merge branch 'master' of http://gogs.ioobot.com:6680/xy/ec-react

src/pages/cart/CartEdit.jsx

@@ -0,0 +1,215 @@
+import React, { Component } from 'react';
+import { Checkbox, WhiteSpace,Modal,Toast } from 'antd-mobile';
+import classNames from 'classnames';
+
+const alert = Modal.alert;
+
+class CartEdit extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    //获取数据
+    componentWillMount(){
+        const cartList = [
+            {id:'1',name:'test1',count:1,img:'',price:10},
+            {id:'2',name:'test2',count:2,img:'',price:20}
+        ];
+        this.setState({
+            cartList
+        })
+
+    }
+
+    //获取输入框的值
+    getInputValue=(e,i)=>{
+        this.setState({
+            cartList:this.state.cartList.map((ele,index)=>{
+                if(index===i){
+                    ele.count=e.target.value;
+                    return ele
+                }else {
+                    return ele
+                }
+            })
+        });
+    };
+
+    // 增加
+    augment=(e,i)=>{
+        this.setState({
+            cartList:this.state.cartList.map((ele,index)=>{
+                if(index===i){
+                    ele.count=ele.count*1+1;
+                    return ele
+                }else {
+                    return ele
+                }
+            })
+        });
+    };
+
+    // 减少
+    reduce=(e,i)=> {
+        this.setState({
+            cartList:this.state.cartList.map((ele,index)=>{
+                if(index===i){
+                    ele.count=ele.count*1-1;
+                    return ele
+                }else {
+                    return ele
+                }
+            })
+        });
+    };
+
+    //结算传值
+    delete=()=>{
+        let {cartList} = this.state;
+        let listLength = cartList.length;
+
+        alert('', '确定删除所选商品？', [
+            { text: '取消', onPress: () => console.log('cancel') },
+            {
+                text: '确认',
+                onPress: () =>
+                    new Promise((resolve) => {
+                        for (let i = 0; i < listLength; i++) {
+                            if (cartList[i] && cartList[i].checked===true) {
+                                cartList.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
+                                i--; // 如果不减，将漏掉一个元素
+                            }
+                        }
+
+                        this.setState({
+                            cartList:cartList
+                        });
+                        Toast.info('删除成功', 1);
+                        setTimeout(resolve, 1000);
+                    }),
+            },
+        ]);
+    };
+
+    //删除
+    del=(e,i)=> {
+        this.setState({
+            cartList:this.state.cartList.filter((ele,index)=>{
+                if(index!==i){
+                    return true
+                }else {
+                    return false
+                }
+            })
+        });
+        setTimeout(()=>{
+            this.sumPrice()
+        },1)
+    };
+
+    // 改变选择
+    changeCheckedStatus=(e,i)=>{
+        this.setState({
+            cartList:this.state.cartList.map((ele,index)=>{
+                if(index===i){
+                    ele.checked=!ele.checked
+                }
+                return ele
+            })
+        });
+    };
+
+    //全选或全不选,判断全选状态
+    checkedAll=(e)=>{
+        // console.log('CheckedAll e',e);
+        if(e.target.checked===true){
+            this.setState({
+                cartList:this.state.cartList.map((ele,index)=>{
+                    ele.checked=true;
+                    return ele
+                })
+            })
+        }else  if(e.target.checked===false){
+            this.setState({
+                cartList:this.state.cartList.map((ele,index)=>{
+                    ele.checked=false;
+                    return ele
+                })
+            })
+        }
+    };
+
+
+    render() {
+        let {cartList} = this.state;
+        let listLength = cartList.length;
+
+        return (
+            <div className="Cart">
+                <div className='section'>
+                    {
+                        this.state.cartList.map((ele,index)=>{
+                            return(
+                                <div key={index}>
+                                    <div className="cart-list">
+                                        <div className="cart-list-checkbox">
+                                            <Checkbox
+                                                style={{marginLeft:15}}
+                                                checked={ele.checked}
+                                                onChange={(e)=>{this.changeCheckedStatus(e,index)}}
+                                            />
+                                        </div>
+                                        <div className="cart-list-image">
+                                            <img src={ele.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                        </div>
+                                        <div className="cart-list-intro">
+                                            <div>{ele.name}</div>
+                                            <div>颜色尺码等</div>
+                                            <div>¥ {ele.price}</div>
+                                        </div>
+                                        <div className="cart-list-count">
+                                            <div className="selected">
+                                                <button
+                                                    className={classNames({
+                                                        'selected_button': true,
+                                                        'selected_button-disabled': ele.count <= 1
+                                                    })}
+                                                    disabled={ele.count <= 1}
+                                                    onClick={(e)=>{this.reduce(e,index)}}
+                                                >-</button>
+                                                <input className="selected_input" type="text" value={ele.count} onChange={(e)=>{this.getInputValue(e,index)}}/>
+                                                <button className="selected_button" onClick={(e)=>{this.augment(e,index)}}>+</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <WhiteSpace size="md" />
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                {
+                    listLength ?
+                        <div className="footer">
+                            <div className="jiesuan">
+                                <div className="jiesuan-checkbox">
+                                    <Checkbox onChange={(e)=>{this.checkedAll(e)}} style={{marginLeft:15}}/>,
+                                    <span className="jiesuan-checkbox_label">全选</span>
+                                </div>
+                                <div className="jiesuan-total">
+                                </div>
+                                <button className="jiesuan-button" onClick={()=>{this.delete()}}>
+                                    <span>删除所选</span>
+                                </button>
+                            </div>
+                        </div>:''
+                }
+            </div>
+        );
+    }
+}
+
+export default CartEdit;

src/pages/cart/CartItem.jsx

@@ -1,35 +1,40 @@
 import React, { Component } from 'react';
 import { Checkbox, WhiteSpace  } from 'antd-mobile';
-import classNames from 'classnames'
+import classNames from 'classnames';
 
 import './index.css'
 
-export class CartItem extends Component {
+class CartItem extends Component {
     constructor(props){
         super(props);
         this.state={
-            arr:[],
-            sum_price:0
+            cartList:[],
+            totalPrice:0,
+            isSelectAll:true,
+            selectedCount:0
         };
     }
 
     //获取数据
     componentWillMount(){
-        const arr = [
-            {id:'1',name:'test1',num:1,img:'',new_price:10},
-            {id:'2',name:'test2',num:2,img:'',new_price:20}
+        const cartList = [
+            {id:'1',name:'test1',count:1,img:'',price:10},
+            {id:'2',name:'test2',count:2,img:'',price:20}
         ];
         this.setState({
-            arr
-        })
+            cartList
+        },()=>{
+            this.checkedAll('',true);
+        });
+
     }
 
     //获取输入框的值
     getInputValue=(e,i)=>{
         this.setState({
-            arr:this.state.arr.map((ele,index)=>{
+            cartList:this.state.cartList.map((ele,index)=>{
                 if(index===i){
-                    ele.num=e.target.value;
+                    ele.count=e.target.value;
                     return ele
                 }else {
                     return ele
@@ -42,9 +47,9 @@ export class CartItem extends Component {
     // 增加
     augment=(e,i)=>{
         this.setState({
-            arr:this.state.arr.map((ele,index)=>{
+            cartList:this.state.cartList.map((ele,index)=>{
                 if(index===i){
-                    ele.num=ele.num*1+1;
+                    ele.count=ele.count*1+1;
                     return ele
                 }else {
                     return ele
@@ -57,9 +62,9 @@ export class CartItem extends Component {
     // 减少
     reduce=(e,i)=> {
         this.setState({
-            arr:this.state.arr.map((ele,index)=>{
+            cartList:this.state.cartList.map((ele,index)=>{
                 if(index===i){
-                    ele.num=ele.num*1-1;
+                    ele.count=ele.count*1-1;
                     return ele
                 }else {
                     return ele
@@ -72,7 +77,7 @@ export class CartItem extends Component {
     //删除
     del=(e,i)=> {
         this.setState({
-            arr:this.state.arr.filter((ele,index)=>{
+            cartList:this.state.cartList.filter((ele,index)=>{
                 if(index!==i){
                     return true
                 }else {
@@ -88,7 +93,7 @@ export class CartItem extends Component {
     // 改变选择
     changeCheckedStatus=(e,i)=>{
         this.setState({
-            arr:this.state.arr.map((ele,index)=>{
+            cartList:this.state.cartList.map((ele,index)=>{
                 if(index===i){
                     ele.checked=!ele.checked
                 }
@@ -99,50 +104,55 @@ export class CartItem extends Component {
     };
 
     //全选或全不选,判断全选状态
-    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({
-                arr:this.state.arr.map((ele,index)=>{
+                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({
-                arr:this.state.arr.map((ele,index)=>{
+                cartList:this.state.cartList.map((ele,index)=>{
                     ele.checked=false;
                     return ele
-                })
-            })
+                }),
+                isSelectAll:false
+            });
         }
         this.sumPrice();
     };
 
     //计算总合计
     sumPrice=()=>{
-        let sum=0;
-        this.state.arr.forEach((ele,index)=>{
+        let totalPrice=0,selectedCount=0;
+        this.state.cartList.forEach((ele,index)=>{
             if(ele.checked===true){
-                sum+=ele.num*ele.new_price
+                totalPrice+=ele.count*ele.price;
+                selectedCount+=ele.count;
             }
         });
         this.setState({
-            sum_price:sum
-        })
+            totalPrice,
+            selectedCount
+        });
     };
 
     //结算传值
     settleAccounts=()=>{
         let shopping=[];
-        this.state.arr.forEach((ele,index)=>{
+        this.state.cartList.forEach((ele,index)=>{
             if(ele.checked===true){
                 shopping.push(ele)
             }
         });
         console.log('shopping',shopping);
         window.localStorage.setItem("shopping",JSON.stringify(shopping));
-        window.localStorage.setItem("sumprice",JSON.stringify(this.state.sum_price));
+        window.localStorage.setItem("sumprice",JSON.stringify(this.state.totalPrice));
         this.props.history.push('/jiesuan')
     };
 
@@ -151,7 +161,7 @@ export class CartItem extends Component {
             <div className="Cart">
                 <div className='section'>
                     {
-                        this.state.arr.map((ele,index)=>{
+                        this.state.cartList.map((ele,index)=>{
                             return(
                                 <div key={index}>
                                     <div className="cart-list">
@@ -168,19 +178,19 @@ export class CartItem extends Component {
                                         <div className="cart-list-intro">
                                             <div>{ele.name}</div>
                                             <div>颜色尺码等</div>
-                                            <div>¥ {ele.new_price}</div>
+                                            <div>¥ {ele.price}</div>
                                         </div>
-                                        <div className="cart-list-num">
+                                        <div className="cart-list-count">
                                             <div className="selected">
                                                 <button
                                                     className={classNames({
                                                         'selected_button': true,
-                                                        'selected_button-disabled': ele.num <= 1
+                                                        'selected_button-disabled': ele.count <= 1
                                                     })}
-                                                    disabled={ele.num <= 1}
+                                                    disabled={ele.count <= 1}
                                                     onClick={(e)=>{this.reduce(e,index)}}
                                                 >-</button>
-                                                <input className="selected_input" type="text" value={ele.num} onChange={(e)=>{this.getInputValue(e,index)}}/>
+                                                <input className="selected_input" type="text" value={ele.count} onChange={(e)=>{this.getInputValue(e,index)}}/>
                                                 <button className="selected_button" onClick={(e)=>{this.augment(e,index)}}>+</button>
                                             </div>
                                         </div>
@@ -194,15 +204,29 @@ export class CartItem 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">
+                        <div className={classNames({
+                            'jiesuan-total': true,
+                            'jiesuan-disabled': !this.state.isSelectAll
+                        })}>
                             <span>合计：</span>
-                            <span className="jiesuan-total_price">¥ {this.state.sum_price}</span>
+                            <span className="jiesuan-total_price">¥ {this.state.totalPrice}</span>
                         </div>
-                        <button className="jiesuan-button" onClick={()=>{this.settleAccounts()}}>
-                            <span>结算</span>
+                        <button
+                            className={classNames({
+                                'jiesuan-button': true,
+                                'jiesuan-disabled': !this.state.isSelectAll
+                            })}
+                            disabled={!this.state.isSelectAll}
+                            onClick={()=>{this.settleAccounts()}}
+                        >
+                            <span>去结算({this.state.selectedCount})</span>
                         </button>
                     </div>
                 </div>
@@ -210,3 +234,5 @@ export class CartItem extends Component {
         );
     }
 }
+
+export default CartItem;

src/pages/cart/index.css

@@ -77,7 +77,7 @@
     bottom:0;
 }
 
-.cart-list-num {
+.cart-list-count {
     width: 30%;
     position: relative;
 }
@@ -96,6 +96,10 @@
     background-color: #fff;
 }
 
+.jiesuan-disabled {
+    opacity: 0.5;
+}
+
 .jiesuan-checkbox_label {
     color: #323233;
     margin-left: 10px;

src/pages/cart/index.js

@@ -1,27 +1,43 @@
 import React, {Component} from 'react'
 import { NavBar } from 'antd-mobile';
-import {CartItem} from "./CartItem";
+
+import CartItem from "./CartItem";
+import CartEdit from "./CartEdit";
+
 
 class Cart extends Component {
     constructor(props) {
         super(props);
         this.state = {
-
+            content:true
         }
     }
 
+    changeCartPage =()=>{
+        this.setState({
+            content:!this.state.content
+        })
+    };
+
     render() {
+        let {content} = this.state;
         return (
             <div>
                 <NavBar
                     mode="light"
                     style={{borderBottom: '1px solid #ebedf0'}}
                     rightContent={[
-                        <span key={"1"}>编辑</span>
+                        <span key={"1"} onClick={this.changeCartPage}>
+                              {content ? "编辑":"完成"}
+                        </span>
                     ]}
                 >购物袋
                 </NavBar>
-                <CartItem/>
+                {
+                    content ?
+                        <CartItem/>:<CartEdit/>
+
+                }
             </div>
         )
     }