wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
@@ -1,6 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import type { Address, AddressBookEntry, CartItem, Coupon, GroupBuyIntent, LocalizedText } from "@vmall/shared";
|
||||
import type {
|
||||
Address,
|
||||
AddressBookEntry,
|
||||
CartItem,
|
||||
Coupon,
|
||||
GroupBuyIntent,
|
||||
LocalizedText,
|
||||
} from "@vmall/shared";
|
||||
|
||||
type CheckoutGroup = {
|
||||
shopId: string;
|
||||
@@ -122,8 +129,7 @@ async function loadCart(): Promise<void> {
|
||||
if (intent && !items.value.some((item) => item.sku_id === intent.sku_id)) {
|
||||
groupIntent.value = null;
|
||||
}
|
||||
selectedAddressId.value =
|
||||
list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
|
||||
selectedAddressId.value = list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
|
||||
if (items.value.length === 0) {
|
||||
await router.replace("/cart");
|
||||
}
|
||||
@@ -176,83 +182,175 @@ onBeforeUnmount(() => {
|
||||
</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="1" />
|
||||
<header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ t("checkout.title") }}</h1></header>
|
||||
<header class="mb-4">
|
||||
<h1 class="m-0 text-xl font-medium">{{ t("checkout.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 class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.address") }}</h2>
|
||||
<h2 class="mt-0 mb-4 text-base font-semibold">{{ t("checkout.address") }}</h2>
|
||||
<div v-if="addresses.length > 0" class="grid gap-2">
|
||||
<label
|
||||
v-for="address in addresses"
|
||||
:key="address.id"
|
||||
class="flex cursor-pointer items-start gap-3 rounded-md border border-border p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary-soft"
|
||||
class="border-border has-[:checked]:border-primary has-[:checked]:bg-primary-soft flex cursor-pointer items-start gap-3 rounded-md border p-3 text-sm"
|
||||
>
|
||||
<input v-model="selectedAddressId" class="mt-1 h-4 w-4 accent-primary" type="radio" name="shipping-address" :value="address.id" />
|
||||
<input
|
||||
v-model="selectedAddressId"
|
||||
class="accent-primary mt-1 h-4 w-4"
|
||||
type="radio"
|
||||
name="shipping-address"
|
||||
:value="address.id"
|
||||
/>
|
||||
<span class="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<span class="flex flex-wrap gap-2"><strong>{{ address.recipient }}</strong><span>{{ address.phone }}</span></span>
|
||||
<span class="text-muted">{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postal_code }}</span>
|
||||
<span class="flex flex-wrap gap-2"
|
||||
><strong>{{ address.recipient }}</strong
|
||||
><span>{{ address.phone }}</span></span
|
||||
>
|
||||
<span class="text-muted"
|
||||
>{{ address.region }} {{ address.city }} {{ address.line1 }}
|
||||
{{ address.postal_code }}</span
|
||||
>
|
||||
</span>
|
||||
<VBadge v-if="address.is_default" tone="blue">{{ t("checkout.defaultAddress") }}</VBadge>
|
||||
<VBadge v-if="address.is_default" tone="blue">{{
|
||||
t("checkout.defaultAddress")
|
||||
}}</VBadge>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="mb-3 text-sm text-muted">{{ t("checkout.noSavedAddress") }}</p>
|
||||
<p class="text-muted mb-3 text-sm">{{ t("checkout.noSavedAddress") }}</p>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<VField :label="t('user.recipient')"><VInput v-model.trim="manual.recipient" type="text" :placeholder="t('user.recipient')" /></VField>
|
||||
<VField :label="t('user.phone')"><VInput v-model.trim="manual.phone" type="text" :placeholder="t('user.phone')" /></VField>
|
||||
<VField :label="t('user.country')"><VInput v-model.trim="manual.country" type="text" :placeholder="t('user.country')" /></VField>
|
||||
<VField :label="t('user.region')"><VInput v-model.trim="manual.region" type="text" :placeholder="t('user.region')" /></VField>
|
||||
<VField :label="t('user.city')"><VInput v-model.trim="manual.city" type="text" :placeholder="t('user.city')" /></VField>
|
||||
<VField :label="t('user.postalCode')"><VInput v-model.trim="manual.postal_code" type="text" :placeholder="t('user.postalCode')" /></VField>
|
||||
<VField class="sm:col-span-2" :label="t('user.line1')"><VInput v-model.trim="manual.line1" type="text" :placeholder="t('user.line1')" /></VField>
|
||||
<VField :label="t('user.recipient')"
|
||||
><VInput
|
||||
v-model.trim="manual.recipient"
|
||||
type="text"
|
||||
:placeholder="t('user.recipient')"
|
||||
/></VField>
|
||||
<VField :label="t('user.phone')"
|
||||
><VInput v-model.trim="manual.phone" type="text" :placeholder="t('user.phone')"
|
||||
/></VField>
|
||||
<VField :label="t('user.country')"
|
||||
><VInput v-model.trim="manual.country" type="text" :placeholder="t('user.country')"
|
||||
/></VField>
|
||||
<VField :label="t('user.region')"
|
||||
><VInput v-model.trim="manual.region" type="text" :placeholder="t('user.region')"
|
||||
/></VField>
|
||||
<VField :label="t('user.city')"
|
||||
><VInput v-model.trim="manual.city" type="text" :placeholder="t('user.city')"
|
||||
/></VField>
|
||||
<VField :label="t('user.postalCode')"
|
||||
><VInput
|
||||
v-model.trim="manual.postal_code"
|
||||
type="text"
|
||||
:placeholder="t('user.postalCode')"
|
||||
/></VField>
|
||||
<VField class="sm:col-span-2" :label="t('user.line1')"
|
||||
><VInput v-model.trim="manual.line1" type="text" :placeholder="t('user.line1')"
|
||||
/></VField>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
|
||||
<div v-for="group in groups" :key="group.shopId" class="border-b border-border pb-3 last:border-b-0 last:pb-0">
|
||||
<header class="border-b border-border py-2 text-sm font-medium">{{ pick(group.shopName, locale) || t("checkout.shop") }}</header>
|
||||
<div v-for="item in group.items" :key="item.sku_id" class="grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b border-bg py-3 last:border-b-0">
|
||||
<img class="h-14 w-14 object-cover" :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
|
||||
<div class="flex min-w-0 flex-col gap-1"><strong class="truncate">{{ pick(item.product_name, locale) }}</strong><span class="text-xs text-muted">{{ item.sku_code }}</span></div>
|
||||
<h2 class="mt-0 mb-4 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
|
||||
<div
|
||||
v-for="group in groups"
|
||||
:key="group.shopId"
|
||||
class="border-border border-b pb-3 last:border-b-0 last:pb-0"
|
||||
>
|
||||
<header class="border-border border-b py-2 text-sm font-medium">
|
||||
{{ pick(group.shopName, locale) || t("checkout.shop") }}
|
||||
</header>
|
||||
<div
|
||||
v-for="item in group.items"
|
||||
:key="item.sku_id"
|
||||
class="border-bg grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b py-3 last:border-b-0"
|
||||
>
|
||||
<img
|
||||
class="h-14 w-14 object-cover"
|
||||
:src="imageFor(item)"
|
||||
:alt="pick(item.product_name, locale)"
|
||||
/>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<strong class="truncate">{{ pick(item.product_name, locale) }}</strong
|
||||
><span class="text-muted text-xs">{{ item.sku_code }}</span>
|
||||
</div>
|
||||
<PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
|
||||
<span class="text-xs text-muted">× {{ item.qty }}</span>
|
||||
<strong class="text-right text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></strong>
|
||||
<span class="text-muted text-xs">× {{ item.qty }}</span>
|
||||
<strong class="text-primary text-right"
|
||||
><PriceText
|
||||
:amount-minor="item.unit_price_minor * item.qty"
|
||||
:currency="item.currency"
|
||||
/></strong>
|
||||
</div>
|
||||
<div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="flex flex-wrap items-center gap-3 pt-3 text-sm">
|
||||
<div
|
||||
v-if="!groupIntent && couponsForShop(group.shopId).length > 0"
|
||||
class="flex flex-wrap items-center gap-3 pt-3 text-sm"
|
||||
>
|
||||
<span class="text-muted">{{ t("checkout.coupon") }}</span>
|
||||
<select v-model="selectedCoupon[group.shopId]" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
|
||||
<select
|
||||
v-model="selectedCoupon[group.shopId]"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
|
||||
>
|
||||
<option value="">{{ t("checkout.noCoupon") }}</option>
|
||||
<option v-for="coupon in couponsForShop(group.shopId)" :key="coupon.id" :value="coupon.id">{{ pick(coupon.title, locale) }}</option>
|
||||
<option
|
||||
v-for="coupon in couponsForShop(group.shopId)"
|
||||
:key="coupon.id"
|
||||
:value="coupon.id"
|
||||
>
|
||||
{{ pick(coupon.title, locale) }}
|
||||
</option>
|
||||
</select>
|
||||
<span v-if="selectedCouponFor(group.shopId)" class="text-danger">− <PriceText :amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0" :currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency" /></span>
|
||||
<span v-if="selectedCouponFor(group.shopId)" class="text-danger"
|
||||
>−
|
||||
<PriceText
|
||||
:amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0"
|
||||
:currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard class="mb-4 p-5">
|
||||
<label class="mb-1 block text-sm font-medium" for="order-remark">{{ t("checkout.remark") }}</label>
|
||||
<textarea id="order-remark" v-model="remark" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
|
||||
<label class="mb-1 block text-sm font-medium" for="order-remark">{{
|
||||
t("checkout.remark")
|
||||
}}</label>
|
||||
<textarea
|
||||
id="order-remark"
|
||||
v-model="remark"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
|
||||
:placeholder="t('checkout.remarkPlaceholder')"
|
||||
rows="3"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<span class="text-sm">{{ t("checkout.total") }}:</span>
|
||||
<strong class="text-lg text-primary"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{ t("checkout.submit") }}</VBtn>
|
||||
<strong class="text-primary text-lg"
|
||||
><PriceText :amount-minor="totalMinor" :currency="sourceCurrency"
|
||||
/></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{
|
||||
t("checkout.submit")
|
||||
}}</VBtn>
|
||||
</footer>
|
||||
</template>
|
||||
<VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<UiEmptyState :text="t('checkout.noItems')" />
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/cart">{{ t("checkout.backToCart") }}</NuxtLink>
|
||||
<NuxtLink
|
||||
class="border-border bg-surface hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
|
||||
to="/cart"
|
||||
>{{ t("checkout.backToCart") }}</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