购物车下单选择收货地址OK

src/pages/cart/orders/index.css

@@ -3,6 +3,11 @@
     background: white;
 }
 
+.orders-address-label {
+    width: 16%;
+    float: left;
+}
+
 .orders-address:after {
     left: 0;
     right: 0;

src/pages/cart/orders/index.js

@@ -1,12 +1,12 @@
 import React, {Component} from 'react'
 import {withRouter} from 'react-router-dom'
-import {NavBar, Icon, List, Picker} from 'antd-mobile'
+import {NavBar, Icon, List, Picker, ActivityIndicator} from 'antd-mobile'
 import classNames from 'classnames'
-import {Mutation} from "react-apollo"
+import {Query, Mutation} from "react-apollo"
 import gql from "graphql-tag"
 import moment from 'moment';
 
-import {create_order} from "../../../utils/gql"
+import {user_default_address, create_order} from "../../../utils/gql"
 
 import './index.css'
 
@@ -36,6 +36,7 @@ class CartOrders extends Component {
             height: '100%',
             unfoldStatus: true,
             foldStatus: false,
+            selectAddress: JSON.parse(sessionStorage.getItem('ordersAddress')),
         }
     }
 
@@ -72,12 +73,13 @@ class CartOrders extends Component {
 
     onSubmitOrder = (create_order) => {
         let {totalCount, totalPrice} = this.state
-        let createdAt = moment().format('YYYY-MM-DD HH:mm:ss');
-        let tag = "18726202125".replace(/[^0-9]/ig, "").slice(-4);
-        let id = createdAt.replace(/[^0-9]/ig, "").substr(2) + tag;
+        let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        let tag = "18726202125".replace(/[^0-9]/ig, "").slice(-4)
+        let id = createdAt.replace(/[^0-9]/ig, "").substr(2) + tag
 
         let shopping = JSON.parse(sessionStorage.getItem("shopping"))
         let deleteIdList = shopping.map(item => item.id)
+        let userAddress_id = JSON.parse(sessionStorage.getItem('ordersAddress')).id
 
         const orderContent = {
              deliveryTime: "",
@@ -87,7 +89,7 @@ class CartOrders extends Component {
              orderTotalPay: totalPrice,
              createdAt,
              orderStatus: "0",
-             userAddress_id: "",
+             userAddress_id,
              id,
              orderShipFee: 0,
              count: totalCount,
@@ -99,7 +101,7 @@ class CartOrders extends Component {
 
         create_order({variables:orderContent}).then((data)=>{
             // console.log('create_order data',data)
-            sessionStorage.removeItem("cartList");
+            sessionStorage.removeItem("cartList")
 
             this.props.history.push({
                 pathname:'/cart/pay',
@@ -109,7 +111,7 @@ class CartOrders extends Component {
     }
 
     render() {
-        let {cartList, unfoldList, height, unfoldStatus, foldStatus, totalPrice} = this.state
+        let {cartList, unfoldList, height, unfoldStatus, foldStatus, totalPrice, selectAddress} = this.state
 
         return (
             <div className='orders-wrap'>
@@ -132,24 +134,32 @@ class CartOrders extends Component {
                 </div>
                 <div className='orders-content-wrap content-wrap'>
                     <div className='orders-address'>
-                        <List>
-                            <Item
-                                arrow="horizontal"
-                                multipleLine
-                                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>
-                            </Item>
-                        </List>
+                        {
+                            selectAddress ?
+                                <OrdersAddress props={this.props} selectAddress={selectAddress} />:
+                                <Query query={gql(user_default_address)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA", default:1}}>
+                                    {
+                                        ({loading, error, data}) => {
+                                            if (loading) {
+                                                return (
+                                                    <div className="loading-center">
+                                                        <ActivityIndicator size="large"/>
+                                                        <span>加载中...</span>
+                                                    </div>
+                                                )
+                                            }
+                                            if (error) {
+                                                return 'error!'
+                                            }
+                                            let defaultAddress = data.defaultAddress[0]
+
+                                            return (
+                                                <OrdersAddress props={this.props} selectAddress={defaultAddress} />
+                                            )
+                                        }
+                                    }
+                                </Query>
+                        }
                     </div>
                     <div className='orders-detail'>
                         <div className='cart-content'>
@@ -276,4 +286,40 @@ class CartOrders extends Component {
     }
 }
 
-export default withRouter(CartOrders)
+export default withRouter(CartOrders)
+
+const OrdersAddress =({props,selectAddress}) => {
+    let {default:isDefault, username, telephone, province, area, city, address} = selectAddress
+
+    return (
+        <List>
+            <Item
+                arrow="horizontal"
+                multipleLine
+                onClick={() => {
+                    sessionStorage.setItem('ordersAddress',JSON.stringify(selectAddress))
+                    props.history.push({
+                        pathname:'/my/tools',
+                        state: {
+                            page: 'address'
+                        }})
+                }}>
+                <div>
+                    <span>{username}</span>&nbsp;&nbsp;
+                    <span>{telephone}</span>
+                </div>
+                <div>
+                    <div>
+                        {
+                            isDefault ?
+                                <div className="orders-address-label">
+                                    <span className='address-label'>默认</span>
+                                </div>:''
+                        }
+                        <Brief style={{fontSize: 13}}>{province}{area}{city}{address}</Brief>
+                    </div>
+                </div>
+            </Item>
+        </List>
+    )
+}

src/pages/my/tools/address/index.css

@@ -13,8 +13,8 @@
     text-align: center;
     font-size: 20px;
     border-top: 1px solid #F3F3F3;
-    height: 60px;
-    line-height: 60px;
+    height: 50px;
+    line-height: 50px;
     box-shadow: 3px -1px 1px #ebedf0;
     background-color: #f44;
     color: white;
@@ -39,5 +39,5 @@
     padding: 0 10px;
     background-color: #ff6d6d;
     color: white;
-    border-radius: 5px;
+    border-radius: 10px;
 }

src/pages/my/tools/address/index.js

@@ -83,6 +83,7 @@ class Address extends Component {
                                                     otherAddress={this.getOtherAddress(data)}
                                                     changePage={this.changePage}
                                                     changeAddress={this.changeAddress}
+                                                    history={this.props.history}
                                                 />
                                         }
                                     </div>
@@ -104,8 +105,18 @@ class AddressRender extends Component {
         this.state = {}
     }
 
+    changeOrdersAddress =(address) => {
+        sessionStorage.setItem('ordersAddress',JSON.stringify(address))
+
+        this.props.history.push({
+            pathname:'/cart/orders',
+            state:{}
+        })
+    }
+
     render() {
         let {changePage, changeAddress, defaultAddress, otherAddress} = this.props
+
         return (
             <div>
                 <div className='address-add' onClick={() => {
@@ -117,7 +128,7 @@ class AddressRender extends Component {
                 </div>
 
                 <div className='default-address'>
-                    <div className='address-card'>
+                    <div className='address-card' onClick={() => this.changeOrdersAddress(defaultAddress)}>
                         <Row className='address-username-telephone'>
                             <Col span={6} className='address-username ellipsis'>{defaultAddress.username}</Col>
                             <Col span={14} className='address-phone ellipsis'>{defaultAddress.telephone}&nbsp;&nbsp;
@@ -143,7 +154,7 @@ class AddressRender extends Component {
                 <div className='other-address'>
                     {otherAddress.map(address => {
                         return (
-                            <div key={address.id} className='address-card'>
+                            <div key={address.id} className='address-card' onClick={() => this.changeOrdersAddress(address)}>
                                 <Row className='address-username-telephone'>
                                     <Col span={6} className='address-username ellipsis'>{address.username}</Col>
                                     <Col span={14} className='address-phone ellipsis'>{address.telephone}</Col>

src/utils/gql.js

@@ -70,9 +70,8 @@ const delete_userCart_by_id = `
     }
 `
 const userAddressbyprops = `
-    query userAddressbyprops($address: String, $updatedAt: String, $telephone: String, $default: Int, $city: String, $username: String, $postcode: String, $createdAt: String, $deletedAt: String, $user_id: ID, $area: String, $province: String) {
-        userAddressbyprops: userAddress_by_props(address: $address updatedAt: $updatedAt telephone: $telephone
-default: $default city: $city username: $username postcode: $postcode createdAt: $createdAt deletedAt: $deletedAt user_id: $user_id area: $area province: $province) {
+    query userAddressbyprops($user_id: ID) {
+        userAddressbyprops: userAddress_by_props(user_id: $user_id) {
         address
         updatedAt
         telephone
@@ -85,11 +84,8 @@ default: $default city: $city username: $username postcode: $postcode createdAt:
         id
         user_id {
             email
-            updatedAt
-            password
             telephone
             username
-            createdAt
             openid
             id
         }
@@ -98,6 +94,25 @@ default: $default city: $city username: $username postcode: $postcode createdAt:
     }
 }
 `
+const user_default_address = `
+    query user_default_address($user_id: ID, $default: Int) {
+        defaultAddress: userAddress_by_props(user_id: $user_id default: $default) { 
+            id 
+            default
+            username        
+            telephone
+            province
+            area
+            city
+            address
+            user_id {
+                openid
+                id
+            }                       
+        }
+    }
+`
+
 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) {
@@ -236,6 +251,7 @@ export {
     cart_by_userid,
     delete_userCart_by_id,
     userAddressbyprops,
+    user_default_address,
     orderbyprops,
     orderProduct_by_props,
     create_order