七七小报-CSDN博客

原创 uniapp-商城-74-shop（7-商品列表，选规格添加商品到购物车）

本文介绍了电商系统中商品规格选择的实现方式。对于无规格商品使用步进器添加购物车，有规格商品则通过规格选择模块完成。系统包含商品组件、购物车组件、商品详情组件和规格选择组件，通过Vuex管理购物车数据。规格选择组件通过计算属性skuArr实现选中的规格高亮显示，使用深拷贝处理商品数据后更新Vuex中的购物车数据。商品详情页跳转时也需经过规格选择流程，确保数据一致性。整个流程涵盖了商品展示、规格选择、数量调整和购物车更新等关键环节，实现了完整的购物车功能。

2025-05-28 14:33:16 535

原创 uniapp-商城-73-shop（6-商品列表，步进器添加数据到购物车，步进器数据同步（深度监听））

本文分析了购物车系统中步进器的实现与数据同步逻辑：1. 使用u-number-box组件实现商品数量的增减控制，设置了0-99的数值范围；2. 通过v-model双向绑定和change事件实现数据变更，并将修改同步到Vuex状态管理；3. 采用深度监听watch机制确保购物车页面与商品列表页面的数据实时同步；4. 使用this.$set方法处理响应式数据更新，解决了小程序环境下的兼容性问题。整个系统通过Vuex统一管理状态，实现了跨组件的数据一致性。

2025-05-28 13:49:32 577

原创 uniapp-商城-72-shop（5-商品列表，购物车实现回顾）

本文介绍了购物车功能的实现方式，重点讲解了如何将商品添加到购物车以及购物车状态管理的处理机制。主要内容包括：1. 通过Vuex管理购物车状态，包括商品列表、总价和商品数量计算；2. 购物车组件实现，包含商品显示、数量修改和清空功能；3. 商品添加逻辑处理，包括规格商品识别和数量更新规则；4. 使用Vue的深度监听机制实现购物车数据与页面步进器的同步更新。系统采用Vuex集中管理状态，通过getters暴露接口，实现了购物车数据的统一管理和高效更新。

2025-05-27 22:46:37 767

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

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

2025-05-26 22:24:10 765

原创 uniapp-商城-70-shop（3-商品列表，点击规格，进行属性选择）

文章摘要：该文档详细描述了电商平台中商品规格选择功能的实现方案。主要包括：1) 使用u-popup组件实现规格选择弹窗；2) 通过Vuex管理弹窗状态和数据传递；3) 采用双层循环展示父子规格选项；4) 实现规格选择交互逻辑，包括选中状态切换、规格数据存储和确认按钮状态控制；5) 处理事件冒泡问题确保点击事件精确触发。系统通过计算属性和样式绑定实现选中规格的视觉反馈，并包含购物车添加的数量选择功能，完整覆盖了电商规格选择的典型需求场景。

2025-05-26 17:17:24 658

原创 uniapp-商城-69-shop（2-商品列表，点击商品展示，商品的详情， vuex的使用，rich-text使用）

本文介绍了商品详情弹窗的实现方案。主要采用Vuex进行状态管理，通过几个关键组件协同工作：商品列表组件productItem负责触发点击事件，通过Vuex传递商品数据和弹窗状态商品详情组件pro-detail-popup使用u-popup实现弹窗效果，展示商品图片、价格、描述等信息 Vuex管理弹窗状态(detailPopState)和商品数据(detailData)，包括对商品描述进行格式处理通过mapMutations和mapGetters实现组件与Vuex的交互

2025-05-26 15:51:20 719

原创 uniapp-商城-68-shop（1-商品列表，获取数据，utils、tofixed 、parseInt的使用）

本文介绍了商品数据获取与展示的实现过程。系统通过云对象(green-mall-goods)获取商品数据，前端分为左右两栏协同展示。左侧显示商品分类列表，右侧展示商品详情，包括图片、名称、价格、折扣等信息。关键实现包括：1)使用uniCloud.importObject导入云对象获取数据；2)通过异步方法getGoodsData获取商品列表；3)采用公共工具函数处理价格格式转换(priceFormat)和折扣计算(discount)；4)使用scroll-view实现滚动展示，并添加滑动动画效果。组件化开发中

2025-05-25 19:30:00 956

原创 uniapp-商城-67-shop（3-品牌信息显示，弹窗显示完整品牌信息，弹窗拨打电话、地图定位）

本文介绍了如何通过uni-popup组件实现品牌详情弹窗功能。在品牌区域添加点击事件触发弹窗，弹窗包含三部分：顶部关闭按钮，中间品牌信息展示（logo、名称、简介），底部联系方式（点击拨打电话）和地址（点击跳转地图）。地图定位通过高德API实现，需先配置web端密钥，再通过请求获取坐标后调用openLocation打开地图。该方案实现了品牌信息的便捷展示与交互功能。

2025-05-24 20:48:03 1037

原创 uniapp-商城-66-shop（2-品牌信息显示，数据库读取的异步操作放到vuex actions）

本文介绍了如何使用Vuex管理品牌数据，实现数据的同步显示和修改。主要内容包括：1.将获取品牌数据的异步操作封装到Vuex的actions中，减少重复代码；2.在组件中通过mapActions和mapMutations引入Vuex方法；3.在品牌信息修改或新增后，通过SET_BRAND方法立即更新状态，确保页面数据同步。这种方法避免了在每个页面重复请求数据，提高了代码复用性，同时实现了修改后的实时更新。

2025-05-24 13:02:10 648

原创 uniapp-商城-65-shop（1-品牌信息显示，将数据库信息同步到vuex的state）

本文介绍了如何通过Vuex实现后台品牌数据实时显示到前端界面。首先，在Vuex的store文件夹中创建brand.js文件，定义state、mutations和actions，用于管理品牌数据。通过actions异步获取后台数据，并通过mutations同步更新state。接着，在getters.js中暴露brandData接口，便于页面使用。最后，在shop-headbar组件中，通过mapGetters导入brandData，并替换界面中的固定内容，实现品牌信息的动态显示。整个过程确保了数据的实时更新和

2025-05-22 20:40:05 1563

原创 uniapp-商城-64-后台商品列表（商品修改---页面跳转，深浅copy应用，递归调用等）

本文主要介绍了商品信息修改页面的实现过程。首先，页面布局包括编辑和删除功能，未来还可添加上架和下架按钮。通过clickEdit函数，用户点击商品ID后可跳转到修改页面，页面加载时根据传入的ID获取商品信息。商品数据的获取和更新通过云对象goodsCloudObj实现，包括获取单个商品信息、更新商品数据等操作。此外，还涉及SKU数据的获取和表单提交后的数据处理，确保数据能够正确更新到数据库中。整个流程涵盖了从页面跳转、数据获取到数据库更新的完整逻辑。

2025-05-21 22:23:30 1018

原创 uniapp-商城-63-后台商品列表（分类展示商品的删除）

文章介绍了商品列表状态管理的实现，特别是商品删除功能的具体流程。用户在前端点击删除按钮后，系统调用后端接口，从数据库中移除对应商品数据。删除操作包括确认提示和权限验证，确保只有具有管理权限的用户才能执行删除。删除后，页面会更新商品列表，避免频繁调用数据库。此外，文章还提到了未来可能添加上架和下架按钮，进一步完善商品管理功能。代码部分展示了删除和修改按钮的实现，以及相关的云对象数据处理逻辑。整体设计旨在提升商品管理的灵活性和安全性。

2025-05-20 12:57:16 780

原创 uniapp-商城-62-后台商品列表（分类展示商品的布局）

本文介绍了商品列表展示的实现过程。首先，通过界面设计，点击商品列表时，商品的基本信息会显示在右侧界面。页面布局代码包括新增商品按钮和商品展示部分，新增商品按钮允许用户跳转到新增商品页面。商品展示部分通过循环遍历商品列表，显示每个商品的类别、缩略图和基本信息，并提供编辑和删除功能。在数据库操作方面，通过异步方法获取商品列表，并根据商品类别进行归类。最后，页面逻辑通过调用云对象获取数据，并将结果赋值给商品列表进行展示。

2025-05-19 22:42:31 954

原创 uniapp-商城-61-后台新增商品（添加商品到数据库）

本文按照前面章节的描写，分析商品数据存储，理清具体的步骤，根据完成商品的布局，完成商品的属性添加，最后目的还是要完成数据添加，将我们前台的数据添加后台的数据库。

2025-05-17 17:05:36 897

原创 uniapp-商城-60-后台新增商品（属性的选中和页面显示，数组join 的使用）

本文主要讲述了属性的显示，继续讲到了 map ，以及计算接口computed，前面添加了属性，添加属性的子级项目。也分析了如何回显，但是在添加新的商品的时，我们也同样需要进行选择，还要能正常的显示在界面上。下面对页面的显示进行分析。

2025-05-16 19:58:58 774

原创 uniapp-商城-59-后台新增商品（属性的选中，进行过滤展示，filter，some，every和map）

在商品添加过程中，属性选择是一个关键步骤。首先，界面需要展示嵌套的属性数据，用户通过点击选择属性。选中后，系统会通过一个盒子展示所选属性，若没有值则不展示。为了处理选中属性，定义了一个存储数据的数组，并通过代码clickConfirmSelect进行选中和处理。该函数首先过滤出父级和子级属性中被选中的项，然后进行映射处理，最终将选中的属性数组保存到商品信息中，并关闭弹窗。这一过程确保了属性选择的准确性和数据的即时展示。

2025-05-16 18:54:53 1259

原创 uniapp-商城-58-后台新增商品（属性子级的添加和更新）

本文介绍了在云对象green-mall-sku中添加子级属性的实现过程。首先，通过updateChild接口处理子级数据的添加，使用uniCloud.importObject导入云对象。在页面逻辑中，通过clickAddAttr函数判断是添加父级属性还是子级属性，并在dialogConfirm函数中处理确认操作。对于子级属性，通过updateChild接口将数据推送到数据库，并更新页面显示。云对象中的updateChild函数直接接受参数，并使用db.command执行push操作，确保数据正确更新。整个过

2025-05-16 13:43:02 1079

原创 uniapp-商城-57-后台新增商品（弹窗属性数据添加父级）

本文介绍了在后台系统中添加商品属性（父级信息）并存储到云数据库的过程。首先，回顾了界面布局和属性显示的嵌套结构。接着，详细说明了如何通过云对象处理商品属性数据，包括建立数据库模式（db schema）和创建云对象以定义数据库操作。文章还描述了页面逻辑的实现，如通过云对象获取和添加数据，以及如何处理父级和子级属性的添加。最后，介绍了如何通过弹窗交互实现属性的动态添加，并将新数据即时更新到页面和数据库中，确保数据的永久保存和后续使用。

2025-05-16 12:51:47 1157

原创 uniapp-商城-56-后台新增商品（弹窗属性继续分析）

前面我们讲了布局和相应商品属性的页面布局。属性是一个弹窗，它是一个cell的组件的实现属性。点击该cell就会调用uni-popup 进行弹窗。基本的页面布局如下：属性显示其实是个一嵌套的数据显示。

2025-05-13 23:41:13 1019

原创 uniapp-商城-55-后台新增商品（分类、验证和弹窗属性）

我们将商品页面的布局给完成了，这里来对表单的标签输入进行校验，看看这里的校验还是不是也需要兼容微信小程序，还有没有前面遇到的自定义正则进行校验的情况。另外这里还需要完成商品属性的添加，就是前面在布局中提到的弹窗。弹窗这里涉及的内容还很多，后面我们还会进一步来分析和研究。

2025-05-13 00:30:00 1160

原创 uniapp-商城-54-后台新增商品（页面布局）

本文分析后台页面中还存在商品信息的添加和修改等。接下来我们逐步进行展开。包含页面布局和数据库逻辑等等。

2025-05-12 13:53:16 1195

原创 uniapp-商城-53-后台商家信息（更新修改和深浅copy）

文章主要讨论了在数据库管理中如何处理用户上传和修改商家信息的问题，特别是通过深浅拷贝技术来确保数据更新的准确性和安全性。首先，解释了深拷贝和浅拷贝的区别：浅拷贝使得两个变量共享相同的内存地址，而深拷贝则创建新的内存空间来存储数据，确保修改一个变量不会影响另一个。接着，文章展示了在JavaScript中实现深拷贝的示例代码。随后，详细描述了商家信息修改的流程，包括页面加载时获取用户信息、数据展示与复制、更新页面逻辑展示以及后台数据库的处理逻辑，强调了使用深拷贝的重要性以保留原始数据并生成新数据。

2025-05-11 22:51:35 566

原创 uniapp-商城-52-后台商家信息（商家信息数据，云对象使用）

已经通过好几个篇幅来说明商家信息，包括logo、商家名称，地址，电话以及商家简介。通过表单组件和标签，以及我们的文件上传标签，都做了说明。（logo上传，用的文件上传组件是上传到公共的数据库，并没有整合上传到项目定义或需要的数据库）下面就是关键的步骤，如何将数据上传到我们自己的数据库。前面的分类我们直接在页面中进行的数据上传和使用。但一般不这样使用，一般是采用云对象的方式来处理数据的交互，页面上主要做业务逻辑的实现，以此来实现前后对分离。

2025-05-11 11:09:07 640

原创 uniapp-商城-51-后台商家信息（logo处理）

本文详细介绍了如何在uni-app项目中使用uni-file-picker组件实现品牌logo的上传功能。文章首先说明了logo上传的基本概念，即通过表单中的uni-file-picker组件实现图片文件的上传。接着，提供了主要代码示例，展示了如何在uni-forms-item标签中嵌入uni-file-picker组件，并设置相关的属性如文件类型、上传模式和数量限制。此外，文章还提供了uni-file-picker组件的官方文档和下载安装地址，方便开发者获取详细的使用说明和集成到项目中。最后，文章还介绍了

2025-05-10 21:58:16 963

原创 uniapp-商城-50-后台商家信息（输入进行自定义规则验证）

通过后台管理，添加商家的信息，包含商家logo,名称，商户电话，商户地址，以及商家介绍，后期还可以上传商家的营业许可等信息。在商家页面还可以进行相应的管理，添加，删除和修改等等操作。另外这里的信息，还需要展现在我们shop的页面上。如下图的，logo和名称都时后台商户的数据。

2025-05-10 19:39:29 872

原创 uniapp-商城-49-后台分类数据的生成（方法加精）

前面47和48章节对代码进行了分析和解读。但是还是又很多地方需要加精。如方法中的注释，执行中的提示，特别是添加和修改中，相关值的初始化，另外还有页面的刷新，并且在页面刷新时的异步操作同步化实现。

2025-05-10 14:49:58 391

原创 uniapp-商城-48-后台分类数据添加修改弹窗bug

在47章节的操作中，涉及分类的添加、删除和更新功能，但发现uni-popup组件存在bug。该组件的函数接口错误导致在小程序中出现问题：1. 点击修改肉类名称时，回调显示为空，并报错“setVal is not defined”，在H5和微信开发工具中均出现此问题，但H5中能显示肉类名称；2. 点击新增时，出现与现象1相同的错误。这些问题表明uni-popup组件在回调处理上存在缺陷，需修复以确保功能正常运行。

2025-05-10 13:58:57 655

原创 uniapp-商城-47-后台分类数据的生成（通过数据）

在第46章节中，我们为后台数据创建了分类的数据表结构schema，使得可以通过后台添加数据并保存，同时利用云函数进行数据库数据的读取。文章详细介绍了如何通过代码实现分类管理功能，包括数据的获取、添加、更新和删除操作。主要代码展示了如何使用u-icon组件进行新增、编辑和删除操作，并通过uni-popup组件实现弹出窗口进行数据输入。此外，文章还说明了如何通过uniCloud.database()方法连接数据库，并在页面加载时获取分类数据。整体流程包括页面展示数据、添加按钮、弹出窗口操作以及数据的定义和获取，

2025-05-09 21:53:19 989

ride，用于开发或者后期机器学习

空空如也