vue功能之“支付宝支付“

一、代码

<template>
  <div class="order-pay">
    <order-header title="订单支付">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话，了解更多</span>
      </template>
    </order-header>
    <div class="wrapper">
      <div class="container">
        <div class="item-pay">
          <h3>选择以下支付方式付款</h3>
          <div class="pay-way">
            <p>支付平台</p>
            <div class="pay pay-ali" :class="{'checked':payType==1}" @click="paySubmit(1)"></div>
            <div class="pay pay-wechat" :class="{'checked':payType==2}" @click="paySubmit(2)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcode'//通过插件生成二维码

export default{
  name:'order-pay',
  data(){
    return {
      orderNo:this.$route.query.orderNo,
      addressInfo:'',//收货人地址
      orderDetail:[],//订单详情，包含详情列表
      showDetail:false,//是否显示订单详情
      payType:'',//1选中支付宝 2微信 状态
      showPay:false,//是否显示微信支付弹窗
      payImg:'',//微信支付的二维码地址
      showPayModal:false,//是否显示二次支持确认弹窗
      T:'',//定时器的ID
      payment:0,//订单总金额

    }
  },

  methods:{
   paySubmit(payType){
     this.payType = payType
     if(this.payType == 1){
       window.open('/#/order/alipay?orderId='+this.orderNo,'_blank')//新窗口打开的字符串拼接
     }else{
     this.$axios.post('/pay',{
        orderId:this.orderNo,
        orderName:'Vue高仿小米商城',//扫码支付时订单名称
        amount:0.01, //单位元
        payType:2, //1支付宝，2微信
       }).then((res)=>{
         QRCode.toDataURL(res.content)
          .then(url => {
           this.showPay = true//
            this.payImg = url//
            this.loopOrderState()
          })
          .catch(err => {
            // console.error(err)
            this.$message.error('二维码转换失败')
          })
       })

     }
   },
  }
}
</script>

2.alipay组件

<template>
  <div class="ali-pay">
    <loading v-if="loading"></loading>
    <div class="form" v-html="content"></div>
  </div>
</template>
<script>
  import Loading from './../components/Loading'
  export default{
    name:'alipay',//alipay当前的支付页面-到支付宝页面有个中转页面--信息
    components:{
      Loading
    },
    data(){
      return {
        orderNo:this.$route.query.orderId,
        content:'',
        loading:true,

      }
    },
    mounted(){
      this.paySubmit()
    },
    methods:{
     paySubmit(){
       this.$axios.post('/pay',{
        orderId:this.orderNo,
        orderName:'Vue高仿小米商城',//扫码支付时订单名称
        amount:0.01, //单位元
        payType:1, //1支付宝，2微信
       }).then((res)=>{
          this.content = res.content
          setTimeout(()=>{
            document.forms[0].submit()//通过submit()传递给服务器，进行响应
          },100)
       })
     }
    }
  }
</script>

三、效果展示