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

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

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

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

信息切換功能第四節(jié)Vant業(yè)務組件知識目標教學目標理解和掌握

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

van-action-sheet和van-tabs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在目錄結構中，由名為RtAction的組件實現(xiàn)底部動作欄操作的功能。

當點擊“購物車”圖標時，將觸發(fā)綁定的click事件函數(shù)enter。

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

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

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

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

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