add pay page

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

@@ -171,11 +171,12 @@ class CartDetail extends Component {
     } 
 
     render() {
+        let {cartList,isSelectAll,selectedCount,totalPrice} = this.state
         return (
             <div className="cart-content-wrap">
                 <div className='cart-content'>
                     {
-                        this.state.cartList.map((ele,index)=>{
+                        cartList.map((ele,index)=>{
                             return(
                                 <div key={index}>
                                     <div className="cart-list">
@@ -219,7 +220,7 @@ class CartDetail extends Component {
                     <div className="jiesuan">
                         <div className="jiesuan-checkbox">
                             <Checkbox
-                                checked={this.state.isSelectAll}
+                                checked={isSelectAll}
                                 onChange={(e)=>{this.checkedAll(e,'')}}
                                 style={{marginLeft:15}}
                             />,
@@ -227,19 +228,23 @@ class CartDetail extends Component {
                         </div>
                         <div className={classNames({
                             'jiesuan-total': true,
-                            'jiesuan-disabled': !this.state.selectedCount
+                            'jiesuan-disabled': !selectedCount
                         })}>
                             <span>合计：</span>
-                            <span className="jiesuan-total_price">¥ {this.state.totalPrice}</span>
+                            <span className="jiesuan-total_price">¥ {totalPrice}</span>
                         </div>
                         <button
                             className={classNames({
                                 'jiesuan-button': true,
-                                'jiesuan-disabled': !this.state.selectedCount
+                                'jiesuan-disabled': !selectedCount
                             })}
-                            onClick={()=>{this.settleAccounts()}}
+                            onClick={()=>{
+                                if(selectedCount){
+                                    this.settleAccounts()
+                                }
+                            }}
                         >
-                            <span>下单({this.state.selectedCount})</span>
+                            <span>下单({selectedCount})</span>
                         </button>
                     </div>
                 </div>

src/pages/cart/all/index.css

@@ -3,6 +3,10 @@
     background: #f44;
 }
 
+.navbar-button {
+    color: #ff6d6d;
+}
+
 .selected {
     width: 50%;
     min-width: 100px;

src/pages/cart/all/index.js

@@ -68,7 +68,8 @@ class All extends Component {
                         if (loading) {
                             return (
                                 <div className="loading-center">
-                                    <ActivityIndicator text="Loading..." size="large"/>
+                                    <ActivityIndicator size="large" />
+                                    <span>正在加载...</span>
                                 </div>
                             )
                         }
@@ -84,7 +85,7 @@ class All extends Component {
                                         mode="light"
                                         rightContent={[
                                             data.cartList.length ?
-                                                <span key={"1"} onClick={this.changeCartPage}>
+                                                <span className='navbar-button' key={"1"} onClick={this.changeCartPage}>
                                                 {page === 'detail' ? "编辑" : "完成"}
                                             </span> : ''
                                         ]}

src/pages/cart/index.js

@@ -3,6 +3,7 @@ import {Switch, Route} from 'react-router-dom'
 
 import All from './all'
 import CartOrders from './orders'
+import Pay from './pay'
 import './index.css'
 
 const Cart = () => (
@@ -11,6 +12,7 @@ const Cart = () => (
             <Route exact path="/cart" component={All}/>
             <Route exact path="/cart/all" component={All}/>
             <Route path="/cart/order" component={CartOrders}/>
+            <Route path="/cart/pay" component={Pay}/>
         </Switch>
     </div>
 )

src/pages/cart/orders/index.js

@@ -21,7 +21,7 @@ const delivery = [
 class CartOrders extends Component {
     constructor(props) {
         super(props)
-        console.log('shopping',JSON.parse(window.localStorage.getItem("shopping")))
+        // console.log('shopping',JSON.parse(window.localStorage.getItem("shopping")))
         this.state = {
             cartList: [],
             unfoldList: [],
@@ -82,11 +82,11 @@ class CartOrders extends Component {
                             <Item
                                 arrow="horizontal"
                                 multipleLine
-                                onClick={() => {this.props.history.push({
-                                    pathname:'/my/tools',
-                                    state:{page:'address'}
-                                })}}
-                            >
+                                onClick={() => {
+                                    this.props.history.push({
+                                        pathname:'/my/tools',
+                                        state:{page:'address'}})
+                                }}>
                                 <div>
                                     <span>承叶子</span>&nbsp;&nbsp;
                                     <span>18726202125</span>
@@ -195,7 +195,13 @@ class CartOrders extends Component {
                             <span>合计：</span>
                             <span className="jiesuan-total_price">¥ {totalPrice}</span>
                         </div>
-                        <button className="jiesuan-button" onClick={()=>{}}>
+                        <button className="jiesuan-button"
+                                onClick={()=>{
+                                    this.props.history.push({
+                                        pathname:'/cart/pay',
+                                        state:{}
+                                      })
+                                }}>
                             <span>提交订单</span>
                         </button>
                     </div>

src/pages/cart/pay/index.css

@@ -0,0 +1,56 @@
+.pay-content-wrap {
+    color: #323233;
+}
+
+.pay-content-wrap > div{
+    margin-bottom: 10px;
+    background: white;
+    padding: 10px;
+}
+
+.pay-content-price {
+    text-align: center;
+}
+
+.pay-content-price p:first-child {
+    padding-top: 20px;
+}
+
+.pay-content-price p:nth-child(2) {
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.pay-content-type p:first-child {
+    color: #929292;
+    font-size: 12px;
+}
+
+.pay-content-type span {
+    padding-left: 10px;
+}
+
+.pay-content-type span:last-child {
+    float: right;
+}
+
+.pay-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+}
+
+.pay-button {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    background-color: #f44;
+    border: 1px solid #f44;
+    font-size: 16px;
+    text-align: center;
+}
+
+.pay-disabled {
+    opacity: 0.5;
+}

src/pages/cart/pay/index.js

@@ -0,0 +1,72 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {NavBar, Icon, Checkbox} from 'antd-mobile'
+import classNames from 'classnames'
+
+import './index.css'
+
+class Pay extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            checked:true,
+            totalPrice:JSON.parse(window.localStorage.getItem('totalPrice')),
+        }
+    }
+
+    changeCheckedStatus = (e) => {
+        this.setState({
+            checked:e.target.checked
+        })
+    }
+
+    render() {
+        let {checked,totalPrice} = this.state
+        return (
+            <div className='pay-wrap'>
+                <div className='pay-navbar-wrap navbar'>
+                    <NavBar
+                        className='pay-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {this.props.history.goBack()}}
+                    >订单支付</NavBar>
+                </div>
+                <div className='pay-content-wrap content-wrap'>
+                    <div className='pay-content-price'>
+                        <p>订单金额:</p>
+                        <p>￥: {totalPrice}</p>
+                    </div>
+                    <div className='pay-content-type'>
+                        <p>请选择支付方式</p>
+                        <div>
+                            <img src="https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/wechat.png" alt=''/>
+                            <span>微信支付</span>
+                            <span>
+                                <Checkbox checked={checked} onChange={(e)=>this.changeCheckedStatus(e)}/>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="pay-footer">
+                    <button
+                            className={classNames({
+                                'pay-button': true,
+                                'pay-disabled': !checked
+                            })}
+                            onClick={()=>{
+                                if(checked){
+                                    this.props.history.push({
+                                        pathname:'/my'
+                                    })
+                                }
+                            }}>
+                        <span>确认支付</span>
+                    </button>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Pay)

src/pages/home/all/index.js

@@ -62,6 +62,7 @@ class All extends Component {
                 <Carousel
                     autoplay={true}
                     infinite
+                    style={{minHeight:200}}
                 >
                     {this.state.data.map(val => (
                         <a