Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)

<テンプレート>
  <div>
    <el-ダイアログ
      クラス="ダイアログ支払い"
      タイトル=""
      :visible.sync="ダイアログを表示"
      :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>
        <画像
          クラス="pic"
          :style="{ 不透明度: btnDisabled ? 1 : 0.3 }"
          :src="pay.url"
        />
        <el-ボタン
          クラス="btn"
          :class="btnDisabled ? '無効' : ''"
          タイプ="プライマリ"
          :disabled="btn無効"
          @click="ハンドルリフレッシュコード"
          >{{ btnText }}</el-button
        >
      </div>
    </el-ダイアログ>
  </div>
</テンプレート>

時計：
    'pay.show': {
      ハンドラ(val) {
        if (値) {
          this.dialogVisible = this.pay.show
          タイムアウトを設定します(this.handleReportPayNotify(), 5000)
        }
      },
      即時: 真
    }
},

ハンドルカウントダウン() {
  （this.second == 1）の場合{
    （これを更新します）{
      秒 = 60
      this.btnDisabled = false
      this.btnText = 'QR コードを再度取得するには更新をクリックしてください'
      if (this.timer) {
        クリア間隔(this.timer)
      }
    } それ以外 {
      this.$emit('closePay', { type: 'fail' })
      クリア間隔(this.timer)
      this.$message.warning('待ち時間が長すぎます。支払いを再度開始してください')
    }
  } それ以外 {
    この秒--
    this.btnDisabled = true
    this.btnText = `QR コードの有効期限まであと ${this.second} 秒`
    this.downTimer = setTimeout(() => {
      this.handleCountDown()
    }, 1000)
  }
},

ハンドルクローズペイ() {
  if (this.timer) {
    クリア間隔(this.timer)
  }
  if (this.downTimer) {
    タイムアウトをクリアします(this.downTimer)
  }
  this.$emit('closePay', { type: 'fail' })
  this.$message.warning('お支払いをキャンセルしました')
},

処理レポート支払い通知() {
      数値を0にする
      this.timer = setInterval(() => {
        数値++
        this.pay.fn().then(res => {
          （res.status == 111111）の場合{
            this.$emit('closePay', { type: 'success' })
            クリア間隔(this.timer)
          }
        })
        （数値 == 12）の場合{
          this.$emit('closePay', { type: 'fail' })
          クリア間隔(this.timer)
          this.$message.warning('待ち時間が長すぎます。支払いを再度開始してください')
        }
      }, 5000)
    }

  破棄する前に() {
    if (this.timer) {
      クリア間隔(this.timer)
    }
    if (this.downTimer) {
      タイムアウトをクリアします(this.downTimer)
    }
  }
}

<スクリプト>
エクスポートデフォルト{
  名前:「WechatPay」、
  小道具: {
    支払う: オブジェクト
  },
  データ（） {
    戻る {
      ダイアログ表示: false、
      btnDisabled: true、
      btnテキスト: ''、
      2番目: 60,
      タイマー: null、
      更新: 有効
    }
  },
  時計：
    'pay.show': {
      ハンドラ(val) {
        if (値) {
          this.dialogVisible = this.pay.show
          タイムアウトを設定します(this.handleReportPayNotify(), 5000)
        }
      },
      即時: 真
    }
  },
  マウント() {
    this.handleCountDown()
  },
  メソッド: {
    /**
     * @description: QR コードを更新*/
    ハンドルリフレッシュコード() {
      this.$bus.$emit('refreshCode')
      this.handleCountDown()
      this.handleReportPayNotify()
      this.refresh = false
    },
    /**
     * @description: QR コードのカウントダウン*/
    ハンドルカウントダウン() {
      （this.second == 1）の場合{
        （これを更新します）{
          秒 = 60
          this.btnDisabled = false
          this.btnText = 'QR コードを再度取得するには更新をクリックしてください'
          if (this.timer) {
            クリア間隔(this.timer)
          }
        } それ以外 {
          this.$emit('closePay', { type: 'fail' })
          クリア間隔(this.timer)
          this.$message.warning('待ち時間が長すぎます。支払いを再度開始してください')
        }
      } それ以外 {
        この秒--
        this.btnDisabled = true
        this.btnText = `QR コードの有効期限まであと ${this.second} 秒`
        this.downTimer = setTimeout(() => {
          this.handleCountDown()
        }, 1000)
      }
    },
    /**
     * @descripttion: 支払いポップアップウィンドウが閉じるのをリッスンする*/
    ハンドルクローズペイ() {
      if (this.timer) {
        クリア間隔(this.timer)
      }
      if (this.downTimer) {
        タイムアウトをクリアします(this.downTimer)
      }
      this.$emit('closePay', { type: 'fail' })
      this.$message.warning('お支払いをキャンセルしました')
    },
    /**
     * @description: 支払いコールバックの結果を監視する*/
    処理レポート支払い通知() {
      数値を0にする
      this.timer = setInterval(() => {
        数値++
        this.pay.fn().then(res => {
          （res.status == 111111）の場合{
            this.$emit('closePay', { type: 'success' })
            クリア間隔(this.timer)
          }
        })
        （数値 == 12）の場合{
          this.$emit('closePay', { type: 'fail' })
          クリア間隔(this.timer)
          this.$message.warning('待ち時間が長すぎます。支払いを再度開始してください')
        }
      }, 5000)
    }
  },
  破棄する前に() {
    if (this.timer) {
      クリア間隔(this.timer)
    }
    if (this.downTimer) {
      タイムアウトをクリアします(this.downTimer)
    }
  }
}
</スクリプト>