购物车页面vue代码

在Vue.js中创建购物车页面通常会涉及到组件化的设计。首先，我们需要一个基本的结构，包括商品列表、每个商品的信息显示、加减按钮以及总价计算等。下面是一个简单的示例：

<template>
  <div class="cart-page">
    <h2>购物车</h2>
    <ul class="product-list">
      <li v-for="(item, index) in products" :key="index">
        <span>{{ item.name }}</span>
        <img :src="item.image" alt="{{ item.name }}">
        <p>价格: {{ item.price }} 元</p>
        <button @click="increaseQuantity(index)">+</button>
        <button @click="decreaseQuantity(index)">-</button>
        <p>数量: {{ item.quantity }}</p>
        <p>小计: {{ calculateSubtotal(item) }} 元</p>
      </li>
    </ul>
    <div>Total: {{ totalPrice }} 元</div>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        // 假设这里有一些预定义的商品数据
      ],
      totalPrice: 0,
    };
  },
  methods: {
    increaseQuantity(index) {
      this.products[index].quantity++;
      this.totalPrice = this.calculateTotalPrice();
    },
    decreaseQuantity(index) {
      if (this.products[index].quantity > 0) {
        this.products[index].quantity--;
        this.totalPrice = this.calculateTotalPrice();
      }
    },
    calculateSubtotal(item) {
      return item.price * item.quantity;
    },
    calculateTotalPrice() {
      let total = 0;
      for (let item of this.products) {
        total += this.calculateSubtotal(item);
      }
      return total;
    },
    clearCart() {
      this.products = [];
      this.totalPrice = 0;
    },
  },
};
</script>

在这个例子中，我们使用了Vue的`v-for`指令遍历商品数组，并通过`@click`事件监听器处理加减操作和清空购物车的功能。注意，这只是一个基础版本，实际项目中可能还需要添加商品选择、库存检查等功能，并且数据可能会来自服务端API。