Vue implementiert einen Login-Verifizierungscode

<Vorlage>
    <div Klasse="s-canvas">
        <canvas id="s-canvas" :width="Inhaltsbreite" :height="Inhaltshöhe"></canvas>
    </div>
</Vorlage>
 
<Skript>
    Standard exportieren {
        Name: "SIdentify",
        Requisiten: {
            Identifizierungscode:
                Typ: Zeichenfolge,
                Standard: „1234“
            },
            SchriftgrößeMin: {
                Typ: Nummer,
                Standard: 25
            },
            SchriftgrößeMax: {
                Typ: Nummer,
                Standard: 30
            },
            HintergrundFarbeMin: {
                Typ: Nummer,
                Standard: 255
            },
            HintergrundFarbeMax: {
                Typ: Nummer,
                Standard: 255
            },
            FarbeMin:
                Typ: Nummer,
                Standard: 0
            },
            FarbeMax: {
                Typ: Nummer,
                Standard: 160
            },
            LinienfarbeMin: {
                Typ: Nummer,
                Standard: 100
            },LinienfarbeMax: {
                Typ: Nummer,
                Standard: 255
            },
            PunktFarbeMin: {
                Typ: Nummer,
                Standard: 0
            },
            PunktFarbeMax: {
                Typ: Nummer,
                Standard: 255
            },
            Inhaltsbreite: {
                Typ: Nummer,
                Standard: 112
            },
            Inhaltshöhe: {
                Typ: Nummer,
                Standard: 31
            }
        },
        Methoden: {
            // Erzeuge eine Zufallszahl randomNum(min, max) {
                gibt Math.floor(Math.random() * (max - min) + min) zurück
            },
            // Erzeuge eine zufällige Farbe randomColor(min, max) {
                sei r = diese.Zufallszahl(min, max)
                sei g = diese.Zufallszahl(min, max)
                sei b = diese.Zufallszahl(min, max)
                gibt 'rgb(' + r + ',' + g + ',' + b + ')' zurück
            },
            zeichneBild() {
                let Leinwand = Dokument.getElementById('s-canvas')
                lass ctx = canvas.getContext('2d')
                ctx.textBaseline = "unten"
                // Zeichne den Hintergrund ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
                ctx.fillRect(0, 0, diese.Inhaltsbreite, diese.Inhaltshöhe)
                // Text zeichnen für (let i = 0; i < this.identifyCode.length; i++) {
                    dies.drawText(ctx, dies.identifyCode[i], i)
                }
                dies.drawLine(ctx)
                dies.drawDot(ctx)
            },
            zeichneText(ctx, txt, i) {
                ctx.fillStyle = diese.randomColor(diese.colorMin, diese.colorMax)
                ctx.font = diese.randomNum(diese.fontSizeMin, diese.fontSizeMax) + 'px SimHei'
                sei x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
                sei y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
                var deg = diese.randomNum(-45, 45)
                // Koordinatenursprung und Drehwinkel ändern ctx.translate(x, y)
                ctx.rotate(Grad * Math.PI / 180)
                ctx.fillText(txt, 0, 0)
                // Koordinatenursprung und Drehwinkel wiederherstellen ctx.rotate(-deg * Math.PI / 180)
                ctx.translate(-x, -y)
            },
            zeichneLinie(ctx) {
                // Interferenzlinien zeichnen für (let i = 0; i < 5; i++) {
                    ctx.strokeStyle = diese.randomColor(diese.lineColorMin, diese.lineColorMax)
                    ctx.beginPath()
                    ctx.moveTo(diese.randomNum(0, diese.Inhaltsbreite), diese.randomNum(0, diese.Inhaltshöhe))
                    ctx.lineTo(diese.randomNum(0, diese.Inhaltsbreite), diese.randomNum(0, diese.Inhaltshöhe))
                    ctx.stroke()
                }
            },
            Punkt zeichnen(ctx) {
                // Zeichne Interferenzpunkte für (let i = 0; i < 80; i++) {
                    ctx.fillStyle = diese.randomColor(0, 255)
                    ctx.beginPath()
                    ctx.arc(diese.randomNum(0, diese.Inhaltsbreite), diese.randomNum(0, diese.Inhaltshöhe), 1, 0, 2 * Math.PI)
                    ctx.fill()
                }
            }
        },
        betrachten:
            identifiziereCode() {
                dieses.drawPic()
            }
        },
        montiert() {
            dieses.drawPic()
        }
    }
</Skript>
 
<Stilbereich>
    .s-Leinwand {
        Höhe: 38px;
 
    }
    .s-canvas Leinwand{
        Rand oben: 1px;
        Rand links: 8px;
    }
</Stil>

<style lang="less">
    @import './login.less';
</Stil>
 
<Vorlage>
    <div Klasse="login" @keydown.enter="handleSubmit">
        <div Klasse="login-con">
            <Karte :bordered="false" style="width: 350px;height: 380px">
                <div Klasse="form-con">
                    <Tabs Wert="Name1" :animiert="false">
                        <TabPane label="Anmelden" name="name1">
                            <Formular ref="loginFormular" :model="formular" :rules="regeln" :label-width="90" inline>
                                <FormItem label="Konto" prop="Benutzername">
                                    <Input v-model="form.username" placeholder="Bitte geben Sie Ihre Kontonummer ein" ref="input" clearable style="width: 200px"/>
                                </FormItem>
                                <FormItem label="Passwort" prop="Passwort">
                                    <Input v-model="form.password" placeholder="Bitte geben Sie Ihr Passwort ein" clearable style="width: 200px"/>
                                </FormItem>
                                <FormItem label="VerifizierungsCode" prop="VerifizierungsCode">
                                    <Input v-model="form.verificationCode" placeholder="Bitte geben Sie den Bestätigungscode ein" clearable style="width: 200px"/>
                                    <div @click="refreshCode" style="margin-top: 20px">
                                        <!--Bestätigungscode-Komponente-->
                                        <s-identify :identifyCode="identifyCode"></s-identify>
                                    </div>
                                </FormItem>
                                <div Stil="Textausrichtung: Mitte">
                                    <Button @click="handleSubmit" type="primary" style="margin-right: 20px">Anmelden</Button>
                                </div>
                            </Form>
                        </TabPane>
                        <TabPane label="Registrieren" name="name2">
                            <Formular ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90" inline>
                                <FormItem label="Konto" prop="Benutzername">
                                    <Input v-model="formValidate.username" placeholder="Bitte geben Sie Ihre Kontonummer ein" ref="input" clearable style="width: 200px"/>
                                </FormItem>
                                <FormItem label="Passwort" prop="Passwort">
                                    <Input v-model="formValidate.password" placeholder="Bitte geben Sie Ihr Passwort ein" clearable style="width: 200px"/>
                                </FormItem>
                                <FormItem label="Mobilnummer" prop="mobile">
                                    <Input v-model="formValidate.mobile" placeholder="Bitte geben Sie Ihre Handynummer ein" clearable style="width: 200px" />
                                </FormItem>
                                <FormItem label="SMS-Bestätigungscode" prop="header">
                                    <Input v-model="formValidate.header" placeholder="SMS-Bestätigungscode" style="width: 200px"/>
                                    <Button Typ="primär" Größe="klein" @click="getCode" :disabled="codeDisabled">{{codeMsg}}</Button>
                                </FormItem>
                                <div Stil="Textausrichtung: Mitte">
                                    <Button type="primary" @click="register('formValidate')">Registrieren</Button>
                                </div>
                            </Form>
                        </TabPane>
                    </Tabs>
                </div>
            </Karte>
        </div>
        <!--<vue-partikel
                Farbe: "FF4500"
                :Partikelopacity="0,7"
                :Partikelanzahl="300"
                ShapeType = "Kreis"
                :Partikelgröße="7"
                LinienFarbe="00FF00"
                :Zeilenbreite="2"
                :lineLinked="true"
                :Linienopacity="0,4"
                :LinienAbstand="150"
                :Bewegungsgeschwindigkeit="4"
                :hoverEffect="wahr"
                hoverMode="greifen"
                :KlickEffekt="true"
                Klickmodus="abwehren"
        >
        </vue-partikel>-->
    </div>
</Vorlage>
 
<Skript>
    Cookies von „js-cookie“ importieren;
    importiere {apiRequest, login, getCode} aus '@/service/service';
    importiere SIdentify aus „@/components/SIdentify“;
 
    Standard exportieren {
        Komponenten: { SIdentify },
        Name: 'Anmelden',
        Daten() {
            zurückkehren {
                bilden: {},
                formValidate: {},
                Regeln:
                    Benutzername: [
                        {erforderlich: true, Nachricht: ‚Der Login-Benutzername darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ],
                    Passwort: [
                        {erforderlich: true, Nachricht: ‚Das Anmeldekennwort darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ],
                    Bestätigungscode:
                        {erforderlich: true, Nachricht: ‚Der Bestätigungscode darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ]
                },
                RegelValidate: {
                    Benutzername: [
                        {erforderlich: true, Nachricht: ‚Der Login-Benutzername darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ],
                    Passwort: [
                        {erforderlich: true, Nachricht: ‚Das Anmeldekennwort darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ],
                    Handy: [
                        {erforderlich: true, Nachricht: ‚Telefonnummer darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ],
                    Kopfzeile: [
                        {erforderlich: true, Nachricht: ‚SMS-Bestätigungscode darf nicht leer sein‘, Auslöser: ‚unscharf‘}
                    ]
                },
                img:'../../static/grey_wolf.jpg',
                // Ob die Schaltfläche deaktiviert werden soll codeDisabled: false,
                // Countdown Sekunden Countdown: 60,
                // Der Text auf der Schaltfläche codeMsg: 'Bestätigungscode abrufen',
                //Timer Timer: null,
                Identifizierungscode: '',
                Identifizierungscodes: '1234567890abcdefjhijklinopqrsduvwxyz',
            };
        },
        Methoden: {
            // Bestätigungscode aktualisieren refreshCode () {
                this.identifyCode = ''
                dies.makeCode(diese.identifyCodes,4);
            },
            Code erstellen (o,l) {
                für (sei i = 0; i < l; i++) {
                    dieser.identifyCode += dieser.identifyCodes[diese.randomNum(0, dieser.identifyCodes.length)]
                }
            },
            Zufallszahl (min, max) {
                gibt Math.floor(Math.random() * (max - min) + min) zurück
            },
            // SMS-Bestätigungscode abrufen getCode() {
                // 60-Sekunden-Countdown für den Bestätigungscode if (!this.timer) {
                    dies.getValidStr();
                    this.timer = setInterval(this.getValidStr, 1000);
                }
                apiRequest(diese, getCode(diese.form.mobile), Antwort => {
                });
            },
            getValidStr(){
                wenn (dieser.Countdown > 0 und dieser.Countdown <= 60) {
                    dieser.Countdown--;
                    wenn (dieser.Countdown !== 0) {
                        this.codeMsg = "Erneut senden(" + this.countdown + ")";
                        this.codeDisabled = wahr;
                    } anders {
                        : ClearInterval(dieser.Timer);
                        this.codeMsg = "Bestätigungscode abrufen";
                        dieser.Countdown = 60;
                        dieser.timer = null;
                        this.codeDisabled = falsch;
                    }
                }
            },
            handleSubmit() {
                dies.$refs.loginForm.validate((gültig) => {
                    if (gültig) {
                        // MD5-Verschlüsselung des Anmeldekennworts let password = this.$copyto.md5(this.form.password);
                        //Anforderung der Anmeldeschnittstelle apiRequest(this, login(this.form.username, password), response => {
                            dies.$store.commit('setUserInfo', response.data);
                            Cookies.set('Benutzer', this.form.username);
                            Cookies.set('Benutzer-ID', Antwort.Daten.ID);
                            localStorage.sessionId = response.sessionId
                            dies.$store.commit('setAvator', '');
                            wenn (dieses.Formular.Benutzername === 'admin') {
                                Cookies.set('Zugriff', 0);
                            } anders {
                                Cookies.set('Zugriff', 1);
                            }
                            dies.$router.push({name: 'home_index'});
                        });
                    }
                });
            },
            registrieren() {
            }
        },
        montiert () {
            // Initialisiere den Bestätigungscode this.identifyCode = ''
            dies.makeCode(diese.identifyCodes, 4)
        },
 
    };
</Skript>
 
<Stil>
 
</Stil>