add function 从shopCar创建订单成功后删除购物车

src/case/ShopApp/src/App.css

@@ -47,5 +47,9 @@ p.p1,p.p2,p.p3{
     z-index: 4;
 }
 
+div.am-modal-wrap {
+    margin-left: 200px;
+}
+
 
 

src/case/ShopApp/src/App.js

@@ -81,7 +81,7 @@ class ShopApp extends Component {
   renderPage(page=""){
     console.log('renderPage',page)
     const setNum=this.setNum.bind(this)
-
+    
     switch(page){
       case ('detail'):
         return(

src/case/ShopApp/src/api/graphql/address.js

@@ -41,4 +41,22 @@ export const createAddress=`mutation createuserAddress($address: String, $update
         }
         area
         province
+    }`
+
+    export const updateAddress=`mutation updateuserAddress($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) {
+        updateuserAddress: update_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) {
+            address
+            updatedAt
+            telephone
+            default
+            city
+            username
+            postcode
+            createdAt
+            deletedAt
+            id
+            area
+            province
+        }
     }`

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

@@ -1,19 +1,25 @@
 import React, { Component } from 'react'
 import RadioAddress from './RadioAddress'
 import EditAddress from './EditAddress'
+import { List } from 'antd-mobile';
 import './AddressPage.css'
 
 import {graphqls} from '../../api/graphql_request'
 import {getAddressByProps} from '../../api/graphql/address'
 
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
 export default class AddressPage extends Component {
   constructor(props){
       super(props)
       this.state={
         addressList:[]
       }
-
     console.log(props.address)
+
+    this.getAddress=this.getAddress.bind(this)
   }
 
   componentDidMount(){
@@ -36,13 +42,17 @@ export default class AddressPage extends Component {
     }else{
       return(
         <div className="addressPageWrap">
-          <div className="addressWrap" onClick={()=>this.props.address.triggerAddress(true)}>
-            <span></span>
-            <span>新建地址</span>
-            <span></span>
+          <div  onClick={()=>this.props.address.triggerAddress(true)}>
+          <List>
+            <Item
+              thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg"
+              arrow="horizontal"
+              onClick={() => {}}
+            >+新建地址</Item>
+          </List>
           </div>
           <div className="addressList">
-              <RadioAddress addressList={this.state.addressList} />
+              <RadioAddress addressList={this.state.addressList} getAddress={this.getAddress}/>
           </div>
         </div>
       )

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

@@ -1,32 +1,70 @@
 import React, { Component } from 'react';
-import { List, Radio, Flex, WhiteSpace } from 'antd-mobile';
+import { List } from 'antd-mobile';
+
 import './RadioAddress.css'
 
-const RadioItem = Radio.RadioItem;
+
+
+
+
+
+
+
+import {graphqls} from '../../api/graphql_request'
+import {updateAddress,getAddressByProps} from '../../api/graphql/address'
+
+
+
+const Item = List.Item;
+const Brief = Item.Brief;
 
 
 
 
 export default class RadioAddress extends Component{
+
+  onChange = (id) => {
+    console.log('id:',id)
+    this.updateAddress(id)
+  };
+
+  updateAddress=(id)=>{
+    let that=this
+    console.log('更新启动')
+    let user_id=sessionStorage.getItem('openid')
+    let data={id,default:1}
     
-      onChange = (value) => {
-        console.log('checkbox');
-        this.setState({
-         
-        });
-      };
-    
-      render() {
-        let addressList=[...this.props.addressList]   
-        return (<div>
-          <List renderHeader={() => ''}>
-            {addressList.map(item => (
-              <RadioItem key={item.id} checked={item.default === 1} onChange={() => this.onChange()}>
-                {item.address}
-              </RadioItem>
-            ))}
-          </List>
-
-        </div>);
-      }
+    graphqls(updateAddress,data).then((e)=>{
+      //更新address成功之後，重新獲取地址列表,
+      graphqls(getAddressByProps,{user_id}).then((res)=>{
+        console.log(res.userAddressbyprops)
+        res.userAddressbyprops.map((item)=>{
+          if(item.id!==id){
+            let data={id:item.id,default:0}
+            graphqls(updateAddress,data).then(e=>that.props.getAddress())
+          }
+          return 0
+        })
+     })
+    })
+  }
+
+  render() {
+    let addressList=[...this.props.addressList]   
+    return (
+      <div>
+        <List renderHeader={() => ''}>
+          {addressList.map(item => (
+            <List  key={item.id} onClick={()=>this.onChange(item.id)}>
+              <Item
+                thumb={item.default===1 ? "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png" : ''}
+                arrow="horizontal"
+                onClick={() => {}}
+              >{item.username+item.telephone+item.province+item.city+item.area+item.address}</Item>
+            </List>
+          ))}
+        </List>
+      </div>
+    );
+  }
 }

src/case/ShopApp/src/components/Common/Alert.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+
+const alert = Modal.alert;
+
+export const dialog =(type,message)=>{
+    return new Promise((resolve,reject)=>{
+        alert(type, message, [
+            { text: '取消', onPress: () => {reject.call(null,0)}},
+            { text: '确认', onPress: () => {resolve.call(null,1)} },
+          ])
+    })
+}
+
+

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

@@ -12,10 +12,15 @@ 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 {successToast,failToast} from '../Common/Toast'
+import {dialog} from '../Common/Alert'
 import './OrederPage.css'
 import { concatSeries } from 'async';
 
+import { List } from 'antd-mobile';
+const Item = List.Item;
+const Brief = Item.Brief;
+
 class OrderPage extends React.Component{
     constructor(props){
         super(props)
@@ -29,6 +34,7 @@ class OrderPage extends React.Component{
         }
         //this.toPay=this.toPay.bind(this)
         this.createOrder=this.createOrder.bind(this)
+        this.toPay=this.toPay.bind(this)
         
     }
     //获取数据
@@ -67,7 +73,6 @@ class OrderPage extends React.Component{
         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
@@ -83,56 +88,98 @@ class OrderPage extends React.Component{
         })
     }
 
-    
+    deleteCarById(id){
+        //console.log(id)
+        graphqls(deleteCarByProps,{id}).then((e)=>{
+            console.log('删除了shopcar',e)
+        })
+    }
 
-    createOrder(){
+    deleteAllShopCar(){
+        const shopcarList=this.state.shopCarList||[],that=this;
+        shopcarList.map((item)=>{
+            that.deleteCarById(item.id)
+            return 0
+        })
+    }
+
+    
+    toCreateOrder(status){
+        const payTime=new Date().toLocaleString('chinese', { hour12: false })
+        this.createOrder(status,payTime) 
+       
+        console.log('status',status)
+    }
+    createOrder(orderStatus,payTime){
         console.log('創造order')
-        let that =this,
-        orderStatus=1,
-        sumPrice=this.state.num*this.state.product.price,
-        payTime="2019/12/31 12:30:56"
+        console.log('this.state',this.state)
+        let that =this
         //{orderStatus,payTime}=data
 
         let id=new Date().getTime()+parseInt(Math.random(),10),
            openid=sessionStorage.getItem('openid')
         let orderData = {
             "count": that.state.num,
-            "createdAt": new Date().toLocaleDateString()+' '+new Date().toLocaleTimeString().slice(2),
+            "createdAt": new Date().toLocaleString('chinese', { hour12: false }),
             "deliveryTime": "",
             "id": id,
             "orderLogistics_id": "",
             "orderPay_id": "",
             "orderShipFee": 0,
             "orderStatus": orderStatus,
-            "orderTotalPay": sumPrice,
+            "orderTotalPay": this.state.sumPrice,//-优惠
             "payTime": payTime,
-            "productTotalPay": sumPrice,
+            "productTotalPay": this.state.sumPrice,
             "updatedAt": "",
             "userAddress_id": that.state.address.id,
             "user_id": openid
           }
 
-
+        const fromShopCar= this.props.fromShopCar
          graphqls(createOrders,orderData).then((e) => {
             console.log('order创建订单成功', e)
-            that.createProductOrder(id)
-            
+            that.deleteAllShopCar()
+            let products=that.state.products||[]
+            let shopCarList=that.state.shopCarList||[]
+            //从购物车页面跳转而来(多个产品)
+            if(fromShopCar){
+                console.log('来自shopcar')
+                //console.log('shopList----',shopCarList)
+                let i=1
+                shopCarList.map((item)=>{
+                    console.log(item)
+                    that.createProductOrder(id,item.count,item.product_id)
+                    i++;
+                    if(i===shopCarList.length){
+                        //订单创建成功，删除购物车里面的所有产品
+                       that.deleteAllShopCar() 
+                    }
+                    return 0
+                })
+            }else{//从产品详情页面跳转而来(一个产品)
+                console.log('来自detail')
+                products.map((item)=>{
+                    that.createProductOrder(id,that.state.num,item)
+                    return 0
+                })
+                
+            }
          })
 
     }
 
-    createProductOrder(order_id){
-
+    createProductOrder(order_id,count,product){
+        console.log('product-----------',product)
         let that=this,openid=sessionStorage.getItem('openid')
         let data={
-            "count": that.state.num,
-            "createdAt": new Date().toLocaleDateString()+' '+new Date().toLocaleTimeString().slice(2),
+            "count": count,
+            "createdAt": new Date().toLocaleString('chinese', { hour12: false }),
             "id": new Date().getTime()+parseInt(Math.random(),10),
             "orderPay": 0,
             "order_id": order_id,
-            "productPay": that.state.product.price * that.state.num,
-            "product_id": that.state.product.id,
-            "remark": that.state.remark,
+            "productPay": product.price * count,
+            "product_id": product.id,
+            "remark": "that.state.remark",
             "unit": "100",
             "updatedAt": "",
             "user_id": openid
@@ -144,9 +191,18 @@ class OrderPage extends React.Component{
         })
     }
 
-    // toPay(){
-    //     this.createOrder()
-    // }
+    toPay(){
+        dialog('￥'+this.state.sumPrice,'确认支付吗?').then(
+            (e)=>{
+                //console.log('ok ',e)
+                this.toCreateOrder(1)
+            },(e)=>{
+                //console.log('fail ',e)
+                this.toCreateOrder(0)
+            })
+    }
+
+
     renderCardList(){
         if(this.props.fromShopCar){
             return(
@@ -165,22 +221,27 @@ class OrderPage extends React.Component{
 
     render(){
         const address=this.state.address
-        const product=this.state.product
         const num =this.state.num
         return(
             <div className="orderWrap">
-                <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 className="addressWrap">
+                    <List>
+                        <Item
+                        thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg"
+                        arrow="horizontal"
+                        wrap
+                        multipleLine
+                        onClick={() => {
+                            this.props.changePage('addressPage')
+                            this.props.triggerAddress(true)
+                        }}
+                        >{address.username+address.telephone+address.province+address.city+address.area+address.address}</Item>
+                    </List>
                 </div>
                 <div className="cardList">{this.renderCardList()}</div>
                 <div className="payResult">
                     <div>共计{num}件商品;合计 ￥ {this.state.sumPrice}</div>
-                    <div onClick={this.createOrder}>立即支付</div>
+                    <div onClick={this.toPay}>立即支付</div>
                 </div>
             </div>
             )

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

@@ -16,6 +16,7 @@ class ShopCarPage extends Component{
         }
         this.renderShopCarList=this.renderShopCarList.bind(this)
         this.deleteCarById=this.deleteCarById.bind(this)
+        //this.deleteAllShopCar=this.deleteAllShopCar.bind(this)
     }
 
     componentDidMount(){
@@ -50,7 +51,9 @@ class ShopCarPage extends Component{
         //console.log(e)
             this.getCarByProps()
         })
-  }
+    }
+
+    
 
     renderShopCarList(){
         return this.state.shopCarList.map((item,index)=>{
@@ -71,6 +74,7 @@ class ShopCarPage extends Component{
                     onClick={()=>{
                         this.props.changePage('order')
                         this.props.setFromShopCar(true)
+                        //this.deleteAllShopCar()
                     }}
                     >去支付</button>
                 </div>