閱讀時間預計5分鐘,乾貨滿滿,記得點贊加收藏哦😄
原文鏈接
一、寫在前面
各位小夥伴久等了,最近在寫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甜小白系列專欄:
-
每週一道算法題系列
最後感謝您的關注!
我的GitHub,希望能得到你的小星星~
希望我的分享對你能有幫助,有不正確的地方也希望得到您的勘誤!本人將不勝感激,另外如果你想獲取前端整期學習視頻和資料掃一掃下面的二維碼,回覆學習即可,也希望在前端進階的路上,我們一起成長,一起進步!
