一、场景描述
2.需要抓包工具代理手机网络，进行手机APP扫码（支付宝、微信APP）。
抓包工具：https://www.charlesproxy.com/download/
破解网站：https://www.zzzmode.com/mytools/charles/
3.文件源码逻辑
ybPay.vue文件结构😂😂😂
<template>
<div></div>
</template>
<script>
import { getBrowserType } from "@/libs/util";
import { ybPayInitiatePayment, ybPayQueryOrder } from "@/api/ybpay";
import "amfe-flexible"; // px 转为rem
export default {
data() {
return {
//微信配置
wxAppid: "wx****************",
wxCode: this.$route.query.code,
wxPayData: {}, //支付参数
//支付配置
alipayCode: this.$route.query.auth_code,
aliPayResult: {}, //支付成功查询结果参数
aliPayParams:'',//支付宝支付参数
// public params
moneyParams: {}, // 显示金额数据
};
},
//data() -- end
created() {
let token = this.$route.query.token;
localStorage.setItem("token_ybpay", token);//存储token为刷新url之后使用，授权时候回刷新url
if (getBrowserType() == "wx") {
if (!this.wxCode) {
// 获取code
this.getCodeApi();
} else {
//使用code进行请求
this.judgeBrowserWXPay();
}
} else if (getBrowserType() == "alipay") {
if (!window.AlipayJSBridge) {
document.addEventListener("AlipayJSBridgeReady", null, false);
}
if (!this.alipayCode) {
this.aliPayGetCode();
} else {
this.judgeBrowserAliPay();
}
//支付宝逻辑 -- end
} else {
this.isLoading = false;
this.$dialog.confirm({
title: "提示",
message: "请使用支付宝或微信打开",
showCancelButton: false,
});
}
},
//created() -- end
methods: {
/**
* ---- publick method
* */
// 0x000000
payBtnClick() {
// 立即支付点击方法
if (getBrowserType() == "wx") {//微信支付
this.wxPayMethod(this.wxPayData);
} else if (getBrowserType() == "alipay") {//支付宝支付
this.alipayPayMethod(this.aliPayParams);
} else {
this.isLoading = false;
this.$dialog.confirm({
title: "提示",
message: "请使用支付宝或微信打开",
showCancelButton: false,
});
}
},
//0x000001
getCodeApi() {
// 微信环境 // 获取code
let urlNow = encodeURIComponent(window.location.href);
//snsapi_base //静默授权 用户无感知
let url =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
this.wxAppid +
"&redirect_uri=" +
urlNow +
"&response_type=code&scope=snsapi_base#wechat_redirect";
window.location.href = url; //刷新url,会有授权信息
},
/**
* private methods ------------------------------------------------------------------------ 支付宝
* */
//0x000000
aliPayGetCode() {
//auth_base //静默授权 用户无感知
let app_id = "****************";//16位
let authUrl = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${app_id}&auth_skip=false&scope=auth_user&redirect_uri=${encodeURIComponent(
window.location.href
)}`;
window.location.href = authUrl;//授权之后会有授权信息
},
//0x000001
aliPayGetUrlKey(name) { //获取
return (
decodeURIComponent(
(new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
location.href
) || [, ""])[1].replace(/\+/g, "%20")
) || null
);
},
//0x000002
judgeBrowserAliPay() {
// 支付宝支付
this.aliPayQuery("aliPay", this.alipayCode);
},
//0x000003
aliPayQuery(payType, codeStr) {
this.$toast.loading({
message: "处理中...",
forbidClick: true,
loadingType: "spinner",
duration: 0,
});
let tokenStr = localStorage.getItem("token_ybpay");
let queryParams = { token: tokenStr, payType: payType, code: codeStr };
let _this = this;
ybPayInitiatePayment(queryParams).then((res) => {//ybPayInitiatePayment请求接口
_this.$toast.clear(); //关闭loading
if (res.data.code == 200) {
if (res.data.msg != "成功") {
_this.$toast(res.data.msg);
return;
}
_this.aliPayResult = {
outTradeNo: res.data.data.outTradeNo,
ptTradeNo: res.data.data.ptTradeNo,
};
_this.moneyParams = {
totalFee: res.data.data.totalFee,
cashFee: res.data.data.cashFee,
insuranceFee: res.data.data.insuranceFee,
};
_this.aliPayParams = res.data.data.payData;
_this.alipayPayMethod(_this.aliPayParams);
} else {
_this.$toast(res.data.msg);
}
});
},
//0x000004 -- 支付宝调起支付
alipayPayMethod(dataParams) {
let _this = this;
AlipayJSBridge.call(
"tradePay",
{
tradeNO: dataParams,
},
function (res) {
console.log(JSON.stringify(res));
switch (res.resultCode) {
case "9000"://支付成功
_this.queryOrderMethod();//查询支付结果接口
break;
case "8000":
Dialog.alert({
title: "提示",
message: "支付处理中，点击查看支付结果",
}).then(() => {
// window.location.href = _this.returnUrl;
});
break;
case "6004":
Dialog.alert({
title: "提示",
message: "支付处理中，点击查看支付结果",
}).then(() => {
// window.location.href = _this.returnUrl;
});
break;
case "4000":
_this.$toast("支付失败");
break;
case "6001":
_this.$toast("已取消支付");
break;
case "6002":
_this.$toast("支付失败，网络错误");
break;
default:
_this.$toast("支付失败，错误码：" + res.resultCode);
return;
}
}
);
},
/**
* private methods --------------------------------- ------------------------------------------ 微信
* */
//0x00000
judgeBrowserWXPay() {
// 微信支付
this.payQuery("wxPay", this.wxCode);
},
//0x000001
payQuery(payType, codeStr) {
this.$toast.loading({
message: "处理中....",
forbidClick: true,
loadingType: "spinner",
duration: 0,
});
let tokenStr = localStorage.getItem("token_ybpay");
let queryParams = { token: tokenStr, payType: payType, code: codeStr };
let _this = this;
ybPayInitiatePayment(queryParams).then((res) => {
_this.$toast.clear(); //关闭loading
if (res.data.code == 200) {
if (res.data.msg != "成功") {
this.$toast(res.data.msg);
return;
}
let paramsJson = res.data.data.wxPayData;
this.wxPayData = paramsJson;
this.moneyParams = {
totalFee: res.data.data.totalFee,
cashFee: res.data.data.cashFee,
insuranceFee: res.data.data.insuranceFee,
};
//接口查询之后，直接调用接口 -- zlj
this.wxPayMethod(this.wxPayData);
} else {
this.$toast(res.data.msg);
}
});
},
//0x000002 -- 微信调起支付
wxPayMethod(dataParams) {
let data = dataParams;
let _this = this;
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: data.appId,
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType, //微信签名方式：
paySign: data.sign, //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
//支付成功
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
_this.$toast("已取消支付");
return;
} else {
_this.$toast("支付失败");
return;
}
}
);
},
//0x000003 -- 暂时用不到
queryOrderMethod() {
this.$toast.loading({
message: "查询支付结果",
forbidClick: true,
loadingType: "spinner",
duration: 2000,
});
let param = this.aliPayResult;
let that = this;
ybPayQueryOrder(param).then((res) => {
that.$toast.clear(); //关闭loading
if (res.data.code == 200) {
let params = res.data.data;
that.$router.push({ path: "/ybpayresult", query: params });
} else {
that.$toast(res.data.msg);
}
});
},
//0x000004
},
// methods -- end
};
</script>
<style >
</style>
JS部分缩略
<script>
import { getBrowserType } from "@/libs/util"; // 工具库
import { ybPayInitiatePayment, ybPayQueryOrder } from "@/api/ybpay"; // 接口
import "amfe-flexible"; // px 转为rem UI库
export default {
data() {
return {};
},
//data() -- end
created() {},
//created() -- end
methods: {
/**
* ---- publick method
* */
// 0x000000
payBtnClick() {},
//0x000001
getCodeApi() { },
/**
* private methods --------------- 支付宝
* */
//0x000000
aliPayGetCode() {},
//0x000001
aliPayGetUrlKey(name){},
//0x000002
judgeBrowserAliPay() {},
//0x000003
aliPayQuery(payType, codeStr){},
//0x000004
alipayPayMethod(dataParams) {},
/**
* private methods ------------------------- 微信
* */
//0x00000
judgeBrowserWXPay() {},
//0x000001
payQuery(payType, codeStr) {},
//0x000002
wxPayMethod(dataParams){},
//0x000003 -- 暂时用不到
queryOrderMethod(){},
//0x000004
},
// methods -- end
};
</script>
