uni-app实战：构建电商购物车功能

在电商领域中，购物车功能是不可或缺的一部分，它不仅方便用户管理购买的商品，还能提升用户的购物体验。在本文中，我们将使用uni-app框架来实现一个简单的电商购物车功能。uni-app是一个基于Vue.js的跨平台应用开发框架，支持快速开发原生体验的移动应用。

环境准备

首先，确保你已经安装了Node.js和npm（或Yarn）。然后，通过npm或Yarn全局安装uni-cli：

npm install -g @dcloudio/uni-cli

接着，创建一个新的uni-app项目：

uni init project-name
cd project-name

设计购物车结构

在uni-app中，我们通常会将数据、组件和逻辑分开处理。首先，我们需要定义购物车相关的数据结构。在src目录下创建cart文件夹，并在其中添加CartData.js文件来存放购物车数据：

// src/cart/CartData.js
export default {
  items: [], // 购物车中的商品列表
  total: 0, // 购物车总价
};

接下来，在src/cart目录下创建Cart.js文件，用于管理购物车逻辑：

// src/cart/Cart.js
import { CartData } from './CartData';

export default {
  data() {
    return new CartData();
  },
  methods: {
    addItem(item) {
      this.data.items.push(item);
      this.updateTotal();
    },
    removeItem(item) {
      const index = this.data.items.findIndex((i) => i.id === item.id);
      if (index !== -1) {
        this.data.items.splice(index, 1);
        this.updateTotal();
      }
    },
    updateTotal() {
      let total = 0;
      this.data.items.forEach((item) => {
        total += item.price * item.quantity;
      });
      this.data.total = total;
    },
  },
};

实现购物车页面

现在，我们将在pages目录下创建一个购物车页面CartPage.vue：

<!-- pages/cart/CartPage.vue -->
<template>
  <view class="cart-page">
    <view class="cart-header">
      <text>购物车</text>
    </view>
    <view class="cart-items">
      <block v-for="(item, index) in cart.items" :key="item.id">
        <view class="cart-item">
          <view class="item-info">
            <text>{{ item.name }}</text>
            <text class="quantity">x{{ item.quantity }}</text>
          </view>
          <view class="item-price">￥{{ item.price * item.quantity }}</view>
          <button class="remove-btn" @click="removeItem(item)">移除</button>
        </view>
      </block>
    </view>
    <view class="total-price">
      总价：￥{{ cart.total }}
    </view>
  </view>
</template>

<script setup>
import { useCart } from '@/cart/Cart';
import { onMounted } from 'vue';

const cart = useCart();

onMounted(() => {
  // 假设这里从后端获取购物车数据
  // cart.data.items = [...];
});
</script>

<style scoped>
.cart-page {
  padding: 20rpx;
}

.cart-header {
  text-align: center;
  font-size: 36rpx;
  margin-bottom: 20rpx;
}

.cart-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.cart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 180rpx;
  height: 240rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 10rpx;
  box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.item-info {
  display: flex;
  align-items: center;
}

.quantity {
  color: #999;
  margin-left: 10rpx;
}

.item-price {
  font-size: 24rpx;
  color: #f00;
}

.total-price {
  text-align: center;
  font-size: 32rpx;
  margin-top: 20rpx;
}
</style>

测试与优化

在完成上述步骤后，你可以通过运行以下命令来启动开发服务器：

uni serve

访问http://localhost:8081/cart即可查看购物车页面。在实际应用中，你可能需要考虑更多的交互细节，比如添加商品到购物车时的提示、删除商品时的确认操作等。此外，还可以集成支付功能、订单管理等功能，进一步完善购物车系统。

通过以上步骤，你已经成功地在uni-app中实现了基础的电商购物车功能。这只是一个起点，随着业务需求的增加，你可以在现有基础上进行更深入的开发和优化。