固定种类高度

src/pages/cart/orders/index.js

@@ -1,48 +1,49 @@
 import React, {Component} from 'react'
 import {withRouter} from 'react-router-dom'
-import {NavBar, Icon,List,Picker} from 'antd-mobile'
+import {NavBar, Icon, List, Picker} from 'antd-mobile'
 import classNames from 'classnames'
 
 import './index.css'
-const Item = List.Item;
-const Brief = Item.Brief;
+
+const Item = List.Item
+const Brief = Item.Brief
 
 const delivery = [
     {
-        label:"快递配送",
+        label: "快递配送",
         value: "快递配送",
     },
     {
-        label:"门店自提",
+        label: "门店自提",
         value: "门店自提",
     }
-];
+]
 
 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: [],
-            totalPrice:JSON.parse(window.localStorage.getItem('totalPrice')),
+            totalPrice: JSON.parse(window.localStorage.getItem('totalPrice')),
             delivery: ["快递配送"],
-            height:'100%',
-            unfoldStatus:true,
-            foldStatus:false,
+            height: '100%',
+            unfoldStatus: true,
+            foldStatus: false,
         }
     }
 
     componentWillMount() {
         let cartList = JSON.parse(window.localStorage.getItem("shopping"))
-        if(cartList.length > 3){
-            let cartList1 = cartList.slice(0,3)
+        if (cartList.length > 3) {
+            let cartList1 = cartList.slice(0, 3)
             let unfoldList = cartList.slice(3)
             this.setState({
-                cartList:cartList1,
+                cartList: cartList1,
                 unfoldList
             })
-        }else {
+        } else {
             this.setState({
                 cartList
             })
@@ -55,7 +56,7 @@ class CartOrders extends Component {
         })
     }
 
-    onChangeHeight = (height,unfoldStatus,foldStatus) => {
+    onChangeHeight = (height, unfoldStatus, foldStatus) => {
         this.setState({
             height,
             unfoldStatus,
@@ -64,7 +65,7 @@ class CartOrders extends Component {
     }
 
     render() {
-        let {cartList,unfoldList,height,unfoldStatus,foldStatus,totalPrice} = this.state
+        let {cartList, unfoldList, height, unfoldStatus, foldStatus, totalPrice} = this.state
 
         return (
             <div className='orders-wrap'>
@@ -73,7 +74,9 @@ class CartOrders extends Component {
                         className='orders-navbar'
                         mode="light"
                         icon={<Icon type="left"/>}
-                        onLeftClick={() => {this.props.history.goBack()}}
+                        onLeftClick={() => {
+                            this.props.history.goBack()
+                        }}
                     >订单确认</NavBar>
                 </div>
                 <div className='orders-content-wrap content-wrap'>
@@ -82,28 +85,32 @@ 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>
                                 </div>
-                                <Brief style={{fontSize:13}}>安徽省合肥市蜀山区青阳路彩虹家园1栋1601</Brief>
+                                <Brief style={{fontSize: 13}}>安徽省合肥市蜀山区青阳路彩虹家园1栋1601</Brief>
                             </Item>
                         </List>
                     </div>
                     <div className='orders-detail'>
                         <div className='cart-content'>
                             {
-                                cartList.map((ele,index)=>{
-                                    return(
+                                cartList.map((ele, index) => {
+                                    return (
                                         <div key={index}>
                                             <div className="cart-list">
                                                 <div className="cart-list-image">
-                                                    <img src={ele.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                                    <img
+                                                        src={ele.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"}
+                                                        alt=""/>
                                                 </div>
                                                 <div className="cart-orders-intro">
                                                     <div>{ele.product_id.name}</div>
@@ -118,44 +125,49 @@ class CartOrders extends Component {
                                     )
                                 })
                             }
-                            <div className={classNames({'packup':!unfoldList.length,'packup-unfold':true})}  style={{height:height}}>
+                            <div className={classNames({'packup': !unfoldList.length, 'packup-unfold': true})}
+                                 style={{height: height}}>
                                 {
                                     unfoldStatus ?
-                                        <div onClick={()=>{this.onChangeHeight(96*unfoldList.length+42,false,true)}}>
+                                        <div onClick={() => {
+                                            this.onChangeHeight(96 * unfoldList.length + 42, false, true)
+                                        }}>
                                             <div className='packup-title'>展开全部商品</div>
                                             <div>∨</div>
                                         </div>
-                                        :''
+                                        : ''
                                 }
                                 {
                                     foldStatus ?
-                                        <div onClick={()=>{this.onChangeHeight('100%',true,false)}}>
+                                        <div onClick={() => {
+                                            this.onChangeHeight('100%', true, false)
+                                        }}>
 
-                                                {
-                                                    unfoldList.map((ele,index)=>{
-                                                        return(
-                                                            <div key={index}>
-                                                                <div className="cart-list">
-                                                                    <div className="cart-list-image">
-                                                                        <img src={ele.product_id.img} alt=""/>
-                                                                    </div>
-                                                                    <div className="cart-orders-intro">
-                                                                        <div>{ele.product_id.name}</div>
-                                                                        <div>颜色尺码等</div>
-                                                                        <div>¥ {ele.product_id.price}</div>
-                                                                    </div>
-                                                                    <div className="cart-orders-count">
-                                                                        x {ele.count}
-                                                                    </div>
+                                            {
+                                                unfoldList.map((ele, index) => {
+                                                    return (
+                                                        <div key={index}>
+                                                            <div className="cart-list">
+                                                                <div className="cart-list-image">
+                                                                    <img src={ele.product_id.img} alt=""/>
+                                                                </div>
+                                                                <div className="cart-orders-intro">
+                                                                    <div>{ele.product_id.name}</div>
+                                                                    <div>颜色尺码等</div>
+                                                                    <div>¥ {ele.product_id.price}</div>
+                                                                </div>
+                                                                <div className="cart-orders-count">
+                                                                    x {ele.count}
                                                                 </div>
                                                             </div>
-                                                        )
-                                                    })
-                                                }
+                                                        </div>
+                                                    )
+                                                })
+                                            }
 
                                             <div className='packup-title'>收起</div>
                                             <div>∧</div>
-                                        </div>:''
+                                        </div> : ''
                                 }
 
                             </div>
@@ -175,7 +187,8 @@ class CartOrders extends Component {
                         <div className="orders-message">
                             <div className='orders-message-title'>买家留言</div>
                             <div className='orders-message-textarea'>
-                                 <textarea rows="1"  cols="50" maxLength="50" placeholder="输入留言内容(50字以内)" className="message-textarea" >
+                                 <textarea rows="1" cols="50" maxLength="50" placeholder="输入留言内容(50字以内)"
+                                           className="message-textarea">
                                  </textarea>
                             </div>
                         </div>
@@ -195,7 +208,8 @@ class CartOrders extends Component {
                             <span>合计：</span>
                             <span className="jiesuan-total_price">¥ {totalPrice}</span>
                         </div>
-                        <button className="jiesuan-button" onClick={()=>{}}>
+                        <button className="jiesuan-button" onClick={() => {
+                        }}>
                             <span>提交订单</span>
                         </button>
                     </div>

src/pages/home/detail/index.css

@@ -8,7 +8,7 @@
 
 .detail-navbar-wrap {
     width: 100%;
-    height: 5%
+    height: 5%;
 }
 
 .detail-navbar {

src/pages/home/kind/index.css

@@ -2,13 +2,13 @@
 }
 
 .kind-search-wrap {
-    height: 8%;
+    height: 60px;
     position: relative;
-    z-index: 100;
+    z-index: -1;
 }
 
 .kind-search {
-    height: 65%;
+    height: 40px;
     width: 90%;
     position: absolute;
     left: 50%;
@@ -20,16 +20,18 @@
     height: 100%;
     background-color: white;
     position: relative;
+    z-index: -1;
 }
 
 .kind-navbar-wrap {
     width: 100%;
-    /*height: 5%*/
+    height: 45px;
+    z-index: 1
 }
 
 .kind-navbar {
-    /*position: fixed;*/
-    /*top: 0;*/
+    position: fixed;
+    top: 0;
     width: 100%;
 }
 

src/pages/home/kind/index.js

@@ -28,7 +28,7 @@ class Kind extends Component {
 
     render() {
         let {id} = this.state
-        let contentHeight = window.innerHeight
+        let contentHeight = window.innerHeight - 105
         return (
             <div className='kind-wrap'  style={{height: contentHeight}}>
                 <div className='kind-navbar-wrap'>

src/pages/my/order/index.js

@@ -1,34 +1,43 @@
 import React, {Component} from 'react'
 import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
+import {NavBar, Icon, ActivityIndicator} from 'antd-mobile'
 import {withRouter} from 'react-router-dom'
+import {orderbyprops} from "../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
 
 class Order extends Component {
     constructor(props) {
         super(props)
         this.state = {
             navTitle: '',
-            page: 'pay'
+            page: 'pay',
+            orderStatus: ''
         }
     }
 
     componentWillMount() {
         let {location} = this.props
         if (location && location.state) {
-            let navTitle = ''
+            let navTitle = '',
+                orderStatus = '0'
             let page = location.state.page
             switch (page) {
                 case 'pay':
                     navTitle = '待付款'
+                    orderStatus = '0'
                     break
                 case 'ship':
                     navTitle = '待发货'
+                    orderStatus = '1'
                     break
                 case 'unbox':
                     navTitle = '待收货'
+                    orderStatus = '2'
                     break
                 case 'judge':
                     navTitle = '待评价'
+                    orderStatus = '3'
                     break
                 default:
                     navTitle = '无效页面'
@@ -36,13 +45,14 @@ class Order extends Component {
             }
             this.setState({
                 navTitle,
-                page
+                page,
+                orderStatus
             })
         }
     }
 
     render() {
-        let {navTitle} = this.state
+        let {navTitle, orderStatus} = this.state
         return (
             <div className='order-wrap'>
                 <div className='order-navbar-wrap'>
@@ -55,9 +65,52 @@ class Order extends Component {
                         }}
                     >{navTitle}</NavBar>
                 </div>
+                <Query query={gql(orderbyprops)} variables={{user_id: "obR_j5ILjLjFSuBjj_UymjQjMNZc", orderStatus}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            return (
+                                <OrderRender data={data.orderbyprops}/>
+                            )
+                        }
+                    }
+                </Query>
+
             </div>
         )
     }
 }
 
-export default withRouter(Order)
+export default withRouter(Order)
+
+class OrderRender extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {data} = this.props
+        console.log(data)
+        return (
+            <div>
+                {
+                    data.map(order=>(
+                        <div key={order.id}>
+                            {order.productTotalPay}
+                        </div>
+                    ))
+                }
+            </div>
+        )
+    }
+}

src/utils/gql.js

@@ -85,9 +85,57 @@ default: $default city: $city username: $username postcode: $postcode createdAt:
     }
 }
 `
+const orderbyprops = `
+    query orderbyprops($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
+        orderbyprops: order_by_props(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
+            deliveryTime
+            updatedAt
+            orderLogistics_id {
+                updatedAt
+                logisticsFee
+                expressId
+                createdAt
+                consigneeTel
+                id
+                consignAddress
+                LogisticsStatus
+                consigneeName
+            }
+            payTime
+            orderTotalPay
+            createdAt
+            orderStatus
+            userAddress_id {
+                address
+                updatedAt
+                telephone
+            default
+                city
+                username
+                postcode
+                createdAt
+                deletedAt
+                id
+                area
+                province
+            }
+            id
+            orderShipFee
+            count
+            productTotalPay
+            orderPay_id {
+                id
+                totalPay
+                transactionId
+                payTime
+            }
+        }
+    }
+`
 export {
     productbyprops,
     productbyid,
     cart_by_userid,
-    userAddressbyprops
+    userAddressbyprops,
+    orderbyprops
 }