Vue電商項目-登陸註冊

閱讀時間預計5分鐘,乾貨滿滿,記得點贊加收藏哦😄
項目已開源 猛戳我獲取源碼

1、寫在前面

各位小夥伴,最近在寫Vue全家桶+Vant從零開發搭建電商App實戰項目,項目基本完結,後面會不按期分享出來,期待各位小夥伴的關注。

2、註冊登陸

註冊登陸,幾乎是全部電商App必備模塊,正好今天想把這塊知識拆出來,詳盡的寫下來了,用過掘金的小夥伴都知道,掘金PC端的登陸界面很是的萌,當你輸入帳號的時候萌貓會很開心,輸入密碼的時候,萌貓會捂眼睛,看到這個可愛的設計,着實讓我喜歡,因此我就借鑑了掘金的萌貓圖寫了個登陸註冊模塊,如下是完整UI.

3、總體UI搭建思路

UI部分很是的簡單,總體就是最外層一個大盒子放一張圖片,裏面放一張小盒子設備邊框圓角,而後把萌貓定位到小盒子的頂部中間位置,而後藉助Vant來完成相關輸入框,按鈕的搭建.

4、Vant 使用

Vant是有贊開源的很適合作電商App的UI組件,用起來很是爽,我整個項目都採用Vant UI搭建,風格統一,使用簡單方便.
首先將Vant引入到項目中,建議建立一個單獨的文件來管理Vant的組件引入模塊,按需加載,原則是用哪一個就加載哪一個.

註冊登陸的切換用到了Vant的標籤頁組件,快速的實現登陸和註冊頁面的切換。

Vant tab按照文檔來,很是的簡單和好用。

輸入框用到了Vant的Field組件Vant Field

按鈕用到了Vant的Button組件Vant Button

5、萌貓切換

萌貓根據你所在的輸入框不一樣切換不一樣的樣式,其實就是三張圖片的切換,要麼一次把三張圖片都加載到頁面,而後經過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')
      }
    },

6、倒計時

倒計時其實就是個定時器,先設置好總時長,而後每秒減一,直到減到0,而後恢復按鈕點擊的狀態.

// 發送手機驗證碼
    sendVerifyCode () {
      Toast({
        message: '發送驗證碼',
        duration: 800

      });
      this.countDown = 60;
      this.timeIntervalID = setInterval(() => {
        this.countDown--;
        // 若是減到0 則清除定時器
        if (this.countDown == 0) {
          clearInterval(this.timeIntervalID);
        }
      }, 1000)
    }

7、手機號碼正則驗證

經過計算屬性來驗證輸入的手機號碼是否正確,而後在合適的位置調用這個計算屬性就能夠

computed: {
    // 手機號碼正確驗證
    phoneNumVerify () {
      return /[1][3,4,5,6,7,8][0-9]{9}$/.test(this.tel_registered);
    }
  },

8、驗證碼模塊

驗證碼其實就是img標籤請求接口獲取圖片,當點擊圖片的時候再次請求獲取最新的圖片.

// 切換驗證碼
    getCaptcha () {
      // 獲取驗證碼的標籤
      let captchaEle = this.$refs.captcha;
      this.$set(captchaEle, 'src', 'http://192.168.0.1/web/xlmc/api/captcha?time=' + new Date());
    },

9、總結

註冊登陸僅僅是整個項目的一部分,先分享出來,後面會將整個完整的電商項目分享出來,但願你們能點贊加關注,你的點贊能讓更多的人一塊兒學習,一塊兒進步😄

10、完整電商項目

首頁模塊

分類模塊

吃什麼模塊

購物車模塊

我的中心模塊

最後感謝您的關注!

個人GitHub,但願能獲得你的小星星~

但願個人分享對你能有幫助,有不正確的地方也但願獲得您的勘誤!本人將不勝感激,另外若是你想獲取前端整期學習視頻和資料掃一掃下面的二維碼,回覆 學習便可,也但願在前端進階的路上,咱們一塊兒成長,一塊兒進步!