当前位置: 首页 > 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、 商品规格选择的组件

http://www.xdnf.cn/news/687439.html

相关文章:

  • 前端面试准备-1
  • Linux中的权限概念
  • Java SE Cloneable接口和深/浅拷贝
  • 水域应急救援可视化平台
  • 【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
  • 国产SOC有哪些?
  • 即插即用的全新算法改进策略——引导学习策略:一种用于元启发式算法设计和改进的新型更新机制
  • Unity对象池插件Lean Pool学习笔记
  • android 图片背景毛玻璃效果实现
  • Flutter 与 Android 原生布局组件对照表(完整版)
  • TencentOSTiny
  • 【模型显著性分析】配对样本 t 检验
  • 虚拟与现实时空认知同步的核心指标
  • maven中的maven-resources-plugin插件详解
  • 部署LVS-DR群集
  • Docker部署Spark大数据组件:配置log4j日志
  • Vue开发系列——零基础HTML引入 Vue.js 实现页面之间传参
  • Kotlin 中的数据类型有隐式转换吗?为什么?
  • 天津工作机会:技术文档工程师 - 华海清科股份有限公司
  • 【Linux】分页式存储管理:深刻理解页表映射
  • 【Doris基础】Apache Doris 基本架构深度解析:从存储到查询的完整技术演进
  • 金砖国家人工智能高级别论坛在巴西召开,华院计算应邀出席并发表主题演讲
  • 960g轻薄本,把科技塞进巧克力盒子
  • 从零开始学安全:服务器被入侵后的自救指南
  • 第二章 1.5 数据采集安全风险防范之数据采集安全管理
  • git和gitee的常用语句命令
  • JS语言基础
  • LiveNVR 直播流拉转:Onvif/RTSP/RTMP/FLV/HLS 支持海康宇视天地 SDK 接入-视频广场页面集成与视频播放说明
  • 实验设计与分析(第6版,Montgomery)第3章单因子实验:方差分析3.11思考题3.7 R语言解题
  • RuoYi前后端分离项目集成magic-api,并继承RuoYi的权限认证体系来管理magic-api