添加微信支付、目前订单状态由前端更新后续修改

src/pages/cart/orders/index.js

@@ -161,7 +161,8 @@ class CartOrders extends Component {
         })
 
         Promise.all([createOrder, createOrderProduct]).then((data)=> {
-            console.log('onSubmitOrderAndProduct data',data);
+            console.log('onSubmitOrderAndProduct data',data)
+            sessionStorage.setItem('payOrder',JSON.stringify(orderContent))
             if(type === 'cartSelected'){
                 let cartCount = JSON.parse(localStorage.getItem("cartCount")) - totalCount
                 localStorage.setItem("cartCount",JSON.stringify(cartCount))

src/pages/cart/pay/index.js

@@ -1,16 +1,23 @@
 import React, {Component} from 'react'
 import {withRouter} from 'react-router-dom'
+import {message} from 'antd'
 import {NavBar, Icon, Checkbox, Toast} from 'antd-mobile'
 import classNames from 'classnames'
+import axios from 'axios'
+import {Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import moment from 'moment'
 
+import {update_order} from "../../../utils/gql"
 import './index.css'
 
+let clicktag = 1;  //微信发起支付点击标志
 class Pay extends Component {
     constructor(props) {
         super(props)
         this.state = {
             checked:true,
-            totalPrice:JSON.parse(sessionStorage.getItem('totalPrice')),
+            payOrder: JSON.parse(sessionStorage.getItem('payOrder'))
         }
     }
 
@@ -27,8 +34,81 @@ class Pay extends Component {
         })
     }
 
+    // prepay_id微信生成的预支付会话标识，用于后续接口调用中使用，该值有效期为2小时
+    jsApiPay = (args,id,update_order) => {
+        // console.log('jsApiPay params', args);
+        let $this = this
+        function onBridgeReady() {
+            window.WeixinJSBridge.invoke(
+                'getBrandWCPayRequest', args,
+                function (res) {
+                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。
+                    if (res.err_msg === "get_brand_wcpay_request:ok") {
+                        // 成功完成支付
+                        message.success('支付成功，等待发货')
+                        let updatedAt = moment().format('YYYY-MM-DD HH:mm:ss')
+                        const updateContent = {
+                            id,
+                            orderStatus: 1,
+                            updatedAt
+                        }
+                        update_order({variables:updateContent})
+                        $this.props.history.push({
+                            pathname:'/my'
+                        })
+                    }
+                    else {
+                        if(res.err_msg === "get_brand_wcpay_request:cancel"){
+                            message.warning('您的支付已经取消')
+                        }else if(res.err_msg === "get_brand_wcpay_request:fail"){
+                            message.error('支付失败，请稍后重试')
+                        }else{
+                            message.error('支付失败，请稍后重试')
+                        }
+                    }
+                }
+            );
+        }
+        if (typeof window.WeixinJSBridge === "undefined"){
+            if( document.addEventListener ){
+                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
+            }else if (document.attachEvent){
+                document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
+                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
+            }
+        }else{
+            onBridgeReady()
+        }
+    }
+
+    getBridgeReady = (update_order,id,needPay) => {
+        console.log('getBridgeReady params',id,needPay)
+        if(clicktag === 1) {
+            clicktag = 0   //进行标志，防止多次点击
+
+            let $this = this
+            axios.get('/payinfo', {
+                    params: {
+                        needPay:parseInt(needPay * 100,10),
+                        openid: $this.props.openid,
+                        tradeNo:id
+                    }
+                })
+                .then((res) =>{
+                    console.log('onBridgeReady res',res)
+                    $this.jsApiPay(res,id,update_order)
+                    setTimeout(()=> {clicktag = 1}, 5000)
+                })
+                .catch((error) => {
+                    message.warning('网络或系统故障，请稍后重试')
+                    console.log('onBridgeReady error',error)
+                })
+        }
+    }
+
     render() {
-        let {checked,totalPrice} = this.state
+        let {checked, payOrder} = this.state
+        let {id, orderTotalPay} = payOrder
         return (
             <div className='pay-wrap'>
                 <div className='pay-navbar-wrap navbar'>
@@ -42,7 +122,7 @@ class Pay extends Component {
                 <div className='pay-content-wrap content-wrap'>
                     <div className='pay-content-price'>
                         <p>订单金额:</p>
-                        <p>￥: {totalPrice}</p>
+                        <p>￥: {orderTotalPay}</p>
                     </div>
                     <div className='pay-content-type'>
                         <p>请选择支付方式</p>
@@ -56,18 +136,25 @@ class Pay extends Component {
                     </div>
                 </div>
                 <div className="confirm-footer">
-                    <button
-                            className={classNames({
-                                'confirm-button': true,
-                                'pay-disabled': !checked
-                            })}
-                            onClick={()=>{
-                                if(checked){
-                                   this.pay()
-                                }
-                            }}>
-                        <span>确认支付</span>
-                    </button>
+                    <Mutation mutation={gql(update_order)}
+                              onError={error=>console.log('error',error)}
+                    >
+                        {(update_order,{ loading, error }) => (
+                            <button
+                                className={classNames({
+                                    'confirm-button': true,
+                                    'pay-disabled': !checked
+                                })}
+                                onClick={()=>{
+                                    if(checked){
+                                        // this.pay()
+                                        this.getBridgeReady(update_order,id,orderTotalPay)
+                                    }
+                                }}>
+                                <span>确认支付</span>
+                            </button>
+                        )}
+                    </Mutation>
                 </div>
             </div>
         )

src/utils/gql.js

@@ -479,6 +479,27 @@ const order_by_id = `
     }
 `
 
+const update_order = `
+    mutation updateorder($id: ID, $updatedAt: String, $orderStatus: String, $orderPay_id: ID) {
+        updateorder: update_order(id: $id updatedAt: $updatedAt orderStatus: $orderStatus count: $count orderPay_id: $orderPay_id) {
+            result
+            order {
+                remark
+                updatedAt
+    
+                orderTotalPay
+                createdAt
+                orderStatus
+    
+                id
+                count
+    
+                productTotalPay
+            }
+        }
+    }
+`
+
 const orderProduct_by_props = `
     query orderProductbyprops($order_id: ID) {
         orderProductbyprops: orderProduct_by_props(order_id: $order_id) {
@@ -770,6 +791,7 @@ export {
     delete_address,
     orderbyprops,
     order_by_id,
+    update_order,
     orderProduct_by_props,
     create_order,
     create_order_product,