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

第17章商品詳細(xì)頁開發(fā)課件V1.0

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

大圖滾動(dòng)功能第二節(jié)彈框說明功能第三節(jié)

信息切換功能第四節(jié)Vant業(yè)務(wù)組件知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握

van-action-sheet組件的使用方法掌握

van-action-sheet和van-tabs

組件運(yùn)用方法理解并掌握在組件中使用pinia定義的變量和方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用17C17-01大圖滾動(dòng)功能1、頁面效果

2、圖片數(shù)據(jù)源3、組件代碼C17-02彈框說明功能1、頁面效果2、組件代碼C17-03信息切換功能1、頁面效果2、組件代碼C17-04加入購物車功能1、頁面效果2、組件代碼3、全局狀態(tài)與方法4、組件調(diào)用

大圖滾動(dòng)展示是商品詳細(xì)頁中的基本功能，通過多張圖片的滾動(dòng)展示，不僅節(jié)省圖片顯示的空間，還可以吸引用戶的注意力，提高用戶的瀏覽體驗(yàn)和關(guān)注度。大圖滾動(dòng)功能

商品詳細(xì)頁中的大圖滾動(dòng)數(shù)據(jù)，源于prods數(shù)組中每個(gè)產(chǎn)品對(duì)象的swiper屬性。在代碼中，加粗部分的swiper屬性值是一個(gè)數(shù)組，數(shù)組中，每個(gè)對(duì)象代表滾動(dòng)展示的一張圖片，對(duì)象的src屬性表示圖片來源，url屬性表示點(diǎn)擊圖片后跳轉(zhuǎn)的地址。

圖片數(shù)據(jù)源

在src/components目錄下，新建一個(gè)名稱為product的文件夾，該文件夾保存所有與產(chǎn)品詳細(xì)頁有關(guān)的組件，目錄結(jié)構(gòu)如圖所示。組件代碼

在目錄結(jié)構(gòu)下，RtSwipe是商品大圖滾動(dòng)組件，在組件中，獲取滾動(dòng)圖片數(shù)據(jù)，并通過遍歷的方式展示在van-swipe組件中。

在代碼中，RtSwipe作為子組件，將接收調(diào)用它的父組件通過屬性名為Id傳入的商品Id號(hào)，并將該Id號(hào)作為參數(shù)，調(diào)用全局性的自定義函數(shù)getProdById，獲取到對(duì)應(yīng)的商品詳細(xì)數(shù)據(jù)，最后，在詳細(xì)數(shù)據(jù)對(duì)象中，獲取到商品大圖滾動(dòng)swipe屬性值。全局性的自定義函數(shù)getProdById在多個(gè)組件中使用，它的功能是，通過給定的數(shù)據(jù)源和Id號(hào)，返回對(duì)應(yīng)Id號(hào)的產(chǎn)品詳細(xì)數(shù)據(jù)。組件代碼

在商品詳細(xì)頁中，當(dāng)顯示一些促銷信息或購買規(guī)則時(shí)，為了不讓用戶離開或跳轉(zhuǎn)到其他頁面中查看，通常以底部彈框的形式進(jìn)行展現(xiàn)，點(diǎn)擊任意空白處后，隱藏彈框。彈框說明功能

在目錄結(jié)構(gòu)中，由名為RtInfo的組件實(shí)現(xiàn)彈框說明的功能。

在代碼中，先將傳入的Id號(hào)作為參數(shù)，調(diào)用自定義的函數(shù)getProdById獲取對(duì)應(yīng)產(chǎn)品的詳細(xì)信息，并通過雙向數(shù)據(jù)綁定的形式，展示在模板中。另外，彈框由van-action-sheet組件實(shí)現(xiàn)，該組件的顯示與隱藏由v-model:show屬性值來控制，初始時(shí)，該值為false，表示隱藏，當(dāng)點(diǎn)擊帶箭頭的“支持花唄分期”字樣時(shí)，該屬性值為true，則將會(huì)以彈框的形式，從底部升起顯示。組件代碼

在商品詳細(xì)頁中，信息切換功能可以通過組件主動(dòng)或被動(dòng)地切換同一區(qū)域中的內(nèi)容，使用戶可以在固定的空間里，以交替的方式看到幾屏不同的內(nèi)容。讓用戶在少量且同樣重要的視圖和功能之間進(jìn)行自由切換查看。信息切換功能

在目錄結(jié)構(gòu)中，由名為RtTabs的組件實(shí)現(xiàn)信息切換顯示的功能。

在代碼中，切換顯示的功能由van-tabs組件實(shí)現(xiàn)，v-model:active屬性值為當(dāng)前處于激活的選項(xiàng)卡索引號(hào)，默認(rèn)情況下啟用第一個(gè)選項(xiàng)卡，各個(gè)選項(xiàng)卡由van-tab組件來完成，title屬性為選項(xiàng)卡的標(biāo)題名稱。然后，再將傳入的Id號(hào)作為參數(shù)，調(diào)用自定義的函數(shù)getProdById，獲取到對(duì)應(yīng)商品的詳細(xì)信息對(duì)象，其中，對(duì)象中的imgs屬性用于顯示“圖文詳情”選項(xiàng)卡中的數(shù)據(jù)，而detail屬性則用于顯示“參數(shù)”選項(xiàng)卡中的數(shù)據(jù)。組件代碼

在商品詳細(xì)頁中，還有一個(gè)非常重要的功能，就是將該商品加入購物車中，加入購物車有兩種方式，一種是“加入購物車”，另外一種是“立即購買”。

在商品詳細(xì)頁中，除了加入購物車的功能之外，還可以收藏該商品，收藏之前，先判斷是否已經(jīng)收藏過，如果已收藏，則顯示“已收藏”字樣，并且不能再次收藏。加入購物車功能

在目錄結(jié)構(gòu)中，由名為RtAction的組件實(shí)現(xiàn)底部動(dòng)作欄操作的功能。

當(dāng)點(diǎn)擊“購物車”圖標(biāo)時(shí)，將觸發(fā)綁定的click事件函數(shù)enter。

當(dāng)點(diǎn)擊“加入購物車”按鈕時(shí)，將觸發(fā)綁定的click事件函數(shù)addCarts。

當(dāng)點(diǎn)擊“立即購買”按鈕時(shí)，將觸發(fā)綁定的click事件函數(shù)goAddCarts。

當(dāng)點(diǎn)擊“收藏”按鈕時(shí)，觸發(fā)pinia中定義的方法add_collect_act。組件代碼

在本項(xiàng)目的src/store目錄下，創(chuàng)建一個(gè)名稱為shopStore的.js文件，用于管理本項(xiàng)目的全部狀態(tài)和定義狀態(tài)管理的方法。在代碼的加粗部分，先在state函數(shù)中，返回一個(gè)名為carts的全局狀態(tài)數(shù)組變量，用于保存用戶的購物車記錄。然后在actions對(duì)象中，定義了一個(gè)名為add_carts_act的方法，用于增加用戶購物車的記錄，在增加時(shí)，先判斷商品的Id號(hào)是否重復(fù)，如果重復(fù)，便是同一個(gè)商品，則增加這個(gè)商品的購買數(shù)量，否則，則直接增加該商品信息。最后，在persist對(duì)象的strategies數(shù)組對(duì)象paths中，增加carts數(shù)組變量，則用戶的購物車數(shù)據(jù)將會(huì)通過localStorage對(duì)象緩存在本地瀏覽器中。全局狀態(tài)與方法

全部產(chǎn)品詳細(xì)的子組件都被product文件夾中的RtIndex組件調(diào)用，由該組件完成各類子組件的調(diào)用和傳參數(shù)。在代碼中，通過import方法導(dǎo)入各類子組件，并在componen