支付方式 -- 微信

liuqimichale
1 parent 3c184204
Showing 4 changed files with 179 additions and 30 deletions
src/api/orderPay/orderPay.js
src/components/orderPay.vue
src/components/parkRecord.vue
src/utils/utils.js
 import request from '@/utils/request'
-export function aliPay(params) {
+export function aliPay(params) {  // 支付宝
   return request({
     url: '/api/alipay/aliH5Pay',
     method: 'post',
@@ -8,3 +8,22 @@ export function aliPay(params) {
   })
 }
+
+export function getOpenId(params) {  // 获取OpenId
+  return request({
+    url: '/api//weixinPublicPay/getOpenIdByCode',
+    method: 'post',
+    data: params
+  })
+}
+
+export function vxPayQuery(params) {  // 微信
+  return request({
+    url: '/api//weixinpay/publicUnifiedOrder',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
@@ -38,7 +38,8 @@
 </template>
 <script>
-import { aliPay } from '@/api/orderPay/orderPay'
+import {aliPay, getOpenId, vxPayQuery} from '@/api/orderPay/orderPay'
+
 export default {
   name: 'orderPay',
   data() {
@@ -46,9 +47,12 @@ export default {
       carWrapBG: 0,
       carNumber: '京A12312',
       arrearageActFee: 0,
-      arrearageDiscFee:0,
-      arrearageActFee:0,
-      clientBrowser:'', // 客户端
+      arrearageDiscFee: 0,
+      arrearageActFee: 0,
+      clientBrowser: '', // 客户端
+      paySrcType: '', //支付的类型   101 是本次   103是历史欠费
+      orderId: '',  //支付的订单
+      webAppCode: '', // 微信code
     }
   },
   created() {
@@ -58,32 +62,147 @@ export default {
     this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
     this.arrearageActFee = this.$route.query.arrearageActFee // 实收
     this.clientBrowser = this.$utils.clientBrowser() //支付方式
+    this.paySrcType = this.$route.query.paySrcType // 实收
+    this.orderId = this.$route.query.ordeID
+
+    if (this.clientBrowser == "微信") {
+      this.webAppCode = this.getCode();
+    }
   },
-  methods:{
-    toPay(){
-      if(this.clientBrowser == '支付宝') {
+  methods: {
+    getCode() {
+      var appID = this.$utils.myVxAppId;
+      var code = this.$route.query.code
+      var local = window.location.href;
+      if (code == null || code === '') {
+        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
+      } else {
+        return code;
+      }
+    },
+    toPay() {
+      let me = this
+      let _order = []
+      this.orderId = JSON.parse(this.orderId)
+      console.log(this.orderId)
+      if (this.paySrcType == 103) {
+        this.orderId.forEach(item => {
+          _order.push({
+            orderId: item
+          })
+        })
+        this.orderId = []
+        this.orderId = _order
+      }
+
+      if (this.clientBrowser == '支付宝') { // 支付宝支付
         var aliParams = {};
-        aliParams.orderId = orderID;
+        aliParams.orderId = this.orderId;
         aliParams.carNumber = this.carNumber;
         aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
         aliParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
-        aliParams.paySrcType = _paySrcType;//101停车支付
-        aliParams.orgId = '10003',
-        aliParams.backType=2,
-          // aliParams.recordArreaInfos = JSON.stringify([{
-          //     "orderId": webAppParams.orderId,
-          //     "orderNotPayFee": _mon * 100,
-          //     "parkId": getQueryString(window.location).parkCode
-          // }]);
-
-        aliParams.recordArreaInfos = JSON.stringify(orderID);
+        aliParams.paySrcType = this.paySrcType;//101停车支付
+        aliParams.orgId = this.$utils.myOrgId,
+          aliParams.backType = 2,
+          aliParams.recordArreaInfos = JSON.stringify(this.orderId);
+
+        aliPay(aliParams).then(response => {
+          console.log(response)
+          if (response.code == 0) {//进场
+            document.write(response.data);//打开支付表单
+          } else {//其他情况如【该卡号场内已存在】
+            console.log(response.message);
+          }
+
+        })
       }
+      if (this.clientBrowser == '微信') { // 微信支付
+        //第一步获取openid
+        var codeParams = {
+          code: this.webAppCode,
+          appId: this.$utils.myVxAppId
+        };
+        getOpenId(codeParams).then(res => {
+          if (res.code == 0) {
+            me.vxPay(res.data, this.orderId)
+          } else if (res.code == 40163) { //code been used, hints[重复code问题]
+            alert(res.message)
+            console.log(res.message);
+          } else {
+            alert(res.message)
+          }
+        })
-    }
+      }
+
+    },
+    vxPay(openIdData, orderIdData) {
+      var wxParams = {};
+      wxParams.orderId = orderIdData;
+      wxParams.backType = 2,
+      wxParams.orgId = this.$utils.myOrgId,
+      wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
+      wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
+      wxParams.carNumber = this.carNumber;
+      wxParams.paySrcType = this.paySrcType;//101停车支付
+      wxParams.recordArreaInfos = JSON.stringify(orderIdData);
+      wxParams.openId = openIdData;
+      wxParams.appId = this.$utils.myVxAppId;
+      vxPayQuery(wxParams).then( res => {
+        if (res.code == 0) { //
+          //alertMsg("出场成功");
+          if (res.data) {
+            var data = res.data;
+            console.log(JSON.stringify(data));
+            if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
+              if (document.addEventListener) {
+                document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
+              } else if (document.attachEvent) {
+                document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
+                document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
+              }
+            } else {
+              console.log('准备调用微信支付')
+              vm.onBridgeReady(data)
+            }
+          } else {
+            alert("没有找到返回值");
+          }
+        } else {
+          console.log(res.message);
+          alert(res.message);
+        }
+      })
+    },
+    onBridgeReady (data) {
+      console.log('调用微信支付WeixinJSBridge')
+      var vm = this
+      WeixinJSBridge.invoke(
+        'getBrandWCPayRequest', params,
+        //
+        // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
+        //   'appId': data.appId, // 公众号名称，由商户传入
+        //   'timeStamp': data.timeStamp, // 时间戳
+        //   'nonceStr': data.nonceStr, // 随机串
+        //   'package': data.package, // 预支付id
+        //   'signType': data.signType, // 微信签名方式
+        //   'paySign': data.paySign // 微信签名
+        // },
+        function (res) {
+          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+          if (res.err_msg === 'get_brand_wcpay_request:ok') {
+           console.log('成功')
+          } else {
+            console.log('失败')
+            alert('支付失败')
+          }
+        }
+      )
+    },
   },
-  filters:{
-    formateColor(val){
+  filters: {
+    formateColor(val) {
       switch (val) {
         case '0':
           return 'carBlue'
@@ -116,23 +235,28 @@ export default {
     width: 100%;
     height: 130px;
   }
-  .carBlue{
+
+  .carBlue {
     background: url("../assets/images/blueBG.png") no-repeat;
     background-size: 100% 100%;
   }
-  .carYellow{
+
+  .carYellow {
     background: url("../assets/images/yellowBG.png") no-repeat;
     background-size: 100% 100%;
   }
-  .carGreen{
+
+  .carGreen {
     background: url("../assets/images/greenBG.png") no-repeat;
     background-size: 100% 100%;
   }
-  .carWhite{
+
+  .carWhite {
     background: url("../assets/images/whiteBG.png") no-repeat;
     background-size: 100% 100%;
   }
-  .carBlack{
+
+  .carBlack {
     background: url("../assets/images/blackBG.png") no-repeat;
     background-size: 100% 100%;
   }
@@ -179,7 +303,8 @@ export default {
     color: #FFF;
     cursor: pointer;
   }
-  .tip{
+
+  .tip {
     padding-left: 40px;
     background: url("../assets/images/free-tip.png") no-repeat 18px center;
     background-size: 16px 16px;
@@ -269,6 +269,7 @@ export default {
       var salt = this.$utils.myCommonSalt(32);
       var list = "[" + this.orderIds + "]"
+
       // var orderlist = this.orderIds
       // var codes = "[" + fun.parkCodes + "]"
       //
@@ -305,6 +306,7 @@ export default {
         console.log(response)
         let res = response.data.carArrearages[0]
         console.log(res)
+        this.orderIds = JSON.stringify(this.orderIds)
         this.$router.push(
           {
             path:'orderPay',
@@ -313,7 +315,9 @@ export default {
               arrearageTotalFee: res.arrearageTotalFee,// 应收
               arrearageDiscFee: res.arrearageDiscFee,// 优惠
               arrearageActFee: res.arrearageActFee,// 实收
-              carNumber: this.carNumber // 车牌
+              carNumber: this.carNumber, // 车牌
+              paySrcType: 103, //支付的类型   101 是本次   103是历史欠费
+              ordeID: this.orderIds, //支付的订单号
             }
           }
         )
@@ -109,7 +109,8 @@ export default {
       return '支付宝'
     }
   },
-
+  // 0eca8f5373ca4866aec2f8e9d9367104  老的id
+  // 14318527b13840c2a4af63fef52c2d6e 老的签名
   myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid
   myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息