文件目录统一

src/pages/cart/CartItem.jsx → src/pages/cart/all/detail/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Checkbox, WhiteSpace  } from 'antd-mobile';
 import classNames from 'classnames';
 
-import './index.css'
+import '../index.css'
 
 class CartItem extends Component {
     constructor(props){
@@ -17,10 +17,6 @@ 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}
-        // ];
         this.setState({
             cartList:this.props.cartList
         },()=>{

src/pages/cart/CartEdit.jsx → src/pages/cart/all/edit/index.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Checkbox, WhiteSpace,Modal,Toast } from 'antd-mobile';
+import { Checkbox, WhiteSpace, Modal, Toast } from 'antd-mobile';
 import classNames from 'classnames';
 // import { Query,Mutation } from "react-apollo";
 
+import '../index.css'
 const alert = Modal.alert;
 
 class CartEdit extends Component {
@@ -16,10 +17,6 @@ class CartEdit extends Component {
 
     //获取数据
     componentWillMount(){
-        // const cartList = [
-        //     {id:'1',name:'test1',count:1,img:'',price:10},
-        //     {id:'2',name:'test2',count:2,img:'',price:20}
-        // ];
         this.setState({
             cartList:this.props.cartList
         },()=>{

src/pages/cart/all/index.css

@@ -0,0 +1,131 @@
+.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-count {
+    width: 30%;
+    position: relative;
+}
+
+.footer{
+    position: fixed;
+    bottom: 50px;
+    width: 100%;
+}
+
+.jiesuan {
+    height: 45px;
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+    background-color: #fff;
+}
+
+.jiesuan-disabled {
+    opacity: 0.5;
+}
+
+.jiesuan-checkbox_label {
+    color: #323233;
+    margin-left: 10px;
+    vertical-align: middle;
+    line-height: 20px;
+}
+
+.jiesuan-total {
+    flex: 1;
+    font-weight: 500;
+    text-align: right;
+    color: #323233;
+    padding-right: 12px;
+}
+
+.jiesuan-total_price {
+    color: #f44;
+    font-size: 18px;
+}
+
+.jiesuan-button {
+    width: 110px;
+    height: 100%;
+    color: #fff;
+    background-color: #f44;
+    border: 1px solid #f44;
+    font-size: 16px;
+    text-align: center;
+}

src/pages/cart/all/index.js

@@ -0,0 +1,104 @@
+import React, {Component} from 'react'
+import {NavBar, ActivityIndicator} from 'antd-mobile'
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+
+import CartItem from "./detail"
+import CartEdit from "./edit"
+import Empty from "../empty"
+import './index.css'
+import {cart_by_userid} from "../../../utils/gql"
+
+class All extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            page: 'detail'
+        }
+    }
+
+    componentWillMount() {
+        this.getHash()
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        this.getHash()
+    }
+
+    getHash = () => {
+        // console.log('location',window.location.hash);
+        let hash = window.location.hash || '#tab=cart&page=detail'
+        let page = 'detail'
+        if (window.location.hash && hash.indexOf("&") > 0) {
+            let pageHash = hash.split("&")[1]
+            page = pageHash.substr(pageHash.indexOf("=") + 1)
+        }
+        this.setState({
+            page
+        })
+    }
+
+    changeCartPage = () => {
+        this.setState((preState) => ({
+            page: preState.page === 'detail' ? 'edit' : 'detail'
+        }))
+    }
+
+    renderPage = (data) => {
+        let {page} = this.state
+
+        switch (page) {
+            case 'detail':
+                return <CartItem cartList={data.cartList}/>
+            case 'edit':
+                return <CartEdit cartList={data.cartList}/>
+            default:
+                return <div>test</div>
+        }
+    }
+
+    render() {
+        let {page} = this.state
+
+        return (
+            <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
+                {
+                    ({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={[
+                                        data.cartList.length ?
+                                            <span key={"1"} onClick={this.changeCartPage}>
+                                                {page === 'detail' ? "编辑" : "完成"}
+                                            </span> : ''
+                                    ]}
+                                >购物袋
+                                </NavBar>
+                                {data.cartList.length ?
+                                    this.renderPage(data) : <Empty/>
+                                }
+                            </div>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+export default All

src/pages/cart/index.css

@@ -1,131 +0,0 @@
-.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-count {
-    width: 30%;
-    position: relative;
-}
-
-.footer{
-    position: fixed;
-    bottom: 50px;
-    width: 100%;
-}
-
-.jiesuan {
-    height: 45px;
-    display: flex;
-    font-size: 14px;
-    align-items: center;
-    background-color: #fff;
-}
-
-.jiesuan-disabled {
-    opacity: 0.5;
-}
-
-.jiesuan-checkbox_label {
-    color: #323233;
-    margin-left: 10px;
-    vertical-align: middle;
-    line-height: 20px;
-}
-
-.jiesuan-total {
-    flex: 1;
-    font-weight: 500;
-    text-align: right;
-    color: #323233;
-    padding-right: 12px;
-}
-
-.jiesuan-total_price {
-    color: #f44;
-    font-size: 18px;
-}
-
-.jiesuan-button {
-    width: 110px;
-    height: 100%;
-    color: #fff;
-    background-color: #f44;
-    border: 1px solid #f44;
-    font-size: 16px;
-    text-align: center;
-}

src/pages/cart/index.js

@@ -1,103 +1,16 @@
-import React, {Component} from 'react'
-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 Empty from "./empty"
-import {cart_by_userid} from "../../utils/gql"
-
-class Cart extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            page: 'detail'
-        }
-    }
-
-    componentWillMount() {
-        this.getHash()
-    }
-
-    componentWillReceiveProps(nextProps, nextContext) {
-        this.getHash()
-    }
-
-    getHash = () => {
-        // console.log('location',window.location.hash);
-        let hash = window.location.hash || '#tab=cart&page=detail'
-        let page = 'detail'
-        if (window.location.hash && hash.indexOf("&") > 0) {
-            let pageHash = hash.split("&")[1]
-            page = pageHash.substr(pageHash.indexOf("=") + 1)
-        }
-        this.setState({
-            page
-        })
-    }
-
-    changeCartPage = () => {
-        this.setState((preState) => ({
-            page: preState.page === 'detail' ? 'edit' : 'detail'
-        }))
-    }
-
-    renderPage = (data) => {
-        let {page} = this.state
-
-        switch (page) {
-            case 'detail':
-                return <CartItem cartList={data.cartList}/>
-            case 'edit':
-                return <CartEdit cartList={data.cartList}/>
-            default:
-                return <div>test</div>
-        }
-    }
-
-    render() {
-        let {page} = this.state
-
-        return (
-            <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
-                {
-                    ({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={[
-                                        data.cartList.length ?
-                                            <span key={"1"} onClick={this.changeCartPage}>
-                                                {page === 'detail' ? "编辑" : "完成"}
-                                            </span> : ''
-                                    ]}
-                                >购物袋
-                                </NavBar>
-                                {data.cartList.length ?
-                                    this.renderPage(data) : <Empty/>
-                                }
-                            </div>
-                        )
-                    }
-                }
-            </Query>
-        )
-    }
-}
+import React from 'react'
+import {Switch, Route} from 'react-router-dom'
+
+import All from './all'
+import './index.css'
+
+const Cart = () => (
+    <div style={{height: '100%'}}>
+        <Switch>
+            <Route exact path="/cart" component={All}/>
+            <Route exact path="/cart/all" component={All}/>
+        </Switch>
+    </div>
+)
 
 export default Cart

src/pages/my/all/index.css

@@ -4,7 +4,8 @@
 
 .avatar-area {
     height: 20%;
-    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
+    /*background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);*/
+    background-image: linear-gradient(to top, #ffdcd2 0%, #ffdbd1 1%, #fd898c 100%);
     position: relative;
     border-bottom-left-radius: 80% 15%;
     border-bottom-right-radius: 80% 15%;