<template>
|
<div class="container mx-auto px-4 py-8">
|
<div class="bg-white rounded-lg shadow h-[780px]">
|
<!-- 购物车头部 -->
|
<div class="p-4 border-b">
|
<h1 class="text-xl font-medium">购物车</h1>
|
</div>
|
|
<!-- 购物车主体 -->
|
<div class="p-4" style="height: calc(100% - 58px); box-sizing: border-box;">
|
<!-- 表头 -->
|
<div class="flex items-center pb-4 border-b text-gray-500 text-sm" style=" background-color: #f4f4f4; box-sizing: border-box; padding: 10px 15px;">
|
<div class="w-12">
|
<el-checkbox v-model="allSelected" />
|
</div>
|
<div class="flex-1">商品</div>
|
<div class="w-24 text-center">单价</div>
|
<div class="w-32 text-center">数量</div>
|
<div class="w-24 text-center">小计</div>
|
<div class="w-24 text-center">操作</div>
|
</div>
|
|
<!-- 购物车为空时显示 -->
|
<el-empty v-if="!cartItems.length" description="购物车还是空的" />
|
|
<!-- 商品列表 -->
|
<div v-else style=" height: calc(100% - 116px);overflow: auto;">
|
<div v-for="item in cartItems" :key="item.addID" class="flex items-center border-b" style="padding: 1rem;">
|
<div class="w-12">
|
<el-checkbox
|
v-model="item.selected"
|
@change="(val) => cartStore.updateItemSelected(item.addID, val)"
|
/>
|
</div>
|
<div class="flex-1 flex items-center gap-4">
|
<el-image :src="item.image" class="w-20 h-20 object-cover rounded" />
|
<div class="flex-1">
|
<div class="text-sm">{{ item.name }}</div>
|
</div>
|
</div>
|
<div class="w-24 text-center">¥{{ item.price }}</div>
|
<div class="w-32 text-center">
|
<el-input-number
|
v-model="item.quantity"
|
:min="1"
|
:max="99"
|
size="small"
|
@change="() => handleQuantityChange(item)"
|
/>
|
</div>
|
<div class="w-24 text-center text-red-500">
|
¥{{ (item.price * item.quantity).toFixed(2) }}
|
</div>
|
<div class="w-24 text-center">
|
<el-button type="text" @click="removeItem(item)">删除</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 购物车底部 -->
|
<div v-if="cartItems.length" class="flex justify-between items-center mt-4 py-4">
|
<div class="flex items-center gap-4">
|
<!-- <el-checkbox v-model="allSelected">全选</el-checkbox> -->
|
<el-button type="text" @click="removeSelected">删除选中</el-button>
|
</div>
|
<div class="flex items-center gap-4">
|
<div class="text-gray-500">
|
已选商品 <span class="text-red-500">{{ selectedCount }}</span> 件
|
</div>
|
<div class="text-gray-500">
|
合计：<span class=" text-lg font-bold" style="color: #16b5cb;font-size: large;">¥{{ totalPrice.toFixed(2) }}</span>
|
</div>
|
<el-button
|
type="primary"
|
:disabled="!selectedCount"
|
@click="handleCheckout"
|
>
|
结算
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { useCartStore } from '@/stores/useCartStore';
|
|
const router = useRouter();
|
const cartStore = useCartStore();
|
|
// 获取购物车数据
|
const cartItems = computed(() => cartStore.items);
|
|
// 全选状态
|
const allSelected = computed({
|
get: () => cartItems.value.length > 0 && cartItems.value.every(item => item.selected),
|
set: (val) => {
|
cartStore.updateAllSelected(val);
|
}
|
});
|
|
// 选中商品数量
|
const selectedCount = computed(() => {
|
return cartItems.value.filter(item => item.selected).length;
|
});
|
|
// 选中商品总价
|
const totalPrice = computed(() => {
|
return cartItems.value
|
.filter(item => item.selected)
|
.reduce((total, item) => total + (item.price * item.quantity), 0);
|
});
|
|
// 修改商品数量
|
const handleQuantityChange = (item: any) => {
|
cartStore.updateItemQuantity(item.addID, item.quantity);
|
};
|
|
// 删除单个商品
|
const removeItem = async (item: any) => {
|
try {
|
await ElMessageBox.confirm('确定要删除该商品吗？', '提示', {
|
type: 'warning'
|
});
|
cartStore.removeFromCart(item.addID);
|
ElMessage.success('删除成功');
|
} catch {
|
// 用户取消删除
|
}
|
};
|
|
// 删除选中商品
|
const removeSelected = async () => {
|
if (!selectedCount.value) {
|
ElMessage.warning('请先选择要删除的商品');
|
return;
|
}
|
|
try {
|
await ElMessageBox.confirm('确定要删除选中的商品吗？', '提示', {
|
type: 'warning'
|
});
|
cartItems.value.forEach(item => {
|
if (item.selected) {
|
cartStore.removeFromCart(item.addID);
|
}
|
});
|
ElMessage.success('删除成功');
|
} catch {
|
// 用户取消删除
|
}
|
};
|
|
// 结算
|
const handleCheckout = () => {
|
if (!selectedCount.value) {
|
ElMessage.warning('请先选择要结算的商品');
|
return;
|
}
|
router.push('/order-info');
|
};
|
</script>
|
|
<style scoped>
|
.el-input-number {
|
width: 120px;
|
}
|
</style>
|
