April 2019

Share some of the latest gadgets

When you log in with your mobile phone number, you can see that there are two buttons (get the verification code and log in) and two boxes (input the mobile phone number and input the verification code) by analyzing the page

So we have the following device (we don't look at the specific functions, we just look at the structure)

 < template > 
 < div class = "login wrapper" > 
 < div class = "title bar" > login < / div > 
 < div class = "wrapper phone wrapper" > 
 < span class = "title" > mobile number < / span > < input class = "input phone" type = text "placeholder =" mobile number "> 
 < / div > 
 < div class =" wrapper code wrapper "> 
 < span Class = "title" > captcha < / span > < input class = "input code" type = "number" placeholder "> 
 < div class =" send "> get verification code < / div > < / div > < div class =" wrapper BTN wrapper "> 
 < div class =" input BTN "> login < / div > < / div > < / div > < / template > login

At this time, you can start to write the logic. It is also a simple analysis. To login, you need to click to get the verification code, and you can count back the number of seconds. In other words, you can dynamically modify the text. You can check and limit the number of mobile phone numbers and the number of verification codes.

It's almost like the following

 < template > 
 < div class = "login wrapper" > 
 < div class = "title bar" > login < / div > 
 < div class = "wrapper phone wrapper" > 
 < span class = "title" > mobile number < / span > < input class = "input phone" type = text "placeholder =" mobile number "
: value =" phone "
 ref =" phone "v-on: change =" changephone " V-on: input = "changephone" > 
 < / div > 
 < div class = "wrapper code wrapper" > 
 < span class = "title" > verification code < / span > < input class = "input code" type = "number" placeholder = "verification code" 
: value = "code" 
 ref = "code" v-on: change = "changecode" v-on: input = "changecode" > 
 < div @Log in < / div > < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < / div > < / div > < / div > < div > < / div > < div > < / template > < script > < script > < name: Name: "loginpphone", data() {data() {return return return return {photo photo photo photo > < 10 < script > < script > < script > < name: "loginpphone", "data(), data() {return return return {{photo photo photo {photo photo photo > < 10 < script > < script > < name:" loginpphone "," data(), data(), data() {data() return {return {ne: ', / / the mobile phone number in the input box Code: ', / / the verification code 
 codetext:' get verification code ', / / the countdown display text 
 timingboard: 60, / / countdown 
 timer: null, / / a timer is used to count down the verification code 
}, 
 methods: {logincode() {}, //Get the verification code 
 login() {}, / / log in to 
 changephone() {}, / / check the length of mobile phone number 
 changecode() {}, / / check the length of verification code 
} 
 < / script >

These are enough for you to implement a basic mobile phone login interface. For complete code, please click below Gist link

For complete code, refer to: https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48