Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第18章 購物車開發(fā)

第18章購物車開發(fā)課件V1.0

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

購物車列表顯示功能第二節(jié)自動計(jì)算總價(jià)功能第三節(jié)

增減購物車商品功能第四節(jié)刪除購物車商品功能知識目標(biāo)教學(xué)目標(biāo)理解和掌握父子組件間相互傳參的方法掌握

showConfirmDialog組件的使用方法理解并掌握

van-submit-bar組件的使用過程知識點(diǎn)預(yù)覽#節(jié)知識點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用18C18-01購物車列表顯示功能1、頁面效果

2、組件代碼3、組件調(diào)用C18-02自動計(jì)算總價(jià)功能1、頁面效果2、組件代碼C18-03

增減購物車商品功能1、頁面效果2、組件代碼3、全局狀態(tài)與方法C18-04刪除購物車商品功能1、頁面效果2、組件代碼3、全局狀態(tài)與方法

購物車是商城的核心功能，通常以一個(gè)單獨(dú)的功能模塊進(jìn)行開發(fā)，當(dāng)用戶在商品詳細(xì)頁或其他頁面點(diǎn)擊購物車鏈接可圖標(biāo)后，便跳轉(zhuǎn)到購物車列表頁中；如果重復(fù)添加某件商品到購物車中，那么，該商品仍然只有一條記錄，但數(shù)量累加1。購物車列表顯示功能

在src/components目錄下，新建一個(gè)名稱為cart的文件夾，該文件夾保存所有與商品購物車相關(guān)的組件，目錄結(jié)構(gòu)如圖所示。在目錄結(jié)構(gòu)中，RtItem是購物車列表中商品組件，在組件中，根據(jù)父組件傳入的商品對象，并顯示在列表中。在代碼中，RtItem作為子組件，將接收調(diào)用它的父組件通過屬性名為item傳入的商品信息，并將該信息通過數(shù)據(jù)綁定的方式顯示在模板中，同時(shí)，為了能在列表中可以勾選多個(gè)商品進(jìn)行批量操作，模板中添加了van-checkbox組件，并將item對象的Id號，作為該組件name屬性的動態(tài)值，以確保選擇某個(gè)商品時(shí)的唯一性。組件代碼

RtItem組件是一個(gè)子類組件，它將會被cart文件夾中的RtIndex組件所調(diào)用，在調(diào)用過程中，將會向RtItem組件傳入單個(gè)商品信息。在代碼中，先獲取全局狀態(tài)變量carts，并以遍歷的形式，循環(huán)調(diào)用RtItem子組件，在調(diào)用過程中，通過item屬性傳入商品對象信息，由于子組件中包含了復(fù)選項(xiàng)組件

van-checkbox，因此，必須把全部循環(huán)調(diào)用的內(nèi)容，包裹到van-checkbox-group組件中，以形成復(fù)選按鈕組的元素結(jié)構(gòu)，便于后續(xù)的批量選擇操作。組件調(diào)用

在購物車列表頁中，當(dāng)選中某個(gè)商品或多個(gè)商品時(shí)，底部訂單提交欄將會自動計(jì)算商品的總價(jià)格，提交訂單按鈕也同時(shí)變?yōu)榭捎?，如果取消所有的選中項(xiàng)，那么，底部訂單提交欄將自動清空原數(shù)據(jù)，并還原到初始狀態(tài)。自動計(jì)算總價(jià)功能在代碼中，當(dāng)用戶在購物車列表中點(diǎn)擊復(fù)選框按鈕，選擇某件商品時(shí)，將觸發(fā)綁定的自定義函數(shù)handleChecked，在該函數(shù)中，先檢測用戶是否選擇了全部的商品。否則，“全選”復(fù)選框?qū)⑻幱谖催x中狀態(tài)。接下來，再調(diào)用自定義的函數(shù)countSumPrice，在該函數(shù)中，先清空保存總價(jià)格的變量_sumPrice，再遍歷整個(gè)購物車carts數(shù)組，在遍歷時(shí)，調(diào)用blnCheckedById函數(shù)檢測某個(gè)商品是否在選中列表中，如果在選中列表中，則計(jì)算它的價(jià)格，并累計(jì)到總價(jià)格變量中，最后，將總變量_sumPrice賦值給變量sumPrice中，用于頁元素的綁定顯示。組件代碼在購物車列表中，為了方便用戶對象購物車中商品數(shù)量的操作，通常會在數(shù)量顯示的左右兩邊添加增加和減少按鈕，當(dāng)點(diǎn)擊增加按鈕時(shí)，將會在現(xiàn)有數(shù)量上累加1，當(dāng)點(diǎn)擊減少按鈕時(shí)，將會在現(xiàn)有數(shù)量上減少1，無論增加或減少數(shù)量，總價(jià)格將會自動同步更新。增減購物車商品功能在RtItem組件中觸發(fā)增加或減少商品的操作。在代碼中，當(dāng)用戶點(diǎn)擊購物車中某件商品數(shù)量左側(cè)的減少按鈕時(shí)，將會調(diào)用自定義的函數(shù)editNum，并向該函數(shù)傳遞該商品的信息和“reduce”類型，在函數(shù)editNum中，將接收到的參數(shù)，再傳入全局方法edit_carts_num_act，由該方法做實(shí)質(zhì)的數(shù)據(jù)處理，并同步到購物車列表中對應(yīng)的商品數(shù)量中，點(diǎn)擊右側(cè)的增加按鈕時(shí)，也會執(zhí)行同樣的函數(shù)，只是在傳參數(shù)時(shí)，第二個(gè)類型參數(shù)的值為“add”。無論是操作了增加或減少數(shù)量的按鈕，都會向父組件定義一個(gè)名稱為“sendUpdate”的事件，父組件綁定該事件后，將會自動觸發(fā)對應(yīng)的事件函數(shù)。組件代碼打開本項(xiàng)目src/store目錄下的shopStore文件，它用于管理本項(xiàng)目的全部狀態(tài)和定義狀態(tài)管理的方法。在代碼中，先通過傳入的商品信息獲取到對應(yīng)商品的數(shù)量值，再根據(jù)操作類型type的值，決定是增加數(shù)量，還是減少數(shù)量，如果該值為“add”，表示增加數(shù)量，即在原數(shù)量的基礎(chǔ)上，再增加1，反之，表示減少數(shù)量，減少數(shù)量之前，先判斷該數(shù)量值是否大于1，如果大于1時(shí)，才減少，否則，將會出現(xiàn)負(fù)數(shù)。全局狀態(tài)與方法在購物車列表中，對一些過期或不想要的商品可以進(jìn)行刪除的操作，刪除時(shí)，為了排除誤操作，點(diǎn)擊刪除按鈕時(shí)，需要進(jìn)行二次確認(rèn)，如果確認(rèn)，才進(jìn)行刪除，否則，不會刪除。刪除購物車商品功能在RtItem組件中觸發(fā)刪除指定商品的操作。在上述代碼中，當(dāng)用戶點(diǎn)擊購物車列表中，某個(gè)商品右側(cè)的“刪除”按鈕圖標(biāo)時(shí)，在觸發(fā)綁定的事件函數(shù)deleCart，同時(shí)，傳入需要刪除商品的Id號，在deleCart函數(shù)中，先調(diào)用Vant框架中的showConfirmDialog方法，詢問是否要真的刪除，如果確定，則執(zhí)行方法中的第一個(gè)回調(diào)函數(shù)，傳入Id號執(zhí)行全局的刪除商品函數(shù)。刪除完成后，向父組件定義“sendUpdate”事件，父組件綁定該事件后，將同步更新刪除某個(gè)商品信息后的總價(jià)格。組件代碼打開