upd

frontend/src/pages/user/Cart.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-card title="购物车">
+    <a-table :dataSource="items" :columns="columns" rowKey="id">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'product'">
+          {{ record.product.name }}
+        </template>
+        <template v-else-if="column.key === 'quantity'">
+          <a-input-number :min="1" v-model:value="record.quantity" @change="val => updateQuantity(record, val)" />
+        </template>
+        <template v-else-if="column.key === 'price'">
+          ￥{{ record.product.price }}
+        </template>
+        <template v-else-if="column.key === 'action'">
+          <a-button type="link" danger @click="remove(record)">删除</a-button>
+        </template>
+      </template>
+    </a-table>
+    <a-button type="primary" style="margin-top: 16px" @click="goCheckout">去结算</a-button>
+  </a-card>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import api from '../../api'
+
+const router = useRouter()
+const items = ref([])
+const columns = [
+  { title: '商品', key: 'product' },
+  { title: '数量', key: 'quantity' },
+  { title: '单价', key: 'price' },
+  { title: '操作', key: 'action' }
+]
+
+const load = async () => {
+  const res = await api.get('/api/user/cart')
+  if (res.success) items.value = res.data
+}
+
+const updateQuantity = async (record, val) => {
+  await api.put(`/api/user/cart/${record.id}`, { productId: record.product.id, quantity: val })
+}
+
+const remove = async (record) => {
+  await api.delete(`/api/user/cart/${record.id}`)
+  load()
+}
+
+const goCheckout = () => router.push('/checkout')
+
+onMounted(load)
+</script>