vue項目實作使用者掃二維碼實作支付功能

首先第一步是需要在指令行裡面下載下傳安裝一個生成二維碼的插件qrcodejs2,代碼如下:

第二步封裝一個元件:

模闆如下代碼:

<!-- 微信二維碼 -->
<template>
<div class=''>
  <el-dialog
      title="微信掃碼支付"
      :visible.sync="dialogData.dialogVisible"
      width="20%"
      v-dialogDrag
      center
      @close="close">
      <div id="qrcode" ref="qrcode" style="display:flex;justify-content:center">
      </div>
      <p style="text-align:center;margin:5px"><el-button type="primary" size="mini" @click="refresh">重新整理二維碼</el-button></p>
      <p style="text-align:center"><b>訂單名稱:{{dialogData.xxxx}}</b></p>
      <p style="text-align:center"><b>訂單價格:{{dialogData.xxxx}}元</b></p>
      <p style="text-align:center"><b>數量:{{dialogData.xxx}}</b></p>
      <div slot='footer' class="dialog-footer">
         <el-button type="primary" @click="confirm">已支付</el-button>
         <el-button type="warning" @click='cancel'>取消</el-button>
      </div>
  </el-dialog>
</div>
</template>
           

第三步将下載下傳的依賴引入注冊并且執行個體一下,代碼如下:

import QRCode from 'qrcodejs2'
export default {
// import引入的元件需要注入到對象中才能使用
  components: {QRCode},
  props: ['dialogData'],
  inject: ['reload'],
  data () {
    // 這裡存放資料
    return {
      content: ''
    }
  },
  // 方法集合
  methods: {
    qrcodedraw () { // 生成二維碼
      this.qrcode = new QRCode(this.$refs.qrcode, {
        width: 100, // 二維碼寬度
        height: 100, // 二維碼高度
        text: this.dialogData.codeUrl,
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    refresh () {
      this.$http.rule.xxxxxxxx({orderId: this.dialogData.item.orderId, paymentMethod: 1}).then(res => {
        if (res.data.code === '200' && res.data.value === 'success') {
          this.$message.success('二維碼重新整理成功')
          this.content = res.data.data.codeUrl
          document.getElementById('qrcode').innerHTML = ''  //點選一次重新整理将之前的二維碼内容清空
          this.$nextTick(() => {
            this.qrcodeScan()
          })
        }
      }).catch(() => {})
    },
    close () {
      this.$message.warning('支付頁面關閉!')
      this.dialogData.dialogVisible = false
      this.reload()
    },
    confirm () {
      this.$http.rule.getMyOrdersList({current: 1, size: 5, orderId: this.dialogData.orderId}).then(res => {
        if (res.data.data.records[0].orderState === '2') {
          this.$message.success('支付成功!')
          this.dialogData.dialogVisible = false
          this.$router.push({path: '/home/busaccount', query: {showview: 1}})
          this.reload()
        } else if (res.data.data.records[0].orderState === '4') {
          this.$message.error('支付失敗!')
          this.dialogData.dialogVisible = false
          this.$router.push({path: '/home/busaccount', query: {showview: 1}})
          this.reload()
        } else if (res.data.data.records[0].orderState === '1') {
          this.$message.warning('微信未支付!')
          this.dialogData.dialogVisible = false
          this.$router.push({path: '/home/busaccount', query: {showview: 1}})
          this.reload()
        }
      })
    },
    cancel () {
      this.$message.warning('支付取消!')
      this.reload()
    }
  },
  // 生命周期 - 挂載完成（可以通路DOM元素）
  mounted () {
    this.$nextTick(() => {
      this.qrcodedraw()
    })
  },
}
           

支付寶支付後端方式也是傳回一個連結也可用上述方式實作顯示出來

效果如下圖: