Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.

<Vorlage>
  <div Klasse="Box">
    <div Klasse="Box1">
      <span class="iconfont icon-zuojiantou zurück" @click="goBack"></span>
    </div>
    <div Klasse="box6">
      <b>Mobiltelefonnummernregistrierung</b>
    </div>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Name: "Oben",
  Methoden: {
    geh zurück() {
      dies.$router.push("/Login");
    },
  },
};
</Skript>
 
<Stilbereich>
.box1 {
  Breite: 100 %;
  Höhe: 0,5rem;
  Rand unten: 0,19rem;
}
 
Spanne {
  Schriftgröße: 0,18rem;
  Zeilenhöhe: 0,5rem;
  Schriftgröße: 0,2rem;
}
 
.zurück {
  Schriftgröße: 0,25rem;
}
 
.box6 {
  Breite: 100 %;
  Höhe: 0,66rem;
  Rand: automatisch;
}
B {
  Schriftgröße: 0,24rem;
  Schriftstärke: normal;
}
P {
  Schriftgröße: 0,13rem;
  Farbe: grau;
  Rand oben: 0,11rem;
}
</Stil>

<Vorlage>
  <div Klasse="Box">
    <div Klasse="Box1">
      <div Klasse="Telefon-Container">
        +86
        <Eingabe
          Klasse="Benutzertelefon"
          Typ=""
          v-model="Benutzernummer"
          Platzhalter="Bitte geben Sie Ihre Handynummer ein"
        />
      </div>
    </div>
 
    <div Klasse="Box2">
      <h3 @click="toSendCode">Vereinbarung zustimmen und registrieren</h3>
    </div>
    <div Klasse="Box3">
      <van-checkbox v-model="aktiviert">
        Habe die folgende Vereinbarung gelesen und stimme ihr zu:
          >Taobao-Plattform-Servicevereinbarung, Datenschutzrichtlinie, rechtliche Hinweise, Alipay-Servicevereinbarung, Tianyi-Kontoauthentifizierungs-Servicebedingungen</b
        >
      </van-checkbox>
    </div>
  </div>
</Vorlage>
 
<Skript>
importiere Axios von „Axios“;
importiere Vue von „vue“;
importiere { Checkbox, Toast } von "vant";
 
Vue.use(Kontrollkästchen);
Vue.use(Toast);
Standard exportieren {
  Name: "Nummer",
  Daten: Funktion () {
    zurückkehren {
      Benutzernummer: "",
      Code: "",
      geprüft: falsch,
    };
  },
  Methoden: {
    // Telefonnummer überprüfen checkPhone(phone) {
      sei reg = /^1[3|4|5|7|8][0-9]{9}$/;
      return reg.test(Telefon);
    },
 
    zuSendCode() {
      wenn (dies.überprüft) {
        wenn (dieses.checkPhone(diese.usernum)) {
          axios({
            URL: `/auth/code/?phone=${this.usernum}`,
          }).then((res) => {
            konsole.log(res);
            wenn (res.status == 200) {
              localStorage.setItem("Benutzertelefon", this.Benutzernummer);
              Toast("Bestätigungscode erfolgreich gesendet");
              dies.$router.push("/inputCode");
            }
          });
        } anders {
          Toast("Bitte überprüfen Sie Ihre Telefonnummer");
        }
      } anders {
        Toast("Bitte lesen Sie zuerst die Benutzervereinbarung");
      }
    },
  },
};
</Skript>
 
<Stilbereich>
.box1 {
  Breite: 100 %;
  Höhe: 0,7rem;
}
 
.box1 b {
  Rand oben: 0,25rem;
  Schriftstärke: normal;
}
 
.Telefon-Container {
  Breite: 100 %;
  Polsterung: 0,1rem 0;
  Rand unten: 0,4rem;
  Position: relativ;
}
.phone-container > span {
  Position: absolut;
  Schriftgröße: 0,16rem;
  Farbe: #666;
  oben: 0,21rem;
}
Eingabe {
  Rand: keiner;
  Gliederung: keine;
}
 
Eingabe::-WebKit-Eingabe-Platzhalter {
  Schriftgröße: 0,2rem;
  Farbe: rgb(216, 214, 214);
}
.Benutzertelefon {
  Anzeige: Block;
  Breite: 100 %;
  Höhe: 0,4rem;
  Box-Größe: Rahmenbox;
  Polsterung: 0 0,3rem;
  Polsterung links: 0,4rem;
  Schriftgröße: 0,2rem;
  Rahmen unten: 0,01rem durchgezogen #eee;
}
.box2 {
  Breite: 100 %;
  Höhe: 0,5rem;
  Rand oben: 0,2rem;
}
 
.box2 h3 {
  Breite: 100 %;
  Höhe: 0,4rem;
  Hintergrundfarbe: gelb;
  Randradius: 0,15rem;
  Schriftgröße: 0,18rem;
  Textausrichtung: zentriert;
  Zeilenhöhe: 0,3rem;
  Rand oben: 0,1rem;
  Schriftstärke: 600;
  Zeilenhöhe: 0,4rem;
  Buchstabenabstand: 0,02rem;
  Farbe: rgba (87, 42, 42, 0,623);
}
 
.box3 {
  Breite: 100 %;
  Höhe: 0,3rem;
  Rand oben: 3,4rem;
  Schriftgröße: 0,12rem;
}
 
.box3 b {
  Schriftstärke: normal;
  Farbe: tiefes Himmelblau;
}
</Stil>