用vue實現(xiàn)注冊頁效果?vue實現(xiàn)短信驗證碼登錄

更新時間：2021年11月22日 12:20:56 作者：model-01

這篇文章主要為大家詳細介紹了用vue實現(xiàn)注冊頁，短信驗證碼登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)注冊頁效果的具體代碼，供大家參考，具體內(nèi)容如下

一、實現(xiàn)效果圖

二、實現(xiàn)代碼

1、實現(xiàn)頭部

<template>
  <div class="box">
    <div class="box1">
      <span class="iconfont icon-zuojiantou back" @click="goBack"></span>
    </div>
    <div class="box6">
      <b>手機號注冊</b>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Top",
  methods: {
    goBack() {
      this.$router.push("/Login");
    },
  },
};
</script>
 
<style scoped>
.box1 {
  width: 100%;
  height: 0.5rem;
  margin-bottom: 0.19rem;
}
 
span {
  font-size: 0.18rem;
  line-height: 0.5rem;
  font-size: 0.2rem;
}
 
.back {
  font-size: 0.25rem;
}
 
.box6 {
  width: 100%;
  height: 0.66rem;
  margin: auto;
}
b {
  font-size: 0.24rem;
  font-weight: normal;
}
p {
  font-size: 0.13rem;
  color: gray;
  margin-top: 0.11rem;
}
</style>

2、實現(xiàn)注冊內(nèi)容

<template>
  <div class="box">
    <div class="box1">
      <div class="phone-container">
        <span>+86</span>
        <input
          class="userphone"
          type=""
          v-model="usernum"
          placeholder="請輸入手機號碼"
        />
      </div>
    </div>
 
    <div class="box2">
      <h3 @click="toSendCode">同意協(xié)議并注冊</h3>
    </div>
    <div class="box3">
      <van-checkbox v-model="checked">
        已閱讀并同意以下協(xié)議：<b
          >淘寶平臺服務協(xié)議、隱私權(quán)政策、法律聲明、支付寶服務協(xié)議、天翼賬號認證服務條款</b
        >
      </van-checkbox>
    </div>
  </div>
</template>
 
<script>
import axios from "axios";
import Vue from "vue";
import { Checkbox, Toast } from "vant";
 
Vue.use(Checkbox);
Vue.use(Toast);
export default {
  name: "Num",
  data: function () {
    return {
      usernum: "",
      code: "",
      checked: false,
    };
  },
  methods: {
    // 驗證手機號
    checkPhone(phone) {
      let reg = /^1[3|4|5|7|8][0-9]{9}$/;
      return reg.test(phone);
    },
 
    toSendCode() {
      if (this.checked) {
        if (this.checkPhone(this.usernum)) {
          axios({
            url: `/auth/code/?phone=${this.usernum}`,
          }).then((res) => {
            console.log(res);
            if (res.status == 200) {
              localStorage.setItem("userPhone", this.usernum);
              Toast("驗證碼發(fā)送成功");
              this.$router.push("/inputCode");
            }
          });
        } else {
          Toast("請檢查您的手機號");
        }
      } else {
        Toast("請先勾選用戶協(xié)議");
      }
    },
  },
};
</script>
 
<style scoped>
.box1 {
  width: 100%;
  height: 0.7rem;
}
 
.box1 b {
  margin-top: 0.25rem;
  font-weight: normal;
}
 
.phone-container {
  width: 100%;
  padding: 0.1rem 0;
  margin-bottom: 0.4rem;
  position: relative;
}
.phone-container > span {
  position: absolute;
  font-size: 0.16rem;
  color: #666;
  top: 0.21rem;
}
input {
  border: none;
  outline: none;
}
 
input::-webkit-input-placeholder {
  font-size: 0.2rem;
  color: rgb(216, 214, 214);
}
.userphone {
  display: block;
  width: 100%;
  height: 0.4rem;
  box-sizing: border-box;
  padding: 0 0.3rem;
  padding-left: 0.4rem;
  font-size: 0.2rem;
  border-bottom: 0.01rem solid #eee;
}
.box2 {
  width: 100%;
  height: 0.5rem;
  margin-top: 0.2rem;
}
 
.box2 h3 {
  width: 100%;
  height: 0.4rem;
  background-color: yellow;
  border-radius: 0.15rem;
  font-size: 0.18rem;
  text-align: center;
  line-height: 0.3rem;
  margin-top: 0.1rem;
  font-weight: 600;
  line-height: 0.4rem;
  letter-spacing: 0.02rem;
  color: rgba(87, 42, 42, 0.623);
}
 
.box3 {
  width: 100%;
  height: 0.3rem;
  margin-top: 3.4rem;
  font-size: 0.12rem;
}
 
.box3 b {
  font-weight: normal;
  color: deepskyblue;
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: