實習總結

引言

過年期間去A公司實習了，實習期間作了一個汽車保養優惠的功能，迭代到A公司的官網裏。本來這個功能是已經有的，可是是用react寫的，A公司想改成vue的。我在此次項目裏負責的是UI界面的組件化實現。

項目描述

此項目首頁是優惠券的展現，優惠卷分爲三種：未使用，已使用，已過時。點擊優惠劵，跳入‘確認車型’個頁面。確認車型頁面主要是讓用戶輸入車牌號， 品牌車系以及排量年份。

在確認車型頁面點擊‘下一步’，進入‘預定保養’頁面。此頁面主要是顯示用戶信息，讓用戶選擇保養時間，以及提供修改用戶信息功能。

在‘預定保養’頁面點擊‘下一步’，進入‘配送完成’頁面。此頁面主要是讓用戶選擇使用哪些保養產品，並將產品送至哪家門店，並讓用戶選擇支付方式。

點擊‘提交訂單’，進入‘到店安裝’頁面。確認車型，預定保養，配送完成，以及到店安裝。

這四個頁面，每一個頁面上面，都有一個步驟條。

實施方法

UI界面的實現採用組件化思想。將公用部分封裝成組件，放入公用組件文件夾。將每一個頁面分模塊實現，模塊放入頁面所在文件夾的子文件夾裏面。

這樣作的好處是，能夠大大下降代碼之間的耦合度。

封裝的公用組件有：省鍵盤，通知組件，步驟條。

• 通知組件 組件接收四個參數：標題，內容，是否顯示‘取消’、‘肯定’按鈕，回調函數名稱。 第一個參數的默認值爲舒適提示，第二個參數必須傳遞，第三個參數默認值爲 我知道了 第四個參數是當有肯定按鈕時，而且用戶點擊了，則此時調用父組件傳遞的回調函數。
• 步驟條 此組件接受一個數字參數，以及一個數組，數組裏面是對象。對象裏面是圖片，以及文字。根據數字肯定當前進度在哪裏。