vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します

<テンプレート>
  <div class="box">
    <div class="box1">
      <span class="iconfont icon-zuojiantou 戻る" @click="goBack"></span>
    </div>
    <div class="box6">
      <b>携帯電話番号の登録</b>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  名前: "トップ",
  メソッド: {
    戻る() {
      this.$router.push("/ログイン");
    },
  },
};
</スクリプト>
 
<スタイルスコープ>
.box1 {
  幅: 100%;
  高さ: 0.5rem;
  下部マージン: 0.19rem;
}
 
スパン {
  フォントサイズ: 0.18rem;
  行の高さ: 0.5rem;
  フォントサイズ: 0.2rem;
}
 
。戻る {
  フォントサイズ: 0.25rem;
}
 
.box6 {
  幅: 100%;
  高さ: 0.66rem;
  マージン: 自動;
}
b {
  フォントサイズ: 0.24rem;
  フォントの太さ: 標準;
}
ｐ {
  フォントサイズ: 0.13rem;
  色: グレー;
  上マージン: 0.11rem;
}
</スタイル>

<テンプレート>
  <div class="box">
    <div class="box1">
      <div class="phone-container">
        +86
        <入力
          クラス="userphone"
          タイプ=""
          v-model="ユーザー名"
          placeholder="携帯電話番号を入力してください"
        />
      </div>
    </div>
 
    <div class="box2">
      <h3 @click="toSendCode">利用規約に同意して登録する</h3>
    </div>
    <div class="box3">
      <チェックボックスv-model="チェック済み">
        以下の契約書を読み、同意します。
          >Taobaoプラットフォームサービス契約、プライバシーポリシー、法的声明、Alipayサービス契約、Tianyiアカウント認証サービス条件</b
        >
      </チェックボックス>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
「axios」からaxiosをインポートします。
「vue」からVueをインポートします。
「vant」から Checkbox、Toast をインポートします。
 
Vue.use(チェックボックス);
Vue.js でトーストをインポートします。
エクスポートデフォルト{
  名前: "Num",
  データ: 関数 () {
    戻る {
      ユーザー名: "",
      コード: "",
      チェック済み: false、
    };
  },
  メソッド: {
    // 電話番号を確認する checkPhone(phone) {
      reg = /^1[3|4|5|7|8][0-9]{9}$/とします。
      reg.test(phone) を返します。
    },
 
    コード送信() {
      if (this.checked) {
        if (this.checkPhone(this.usernum)) {
          アクシオス({
            url: `/auth/code/?phone=${this.usernum}`,
          }).then((res) => {
            コンソールログ(res);
            （res.status == 200）の場合{
              localStorage.setItem("userPhone", this.usernum);
              Toast("確認コードが正常に送信されました");
              this.$router.push("/inputCode");
            }
          });
        } それ以外 {
          Toast("電話番号を確認してください");
        }
      } それ以外 {
        Toast("まずは利用規約をご確認ください");
      }
    },
  },
};
</スクリプト>
 
<スタイルスコープ>
.box1 {
  幅: 100%;
  高さ: 0.7rem;
}
 
.box1 b {
  上マージン: 0.25rem;
  フォントの太さ: 標準;
}
 
.phone-container {
  幅: 100%;
  パディング: 0.1rem 0;
  下マージン: 0.4rem;
  位置: 相対的;
}
.phone-container > span {
  位置: 絶対;
  フォントサイズ: 0.16rem;
  色: #666;
  トップ：0.21rem;
}
入力{
  境界線: なし;
  アウトライン: なし;
}
 
入力::-webkit-入力プレースホルダー {
  フォントサイズ: 0.2rem;
  色: rgb(216, 214, 214);
}
.userphone {
  表示: ブロック;
  幅: 100%;
  高さ: 0.4rem;
  ボックスのサイズ: 境界線ボックス;
  パディング: 0 0.3rem;
  左パディング: 0.4rem;
  フォントサイズ: 0.2rem;
  ボーダーボトム: 0.01rem 実線 #eee;
}
.box2 {
  幅: 100%;
  高さ: 0.5rem;
  上マージン: 0.2rem;
}
 
.box2 h3 {
  幅: 100%;
  高さ: 0.4rem;
  背景色: 黄色;
  境界線の半径: 0.15rem;
  フォントサイズ: 0.18rem;
  テキスト配置: 中央;
  行の高さ: 0.3rem;
  上マージン: 0.1rem;
  フォントの太さ: 600;
  行の高さ: 0.4rem;
  文字間隔: 0.02rem;
  色: rgba(87, 42, 42, 0.623);
}
 
.box3 {
  幅: 100%;
  高さ: 0.3rem;
  上マージン: 3.4rem;
  フォントサイズ: 0.12rem;
}
 
.box3 b {
  フォントの太さ: 標準;
  色:ディープスカイブルー;
}
</スタイル>