uniapp-商城-74-shop(7-商品列表,选规格 添加商品到购物车)
有些商品是存在规格属性,有些商品是没有的,没有属性选择的情况下,前面73 分析了使用步进器进行添加商品到购物车。有属性的使用选择规格的方式进行商品选购方式添加到购物车。
但要特别注意的是,通过商品详情页面跳转到购物车的,也是通过选规格的模块,选购商品到购物车。
本文介绍了电商系统中商品规格选择的实现方式。对于无规格商品使用步进器添加购物车,有规格商品则通过规格选择模块完成。系统包含商品组件、购物车组件、商品详情组件和规格选择组件,通过Vuex管理购物车数据。规格选择组件通过计算属性skuArr实现选中的规格高亮显示,使用深拷贝处理商品数据后更新Vuex中的购物车数据。商品详情页跳转时也需经过规格选择流程,确保数据一致性。整个流程涵盖了商品展示、规格选择、数量调整和购物车更新等关键环节,实现了完整的购物车功能。
1、shop页面中存在多个和购物相关的组件
商品组件 productItem :有步进器和选规格
购物车组件 :显示选购的商品
商品详情组件:无论是步进器还是选规格,都是通过这里跳转到商品属性的选购组件
商品属性选购组件: 选者属性数量添加到购物车(没有属性的,直接选择数量加购到购物车)
2、productItem组件
商品组件 productItem :有步进器和选规格
并通过selectSpecs,控制规格选择页面的弹窗。
selectSpecs() {
this.SET_PRO_SPECS(true); //true就弹窗
this.SET_DETAIL_DATA(this.item); //把数据传过去
console.log(this.item);