Vue.js 超詳細(xì)入門與項目實(shí)戰(zhàn)（微課視頻版）課件 第19章 個人中心頁開發(fā)

第19章個人中心頁開發(fā)課件V1.0

教學(xué)內(nèi)容第一節(jié)

我的訂單功能第二節(jié)我的收藏功能第三節(jié)

管理收貨地址第四節(jié)生成訂單功能知識目標(biāo)教學(xué)目標(biāo)理解

van-address-list組件使用的方法理解并掌握

van-address-edit組件的使用方法理解并掌握全局狀態(tài)和方法的使用過程知識點(diǎn)預(yù)覽#節(jié)知識點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用19C19-01我的訂單功能1、頁面效果

2、組件代碼3、全局狀態(tài)和方法C19-02我的收藏功能1、頁面效果2、組件代碼3、全局狀態(tài)和方法C19-03管理收貨地址1、頁面效果2、組件代碼3、全局狀態(tài)與方法C19-04生成訂單功能1、頁面效果2、組件代碼3、全局狀態(tài)與方法

商城購物是用戶的個人行為，必須登錄后才能進(jìn)行，登錄后獲取用戶的唯一憑證數(shù)據(jù)，通常是登錄返回的

token

值，通過該數(shù)據(jù)，進(jìn)入用戶的個人中心頁，在個人中心頁，可以查看自己的訂單信息，包括全部訂單、待付款、待收貨和待評價狀態(tài)的訂單數(shù)據(jù)。我的訂單功能

在src/components目錄下，新建一個名稱為my的文件夾，該文件夾保存所有與個人中心相關(guān)的組件，目錄結(jié)構(gòu)如圖所示。在目錄結(jié)構(gòu)中，RtInfo是顯示用戶信息組件，用于展示用戶資料，RtOrder是顯示我的訂單組件。在顯示全部訂單數(shù)據(jù)時，先獲取保存全部訂單數(shù)據(jù)的全局狀態(tài)數(shù)組變量orders，并遍歷該變量。當(dāng)點(diǎn)擊“取消訂單”按鈕時，觸發(fā)自定義的函數(shù)delete_orders_act，在該函數(shù)中，將根據(jù)傳入的訂單Id號，刪除對應(yīng)的訂單數(shù)據(jù)信息。組件代碼打開本項目src/store目錄下的shopStore文件，其中，用于顯示用戶信息和管理訂單的全局狀態(tài)和方法的代碼中，用戶在打開本項目首頁時，將會調(diào)用edit_userInfo_act方法，更新全局的用戶狀態(tài)變量userInfo，以便于后續(xù)在用戶中心的數(shù)據(jù)顯示。當(dāng)用戶在“我的訂單”頁中，點(diǎn)擊“取消訂單”按鈕時，將會傳入一個訂單的Id號給全局的刪除函數(shù)delete_orders_act，該函數(shù)將根據(jù)傳Id號，在訂單數(shù)組中，查找對應(yīng)的索引號，并調(diào)用數(shù)組中的splice方法，刪除指定索引號的訂單記錄。全局狀態(tài)和方法在查看動態(tài)列表詳情頁中，可以收藏某一條動態(tài)信息，在瀏覽商品詳細(xì)頁中，也可以收藏某一件商品，當(dāng)這些數(shù)據(jù)被收藏后，在用戶的個人中心頁就可以通過我的收藏功能，使用選項卡的形式，查看已收藏的各種類型數(shù)據(jù)，同時，還可以取消某一個收藏。我的收藏功能在目錄結(jié)構(gòu)中，由名為RtCollectList的組件實(shí)現(xiàn)我的收藏功能。在代碼中，先從全局狀態(tài)數(shù)組變量collects中過濾出不同類型的數(shù)據(jù)，如果type值為1表示商品數(shù)據(jù)，過濾后保存到組件變量cprods中，如果type值為2，表示動態(tài)數(shù)據(jù)，過濾后保存到組件變量cnews中，這兩個過濾后的變量將作為選項卡的數(shù)據(jù)源。在遍歷保存商品信息的收藏數(shù)組cprods時，由于商品收藏列表僅保存了商品的Id號，想獲取商品的其他信息，則需要再調(diào)用自定義的函數(shù)getProdById，由該函數(shù)通過傳入的商品的Id號獲取商品的信息。在商品收藏列表中，可以刪除收藏或?qū)⑹詹丶尤胭徫镘囍?。?dāng)用戶點(diǎn)擊“購物車”圖標(biāo)時，將調(diào)用自定義的函數(shù)addCollects。在文章收藏列表中，只有一個刪除收藏文章的功能，它的實(shí)現(xiàn)過程與刪除收藏商品基本相同。組件代碼打開本項目src/store目錄下的shopStore文件，其中，用于顯示我的收藏的全局狀態(tài)和方法代碼中，當(dāng)刪除收藏數(shù)據(jù)時，先查詢收藏數(shù)組中傳入Id的索引號，再調(diào)用數(shù)組中的splice方法，刪除指定索引號的收藏記錄，實(shí)現(xiàn)取消收藏的功能。全局狀態(tài)和方法當(dāng)用戶確認(rèn)商品信息，提交訂單時，需要添加自己的收貨地址，收貨地址的添加和展示可以通過Vant框架中的業(yè)務(wù)組件van-address-list和van-address-edit實(shí)現(xiàn)，前者用于展示地址信息列表，后者用于增加、編輯和刪除地址信息。管理收貨地址在目錄結(jié)構(gòu)中，子目錄address文件夾下名為RtEdit和RtList的組件分別實(shí)現(xiàn)收貨地址的編輯和顯示功能。無論是增加還是編輯地址數(shù)據(jù)，在選擇省市縣下拉列表時，必須先導(dǎo)入areaList數(shù)據(jù)，并將該數(shù)據(jù)綁定到van-address-edit組件的area-list屬性中，才有省市縣聯(lián)動選擇的數(shù)據(jù)。此外，當(dāng)用戶點(diǎn)擊“刪除”按鈕時，將會傳入需要刪除的地址列表索引號，并根據(jù)該索引號，調(diào)用全局地址狀態(tài)變量刪除的方法delete_addressInfo_act，刪除對應(yīng)的地址信息。組件代碼打開本項目src/store目錄下的shopStore文件，其中，用于顯示和管理收貨地址的全局狀態(tài)和方法代碼中，當(dāng)用戶增加地址信息時，必須將國家省市區(qū)縣的數(shù)據(jù)組合后，保存在地址變量中，當(dāng)用戶編輯地址信息時，將會根據(jù)索引號，替換對應(yīng)的數(shù)組元素，刪除地址信息時，根據(jù)傳入的索引號，調(diào)用數(shù)組中的splice方法，刪除指定索引號的數(shù)據(jù)。全局狀態(tài)與方法當(dāng)用戶確定購物車商品信息，點(diǎn)擊“提交訂單”按鈕后，如果未新建收貨地址，則添加收貨地址，添加后，自動使用該收貨地址，生成訂單，并進(jìn)入訂單結(jié)算中心頁，如果已經(jīng)添加了收貨地址，則直接使用該收貨地址，生成訂單后進(jìn)入訂單結(jié)算中心頁。生成訂單功能在src/components目錄下，新建一個名稱為pay的文件夾，該文件夾保存所有與結(jié)算支付相關(guān)的組件，目錄結(jié)構(gòu)如圖所示。在目錄結(jié)構(gòu)中，RtIndex是生成訂單的組件，用于獲取收貨地址、購物車信息，并生成訂單。在目錄結(jié)構(gòu)中，RtPaySuccess組件用于顯示訂單支付成功的信息，并提供訂單詳細(xì)查看和返回首頁的鏈接。組件代碼打開本項目src/store目錄下的shopStore