地址管理的跳转编辑功能以及样式修改、其余修改

src/pages/cart/all/index.css

@@ -52,6 +52,7 @@
 
 .cart-list-intro :nth-child(2) {
     font-size: 12px;
+    color: gray;
 }
 
 .cart-list-intro :last-child {

src/pages/cart/orders/index.css

@@ -45,6 +45,7 @@
 
 .cart-orders-intro :nth-child(2) {
     font-size: 12px;
+    color: gray;
 }
 
 .cart-orders-intro :last-child {

src/pages/cart/orders/index.js

@@ -234,12 +234,10 @@ class CartOrders extends Component {
                             {
                                 cartList.map((item, index) => {
                                     return (
-                                        <div key={index}>
+                                        <div key={'cart-orders-'+item.id}>
                                             <div className="cart-list">
                                                 <div className="cart-list-image">
-                                                    <img
-                                                        src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"}
-                                                        alt=""/>
+                                                    <img src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
                                                 </div>
                                                 <div className="cart-orders-intro">
                                                     <div className='hide-extra-text'>{item.product_id.name}</div>
@@ -382,7 +380,8 @@ const OrdersAddress =({props,selectAddress}) => {
                     props.history.push({
                         pathname:'/my/tools',
                         state: {
-                            page: 'address'
+                            page: 'address',
+                            prePage: 'orders'
                         }})
                 }}>
                 <div>

src/pages/my/order/detail/index.css

@@ -4,6 +4,7 @@
 }
 
 .detail-address-backgroud-top {
+    font-size: 18px;
     background-color: #f44;
     height: 100px;
     color: white;
@@ -35,7 +36,8 @@
     border-radius: 5px;
     border: 1px solid #F3F3F3;
     box-shadow: 0 1px 10px #F3F3F3;
-    padding: 20px 5px;
+    padding: 10px 5px;
+    overflow: hidden;
 }
 
 .detail-address-content-icon {

src/pages/my/order/detail/index.js

@@ -1,12 +1,13 @@
 import {Component} from "react"
 import React from "react"
-import './index.css'
-import {NavBar} from 'antd-mobile'
 import {Row, Col, Icon} from 'antd'
-import {orderProduct_by_props} from "../../../../utils/gql"
+import {NavBar} from 'antd-mobile'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
+
+import {orderProduct_by_props} from "../../../../utils/gql"
 import {ButtonGroupRender} from '../display'
+import './index.css'
 
 class Detail extends Component {
     constructor(props) {
@@ -68,27 +69,20 @@ class Detail extends Component {
     productsRender = (data) => {
         return (
             data.map(data => (
-                <div
-                    key={data.id}
-                    className='detail-good-wrap'
-                >
-                    <Row style={{width: '100%'}}>
-                        <Col span={6} style={{height: '100px'}}>
-                            <div className='order-product-img'
-                                 style={{backgroundImage: `url('${data.product_id.img}')`}}/>
-                        </Col>
-                        <Col span={16} offset={2}>
-                            <div className='order-product-name'>{data.product_id.name}</div>
-                            <div className='order-product-others'>
-                                <div>
-                                    数量：{data.count}&nbsp;规格：{data.productColor}
-                                </div>
-                                <div>
-                                    尺寸：{data.productSize}
-                                </div>
-                            </div>
-                        </Col>
-                    </Row>
+                <div key={'orders-detail-'+data.id}>
+                    <div className="cart-list">
+                        <div className="cart-list-image">
+                            <img src={data.product_id.img} alt=""/>
+                        </div>
+                        <div className="cart-orders-intro">
+                            <div className='hide-extra-text'>{data.product_id.name}</div>
+                            <div>{data.productColor}  {data.productSize}</div>
+                            <div>¥ {data.product_id.price}</div>
+                        </div>
+                        <div className="cart-orders-count">
+                            x {data.count}
+                        </div>
+                    </div>
                 </div>
             ))
         )
@@ -96,6 +90,7 @@ class Detail extends Component {
 
     render() {
         let {data} = this.state
+        let {username, telephone, province, city, area, address} = data.userAddress_id
         return (
             <div>
                 <div className='detail-wrap'>
@@ -125,17 +120,17 @@ class Detail extends Component {
                                     </Col>
                                     <Col span={20}>
                                         <div className='detail-address-content-username-phone'>
-                                            {data.userAddress_id.username}&nbsp;&nbsp;{data.userAddress_id.telephone}
+                                            {username}&nbsp;&nbsp;{telephone}
                                         </div>
                                         <div>
-                                            地址：{data.userAddress_id.province + data.userAddress_id.city + data.userAddress_id.area + data.userAddress_id.address}
+                                            地址：{province + city + area + address}
                                         </div>
                                     </Col>
                                 </Row>
                             </div>
                         </div>
                         <div className='detail-goods-wrap'>
-                            <div className='detail-store-name'>JD</div>
+                            <div className='detail-store-name'>订单号: {data.id}</div>
                             <Query query={gql(orderProduct_by_props)} variables={{order_id: data.id}}>
                                 {
                                     ({loading, error, data}) => {

src/pages/my/order/display/index.css

@@ -1,5 +1,5 @@
 .order-card {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: white;
 }
 

src/pages/my/order/display/index.js

@@ -1,12 +1,13 @@
 import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon, ActivityIndicator, Button} from 'antd-mobile'
-import {Row, Col} from 'antd'
 import {withRouter} from 'react-router-dom'
-import {orderbyprops, orderProduct_by_props} from "../../../../utils/gql"
+import {Row, Col} from 'antd'
+import {NavBar, Icon, ActivityIndicator, Button} from 'antd-mobile'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 
+import {orderbyprops, orderProduct_by_props} from "../../../../utils/gql"
+import './index.css'
+
 class Display extends Component {
     constructor(props) {
         super(props)
@@ -117,54 +118,10 @@ class DisplayRender extends Component {
         }
     }
 
-    orderCardBottomRender = (order) => {
-        let {orderStatus} = this.props
-        switch (orderStatus) {
-            case '0':
-                return (
-                    <div className='order-card-bottom'>
-                        <div
-                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;需付款:
-                        </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
-                    </div>
-                )
-            case '1':
-                return (
-                    <div className='order-card-bottom'>
-                        <div
-                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
-                        </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
-                    </div>
-                )
-            case '2':
-                return (
-                    <div className='order-card-bottom'>
-                        <div
-                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
-                        </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
-                    </div>
-                )
-            case '3':
-                return (
-                    <div className='order-card-bottom'>
-                        <div
-                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
-                        </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
-                    </div>
-                )
-            default:
-                return (
-                    <div>1</div>
-                )
-        }
-    }
-
     render() {
-        let {data} = this.props
+        let {data, orderStatus} = this.props
+        let content = orderStatus === '0' ? '需付款' : '实付款'
+
         return (
             <div className='content-wrap'>
                 {
@@ -175,7 +132,7 @@ class DisplayRender extends Component {
                         :
                         data.map(order => (
                             <div key={order.id} className='order-card'>
-                                <div className='order-card-top'>JD</div>
+                                <div className='order-card-top'>订单号: {order.id}</div>
 
                                 <Query query={gql(orderProduct_by_props)} variables={{order_id: order.id}}>
                                     {
@@ -211,7 +168,12 @@ class DisplayRender extends Component {
                                     }
                                 </Query>
 
-                                {this.orderCardBottomRender(order)}
+                                <div className='order-card-bottom'>
+                                    <div
+                                        className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;{content}:
+                                    </div>
+                                    <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
+                                </div>
 
                                 <ButtonGroupRender orderStatus={this.props.orderStatus}/>
                             </div>

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

@@ -3,7 +3,10 @@
     padding: 10px;
     font-size: 16px;
     color: black;
+    display: flex;
     border: 1px solid #F3F3F3;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .address-add {
@@ -20,6 +23,15 @@
     color: white;
 }
 
+.address-info{
+    width: 85%;
+}
+
+.address-edit {
+    width: 15%;
+    text-align: center;
+}
+
 .address-username {
     font-weight: 500;
 }

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

@@ -106,14 +106,19 @@ class AddressRender extends Component {
     }
 
     changeOrdersAddress =(address) => {
-        console.log('address',address)
-        sessionStorage.setItem('ordersAddress',JSON.stringify(address))
+        // console.log('address',address,this.props.history)
+        let {history} = this.props
+        let prePage = history.location.state.prePage
 
-        this.props.history.go(-2)
+        if(prePage){
+            sessionStorage.setItem('ordersAddress',JSON.stringify(address))
+            this.props.history.go(-2)
+        }
     }
 
     render() {
         let {changePage, changeAddress, defaultAddress, otherAddress} = this.props
+        let {username, telephone, province, city, area, address} = defaultAddress
 
         return (
             <div>
@@ -126,50 +131,53 @@ class AddressRender extends Component {
                 </div>
 
                 <div className='default-address'>
-                    <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;
-                                <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}}
-                                    onClick={()=>{
-                                        changePage(true)
-                                        changeAddress(defaultAddress)
-                                    }}
-                                />
-                            </Col>
-                        </Row>
+                    <div className='address-card'>
+                        <div className='address-info' onClick={() => this.changeOrdersAddress(defaultAddress)}>
+                            <Row className='address-username-telephone'>
+                                <Col span={6} className='address-username ellipsis'>{username}</Col>
+                                <Col span={14} className='address-phone ellipsis'>{telephone}&nbsp;&nbsp;
+                                    <span className='address-label'>默认</span></Col>
+                            </Row>
+                            <Row>
+                                <Col span={24} className='address-address'>{province + city + area + address}</Col>
+                            </Row>
+                        </div>
+                        <div className='address-edit'>
+                            <Icon
+                                type="edit"
+                                style={{fontSize: 14}}
+                                onClick={()=>{
+                                    changePage(true)
+                                    changeAddress(address)
+                                }}
+                            />
+                        </div>
                     </div>
                 </div>
 
                 <div className='other-address'>
                     {otherAddress.map(address => {
                         return (
-                            <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>
-                                </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}}
-                                            onClick={()=>{
-                                                changePage(true)
-                                                changeAddress(address)
-                                            }}
-                                        />
-                                    </Col>
-                                </Row>
+                            <div key={address.id} className='address-card'>
+                                <div className='address-info' 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>
+                                    </Row>
+                                    <Row>
+                                        <Col span={24} className='address-address'>{address.province + address.city + address.area + address.address}</Col>
+                                    </Row>
+                                </div>
+                                <div className='address-edit'>
+                                    <Icon
+                                        type="edit"
+                                        style={{fontSize: 14}}
+                                        onClick={()=>{
+                                            changePage(true)
+                                            changeAddress(address)
+                                        }}
+                                    />
+                                </div>
                             </div>
                         )
                     })}

src/pages/my/tools/index.js

@@ -16,7 +16,7 @@ class Tools extends Component {
         if (location && location.state) {
             this.props.history.push({
                 pathname: '/my/tools/' + location.state.page,
-                state: {}
+                state: location.state
             })
         }
     }