UniApp购物车功能实现：Vue.js响应式与本地存储实战

1. UniApp购物车功能实现概述

在移动电商应用开发中，购物车功能是核心模块之一。作为前端开发者，我最近在多个UniApp项目中实现了购物车功能，积累了一些实战经验。购物车不仅仅是简单的商品容器，它需要处理复杂的交互逻辑和状态管理。下面我将分享一个完整的实现方案，包含商品增删改查、选中状态管理、价格计算等核心功能。

这个方案基于Vue.js的响应式特性，充分利用了计算属性和方法绑定，确保UI与数据保持同步。同时考虑到移动端性能优化，我们采用本地存储来持久化购物车数据，避免用户重复添加。整个实现过程涉及到组件化开发、状态管理和本地存储等多个前端核心概念。

提示：在实际项目中，购物车功能往往需要与后端API对接，但本文重点讲解前端实现逻辑。与后端对接时，只需将本地操作替换为API调用即可。

2. 购物车核心功能设计

2.1 数据结构设计

购物车的核心在于数据结构的设计。经过多次迭代，我总结出以下最优数据结构：

javascript复制data() {
  return {
    cartList: [
      {
        id: 1,               // 商品ID
        name: '商品名称',     // 商品名称
        price: 99.99,        // 商品单价
        image: '/static/...',// 商品图片
        count: 1,            // 商品数量
        selected: true,      // 是否选中
        stock: 100           // 库存数量
      },
      // 更多商品...
    ]
  }
}

这种结构的设计考虑了几个关键因素：

1. 包含完整的商品信息，避免频繁查询后端
2. 使用selected字段管理选中状态
3. 包含stock字段用于校验最大购买量
4. 所有数值字段使用明确的数据类型

2.2 功能模块划分

购物车功能可以划分为以下几个模块：

1. 商品数量操作：增加/减少商品数量，需考虑最小值和库存限制
2. 选中状态管理：单个商品选中/取消，全选/取消全选逻辑
3. 价格计算：实时计算选中商品总价和数量
4. 商品删除：从购物车移除商品
5. 空状态提示：购物车为空时的友好提示
6. 数据持久化：使用uni.setStorageSync保存购物车数据

3. 购物车页面实现

3.1 页面结构与样式

购物车页面的基础结构如下：

html复制<template>
  <view class="cart-container">
    <!-- 购物车标题 -->
    <view class="cart-header">
      <text>购物车</text>
      <text class="cart-count">({{ cartList.length }})</text>
    </view>

    <!-- 购物车列表 -->
    <view v-if="cartList.length > 0" class="cart-list">
      <!-- 商品项循环 -->
      <view v-for="(item, index) in cartList" :key="item.id" class="cart-item">
        <!-- 商品内容 -->
      </view>
      
      <!-- 底部结算栏 -->
      <view class="cart-footer">
        <!-- 全选和总价 -->
      </view>
    </view>

    <!-- 空状态提示 -->
    <view v-else class="empty-cart">
      <image src="/static/images/empty-cart.png" mode="widthFix"></image>
      <text>购物车空空如也</text>
      <button type="primary" @click="goToHome">去逛逛</button>
    </view>
  </view>
</template>

样式设计要点：

1. 使用flex布局确保兼容性
2. 商品图片固定宽高，避免页面跳动
3. 操作按钮使用固定大小，方便点击
4. 底部结算栏使用position: fixed固定在底部

3.2 商品项组件实现

每个商品项包含以下元素：

• 选择复选框
• 商品图片
• 商品名称和价格
• 数量加减按钮
• 删除按钮

html复制<view