wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
+93
-19
@@ -87,27 +87,103 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg pb-14 font-sans text-text">
|
||||
<div class="bg-bg text-text min-h-screen pb-14 font-sans">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<section class="mx-auto max-w-mall bg-surface px-4">
|
||||
<header class="border border-border border-b-0 bg-bg px-4 py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-[17px] font-medium">{{ t("marketing.seckillTitle") }}</h1></header>
|
||||
<div class="grid grid-cols-2 border border-border border-b-0 sm:grid-cols-4" role="tablist">
|
||||
<button v-for="(session, index) in sessions" :key="session.id" type="button" class="flex min-h-[70px] cursor-pointer flex-col items-center justify-center border-0 border-r border-border bg-surface px-2 text-sm last:border-r-0" :class="index === activeSessionIndex ? 'bg-primary-soft text-primary' : ''" role="tab" :aria-selected="index === activeSessionIndex" @click="activeSessionIndex = index; updateCountdown()">
|
||||
<strong>{{ pick(session.label, locale) }}</strong><span class="text-xs text-muted">{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
|
||||
<section class="max-w-mall bg-surface mx-auto px-4">
|
||||
<header class="border-border bg-bg border border-b-0 px-4 py-3.5">
|
||||
<h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-[17px] font-medium">
|
||||
{{ t("marketing.seckillTitle") }}
|
||||
</h1>
|
||||
</header>
|
||||
<div class="border-border grid grid-cols-2 border border-b-0 sm:grid-cols-4" role="tablist">
|
||||
<button
|
||||
v-for="(session, index) in sessions"
|
||||
:key="session.id"
|
||||
type="button"
|
||||
class="border-border bg-surface flex min-h-[70px] cursor-pointer flex-col items-center justify-center border-0 border-r px-2 text-sm last:border-r-0"
|
||||
:class="index === activeSessionIndex ? 'bg-primary-soft text-primary' : ''"
|
||||
role="tab"
|
||||
:aria-selected="index === activeSessionIndex"
|
||||
@click="
|
||||
activeSessionIndex = index;
|
||||
updateCountdown();
|
||||
"
|
||||
>
|
||||
<strong>{{ pick(session.label, locale) }}</strong
|
||||
><span class="text-muted text-xs">{{
|
||||
index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming")
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="activeSession" class="m-0 border border-border bg-bg px-4 py-3 text-center text-lg font-semibold text-primary" aria-live="polite">{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}</p>
|
||||
<p v-if="error" class="my-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger" role="alert">{{ error }}</p>
|
||||
<div v-if="loading" class="py-6 text-muted">{{ t("common.loading") }}</div>
|
||||
<div v-else-if="activeSession && activeSession.items.length" class="grid gap-4 py-5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
|
||||
<VCard v-for="item in activeSession.items" :key="item.id" :padded="false" class="min-w-0 overflow-hidden">
|
||||
<NuxtLink :to="`/goods/${item.product_slug}`" class="flex h-52 items-center justify-center bg-bg"><img class="h-full w-full object-contain" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" loading="lazy" /></NuxtLink>
|
||||
<p
|
||||
v-if="activeSession"
|
||||
class="border-border bg-bg text-primary m-0 border px-4 py-3 text-center text-lg font-semibold"
|
||||
aria-live="polite"
|
||||
>
|
||||
{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}
|
||||
</p>
|
||||
<p
|
||||
v-if="error"
|
||||
class="border-danger/30 bg-danger/10 text-danger my-4 border px-3.5 py-2.5"
|
||||
role="alert"
|
||||
>
|
||||
{{ error }}
|
||||
</p>
|
||||
<div v-if="loading" class="text-muted py-6">{{ t("common.loading") }}</div>
|
||||
<div
|
||||
v-else-if="activeSession && activeSession.items.length"
|
||||
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
|
||||
>
|
||||
<VCard
|
||||
v-for="item in activeSession.items"
|
||||
:key="item.id"
|
||||
:padded="false"
|
||||
class="min-w-0 overflow-hidden"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="`/goods/${item.product_slug}`"
|
||||
class="bg-bg flex h-52 items-center justify-center"
|
||||
><img
|
||||
class="h-full w-full object-contain"
|
||||
:src="item.image || '/mock/product-1.svg'"
|
||||
:alt="pick(item.product_name, locale)"
|
||||
loading="lazy"
|
||||
/></NuxtLink>
|
||||
<div class="p-3.5">
|
||||
<NuxtLink :to="`/goods/${item.product_slug}`" class="line-clamp-2 font-medium hover:text-primary">{{ pick(item.product_name, locale) }}</NuxtLink>
|
||||
<p class="my-2 flex items-center gap-2"><span class="text-lg font-semibold text-primary"><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span><s class="text-sm text-muted"><PriceText :amount-minor="item.original_price_minor" :currency="item.original_currency" /></s></p>
|
||||
<div class="flex items-center gap-2 text-xs text-muted"><div class="h-2 flex-1 overflow-hidden rounded-full bg-bg"><span class="block h-full bg-primary" :style="{ width: `${soldPct(item)}%` }"></span></div><span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span></div>
|
||||
<p class="my-2 text-sm text-muted">{{ t("marketing.stock", { n: item.reserved_stock }) }}</p>
|
||||
<VBtn class="w-full" variant="primary" type="button" :disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id" @click="addToCart(item)">{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}</VBtn>
|
||||
<NuxtLink
|
||||
:to="`/goods/${item.product_slug}`"
|
||||
class="hover:text-primary line-clamp-2 font-medium"
|
||||
>{{ pick(item.product_name, locale) }}</NuxtLink
|
||||
>
|
||||
<p class="my-2 flex items-center gap-2">
|
||||
<span class="text-primary text-lg font-semibold"
|
||||
><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span
|
||||
><s class="text-muted text-sm"
|
||||
><PriceText
|
||||
:amount-minor="item.original_price_minor"
|
||||
:currency="item.original_currency"
|
||||
/></s>
|
||||
</p>
|
||||
<div class="text-muted flex items-center gap-2 text-xs">
|
||||
<div class="bg-bg h-2 flex-1 overflow-hidden rounded-full">
|
||||
<span
|
||||
class="bg-primary block h-full"
|
||||
:style="{ width: `${soldPct(item)}%` }"
|
||||
></span>
|
||||
</div>
|
||||
<span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
|
||||
</div>
|
||||
<p class="text-muted my-2 text-sm">
|
||||
{{ t("marketing.stock", { n: item.reserved_stock }) }}
|
||||
</p>
|
||||
<VBtn
|
||||
class="w-full"
|
||||
variant="primary"
|
||||
type="button"
|
||||
:disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id"
|
||||
@click="addToCart(item)"
|
||||
>{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}</VBtn
|
||||
>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
@@ -115,5 +191,3 @@ onBeforeUnmount(() => {
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user