微信支付（公众号支付和H5支付）

litemall-vue/src/api/api.js

@@ -300,6 +300,14 @@ export function orderPrepay(data) {
     data
   })
 }
+const OrderH5pay = 'wx/order/h5pay'; // h5支付
+export function orderH5pay(data) {
+  return request({
+    url: OrderH5pay,
+    method: 'post',
+    data
+  });
+}
 export const OrderList='wx/order/list'; //订单列表
 export function orderList(query) {
   return request({

litemall-vue/src/views/order/payment/index.vue

@@ -39,8 +39,9 @@
 
 <script>
 import { Radio, RadioGroup, Dialog } from 'vant';
-import { orderDetail, orderPrepay } from '@/api/api';
+import { orderDetail, orderPrepay, orderH5pay } from '@/api/api';
 import _ from 'lodash';
+import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
 
 export default {
   name: 'payment',
@@ -72,20 +73,109 @@ export default {
       Dialog.alert({
         message: '你选择了' + (this.payWay === 'wx' ? '微信支付' : '支付宝支付')
       }).then(() => {
+        if (this.payWay === 'wx') {
+          let ua = navigator.userAgent.toLowerCase();
+          let isWeixin = ua.indexOf('micromessenger') != -1;
+          if (isWeixin) {
+            orderPrepay({ orderId: this.orderId })
+              .then(res => {
+                let data = res.data.data;
+                let prepay_data = JSON.stringify({
+                  appId: data.appId,
+                  timeStamp: data.timeStamp,
+                  nonceStr: data.nonceStr,
+                  package: data.packageValue,
+                  signType: 'MD5',
+                  paySign: data.paySign
+                });
+                setLocalStorage({ prepay_data: prepay_data });
 
-        this.$router.push({
-          name: 'paymentStatus',
-          params: {
-            status: 'success'
+                if (typeof WeixinJSBridge == 'undefined') {
+                  if (document.addEventListener) {
+                    document.addEventListener(
+                      'WeixinJSBridgeReady',
+                      this.onBridgeReady,
+                      false
+                    );
+                  } else if (document.attachEvent) {
+                    document.attachEvent(
+                      'WeixinJSBridgeReady',
+                      this.onBridgeReady
+                    );
+                    document.attachEvent(
+                      'onWeixinJSBridgeReady',
+                      this.onBridgeReady
+                    );
+                  }
+                } else {
+                  this.onBridgeReady();
+                }
+              })
+              .catch(err => {
+                Dialog.alert({ message: err.data.errmsg });
+                that.$router.replace({
+                  name: 'paymentStatus',
+                  params: {
+                    status: 'failed'
+                  }
+                });
+              });
+          } else {
+            orderH5pay({ orderId: this.orderId })
+              .then(res => {
+                let data = res.data.data;
+                window.location.replace(
+                  data.mwebUrl +
+                  '&redirect_url=' +
+                  encodeURIComponent(
+                    window.location.origin +
+                    '/#/?orderId=' +
+                    this.orderId +
+                    '&tip=yes'
+                  )
+                );
+              })
+              .catch(err => {
+                Dialog.alert({ message: err.data.errmsg });
+              });
           }
-        });
+        } else {
+          //todo : alipay
+        }
       });
-
-      // // 利用weixin-js-sdk调用微信支付
-      // orderPrepay({orderId: this.orderId}).then(res => {
-      //   var payParams = res.data.data;
-  
-      // });
+    },
+    onBridgeReady() {
+      let that = this;
+      let data = getLocalStorage('prepay_data');
+      // eslint-disable-next-line no-undef
+      WeixinJSBridge.invoke(
+        'getBrandWCPayRequest',
+        JSON.parse(data.prepay_data),
+        function(res) {
+          if (res.err_msg == 'get_brand_wcpay_request:ok') {
+            that.$router.replace({
+              name: 'paymentStatus',
+              params: {
+                status: 'success'
+              }
+            });
+          } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
+            that.$router.replace({
+              name: 'paymentStatus',
+              params: {
+                status: 'cancel'
+              }
+            });
+          } else {
+            that.$router.replace({
+              name: 'paymentStatus',
+              params: {
+                status: 'failed'
+              }
+            });
+          }
+        }
+      );
     }
   },
 

litemall-wx-api/src/main/java/org/linlinjava/litemall/wx/service/WxOrderService.java

@@ -3,6 +3,7 @@ package org.linlinjava.litemall.wx.service;
 import com.github.binarywang.wxpay.bean.notify.WxPayNotifyResponse;
 import com.github.binarywang.wxpay.bean.notify.WxPayOrderNotifyResult;
 import com.github.binarywang.wxpay.bean.order.WxPayMpOrderResult;
+import com.github.binarywang.wxpay.bean.order.WxPayMwebOrderResult;
 import com.github.binarywang.wxpay.bean.request.WxPayUnifiedOrderRequest;
 import com.github.binarywang.wxpay.bean.result.BaseWxPayResult;
 import com.github.binarywang.wxpay.constant.WxPayConstants;
@@ -563,6 +564,60 @@ public class WxOrderService {
     }
 
     /**
+     * 微信H5支付
+     *
+     * @param userId
+     * @param body
+     * @param request
+     * @return
+     */
+    @Transactional
+    public Object h5pay(Integer userId, String body, HttpServletRequest request) {
+        if (userId == null) {
+            return ResponseUtil.unlogin();
+        }
+        Integer orderId = JacksonUtil.parseInteger(body, "orderId");
+        if (orderId == null) {
+            return ResponseUtil.badArgument();
+        }
+
+        LitemallOrder order = orderService.findById(orderId);
+        if (order == null) {
+            return ResponseUtil.badArgumentValue();
+        }
+        if (!order.getUserId().equals(userId)) {
+            return ResponseUtil.badArgumentValue();
+        }
+
+        // 检测是否能够取消
+        OrderHandleOption handleOption = OrderUtil.build(order);
+        if (!handleOption.isPay()) {
+            return ResponseUtil.fail(ORDER_INVALID_OPERATION, "订单不能支付");
+        }
+
+        WxPayMwebOrderResult result = null;
+        try {
+            WxPayUnifiedOrderRequest orderRequest = new WxPayUnifiedOrderRequest();
+            orderRequest.setOutTradeNo(order.getOrderSn());
+            orderRequest.setTradeType("MWEB");
+            orderRequest.setBody("订单：" + order.getOrderSn());
+            // 元转成分
+            int fee = 0;
+            BigDecimal actualPrice = order.getActualPrice();
+            fee = actualPrice.multiply(new BigDecimal(100)).intValue();
+            orderRequest.setTotalFee(fee);
+            orderRequest.setSpbillCreateIp(IpUtil.getIpAddr(request));
+
+            result = wxPayService.createOrder(orderRequest);
+
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+
+        return ResponseUtil.ok(result);
+    }
+
+    /**
      * 微信付款成功或失败回调接口
      * <p>
      * 1. 检测当前订单是否是付款状态;

litemall-wx-api/src/main/java/org/linlinjava/litemall/wx/web/WxOrderController.java

@@ -91,6 +91,18 @@ public class WxOrderController {
     }
 
     /**
+     * 微信H5支付
+     * @param userId
+     * @param body
+     * @param request
+     * @return
+     */
+    @PostMapping("h5pay")
+    public Object h5pay(@LoginUser Integer userId, @RequestBody String body, HttpServletRequest request) {
+        return wxOrderService.h5pay(userId, body, request);
+    }
+
+    /**
      * 微信付款成功或失败回调接口
      * <p>
      *  TODO