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

第19章個(gè)人中心頁(yè)開(kāi)發(fā)課件V1.0

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

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

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

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

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

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

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

token

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

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