修改地址

src/pages/cart/all/index.js

@@ -27,7 +27,7 @@ class All extends Component {
     }
 
     getHash = () => {
-        // console.log('location',window.location.hash)
+        // 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) {
@@ -68,7 +68,7 @@ class All extends Component {
                         if (loading) {
                             return (
                                 <div className="loading-center">
-                                    <ActivityIndicator size="large" />
+                                    <ActivityIndicator size="large"/>
                                     <span>正在加载...</span>
                                 </div>
                             )

src/pages/home/kind/index.css

@@ -4,7 +4,7 @@
 .kind-search-wrap {
     height: 60px;
     position: relative;
-    z-index: -1;
+    z-index: 0;
 }
 
 .kind-search {
@@ -20,7 +20,7 @@
     height: 100%;
     background-color: white;
     position: relative;
-    z-index: -1;
+    z-index: 0;
 }
 
 .kind-navbar-wrap {

src/pages/home/kind/index.js

@@ -37,9 +37,6 @@ class Kind extends Component {
                         mode="light"
                         icon={<Icon type="left"/>}
                         onLeftClick={() => {this.props.history.push({pathname: '/'})}}
-                        rightContent={[
-                            <Icon key="1" type="ellipsis"/>,
-                        ]}
                     >商品分类</NavBar>
                 </div>
                 <div className='kind-search-wrap'>
@@ -96,12 +93,14 @@ class KindRender extends Component {
                               columnNum={2}
                               hasLine={false}
                               onClick={(product) => {
+                                  console.log(1)
                                   this.props.history.push({
                                       pathname: '/home/detail',
                                       state: {
                                           id: product.id
                                       }
                                   })
+
                               }}
                               renderItem={dataItem => (
                                   <div key={dataItem.id} className='kind-item'>

src/pages/my/order/index.js

@@ -83,7 +83,6 @@ class Order extends Component {
                         }
                     }
                 </Query>
-
             </div>
         )
     }

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

@@ -3,18 +3,7 @@
     padding: 10px;
     font-size: 16px;
     color: black;
-    margin-bottom: 20px;
-}
-
-.address-card-title {
-    width: 85px;
-    display: inline-block;
-}
-
-.address-address {
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap
+    border: 1px solid #F3F3F3;
 }
 
 .address-add {
@@ -29,4 +18,26 @@
     box-shadow: 3px -1px 1px #ebedf0;
     background-color: #f44;
     color: white;
+}
+
+.address-username {
+    font-weight: 500;
+}
+
+.ellipsis {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
+}
+
+.address-address {
+    font-size: 14px;
+}
+
+.address-label {
+    font-size: 12px;
+    padding: 0 10px;
+    background-color: #ff6d6d;
+    color: white;
+    border-radius: 5px;
 }

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

@@ -2,7 +2,7 @@ import {Component} from "react"
 import React from "react"
 import {userAddressbyprops} from "../../../../utils/gql"
 import {ActivityIndicator} from 'antd-mobile'
-import {Button, Icon} from 'antd'
+import {Icon, Row, Col} from 'antd'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 import './index.css'
@@ -22,6 +22,17 @@ class Address extends Component {
         })
     }
 
+    getDefaultAddress = (data) => (
+        data.find(data => data.default === '1')
+    )
+
+    getOtherAddress = (data) => {
+        let defaultAddressIndex = data.find(data => data.default === '1')
+        let dataCopy = [...data]
+        dataCopy.splice(defaultAddressIndex, 1)
+        return dataCopy
+    }
+
     render() {
         return (
             <div>
@@ -39,13 +50,15 @@ class Address extends Component {
                                 return 'error!'
                             }
 
+                            data = data.userAddressbyprops
+
                             return (
                                 <div>
                                     {
-                                        this.state.add?
+                                        this.state.add ?
                                             <AddAddress changePage={this.changePage}/>
                                             :
-                                            <AddressRender data={data.userAddressbyprops} changePage={this.changePage}/>
+                                            <AddressRender defaultAddress={this.getDefaultAddress(data)} otherAddress={this.getOtherAddress(data)} changePage={this.changePage}/>
                                     }
                                 </div>
                             )
@@ -53,7 +66,6 @@ class Address extends Component {
                     }
                 </Query>
             </div>
-
         )
     }
 }
@@ -67,29 +79,46 @@ class AddressRender extends Component {
     }
 
     render() {
-        let {data, changePage} = this.props
+        let {changePage, defaultAddress, otherAddress} = this.props
+        console.log(defaultAddress)
+        console.log(otherAddress)
         return (
             <div>
-                <div className='address-add' onClick={()=>{
+                <div className='address-add' onClick={() => {
                     changePage(true)
                 }}>
                     <Icon type="plus" style={{fontSize: 22, fontWeight: 800}}/>&nbsp;
                     添加新地址
                 </div>
-                <div>
-                    {data.map(address => {
+
+                <div className='default-address'>
+                    <div className='address-card'>
+                        <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;
+                                <span className='address-label'>默认</span></Col>
+                        </Row>
+                        <Row>
+                            <Col span={20}
+                                 className='address-address'>{defaultAddress.province + defaultAddress.city + defaultAddress.area + defaultAddress.address}</Col>
+                            <Col span={2} offset={2}><Icon type="edit" style={{fontSize: 14}}/></Col>
+                        </Row>
+                    </div>
+                </div>
+
+                <div className='other-address'>
+                    {otherAddress.map(address => {
                         return (
                             <div key={address.id} className='address-card'>
-                                <div className='address-username'>
-                                    <span className='address-card-title'>收件人：</span>{address.username}
-                                </div>
-                                <div className='address-telephone'>
-                                    <span className='address-card-title'>联系电话：</span>{address.telephone}
-                                </div>
-                                <div className='address-address'>
-                                    <span className='address-card-title'>联系地址：</span>{address.province + address.city + address.area + address.address}
-                                </div>
-                                <Button type='danger' className='address-delete'>删除</Button>
+                                <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>
+                                </Row>
+                                <Row>
+                                    <Col span={20}
+                                         className='address-address'>{address.province + address.city + address.area + address.address}</Col>
+                                    <Col span={2} offset={2}><Icon type="edit" style={{fontSize: 14}}/></Col>
+                                </Row>
                             </div>
                         )
                     })}