Implementierungsbeispiel für Scan-Code-Zahlung im Vue-Projekt (mit Demo)

<Vorlage>
  <div>
    <el-dialog
      Klasse = "Dialog-Bezahlung"
      Titel=""
      :visible.sync="dialogSichtbar"
      :anzeigen-schließen="false"
      @close="Zahlungsvorgang schließen"
    >
      <div Klasse="Inhalt">
        <p class="tip">{{ zahlen.title }}</p>
        <p class="Tipp">
          Zahlungsbetrag: <span class="small">￥</span
          ><span class="large">{{ Geld bezahlen }}</span>
        </p>
        <Bild
          Klasse="Bild"
          :style="{ Deckkraft: btnDisabled ? 1 : 0.3 }"
          :src="zahlen.url"
        />
        <el-Schaltfläche
          Klasse="btn"
          :Klasse="btnDisabled ? 'deaktiviert' : ''"
          Typ="primär"
          :deaktiviert="btnDeaktiviert"
          @click="Code aktualisieren"
          >{{ btnText }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</Vorlage>

betrachten:
    'zahlen.show': {
      handler(Wert) {
        wenn (Wert) {
          this.dialogVisible = this.pay.show
          setTimeout(diesen.handleReportPayNotify(), 5000)
        }
      },
      sofort: wahr
    }
},

CountDown-Handle() {
  wenn (diese.Sekunde == 1) {
    wenn (diese.aktualisieren) {
      diese.Sekunde = 60
      this.btnDisabled = falsch
      this.btnText = „Klicken Sie auf „Aktualisieren“, um den QR-Code erneut zu erhalten.“
      wenn (dieser.Timer) {
        Intervall löschen(dieser.Timer)
      }
    } anders {
      dies.$emit('closePay', { Typ: 'Fehler' })
      Intervall löschen(dieser.Timer)
      this.$message.warning('Wartezeit ist zu lang, bitte Zahlung erneut einleiten.')
    }
  } anders {
    diese.zweite--
    this.btnDisabled = wahr
    this.btnText = `${this.second} Sekunden bis zum Ablauf des QR-Codes`
    dies.downTimer = setTimeout(() => {
      dies.handleCountDown()
    }, 1000)
  }
},

handleClosePay() {
  wenn (dieser.Timer) {
    Intervall löschen(dieser.Timer)
  }
  wenn (dieser.downTimer) {
    Zeitüberschreitung löschen(diesen.downTimer)
  }
  dies.$emit('closePay', { Typ: 'Fehler' })
  this.$message.warning('Sie haben die Zahlung storniert')
},

handleReportPayNotify() {
      sei num = 0
      dieser.timer = setzeInterval(() => {
        Zahl++
        dies.pay.fn().then(res => {
          wenn (res.status == 111111) {
            dies.$emit('closePay', { Typ: 'Erfolg' })
            Intervall löschen(dieser.Timer)
          }
        })
        wenn (Zahl == 12) {
          dies.$emit('closePay', { Typ: 'Fehler' })
          Intervall löschen(dieser.Timer)
          this.$message.warning('Wartezeit ist zu lang, bitte Zahlung erneut einleiten.')
        }
      }, 5000)
    }

  vorZerstören() {
    wenn (dieser.Timer) {
      Intervall löschen(dieser.Timer)
    }
    wenn (dieser.downTimer) {
      Zeitüberschreitung löschen(diesen.downTimer)
    }
  }
}

<Skript>
Standard exportieren {
  Name: 'WechatPay',
  Requisiten: {
    bezahlen: Objekt
  },
  Daten() {
    zurückkehren {
      dialogVisible: false,
      btnDisabled: wahr,
      btnText: '',
      Sekunde: 60,
      Timer: null,
      aktualisieren: true
    }
  },
  betrachten:
    'zahlen.show': {
      handler(Wert) {
        wenn (Wert) {
          this.dialogVisible = this.pay.show
          setTimeout(diesen.handleReportPayNotify(), 5000)
        }
      },
      sofort: wahr
    }
  },
  montiert() {
    dies.handleCountDown()
  },
  Methoden: {
    /**
     * @description: QR-Code aktualisieren*/
    handleRefreshCode() {
      dies.$bus.$emit('refreshCode')
      dies.handleCountDown()
      this.handleReportPayNotify()
      this.refresh = falsch
    },
    /**
     * @Beschreibung: QR-Code-Countdown*/
    CountDown-Handle() {
      wenn (diese.Sekunde == 1) {
        wenn (diese.aktualisieren) {
          diese.Sekunde = 60
          this.btnDisabled = falsch
          this.btnText = „Klicken Sie auf „Aktualisieren“, um den QR-Code erneut zu erhalten.“
          wenn (dieser.Timer) {
            Intervall löschen(dieser.Timer)
          }
        } anders {
          dies.$emit('closePay', { Typ: 'Fehler' })
          Intervall löschen(dieser.Timer)
          this.$message.warning('Wartezeit ist zu lang, bitte Zahlung erneut einleiten.')
        }
      } anders {
        diese.zweite--
        this.btnDisabled = wahr
        this.btnText = `${this.second} Sekunden bis zum Ablauf des QR-Codes`
        dies.downTimer = setTimeout(() => {
          dies.handleCountDown()
        }, 1000)
      }
    },
    /**
     * @descripttion: Warten Sie, bis das Popup-Fenster zur Zahlung geschlossen wird*/
    handleClosePay() {
      wenn (dieser.Timer) {
        Intervall löschen(dieser.Timer)
      }
      wenn (dieser.downTimer) {
        Zeitüberschreitung löschen(diesen.downTimer)
      }
      dies.$emit('closePay', { Typ: 'Fehler' })
      this.$message.warning('Sie haben die Zahlung storniert')
    },
    /**
     * @description: Ergebnisse des Zahlungsrückrufs überwachen*/
    handleReportPayNotify() {
      sei num = 0
      dieser.timer = setzeInterval(() => {
        Zahl++
        dies.pay.fn().then(res => {
          wenn (res.status == 111111) {
            dies.$emit('closePay', { Typ: 'Erfolg' })
            Intervall löschen(dieser.Timer)
          }
        })
        wenn (Zahl == 12) {
          dies.$emit('closePay', { Typ: 'Fehler' })
          Intervall löschen(dieser.Timer)
          this.$message.warning('Wartezeit ist zu lang, bitte Zahlung erneut einleiten.')
        }
      }, 5000)
    }
  },
  vorZerstören() {
    wenn (dieser.Timer) {
      Intervall löschen(dieser.Timer)
    }
    wenn (dieser.downTimer) {
      Zeitüberschreitung löschen(diesen.downTimer)
    }
  }
}
</Skript>