用vue實現註冊頁效果 vue實現簡訊驗證碼登入
阿新 • • 發佈:2021-11-23
本文例項為大家分享了實現註冊頁效果 的具體程式碼,供大家參考,具體內容如下
一、實現效果圖
二、實現程式碼
1、實現頭部
<template> <div class="box"> <div class="box1"> <span class="iconfont icon-zuojiantou back" @click="goBack"></span> </div> <div class="box6"> 手機號註冊 </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、實現註冊內容
<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">同意協議並註冊</h3> </div> <div class="box3"> <van-checkbox v-model="checked"> 已閱讀並同意以下協議:<b >淘寶平臺服務協議、隱私權客棧政策、法律宣告、支付寶服務協議、天翼賬號認證服務條款</b > </van-checkbox> </div> </div> </template> <script>www.cppcns.com; import axios from "axios"; import Vue from "vue"; import { Checkbox,Toast } from "vant"; Vue.use(Checkbox); Vue.use(Toast); export default { namezsJVeD: "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); zsJVeD if (res.status == 200) { localStorage.setItem("userPhone",this.usernum); Toast("驗證碼傳送成功"); this.$router.push("/inputCode"); } }); } else { Toast("請檢查您的手機號"); } } else { Toast("請先勾選使用者協議"); } },}; </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,0.623); } .box3 { width: 100%; height: 0.3rem; margin-top: 3.4rem; font-size: 0.12rem; } .box3 b { font-weight: normal; color: deepskyblue; } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。