Vue.js 超详细入门与项目实战（微课视频版）课件 第17章 商品详细页开发

第17章商品详细页开发课件V1.0

教学内容第一节

大图滚动功能第二节弹框说明功能第三节

信息切换功能第四节Vant业务组件知识目标教学目标理解和掌握

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

van-action-sheet和van-tabs

组件运用方法理解并掌握在组件中使用pinia定义的变量和方法知识点预览#节知识点难点重点应用17C17-01大图滚动功能1、页面效果

2、图片数据源3、组件代码C17-02弹框说明功能1、页面效果2、组件代码C17-03信息切换功能1、页面效果2、组件代码C17-04加入购物车功能1、页面效果2、组件代码3、全局状态与方法4、组件调用

大图滚动展示是商品详细页中的基本功能，通过多张图片的滚动展示，不仅节省图片显示的空间，还可以吸引用户的注意力，提高用户的浏览体验和关注度。大图滚动功能

商品详细页中的大图滚动数据，源于prods数组中每个产品对象的swiper属性。在代码中，加粗部分的swiper属性值是一个数组，数组中，每个对象代表滚动展示的一张图片，对象的src属性表示图片来源，url属性表示点击图片后跳转的地址。

图片数据源

在src/components目录下，新建一个名称为product的文件夹，该文件夹保存所有与产品详细页有关的组件，目录结构如图所示。组件代码

在目录结构下，RtSwipe是商品大图滚动组件，在组件中，获取滚动图片数据，并通过遍历的方式展示在van-swipe组件中。

在代码中，RtSwipe作为子组件，将接收调用它的父组件通过属性名为Id传入的商品Id号，并将该Id号作为参数，调用全局性的自定义函数getProdById，获取到对应的商品详细数据，最后，在详细数据对象中，获取到商品大图滚动swipe属性值。全局性的自定义函数getProdById在多个组件中使用，它的功能是，通过给定的数据源和Id号，返回对应Id号的产品详细数据。组件代码

在商品详细页中，当显示一些促销信息或购买规则时，为了不让用户离开或跳转到其他页面中查看，通常以底部弹框的形式进行展现，点击任意空白处后，隐藏弹框。弹框说明功能

在目录结构中，由名为RtInfo的组件实现弹框说明的功能。

在代码中，先将传入的Id号作为参数，调用自定义的函数getProdById获取对应产品的详细信息，并通过双向数据绑定的形式，展示在模板中。另外，弹框由van-action-sheet组件实现，该组件的显示与隐藏由v-model:show属性值来控制，初始时，该值为false，表示隐藏，当点击带箭头的“支持花呗分期”字样时，该属性值为true，则将会以弹框的形式，从底部升起显示。组件代码

在商品详细页中，信息切换功能可以通过组件主动或被动地切换同一区域中的内容，使用户可以在固定的空间里，以交替的方式看到几屏不同的内容。让用户在少量且同样重要的视图和功能之间进行自由切换查看。信息切换功能

在目录结构中，由名为RtTabs的组件实现信息切换显示的功能。

在代码中，切换显示的功能由van-tabs组件实现，v-model:active属性值为当前处于激活的选项卡索引号，默认情况下启用第一个选项卡，各个选项卡由van-tab组件来完成，title属性为选项卡的标题名称。然后，再将传入的Id号作为参数，调用自定义的函数getProdById，获取到对应商品的详细信息对象，其中，对象中的imgs属性用于显示“图文详情”选项卡中的数据，而detail属性则用于显示“参数”选项卡中的数据。组件代码

在商品详细页中，还有一个非常重要的功能，就是将该商品加入购物车中，加入购物车有两种方式，一种是“加入购物车”，另外一种是“立即购买”。

在商品详细页中，除了加入购物车的功能之外，还可以收藏该商品，收藏之前，先判断是否已经收藏过，如果已收藏，则显示“已收藏”字样，并且不能再次收藏。加入购物车功能

在目录结构中，由名为RtAction的组件实现底部动作栏操作的功能。

当点击“购物车”图标时，将触发绑定的click事件函数enter。

当点击“加入购物车”按钮时，将触发绑定的click事件函数addCarts。

当点击“立即购买”按钮时，将触发绑定的click事件函数goAddCarts。

当点击“收藏”按钮时，触发pinia中定义的方法add_collect_act。组件代码

在本项目的src/store目录下，创建一个名称为shopStore的.js文件，用于管理本项目的全部状态和定义状态管理的方法。在代码的加粗部分，先在state函数中，返回一个名为carts的全局状态数组变量，用于保存用户的购物车记录。然后在actions对象中，定义了一个名为add_carts_act的方法，用于增加用户购物车的记录，在增加时，先判断商品的Id号是否重复，如果重复，便是同一个商品，则增加这个商品的购买数量，否则，则直接增加该商品信息。最后，在persist对象的strategies数组对象paths中，增加carts数组变量，则用户的购物车数据将会通过localStorage对象缓存在本地浏览器中。全局状态与方法

全部产品详细的子组件都被product文件夹中的RtIndex组件调用，由该组件完成各类子组件的调用和传参数。在代码中，通过import方法导入各类子组件，并在componen