<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue3 小型购物车</title>
  <script src="https://unpkg.com/vue@3"></script>
  <style>
    table thead tr {
      background-color: #ffebcd;
    }

    table {
      margin: 0 auto;
      border: 1px solid #989898;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #989898;
      text-align: center;
      padding: 5px 10px;
    }

    button {
      margin: 0 2px;
      padding: 2px 6px;
      cursor: pointer;
    }

    h2 {
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>购物车表格</h2>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(book, index) in books" :key="book.id">
          <td>{{ index + 1 }}</td>
          <td>{{ book.name }}</td>
          <td>{{ book.date }}</td>
          <td>￥{{ book.price.toFixed(2) }}</td>
          <td>
            <button @click="increase(book)">+</button>
            {{ book.count }}
            <button @click="decrease(book)">-</button>
          </td>
          <td>
            <button @click="remove(index)">移除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h3 style="text-align:center;">总价：￥{{ totalPrice.toFixed(2) }}</h3>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          books: [
            { id: 1, name: '《JavaScript程序设计》', date: '2022-9', price: 85.0, count: 1 },
            { id: 2, name: '《C语言基础》', date: '2021-2', price: 59.0, count: 1 },
            { id: 3, name: '《Java高级语言编程》', date: '2022-10', price: 39.0, count: 1 },
            { id: 4, name: '《数据库原理》', date: '2023-3', price: 128.0, count: 1 },
            { id: 5, name: '《计算机网络》', date: '2022-8', price: 88.0, count: 1 }
          ]
        };
      },
      computed: {
        totalPrice() {
          return this.books.reduce((sum, book) => sum + book.price * book.count, 0);
        }
      },
      methods: {
        increase(book) {
          book.count++;
        },
        decrease(book) {
          if (book.count > 1) book.count--;
        },
        remove(index) {
          this.books.splice(index, 1);
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

