需要背景マーケットレポート リストには 2 種類のレポートが表示されます。1 つは無料レポート、もう 1 つは有料レポートです。ユーザーは無料レポートを直接表示できますが、有料レポートはユーザーが購入した後にのみ表示できます。 思考分析
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysql 変数の使用例の分析 [システム変数、ユーザー変数]
>>: MySQLストアドプロシージャの原理と使用法の詳細な説明
システムの初期のパーティション分割により、オペレーティング システム内の対応する / パーティション...
外部キーテーブルの主キーがどのテーブルの外部キーであるかを照会する 選択 テーブル名、 列名、 制約...
目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...
概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...
序文前回の記事では、主にグリッドシステムの基本原理を学び、簡単なケースを通してその原理を実践しました...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
初めてこのエッセイを使ったとき、私はかなりぎこちなく感じましたhtmlファイルコードをコピーコードは...
HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...
目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...
docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...
体の部位: <button>ライトのオン/オフを切り替える</button>...
スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...
ハイパーリンクはインターネット全体を接続していると言っても過言ではありません。ハイパーリンクは、別の...
本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...
序文: Mybatis の特殊文字処理、Mybatis の xml ファイル内の特殊文字の処理、ここ...