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

src/pages/cart/Cart.jsx

@@ -1,251 +0,0 @@
-import React, { Component } from 'react';
-import { Checkbox, Card, WhiteSpace } from 'antd-mobile';
-
-import './index.css'
-
-export class Tab3 extends Component {
-    constructor(props){
-        super(props);
-        this.state={
-            arr:[],
-            sum_price:0
-        };
-        console.log(props)
-    }
-
-    //获取数据
-    componentWillMount(){
-        const arr = [
-            {name:'test1',num:1,img:'',new_price:10},
-            {name:'test2',num:2,img:'',new_price:20}
-        ];
-        this.setState({
-            arr
-        })
-
-    }
-
-    //获取输入框的值
-    getInputText=(e,i)=>{
-        this.setState({
-            arr:this.state.arr.map((ele,index)=>{
-                if(index===i){
-                    ele.num=e.target.value;
-                    return ele
-                }else {
-                    return ele
-                }
-            })
-        });
-        this.SumPrice();
-    };
-
-    // 增加
-    augment=(e,i)=>{
-        this.setState({
-            arr:this.state.arr.map((ele,index)=>{
-                if(index===i){
-                    ele.num=ele.num*1+1;
-                    return ele
-                }else {
-                    return ele
-                }
-            })
-        });
-        this.SumPrice()
-    };
-
-    // 减少
-    reduce=(e,i)=> {
-        this.setState({
-            arr:this.state.arr.map((ele,index)=>{
-                if(index===i){
-                    ele.num=ele.num*1-1;
-                    return ele
-                }else {
-                    return ele
-                }
-            })
-        });
-        this.SumPrice();
-    };
-
-    //删除
-    del=(e,i)=> {
-        this.setState({
-            arr:this.state.arr.filter((ele,index)=>{
-                if(index!==i){
-                    return true
-                }else {
-                    return false
-                }
-            })
-        });
-        setTimeout(()=>{
-            this.SumPrice()
-        },1)
-    };
-
-    // 实现全选与反选的操作
-    CheckAllorNoAll=(e,i)=>{
-        this.setState({
-            arr:this.state.arr.map((ele,index)=>{
-                if(index===i){
-                    ele.checked=!ele.checked
-                }
-                return ele
-            })
-        });
-
-        let flag=this.state.arr.every((ele,index)=>{
-            if(ele.checked===false) {
-                return false
-            }else {
-                return true
-            }
-        });
-
-        if(flag===true){
-            this.refs.checkALL.checked=true
-        }else {
-            this.refs.checkALL.checked=false
-        }
-        this.SumPrice();
-    };
-
-    //全选全不选,判断全选状态
-    CheckedAll=(e)=>{
-        if(e.target.checked===true){
-            this.setState({
-                arr:this.state.arr.map((ele,index)=>{
-                    ele.checked=true;
-                    return ele
-                })
-            })
-        }else  if(e.target.checked===false){
-            this.setState({
-                arr:this.state.arr.map((ele,index)=>{
-                    ele.checked=false;
-                    return ele
-                })
-            })
-        }
-        this.SumPrice();
-    };
-
-    //计算总合计
-    SumPrice=()=>{
-        let sum=0;
-        this.state.arr.forEach((ele,index)=>{
-            if(ele.checked===true){
-                sum+=ele.num*ele.new_price
-            }
-        });
-        this.setState({
-            sum_price:sum
-        })
-    };
-
-    //结算传值
-    SettleAccounts=()=>{
-        let shopping=[];
-        this.state.arr.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));
-        this.props.history.push('/tab4')
-    };
-
-    render() {
-        return (
-            <div className="Cart">
-                <div className='section'>
-                    {
-                        this.state.arr.map((ele,index)=>{
-                            return(
-                                <div className="G_list" key={index}>
-                                    <div className="G_Checked">
-                                        <input type="checkbox" checked={ele.checked} onChange={
-                                            (e)=>{
-                                                this.CheckAllorNoAll(e,index)
-                                            }
-                                        }/>
-                                    </div>
-                                    <div className="G_img">
-                                        <img src={ele.img} alt=""/>
-                                    </div>
-                                    <div className="G_Content">
-                                        <div className="G_selected">
-                                            <button onClick={
-                                                (e)=>{
-                                                    this.augment(e,index)
-                                                }
-                                            }>+</button>
-                                            <input type="text" ref="nums" value={ele.num} onChange={
-                                                (e)=>{
-                                                    this.getInputText(e,index)
-                                                }
-                                            }/>
-                                            <button onClick={
-                                                (e)=>{
-                                                    this.reduce(e,index)
-                                                }
-                                            }>-</button>
-                                        </div>
-                                        <div className="G_text">
-                                            <p>{ele.name}</p>
-                                            <p>
-                                                单价：<span>{ele.new_price}</span>
-                                                小计：<span>{ele.num*ele.new_price}</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div className="G_del">
-                                        <button onClick={
-                                            (e)=>{
-                                                this.del(e,index)
-                                            }
-                                        }>删除</button>
-                                    </div>
-                                </div>
-                            )
-                        })
-                    }
-                </div>
-                <div>
-                    <WhiteSpace size="lg" />
-                    <Card full>
-                        <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>
-                </div>
-                <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">
-                            <span>合计：</span>
-                            <span className="jiesuan-total_price">¥ {this.state.sum_price}</span>
-                        </div>
-                        <button className="jiesuan-button" onClick={()=>{this.SettleAccounts()}}>
-                            <span>提交订单</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}

src/pages/cart/CartItem.jsx

@@ -0,0 +1,213 @@
+import React, { Component } from 'react';
+import { Checkbox, WhiteSpace  } from 'antd-mobile';
+import classNames from 'classnames'
+
+import './index.css'
+
+export class CartItem extends Component {
+    constructor(props){
+        super(props);
+        this.state={
+            arr:[],
+            sum_price:0
+        };
+    }
+
+    //获取数据
+    componentWillMount(){
+        const arr = [
+            {id:'1',name:'test1',num:1,img:'',new_price:10},
+            {id:'2',name:'test2',num:2,img:'',new_price:20}
+        ];
+        this.setState({
+            arr
+        })
+
+    }
+
+    //获取输入框的值
+    getInputValue=(e,i)=>{
+        this.setState({
+            arr:this.state.arr.map((ele,index)=>{
+                if(index===i){
+                    ele.num=e.target.value;
+                    return ele
+                }else {
+                    return ele
+                }
+            })
+        });
+        this.sumPrice();
+    };
+
+    // 增加
+    augment=(e,i)=>{
+        this.setState({
+            arr:this.state.arr.map((ele,index)=>{
+                if(index===i){
+                    ele.num=ele.num*1+1;
+                    return ele
+                }else {
+                    return ele
+                }
+            })
+        });
+        this.sumPrice()
+    };
+
+    // 减少
+    reduce=(e,i)=> {
+        this.setState({
+            arr:this.state.arr.map((ele,index)=>{
+                if(index===i){
+                    ele.num=ele.num*1-1;
+                    return ele
+                }else {
+                    return ele
+                }
+            })
+        });
+        this.sumPrice();
+    };
+
+    //删除
+    del=(e,i)=> {
+        this.setState({
+            arr:this.state.arr.filter((ele,index)=>{
+                if(index!==i){
+                    return true
+                }else {
+                    return false
+                }
+            })
+        });
+        setTimeout(()=>{
+            this.sumPrice()
+        },1)
+    };
+
+    // 改变选择
+    changeCheckedStatus=(e,i)=>{
+        this.setState({
+            arr:this.state.arr.map((ele,index)=>{
+                if(index===i){
+                    ele.checked=!ele.checked
+                }
+                return ele
+            })
+        });
+        this.sumPrice();
+    };
+
+    //全选或全不选,判断全选状态
+    checkedAll=(e)=>{
+        // console.log('CheckedAll e',e);
+        if(e.target.checked===true){
+            this.setState({
+                arr:this.state.arr.map((ele,index)=>{
+                    ele.checked=true;
+                    return ele
+                })
+            })
+        }else  if(e.target.checked===false){
+            this.setState({
+                arr:this.state.arr.map((ele,index)=>{
+                    ele.checked=false;
+                    return ele
+                })
+            })
+        }
+        this.sumPrice();
+    };
+
+    //计算总合计
+    sumPrice=()=>{
+        let sum=0;
+        this.state.arr.forEach((ele,index)=>{
+            if(ele.checked===true){
+                sum+=ele.num*ele.new_price
+            }
+        });
+        this.setState({
+            sum_price:sum
+        })
+    };
+
+    //结算传值
+    settleAccounts=()=>{
+        let shopping=[];
+        this.state.arr.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));
+        this.props.history.push('/jiesuan')
+    };
+
+    render() {
+        return (
+            <div className="Cart">
+                <div className='section'>
+                    {
+                        this.state.arr.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.new_price}</div>
+                                        </div>
+                                        <div className="cart-list-num">
+                                            <div className="selected">
+                                                <button
+                                                    className={classNames({
+                                                        'selected_button': true,
+                                                        'selected_button-disabled': ele.num <= 1
+                                                    })}
+                                                    disabled={ele.num <= 1}
+                                                    onClick={(e)=>{this.reduce(e,index)}}
+                                                >-</button>
+                                                <input className="selected_input" type="text" value={ele.num} 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>
+                <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">
+                            <span>合计：</span>
+                            <span className="jiesuan-total_price">¥ {this.state.sum_price}</span>
+                        </div>
+                        <button className="jiesuan-button" onClick={()=>{this.settleAccounts()}}>
+                            <span>结算</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/pages/cart/index.css

@@ -1,3 +1,87 @@
+.am-checkbox.am-checkbox-checked .am-checkbox-inner {
+    border-color: #f44;
+    background: #f44;
+}
+
+.selected {
+    width: 50%;
+    min-width: 100px;
+    position: absolute;
+    bottom: 0;
+}
+
+.selected_button {
+    width: 30px;
+    height: 30px;
+    background-color: #fff;
+    border: 1px solid #ebedf0;
+}
+
+.selected_button:active {
+    background-color: #e8e8e8;
+}
+
+.selected_button-disabled {
+    background-color: #f8f8f8;
+}
+
+.selected_input {
+    width: 33px;
+    height: 30px;
+    border: 1px solid #ebedf0;
+    border-radius: 0;
+    color: black;
+    font-size: 14px;
+    text-align: center;
+}
+
+.cart-list {
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-around;
+}
+
+.cart-list-checkbox {
+    width: 10%;
+    display: flex;
+    align-items: center;
+}
+
+.cart-list-image {
+    width: 25%;
+}
+
+.cart-list-image img {
+    width: 80%;
+    margin-left: 10%;
+}
+
+.cart-list-intro {
+    width: 35%;
+    position: relative;
+}
+
+.cart-list-intro :first-child {
+     color: black;
+ }
+
+.cart-list-intro :nth-child(2) {
+    font-size: 12px;
+}
+
+.cart-list-intro :last-child {
+    color: #f44;
+    position: absolute;
+    bottom:0;
+}
+
+.cart-list-num {
+    width: 30%;
+    position: relative;
+}
+
 .footer{
     position: fixed;
     bottom: 50px;
@@ -5,7 +89,7 @@
 }
 
 .jiesuan {
-    height: 50px;
+    height: 45px;
     display: flex;
     font-size: 14px;
     align-items: center;

src/pages/cart/index.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react'
 import { NavBar } from 'antd-mobile';
-import {Tab3} from "./Cart";
+import {CartItem} from "./CartItem";
 
 class Cart extends Component {
     constructor(props) {
@@ -15,12 +15,13 @@ class Cart extends Component {
             <div>
                 <NavBar
                     mode="light"
+                    style={{borderBottom: '1px solid #ebedf0'}}
                     rightContent={[
                         <span key={"1"}>编辑</span>
                     ]}
                 >购物袋
                 </NavBar>
-                <Tab3/>
+                <CartItem/>
             </div>
         )
     }