更新记录

1.0.0（2025-10-15） 下载此版本

商品列表展示（包含图片、名称、规格、价格） 单个商品选中 / 取消选中 全选 / 取消全选功能 商品数量增减（最低 1 件） 实时计算选中商品的数量和总价 购物车为空时的友好提示 结算功能（跳转到结算页面）

平台兼容性

uni-app(3.6.10)

其他

# 城市选择器

开发文档参考：https://hx.dcloud.net.cn

一个功能完整的购物车组件，包括商品展示、数量修改、选中状态切换、价格计算等核心功能。

# 功能说明

核心功能：

• 商品列表展示（包含图片、名称、规格、价格）
• 单个商品选中 / 取消选中
• 全选 / 取消全选功能
• 商品数量增减（最低 1 件）
• 实时计算选中商品的数量和总价
• 购物车为空时的友好提示
• 结算功能（跳转到结算页面）

样式设计：

• 采用 Flex 布局实现响应式界面
• 清晰的视觉层次和交互反馈
• 适配移动端的 rpx 单位
• 空购物车状态的友好提示

使用方法：

• 准备好商品图片资源（空购物车图片等）
• 完善 Vuex 状态管理部分（存储和获取购物车数据）
• 实现结算页面的跳转逻辑

本示例使用步骤：

1. 查找插件 进入插件市场：打开 HBuilderX 编辑器，点击菜单栏中的 “插件” -> “插件市场”，或者直接访问uni-app 插件市场官网 。 搜索插件：在插件市场的搜索框中输入关键词，查找本插件，比如搜索 “电缆超市购物车” 。 筛选插件：筛选出城电缆超市购物车插件。

2. 安装插件 方式一：在 HBuilderX 中安装 在插件市场找到目标插件后，点击进入插件详情页。 点击 “使用 HBuilderX 导入插件” 按钮（如果是免费插件，直接导入；如果是付费插件，需要先购买 ）本插件是免费免费的喽。 选择要导入插件的 uni-app 项目，确认导入。导入成功后，插件会被放置在项目的 uni_modules 目录下。 方式二：通过命令行安装（适用于发布到 npm 的插件） 打开命令行工具，进入你的 uni-app 项目根目录。 执行 npm install 插件名称 命令，例如 npm install my-uniapp-plugin 。安装完成后，同样可以在项目的 uni_modules 目录下找到该插件。

3. 组件可以直接集成到 UniApp 项目中，根据实际需求进行适当调整即可使用。

4. 引入插件

   import CableGoodsCartVue from '../../components/cable-goods-cart/cable-goods-cart.vue';

5. 修改manifest.json替换为自己的appid