wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
@@ -1,6 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ApiError, t as localized } from "@vmall/shared";
|
||||
import type { AftersaleDetail, AftersaleMessage, AftersaleStatus, LocalizedText } from "@vmall/shared";
|
||||
import type {
|
||||
AftersaleDetail,
|
||||
AftersaleMessage,
|
||||
AftersaleStatus,
|
||||
LocalizedText,
|
||||
} from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
|
||||
@@ -106,7 +111,8 @@ async function run(action: ShopAction): Promise<void> {
|
||||
try {
|
||||
if (action === "approve") await $api.shop.approveAftersale(aftersaleId.value);
|
||||
else if (action === "reject") await $api.shop.rejectAftersale(aftersaleId.value);
|
||||
else if (action === "confirmReceipt") await $api.shop.confirmAftersaleReceipt(aftersaleId.value);
|
||||
else if (action === "confirmReceipt")
|
||||
await $api.shop.confirmAftersaleReceipt(aftersaleId.value);
|
||||
else await $api.shop.refundAftersale(aftersaleId.value);
|
||||
notice.value = translate(doneKey[action]);
|
||||
} catch (err: unknown) {
|
||||
@@ -154,10 +160,14 @@ onMounted(() => {
|
||||
<template>
|
||||
<VPage :title="$t('aftersale.detail')">
|
||||
<template #actions>
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/aftersales">{{ $t("common.back") }}</NuxtLink>
|
||||
<NuxtLink
|
||||
class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
|
||||
to="/aftersales"
|
||||
>{{ $t("common.back") }}</NuxtLink
|
||||
>
|
||||
</template>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="notice" class="my-2 text-sm text-success" role="status">{{ notice }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<div v-if="notice" class="text-success my-2 text-sm" role="status">{{ notice }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<template v-else-if="detail">
|
||||
<VCard>
|
||||
@@ -165,18 +175,34 @@ onMounted(() => {
|
||||
<h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<VBadge tone="blue">{{ $t(`aftersale.kind.${detail.kind}`) }}</VBadge>
|
||||
<VBadge :tone="statusClass(detail.status)">{{ $t(`aftersale.status.${detail.status}`) }}</VBadge>
|
||||
<VBadge :tone="statusClass(detail.status)">{{
|
||||
$t(`aftersale.status.${detail.status}`)
|
||||
}}</VBadge>
|
||||
<VBadge v-if="detail.reopened" tone="orange">{{ $t("aftersale.reopened") }}</VBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5 grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
|
||||
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(detail.created_at) }}</strong></div>
|
||||
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("aftersale.buyer") }}</span><strong class="font-mono text-xs">{{ detail.user_id }}</strong></div>
|
||||
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("aftersale.amount") }}</span><strong>{{ fmt(detail.amount_minor, detail.currency) }}</strong></div>
|
||||
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("aftersale.remaining") }}</span><strong>{{ fmt(detail.remaining_refundable_minor, detail.currency) }}</strong></div>
|
||||
<div class="mb-5 grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-sm text-muted">{{ $t("aftersale.order") }}</span>
|
||||
<NuxtLink :to="`/orders/${detail.order_id}`" class="text-primary hover:underline">{{ $t("aftersale.viewOrder") }}</NuxtLink>
|
||||
<span class="text-muted text-sm">{{ $t("shop.created") }}</span
|
||||
><strong>{{ formatDate(detail.created_at) }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-muted text-sm">{{ $t("aftersale.buyer") }}</span
|
||||
><strong class="font-mono text-xs">{{ detail.user_id }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-muted text-sm">{{ $t("aftersale.amount") }}</span
|
||||
><strong>{{ fmt(detail.amount_minor, detail.currency) }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-muted text-sm">{{ $t("aftersale.remaining") }}</span
|
||||
><strong>{{ fmt(detail.remaining_refundable_minor, detail.currency) }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-muted text-sm">{{ $t("aftersale.order") }}</span>
|
||||
<NuxtLink :to="`/orders/${detail.order_id}`" class="text-primary hover:underline">{{
|
||||
$t("aftersale.viewOrder")
|
||||
}}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -186,31 +212,43 @@ onMounted(() => {
|
||||
v-if="detail.item.image"
|
||||
:src="detail.item.image"
|
||||
:alt="textEn(detail.item.product_name)"
|
||||
class="h-16 w-16 rounded-md border border-border object-cover"
|
||||
class="border-border h-16 w-16 rounded-md border object-cover"
|
||||
/>
|
||||
<div class="grid gap-1">
|
||||
<strong>{{ textEn(detail.item.product_name) }}</strong>
|
||||
<span class="text-sm text-muted">{{ textZh(detail.item.product_name) }}</span>
|
||||
<span class="text-sm text-muted">{{ $t("product.skuCode") }}: {{ detail.item.sku_code }} · {{ $t("common.qty") }}: {{ detail.item.qty }} · {{ $t("common.price") }}: {{ fmt(detail.item.unit_price_minor, detail.currency) }}</span>
|
||||
<span class="text-muted text-sm">{{ textZh(detail.item.product_name) }}</span>
|
||||
<span class="text-muted text-sm"
|
||||
>{{ $t("product.skuCode") }}: {{ detail.item.sku_code }} · {{ $t("common.qty") }}:
|
||||
{{ detail.item.qty }} · {{ $t("common.price") }}:
|
||||
{{ fmt(detail.item.unit_price_minor, detail.currency) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("aftersale.reason") }}</h3>
|
||||
<h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("aftersale.reason") }}</h3>
|
||||
<div class="grid gap-1">
|
||||
<p>{{ textEn(detail.reason) }}</p>
|
||||
<p class="text-sm text-muted">{{ textZh(detail.reason) }}</p>
|
||||
<p class="text-muted text-sm">{{ textZh(detail.reason) }}</p>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("aftersale.evidence") }}</h3>
|
||||
<div v-if="!detail.evidence.length" class="text-muted">{{ $t("aftersale.noEvidence") }}</div>
|
||||
<h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("aftersale.evidence") }}</h3>
|
||||
<div v-if="!detail.evidence.length" class="text-muted">
|
||||
{{ $t("aftersale.noEvidence") }}
|
||||
</div>
|
||||
<ul v-else class="grid gap-1">
|
||||
<li v-for="url in detail.evidence" :key="url">
|
||||
<a :href="url" target="_blank" rel="noopener noreferrer" class="break-all text-primary hover:underline">{{ url }}</a>
|
||||
<a
|
||||
:href="url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary break-all hover:underline"
|
||||
>{{ url }}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<template v-if="detail.return_carrier || detail.return_tracking_no">
|
||||
<h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("aftersale.returnShipping") }}</h3>
|
||||
<h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("aftersale.returnShipping") }}</h3>
|
||||
<div class="grid gap-1">
|
||||
<div>{{ $t("shop.carrier") }}: {{ detail.return_carrier ?? "—" }}</div>
|
||||
<div>{{ $t("shop.trackingNo") }}: {{ detail.return_tracking_no ?? "—" }}</div>
|
||||
@@ -222,28 +260,54 @@ onMounted(() => {
|
||||
<h2 class="mb-4 text-lg font-semibold">{{ $t("common.actions") }}</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template v-if="canDecide">
|
||||
<VBtn variant="primary" :disabled="busy" @click="run('approve')">{{ $t("aftersale.approve") }}</VBtn>
|
||||
<VBtn variant="danger" :disabled="busy" @click="run('reject')">{{ $t("aftersale.reject") }}</VBtn>
|
||||
<VBtn variant="primary" :disabled="busy" @click="run('approve')">{{
|
||||
$t("aftersale.approve")
|
||||
}}</VBtn>
|
||||
<VBtn variant="danger" :disabled="busy" @click="run('reject')">{{
|
||||
$t("aftersale.reject")
|
||||
}}</VBtn>
|
||||
</template>
|
||||
<VBtn v-if="canConfirmReceipt" variant="primary" :disabled="busy" @click="run('confirmReceipt')">{{ $t("aftersale.confirmReceipt") }}</VBtn>
|
||||
<VBtn v-if="canRefund" variant="primary" :disabled="busy" @click="run('refund')">{{ $t("aftersale.refund") }}</VBtn>
|
||||
<VBtn
|
||||
v-if="canConfirmReceipt"
|
||||
variant="primary"
|
||||
:disabled="busy"
|
||||
@click="run('confirmReceipt')"
|
||||
>{{ $t("aftersale.confirmReceipt") }}</VBtn
|
||||
>
|
||||
<VBtn v-if="canRefund" variant="primary" :disabled="busy" @click="run('refund')">{{
|
||||
$t("aftersale.refund")
|
||||
}}</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard class="mt-4">
|
||||
<h2 class="mb-4 text-lg font-semibold">{{ $t("aftersale.messages") }}</h2>
|
||||
<div v-if="!detail.messages.length" class="text-muted">{{ $t("aftersale.noMessages") }}</div>
|
||||
<div v-if="!detail.messages.length" class="text-muted">
|
||||
{{ $t("aftersale.noMessages") }}
|
||||
</div>
|
||||
<ul v-else class="grid gap-3">
|
||||
<li v-for="message in sortedMessages(detail.messages)" :key="message.id" class="rounded-md border border-border bg-bg px-3 py-2">
|
||||
<li
|
||||
v-for="message in sortedMessages(detail.messages)"
|
||||
:key="message.id"
|
||||
class="border-border bg-bg rounded-md border px-3 py-2"
|
||||
>
|
||||
<div class="mb-1 flex items-center gap-2 text-sm">
|
||||
<VBadge :tone="roleClass(message.author_role)">{{ $t(`aftersale.role.${message.author_role}`) }}</VBadge>
|
||||
<VBadge :tone="roleClass(message.author_role)">{{
|
||||
$t(`aftersale.role.${message.author_role}`)
|
||||
}}</VBadge>
|
||||
<span class="text-muted">{{ formatDate(message.created_at) }}</span>
|
||||
</div>
|
||||
<p>{{ textEn(message.content) }}</p>
|
||||
<p class="text-sm text-muted">{{ textZh(message.content) }}</p>
|
||||
<p class="text-muted text-sm">{{ textZh(message.content) }}</p>
|
||||
<ul v-if="message.evidence.length" class="mt-1 grid gap-0.5">
|
||||
<li v-for="url in message.evidence" :key="url">
|
||||
<a :href="url" target="_blank" rel="noopener noreferrer" class="break-all text-sm text-primary hover:underline">{{ url }}</a>
|
||||
<a
|
||||
:href="url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary text-sm break-all hover:underline"
|
||||
>{{ url }}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -252,11 +316,19 @@ onMounted(() => {
|
||||
<form class="mt-5 grid gap-3" @submit.prevent="sendMessage">
|
||||
<h3 class="text-base font-semibold">{{ $t("aftersale.sendMessage") }}</h3>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<VField :label="$t('aftersale.messageEn')"><VInput v-model="messageEn" type="text" /></VField>
|
||||
<VField :label="$t('aftersale.messageZh')"><VInput v-model="messageZh" type="text" /></VField>
|
||||
<VField :label="$t('aftersale.messageEn')"
|
||||
><VInput v-model="messageEn" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('aftersale.messageZh')"
|
||||
><VInput v-model="messageZh" type="text"
|
||||
/></VField>
|
||||
</div>
|
||||
<VField :label="$t('aftersale.messageEvidence')"><VInput v-model="messageEvidence" type="text" /></VField>
|
||||
<VBtn variant="primary" type="submit" :disabled="busy">{{ $t("aftersale.sendMessage") }}</VBtn>
|
||||
<VField :label="$t('aftersale.messageEvidence')"
|
||||
><VInput v-model="messageEvidence" type="text"
|
||||
/></VField>
|
||||
<VBtn variant="primary" type="submit" :disabled="busy">{{
|
||||
$t("aftersale.sendMessage")
|
||||
}}</VBtn>
|
||||
</form>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
@@ -48,11 +48,13 @@ onMounted(() => {
|
||||
<template>
|
||||
<VPage :title="$t('aftersale.title')">
|
||||
<div class="mb-4 flex items-center gap-3">
|
||||
<label for="aftersale-status" class="text-sm font-medium">{{ $t("shop.filterStatus") }}</label>
|
||||
<label for="aftersale-status" class="text-sm font-medium">{{
|
||||
$t("shop.filterStatus")
|
||||
}}</label>
|
||||
<select
|
||||
id="aftersale-status"
|
||||
v-model="status"
|
||||
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"
|
||||
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"
|
||||
@change="loadAftersales"
|
||||
>
|
||||
<option value="">{{ $t("common.all") }}</option>
|
||||
@@ -65,7 +67,7 @@ onMounted(() => {
|
||||
<option value="cancelled">{{ $t("aftersale.status.cancelled") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<VCard v-else-if="!aftersales.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<VTable v-else>
|
||||
@@ -81,13 +83,21 @@ onMounted(() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="aftersale in aftersales" :key="aftersale.id">
|
||||
<td class="font-mono text-xs" :title="aftersale.user_id">{{ shortId(aftersale.user_id) }}</td>
|
||||
<td class="font-mono text-xs" :title="aftersale.user_id">
|
||||
{{ shortId(aftersale.user_id) }}
|
||||
</td>
|
||||
<td>{{ $t(`aftersale.kind.${aftersale.kind}`) }}</td>
|
||||
<td>{{ fmt(aftersale.amount_minor, aftersale.currency) }}</td>
|
||||
<td>{{ formatDate(aftersale.created_at) }}</td>
|
||||
<td><VBadge :tone="statusClass(aftersale.status)">{{ $t(`aftersale.status.${aftersale.status}`) }}</VBadge></td>
|
||||
<td>
|
||||
<NuxtLink :to="`/aftersales/${aftersale.id}`" class="text-primary hover:underline">{{ $t("shop.details") }}</NuxtLink>
|
||||
<VBadge :tone="statusClass(aftersale.status)">{{
|
||||
$t(`aftersale.status.${aftersale.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td>
|
||||
<NuxtLink :to="`/aftersales/${aftersale.id}`" class="text-primary hover:underline">{{
|
||||
$t("shop.details")
|
||||
}}</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -181,28 +181,53 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<VPage :title="$t('shop.couponList')">
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<div v-if="message" class="text-muted my-2 text-sm" role="status">{{ message }}</div>
|
||||
|
||||
<VCard class="mb-5">
|
||||
<h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}</h2>
|
||||
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
|
||||
<VField :label="$t('shop.couponTitleEn')"><VInput v-model="form.titleEn" type="text" /></VField>
|
||||
<VField :label="$t('shop.couponTitleZh')"><VInput v-model="form.titleZh" type="text" /></VField>
|
||||
<VField :label="$t('shop.couponAmount')"><VInput v-model.number="form.amountMinor" type="number" min="1" step="1" /></VField>
|
||||
<VField :label="$t('shop.couponThreshold')"><VInput v-model.number="form.thresholdMinor" type="number" min="0" step="1" /></VField>
|
||||
<h2 class="mb-4 text-base font-semibold">
|
||||
{{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}
|
||||
</h2>
|
||||
<div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
|
||||
<VField :label="$t('shop.couponTitleEn')"
|
||||
><VInput v-model="form.titleEn" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponTitleZh')"
|
||||
><VInput v-model="form.titleZh" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponAmount')"
|
||||
><VInput v-model.number="form.amountMinor" type="number" min="1" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponThreshold')"
|
||||
><VInput v-model.number="form.thresholdMinor" type="number" min="0" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponCurrency')">
|
||||
<select v-model="form.currency" 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">
|
||||
<select
|
||||
v-model="form.currency"
|
||||
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"
|
||||
>
|
||||
<option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
|
||||
</select>
|
||||
</VField>
|
||||
<VField :label="$t('shop.couponStock')"><VInput v-model.number="form.stock" type="number" min="0" step="1" /></VField>
|
||||
<VField :label="$t('shop.couponStartsAt')"><VInput v-model="form.startsAt" type="datetime-local" /></VField>
|
||||
<VField :label="$t('shop.couponEndsAt')"><VInput v-model="form.endsAt" type="datetime-local" /></VField>
|
||||
<label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="form.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.couponEnabled") }}</span></label>
|
||||
<VField :label="$t('shop.couponStock')"
|
||||
><VInput v-model.number="form.stock" type="number" min="0" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponStartsAt')"
|
||||
><VInput v-model="form.startsAt" type="datetime-local"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponEndsAt')"
|
||||
><VInput v-model="form.endsAt" type="datetime-local"
|
||||
/></VField>
|
||||
<label class="text-text flex items-center gap-2 text-sm font-medium"
|
||||
><input v-model="form.enabled" type="checkbox" class="accent-primary h-4 w-4" /><span>{{
|
||||
$t("shop.couponEnabled")
|
||||
}}</span></label
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<VBtn variant="primary" :disabled="saving" @click="submit">{{ editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon") }}</VBtn>
|
||||
<VBtn variant="primary" :disabled="saving" @click="submit">{{
|
||||
editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon")
|
||||
}}</VBtn>
|
||||
<VBtn v-if="editingId" type="button" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
@@ -230,11 +255,21 @@ onMounted(async () => {
|
||||
<td>{{ template.stock }}</td>
|
||||
<td>{{ template.starts_at.slice(0, 10) }}</td>
|
||||
<td>{{ template.ends_at.slice(0, 10) }}</td>
|
||||
<td><VBadge :tone="template.enabled ? 'green' : 'red'">{{ template.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="template.enabled ? 'green' : 'red'">{{
|
||||
template.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff")
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td class="flex flex-wrap gap-1.5">
|
||||
<VBtn size="sm" :disabled="actionId === template.id" @click="edit(template)">{{ $t("shop.edit") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === template.id" @click="toggleEnabled(template)">{{ template.enabled ? $t("shop.enabledOff") : $t("shop.enabledOn") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === template.id" @click="remove(template)">{{ $t("common.delete") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === template.id" @click="edit(template)">{{
|
||||
$t("shop.edit")
|
||||
}}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === template.id" @click="toggleEnabled(template)">{{
|
||||
template.enabled ? $t("shop.enabledOff") : $t("shop.enabledOn")
|
||||
}}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === template.id" @click="remove(template)">{{
|
||||
$t("common.delete")
|
||||
}}</VBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
Currency,
|
||||
ShopFlashSaleItem,
|
||||
ShopFlashSaleSession,
|
||||
} from "@vmall/shared";
|
||||
import type { Currency, ShopFlashSaleItem, ShopFlashSaleSession } from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
|
||||
@@ -233,21 +229,41 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<VPage :title="$t('shop.flashSaleList')">
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<div v-if="message" class="text-muted my-2 text-sm" role="status">{{ message }}</div>
|
||||
|
||||
<VCard class="mb-5">
|
||||
<h2 class="mb-4 text-base font-semibold">{{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}</h2>
|
||||
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
|
||||
<VField :label="$t('shop.flashLabelEn')"><VInput v-model="sessionForm.labelEn" type="text" /></VField>
|
||||
<VField :label="$t('shop.flashLabelZh')"><VInput v-model="sessionForm.labelZh" type="text" /></VField>
|
||||
<VField :label="$t('shop.flashStartsAt')"><VInput v-model="sessionForm.startsAt" type="datetime-local" /></VField>
|
||||
<VField :label="$t('shop.flashEndsAt')"><VInput v-model="sessionForm.endsAt" type="datetime-local" /></VField>
|
||||
<label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="sessionForm.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.flashEnabled") }}</span></label>
|
||||
<h2 class="mb-4 text-base font-semibold">
|
||||
{{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}
|
||||
</h2>
|
||||
<div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
|
||||
<VField :label="$t('shop.flashLabelEn')"
|
||||
><VInput v-model="sessionForm.labelEn" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.flashLabelZh')"
|
||||
><VInput v-model="sessionForm.labelZh" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.flashStartsAt')"
|
||||
><VInput v-model="sessionForm.startsAt" type="datetime-local"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.flashEndsAt')"
|
||||
><VInput v-model="sessionForm.endsAt" type="datetime-local"
|
||||
/></VField>
|
||||
<label class="text-text flex items-center gap-2 text-sm font-medium"
|
||||
><input
|
||||
v-model="sessionForm.enabled"
|
||||
type="checkbox"
|
||||
class="accent-primary h-4 w-4"
|
||||
/><span>{{ $t("shop.flashEnabled") }}</span></label
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<VBtn variant="primary" :disabled="saving" @click="saveSession">{{ editingSessionId ? $t("shop.updateFlashSale") : $t("shop.createFlashSale") }}</VBtn>
|
||||
<VBtn v-if="editingSessionId" type="button" @click="resetSessionForm">{{ $t("common.cancel") }}</VBtn>
|
||||
<VBtn variant="primary" :disabled="saving" @click="saveSession">{{
|
||||
editingSessionId ? $t("shop.updateFlashSale") : $t("shop.createFlashSale")
|
||||
}}</VBtn>
|
||||
<VBtn v-if="editingSessionId" type="button" @click="resetSessionForm">{{
|
||||
$t("common.cancel")
|
||||
}}</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
@@ -258,17 +274,27 @@ onMounted(async () => {
|
||||
<header class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<strong>{{ session.label[locale] ?? session.label.en }}</strong>
|
||||
<span class="text-sm text-muted">{{ session.starts_at.slice(0, 10) }} → {{ session.ends_at.slice(0, 10) }}</span>
|
||||
<VBadge :tone="session.enabled ? 'green' : 'red'">{{ session.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge>
|
||||
<span class="text-muted text-sm"
|
||||
>{{ session.starts_at.slice(0, 10) }} → {{ session.ends_at.slice(0, 10) }}</span
|
||||
>
|
||||
<VBadge :tone="session.enabled ? 'green' : 'red'">{{
|
||||
session.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff")
|
||||
}}</VBadge>
|
||||
</div>
|
||||
<div class="flex gap-1.5">
|
||||
<VBtn size="sm" :disabled="actionId === session.id" @click="editSession(session)">{{ $t("shop.edit") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === session.id" @click="startAddItem(session)">{{ $t("shop.newFlashItem") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === session.id" @click="removeSession(session)">{{ $t("common.delete") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === session.id" @click="editSession(session)">{{
|
||||
$t("shop.edit")
|
||||
}}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === session.id" @click="startAddItem(session)">{{
|
||||
$t("shop.newFlashItem")
|
||||
}}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === session.id" @click="removeSession(session)">{{
|
||||
$t("common.delete")
|
||||
}}</VBtn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h3 class="mb-2 mt-4 text-sm font-semibold">{{ $t("shop.flashItems") }}</h3>
|
||||
<h3 class="mt-4 mb-2 text-sm font-semibold">{{ $t("shop.flashItems") }}</h3>
|
||||
<div v-if="!session.items.length" class="text-muted">{{ $t("shop.noFlashItems") }}</div>
|
||||
<VTable v-else>
|
||||
<thead>
|
||||
@@ -291,34 +317,63 @@ onMounted(async () => {
|
||||
<td>{{ item.sold_count }}</td>
|
||||
<td>{{ item.per_customer_limit }}</td>
|
||||
<td class="flex gap-1.5">
|
||||
<VBtn size="sm" :disabled="actionId === item.id" @click="editItem(session, item)">{{ $t("shop.edit") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === item.id" @click="removeItem(item)">{{ $t("common.delete") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === item.id" @click="editItem(session, item)">{{
|
||||
$t("shop.edit")
|
||||
}}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === item.id" @click="removeItem(item)">{{
|
||||
$t("common.delete")
|
||||
}}</VBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
<div v-if="itemSessionId === session.id" class="mt-4 border-t border-border pt-3">
|
||||
<h3 class="mb-2 text-sm font-semibold">{{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}</h3>
|
||||
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
|
||||
<div v-if="itemSessionId === session.id" class="border-border mt-4 border-t pt-3">
|
||||
<h3 class="mb-2 text-sm font-semibold">
|
||||
{{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}
|
||||
</h3>
|
||||
<div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
|
||||
<VField :label="$t('shop.flashSku')">
|
||||
<select v-model="itemForm.skuId" 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">
|
||||
<select
|
||||
v-model="itemForm.skuId"
|
||||
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"
|
||||
>
|
||||
<option value="">{{ $t("shop.flashSelectSku") }}</option>
|
||||
<option v-for="option in skuOptions" :key="option.id" :value="option.id">{{ option.label }}</option>
|
||||
<option v-for="option in skuOptions" :key="option.id" :value="option.id">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</VField>
|
||||
<VField :label="$t('shop.flashSalePrice')"><VInput v-model.number="itemForm.salePriceMinor" type="number" min="1" step="1" /></VField>
|
||||
<VField :label="$t('shop.flashSalePrice')"
|
||||
><VInput v-model.number="itemForm.salePriceMinor" type="number" min="1" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponCurrency')">
|
||||
<select v-model="itemForm.currency" 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">
|
||||
<select
|
||||
v-model="itemForm.currency"
|
||||
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"
|
||||
>
|
||||
<option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
|
||||
</select>
|
||||
</VField>
|
||||
<VField :label="$t('shop.flashReservedStock')"><VInput v-model.number="itemForm.reservedStock" type="number" min="0" step="1" /></VField>
|
||||
<VField :label="$t('shop.flashPerCustomerLimit')"><VInput v-model.number="itemForm.perCustomerLimit" type="number" min="1" step="1" /></VField>
|
||||
<VField :label="$t('shop.flashReservedStock')"
|
||||
><VInput v-model.number="itemForm.reservedStock" type="number" min="0" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.flashPerCustomerLimit')"
|
||||
><VInput v-model.number="itemForm.perCustomerLimit" type="number" min="1" step="1"
|
||||
/></VField>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<VBtn variant="primary" :disabled="saving" @click="saveItem(session)">{{ $t("shop.saveFlashItem") }}</VBtn>
|
||||
<VBtn type="button" @click="itemSessionId = ''; resetItemForm()">{{ $t("common.cancel") }}</VBtn>
|
||||
<VBtn variant="primary" :disabled="saving" @click="saveItem(session)">{{
|
||||
$t("shop.saveFlashItem")
|
||||
}}</VBtn>
|
||||
<VBtn
|
||||
type="button"
|
||||
@click="
|
||||
itemSessionId = '';
|
||||
resetItemForm();
|
||||
"
|
||||
>{{ $t("common.cancel") }}</VBtn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
@@ -187,36 +187,70 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<VPage :title="$t('shop.groupBuyingList')">
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<div v-if="message" class="text-muted my-2 text-sm" role="status">{{ message }}</div>
|
||||
|
||||
<VCard class="mb-5">
|
||||
<h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}</h2>
|
||||
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
|
||||
<h2 class="mb-4 text-base font-semibold">
|
||||
{{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}
|
||||
</h2>
|
||||
<div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
|
||||
<VField :label="$t('shop.groupSku')">
|
||||
<select v-model="form.skuId" 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">
|
||||
<select
|
||||
v-model="form.skuId"
|
||||
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"
|
||||
>
|
||||
<option value="">{{ $t("shop.flashSelectSku") }}</option>
|
||||
<option v-for="option in skuOptions" :key="option.id" :value="option.id">{{ option.label }}</option>
|
||||
<option v-for="option in skuOptions" :key="option.id" :value="option.id">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</VField>
|
||||
<VField :label="$t('shop.groupNameEn')"><VInput v-model="form.nameEn" type="text" /></VField>
|
||||
<VField :label="$t('shop.groupNameZh')"><VInput v-model="form.nameZh" type="text" /></VField>
|
||||
<VField :label="$t('shop.groupDescriptionEn')"><VInput v-model="form.descriptionEn" type="text" /></VField>
|
||||
<VField :label="$t('shop.groupDescriptionZh')"><VInput v-model="form.descriptionZh" type="text" /></VField>
|
||||
<VField :label="$t('shop.groupPrice')"><VInput v-model.number="form.groupPriceMinor" type="number" min="1" step="1" /></VField>
|
||||
<VField :label="$t('shop.groupNameEn')"
|
||||
><VInput v-model="form.nameEn" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupNameZh')"
|
||||
><VInput v-model="form.nameZh" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupDescriptionEn')"
|
||||
><VInput v-model="form.descriptionEn" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupDescriptionZh')"
|
||||
><VInput v-model="form.descriptionZh" type="text"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupPrice')"
|
||||
><VInput v-model.number="form.groupPriceMinor" type="number" min="1" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.couponCurrency')">
|
||||
<select v-model="form.currency" 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">
|
||||
<select
|
||||
v-model="form.currency"
|
||||
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"
|
||||
>
|
||||
<option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
|
||||
</select>
|
||||
</VField>
|
||||
<VField :label="$t('shop.groupRequiredMembers')"><VInput v-model.number="form.requiredMembers" type="number" min="2" step="1" /></VField>
|
||||
<VField :label="$t('shop.groupLifetimeHours')"><VInput v-model.number="form.groupLifetimeHours" type="number" min="1" step="1" /></VField>
|
||||
<VField :label="$t('shop.groupStartsAt')"><VInput v-model="form.startsAt" type="datetime-local" /></VField>
|
||||
<VField :label="$t('shop.groupEndsAt')"><VInput v-model="form.endsAt" type="datetime-local" /></VField>
|
||||
<label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="form.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.groupEnabled") }}</span></label>
|
||||
<VField :label="$t('shop.groupRequiredMembers')"
|
||||
><VInput v-model.number="form.requiredMembers" type="number" min="2" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupLifetimeHours')"
|
||||
><VInput v-model.number="form.groupLifetimeHours" type="number" min="1" step="1"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupStartsAt')"
|
||||
><VInput v-model="form.startsAt" type="datetime-local"
|
||||
/></VField>
|
||||
<VField :label="$t('shop.groupEndsAt')"
|
||||
><VInput v-model="form.endsAt" type="datetime-local"
|
||||
/></VField>
|
||||
<label class="text-text flex items-center gap-2 text-sm font-medium"
|
||||
><input v-model="form.enabled" type="checkbox" class="accent-primary h-4 w-4" /><span>{{
|
||||
$t("shop.groupEnabled")
|
||||
}}</span></label
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<VBtn variant="primary" :disabled="saving" @click="save">{{ editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity") }}</VBtn>
|
||||
<VBtn variant="primary" :disabled="saving" @click="save">{{
|
||||
editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity")
|
||||
}}</VBtn>
|
||||
<VBtn v-if="editingId" type="button" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
@@ -247,16 +281,31 @@ onMounted(async () => {
|
||||
<td>{{ activity.starts_at.slice(0, 10) }}</td>
|
||||
<td>
|
||||
<template v-if="activity.open_groups.length">
|
||||
<VBadge v-for="group in activity.open_groups" :key="group.id" tone="orange" class="mr-1">
|
||||
{{ $t("shop.groupPaidMembers") }} {{ group.paid_member_count }}/{{ group.required_members }}
|
||||
<VBadge
|
||||
v-for="group in activity.open_groups"
|
||||
:key="group.id"
|
||||
tone="orange"
|
||||
class="mr-1"
|
||||
>
|
||||
{{ $t("shop.groupPaidMembers") }} {{ group.paid_member_count }}/{{
|
||||
group.required_members
|
||||
}}
|
||||
</VBadge>
|
||||
</template>
|
||||
<span v-else class="text-muted">{{ $t("shop.groupNoOpenGroups") }}</span>
|
||||
</td>
|
||||
<td><VBadge :tone="activity.enabled ? 'green' : 'red'">{{ activity.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="activity.enabled ? 'green' : 'red'">{{
|
||||
activity.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff")
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td class="flex gap-1.5">
|
||||
<VBtn size="sm" :disabled="actionId === activity.id" @click="edit(activity)">{{ $t("shop.edit") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === activity.id" @click="remove(activity)">{{ $t("common.delete") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === activity.id" @click="edit(activity)">{{
|
||||
$t("shop.edit")
|
||||
}}</VBtn>
|
||||
<VBtn size="sm" :disabled="actionId === activity.id" @click="remove(activity)">{{
|
||||
$t("common.delete")
|
||||
}}</VBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -52,7 +52,11 @@ onMounted(loadDashboard);
|
||||
const stats = computed(() => [
|
||||
{ key: "totalProducts", label: "shop.totalProducts", value: totalProducts.value },
|
||||
{ key: "publishedProducts", label: "shop.publishedProducts", value: publishedProducts.value },
|
||||
{ key: "pendingPayment", label: "shop.pendingPaymentOrders", value: orderCounts.value.pending_payment },
|
||||
{
|
||||
key: "pendingPayment",
|
||||
label: "shop.pendingPaymentOrders",
|
||||
value: orderCounts.value.pending_payment,
|
||||
},
|
||||
{ key: "paid", label: "shop.paidOrders", value: orderCounts.value.paid },
|
||||
{ key: "fulfilling", label: "shop.fulfillingOrders", value: orderCounts.value.fulfilling },
|
||||
{ key: "shipped", label: "shop.shippedOrders", value: orderCounts.value.shipped },
|
||||
@@ -65,28 +69,28 @@ const stats = computed(() => [
|
||||
<template #actions>
|
||||
<VBtn size="sm" :disabled="loading" @click="loadDashboard">{{ $t("common.search") }}</VBtn>
|
||||
</template>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<template v-else>
|
||||
<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
|
||||
<div class="grid [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))] gap-4">
|
||||
<VCard v-for="stat in stats" :key="stat.key" class="grid gap-2">
|
||||
<span class="text-sm text-muted">{{ $t(stat.label) }}</span>
|
||||
<strong class="text-3xl font-bold text-text">{{ stat.value }}</strong>
|
||||
<span class="text-muted text-sm">{{ $t(stat.label) }}</span>
|
||||
<strong class="text-text text-3xl font-bold">{{ stat.value }}</strong>
|
||||
</VCard>
|
||||
</div>
|
||||
<VCard v-if="shop" class="mt-4">
|
||||
<h2 class="mb-4 text-lg font-semibold text-text">{{ $t("shop.profile") }}</h2>
|
||||
<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
|
||||
<h2 class="text-text mb-4 text-lg font-semibold">{{ $t("shop.profile") }}</h2>
|
||||
<div class="grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-sm text-muted">{{ $t("product.shop") }}</span>
|
||||
<span class="text-muted text-sm">{{ $t("product.shop") }}</span>
|
||||
<strong>{{ localized(shop.name, locale) }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-sm text-muted">{{ $t("shop.slug") }}</span>
|
||||
<span class="text-muted text-sm">{{ $t("shop.slug") }}</span>
|
||||
<strong>{{ shop.slug }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-sm text-muted">{{ $t("shop.shopStatus") }}</span>
|
||||
<span class="text-muted text-sm">{{ $t("shop.shopStatus") }}</span>
|
||||
<VBadge :tone="shop.status === 'active' ? 'green' : 'red'">
|
||||
{{ $t(`admin.${shop.status}`) }}
|
||||
</VBadge>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { Invoice } from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
@@ -16,7 +15,6 @@ function statusClass(value: Invoice["status"]): "green" | "red" | "orange" {
|
||||
return value === "issued" ? "green" : value === "cancelled" ? "red" : "orange";
|
||||
}
|
||||
|
||||
|
||||
async function loadInvoices(): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
@@ -50,7 +48,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<VPage :title="$t('shop.invoiceList')">
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<VCard v-else-if="!invoices.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<VTable v-else>
|
||||
@@ -69,13 +67,30 @@ onMounted(() => {
|
||||
<tbody>
|
||||
<tr v-for="invoice in invoices" :key="invoice.id">
|
||||
<td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
|
||||
<td><NuxtLink :to="`/orders/${invoice.order_id}`" class="text-primary hover:underline">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
|
||||
<td>
|
||||
<NuxtLink :to="`/orders/${invoice.order_id}`" class="text-primary hover:underline">{{
|
||||
invoice.order_no ?? invoice.order_id
|
||||
}}</NuxtLink>
|
||||
</td>
|
||||
<td>{{ invoice.title }}</td>
|
||||
<td>{{ $t(`invoice.${invoice.kind}`) }}</td>
|
||||
<td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
|
||||
<td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
|
||||
<td><VBadge :tone="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</VBadge></td>
|
||||
<td><VBtn v-if="invoice.status === 'requested'" variant="primary" size="sm" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</VBtn></td>
|
||||
<td>
|
||||
<VBadge :tone="statusClass(invoice.status)">{{
|
||||
$t(`invoice.status.${invoice.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td>
|
||||
<VBtn
|
||||
v-if="invoice.status === 'requested'"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
:disabled="actionId === invoice.id"
|
||||
@click="issueInvoice(invoice)"
|
||||
>{{ $t("shop.issueInvoice") }}</VBtn
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
@@ -27,16 +27,22 @@ async function submit(): Promise<void> {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="grid min-h-screen place-items-center bg-bg px-4 font-sans text-text">
|
||||
<main class="bg-bg text-text grid min-h-screen place-items-center px-4 font-sans">
|
||||
<VCard class="w-full max-w-[420px]">
|
||||
<form @submit.prevent="submit">
|
||||
<h1 class="mb-5 text-xl font-bold text-text">{{ $t("auth.welcome") }}</h1>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<h1 class="text-text mb-5 text-xl font-bold">{{ $t("auth.welcome") }}</h1>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<VField :label="$t('common.email')">
|
||||
<VInput id="email" v-model="email" type="email" autocomplete="username" required />
|
||||
</VField>
|
||||
<VField :label="$t('common.password')">
|
||||
<VInput id="password" v-model="password" type="password" autocomplete="current-password" required />
|
||||
<VInput
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</VField>
|
||||
<VBtn variant="primary" type="submit" :disabled="busy">
|
||||
{{ busy ? $t("common.loading") : $t("common.login") }}
|
||||
|
||||
@@ -30,7 +30,6 @@ function shipmentStatusClass(value: Shipment["status"]): "green" | "blue" | "ora
|
||||
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
|
||||
}
|
||||
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
||||
}
|
||||
@@ -74,11 +73,12 @@ async function loadOrder(): Promise<void> {
|
||||
loadedOrder.items.forEach((item) => {
|
||||
nextQuantities[item.id] = Math.max(
|
||||
0,
|
||||
item.qty - loadedShipments
|
||||
.filter((shipment) => shipment.order_id === orderId.value)
|
||||
.flatMap((shipment) => shipment.items)
|
||||
.filter((shipmentItem) => shipmentItem.order_item_id === item.id)
|
||||
.reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
|
||||
item.qty -
|
||||
loadedShipments
|
||||
.filter((shipment) => shipment.order_id === orderId.value)
|
||||
.flatMap((shipment) => shipment.items)
|
||||
.filter((shipmentItem) => shipmentItem.order_item_id === item.id)
|
||||
.reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
|
||||
);
|
||||
});
|
||||
quantities.value = nextQuantities;
|
||||
@@ -104,7 +104,12 @@ async function createShipment(): Promise<void> {
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await $api.shop.createShipment(order.value.id, carrier.value.trim(), trackingNo.value.trim(), items);
|
||||
await $api.shop.createShipment(
|
||||
order.value.id,
|
||||
carrier.value.trim(),
|
||||
trackingNo.value.trim(),
|
||||
items,
|
||||
);
|
||||
carrier.value = "";
|
||||
trackingNo.value = "";
|
||||
await loadOrder();
|
||||
@@ -137,23 +142,42 @@ onMounted(() => {
|
||||
<template>
|
||||
<VPage :title="order ? order.order_no : $t('order.title')">
|
||||
<template #actions>
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/orders">{{ $t("common.back") }}</NuxtLink>
|
||||
<NuxtLink
|
||||
class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
|
||||
to="/orders"
|
||||
>{{ $t("common.back") }}</NuxtLink
|
||||
>
|
||||
</template>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<template v-else-if="order">
|
||||
<VCard>
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
|
||||
<VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge>
|
||||
<VBadge :tone="statusClass(order.status)">{{
|
||||
$t(`order.status.${order.status}`)
|
||||
}}</VBadge>
|
||||
</div>
|
||||
<div class="mb-5 grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
|
||||
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
|
||||
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
|
||||
<div class="mb-5 grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-muted text-sm">{{ $t("shop.created") }}</span
|
||||
><strong>{{ formatDate(order.created_at) }}</strong>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-muted text-sm">{{ $t("shop.total") }}</span
|
||||
><strong>{{ fmt(order.total_minor, order.currency) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.items") }}</h3>
|
||||
<VTable>
|
||||
<thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t("product.detail") }}</th>
|
||||
<th>{{ $t("product.skuCode") }}</th>
|
||||
<th>{{ $t("common.qty") }}</th>
|
||||
<th>{{ $t("common.price") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in order.items" :key="item.id">
|
||||
<td>{{ localized(item.product_name, locale) }}</td>
|
||||
@@ -163,10 +187,13 @@ onMounted(() => {
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("shop.address") }}</h3>
|
||||
<address class="not-italic leading-7">
|
||||
<h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("shop.address") }}</h3>
|
||||
<address class="leading-7 not-italic">
|
||||
<div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
|
||||
<div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
|
||||
<div>
|
||||
{{ order.shipping_address.country }}, {{ order.shipping_address.region }},
|
||||
{{ order.shipping_address.city }}
|
||||
</div>
|
||||
<div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
|
||||
</address>
|
||||
</VCard>
|
||||
@@ -183,13 +210,31 @@ onMounted(() => {
|
||||
</VField>
|
||||
</div>
|
||||
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.shipmentQuantities") }}</h3>
|
||||
<div v-for="item in order.items" :key="`quantity-${item.id}`" class="flex items-end gap-3">
|
||||
<div class="min-w-0 flex-[2] pb-3.5">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
|
||||
<VField class="flex-1" :label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`">
|
||||
<VInput :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" />
|
||||
<div
|
||||
v-for="item in order.items"
|
||||
:key="`quantity-${item.id}`"
|
||||
class="flex items-end gap-3"
|
||||
>
|
||||
<div class="min-w-0 flex-[2] pb-3.5">
|
||||
{{ localized(item.product_name, locale) }} ({{ item.sku_code }})
|
||||
</div>
|
||||
<VField
|
||||
class="flex-1"
|
||||
:label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`"
|
||||
>
|
||||
<VInput
|
||||
:id="`quantity-${item.id}`"
|
||||
v-model.number="quantities[item.id]"
|
||||
type="number"
|
||||
min="0"
|
||||
:max="unshippedQuantity(item.id, item.qty)"
|
||||
step="1"
|
||||
/>
|
||||
</VField>
|
||||
</div>
|
||||
<VBtn variant="primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</VBtn>
|
||||
<VBtn variant="primary" type="submit" :disabled="busy">{{
|
||||
$t("shop.createShipment")
|
||||
}}</VBtn>
|
||||
</form>
|
||||
</VCard>
|
||||
|
||||
@@ -197,12 +242,34 @@ onMounted(() => {
|
||||
<h2 class="mb-4 text-lg font-semibold">{{ $t("shipment.title") }}</h2>
|
||||
<div v-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</div>
|
||||
<VTable v-else>
|
||||
<thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t("shipment.shipmentNo") }}</th>
|
||||
<th>{{ $t("shop.carrier") }}</th>
|
||||
<th>{{ $t("shop.trackingNo") }}</th>
|
||||
<th>{{ $t("common.status") }}</th>
|
||||
<th>{{ $t("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="shipment in shipments" :key="shipment.id">
|
||||
<td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
|
||||
<td><VBadge :tone="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
|
||||
<td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
|
||||
<td>{{ shipment.shipment_no }}</td>
|
||||
<td>{{ shipment.carrier }}</td>
|
||||
<td>{{ shipment.tracking_no }}</td>
|
||||
<td>
|
||||
<VBadge :tone="shipmentStatusClass(shipment.status)">{{
|
||||
$t(`shipment.status.${shipment.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td>
|
||||
<VBtn
|
||||
v-if="shipment.status === 'pending'"
|
||||
size="sm"
|
||||
:disabled="actionId === shipment.id"
|
||||
@click="markShipped(shipment)"
|
||||
>{{ $t("shipment.markShipped") }}</VBtn
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { Order, OrderStatus, Paged } from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
@@ -20,7 +19,6 @@ function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
|
||||
return "blue";
|
||||
}
|
||||
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
||||
}
|
||||
@@ -29,7 +27,10 @@ async function loadOrders(): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
orders.value = await $api.shop.listOrders({ page: page.value, status: status.value || undefined });
|
||||
orders.value = await $api.shop.listOrders({
|
||||
page: page.value,
|
||||
status: status.value || undefined,
|
||||
});
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : translate("common.error");
|
||||
} finally {
|
||||
@@ -43,7 +44,12 @@ async function filterChanged(): Promise<void> {
|
||||
}
|
||||
|
||||
async function changePage(nextPage: number): Promise<void> {
|
||||
if (!orders.value || nextPage < 1 || nextPage > Math.ceil(orders.value.total / orders.value.per_page)) return;
|
||||
if (
|
||||
!orders.value ||
|
||||
nextPage < 1 ||
|
||||
nextPage > Math.ceil(orders.value.total / orders.value.per_page)
|
||||
)
|
||||
return;
|
||||
page.value = nextPage;
|
||||
await loadOrders();
|
||||
}
|
||||
@@ -57,8 +63,15 @@ onMounted(() => {
|
||||
<template>
|
||||
<VPage :title="$t('shop.orderList')">
|
||||
<div class="mb-4 flex items-center gap-3">
|
||||
<label for="order-status" class="text-sm font-medium">{{ $t("shop.filterOrderStatus") }}</label>
|
||||
<select id="order-status" v-model="status" 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" @change="filterChanged">
|
||||
<label for="order-status" class="text-sm font-medium">{{
|
||||
$t("shop.filterOrderStatus")
|
||||
}}</label>
|
||||
<select
|
||||
id="order-status"
|
||||
v-model="status"
|
||||
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"
|
||||
@change="filterChanged"
|
||||
>
|
||||
<option value="">{{ $t("common.all") }}</option>
|
||||
<option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
|
||||
<option value="paid">{{ $t("order.status.paid") }}</option>
|
||||
@@ -68,7 +81,7 @@ onMounted(() => {
|
||||
<option value="cancelled">{{ $t("order.status.cancelled") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<VCard v-else-if="!orders?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<template v-else>
|
||||
@@ -84,18 +97,36 @@ onMounted(() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="order in orders.items" :key="order.id">
|
||||
<td><NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{ order.order_no }}</NuxtLink></td>
|
||||
<td>
|
||||
<NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{
|
||||
order.order_no
|
||||
}}</NuxtLink>
|
||||
</td>
|
||||
<td>{{ formatDate(order.created_at) }}</td>
|
||||
<td>{{ order.items.length }}</td>
|
||||
<td>{{ fmt(order.total_minor, order.currency) }}</td>
|
||||
<td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="statusClass(order.status)">{{
|
||||
$t(`order.status.${order.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<div v-if="orders.total > orders.per_page" class="mt-4 flex items-center justify-between">
|
||||
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
|
||||
<span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
|
||||
<VBtn size="sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{
|
||||
$t("common.prev")
|
||||
}}</VBtn>
|
||||
<span class="text-muted text-sm"
|
||||
>{{ $t("common.page") }} {{ page }} /
|
||||
{{ Math.ceil(orders.total / orders.per_page) }}</span
|
||||
>
|
||||
<VBtn
|
||||
size="sm"
|
||||
:disabled="page >= Math.ceil(orders.total / orders.per_page) || loading"
|
||||
@click="changePage(page + 1)"
|
||||
>{{ $t("common.next") }}</VBtn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</VPage>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { Category, Product, ProductUpsertBody, Sku, SkuUpsertBody } from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
@@ -107,15 +106,24 @@ onMounted(() => {
|
||||
<template>
|
||||
<VPage :title="$t('product.editProduct')">
|
||||
<template #actions>
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/products">{{ $t("common.back") }}</NuxtLink>
|
||||
<NuxtLink
|
||||
class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
|
||||
to="/products"
|
||||
>{{ $t("common.back") }}</NuxtLink
|
||||
>
|
||||
</template>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<template v-else-if="product">
|
||||
<ProductForm :product="product" :categories="categories" :busy="busy" @submit="updateProduct" />
|
||||
<ProductForm
|
||||
:product="product"
|
||||
:categories="categories"
|
||||
:busy="busy"
|
||||
@submit="updateProduct"
|
||||
/>
|
||||
<VCard class="mt-4 max-w-[960px]">
|
||||
<h2 class="mb-4 text-lg font-semibold">{{ $t("shop.skuManager") }}</h2>
|
||||
<div v-if="!product.skus?.length" class="mb-4 text-muted">{{ $t("shop.noSkus") }}</div>
|
||||
<div v-if="!product.skus?.length" class="text-muted mb-4">{{ $t("shop.noSkus") }}</div>
|
||||
<VTable v-else>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -132,11 +140,15 @@ onMounted(() => {
|
||||
<td>{{ formatSkuPrice(sku) }}</td>
|
||||
<td>{{ sku.currency }}</td>
|
||||
<td>{{ sku.stock }}</td>
|
||||
<td><VBadge :tone="sku.active ? 'green' : 'red'">{{ sku.active ? $t("common.yes") : $t("common.no") }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="sku.active ? 'green' : 'red'">{{
|
||||
sku.active ? $t("common.yes") : $t("common.no")
|
||||
}}</VBadge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<form class="mt-4 max-w-[720px] border-t border-border pt-3" @submit.prevent="saveSku">
|
||||
<form class="border-border mt-4 max-w-[720px] border-t pt-3" @submit.prevent="saveSku">
|
||||
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.addSku") }}</h3>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<VField :label="$t('product.skuCode')">
|
||||
@@ -146,7 +158,11 @@ onMounted(() => {
|
||||
<VInput id="sku-price" v-model="skuPrice" inputmode="decimal" required />
|
||||
</VField>
|
||||
<VField :label="$t('common.currency')">
|
||||
<select id="sku-currency" v-model="skuCurrency" 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">
|
||||
<select
|
||||
id="sku-currency"
|
||||
v-model="skuCurrency"
|
||||
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"
|
||||
>
|
||||
<option value="USD">USD</option>
|
||||
<option value="CNY">CNY</option>
|
||||
<option value="EUR">EUR</option>
|
||||
@@ -156,7 +172,10 @@ onMounted(() => {
|
||||
<VInput id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
|
||||
</VField>
|
||||
</div>
|
||||
<label class="mb-3.5 flex items-center gap-2 text-sm font-medium text-text"><input v-model="skuActive" type="checkbox" class="h-4 w-4 accent-primary" /> {{ $t("shop.active") }}</label>
|
||||
<label class="text-text mb-3.5 flex items-center gap-2 text-sm font-medium"
|
||||
><input v-model="skuActive" type="checkbox" class="accent-primary h-4 w-4" />
|
||||
{{ $t("shop.active") }}</label
|
||||
>
|
||||
<VBtn variant="primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</VBtn>
|
||||
</form>
|
||||
</VCard>
|
||||
|
||||
@@ -17,7 +17,6 @@ function statusClass(value: ProductStatus): "green" | "orange" | "blue" {
|
||||
return value === "published" ? "green" : value === "unpublished" ? "orange" : "blue";
|
||||
}
|
||||
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
||||
}
|
||||
@@ -26,7 +25,10 @@ async function loadProducts(): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
products.value = await $api.shop.listMyProducts({ page: page.value, status: status.value || undefined });
|
||||
products.value = await $api.shop.listMyProducts({
|
||||
page: page.value,
|
||||
status: status.value || undefined,
|
||||
});
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : translate("common.error");
|
||||
} finally {
|
||||
@@ -54,7 +56,12 @@ async function togglePublished(product: Product): Promise<void> {
|
||||
}
|
||||
|
||||
async function changePage(nextPage: number): Promise<void> {
|
||||
if (!products.value || nextPage < 1 || nextPage > Math.ceil(products.value.total / products.value.per_page)) return;
|
||||
if (
|
||||
!products.value ||
|
||||
nextPage < 1 ||
|
||||
nextPage > Math.ceil(products.value.total / products.value.per_page)
|
||||
)
|
||||
return;
|
||||
page.value = nextPage;
|
||||
await loadProducts();
|
||||
}
|
||||
@@ -65,18 +72,27 @@ onMounted(loadProducts);
|
||||
<template>
|
||||
<VPage :title="$t('shop.productList')">
|
||||
<template #actions>
|
||||
<NuxtLink to="/products/new" 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">{{ $t("shop.newProduct") }}</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/products/new"
|
||||
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"
|
||||
>{{ $t("shop.newProduct") }}</NuxtLink
|
||||
>
|
||||
</template>
|
||||
<div class="mb-4 flex items-center gap-3">
|
||||
<label for="product-status" class="text-sm font-medium">{{ $t("shop.filterStatus") }}</label>
|
||||
<select id="product-status" v-model="status" 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" @change="filterChanged">
|
||||
<select
|
||||
id="product-status"
|
||||
v-model="status"
|
||||
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"
|
||||
@change="filterChanged"
|
||||
>
|
||||
<option value="">{{ $t("common.all") }}</option>
|
||||
<option value="draft">{{ $t("product.draft") }}</option>
|
||||
<option value="published">{{ $t("product.published") }}</option>
|
||||
<option value="unpublished">{{ $t("product.unpublished") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<VCard v-else-if="!products?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<template v-else>
|
||||
@@ -96,20 +112,51 @@ onMounted(loadProducts);
|
||||
<td>{{ localized(product.name, locale) }}</td>
|
||||
<td>{{ product.slug }}</td>
|
||||
<td>{{ product.skus?.length ?? 0 }}</td>
|
||||
<td><VBadge :tone="statusClass(product.status)">{{ $t(`product.${product.status}`) }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="statusClass(product.status)">{{
|
||||
$t(`product.${product.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td>{{ formatDate(product.created_at) }}</td>
|
||||
<td class="flex flex-wrap items-center gap-1.5">
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text hover:bg-bg" :to="`/products/${product.id}`">{{ $t("shop.edit") }}</NuxtLink>
|
||||
<VBtn v-if="product.status === 'published'" size="sm" :disabled="actionId === product.id" @click="togglePublished(product)">{{ $t("product.unpublish") }}</VBtn>
|
||||
<VBtn v-else variant="primary" size="sm" :disabled="actionId === product.id" @click="togglePublished(product)">{{ $t("product.publish") }}</VBtn>
|
||||
<NuxtLink
|
||||
class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-2.5 py-1 text-[13px] font-medium"
|
||||
:to="`/products/${product.id}`"
|
||||
>{{ $t("shop.edit") }}</NuxtLink
|
||||
>
|
||||
<VBtn
|
||||
v-if="product.status === 'published'"
|
||||
size="sm"
|
||||
:disabled="actionId === product.id"
|
||||
@click="togglePublished(product)"
|
||||
>{{ $t("product.unpublish") }}</VBtn
|
||||
>
|
||||
<VBtn
|
||||
v-else
|
||||
variant="primary"
|
||||
size="sm"
|
||||
:disabled="actionId === product.id"
|
||||
@click="togglePublished(product)"
|
||||
>{{ $t("product.publish") }}</VBtn
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<div v-if="products.total > products.per_page" class="mt-4 flex items-center justify-between">
|
||||
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
|
||||
<span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(products.total / products.per_page) }}</span>
|
||||
<VBtn size="sm" :disabled="page >= Math.ceil(products.total / products.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{
|
||||
$t("common.prev")
|
||||
}}</VBtn>
|
||||
<span class="text-muted text-sm"
|
||||
>{{ $t("common.page") }} {{ page }} /
|
||||
{{ Math.ceil(products.total / products.per_page) }}</span
|
||||
>
|
||||
<VBtn
|
||||
size="sm"
|
||||
:disabled="page >= Math.ceil(products.total / products.per_page) || loading"
|
||||
@click="changePage(page + 1)"
|
||||
>{{ $t("common.next") }}</VBtn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</VPage>
|
||||
|
||||
@@ -39,9 +39,13 @@ onMounted(loadCategories);
|
||||
<template>
|
||||
<VPage :title="$t('product.newProduct')">
|
||||
<template #actions>
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/products">{{ $t("common.back") }}</NuxtLink>
|
||||
<NuxtLink
|
||||
class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
|
||||
to="/products"
|
||||
>{{ $t("common.back") }}</NuxtLink
|
||||
>
|
||||
</template>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<ProductForm v-else :categories="categories" :busy="busy" @submit="saveProduct" />
|
||||
</VPage>
|
||||
|
||||
@@ -14,7 +14,6 @@ function statusClass(value: Shipment["status"]): "green" | "blue" | "orange" {
|
||||
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
|
||||
}
|
||||
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
||||
}
|
||||
@@ -49,7 +48,7 @@ onMounted(loadShipments);
|
||||
|
||||
<template>
|
||||
<VPage :title="$t('shop.shipmentList')">
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<VCard v-else-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<VTable v-else>
|
||||
@@ -67,12 +66,28 @@ onMounted(loadShipments);
|
||||
<tbody>
|
||||
<tr v-for="shipment in shipments" :key="shipment.id">
|
||||
<td>{{ shipment.shipment_no }}</td>
|
||||
<td><NuxtLink :to="`/orders/${shipment.order_id}`" class="text-primary hover:underline">{{ shipment.order_no ?? shipment.order_id }}</NuxtLink></td>
|
||||
<td>
|
||||
<NuxtLink :to="`/orders/${shipment.order_id}`" class="text-primary hover:underline">{{
|
||||
shipment.order_no ?? shipment.order_id
|
||||
}}</NuxtLink>
|
||||
</td>
|
||||
<td>{{ shipment.carrier }}</td>
|
||||
<td>{{ shipment.tracking_no }}</td>
|
||||
<td><VBadge :tone="statusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="statusClass(shipment.status)">{{
|
||||
$t(`shipment.status.${shipment.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
<td>{{ formatDate(shipment.created_at) }}</td>
|
||||
<td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
|
||||
<td>
|
||||
<VBtn
|
||||
v-if="shipment.status === 'pending'"
|
||||
size="sm"
|
||||
:disabled="actionId === shipment.id"
|
||||
@click="markShipped(shipment)"
|
||||
>{{ $t("shipment.markShipped") }}</VBtn
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
@@ -97,8 +97,8 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<VPage :title="$t('nav.shopProfile')">
|
||||
<p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
|
||||
<p v-else-if="loadError" class="my-2 text-sm text-danger" role="alert">{{ loadError }}</p>
|
||||
<p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
|
||||
<p v-else-if="loadError" class="text-danger my-2 text-sm" role="alert">{{ loadError }}</p>
|
||||
<VCard v-else>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<VField :label="$t('shop.profileLogo')">
|
||||
@@ -132,15 +132,20 @@ onMounted(() => {
|
||||
<textarea v-model="form.afterSaleZh" :class="inputClass" rows="3" />
|
||||
</VField>
|
||||
</div>
|
||||
<p v-if="formError" class="my-2 text-sm text-danger" role="alert">{{ formError }}</p>
|
||||
<p v-if="formError" class="text-danger my-2 text-sm" role="alert">{{ formError }}</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<VBtn variant="primary" :disabled="saving" @click="save">
|
||||
{{ saving ? $t("common.loading") : $t("common.save") }}
|
||||
</VBtn>
|
||||
<p v-if="feedback" role="status" class="text-sm" :class="feedback.ok ? 'text-success' : 'text-danger'">
|
||||
<p
|
||||
v-if="feedback"
|
||||
role="status"
|
||||
class="text-sm"
|
||||
:class="feedback.ok ? 'text-success' : 'text-danger'"
|
||||
>
|
||||
{{ feedback.message }}
|
||||
</p>
|
||||
</div>
|
||||
</VCard>
|
||||
</VPage>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user