Vue 使用form表单提交问题
背景：公司的项目对接了一家第三方的支付机构，使用云闪付web移动端支付，对方要求form表单提交信息1、一开始，使用接口使用Axios请求设置form格式提交import axios from "axios";axios.post(success.data.credential.postParamMap,JSON.parse(success.data.credential.postParamMap
·
背景：公司的项目对接了一家第三方的支付机构，使用云闪付web移动端支付，对方要求form表单提交信息
1、一开始，使用接口使用Axios请求设置form格式提交
import axios from "axios";
axios.post(
success.data.credential.postParamMap,
JSON.parse(success.data.credential.postParamMap),
{headers: {'Content-Type':'application/x-www-form-urlencoded'}}
)
.then((req) => {
console.log(req);
// window.location.href = req.url
},
(fail) => {
that.$toast("支付异常，请选择其他支付方式");
});
// 接口跨域请求代理
proxyTable: {
"/v1.1/user_actions/add": {
target: "https://api.e.qq.com",
secure: true,
changeOrigin: true
},
"/gateway/api/frontTransReq.do": {
target: "https://gateway.95516.com",
secure: true,
changeOrigin: true
},
},结果行不通，不知道什么原因，后面对方发了一份案列过来
<html>
<head>
<title>To YeePay Page</title>
</head>
<body onload="document.yeepay.submit();">
<form name='yeepay' action='https://gateway.95516.com/gateway/api/frontTransReq.do' method='post'>
<input type='hidden' name='bizType' value='xxx'>
<input type='hidden' name='backUrl' value='xxx'>
<input type='hidden' name='txnSubType' value='xxx'>
<input type='hidden' name='orderId' value='xxx'>
<input type='hidden' name='signature' value='xxx'>
</form>
</body>
</html>瞬间懵逼，机智的我参照这个，使用vue做了类似的，但是还是遇到了兼容问题，那就是在移动端真机验证的时候，苹果手机下死活不行，问题和解决思路
1、将案例运行到服务器，使用苹果手机打开，可行，说明案例可行，案例代码没问题，是自己的问题
2、试着将案例的数据在自己的页面全部赋值写死，运行发现可行，说明vue环境下可行，是自己代码有问题
3、开始动态赋值，结果发现自己的参数在data中没有定义，这是坑1
4、input框v-model和value不能同时存在，这是坑2
5、一开始使用的cookie存取，最后发现是这个一直不行，原本还以为是cookie存取是异步，数据上有延迟，设置了setTimeout异步处理还是不行
6、最终，使用sessionStorage存取就行了，坑爹的玩意。
<template>
<div class="container">
<form name='yeepay' :action='redirectUrl' method='post'>
<input type='hidden' name='bizType' v-model='bizType'>
<input type='hidden' name='backUrl' v-model='backUrl'>
<input type='hidden' name='txnSubType' v-model='txnSubType'>
<input type='hidden' name='orderId' v-model='orderId'>
<input type='hidden' name='signature' v-model='signature'>
<input type='hidden' name='merName' v-model='merName'>
<input type='hidden' name='txnType' v-model='txnType'>
<input type='hidden' name='channelType' v-model='channelType'>
<input type='hidden' name='frontUrl' v-model='frontUrl'>
<input type='hidden' name='certId' v-model='certId'>
<input type='hidden' name='encoding' v-model='encoding'>
<input type='hidden' name='acqInsCode' v-model='acqInsCode'>
<input type='hidden' name='version' v-model='version'>
<input type='hidden' name='merAbbr' v-model='merAbbr'>
<input type='hidden' name='orderTimeout' v-model='orderTimeout'>
<input type='hidden' name='accessType' v-model='accessType'>
<input type='hidden' name='txnTime' v-model='txnTime'>
<input type='hidden' name='merId' v-model='merId'>
<input type='hidden' name='merCatCode' v-model='merCatCode'>
<input type='hidden' name='currencyCode' v-model='currencyCode'>
<input type='hidden' name='txnAmt' v-model='txnAmt'>
<input type='hidden' name='signMethod' v-model='signMethod'>
<input type='hidden' name='orderDesc' v-model='orderDesc'>
</form>
</div>
</template>
<script>
export default {
name: "UnionH5Pay",
components: {
},
data () {
return {
redirectUrl: '',
bizType: '',
backUrl: '',
txnSubType: '',
orderId: '',
signature: '',
merName: '',
txnType: '',
channelType: '',
frontUrl: '',
certId: '',
encoding: '',
acqInsCode: '',
version: '',
merAbbr: '',
orderTimeout: '',
accessType: '',
txnTime: '',
merId: '',
merCatCode: '',
currencyCode: '',
txnAmt: '',
signMethod: '',
orderDesc: '',
};
},
created () {
this.$indicator.open();
document.title = "收银台";
this.redirectUrl = sessionStorage.getItem("union_post_url");
let union_post_param_map = sessionStorage.getItem("union_post_param_map");
let queryAppObj = JSON.parse(union_post_param_map)
this.bizType = queryAppObj.bizType ? queryAppObj.bizType : '';
this.backUrl = queryAppObj.backUrl ? queryAppObj.backUrl : '';
this.txnSubType = queryAppObj.txnSubType ? queryAppObj.txnSubType : '';
this.orderId = queryAppObj.orderId ? queryAppObj.orderId : '';
this.signature = queryAppObj.signature ? queryAppObj.signature : '';
this.merName = queryAppObj.merName ? queryAppObj.merName : '';
this.txnType = queryAppObj.txnType ? queryAppObj.txnType : '';
this.channelType = queryAppObj.channelType ? queryAppObj.channelType : '';
this.frontUrl = queryAppObj.frontUrl ? queryAppObj.frontUrl : '';
this.certId = queryAppObj.certId ? queryAppObj.certId : '';
this.encoding = queryAppObj.encoding ? queryAppObj.encoding : '';
this.acqInsCode = queryAppObj.acqInsCode ? queryAppObj.acqInsCode : '';
this.version = queryAppObj.version ? queryAppObj.version : '';
this.merAbbr = queryAppObj.merAbbr ? queryAppObj.merAbbr : '';
this.orderTimeout = queryAppObj.orderTimeout ? queryAppObj.orderTimeout : '';
this.accessType = queryAppObj.accessType ? queryAppObj.accessType : '';
this.txnTime = queryAppObj.txnTime ? queryAppObj.txnTime : '';
this.merId = queryAppObj.merId ? queryAppObj.merId : '';
this.merCatCode = queryAppObj.merCatCode ? queryAppObj.merCatCode : '';
this.currencyCode = queryAppObj.currencyCode ? queryAppObj.currencyCode : '';
this.txnAmt = queryAppObj.txnAmt ? queryAppObj.txnAmt : '';
this.signMethod = queryAppObj.signMethod ? queryAppObj.signMethod : '';
this.orderDesc = queryAppObj.orderDesc ? queryAppObj.orderDesc : '';
},
mounted() {
let that = this;
this.$nextTick(() =>{
setTimeout(()=>{
that.$indicator.close();
}, 300)
document.yeepay.submit();
});
},
methods: {
},
};
</script>
<style lang="less" scoped>
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献15条内容
所有评论(0)