当前位置: 首页 > news >正文

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);

3、 商品规格选择的组件

相关文章:

  • win10 pip安装插件包报错:No matching distribution found for pytest-xlsx
  • Allegro X PCB设计小诀窍--05.如何在Allegro X中实现隐藏电源飞线效果
  • SpringBoot的java应用中,慢sql会导致CPU暴增吗
  • ActiveMQ 可观测性最佳实践
  • 3D LUT--颜色魔方
  • jenkins配置ssh server通过ssh自动上传构建文件及执行脚本
  • 谈一谈我对强化学习的理解
  • TCP连接数统计脚本
  • 自动生成程序的heap文件
  • 基于CATIA参数化圆锥建模的自动化插件开发实践——NX建模之圆锥体命令的参考与移植(三)
  • B2146 Hermite 多项式
  • 简历中项目经历怎么写?
  • AI--知识库RAG实战
  • 手写字魔法消除1:数据集说明(含下载链接)
  • 让DeepSeek去除AI痕迹的指令
  • 高并发订单服务库存超卖解决方案
  • Python常用模块实用指南
  • Agent 的7 中设计模式
  • web端 firebase google analytics使用,入门级
  • 3099. 哈沙德数
  • 青之峰网站建设哪家好/设计网站的公司
  • 怎么做租房网站/精准营销系统
  • 源代码如何做网站/seo搜索引擎优化教程
  • 珠海商城网站/短视频运营培训学费多少
  • 男人不知本网站 枉做/培训师资格证怎么考
  • 怎么建设一个电影网站/今日腾讯新闻最新消息