vue 实现购物车总价计算

下面我会详细讲解Vue实现购物车总价计算的完整攻略。

确定购物车数据格式

首先需要明确购物车数据的格式，常见的数据结构是一个数组，每个元素表示一件商品，包含以下字段：

{
  id: String, // 商品id
  name: String, // 商品名称
  price: Number, // 单价
  count: Number // 数量
}

创建一个购物车组件

为了方便管理购物车，我们可以创建一个购物车组件，并在组件中定义好数据模板，将购物车数据作为组件的props传入，代码如下：

<template>
  <div>
    <div v-for="item in cartItems" :key="item.id">
      {{ item.name }} 数量：{{item.count}} 单价：{{item.price}} 总价：{{item.price * item.count}}
    </div>
    <div>购物车总价：{{totalPrice}}</div>
  </div>
</template>

<script>
export default {
  props: {
    cartItems: {
      type: Array,
      required: true
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => {
        return total + item.price * item.count
      }, 0)
    }
  }
}
</script>

上面的组件中包括两个部分：

循环展示购物车中的商品列表。使用v-for指令遍历购物车数据，根据每个商品的数量和单价计算出商品的总价。
展示购物车的总价。使用computed属性计算购物车的总价，遍历购物车数据，累加每件商品的总价即可。

在父组件中使用购物车组件

当购物车组件定义好之后，需要在父组件（商品列表）中将购物车数据传入购物车组件中，即将购物车组件作为父组件的子组件，同时将购物车数据通过props传递到购物车组件中。

下面是一个简单的示例，以按钮的形式向购物车中添加商品，然后在购物车组件中展示已选择的商品和总价。

<template>
  <div>
    <!-- 商品列表 -->
    <div v-for="item in goods" :key="item.id">
      {{ item.name }} 价格：{{item.price}}
      <button @click="addToCart(item)">加入购物车</button>
    </div>
    <!-- 购物车 -->
    <shopping-cart :cart-items="cartItems"></shopping-cart>
  </div>
</template>

<script>
import ShoppingCart from '@/components/ShoppingCart'

export default {
  data() {
    return {
      goods: [
        { id: '001', name: '商品1', price: 100 },
        { id: '002', name: '商品2', price: 200 },
        { id: '003', name: '商品3', price: 300 },
      ],
      cartItems: []
    }
  },
  methods: {
    addToCart(item) {
      const existItem = this.cartItems.find(cartItem => cartItem.id === item.id)
      if (existItem) {
        existItem.count++
      } else {
        this.cartItems.push({
          id: item.id,
          name: item.name,
          price: item.price,
          count: 1
        })
      }
    }
  },
  components: {
    ShoppingCart
  }
}
</script>

在这个示例中，我们定义了一个商品列表组件，循环展示了三个商品，并且每个商品后面都有一个“加入购物车”的按钮，点击按钮会触发addToCart方法。

addToCart方法会首先检查这个商品是否已经在购物车中，如果存在，那么只需要将数量加1，如果不存在，就将这个商品添加到购物车中。

购物车中已选择的商品和总价由ShoppingCart组件负责展示，这个组件的props接收父组件传入的购物车数据，通过计算属性计算出购物车的总价，并循环展示当前已选择的商品列表。

示例说明

下面举两个购物车总价计算的示例，分别是：

示例1：展示网络商品列表，含新增购物车功能展示

在这个示例中，我们要展示网络商品列表，包括商品名称、类型和价格，同时增加一个“加入购物车”按钮，点击后将商品添加到购物车中，购物车中的商品根据购买的数量计算总价，并且可以随时增删购物车中的商品，最后展示出购物车中的商品列表和总价。

首先在父组件中定义一个数组表示整个商品列表，然后在循环中为每个商品添加一个按钮，点击按钮执行addToCart方法，addToCart方法根据购物车中是否存在该商品来进行添加或者修改操作，最后将购物车数据传递给购物车组件即可。

<template>
  <div>
    <div v-for="item in goods" :key="item.id">
      {{ item.name }} {{ item.type }} 价格：{{item.price}}
      <button @click="addToCart(item)">加入购物车</button>
    </div>
    <shopping-cart :cart-items="cartItems"></shopping-cart>
  </div>
</template>

<script>
import ShoppingCart from '@/components/ShoppingCart'

export default {
  data() {
    return {
      // 商品列表
      goods: [
        { id: '001', name: 'iPhone12', type: '手机', price: 6499 },
        { id: '002', name: 'Apple Watch Series 6', type: '手表', price: 3399 },
        { id: '003', name: 'iPad Air', type: '平板电脑', price: 4899 },
        { id: '004', name: 'Apple TV 4K', type: '电视盒子', price: 1999 },
      ],
      // 购物车数据
      cartItems: []
    }
  },
  methods: {
    // 加入购物车
    addToCart(item) {
      const existItem = this.cartItems.find(cartItem => cartItem.id === item.id)
      if (existItem) {
        existItem.count++
      } else {
        this.cartItems.push({
          id: item.id,
          name: item.name,
          price: item.price,
          count: 1
        })
      }
    }
  },
  components: {
    ShoppingCart
  }
}
</script>

示例2：展示在线购物会员折扣商品列表，含折扣计算

在这个示例中，我们要展示在线购物会员折扣商品列表，用户如果是在会员登录状态下购买，则可以享受折扣活动。我们需要展示商品的名称、价格、是否有折扣活动和活动后的最终价格，以及购物车中已经选中的商品和总价。

在这个示例中，我们要先定义每个商品的原价和是否参与折扣活动，还要定义会员的折扣系数，根据这些数据计算出实际价格并渲染到模板中，在操作购物车时也需要根据折扣系数来计算出最终价格。

<template>
  <div>
    <div v-for="item in goods" :key="item.id">
      {{ item.name }} 特价：{{item.price | currency}}
      <span v-if="item.discount">有折扣</span>
      <span v-else>无折扣</span>
      <span v-if="isVip">实际价格：{{item.finalPrice | currency}}</span>
      <button @click="addToCart(item)">加入购物车</button>
    </div>
    <shopping-cart :cart-items="cartItems"></shopping-cart>
  </div>
</template>

<script>
import ShoppingCart from '@/components/ShoppingCart'

export default {
  data() {
    return {
      goods: [
        { id: '001', name: '天猫超市优惠券', price: 50, discount: true },
        { id: '002', name: '天猫图书最新畅销书', price: 50, discount: false },
        { id: '003', name: '天猫生活家居精选', price: 100, discount: true },
        { id: '004', name: '精美鲜花', price: 200, discount: true },
      ],
      cartItems: [],
      // 会员折扣系数
      vipDiscount: 0.85,
      // 是否是会员
      isVip: true
    }
  },
  methods: {
    // 加入购物车
    addToCart(item) {
      const finalPrice = this.isVip ? item.price * this.vipDiscount : item.price
      const existItem = this.cartItems.find(cartItem => cartItem.id === item.id)
      if (existItem) {
        existItem.count++
      } else {
        this.cartItems.push({
          id: item.id,
          name: item.name,
          price: item.price,
          count: 1,
          finalPrice // 实际价格
        })
      }
    }
  },
  filters: {
    // 格式化为货币形式
    currency(price) {
      return '¥ ' + price.toFixed(2);
    }
  },
  components: {
    ShoppingCart
  }
}
</script>

在这个示例中，我们根据是否有折扣来展示折扣信息，如果是会员登录状态，则展示实际价格。在addToCart方法中，如果是会员，则根据会员折扣系数计算实际价格并将其作为购物车数据的一部分添加到购物车中。每个商品在展示时都使用currency过滤器格式化为货币形式。

至此，两个购物车总价计算的示例，以及如何实现Vue购物车总价计算的完整攻略已经讲解完成。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 实现购物车总价计算 - Python技术站