vue功能之“微信支付“

一、安装并引用依赖

cnpm i qrcode --save

import QRCode from 'qrcode'//通过插件生成二维码

二、代码

<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>

三、效果展示