55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<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>
|