vue項目中如何實現掃碼支付

這篇文章給大家分享的是有關vue項目中如何實現掃碼支付的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

需求背景

市場報告列表展示的報告有兩種類型，一種是免費報告，另一種是付費報告。免費報告用戶可以直接查看，付費報告需要用戶購買之后才能查看。

思路分析

• 點擊查看為付費報告，彈出支付二維碼。

• 創建訂單，二維碼進行倒計時，其展示5秒后開始監聽支付回調結果，頻次為五秒一次。

• 倒計時第一次倒數到0秒，提醒二維碼過期讓用戶點擊刷新二維碼。

• 繼續倒計時并開始監聽支付回調結果。

• 刷新之后倒數到0秒還沒有監聽到結果則關閉支付彈窗，讓用戶重新發起支付。

UI展示

支付彈窗未過期長這樣子喔

支付彈窗過期時長這樣子喔

開始使用

支付功能作為項目的公共功能，所以我們單獨封裝一個組件，這樣其他模塊使用的時候就以子組件的方式引入。

一 編寫支付組件模板

下面是模板具體的源碼，由于樣式不是我們考慮的重點，所以就不展示樣式的代碼了，根據需要自行添加哈。

<template>
  <div>
    <el-dialog
      class="dialog-pay"
      title=""
      :visible.sync="dialogVisible"
      :show-close="false"
      @close="handleClosePay"
    >
      <div class="content">
        <p class="tip">{{ pay.title }}</p>
        <p class="tip">
          支付金額：<span class="small">￥</span
          ><span class="large">{{ pay.money }}</span>
        </p>
        <img
          class="pic"
          :
          :src="pay.url"
        />
        <el-button
          class="btn"
          :class="btnDisabled ? 'disabled' : ''"
          type="primary"
          :disabled="btnDisabled"
          @click="handleRefreshCode"
          >{{ btnText }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

二 支付組件的JS相關代碼和說明

1. 監聽支付彈窗是否顯示
子組件通過props屬性，在子組件中接收父組件傳過來的值。用watch監聽pay.show,只有為true的時候顯示支付彈窗，并且在顯示5秒后開始執行監聽支付結果的方法。

watch: {
    'pay.show': {
      handler(val) {
        if (val) {
          this.dialogVisible = this.pay.show
          setTimeout(this.handleReportPayNotify(), 5000)
        }
      },
      immediate: true
    }
},

2. 二維碼開始倒計時
二維碼開始進行60秒的倒計時，到0秒提示點擊刷新重新獲取二維碼，繼續開始倒計時，此時如果到0秒則關閉支付彈窗，提示用戶等待時間過長，請重新發起支付。

handleCountDown() {
  if (this.second == 1) {
    if (this.refresh) {
      this.second = 60
      this.btnDisabled = false
      this.btnText = '點擊刷新重新獲取二維碼'
      if (this.timer) {
        clearInterval(this.timer)
      }
    } else {
      this.$emit('closePay', { type: 'fail' })
      clearInterval(this.timer)
      this.$message.warning('等待時間過長，請重新發起支付')
    }
  } else {
    this.second--
    this.btnDisabled = true
    this.btnText = `距離二維碼過期剩余${this.second}秒`
    this.downTimer = setTimeout(() => {
      this.handleCountDown()
    }, 1000)
  }
},

3. 監聽支付彈窗關閉

handleClosePay() {
  if (this.timer) {
    clearInterval(this.timer)
  }
  if (this.downTimer) {
    clearTimeout(this.downTimer)
  }
  this.$emit('closePay', { type: 'fail' })
  this.$message.warning('您已取消支付')
},

4. 監聽支付回調結果
回調結果有兩種，如果是正常范圍內監聽成功，則執行父組件傳過來的fn，并清除定時器；如果監聽到次數為12的時候還沒有得到相應的結果，則關閉支付彈窗，提示用戶等待時間過長，請重新發起支付，并清除定時器。

handleReportPayNotify() {
      let num = 0
      this.timer = setInterval(() => {
        num++
        this.pay.fn().then(res => {
          if (res.status == 111111) {
            this.$emit('closePay', { type: 'success' })
            clearInterval(this.timer)
          }
        })
        if (num == 12) {
          this.$emit('closePay', { type: 'fail' })
          clearInterval(this.timer)
          this.$message.warning('等待時間過長，請重新發起支付')
        }
      }, 5000)
    }

5. 支付組件銷毀時清除定時器
這一步是容易忽略但是也是需要做的，當組件銷毀時將定時器及時的清除掉。

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.downTimer) {
      clearTimeout(this.downTimer)
    }
  }
}

附：組件JS完整的源碼

<script>
export default {
  name: 'WechatPay',
  props: {
    pay: Object
  },
  data() {
    return {
      dialogVisible: false,
      btnDisabled: true,
      btnText: '',
      second: 60,
      timer: null,
      refresh: true
    }
  },
  watch: {
    'pay.show': {
      handler(val) {
        if (val) {
          this.dialogVisible = this.pay.show
          setTimeout(this.handleReportPayNotify(), 5000)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.handleCountDown()
  },
  methods: {
    /**
     * @descripttion: 刷新二維碼
     */
    handleRefreshCode() {
      this.$bus.$emit('refreshCode')
      this.handleCountDown()
      this.handleReportPayNotify()
      this.refresh = false
    },
    /**
     * @descripttion: 二維碼倒計時
     */
    handleCountDown() {
      if (this.second == 1) {
        if (this.refresh) {
          this.second = 60
          this.btnDisabled = false
          this.btnText = '點擊刷新重新獲取二維碼'
          if (this.timer) {
            clearInterval(this.timer)
          }
        } else {
          this.$emit('closePay', { type: 'fail' })
          clearInterval(this.timer)
          this.$message.warning('等待時間過長，請重新發起支付')
        }
      } else {
        this.second--
        this.btnDisabled = true
        this.btnText = `距離二維碼過期剩余${this.second}秒`
        this.downTimer = setTimeout(() => {
          this.handleCountDown()
        }, 1000)
      }
    },
    /**
     * @descripttion: 監聽支付彈窗關閉
     */
    handleClosePay() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      if (this.downTimer) {
        clearTimeout(this.downTimer)
      }
      this.$emit('closePay', { type: 'fail' })
      this.$message.warning('您已取消支付')
    },
    /**
     * @descripttion: 監測支付回調結果
     */
    handleReportPayNotify() {
      let num = 0
      this.timer = setInterval(() => {
        num++
        this.pay.fn().then(res => {
          if (res.status == 111111) {
            this.$emit('closePay', { type: 'success' })
            clearInterval(this.timer)
          }
        })
        if (num == 12) {
          this.$emit('closePay', { type: 'fail' })
          clearInterval(this.timer)
          this.$message.warning('等待時間過長，請重新發起支付')
        }
      }, 5000)
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.downTimer) {
      clearTimeout(this.downTimer)
    }
  }
}
</script>

感謝各位的閱讀！關于“vue項目中如何實現掃碼支付”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！