252 lines
8.3 KiB
Vue
252 lines
8.3 KiB
Vue
<script setup lang="ts">
|
|
import { t as pick } from "@vmall/shared";
|
|
import type { CartItem, LocalizedText } from "@vmall/shared";
|
|
|
|
type CartGroup = {
|
|
shopId: string;
|
|
shopName: LocalizedText;
|
|
items: CartItem[];
|
|
};
|
|
|
|
const { $api } = useNuxtApp();
|
|
const { locale, t } = useI18n();
|
|
const { currency } = usePrefs();
|
|
const cartStore = useCartStore();
|
|
const router = useRouter();
|
|
|
|
const items = ref<CartItem[]>([]);
|
|
const selected = reactive<Record<string, boolean>>({});
|
|
const loading = ref(true);
|
|
const mutating = ref(false);
|
|
const error = ref("");
|
|
|
|
const stepLabels = computed(() => [
|
|
t("cart.steps.cart"),
|
|
t("cart.steps.order"),
|
|
t("cart.steps.payment"),
|
|
t("cart.steps.complete"),
|
|
]);
|
|
|
|
// Grouped by the line's own shop, which the cart API returns; the fixed-data
|
|
// catalog is no longer consulted for shop or stock.
|
|
const groups = computed<CartGroup[]>(() => {
|
|
const grouped = new Map<string, CartGroup>();
|
|
for (const item of items.value) {
|
|
const group = grouped.get(item.shop_id) ?? {
|
|
shopId: item.shop_id,
|
|
shopName: item.shop_name,
|
|
items: [],
|
|
};
|
|
group.items.push(item);
|
|
grouped.set(item.shop_id, group);
|
|
}
|
|
return [...grouped.values()];
|
|
});
|
|
|
|
const selectedItems = computed(() => items.value.filter((item) => selected[item.sku_id]));
|
|
const allSelected = computed(
|
|
() => items.value.length > 0 && items.value.every((item) => selected[item.sku_id]),
|
|
);
|
|
const selectedCurrency = computed(() => selectedItems.value[0]?.currency ?? currency.value);
|
|
const selectedTotalMinor = computed(() =>
|
|
selectedItems.value.reduce((total, item) => total + item.unit_price_minor * item.qty, 0),
|
|
);
|
|
|
|
function imageFor(item: CartItem): string {
|
|
return item.image ?? "/mock/product-1.svg";
|
|
}
|
|
|
|
function maxFor(item: CartItem): number {
|
|
// Advisory stock from the cart line; checkout is what actually enforces it.
|
|
return Math.max(1, item.stock);
|
|
}
|
|
|
|
async function loadCart(): Promise<void> {
|
|
loading.value = true;
|
|
error.value = "";
|
|
try {
|
|
const snapshot = await $api.getCart();
|
|
const previous = { ...selected };
|
|
for (const skuId of Object.keys(selected)) delete selected[skuId];
|
|
items.value = snapshot.items;
|
|
for (const item of items.value) selected[item.sku_id] = previous[item.sku_id] ?? true;
|
|
} catch {
|
|
error.value = t("cart.loadError");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function setAllSelected(checked: boolean): void {
|
|
for (const item of items.value) selected[item.sku_id] = checked;
|
|
}
|
|
|
|
function onSelectionChange(skuId: string, event: Event): void {
|
|
selected[skuId] = (event.target as HTMLInputElement).checked;
|
|
}
|
|
|
|
async function updateQuantity(item: CartItem, qty: number): Promise<void> {
|
|
mutating.value = true;
|
|
error.value = "";
|
|
try {
|
|
await $api.updateCartItem(item.sku_id, qty);
|
|
await loadCart();
|
|
await cartStore.refresh();
|
|
} catch {
|
|
error.value = t("cart.updateError");
|
|
} finally {
|
|
mutating.value = false;
|
|
}
|
|
}
|
|
|
|
async function removeItem(item: CartItem): Promise<void> {
|
|
mutating.value = true;
|
|
error.value = "";
|
|
try {
|
|
await $api.removeCartItem(item.sku_id);
|
|
await loadCart();
|
|
await cartStore.refresh();
|
|
} catch {
|
|
error.value = t("cart.updateError");
|
|
} finally {
|
|
mutating.value = false;
|
|
}
|
|
}
|
|
|
|
async function goToCheckout(): Promise<void> {
|
|
if (selectedItems.value.length === 0) return;
|
|
await router.push("/checkout");
|
|
}
|
|
|
|
onMounted(() => void loadCart());
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-bg text-text min-h-screen font-sans">
|
|
<div class="max-w-mall mx-auto px-4 py-6">
|
|
<UiStepBar :steps="stepLabels" :active="0" />
|
|
<header class="mb-4 flex items-center">
|
|
<h1 class="m-0 text-xl font-medium">{{ t("cart.title") }}</h1>
|
|
</header>
|
|
|
|
<p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
|
|
{{ error }}
|
|
</p>
|
|
<template v-if="!loading && items.length > 0">
|
|
<VCard
|
|
v-for="group in groups"
|
|
:key="group.shopId"
|
|
:padded="false"
|
|
class="mb-4 overflow-hidden"
|
|
>
|
|
<header class="border-border flex items-center gap-2 border-b px-4 py-3 text-sm">
|
|
<span class="text-muted">{{ t("cart.shop") }}</span>
|
|
<strong>{{ pick(group.shopName, locale) || t("cart.unknownStore") }}</strong>
|
|
</header>
|
|
<VTable>
|
|
<thead>
|
|
<tr>
|
|
<th class="w-10" />
|
|
<th>{{ t("cart.product") }}</th>
|
|
<th>{{ t("cart.spec") }}</th>
|
|
<th>{{ t("cart.unitPrice") }}</th>
|
|
<th>{{ t("cart.quantity") }}</th>
|
|
<th>{{ t("cart.subtotal") }}</th>
|
|
<th>{{ t("cart.actions") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in group.items" :key="item.sku_id">
|
|
<td>
|
|
<input
|
|
:checked="Boolean(selected[item.sku_id])"
|
|
class="accent-primary h-4 w-4"
|
|
type="checkbox"
|
|
:aria-label="pick(item.product_name, locale)"
|
|
@change="onSelectionChange(item.sku_id, $event)"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
class="h-14 w-14 shrink-0 object-cover"
|
|
:src="imageFor(item)"
|
|
:alt="pick(item.product_name, locale)"
|
|
/>
|
|
<span>{{ pick(item.product_name, locale) }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-muted">{{ item.sku_code }}</td>
|
|
<td>
|
|
<PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
|
|
</td>
|
|
<td>
|
|
<UiQtyStepper
|
|
:model-value="item.qty"
|
|
:max="maxFor(item)"
|
|
@update:model-value="updateQuantity(item, $event)"
|
|
/>
|
|
</td>
|
|
<td class="text-primary font-semibold">
|
|
<PriceText
|
|
:amount-minor="item.unit_price_minor * item.qty"
|
|
:currency="item.currency"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<button
|
|
type="button"
|
|
class="text-primary hover:text-primary-hover cursor-pointer text-sm disabled:opacity-50"
|
|
:disabled="mutating"
|
|
@click="removeItem(item)"
|
|
>
|
|
{{ t("cart.remove") }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
</VCard>
|
|
|
|
<footer
|
|
class="border-border bg-surface mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border p-4 shadow-sm"
|
|
>
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input
|
|
:checked="allSelected"
|
|
class="accent-primary h-4 w-4"
|
|
type="checkbox"
|
|
@change="setAllSelected(($event.target as HTMLInputElement).checked)"
|
|
/>
|
|
<span>{{ t("cart.selectAll") }}</span>
|
|
</label>
|
|
<span class="text-muted text-sm">{{
|
|
t("cart.selectedCount", { n: selectedItems.length })
|
|
}}</span>
|
|
<span class="text-sm">{{ t("cart.subtotal") }}:</span>
|
|
<strong class="text-primary text-lg"
|
|
><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency"
|
|
/></strong>
|
|
<VBtn
|
|
variant="primary"
|
|
type="button"
|
|
:disabled="selectedItems.length === 0 || mutating"
|
|
@click="goToCheckout"
|
|
>{{ t("cart.checkout") }}</VBtn
|
|
>
|
|
</footer>
|
|
</template>
|
|
|
|
<VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
|
|
<UiEmptyState :text="t('cart.empty')" />
|
|
<NuxtLink
|
|
class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-white"
|
|
to="/"
|
|
>{{ t("cart.continueShopping") }}</NuxtLink
|
|
>
|
|
</VCard>
|
|
<div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|