wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
+61
-19
@@ -122,17 +122,24 @@ onMounted(() => void loadCart());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg font-sans text-text">
|
||||
<div class="mx-auto max-w-mall px-4 py-6">
|
||||
<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="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
|
||||
<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="flex items-center gap-2 border-b border-border px-4 py-3 text-sm">
|
||||
<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>
|
||||
@@ -153,7 +160,7 @@ onMounted(() => void loadCart());
|
||||
<td>
|
||||
<input
|
||||
:checked="Boolean(selected[item.sku_id])"
|
||||
class="h-4 w-4 accent-primary"
|
||||
class="accent-primary h-4 w-4"
|
||||
type="checkbox"
|
||||
:aria-label="pick(item.product_name, locale)"
|
||||
@change="onSelectionChange(item.sku_id, $event)"
|
||||
@@ -161,12 +168,18 @@ onMounted(() => void loadCart());
|
||||
</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)" />
|
||||
<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>
|
||||
<PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
|
||||
</td>
|
||||
<td>
|
||||
<UiQtyStepper
|
||||
:model-value="item.qty"
|
||||
@@ -174,9 +187,19 @@ onMounted(() => void loadCart());
|
||||
@update:model-value="updateQuantity(item, $event)"
|
||||
/>
|
||||
</td>
|
||||
<td class="font-semibold text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></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="cursor-pointer text-sm text-primary hover:text-primary-hover disabled:opacity-50" :disabled="mutating" @click="removeItem(item)">
|
||||
<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>
|
||||
@@ -185,25 +208,44 @@ onMounted(() => void loadCart());
|
||||
</VTable>
|
||||
</VCard>
|
||||
|
||||
<footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
|
||||
<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="h-4 w-4 accent-primary" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
|
||||
<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-sm text-muted">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
|
||||
<span class="text-muted text-sm">{{
|
||||
t("cart.selectedCount", { n: selectedItems.length })
|
||||
}}</span>
|
||||
<span class="text-sm">{{ t("cart.subtotal") }}:</span>
|
||||
<strong class="text-lg text-primary"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">{{ t("cart.checkout") }}</VBtn>
|
||||
<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="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/">{{ t("cart.continueShopping") }}</NuxtLink>
|
||||
<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="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
|
||||
<div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user