vue中前端实现支付宝和微信支付

780 阅读1分钟

1、HTML代码:

 <div class="paymentss"> 
     <div>   
     <img src="../../static/img/wx.png" />    
    <div>      
    <img src="../../static/img/zfb.png" />    
    </div>     
 </div>   
   <div class="radius">    
    <mt-radio align="right" v-model="value" :options="options"></mt-radio>   
   </div> 
   </div>
    <mt-button       
     style="width:30%;background:#E3B104;color:#fff"   
       @click="submint()"    
    >立即支付</mt-button>

2、方法

<script>
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
import md5 from "js-md5";
export default { 
 data() {  
  return {     
     options: [    
    { label: "微信支付", value: "1" },  
     { label: "支付宝支付", value: "2" }  
    ],       
    orderCode: "" 
   }; 
 }, 
  methods: {   
 submint() {   
   var token = this.$getItoInterfaceInfo({  
      orderCode: this.orderCode     
 });   
   if (this.value == "2") {  
     axios.post("/alipay/order/invokeAlipay", {  
          dataDigest: token   
       })         
    .then((res)=>{
        //主要代码
         const div = document.createElement("div"); 
        // data就是接口返回的form表单,提交自动调起支付宝支付
          div.innerHTML = res.data;   
          document.body.appendChild(div);   
         document.forms[0].submit();    
       });    
  } else {    
    this.$post("/sjzz/pay/wechat_pay", { 
           dataDigest: token   
       })      
    .then((res) {  
          if (res.code == 200) {
              //这里是后端返回的URL直接进行跳转即可完成微信外支付
              window.location.href = res.data;    
        }       
   });    
  }   
 },  
  },  
};
</script>



  <style>
.paymentss img {  
height: 0.22rem;  
width: 0.22rem; 
 margin: 0.15rem 0 0 0.1rem;
}
.paymentss {  
display: flex; 
 flex-direction: row;  
height: 0.9rem; 
 background: #f8f8f8;  
margin: 0.3rem 0.1rem;  
border-radius: 0.1rem; 
 padding: 0.1rem;}
.paymentss >>> .mint-cell-wrapper {  
font-size: 0.13rem; 
 background: #f8f8f8;
}
</style>