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

src/case/ShopApp/src/App.css

@@ -37,7 +37,7 @@ p.p1,p.p2,p.p3{
     margin-top: 45px;
     background: #ffffff;
     /*border: 2px solid red;*/
-    height: 100%;
+    height: 430px;
     overflow: auto
 }
 

src/case/ShopApp/src/App.js

@@ -27,10 +27,12 @@ class ShopApp extends Component {
       page:'index',
       product_id:'',
       num:1,
-      editAddress:false
+      editAddress:false,
+      fromShopCar:false
     }
     this.changePage=this.changePage.bind(this)
     this.triggerAddress=this.triggerAddress.bind(this)
+    this.setFromShopCar=this.setFromShopCar.bind(this)
   }
 
   componentWillMount(){
@@ -63,17 +65,18 @@ class ShopApp extends Component {
   }
 
   //传递给子组件的更改state的函数
-  triggerAddress(show){
-    this.setState({
-      editAddress:show
-    })
+  triggerAddress(editAddress){
+    this.setState({editAddress})
   }
 
   setNum(num){
-    console.log('num',num)
     this.setState({num})
   }
 
+  setFromShopCar(fromShopCar){
+    this.setState({fromShopCar})
+  }
+
   //根据条件渲染页面
   renderPage(page=""){
     console.log('renderPage',page)
@@ -90,7 +93,7 @@ class ShopApp extends Component {
       case('order'):
         return(
           <div className="pageWrap">
-            <OrderPage product={this.getProductByIds()} num={this.state.num}/>
+            <OrderPage />
           </div>
           )
   
@@ -153,9 +156,13 @@ class ShopApp extends Component {
   render() {
     const changePage=this.changePage
     const triggerAddress=this.triggerAddress
-    console.log('APPrender')
+    const fromShopCar=this.state.fromShopCar
+    const setFromShopCar=this.setFromShopCar
+    const getProductByIds=this.getProductByIds()
+    const num=this.state.num
+    //console.log('APPrender')
     return (
-      <PageContext.Provider value={{changePage,triggerAddress}}>
+      <PageContext.Provider value={{changePage,triggerAddress,getProductByIds,num,fromShopCar,setFromShopCar}}>
           <div className="AppWrap">
             <div className="phone6s">
               <div className="App">

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

@@ -3,25 +3,54 @@ 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
+    //console.log(this.props)
+    const product = this.props.product 
+    console.log('product',product)
+    if(product.product_id){
+        return (
+            <WingBlank size="lg">
+                <WhiteSpace size="lg" />
+                    <Card>
+                        <Card.Body>
+                            <div className="cardWrap">
+                                <img src={product.product_id.img} alt="img" width="100px" height="100px"/>
+                                <div className="middle">
+                                    <div>{product.product_id.name}</div>
+                                    <div>{product.product_id.intro}</div>
+                                </div>
+                                <div className="right">
+                                    <div>￥{product.product_id.price}</div>
+                                    <div>x {product.count}
+                                </div>
+                                </div>
+                            </div>
+                        </Card.Body>
+                    </Card>
+                <WhiteSpace size="lg" />
+          </WingBlank>
+        )
+    }else{
+        return (
+            <WingBlank size="lg">
+                <WhiteSpace size="lg" />
+                    <Card>
+                        <Card.Body>
+                            <div className="cardWrap">
+                                <img src={product.img} alt="img" width="100px" height="100px"/>
+                                <div className="middle">
+                                    <div>{product.name}</div>
+                                    <div>{product.intro}</div>
+                                </div>
+                                <div className="right">
+                                    <div>￥{product.price}</div>
+                                </div>
+                            </div>
+                        </Card.Body>
+                    </Card>
+                <WhiteSpace size="lg" />
+          </WingBlank>
+        )
+    }
     
-    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.jsx

@@ -10,8 +10,11 @@ import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
 import {getAddressByProps} from '../../api/graphql/address'
 import {createOrders,createOrderProducts} from '../../api/graphql/order'
+import {getShopCarByProps,deleteCarByProps} from '../../api/graphql/shopCar'
 
+import {successToast,failToast} from '../Toast/Toast'
 import './OrederPage.css'
+import { concatSeries } from 'async';
 
 class OrderPage extends React.Component{
     constructor(props){
@@ -20,13 +23,16 @@ class OrderPage extends React.Component{
         this.state={
             num:props.num,
             address:{},
-            product:{}
+            products:[],
+            shopCarList:[],
+            sumPrice:''
         }
         //this.toPay=this.toPay.bind(this)
         this.createOrder=this.createOrder.bind(this)
         
     }
-    //获取默认地址
+    //获取数据
+    ///获取默认地址
     getAddress(){
         let user_id=sessionStorage.getItem('openid')
         console.log('user_id',user_id)
@@ -39,10 +45,40 @@ class OrderPage extends React.Component{
 
     componentDidMount(){
         this.getAddress()
-        this.props.product.then((e)=>{
-            //console.log(e.productbyid)
+        if(this.props.fromShopCar){
+            this.getCarByProps()
+        }else{
+            this.props.getProductByIds.then((e)=>{
+                console.log('getProductByIds',e.productbyid)
+                this.setState({
+                    products:[e.productbyid],
+                    sumPrice:this.props.num*e.productbyid.price
+                })
+            })
+        }
+    }
+
+    componentWillUnmount(){
+        this.props.setFromShopCar(false)
+    }
+
+    getCarByProps(){
+        const user_id=sessionStorage.getItem('openid')
+        graphqls(getShopCarByProps,{user_id}).then((response)=>{
+            let sumPrice=0,num=0;
+            //如果請求失敗,默认空数组
+            
+            (response.userCartbyprops||[]).map((item)=>{
+                sumPrice+=item.count*item.product_id.price
+                num+=item.count
+                return 1
+            })
+            // console.log('sumPrice',sumPrice,'shopCarCount',shopCarCount)
+            // console.log('getShopCarByProps',response.userCartbyprops)
             this.setState({
-                product:e.productbyid
+                shopCarList:response.userCartbyprops,
+                sumPrice,
+                num
             })
         })
     }
@@ -80,12 +116,13 @@ class OrderPage extends React.Component{
          graphqls(createOrders,orderData).then((e) => {
             console.log('order创建订单成功', e)
             that.createProductOrder(id)
+            
          })
 
     }
 
     createProductOrder(order_id){
-        
+
         let that=this,openid=sessionStorage.getItem('openid')
         let data={
             "count": that.state.num,
@@ -102,36 +139,47 @@ class OrderPage extends React.Component{
         }
         graphqls(createOrderProducts,data).then((e)=>{
             console.log('orderProduct创建成功',e)
+            successToast('创建订单成功',1)
+            that.props.changePage('orderCenter')
         })
     }
 
-    toPay(){
-        this.createOrder()
+    // toPay(){
+    //     this.createOrder()
+    // }
+    renderCardList(){
+        if(this.props.fromShopCar){
+            return(
+                this.state.shopCarList.map((item)=>{
+                    return(<OrderCard product={item} key={item.id}/>)
+                })
+            )
+        }else{
+            return(
+                this.state.products.map((item)=>{
+                    return(<OrderCard product={item} key={item.id}/>)
+                })
+            )
+        }
     }
+
     render(){
         const address=this.state.address
         const product=this.state.product
         const num =this.state.num
         return(
             <div className="orderWrap">
-                <PageContext.Consumer>
-                    {({changePage,triggerAddress})=>{
-                        return(
-                            <div className="addressWrap" onClick={()=>{
-                                changePage('addressPage')
-                                triggerAddress(true)
-                            }}>
-                                <span></span>
-                                <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
-                                <span></span>
-                            </div>
-                        )
-                    }}
-                </PageContext.Consumer>
-                
-                <OrderCard state={{...this.state}}/>
+                <div className="addressWrap" onClick={()=>{
+                    this.props.changePage('addressPage')
+                    this.props.triggerAddress(true)
+                }}>
+                    <span></span>
+                    <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
+                    <span></span>
+                </div>
+                <div className="cardList">{this.renderCardList()}</div>
                 <div className="payResult">
-                    <div>共计{num}件商品;合计 ￥ {num*product.price}</div>
+                    <div>共计{num}件商品;合计 ￥ {this.state.sumPrice}</div>
                     <div onClick={this.createOrder}>立即支付</div>
                 </div>
             </div>
@@ -139,5 +187,9 @@ class OrderPage extends React.Component{
     }
 }
 
-export default OrderPage
+export default props => (
+    <PageContext.Consumer>
+      {(obj)=> <OrderPage {...props} {...obj}/>}
+    </PageContext.Consumer>
+);
 

src/case/ShopApp/src/components/ShopCarPage/ShopCarCard.jsx

@@ -1,22 +1,8 @@
 import React, { Component } from 'react'
 import { Card, WhiteSpace } from 'antd-mobile';
 import './ShopCarCard.css'
-import {graphqls} from '../../api/graphql_request'
-import {deleteCarByProps} from '../../api/graphql/shopCar'
 
 export default class ShopCarCard extends Component {
-  constructor(){
-    super()
-    this.deleteCarById=this.deleteCarById.bind(this)
-  }
-  //删除购物车
-  deleteCarById(id){
-    console.log(id)
-    graphqls(deleteCarByProps,{id}).then((e)=>{
-      console.log(e)
-      this.props.getCarByProps()
-    })
-  }
   render() {
     const car=this.props.car
     return (
@@ -33,7 +19,7 @@ export default class ShopCarCard extends Component {
                 <div className="right">
                   <div>￥{car.product_id.price}</div>
                   <div>x {car.count}</div>
-                 <button onClick={()=>{this.deleteCarById(car.id)}}>刪除</button>
+                 <button onClick={()=>{this.props.deleteCarById(car.id)}}>刪除</button>
                 </div>
               </div>
             </Card.Body>

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.jsx

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import ShopCarCard from './ShopCarCard'
+import {PageContext} from '../../context/context'
 
 import './ShopCarPage.css'
 import {graphqls} from '../../api/graphql_request'
-import {getShopCarByProps} from '../../api/graphql/shopCar'
+import {getShopCarByProps,deleteCarByProps,} from '../../api/graphql/shopCar'
 
 class ShopCarPage extends Component{
     constructor(props){
@@ -14,6 +15,7 @@ class ShopCarPage extends Component{
             shopCarCount:0
         }
         this.renderShopCarList=this.renderShopCarList.bind(this)
+        this.deleteCarById=this.deleteCarById.bind(this)
     }
 
     componentDidMount(){
@@ -24,7 +26,7 @@ class ShopCarPage extends Component{
         const user_id=sessionStorage.getItem('openid')
         graphqls(getShopCarByProps,{user_id}).then((response)=>{
             let sumPrice=0,shopCarCount=0;
-            //請求失敗,默认空数组
+            //如果請求失敗,默认空数组
             
             (response.userCartbyprops||[]).map((item)=>{
                 sumPrice+=item.count*item.product_id.price
@@ -32,7 +34,6 @@ class ShopCarPage extends Component{
                 return 1
             })
             // console.log('sumPrice',sumPrice,'shopCarCount',shopCarCount)
-
             // console.log('getShopCarByProps',response.userCartbyprops)
             this.setState({
                 shopCarList:response.userCartbyprops,
@@ -42,9 +43,18 @@ class ShopCarPage extends Component{
         })
     }
 
+    //删除购物车
+    deleteCarById(id){
+        //console.log(id)
+        graphqls(deleteCarByProps,{id}).then((e)=>{
+        //console.log(e)
+            this.getCarByProps()
+        })
+  }
+
     renderShopCarList(){
         return this.state.shopCarList.map((item,index)=>{
-            return <ShopCarCard car={item} key={index} getCarByProps={this.getCarByProps.bind(this)}/>
+            return <ShopCarCard car={item} key={index} deleteCarById={this.deleteCarById}/>
         })
     }
     
@@ -56,15 +66,21 @@ class ShopCarPage extends Component{
                 </div>
                 <div className="footer">
                     <div className="message">合计: ￥{this.state.sumPrice}</div>
-                    <button className="toPay">去支付</button>
+                    <button 
+                    className="toPay" 
+                    onClick={()=>{
+                        this.props.changePage('order')
+                        this.props.setFromShopCar(true)
+                    }}
+                    >去支付</button>
                 </div>
             </div>
         )
     }
 }
 
-
-
-
-
-export default ShopCarPage
+export default props => (
+    <PageContext.Consumer>
+      {(obj)=> <ShopCarPage {...props} {...obj}/>}
+    </PageContext.Consumer>
+);