add AddressPage and achieve

src/case/ShopApp/src/App.js

@@ -137,8 +137,6 @@ class ShopApp extends Component {
     }
   }
 
-
-
   console(page){
     this.console.log(page)
   }

src/case/ShopApp/src/components/AddressPage/AddressPage.jsx

@@ -1,10 +1,43 @@
 import React, { Component } from 'react'
+import RadioAddress from './RadioAddress'
+
+import {graphqls} from '../../api/graphql_request'
+import {getAddressByProps} from '../../api/graphql/address'
 
 export default class AddressPage extends Component {
+  constructor(props){
+      super(props)
+      this.state={
+        address:[]
+      }
+  }
+
+  componentDidMount(){
+    this.getAddress()
+  }
+
+  getAddress(){
+    let user_id=sessionStorage.getItem('openid')  
+    graphqls(getAddressByProps,{user_id}).then((res)=>{
+        console.log(res.userAddressbyprops)
+        this.setState({
+            address:res.userAddressbyprops
+        })
+    })
+  }
+
+
   render() {
     return (
       <div>
-        addresspage
+        <div className="addressWrap">
+            <span></span>
+            <span>新建地址</span>
+            <span></span>
+        </div>
+        <div className="addressList">
+            <RadioAddress address={this.state.address} />
+        </div>
       </div>
     )
   }

src/case/ShopApp/src/components/AddressPage/RadioAddress.css

@@ -0,0 +1,6 @@
+.my-radio .am-radio {
+    padding: 2.5px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    margin-right: 5px;
+  }

src/case/ShopApp/src/components/AddressPage/RadioAddress.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { List, Radio, Flex, WhiteSpace } from 'antd-mobile';
+import './RadioAddress.css'
+
+const RadioItem = Radio.RadioItem;
+
+
+
+
+export default class RadioAddress extends Component{
+    
+      onChange = (value) => {
+        console.log('checkbox');
+        this.setState({
+         
+        });
+      };
+    
+      render() {
+        let address=this.props.address    
+        return (<div>
+          <List renderHeader={() => ''}>
+            {address.map(item => (
+              <RadioItem key={item.id} checked={item.default === 1} onChange={() => this.onChange()}>
+                {item.address}
+              </RadioItem>
+            ))}
+          </List>
+
+        </div>);
+      }
+}

src/case/ShopApp/src/components/OrderCenterPage/OrderCard.jsx

@@ -9,7 +9,7 @@ export default class OrderCard extends Component {
   }
   render() {
     const order=this.props.order||[]
-    console.log('这里是orderCard')
+    //console.log('这里是orderCard',this.props.order)
     return (
       <div>
         <WingBlank size="lg">
@@ -20,12 +20,15 @@ export default class OrderCard extends Component {
                     extra={<span>支付状态:{order.orderStatus==='0'?'未支付':'已支付'}</span>}
                     />
                     <Card.Body>
+                    {/*循环渲染然一个订单内的所有产品列表*/}
                     <div className="OrderProductList">
                         {
-                            (order.orderProducts||[]).map((item)=>{
-                                return (<ProductCard key={item.id} />)
+                            (order.orderProducts||[]).map((item,index)=>{
+                                console.log(index,item)
+                                return (<ProductCard key={item.id} orderProduct={item}/>)
                             })
                         }
+
                     </div>
                     </Card.Body>
                     <Card.Footer content="" extra={<div>{order.orderStatus==='0'?<button onClick={this.toPay.bind(this)}>去支付</button>:''}</div>} />

src/case/ShopApp/src/components/OrderCenterPage/OrderCenterPage.jsx

@@ -22,7 +22,7 @@ export default class OrderCenterPage extends Component {
     let user_id=sessionStorage.getItem('openid')
     graphqls(getOrderByProps,{user_id}).then((res)=>{
         //console.log(res.orderbyprops)
-        let orderArr=res.orderbyprops
+        let orderArr=res.orderbyprops||[]
         for(let i=0;i<orderArr.length;i++){
             //根据order_id获取订单产品信息,可以优化,可以只发出一次请求获取所有订单产品信息之后再经行处理
             graphqls(getProductByProps,{order_id:orderArr[i].id}).then((res)=>{
@@ -31,7 +31,7 @@ export default class OrderCenterPage extends Component {
                 orderArr[i].orderProducts=res.orderProductbyprops
 
                 if(i===orderArr.length-1){
-                    console.log('----order-----',orderArr)
+                    //console.log('----orderList-----',orderArr)
                     this.setState({
                         orderList:orderArr
                     })
@@ -48,7 +48,8 @@ export default class OrderCenterPage extends Component {
       <div className="headTitle">订单列表</div>
        <div className="orderList">
         {
-            orderList.map((item)=>{
+            orderList.map((item,index)=>{
+                console.log(index,item)
                 return(<OrderCard order={item} key={item.id}/>)
             })
         }

src/case/ShopApp/src/components/OrderCenterPage/ProductCard.jsx

@@ -6,21 +6,26 @@ import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
 export default class ProductCard extends Component {
   render() {
     //console.log('productCard------------',this.props)
-    console.log('这里是productCard')
+    //console.log('这里是productCard')
+    const orderProduct=this.props.orderProduct
     return (
       <div>
         <WingBlank size="lg">
             <WhiteSpace size="lg" />
                 <Card>
-                    <Card.Header
-                    title="This is title"
-                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
-                    extra={<span>this is extra</span>}
-                    />
                     <Card.Body>
-                    <div>This is content of `Card`</div>
+                        <div className="cardWrap">
+                            <img src={orderProduct.product_id.img} alt="img" width="100px" height="100px"/>
+                            <div className="middle">
+                                <div>{orderProduct.product_id.name}</div>
+                                <div>{orderProduct.product_id.intro}</div>
+                            </div>
+                            <div className="right">
+                                <div>￥{orderProduct.product_id.price}</div>
+                                <div>x {orderProduct.count}</div>
+                            </div>
+                        </div>
                     </Card.Body>
-                    <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
                 </Card>
             <WhiteSpace size="lg" />
         </WingBlank>

src/case/ShopApp/src/components/OrderPage/Address.jsx

@@ -1,2 +0,0 @@
-import React, { Component } from 'react';
-

src/case/ShopApp/src/components/OrderPage/OrederPage.css

@@ -19,6 +19,7 @@ div.addressWrap{
 
 .addressWrap span:nth-child(2){
     flex-grow: 1;
+    text-align: center;
 }
 .addressWrap span:nth-child(3){
     flex-basis: 16px;

src/case/ShopApp/src/components/OrderPage/OrederPage.jsx

@@ -47,9 +47,9 @@ class OrderPage extends React.Component{
         return(
             <div className="orderWrap">
                 <div className="addressWrap">
-                <span></span>
-                <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
-                <span></span>
+                    <span></span>
+                    <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
+                    <span></span>
                 </div>
                 <OrderCard state={{...this.state}}/>
                 <div className="payResult">