畅享便捷购物体验：uni-app小程序购物车功能详解

2023-03-15 09:21:53

构建无缝的小程序购物体验：利用uni-app打造完善的购物车功能

在移动电商领域，小程序已成为一股不可忽视的力量。得益于其轻量便捷和触手可及的特性，小程序赢得了消费者的青睐。而作为小程序电商的基础功能之一，购物车功能必不可少。本文将深入探讨如何使用uni-app实现小程序购物车功能，打造流畅便捷的购物体验。

初始化购物车数据

打造购物车功能的第一步是初始化购物车数据。为此，我们需要创建一个名为shoppingCart的模块，负责存储购物车数据。在该模块中，我们定义两个数据变量：cartList和totalPrice。cartList用于保存购物车中商品的信息，而totalPrice则存储所有商品的总价。

const shoppingCart = {
  data() {
    return {
      cartList: [],
      totalPrice: 0
    }
  }
}

加入商品到购物车

当用户在商品详情页点击“加入购物车”按钮时，我们需要将该商品信息添加到购物车数据中。通过uni.showToast提示用户商品已成功加入购物车，增强交互性。

methods: {
  addToCart(goods) {
    this.cartList.push(goods)
    this.totalPrice += goods.price
    uni.showToast({
      title: '商品已成功加入购物车'
    })
  }
}

修改购物车商品数量

购物车页面允许用户修改商品数量。我们可以通过事件监听捕获修改操作，并相应更新购物车数据。

methods: {
  changeQuantity(goods, quantity) {
    goods.quantity = quantity
    this.totalPrice += (quantity - goods.quantity) * goods.price
  }
}

删除购物车商品

用户可以在购物车页面删除商品。通过事件监听捕获删除操作，并相应更新购物车数据。

methods: {
  deleteGoods(goods) {
    this.cartList.splice(this.cartList.indexOf(goods), 1)
    this.totalPrice -= goods.price
  }
}

结算购物车

当用户准备结算购物车时，我们需要将商品信息提交到服务器生成订单。我们可以通过uni.request发送请求，并在服务器端进行订单处理。

methods: {
  checkout() {
    uni.request({
      url: '/api/order/create',
      method: 'POST',
      data: {
        cartList: this.cartList,
        totalPrice: this.totalPrice
      },
      success(res) {
        // 订单生成成功，跳转到支付页面
        uni.navigateTo({
          url: '/pages/pay/index?orderId=' + res.data.orderId
        })
      }
    })
  }
}