Shulou(Shulou.com)06/03 Report--

This article is about how to implement code scanning payment in vue project. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Demand background

There are two types of reports displayed in the market report list, one is free report, the other is paid report. Free report users can view it directly, and paid reports need to be purchased before they can be viewed.

Train of thought analysis

Click to view the payment report and pop up the payment QR code.

The order is created and the QR code is counted down. After it is displayed for 5 seconds, it begins to listen to the result of the payment callback, with a frequency of five seconds.

Countdown to 0 seconds for the first time, reminding the QR code to expire and let the user click to refresh the QR code.

Continue the countdown and start listening to the result of payment callback.

If the result is not heard after the countdown to 0 seconds after the refresh, the payment pop-up window is closed and the user is allowed to reinitiate the payment.

UI display

The payment pop-up window is not out of date.

Pay for the expiration of the pop-up window like this.

Start using

The payment function is a common function of the project, so we encapsulate a component separately so that other modules are introduced as sub-components when they are used.

First, write a payment component template

The following is the specific source code of the template, because the style is not the focus of our consideration, so do not show the code of the style, add it yourself as needed.

{{pay.title}}

Payment amount: ¥{{pay.money}}

{{btnText}} JS related codes and instructions for the second payment component

1. Monitor whether the payment pop-up window is displayed

The child component receives the value passed by the parent component in the child component through the props property. To monitor pay.show with watch, the payment pop-up window is displayed only when it is true, and the method of listening to the payment result starts after 5 seconds of display.

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

two。 The QR code starts the countdown.

The QR code starts a 60-second countdown, and prompts you to click Refresh to get the QR code in 0 seconds to continue the countdown. If you close the payment pop-up window at 0 seconds, remind the user that the waiting time is too long. Please start the payment again.

HandleCountDown () {if (this.second = = 1) {if (this.refresh) {this.second = 60 this.btnDisabled = false this.btnText = 'Click Refresh to get the QR code' if (this.timer) {clearInterval (this.timer)}} else {this.$emit ('closePay') {type: 'fail'}) clearInterval (this.timer) this.$message.warning (' waiting time is too long Please re-initiate payment')} else {this.second-- this.btnDisabled = true this.btnText = `${this.second} seconds left before the expiration of the QR code `this.downTimer = setTimeout (() = > {this.handleCountDown ()}, 1000)}}

3. Monitor payment pop-up window closed

HandleClosePay () {if (this.timer) {clearInterval (this.timer)} if (this.downTimer) {clearTimeout (this.downTimer)} this.$emit ('closePay', {type:' fail'}) this.$message.warning ('you have cancelled payment')}

4. Monitor the result of payment callback

There are two callback results. If the monitoring is successful within the normal range, the fn passed by the parent component will be executed and the timer will be cleared. If the monitoring number is 12 and the corresponding result has not been obtained, the payment pop-up window will be closed to remind the user that the waiting time is too long. Please restart the payment and clear the timer.

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 (' wait too long Please re-initiate payment')}, 5000)}

5. Clear timer when payment component is destroyed

This step is easy to ignore but also needs to be done, and the timer is cleared in time when the component is destroyed.

BeforeDestroy () {if (this.timer) {clearInterval (this.timer)} if (this.downTimer) {clearTimeout (this.downTimer)}} attached: the complete source code of the component JS

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: refresh QR code * / handleRefreshCode () {this.$bus.$emit ('refreshCode') this.handleCountDown () this.handleReportPayNotify () this.refresh = false} / * * @ descripttion: QR code countdown * / handleCountDown () {if (this.second = = 1) {if (this.refresh) {this.second = 60 this.btnDisabled = false this.btnText = 'Click Refresh to get the QR code' if (this.timer) {clearInterval (this. Timer)}} else {this.$emit ('closePay' {type: 'fail'}) clearInterval (this.timer) this.$message.warning (' waiting time is too long Please re-initiate payment')} else {this.second-- this.btnDisabled = true this.btnText = `${this.second} seconds left before the expiration of the QR code `this.downTimer = setTimeout (() = > {this.handleCountDown ()}, 1000)}} / * * @ descripttion: monitor payment pop-up window and close * / handleClosePay () {if (this.timer) {clearInterval (this.timer)} if (this.downTimer) {clearTimeout (this.downTimer)} this.$emit ('closePay', {type:' fail'}) this.$message.warning ('you have cancelled payment')} / * * @ descripttion: monitor payment callback result * / 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 (' wait too long Please re-launch payment')}, 5000)}, beforeDestroy () {if (this.timer) {clearInterval (this.timer)} if (this.downTimer) {clearTimeout (this.downTimer)} thank you for reading! This is the end of the article on "how to realize Code scan payment in vue Project". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.