地址相关

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

@@ -14,7 +14,7 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     border-top: 1px solid #F3F3F3;
     height: 50px;
     line-height: 50px;

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

@@ -43,8 +43,9 @@ class Address extends Component {
     }
 
     render() {
-        let {addressChoosed, addressID} = this.state
+        let {addressChoosed, addressID, single} = this.state
         let user_id = getCookie('user_id')
+        let navContent = single ? '编辑地址' : '地址管理'
 
         return (
             <div>
@@ -53,9 +54,13 @@ class Address extends Component {
                         mode="light"
                         icon={<Icon type="left"/>}
                         onLeftClick={() => {
-                            this.props.history.go(-2)
+                            if(single){
+                                this.changePage(false)
+                            }else {
+                                this.props.history.go(-2)
+                            }
                         }}
-                    >地址管理</NavBar>
+                    >{navContent}</NavBar>
                 </div>
                 <div className='content-wrap'>
                     <Query query={gql(userAddressbyprops)} variables={{user_id}}>
@@ -81,8 +86,8 @@ class Address extends Component {
                                                 <SingleAddress
                                                     addressID={addressID}
                                                     addressChoosed={addressChoosed}
-                                                    changePage={this.changePage}
                                                     history={this.props.history}
+                                                    user_id={user_id}
                                                 />
                                                 :
                                                 <AddressRender
@@ -164,7 +169,6 @@ class AddressRender extends Component {
                                         <div className='address-edit'>
                                             <Icon
                                                 type="edit"
-                                                style={{fontSize: 14}}
                                                 onClick={()=>{
                                                     changePage(true)
                                                     changeAddress(address)

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

@@ -4,4 +4,16 @@
 
 .address-button {
     margin-top: 5px;
+}
+
+.address-default-checked {
+    background: white;
+    font-size: 16px;
+    padding: 10px 10px 15px 15px;
+    border-top: 1px solid #ebedf0;
+    width: 100%;
+}
+
+.address-default-checked span:last-child{
+    float: right;
 }

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

@@ -1,8 +1,12 @@
-import {Component} from "react"
-import React from "react"
-import {NavBar, Icon, InputItem, PickerView, TextareaItem} from 'antd-mobile'
-import {Button} from 'antd'
+import React, {Component} from "react"
+import {InputItem, TextareaItem, Picker, Switch} from 'antd-mobile'
+import {Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import moment from 'moment'
+
+import {create_userAddress} from "../../../../../utils/gql"
 import './index.css'
+import {idGen} from "../../../../../utils/func"
 
 const provinceAll = [
     {
@@ -91,138 +95,121 @@ class SingleAddress extends Component {
             city: '合肥市',
             area: '蜀山区',
             address: '',
-            id: ''
+            id: '',
+            defaultStatus:false
         }
         if (props.addressID === 'add') {
             this.state = {...state}
         } else {
-            let {province, city, area, address, telephone, username, id} = props.addressChoosed
-            this.state = {...state, province, city, area, address, telephone, username, id}
+            let {province, city, area, address, telephone, username, id, default:default1} = props.addressChoosed
+            let defaultStatus = default1 ? 1 : 0
+            this.state = {...state, province, city, area, address, telephone, username, id, defaultStatus}
+        }
+    }
+
+    saveAddress = (user_id, create_userAddress) => {
+        let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        let id = idGen('address')
+        let {username, telephone, province, city, area, address, defaultStatus} = this.state
+        let defaultStatus1 = defaultStatus ? 1 : 0
+        const addressContent = {
+            address,
+            updatedAt: "",
+            telephone,
+            default: defaultStatus1,
+            city,
+            username,
+            postcode: "",
+            createdAt,
+            deletedAt: "",
+            id,
+            user_id,
+            area,
+            province
         }
+
+        create_userAddress({variables:addressContent}).then((data)=>{
+            let prePage = this.props.history.location.state.prePage
+            if(prePage){
+                sessionStorage.setItem('ordersAddress',JSON.stringify(addressContent))
+                this.props.history.go(-2)
+            }
+        })
     }
 
     render() {
-        let {changePage, history} = this.props
-        let {username, telephone, province, city, area, address, id} = this.state
+        let {user_id} = this.props
+        let {username, telephone, province, city, area, address} = this.state
 
         return (
             <div>
-                <div className='tools-addressadd-navbar-wrap'>
-                    <NavBar
-                        className='tools-addressadd-navbar'
-                        mode="dark"
-                        icon={<Icon type="left"/>}
-                        onLeftClick={() => {
-                            changePage(false)
-                        }}
-                    >添加新地址</NavBar>
-                </div>
-
                 <div>
-                    <InputItem placeholder="输入姓名" value={username} labelNumber={5} onChange={(username) => {
+                    <InputItem placeholder="请填写收货人" value={username} onChange={(username) => {
                         this.setState({username})
                     }}>
-                        <div>联系人姓名</div>
+                        <div>收货人</div>
                     </InputItem>
-                    <InputItem placeholder="输入号码" value={telephone} onChange={(telephone) => {
+                    <InputItem placeholder="请填写联系电话" value={telephone} onChange={(telephone) => {
                         this.setState({telephone})
                     }}>
-                        <div>手机号码</div>
+                        <div>联系电话</div>
                     </InputItem>
-                    <TextareaItem
-                        title="选择地区"
-                        editable={false}
-                    />
-                    <PickerView
+                    <Picker
                         data={provinceAll}
                         value={[province, city ? city : '', area ? area : '']}
-                        onChange={(address) => {
+                        onOk={(address) => {
                             this.setState({province: address[0], city: address[1], area: address[2]})
                         }}
-                    />
+                    >
+                        <TextareaItem
+                            title="选择地区"
+                            editable={false}
+                            value={province+city+area}
+                        />
+                    </Picker>
                     <TextareaItem
                         title="详细地址"
+                        placeholder="请输入详细地址，无需包含省市"
                         autoHeight
-                        labelNumber={4}
                         value={address}
                         onChange={(address) => {
                             this.setState({address})
                         }}
                     />
+                    <div className='address-default-checked'>
+                        <span>设为默认地址</span>
+                        <span>
+                            <Switch
+                                checked={this.state.defaultStatus}
+                                color={'#f44'}
+                                onChange={() => {
+                                    this.setState({
+                                        defaultStatus: !this.state.defaultStatus,
+                                    })
+                                }}
+                            />
+                        </span>
+                    </div>
                 </div>
 
                 <div className='address-button-group'>
-                    <DefaultAndSaveButton
-                        data={{
-                            username,
-                            telephone,
-                            province,
-                            city,
-                            area,
-                            address,
-                            id
-                        }}
-                    />
-
-                    <SaveAddressButton
-                        data={{
-                            username,
-                            telephone,
-                            province,
-                            city,
-                            area,
-                            address,
-                            id
-                        }}
-                        history={history}
-                    />
+                    <Mutation mutation={gql(create_userAddress)}
+                              onError={error=>console.log('error',error)}
+                    >
+                        {(create_userAddress,{ loading, error }) => (
+                            <div className='address-add'
+                                 onClick={()=>{
+                                     this.saveAddress(user_id, create_userAddress)
+                                 }}
+                            >
+                                保存并使用
+                            </div>
+                        )}
+                    </Mutation>
                 </div>
-
-            </div>
-        )
-    }
-}
-
-export default SingleAddress
-
-class DefaultAndSaveButton extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
-
-    render() {
-        // let {data} = this.props
-        return (
-            <div className='address-button'>
-                <Button block size='large' style={{outline: 'none'}}>设为默认并保存</Button>
             </div>
         )
     }
 }
 
-
-class SaveAddressButton extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
-
-    render() {
-        let prePage = this.props.history.location.state.prePage
-        // let {data} = this.props
-        return (
-            <div className='address-button'>
-                <Button type='primary' block size='large' style={{outline: 'none'}}
-                        onClick={()=>{
-                            if(prePage){
-                                // sessionStorage.setItem('ordersAddress',JSON.stringify(address))
-                                this.props.history.go(-2)
-                            }
-                        }}
-                >
-                    保存并使用</Button>
-            </div>
-        )
-    }
-}
+export default SingleAddress

src/utils/gql.js

@@ -222,6 +222,30 @@ const delete_userCart_by_id = `
     }
 `
 
+const create_userAddress = `
+    mutation createuserAddress($address: String, $updatedAt: String, $telephone: String, $default: Int, $city: String, $username: String, $postcode: String, $createdAt: String, $deletedAt: String, $id: ID!, $user_id: ID, $area: String, $province: String) {
+        createuserAddress: create_userAddress(address: $address updatedAt: $updatedAt telephone: $telephone
+            default: $default city: $city username: $username postcode: $postcode createdAt: $createdAt deletedAt: $deletedAt id: $id user_id: $user_id area: $area province: $province) {
+            result
+            userAddress {
+                address
+                updatedAt
+                telephone
+                default
+                city
+                username
+                postcode
+                createdAt
+                deletedAt
+                id
+    
+                area
+                province
+            }
+        }
+    }
+`
+
 const userAddressbyprops = `
     query userAddressbyprops($user_id: ID) {
         userAddressbyprops: userAddress_by_props(user_id: $user_id) {
@@ -673,6 +697,7 @@ export {
     cart_by_userid,
     update_userCart,
     delete_userCart_by_id,
+    create_userAddress,
     userAddressbyprops,
     user_default_address,
     orderbyprops,