Vue implementiert die Anmeldung per Mobiltelefon-Bestätigungscode

<Vorlage>
  <div>
    <el-main>
      <el-form :model="ruleForm" :rules="Regeln" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="Mobiltelefonnummer" prop="Telefon">
          <el-input v-model="ruleForm.phone" placeholder="Bitte geben Sie Ihre Telefonnummer ein" size=""
                    maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="Bestätigungscode" prop="code">
          <el-Zeile :span="24">
            <el-col :span="12">
              <el-input v-model="ruleForm.code" auto-complete="off" placeholder="Bitte geben Sie den Bestätigungscode ein" size=""
                        maximale Länge = "4"
                        @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-col>
            <el-col :span="12">
              <div Klasse="Anmeldecode">
                <!--Bestätigungscode-Komponente-->
                <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}"
                           :deaktiviert="getCodeBtnDisable">{{ codeBtnWord }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <!--Gleitende Überprüfungskomponente-->
        <Überprüfen></Überprüfen>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">Anmelden</el-button>
        </el-form-item>
      </el-form>

    </el-main>
  </div>
</Vorlage>

Standard exportieren {
  // Beschränken Sie die Eingabe auf Zahlen (zwei Dezimalstellen können eingegeben werden)
  limitEingabePunktZahl(Wert) {
    wenn (val === 0 || val === "0" || val === "" || val === undefiniert) {
      zurückkehren "";
    } anders {
      lass Wert = null;
      value = val.replace(/[^\d.]/g, ""); // Alle Zeichen außer "number" und "." löschen value = value.replace(/\.{2,}/g, ​​​​"."); // Nur das erste behalten. Alle zusätzlichen Zeichen löschen value = value
        .replace(.", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // Es können nur zwei Dezimalstellen eingegeben werden. Rückgabewert;
    }
  },

  handleRouteToArray(route) {
    const-Übereinstimmungen = route.path.split('/')
    Übereinstimmungen.Shift()
    lass newMatch = []
    Übereinstimmungen.map((item, i) => {
      wenn (entspricht[i - 1]) {
        Element = neuesMatch[i - 1] + '/' + Element
      }
      newMatch.push(Element)
    })
    neuesMatch = neuesMatch.map(item => {
      gibt `/${item}` zurück
    })
    returniere neuesMatch
  },

  // Das Passwort muss mindestens 8 Zeichen lang sein und drei beliebige Großbuchstaben, Kleinbuchstaben, Zahlen und Sonderzeichen enthalten testPassWord: function (str) {
    var rC = {
      lW: '[az]',
      uW: '[AZ]',
      nW: '[0-9]',
      sW: '[\\u0020-\\u002F\\u003A-\\u0040\\u005B-\\u0060\\u007B-\\u007E]'
    }
    Funktion Reg (str, rStr) {
      var reg = neuer RegExp(rStr)
      wenn (reg.test(str)) true zurückgibt
      sonst gibt „false“ zurück
    }
    wenn (Zeichenfolgelänge < 8) {
      return false
    } anders {
      var tR = {
        l: Reg(str, rC.lW),
        u: Reg(str, rC.uW),
        n: Reg(str, rC.nW),
        s: Reg(str, rC.sW)
      }
      wenn ((tR.l && tR.u && tR.n) || (tR.l && tR.u && tR.s) || (tR.s && tR.u && tR.n) || (tR.s && tR.l && tR.n)) {
        // document.title = "Das Passwort erfüllt die Anforderungen"
        returniere wahr
      } anders {
        return false
      }
    }
  },

  // Passwortüberprüfung 8-30 Zeichen pwdReg: /^([0-9a-zA-Z]|(?:&)|(?:~)|(?:!)|(?:@)|(?:#)|(?:\$)|(?:%)|(?:\^)|(?:\*)){8,30}$/,

  // Telefonnummernverifizierung phoneReg: /^1[3|4|5|6|7|8][0-9]{9}$/,

  // Geld formatieren formatUSD (val, currency) {
    wenn (val === '' || val === '--' || val === undefiniert) {
      zurückkehren '--'
    }
    // Zuerst feststellen, ob die Daten einen Dezimalpunkt haben let newVal = String(Number(val).toFixed(2))
    // Konvertiere wissenschaftliche Notation in normale String-Anzeige if (newVal.includes('e+')) {
      neuerWert = Zahl(neuerWert).toLocaleString()
      neuerWert = this.unFormatAmount(neuerWert)
    }
    let dotIdx = newVal.lastIndexOf('.')
    let dotVal = '.00' // Behalte die Daten nach dem Dezimalpunkt if (dotIdx >= 0) {
      dotVal = neuerVal.substr(dotIdx, neuerVal.Länge)
      neuerWert = neuerWert.slice(0, dotIdx)
    }

    lass len = newVal.length
    lass arr = []
    let lastIndex = null
    während (Länge > 0) {
      letzterIndex = Länge
      Länge -= 3
      arr.unshift(neuerWert.substring(Länge, letzterIndex))
    }
    Wert = arr.join(',')

    if (Währung) {
      neuerWert = `${currency} ${val}${dotVal}`
    } anders {
      // neuerWert = `$ ${val}${dotVal}`
      newVal = `￥ ${val}${dotVal}` // Standard ist RMB}
    returniere neuenWert
  },

  // Formatieren Sie den Betrag ohne Dezimalstellen, Betragssymbole usw. Geben Sie eine Ganzzahl ein formatAmount (val) {
    wenn (val === '' || val === '--' || val === undefiniert) {
      zurückkehren '--'
    }
    wenn (Wert === 0 || Wert === '0') {
      Rückgabe 0
    }
    // Zuerst feststellen, ob die Daten einen Dezimalpunkt haben let newVal = String(val)
    let dotIdx = newVal.lastIndexOf('.')
    let dotLength = 0
    wenn (newVal.split('.').Länge > 1) {
      Punktlänge = newVal.split('.')[1].Länge
    }
    let dotVal = '' // Behalte die Daten nach dem Komma if (dotIdx >= 0) {
      neuerWert = String(Zahl(Wert).toFixed(5))
      dotVal = newVal.substr(dotIdx, dotLength + 1)
      neuerWert = neuerWert.slice(0, dotIdx)
    }
    lass len = newVal.length
    lass arr = []
    let lastIndex = null
    während (Länge > 0) {
      letzterIndex = Länge
      Länge -= 3
      arr.unshift(neuerWert.substring(Länge, letzterIndex))
    }
    Wert = arr.join(',')
    wenn (dotVal.length < 2) {
      dotVal = ''
    }
    Rückgabewert + Punktwert
  },

  // Bestimmen, ob die Daten leer sind isEmptyVal (val) {
    wenn (val === undefiniert || val === '') {
      zurückkehren '--'
    } anders {
      Rückgabewert
    }
  },

    // Formatieren Sie Jahr, Monat, Tag vom Typ: Chinesischer Anzeigemodus (ch) und Spleißmodus // Hinweis: Der chinesische Anzeigemodus wird nur benötigt, wenn Parameter über die Schnittstelle übergeben werden, andernfalls ist es das amerikanische Format YMD (jetzt Typ = "ch") {
    wenn (!jetzt || jetzt === 'null' || jetzt === '--' || jetzt === undefiniert) {
      zurückkehren '--'
    }
    wenn (Nummer(jetzt)) {
      jetzt = neues Datum(jetzt)
    }
    // Kompatibel mit IE-Browser, JJ-MM-TT-Format if (typeof now === 'string' && now.includes('-')) {
      jetzt = dies.NeuesDatum(jetzt)
    }
    wenn (jetzt) ​​{
      lass Jahr = ''
      let Monat = ''
      let Datum = ''
      // Die 8 Bits werden hier verwendet, um ein Format wie 20180423 zurückzugeben, wenn (String(now).length === 8 && String(now).indexOf('-') === -1 && String(now).indexOf('/') === -1) {
        const getNow = String(jetzt)
        gibt `${getNow.substring(4, 6)}/${getNow.substring(6, 8)}/${getNow.substring(0, 4)}` zurück
      } anders {
        jetzt = neues Datum(jetzt)
        jahr = jetzt.getFullYear()
        Monat = jetzt.getMonth() + 1
        Datum = jetzt.getDate()
      }
      wenn (Monat < 10) {
        Monat = `0${month}`
      }
      wenn (Datum < 10) {
        Datum = `0${date}`
      }
      wenn (Typ === 'ch') {
        gibt `${year}-${month}-${date}` zurück
      } sonst wenn (Typ) {
        gibt `${Jahr}${Typ}${Monat}${Typ}${Datum}` zurück
      } anders {
        gibt `${Monat}/${Datum}/${Jahr}` zurück
      }
    } anders {
      zurückkehren ''
    }
  },

  // Zeit formatieren: Jahr, Monat, Tag, Stunde, Minute, Sekunde formatDate (jetzt, Typ) {
    if (!now || jetzt === 'null' || jetzt === '--' || jetzt === undefiniert) {
      zurückkehren '--'
    }
    wenn (jetzt) ​​{
      jetzt = neues Datum(jetzt)
      lass jahr = jetzt.getFullYear()
      lass Monat = jetzt.getMonth() + 1
      let date = jetzt.getDate()
      let Stunde = jetzt.getHours()
      let minute = jetzt.getMinutes()
      lass Sekunde = jetzt.getSeconds()
      wenn (Monat < 10) {
        Monat = `0${month}`
      }
      wenn (Datum < 10) {
        Datum = `0${date}`
      }
      if (Stunde < 10) {
        Stunde = `0${Stunde}`
      }
      if (Minute < 10) {
        Minute = `0${Minute}`
      }
      wenn (Sekunde < 10) {
        Sekunde = `0${Sekunde}`
      }
      if (Typ) {
        returniere `${Monat}/${Datum}/${Jahr} ${Stunde}:${Minute}:${Sekunde}`
      } anders {
        gibt `${Monat}-${Datum}-${Jahr}` zurück
      }
    } anders {
      zurückkehren ''
    }
  },
}

<Vorlage>
  <div>
    <el-main>
      <el-form :model="ruleForm" :rules="Regeln" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="Mobiltelefonnummer" prop="Telefon">
          <el-input v-model="ruleForm.phone" placeholder="Bitte geben Sie Ihre Telefonnummer ein" size=""
                    maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="Verifizierungscode" prop="code">
          <el-Zeile :span="24">
            <el-col :span="12">
              <el-input v-model="ruleForm.code" auto-complete="off" placeholder="Bitte geben Sie den Bestätigungscode ein" size=""
                        maximale Länge = "4"
                        @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-col>
            <el-col :span="12">
              <div Klasse="Anmeldecode">
                <!--Bestätigungscode-Komponente-->
                <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}"
                           :deaktiviert="getCodeBtnDisable">{{ codeBtnWord }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <!--Gleitende Überprüfungskomponente-->
        <Überprüfen></Überprüfen>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">Anmelden</el-button>
        </el-form-item>
      </el-form>

    </el-main>
  </div>
</Vorlage>

<Skript>
//Tool-Klasse importieren import Verify from "@/components/Verify";
Ereignis aus „../utils/event“ importieren
importiere common von "@/utils/common";

lass Parameter;
Standard exportieren {
  Name: "LoginIphone",
  Komponenten: {Überprüfen},
  Daten() {
    //Verwenden Sie reguläre Ausdrücke, um die Telefonnummer zu überprüfen const checkPhone = (rule, value, callback) => {
      wenn (!Wert) {
        return callback(new Error('Telefonnummer darf nicht leer sein'));
      } anders {
        //Den regulären Ausdruck der Telefonnummer in der Tool-Klasse abrufen const reg = common.phoneReg
        // konsole.log(reg.test(Wert));
        wenn (reg.test(Wert)) {
          Rückruf();
        } anders {
          //Wenn die Validierungseingabe falsch ist, löschen Sie this.ruleForm.phone = ''
          return callback(new Error('Bitte geben Sie eine gültige Telefonnummer ein'));
        }
      }
    };

    zurückkehren {
      RegelForm: {
        Telefon: '',
        Code: '',
      },

      codeBtnWord: 'Bestätigungscode abrufen', //Text der Schaltfläche „Bestätigungscode abrufen“// waitTime: 61, //Ablaufzeit der Schaltfläche „Bestätigungscode abrufen“ waitTime: 2, //Ablaufzeit der Schaltfläche „Bestätigungscode abrufen“// Überprüfungsregeln: {
        Telefon:
          {Validator: checkPhone, Auslöser: "Unschärfe"}
        ],
        Code: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie das Bestätigungskennwort ein‘, Auslöser: ‚unscharf‘}
        ]
      }
    };
  },
  //Berechnete Eigenschaften berechnet
  berechnet: {
    // Steuern, ob die Schaltfläche „Bestätigungscode abrufen“ anklickbar ist getCodeBtnDisable: {
      //Taste setzen 61s
      // erhalten() {
      // wenn (this.waitTime === 61) {
      // wenn (diese.regelForm.telefon) {
      // gibt false zurück
      // }
      // gibt true zurück
      // }
      // gibt true zurück
      // }
      erhalten() {
        wenn (diese.waitTime === 2) {
          wenn (diese.regelForm.telefon) {
            return false
          }
          returniere wahr
        }
        returniere wahr
      },
      // Hinweis: Da die berechnete Eigenschaft selbst keine festgelegte Methode hat, unterstützt sie keine Änderungen in der Methode. Ich werde dies weiter unten tun, also muss ich set() manuell hinzufügen {
      }
    },

  }, Methoden: {

    getCode() {
      const _this = dies
      Parameter = {}
      params.phone = diese.regelForm.phone
      // Rufen Sie den SMS-Bestätigungscode auf interface_this.$axios.post('/sendMessage', params).then(res => {
        console.log("--------Überprüfen Sie den Wert der Hintergrundantwort-----", res)
        //Alle Daten speichern const mydata = res.data.data
        console.log("Ich bin in der SMS-Schnittstelle -->", mydata)

        //Bestätigungscode speichern params.yz = mydata.vCode

        console.log("Ich überprüfe den Bestätigungscode-------" + mydata.vCode)
        console.log("Ich überprüfe die Anzahl der Anrufe-------" + mydata.count)

        wenn (res.data.code === 200) {
          diese.$nachricht({
            Nachricht: „Der Bestätigungscode wurde gesendet, bitte warten …“,
            Typ: "Erfolg",
            Mitte: wahr
          })
        }
        wenn (res.data.data.count >= 5) {
          //Rufen Sie die Slider-Verifizierungskomponente event.$emit("VERIFY") auf.
        }

      })

      // Da unten der Timer verwendet wird, müssen Sie diesen Zeiger speichern let that = this
      diese.Wartezeit--
      that.getCodeBtnDisable = true
      this.codeBtnWord = `Erneut abrufen nach ${this.waitTime}s`
      let timer = setzeIntervall(Funktion () {
        wenn (das.Wartezeit > 1) {
          dass.Wartezeit--
          that.codeBtnWord = `Abrufen nach ${that.waitTime}s`
        } anders {
          Intervall löschen(Timer)
          that.codeBtnWord = 'Bestätigungscode abrufen'
          that.getCodeBtnDisable = falsch
          // das.Wartezeit = 61
          das.Wartezeit = 2
        }
      }, 1000)
    },
    Formular absenden(Formularname) {
      const _this = dies
      //Beurteilen Sie, ob der eingegebene Bestätigungscode leer ist, if (this.ruleForm.code != null) {
        dies.$refs[formName].validate((gültig) => {
          if (gültig) {

            _this.$axios.post("/iosLogin", {
              "Telefon": this.ruleForm.phone,
              "Verifizierung": this.ruleForm.code
            }).dann(res => {

              konsole.log(res.daten)
            })


            // console.log("Ich sende:", par)
            //
            // const jwt = par.headers['Autorisierung']
            // console.log("Ich bin Token->", jwt)
            // const userInfo = par.data.data
            // console.log("Benutzerinformationen anzeigen=", userInfo)
            //
            // // Daten teilen // _this.$store.commit("SET_TOKEN", jwt)
            // _this.$store.commit("SET_USERINFO", Benutzerinfo)
            //
            // // Holen // console.log("Ich habe _this.$store.getters.getUser")
            // konsole.log(_this.$store.getters.getUser)

            // _this.$router.push("/blogs")

          } anders {
            console.log('Fehler beim Senden!!');
            gibt false zurück;
          }
        });
      } anders {
        diese.$nachricht({
          showClose: wahr,
          Meldung: „Bitte geben Sie einen Fehler ein“,
          Typ: "Fehler"
        });
      }
    }

  }

}
</Skript>
<Stilbereich>
.el-button.disabled-style {
  Hintergrundfarbe: #EEEEEE;
  Farbe: #CCCCCC;
}

.demo-ruleForm {
  maximale Breite: 500px;
  Rand: 0 automatisch;
}
</Stil>