当前位置：首页 > web >正文

uniapp-商城-71-shop（4-商品列表，详情页中添加商品到购物车的处理）

web 2025/7/28 12:17:23

从详情页添加商品到购物车，这里还需弹出规格的选项的页面。实现页面联动功能。这样就可以实现详情页添加商品到购物车，弹出规格的选项；如果没有规格可以选择，那至少还是要选数量。

本文分析了商品详情页添加购物车的功能实现：1. 点击加入购物车时，通过SET_PRO_SPECS(true)触发规格选择弹窗；2. 设置pro-select-specs组件z-index高于其他弹窗确保层级关系；3. 确认添加后需同时关闭规格弹窗和详情弹窗(SET_DETAIL_STATE(false))；4. 通过sku_select长度动态判断是否显示规格选择区域。整个流程实现了从详情页到购物车的完整交互，包括规格选择和数量确认功能。

下面进行详细分析：

1、在详情页组件中点击添加到购物车

详情页组件：pro-detail-popup

选规格的组件：pro-select-specs

后面还要处理clickAddCart接口。

其实很简单，弹出选规格的界面，就只是需要改变一下页面的弹出属性。

2、确认添加商品到购物车接口 clickAddCart

            //点击加入购物车
            clickAddCart(){
                this.SET_PRO_SPECS(true)
            }

其实很简单，改变SET_PRO_SPECS 为true 弹出。

该值来自于前面分析的 goods 的 vuex。

那这里 pro-detail-popup组件 也要到这个 SET_PRO_SPECS 属性。

3、弹窗高度处理就是z轴处理

当点击确认添加商品到购物车接口 clickAddCart ，选规格的组件：pro-select-specs 应该浮于所有页面的上面。

主要处理：

	<!-- 产品选择规格组件 --><view class="proSpecs"><u-popup :show="proSpecsState" @close="onClose" closeable round="10" z-index="20001":overlayStyle="{zIndex:20000}"><!-- 这里为什么自定义了 zindex 就是为了显示得更加上面这里 pro-select-specs 组件被pro-detail-popup 调用了这两个组件都弹窗，都有遮罩，那为了 pro-detail-popup 组件触发  pro-select-specs ，就把pro-select-specs 他的zindex 调高一些z-index="20001"   弹窗高于所有:overlayStyle="{zIndex:20000}   遮罩高于 pro-detail-popup默认是 弹窗10075 和 遮罩10070   20000一定高于他们-->

4、选规格页面中，确认键后所有页面该关闭（pro-detail-popup和pro-select-specs都要关闭）

clickConfirm的处理：

设置：SET_DETAIL_STATE 为false

那这个 pro-select-specs 页面要导入这个 SET_DETAIL_STATE 属性

			//点击选择规格确认按钮clickConfirm() {let proItem = JSON.parse(JSON.stringify(this.detailData))if (this.skuArr.length) proItem.skuArr = this.skuArr;proItem.add = truethis.SET_CARS_LIST({item: proItem,num: this.numvalue})this.onClose();this.SET_DETAIL_STATE(false);  //这里也需要关闭详情页得弹窗// 主要是点击详情页面，用户也可以添加到购物车，这时就需要选规格，没有规格他也要选数量。// 因此这里要加到购物车，就也需要改变详情页弹出状态为false，false就不弹出 也就相当于关闭}