wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user