Vue 使用form表单提交问题

背景：公司的项目对接了一家第三方的支付机构，使用云闪付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>

おすすめ