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

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

需要背景

マーケットレポート リストには 2 種類のレポートが表示されます。1 つは無料レポート、もう 1 つは有料レポートです。ユーザーは無料レポートを直接表示できますが、有料レポートはユーザーが購入した後にのみ表示できます。

思考分析

  • クリックすると有料レポートが表示され、支払い QR コードがポップアップ表示されます。
  • 注文を作成すると、QR コードがカウントダウンします。5 秒間表示された後、5 秒ごとに支払いコールバック結果の監視を開始します。
  • 最初のカウントダウンが 0 秒に達すると、QR コードの有効期限が切れたことをユーザーに通知し、クリックして QR コードを更新するように求めます。
  • カウントダウンを続行し、支払いコールバックの結果の監視を開始します。
  • 更新後、カウントダウンが 0 秒に達しても結果が聞こえない場合は、支払いポップアップ ウィンドウが閉じられ、ユーザーが支払いを再開できるようになります。

UI 表示

支払い期限が切れていない場合、支払いポップアップ ウィンドウは次のようになります。

支払いポップアップウィンドウはこのように期限切れになります

始める

支払い機能はプロジェクトの公開機能であるため、他のモジュールが使用時にサブコンポーネントとして導入できるように、別のコンポーネントにカプセル化します。

1. 支払いコンポーネントテンプレートを作成する

以下はテンプレートの具体的なソースコードです。スタイルは考慮の対象ではないため、スタイルコードは表示されません。必要に応じて追加できます。

<テンプレート>
  <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>
</テンプレート>

2. 支払いコンポーネントのJSコードと説明

1. props 属性を通じて子コンポーネントに支払いポップアップ ウィンドウが表示されているかどうかを監視し、親コンポーネントから渡された値を子コンポーネントで受け取ります。 watch を使用して pay.show を監視します。支払いポップアップ ウィンドウは true のときのみ表示され、表示後 5 秒後に支払い結果を監視するメソッドが実行されます。

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

2. QR コードのカウントダウンが始まります。QR コードは 60 秒のカウントダウンを開始します。0 秒に達したら、[更新] をクリックして QR コードを再度取得し、カウントダウンを続行します。この時点で、0 秒に達すると、支払いポップアップ ウィンドウが閉じられ、ユーザーには待ち時間が長すぎるため支払いを再度開始するように求めるメッセージが表示されます。

ハンドルカウントダウン() {
  (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)
  }
},

3. 支払い監視ポップアップウィンドウを閉じる

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

4. 支払い監視のコールバック結果には 2 種類あります。監視が正常範囲内で成功した場合、親コンポーネントから渡された fn が実行され、タイマーがクリアされます。監視回数が 12 回に達しても対応する結果が得られない場合、支払いポップアップ ウィンドウが閉じられ、ユーザーに待機時間が長すぎるため支払いを再度開始し、タイマーをクリアするように促します。

処理レポート支払い通知() {
      数値を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)
    }

5. 支払いコンポーネントが破棄されたらタイマーをクリアします。この手順は見落としがちですが、実行する必要があります。コンポーネントが破棄されたら、タイマーを時間内にクリアします。

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

添付ファイル: コンポーネント JS の完全なソースコード

<スクリプト>
エクスポートデフォルト{
  名前:「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)
    }
  }
}
</スクリプト>

以上で、Vue プロジェクトにおける QR コード決済の実装例 (デモ付き) についての記事は終了です。Vue QR コード決済に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueプロジェクトでWeChat公式アカウント決済を使用する方法と遭遇した落とし穴の概要
  • VueでWeChat決済機能を実装する際に遭遇する落とし穴
  • Vue が Alipay の支払い機能を模倣
  • Vue.js WeChat 支払いフロントエンドコード共有
  • VueでWeChatの支払いコードを取得し、コードが占有される問題を解決する方法
  • Vue プロジェクトでの支払い機能の実装 (WeChat 支払いと Alipay 支払い)

<<:  mysql 変数の使用例の分析 [システム変数、ユーザー変数]

>>:  MySQLストアドプロシージャの原理と使用法の詳細な説明

推薦する

Docker イメージのデフォルトの保存場所を変更する方法 (ソリューション)

システムの初期のパーティション分割により、オペレーティング システム内の対応する / パーティション...

MySQL のインデックスと制約の例文

外部キーテーブルの主キーがどのテーブルの外部キーであるかを照会する 選択 テーブル名、 列名、 制約...

Vue ソースコード学習でレスポンシブ性を実装する方法

目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...

MySQL 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

Bootstrap 3.0 学習ノート グリッドシステム事例

序文前回の記事では、主にグリッドシステムの基本原理を学び、簡単なケースを通してその原理を実践しました...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

HTMLページ間で値を渡す問題の解決策

初めてこのエッセイを使ったとき、私はかなりぎこちなく感じましたhtmlファイルコードをコピーコードは...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

js を使用してシンプルなスイッチ ライト コードを実装する

体の部位: <button>ライトのオン/オフを切り替える</button>...

Centos6.5 でのスーパーバイザーのアップグレード、インストール、および構成に関するチュートリアル

スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...

XHTML 入門チュートリアル: XHTML ハイパーリンク

ハイパーリンクはインターネット全体を接続していると言っても過言ではありません。ハイパーリンクは、別の...

MySQL 8.0の落とし穴の詳細な説明

本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...

Mybatisの特殊文字処理の詳細な説明

序文: Mybatis の特殊文字処理、Mybatis の xml ファイル内の特殊文字の処理、ここ...