wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
+129
-18
@@ -13,7 +13,7 @@ const signInThenReturn = useSignInRedirect();
|
||||
|
||||
const slug = computed(() => {
|
||||
const raw = route.params.id;
|
||||
return typeof raw === "string" ? raw : raw?.[0] ?? "";
|
||||
return typeof raw === "string" ? raw : (raw?.[0] ?? "");
|
||||
});
|
||||
|
||||
// A rejected read (unknown or suspended slug) leaves this null, which renders
|
||||
@@ -74,7 +74,9 @@ const rateRows = computed(() => {
|
||||
{ label: t("stores.service"), value: current.score_service },
|
||||
{ label: t("stores.speed"), value: current.score_speed },
|
||||
];
|
||||
return rows.filter((row): row is { label: string; value: number } => typeof row.value === "number");
|
||||
return rows.filter(
|
||||
(row): row is { label: string; value: number } => typeof row.value === "number",
|
||||
);
|
||||
});
|
||||
|
||||
function priceMinorOf(product: Product): number {
|
||||
@@ -156,38 +158,147 @@ const toggleFavorite = async (): Promise<void> => {
|
||||
if (version === favoriteRequestVersion) favoriteBusy.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg pb-16 font-sans text-text">
|
||||
<div class="bg-bg text-text min-h-screen pb-16 font-sans">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<template v-if="store">
|
||||
<div v-if="store.banner" class="mx-auto h-[350px] w-full max-w-mall overflow-hidden bg-bg px-4 max-sm:h-[220px]"><img class="h-full w-full object-cover" :src="store.banner" :alt="pick(store.name, locale)" /></div>
|
||||
<div class="mx-auto mt-5 grid w-full max-w-mall gap-5 px-4 lg:grid-cols-[270px_minmax(0,1fr)] lg:items-start">
|
||||
<div
|
||||
v-if="store.banner"
|
||||
class="max-w-mall bg-bg mx-auto h-[350px] w-full overflow-hidden px-4 max-sm:h-[220px]"
|
||||
>
|
||||
<img
|
||||
class="h-full w-full object-cover"
|
||||
:src="store.banner"
|
||||
:alt="pick(store.name, locale)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="max-w-mall mx-auto mt-5 grid w-full gap-5 px-4 lg:grid-cols-[270px_minmax(0,1fr)] lg:items-start"
|
||||
>
|
||||
<aside class="min-w-0 space-y-5">
|
||||
<VCard>
|
||||
<div class="flex items-center gap-3 border-b border-border pb-3"><img v-if="store.logo" class="h-[58px] w-[58px] border border-border object-contain" :src="store.logo" :alt="pick(store.name, locale)" /><span v-else class="flex h-[58px] w-[58px] items-center justify-center border border-border bg-bg text-lg text-muted">{{ pick(store.name, locale).slice(0, 1) }}</span><div><h1 class="m-0 text-[15px] leading-[1.45]">{{ pick(store.name, locale) }}</h1><p class="mt-1 text-xs text-primary">{{ t("stores.positiveRate") }}</p></div></div>
|
||||
<div v-if="rateRows.length" class="space-y-1 border-b border-border py-3"><div v-for="row in rateRows" :key="row.label" class="flex min-h-[25px] items-center gap-1 text-xs text-muted"><span class="w-16">{{ row.label }}</span><UiRatingStars :value="row.value" :size="13" /><strong class="ml-auto font-medium text-primary">{{ row.value.toFixed(1) }}</strong></div></div>
|
||||
<dl class="my-3 text-xs text-muted"><div v-if="store.company" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.company") }}</dt><dd class="m-0 min-w-0 break-words">{{ store.company }}</dd></div><div v-if="store.region" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.region") }}</dt><dd class="m-0 min-w-0 break-words">{{ store.region }}</dd></div><div v-if="store.address" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.address") }}</dt><dd class="m-0 min-w-0 break-words">{{ pick(store.address, locale) }}</dd></div></dl>
|
||||
<VBtn class="w-full" :class="favorite ? 'border-primary text-primary' : ''" type="button" :disabled="favoriteLoading || favoriteBusy" @click="toggleFavorite">{{ favorite ? t("stores.favorited") : t("stores.favorite") }}</VBtn>
|
||||
<p v-if="favoriteError" class="mt-1.5 text-xs text-danger">{{ favoriteError }}</p>
|
||||
<div class="border-border flex items-center gap-3 border-b pb-3">
|
||||
<img
|
||||
v-if="store.logo"
|
||||
class="border-border h-[58px] w-[58px] border object-contain"
|
||||
:src="store.logo"
|
||||
:alt="pick(store.name, locale)"
|
||||
/><span
|
||||
v-else
|
||||
class="border-border bg-bg text-muted flex h-[58px] w-[58px] items-center justify-center border text-lg"
|
||||
>{{ pick(store.name, locale).slice(0, 1) }}</span
|
||||
>
|
||||
<div>
|
||||
<h1 class="m-0 text-[15px] leading-[1.45]">{{ pick(store.name, locale) }}</h1>
|
||||
<p class="text-primary mt-1 text-xs">{{ t("stores.positiveRate") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="rateRows.length" class="border-border space-y-1 border-b py-3">
|
||||
<div
|
||||
v-for="row in rateRows"
|
||||
:key="row.label"
|
||||
class="text-muted flex min-h-[25px] items-center gap-1 text-xs"
|
||||
>
|
||||
<span class="w-16">{{ row.label }}</span
|
||||
><UiRatingStars :value="row.value" :size="13" /><strong
|
||||
class="text-primary ml-auto font-medium"
|
||||
>{{ row.value.toFixed(1) }}</strong
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="text-muted my-3 text-xs">
|
||||
<div v-if="store.company" class="my-2 grid grid-cols-[42px_1fr] gap-2">
|
||||
<dt class="text-muted">{{ t("stores.company") }}</dt>
|
||||
<dd class="m-0 min-w-0 break-words">{{ store.company }}</dd>
|
||||
</div>
|
||||
<div v-if="store.region" class="my-2 grid grid-cols-[42px_1fr] gap-2">
|
||||
<dt class="text-muted">{{ t("stores.region") }}</dt>
|
||||
<dd class="m-0 min-w-0 break-words">{{ store.region }}</dd>
|
||||
</div>
|
||||
<div v-if="store.address" class="my-2 grid grid-cols-[42px_1fr] gap-2">
|
||||
<dt class="text-muted">{{ t("stores.address") }}</dt>
|
||||
<dd class="m-0 min-w-0 break-words">{{ pick(store.address, locale) }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<VBtn
|
||||
class="w-full"
|
||||
:class="favorite ? 'border-primary text-primary' : ''"
|
||||
type="button"
|
||||
:disabled="favoriteLoading || favoriteBusy"
|
||||
@click="toggleFavorite"
|
||||
>{{ favorite ? t("stores.favorited") : t("stores.favorite") }}</VBtn
|
||||
>
|
||||
<p v-if="favoriteError" class="text-danger mt-1.5 text-xs">{{ favoriteError }}</p>
|
||||
</VCard>
|
||||
<VCard v-if="store.notice || store.after_sale">
|
||||
<template v-if="store.notice"><h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("stores.notice") }}</h2><p class="text-sm text-text">{{ pick(store.notice, locale) }}</p></template>
|
||||
<template v-if="store.after_sale"><h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("stores.afterSale") }}</h2><p class="text-sm text-text">{{ pick(store.after_sale, locale) }}</p></template>
|
||||
<template v-if="store.notice"
|
||||
><h2 class="border-primary mb-3 border-l-[3px] pl-2 text-sm font-medium">
|
||||
{{ t("stores.notice") }}
|
||||
</h2>
|
||||
<p class="text-text text-sm">{{ pick(store.notice, locale) }}</p></template
|
||||
>
|
||||
<template v-if="store.after_sale"
|
||||
><h2 class="border-primary mb-3 border-l-[3px] pl-2 text-sm font-medium">
|
||||
{{ t("stores.afterSale") }}
|
||||
</h2>
|
||||
<p class="text-text text-sm">{{ pick(store.after_sale, locale) }}</p></template
|
||||
>
|
||||
</VCard>
|
||||
</aside>
|
||||
|
||||
<section class="min-w-0">
|
||||
<header class="flex items-center justify-between border border-border bg-bg px-4 py-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"><h2 class="m-0 border-l-[3px] border-primary pl-2 text-[15px] font-medium">{{ t("stores.storeProducts") }}</h2><div class="flex"><button type="button" class="border-0 border-r border-border bg-transparent px-3 py-0 text-xs text-muted hover:text-primary" :class="sortMode === 'default' ? 'font-bold text-primary' : ''" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button><button type="button" class="border-0 bg-transparent px-3 py-0 text-xs text-muted hover:text-primary" :class="sortMode === 'price' ? 'font-bold text-primary' : ''" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button></div></header>
|
||||
<div v-if="productResult.items.length" class="mt-4 grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]"><UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" /></div>
|
||||
<header
|
||||
class="border-border bg-bg flex items-center justify-between border px-4 py-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"
|
||||
>
|
||||
<h2 class="border-primary m-0 border-l-[3px] pl-2 text-[15px] font-medium">
|
||||
{{ t("stores.storeProducts") }}
|
||||
</h2>
|
||||
<div class="flex">
|
||||
<button
|
||||
type="button"
|
||||
class="border-border text-muted hover:text-primary border-0 border-r bg-transparent px-3 py-0 text-xs"
|
||||
:class="sortMode === 'default' ? 'text-primary font-bold' : ''"
|
||||
@click="chooseSort('default')"
|
||||
>
|
||||
{{ t("stores.sortDefault") }}</button
|
||||
><button
|
||||
type="button"
|
||||
class="text-muted hover:text-primary border-0 bg-transparent px-3 py-0 text-xs"
|
||||
:class="sortMode === 'price' ? 'text-primary font-bold' : ''"
|
||||
@click="chooseSort('price')"
|
||||
>
|
||||
{{ t("stores.sortPrice") }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
v-if="productResult.items.length"
|
||||
class="mt-4 grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4"
|
||||
>
|
||||
<UiProductCard
|
||||
v-for="product in productResult.items"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('stores.noProducts')" />
|
||||
<UiPagination :page="productResult.page" :total="productResult.total" :per-page="productResult.per_page" @change="page = $event" />
|
||||
<UiPagination
|
||||
:page="productResult.page"
|
||||
:total="productResult.total"
|
||||
:per-page="productResult.per_page"
|
||||
@change="page = $event"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="mx-auto min-h-[360px] w-full max-w-mall px-4 pt-[60px] text-center"><UiEmptyState :text="t('stores.unknownStore')" /><NuxtLink to="/stores" class="mt-4 inline-flex items-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text no-underline">{{ t("stores.backToStores") }}</NuxtLink></div>
|
||||
<div v-else class="max-w-mall mx-auto min-h-[360px] w-full px-4 pt-[60px] text-center">
|
||||
<UiEmptyState :text="t('stores.unknownStore')" /><NuxtLink
|
||||
to="/stores"
|
||||
class="border-border bg-surface text-text mt-4 inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium no-underline"
|
||||
>{{ t("stores.backToStores") }}</NuxtLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -15,20 +15,70 @@ const breadcrumb = computed(() => [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg pb-16 font-sans text-text">
|
||||
<div class="bg-bg text-text min-h-screen pb-16 font-sans">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<section class="mx-auto w-full max-w-mall px-4">
|
||||
<section class="max-w-mall mx-auto w-full px-4">
|
||||
<VCard :padded="false" class="overflow-hidden">
|
||||
<header class="flex items-center justify-between border-b border-border bg-bg px-[18px] py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-base font-medium">{{ t("stores.directory") }}</h1></header>
|
||||
<div v-if="stores.length" class="divide-y divide-border">
|
||||
<article v-for="store in stores" :key="store.id" class="flex min-h-[126px] items-center gap-0 bg-surface px-[22px] py-5 hover:bg-bg max-sm:flex-wrap max-sm:gap-3">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="flex h-20 w-20 shrink-0 items-center justify-center border border-border bg-surface">
|
||||
<img v-if="store.logo" class="h-[72px] w-[72px] object-contain" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
|
||||
<span v-else class="flex h-full w-full items-center justify-center bg-bg text-[28px] font-bold uppercase text-muted" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
|
||||
<header
|
||||
class="border-border bg-bg flex items-center justify-between border-b px-[18px] py-3.5"
|
||||
>
|
||||
<h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-base font-medium">
|
||||
{{ t("stores.directory") }}
|
||||
</h1>
|
||||
</header>
|
||||
<div v-if="stores.length" class="divide-border divide-y">
|
||||
<article
|
||||
v-for="store in stores"
|
||||
:key="store.id"
|
||||
class="bg-surface hover:bg-bg flex min-h-[126px] items-center gap-0 px-[22px] py-5 max-sm:flex-wrap max-sm:gap-3"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="`/stores/${store.slug}`"
|
||||
class="border-border bg-surface flex h-20 w-20 shrink-0 items-center justify-center border"
|
||||
>
|
||||
<img
|
||||
v-if="store.logo"
|
||||
class="h-[72px] w-[72px] object-contain"
|
||||
:src="store.logo"
|
||||
:alt="pick(store.name, locale)"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="bg-bg text-muted flex h-full w-full items-center justify-center text-[28px] font-bold uppercase"
|
||||
aria-hidden="true"
|
||||
>{{ pick(store.name, locale).slice(0, 1) }}</span
|
||||
>
|
||||
</NuxtLink>
|
||||
<div class="min-w-0 flex-1 px-7 max-sm:w-[calc(100%-100px)] max-sm:px-0"><NuxtLink :to="`/stores/${store.slug}`" class="block text-base font-bold text-text no-underline hover:text-primary">{{ pick(store.name, locale) }}</NuxtLink><p v-if="store.company" class="mt-2 text-[13px] text-muted">{{ store.company }}</p><p v-if="store.region || store.address" class="mt-2 flex gap-6 text-xs text-muted max-sm:flex-col max-sm:gap-1"><span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span><span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span></p></div>
|
||||
<div class="w-[130px] text-center text-[13px] text-primary max-sm:ml-[100px] max-sm:w-auto">{{ t("stores.positiveRate") }}</div>
|
||||
<div class="flex w-[145px] flex-col items-end gap-2.5 max-sm:ml-auto max-sm:w-auto"><NuxtLink :to="`/stores/${store.slug}`" class="inline-flex items-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white no-underline hover:bg-primary-hover">{{ t("stores.visitStore") }}</NuxtLink></div>
|
||||
<div class="min-w-0 flex-1 px-7 max-sm:w-[calc(100%-100px)] max-sm:px-0">
|
||||
<NuxtLink
|
||||
:to="`/stores/${store.slug}`"
|
||||
class="text-text hover:text-primary block text-base font-bold no-underline"
|
||||
>{{ pick(store.name, locale) }}</NuxtLink
|
||||
>
|
||||
<p v-if="store.company" class="text-muted mt-2 text-[13px]">{{ store.company }}</p>
|
||||
<p
|
||||
v-if="store.region || store.address"
|
||||
class="text-muted mt-2 flex gap-6 text-xs max-sm:flex-col max-sm:gap-1"
|
||||
>
|
||||
<span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span
|
||||
><span v-if="store.address"
|
||||
>{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="text-primary w-[130px] text-center text-[13px] max-sm:ml-[100px] max-sm:w-auto"
|
||||
>
|
||||
{{ t("stores.positiveRate") }}
|
||||
</div>
|
||||
<div class="flex w-[145px] flex-col items-end gap-2.5 max-sm:ml-auto max-sm:w-auto">
|
||||
<NuxtLink
|
||||
:to="`/stores/${store.slug}`"
|
||||
class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium text-white no-underline"
|
||||
>{{ t("stores.visitStore") }}</NuxtLink
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('common.empty')" />
|
||||
@@ -36,4 +86,3 @@ const breadcrumb = computed(() => [
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user