address

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

@@ -0,0 +1,135 @@
+import {Component} from "react"
+import React from "react"
+import {NavBar, Icon, InputItem, PickerView, TextareaItem} from 'antd-mobile'
+const province = [
+    {
+        label: '北京',
+        value: '01',
+        children: [
+            {
+                label: '东城区',
+                value: '01-1',
+            },
+            {
+                label: '西城区',
+                value: '01-2',
+            },
+            {
+                label: '崇文区',
+                value: '01-3',
+            },
+            {
+                label: '宣武区',
+                value: '01-4',
+            },
+        ],
+    },
+    {
+        label: '浙江',
+        value: '02',
+        children: [
+            {
+                label: '杭州',
+                value: '02-1',
+                children: [
+                    {
+                        label: '西湖区',
+                        value: '02-1-1',
+                    },
+                    {
+                        label: '上城区',
+                        value: '02-1-2',
+                    },
+                    {
+                        label: '江干区',
+                        value: '02-1-3',
+                    },
+                    {
+                        label: '下城区',
+                        value: '02-1-4',
+                    },
+                ],
+            },
+            {
+                label: '宁波',
+                value: '02-2',
+                children: [
+                    {
+                        label: 'xx区',
+                        value: '02-2-1',
+                    },
+                    {
+                        label: 'yy区',
+                        value: '02-2-2',
+                    },
+                ],
+            },
+            {
+                label: '温州',
+                value: '02-3',
+            },
+            {
+                label: '嘉兴',
+                value: '02-4',
+            },
+            {
+                label: '湖州',
+                value: '02-5',
+            },
+            {
+                label: '绍兴',
+                value: '02-6',
+            },
+        ],
+    },
+];
+
+class AddAddress extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {changePage} = this.props
+        return (
+            <div>
+                <div className='tools-addressadd-navbar-wrap'>
+                    <NavBar
+                        className='tools-addressadd-navbar'
+                        mode="dark"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            changePage(false)
+                        }}
+                        rightContent={[
+                            <div>保存</div>,
+                        ]}
+                    >添加新地址</NavBar>
+                </div>
+
+                <div>
+                    <InputItem placeholder="输入姓名"><div>联系人姓名</div></InputItem>
+                    <InputItem placeholder="输入号码"><div>手机号码</div></InputItem>
+                    <TextareaItem
+                        title="选择地区"
+                        editable={false}
+                    />
+                    <PickerView
+                        data={province}
+                        value={['02', '02-1', '02-1-1']}
+                    />
+                    <TextareaItem
+                        title="详细地址"
+                        autoHeight
+                        labelNumber={5}
+                    />
+                </div>
+            </div>
+        )
+    }
+}
+
+export default AddAddress

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

@@ -1,5 +1,20 @@
 .address-card {
     background-color: white;
+    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
 }
 
 .address-add {
@@ -10,6 +25,7 @@
     font-size: 20px;
     background-color: white;
     border-top: 1px solid #F3F3F3;
-    height: 50px;
-    line-height: 50px;
+    height: 70px;
+    line-height: 70px;
+    box-shadow: 3px -1px 1px #ebedf0;
 }

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

@@ -6,11 +6,20 @@ import {Button, Icon} from 'antd'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 import './index.css'
+import AddAddress from "./addaddress"
 
 class Address extends Component {
     constructor(props) {
         super(props)
-        this.state = {}
+        this.state = {
+            add: false
+        }
+    }
+
+    changePage = (bool) => {
+        this.setState({
+            add: bool
+        })
     }
 
     render() {
@@ -31,7 +40,14 @@ class Address extends Component {
                             }
 
                             return (
-                                <AddressRender data={data.userAddressbyprops}/>
+                                <div>
+                                    {
+                                        this.state.add?
+                                            <AddAddress changePage={this.changePage}/>
+                                            :
+                                            <AddressRender data={data.userAddressbyprops} changePage={this.changePage}/>
+                                    }
+                                </div>
                             )
                         }
                     }
@@ -51,25 +67,27 @@ class AddressRender extends Component {
     }
 
     render() {
-        let {data} = this.props
+        let {data, changePage} = this.props
         return (
             <div>
-                <div className='address-add'>
-                    <Icon type="plus" style={{fontSize: 22}}/>&nbsp;
+                <div className='address-add' onClick={()=>{
+                    changePage(true)
+                }}>
+                    <Icon type="plus" style={{fontSize: 22, fontWeight: 800}}/>&nbsp;
                     添加新地址
                 </div>
                 <div>
                     {data.map(address => {
                         return (
                             <div key={address.id} className='address-card'>
-                                <div>
-                                    收件人：{address.username}
+                                <div className='address-username'>
+                                    <span className='address-card-title'>收件人：</span>{address.username}
                                 </div>
-                                <div>
-                                    联系电话：{address.telephone}
+                                <div className='address-telephone'>
+                                    <span className='address-card-title'>联系电话：</span>{address.telephone}
                                 </div>
-                                <div>
-                                    联系地址：{address.province + address.city + address.area + address.address}
+                                <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>
                             </div>

src/pages/my/tools/index.js

@@ -57,7 +57,7 @@ class Tools extends Component {
                     >{navTitle}</NavBar>
                 </div>
                 <Switch>
-                    <Route path="/my/tools/address" component={Address}/>
+                    <Route exact path="/my/tools/address" component={Address}/>
                     <Route path="/my/tools/message" component={Message}/>
                 </Switch>
             </div>