wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
+103
-24
@@ -66,8 +66,7 @@ async function start(activity: GroupBuyingActivityView, open: boolean): Promise<
|
||||
};
|
||||
await router.push("/checkout");
|
||||
} catch (err: unknown) {
|
||||
error.value =
|
||||
err instanceof ApiError ? err.message : t("marketing.groupFailed");
|
||||
error.value = err instanceof ApiError ? err.message : t("marketing.groupFailed");
|
||||
} finally {
|
||||
workingId.value = "";
|
||||
}
|
||||
@@ -80,32 +79,114 @@ onMounted(() => {
|
||||
</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">
|
||||
<img class="h-[350px] w-full object-cover" src="/mock/collective-banner.svg" :alt="t('marketing.collectiveBannerAlt')" />
|
||||
<header class="mt-5 border border-border 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.collectiveTitle") }}</h1></header>
|
||||
<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="activities.length" class="grid gap-4 py-5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
|
||||
<VCard v-for="activity in activities" :key="activity.id" :padded="false" class="min-w-0 overflow-hidden">
|
||||
<NuxtLink :to="`/goods/${activity.product_slug}`" class="flex h-52 items-center justify-center bg-bg">
|
||||
<img class="h-full w-full object-contain" :src="activity.image || '/mock/product-1.svg'" :alt="pick(activity.product_name, locale)" loading="lazy" />
|
||||
<section class="max-w-mall bg-surface mx-auto px-4">
|
||||
<img
|
||||
class="h-[350px] w-full object-cover"
|
||||
src="/mock/collective-banner.svg"
|
||||
:alt="t('marketing.collectiveBannerAlt')"
|
||||
/>
|
||||
<header class="border-border bg-bg mt-5 border px-4 py-3.5">
|
||||
<h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-[17px] font-medium">
|
||||
{{ t("marketing.collectiveTitle") }}
|
||||
</h1>
|
||||
</header>
|
||||
<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="activities.length"
|
||||
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
|
||||
>
|
||||
<VCard
|
||||
v-for="activity in activities"
|
||||
:key="activity.id"
|
||||
:padded="false"
|
||||
class="min-w-0 overflow-hidden"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="`/goods/${activity.product_slug}`"
|
||||
class="bg-bg flex h-52 items-center justify-center"
|
||||
>
|
||||
<img
|
||||
class="h-full w-full object-contain"
|
||||
:src="activity.image || '/mock/product-1.svg'"
|
||||
:alt="pick(activity.product_name, locale)"
|
||||
loading="lazy"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<div class="p-3.5">
|
||||
<NuxtLink :to="`/goods/${activity.product_slug}`" class="line-clamp-2 font-medium hover:text-primary">{{ pick(activity.name, locale) }}</NuxtLink>
|
||||
<div class="mt-2 flex items-center justify-between gap-2"><span class="text-lg font-semibold text-primary"><PriceText :amount-minor="activity.group_price_minor" :currency="activity.currency" /></span><VBadge tone="red">{{ t("marketing.peopleGroup", { n: activity.required_members }) }}</VBadge></div>
|
||||
<p class="my-2 text-sm text-muted"><s><PriceText :amount-minor="activity.original_price_minor" :currency="activity.original_currency" /></s></p>
|
||||
<NuxtLink
|
||||
:to="`/goods/${activity.product_slug}`"
|
||||
class="hover:text-primary line-clamp-2 font-medium"
|
||||
>{{ pick(activity.name, locale) }}</NuxtLink
|
||||
>
|
||||
<div class="mt-2 flex items-center justify-between gap-2">
|
||||
<span class="text-primary text-lg font-semibold"
|
||||
><PriceText
|
||||
:amount-minor="activity.group_price_minor"
|
||||
:currency="activity.currency" /></span
|
||||
><VBadge tone="red">{{
|
||||
t("marketing.peopleGroup", { n: activity.required_members })
|
||||
}}</VBadge>
|
||||
</div>
|
||||
<p class="text-muted my-2 text-sm">
|
||||
<s
|
||||
><PriceText
|
||||
:amount-minor="activity.original_price_minor"
|
||||
:currency="activity.original_currency"
|
||||
/></s>
|
||||
</p>
|
||||
<div v-if="activity.open_groups.length" class="grid gap-2">
|
||||
<label v-for="group in activity.open_groups" :key="group.id" class="flex cursor-pointer items-center gap-2 rounded-md border border-border p-2 text-xs has-[:checked]:border-primary has-[:checked]:bg-primary-soft">
|
||||
<input v-model="selectedGroup[activity.id]" class="h-4 w-4 accent-primary" type="radio" :name="`group-${activity.id}`" :value="group.id" />
|
||||
<span class="flex-1">{{ t("marketing.paidMembers", { n: group.paid_member_count, total: group.required_members }) }}</span>
|
||||
<span class="text-muted">{{ group.expires_at.slice(5, 16).replace('T', ' ') }}</span>
|
||||
<label
|
||||
v-for="group in activity.open_groups"
|
||||
:key="group.id"
|
||||
class="border-border has-[:checked]:border-primary has-[:checked]:bg-primary-soft flex cursor-pointer items-center gap-2 rounded-md border p-2 text-xs"
|
||||
>
|
||||
<input
|
||||
v-model="selectedGroup[activity.id]"
|
||||
class="accent-primary h-4 w-4"
|
||||
type="radio"
|
||||
:name="`group-${activity.id}`"
|
||||
:value="group.id"
|
||||
/>
|
||||
<span class="flex-1">{{
|
||||
t("marketing.paidMembers", {
|
||||
n: group.paid_member_count,
|
||||
total: group.required_members,
|
||||
})
|
||||
}}</span>
|
||||
<span class="text-muted">{{
|
||||
group.expires_at.slice(5, 16).replace("T", " ")
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
<p v-else class="my-2 text-sm text-muted">{{ t("marketing.noOpenGroups") }}</p>
|
||||
<div class="mt-3 flex gap-2"><VBtn class="flex-1" variant="primary" type="button" :disabled="workingId === activity.id" @click="start(activity, true)">{{ t("marketing.openGroup") }}</VBtn><VBtn class="flex-1" type="button" :disabled="workingId === activity.id || !chosenGroup(activity.id)" @click="start(activity, false)">{{ t("marketing.joinGroup") }}</VBtn></div>
|
||||
<p v-if="chosenGroup(activity.id)" class="mt-2 text-sm text-muted">{{ joined(activity, chosenGroup(activity.id)) }}</p>
|
||||
<p v-else class="text-muted my-2 text-sm">{{ t("marketing.noOpenGroups") }}</p>
|
||||
<div class="mt-3 flex gap-2">
|
||||
<VBtn
|
||||
class="flex-1"
|
||||
variant="primary"
|
||||
type="button"
|
||||
:disabled="workingId === activity.id"
|
||||
@click="start(activity, true)"
|
||||
>{{ t("marketing.openGroup") }}</VBtn
|
||||
><VBtn
|
||||
class="flex-1"
|
||||
type="button"
|
||||
:disabled="workingId === activity.id || !chosenGroup(activity.id)"
|
||||
@click="start(activity, false)"
|
||||
>{{ t("marketing.joinGroup") }}</VBtn
|
||||
>
|
||||
</div>
|
||||
<p v-if="chosenGroup(activity.id)" class="text-muted mt-2 text-sm">
|
||||
{{ joined(activity, chosenGroup(activity.id)) }}
|
||||
</p>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
@@ -113,5 +194,3 @@ onMounted(() => {
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user