修改购物车

src/pages/cart/Cart.jsx → src/pages/cart/CartItem.jsx

@@ -1,23 +1,23 @@
 import React, { Component } from 'react';
-import { Checkbox, Card, WhiteSpace } from 'antd-mobile';
+import { Checkbox, WhiteSpace  } from 'antd-mobile';
+import classNames from 'classnames'
 
 import './index.css'
 
-export class Tab3 extends Component {
+export class CartItem 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}
+            {id:'1',name:'test1',num:1,img:'',new_price:10},
+            {id:'2',name:'test2',num:2,img:'',new_price:20}
         ];
         this.setState({
             arr
@@ -37,7 +37,7 @@ export class Tab3 extends Component {
                 }
             })
         });
-        this.SumPrice();
+        this.sumPrice();
     };
 
     // 增加
@@ -52,7 +52,7 @@ export class Tab3 extends Component {
                 }
             })
         });
-        this.SumPrice()
+        this.sumPrice()
     };
 
     // 减少
@@ -67,7 +67,7 @@ export class Tab3 extends Component {
                 }
             })
         });
-        this.SumPrice();
+        this.sumPrice();
     };
 
     //删除
@@ -82,12 +82,12 @@ export class Tab3 extends Component {
             })
         });
         setTimeout(()=>{
-            this.SumPrice()
+            this.sumPrice()
         },1)
     };
 
     // 实现全选与反选的操作
-    CheckAllorNoAll=(e,i)=>{
+    checkAllorNotAll=(e,i)=>{
         this.setState({
             arr:this.state.arr.map((ele,index)=>{
                 if(index===i){
@@ -97,24 +97,12 @@ export class Tab3 extends Component {
             })
         });
 
-        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();
+        this.sumPrice();
     };
 
     //全选全不选,判断全选状态
-    CheckedAll=(e)=>{
+    checkedAll=(e)=>{
+        // console.log('CheckedAll e',e);
         if(e.target.checked===true){
             this.setState({
                 arr:this.state.arr.map((ele,index)=>{
@@ -130,11 +118,11 @@ export class Tab3 extends Component {
                 })
             })
         }
-        this.SumPrice();
+        this.sumPrice();
     };
 
     //计算总合计
-    SumPrice=()=>{
+    sumPrice=()=>{
         let sum=0;
         this.state.arr.forEach((ele,index)=>{
             if(ele.checked===true){
@@ -147,7 +135,7 @@ export class Tab3 extends Component {
     };
 
     //结算传值
-    SettleAccounts=()=>{
+    settleAccounts=()=>{
         let shopping=[];
         this.state.arr.forEach((ele,index)=>{
             if(ele.checked===true){
@@ -157,7 +145,7 @@ export class Tab3 extends Component {
         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')
+        this.props.history.push('/jiesuan')
     };
 
     render() {
@@ -167,81 +155,56 @@ export class Tab3 extends Component {
                     {
                         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 key={index}>
+                                    <div className="cart-list">
+                                        <div className="cart-list-checkbox">
+                                            <Checkbox
+                                                style={{marginLeft:15}}
+                                                checked={ele.checked}
+                                                onChange={(e)=>{this.checkAllorNotAll(e,index)}}
+                                            />
                                         </div>
-                                        <div className="G_text">
-                                            <p>{ele.name}</p>
-                                            <p>
-                                                单价：<span>{ele.new_price}</span>
-                                                小计：<span>{ele.num*ele.new_price}</span>
-                                            </p>
+                                        <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="number" ref="nums" value={ele.num} onChange={(e)=>{this.getInputText(e,index)}}/>
+                                                <button className="selected_button" onClick={(e)=>{this.augment(e,index)}}>+</button>
+                                            </div>
                                         </div>
                                     </div>
-                                    <div className="G_del">
-                                        <button onClick={
-                                            (e)=>{
-                                                this.del(e,index)
-                                            }
-                                        }>删除</button>
-                                    </div>
+                                    <WhiteSpace size="md" />
                                 </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}}/>,
+                            <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 className="jiesuan-button" onClick={()=>{this.settleAccounts()}}>
+                            <span>结算</span>
                         </button>
                     </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>
         )
     }