一、写在前面各位掘友久等了,最近在写Vue全家桶+Vant从零开发搭建电商App实战项目,项目基本完结,后面会不定期分享出来,期待各位掘友的关注。
二、注册登录注册登录,几乎是所有电商App必备模块,正好今天想把这块知识拆出来,详尽的写下来了,用过掘金的小伙伴都知道,掘金PC端的登录界面非常的萌,当你输入账号的时候萌猫会很开心,输入密码的时候,萌猫会捂眼睛,看到这个可爱的设计,着实让我喜欢,所以我就借鉴了掘金的萌猫图写了个登录注册模块,以下是完整UI.


三、整体UI搭建思路UI部分非常的简单,整体就是最外层一个大盒子放一张图片,里面放一张小盒子设备边框圆角,然后把萌猫定位到小盒子的顶部中间位置,然后借助Vant来完成相关输入框,按钮的搭建.
四、Vant 使用Vant是有赞开源的很适合做电商App的UI组件,用起来非常爽,我整个项目都采用Vant UI搭建,风格统一,使用简单方便. 首先将Vant引入到项目中,建议创建一个单独的文件来管理Vant的组件引入模块,按需加载,原则是用哪个就加载哪个.
注册登录的切换用到了Vant的标签页组件,快速的实现登录和注册页面的切换。
Vant tab按照文档来,非常的简单和好用。
输入框用到了Vant的Field组件Vant Field
按钮用到了Vant的Button组件Vant Button
五、萌猫切换萌猫根据你所在的输入框不同切换不同的样式,其实就是三张图片的切换,要么一次把三张图片都加载到页面,然后通过v-show的方式来控制他们的显示,这种方式感觉有点麻烦,我采用数据驱动界面的方式,点击到哪个位置,就让img标签来加载哪张图片.
// 改变萌猫
changeImage (index) {
if (index == 0) {
this.imageURL = require('./../../images/login/greeting.png')
} else if (index == 1) {
this.imageURL = require('./../../images/login/blindfold.png')
} else {
this.imageURL = require('./../../images/login/normal.png')
}
},
复制代码六、倒计时倒计时其实就是个定时器,先设置好总时长,然后每秒减一,直到减到0,然后恢复按钮点击的状态.
// 发送手机验证码
sendVerifyCode () {
Toast({
message: '发送验证码',
duration: 800
});
this.countDown = 60;
this.timeIntervalID = setInterval(() => {
this.countDown--;
// 如果减到0 则清除定时器
if (this.countDown == 0) {
clearInterval(this.timeIntervalID);
}
}, 1000)
}
复制代码七、手机号码正则验证通过计算属性来验证输入的手机号码是否正确,然后在合适的位置调用这个计算属性就可以
computed: {
// 手机号码正确验证
phoneNumVerify () {
return /[1][3,4,5,6,7,8][0-9]{9}$/.test(this.tel_registered);
}
},
复制代码八、验证码模块验证码其实就是img标签请求接口获取图片,当点击图片的时候再次请求获取最新的图片.
// 切换验证码
getCaptcha () {
// 获取验证码的标签
let captchaEle = this.$refs.captcha;
this.$set(captchaEle, 'src', 'http://192.168.0.1/web/xlmc/api/captcha?time=' + new Date());
},
复制代码九、总结注册登录仅仅是整个项目的一部分,先分享出来,后面会将整个完整的电商项目分享出来,希望大家能点赞加关注,你的点赞能让更多的人一起学习,一起进步?
十、完整电商项目首页模块

分类模块

吃什么模块

购物车模块


个人中心模块
往期分享链接Vue甜小白系列专栏:
Vue从甜小白到皮大佬系列(一) Vue是个啥?
Vue从甜小白到皮大佬系列(二) v-指令
Vue从甜小白到皮大佬系列(三) 生命周期
Vue从甜小白到皮大佬系列(四) 自定义指令
Vue从甜小白到皮大佬系列(五) 组件
Vue从甜小白到皮大佬系列(六) 组件通信
Vue从甜小白到皮大佬系列(七) Vue Router
Vue从甜小白到皮大佬系列(八) Vuex
每周一道算法题系列
逆波兰表达式求值
斐波那契数列
合并两个有序链表
作者：极客James
链接：https://juejin.im/post/5dafc91a6fb9a04e4047a713