vue3前端的购物车模板代码

以下是一个简单的购物车模板代码，基于 Vue3 和 TypeScript：

<template>
  <div class="cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
        <span>
          <button @click="decreaseQuantity(index)" :disabled="item.quantity === 1">-</button>
          {{ item.quantity }}
          <button @click="increaseQuantity(index)">+</button>
        </span>
        <span>{{ item.price * item.quantity }}</span>
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <div v-if="cartItems.length === 0">
      购物车为空
    </div>
    <div v-else>
      <div>
        <span>总价：</span>
        <span>{{ total }}</span>
      </div>
      <button @click="checkout">结算</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface CartItem {
  name: string;
  price: number;
  quantity: number;
}

export default defineComponent({
  data() {
    return {
      cartItems: [
        { name: '商品1', price: 10, quantity: 1 },
        { name: '商品2', price: 20, quantity: 2 },
        { name: '商品3', price: 30, quantity: 3 },
      ] as CartItem[],
    };
  },
  computed: {
    total() {
      return this.cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
    },
  },
  methods: {
    increaseQuantity(index: number) {
      this.cartItems[index].quantity++;
    },
    decreaseQuantity(index: number) {
      this.cartItems[index