阿里云生成支付二维码并支付前端实现

一 安装二维码生成器

npm install vue-qriously@1.1.1

二 配置插件

创建 plugins/vue-qriously-plugin.js

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

nuxt.config.js中配置

  plugins: [
    { src: '~/plugins/vue-qriously-plugin.js', ssr: false }
  ]

三 api

创建 api/pay.js

import request from '~/utils/request'

export default {
  createNative(orderNo) {
    return request({
      baseURL: 'http://localhost:8170',
      url: `/api/trade/weixin-pay/create-native/${orderNo}`,
      method: 'get'
    })
  }
}

四 订单页面

html

<el-button :disabled="!agree" type="danger" @click="toPay()">去支付</el-button>

脚本

  metho