SMS login and registration
1. Page style and input restriction and verification
<template> <div class="forget"> <div class="forget-header"> <div class="forget-list yss-border-1-b"> <div class="forget-list-label">Mobile phone number</div> <div class="forget-list-tel"> {<!-- -->{ prefixTel }} </div> <div class="forget-list-contain tel"> <input class="forget-list-core" v-model.trim="suffixTel" type="tel" @blur="verifyTel" placeholder="Please enter your phone number" maxlength="11" /> </div> <div class="list-error-wrap" v-show="telMessage"> <img src="../../../static/images/public/[email protected]" /> & amp;nbsp;<span>{<!-- -->{ telMessage }}</span> </div> </div> <div class="forget-list yss-border-1-b"> <div class="forget-list-label">Dynamic code</div> <div class="forget-list-contain"> <input class="forget-list-core" v-model.trim="imgCode" type="text" @blur="verifyImgCode" placeholder="Please enter the dynamic code" maxlength="5" /> </div> <div class="forget-list-code forget-img-code" @click="getImgPath"> <img v-if="imgCodePath" :src="imgCodePath" /> </div> <div class="list-error-wrap" v-show="imgCodeMessage"> <img src="../../../static/images/public/[email protected]" /> & amp;nbsp;<span>{<!-- -->{ imgCodeMessage }}</span> </div> </div> <div class="forget-list yss-border-1-b"> <div class="forget-list-label">Verification code</div> <div class="forget-list-contain"> <input class="forget-list-core" v-model.trim="telCode" type="text" @blur="verifyTelCode" placeholder="Please enter the verification code" maxlength="4" /> </div> <div :class="[ 'forget-list-code', 'forget-code-wrap', telCodeStatus ? 'code-commit' : '' ]" @click="getEmailCode" > <template v-if="countDown > 0"> Refetch {<!-- -->{ countDown }}s </template> <template v-else> Get verification code </template> </div> <div class="list-error-wrap" v-show="telCodeMessage"> <img src="../../../static/images/public/[email protected]" /> & amp;nbsp;<span>{<!-- -->{ telCodeMessage }}</span> </div> </div> <div class="forget-btn-wrap"> <button :class="['forget-btn', nextStatus ? 'commit' : '']" @click="onLogin" > Log in </button> </div> </div> </div> </template>
2. Obtain dynamic code, send SMS and log in
computed: {<!-- --> telCodeStatus() {<!-- --> if (this. countDown > 0) {<!-- --> return false; } if (!regularStudentNumber(this.suffixTel, 11)) {<!-- --> return false; } if (!regularImgAuthCode(this.imgCode)) {<!-- --> return false; } return true; }, nextStatus() {<!-- --> if ( regularStudentNumber(this.suffixTel, 11) & amp; & amp; regularImgAuthCode(this.imgCode) & amp; & amp; this.telCode.length == 4 ) {<!-- --> return true; } return false; } }, mounted() {<!-- --> this.initData(); }, getImgPath() {<!-- --> this.imgCodeMessage = ""; let uuid = (this.imgUuid = this.getUUID()); this.imgCodePath = `${<!-- -->uuid}`; console.log("Dynamic code===========>", this.imgCodePath); }, getUUID() {<!-- --> let uuidArr = []; let hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz"; for (let i = 0; i < 36; i ++ ) {<!-- --> uuidArr[i] = hexDigits.substr(Math.floor(Math.random() * 0x16), 1); } uuidArr[14] = "4"; uuidArr[19] = hexDigits.substr((uuidArr[19] & amp; 0x3) | 0x8, 1); uuidArr[8] = uuidArr[13] = uuidArr[18] = uuidArr[23] = "-"; let uuid = uuidArr. join(""); return uuid; }, initData() {<!-- --> this. prefixTel = ""; this. getImgPath(); this.suffixTel = ""; this.imgCode = ""; this.telCode = ""; this.telMessage = ""; this.imgCodeMessage = ""; this.telCodeMessage = ""; }, verifyTel() {<!-- --> if (!this.suffixTel) {<!-- --> this.telMessage = "Please enter your phone number"; return; } if (!regularStudentNumber(this.suffixTel, 11)) {<!-- --> this.telMessage = "Please enter your phone number correctly"; return; } this.telMessage = ""; return true; }, verifyImgCode() {<!-- --> if (!this.imgCode) {<!-- --> this.imgCodeMessage = "Please enter a dynamic code"; return; } if (!regularImgAuthCode(this.imgCode)) {<!-- --> this.imgCodeMessage = "Please enter the dynamic code correctly"; return; } this.imgCodeMessage = ""; return true; }, verifyTelCode() {<!-- --> if (!this.telCode) {<!-- --> this.telCodeMessage = "Please enter the verification code"; return; } if (this.telCode.length < 3) {<!-- --> this.telCodeMessage = "Please enter the verification code correctly"; return; } this.telCodeMessage = ""; return true; }, // get verification code getEmailCode() {<!-- --> console.log("Get verification code"); if (!this.telCodeStatus) {<!-- --> this. verifyTel(); this. verifyImgCode(); return; } Indicator.open("Loading..."); // eslint-disable-next-line no-undef ajaxMethod. doAjax( "Get SMS verification code interface", {<!-- --> phone: this.suffixTel, sid: this.imgUuid, authCode: this.imgCode, type: 5 }, (res) => {<!-- --> if (res. success) {<!-- --> console.log("Acquired SMS data ================", res); MessageBox({<!-- --> title: "Prompt Information", message: `The verification code has been sent, please check it`, confirmButtonText: "Got it" }); this. setCountDown(); return; } MessageBox({<!-- --> title: "Prompt Information", message: res. message, confirmButtonText: "Got it" }); }, () => {<!-- --> Indicator. close(); } ); }, setCountDown() {<!-- --> this. countDown = 60; this.timer & amp; & amp; clearInterval(this.timer); this.timer = setInterval(() => {<!-- --> this.countDown--; if (this. countDown <= 0) {<!-- --> clearInterval(this. timer); } }, 1000); }, // Log in onLogin() {<!-- --> if (!this.nextStatus) {<!-- --> return; } Indicator.open("Loading..."); // eslint-disable-next-line no-undef ajaxMethod. doAjax( "login interface", {<!-- --> phone: this.suffixTel, smsCode: this.telCode }, (res) => {<!-- --> if (res. success) {<!-- --> setLocalStorageBykey({<!-- --> key: "ticketLoginRestister", value: res.ticket }); // Return to the previous page after successful login this. $router. go(-1); return; } MessageBox({<!-- --> title: "Prompt Information", message: res. message, confirmButtonText: "Got it" }); }, () => {<!-- --> Indicator. close(); } ); }
3. Page style
.forget {<!-- --> width: 100%; height: 100%; padding: 0 25px; font-size: 0.32rem; box-sizing: border-box; } .forget-list {<!-- --> position: relative; width: 100%; display: flex; align-items: center; padding: 0.6rem 0 0.1rem; box-sizing: border-box; } .forget-list-label {<!-- --> color: #333; flex-shrink: 0; width: 1.8rem; } .forget-list-tel {<!-- --> padding: 0 0 0 10px; flex-shrink: 0; } .forget-list-contain {<!-- --> flex-grow: 1; padding: 0 10px; box-sizing: border-box; } .forget-list-contain.tel {<!-- --> padding: 0 10px 0 0; } .forget-list-core {<!-- --> appearance: none; border-radius: 0; border: 0; outline: 0; width: 100%; text-indent: 0; color: #333; word-break: break-all; } .forget-btn-wrap {<!-- --> width: 100%; padding: 0.6rem 0px; box-sizing: border-box; } .forget-btn {<!-- --> display: block; width: 100%; border: 0; outline: 0; appearance: none; text-align: center; font-size: 0.36rem; color: #fff; padding: 0.2rem 0; border-radius: 4px; box-sizing: border-box; opacity: 0.3; background-color: #2288ff; } .forget-code-wrap {<!-- --> color: #b1b1b1; font-size: 0.28rem; } .forget-btn.commit {<!-- --> opacity: 1; } .forget-code-wrap.code-commit {<!-- --> color: #2288ff; } .forget-list-code {<!-- --> flex-shrink: 0; } .list-error-wrap {<!-- --> position: absolute; left: 0; top: 0.3rem; font-size: 0.24rem; color: #ff5328; white-space: nowrap; } .list-error-wrap img {<!-- --> width: 10px; } .forget-img-code {<!-- --> width: 2rem; } .forget-img-code img {<!-- --> width: 100%; }