阅读时间预计5分钟,干货满满,记得点赞加收藏哦😄

🎉Vue构建大型单页面电商应用开源啦!点我看源码🚀🚀

一、写在前面

各位掘友久等了,最近在写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());
    },