Merge branch 'master' of http://gogs.ioobot.com:6680/xy/online

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

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+
+export default class OrderCard extends Component {
+  render() {
+      console.log(this.props)
+    const product =this.props.state.product
+    const num=this.props.state.num
+    
+    return (
+        <WingBlank size="lg">
+            <WhiteSpace size="lg" />
+                <Card>
+                    <Card.Header
+                        title={product.name}
+                        extra={<span>￥ {product.price} x {num}</span>}
+                    />
+                    <Card.Body>
+                        <div><img src={product.img} alt="img" width="100" height="100"></img></div>
+                    </Card.Body>
+                    <Card.Footer content={<span>总计 {num} 件商品</span>} extra={<div>合计:￥ {num*product.price}</div>} />
+                </Card>
+            <WhiteSpace size="lg" />
+      </WingBlank>
+    )
+  }
+}

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

@@ -0,0 +1,48 @@
+*{
+    font-size: 12px;
+}
+.addressWrap{
+    font-size: 10px;
+    display: flex;
+    padding: 5px 2px;
+    border-bottom: 1px solid #ccc;
+}
+
+.addressWrap span{
+    padding: 8px;
+}
+.addressWrap span:nth-child(1){
+    flex-basis: 16px;
+    background: url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg") no-repeat center center;
+}
+
+.addressWrap span:nth-child(2){
+    flex-grow: 1;
+}
+.addressWrap span:nth-child(3){
+    flex-basis: 16px;
+    background: url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/right.svg") no-repeat center center;
+}
+.payResult{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    overflow: hidden;
+    
+}
+
+.payResult div:nth-child(1){
+    flex-basis: 200px;
+    padding: 15px 0px;
+    text-align: center;
+    background: #f7eb91;
+}
+.payResult div:nth-child(2){
+    flex-grow: 1;
+    background: red;
+    color:#fff;
+    padding: 15px 0px;
+    text-align: center;
+}

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

@@ -1,19 +1,25 @@
 import React from 'react'
+import { Icon, Grid } from 'antd-mobile';
 import {PageContext} from '../../context/context'
+import OrderCard from './OrderCard'
 
 import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
 import {getAddressByProps} from '../../api/graphql/address'
 
+import './OrederPage.css'
+
 class OrderPage extends React.Component{
     constructor(props){
         super(props)
+        //console.log('props1111',this.props)
         this.state={
+            num:props.num,
             address:{},
             product:{}
         }
     }
-
+    //获取默认地址
     getAddress(){
         let user_id=sessionStorage.getItem('openid')
         console.log('user_id',user_id)
@@ -24,7 +30,7 @@ class OrderPage extends React.Component{
         })
     }
 
-    componentWillMount(){
+    componentDidMount(){
         this.getAddress()
         this.props.product.then((e)=>{
             //console.log(e.productbyid)
@@ -35,13 +41,25 @@ class OrderPage extends React.Component{
     }
     
     render(){
-        console.log('props',this.props)
+        const address=this.state.address
+        const product=this.state.product
+        const num =this.state.num
         return(
             <div className="orderWrap">
-                {this.state.address.address}
+                <div className="addressWrap">
+                <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">
+                    <div>共计{num}件商品;合计 ￥ {num*product.price}</div>
+                    <div>立即支付</div>
+                </div>
             </div>
             )
     }
 }
 
-export default OrderPage
+export default OrderPage
+