feat(ui): adopt Tailwind v4 design system and archive change
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
This commit is contained in:
Chengdong Zhang
@@ -176,296 +176,83 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="transaction-page checkout-page">
|
||||
<div class="w1200">
|
||||
<div class="min-h-screen bg-bg font-sans text-text">
|
||||
<div class="mx-auto max-w-mall px-4 py-6">
|
||||
<UiStepBar :steps="stepLabels" :active="1" />
|
||||
<header class="page-heading">
|
||||
<h1>{{ t("checkout.title") }}</h1>
|
||||
</header>
|
||||
<header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ t("checkout.title") }}</h1></header>
|
||||
|
||||
<p v-if="error" class="error-message">{{ error }}</p>
|
||||
<p v-if="error" class="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
|
||||
<template v-if="!loading && items.length > 0">
|
||||
<section class="mpanel address-panel">
|
||||
<h2 class="section-title">{{ t("checkout.address") }}</h2>
|
||||
<div v-if="addresses.length > 0" class="address-list">
|
||||
<VCard class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.address") }}</h2>
|
||||
<div v-if="addresses.length > 0" class="grid gap-2">
|
||||
<label
|
||||
v-for="address in addresses"
|
||||
:key="address.id"
|
||||
class="address-option"
|
||||
:class="{ selected: address.id === selectedAddressId }"
|
||||
class="flex cursor-pointer items-start gap-3 rounded-md border border-border p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary-soft"
|
||||
>
|
||||
<input v-model="selectedAddressId" type="radio" name="shipping-address" :value="address.id" />
|
||||
<span class="address-main">
|
||||
<strong>{{ address.recipient }}</strong>
|
||||
<span>{{ address.phone }}</span>
|
||||
<span>{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postal_code }}</span>
|
||||
<input v-model="selectedAddressId" class="mt-1 h-4 w-4 accent-primary" type="radio" name="shipping-address" :value="address.id" />
|
||||
<span class="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<span class="flex flex-wrap gap-2"><strong>{{ address.recipient }}</strong><span>{{ address.phone }}</span></span>
|
||||
<span class="text-muted">{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postal_code }}</span>
|
||||
</span>
|
||||
<span v-if="address.is_default" class="default-tag">{{ t("checkout.defaultAddress") }}</span>
|
||||
<VBadge v-if="address.is_default" tone="blue">{{ t("checkout.defaultAddress") }}</VBadge>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else class="manual-form">
|
||||
<p class="muted">{{ t("checkout.noSavedAddress") }}</p>
|
||||
<div class="manual-grid">
|
||||
<input v-model.trim="manual.recipient" class="minput" type="text" :placeholder="t('user.recipient')" />
|
||||
<input v-model.trim="manual.phone" class="minput" type="text" :placeholder="t('user.phone')" />
|
||||
<input v-model.trim="manual.country" class="minput" type="text" :placeholder="t('user.country')" />
|
||||
<input v-model.trim="manual.region" class="minput" type="text" :placeholder="t('user.region')" />
|
||||
<input v-model.trim="manual.city" class="minput" type="text" :placeholder="t('user.city')" />
|
||||
<input v-model.trim="manual.postal_code" class="minput" type="text" :placeholder="t('user.postalCode')" />
|
||||
<input v-model.trim="manual.line1" class="minput span-2" type="text" :placeholder="t('user.line1')" />
|
||||
<div v-else>
|
||||
<p class="mb-3 text-sm text-muted">{{ t("checkout.noSavedAddress") }}</p>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<VField :label="t('user.recipient')"><VInput v-model.trim="manual.recipient" type="text" :placeholder="t('user.recipient')" /></VField>
|
||||
<VField :label="t('user.phone')"><VInput v-model.trim="manual.phone" type="text" :placeholder="t('user.phone')" /></VField>
|
||||
<VField :label="t('user.country')"><VInput v-model.trim="manual.country" type="text" :placeholder="t('user.country')" /></VField>
|
||||
<VField :label="t('user.region')"><VInput v-model.trim="manual.region" type="text" :placeholder="t('user.region')" /></VField>
|
||||
<VField :label="t('user.city')"><VInput v-model.trim="manual.city" type="text" :placeholder="t('user.city')" /></VField>
|
||||
<VField :label="t('user.postalCode')"><VInput v-model.trim="manual.postal_code" type="text" :placeholder="t('user.postalCode')" /></VField>
|
||||
<VField class="sm:col-span-2" :label="t('user.line1')"><VInput v-model.trim="manual.line1" type="text" :placeholder="t('user.line1')" /></VField>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</VCard>
|
||||
|
||||
<section class="mpanel order-panel">
|
||||
<h2 class="section-title">{{ t("checkout.orderPreview") }}</h2>
|
||||
<div v-for="group in groups" :key="group.shopId" class="order-group">
|
||||
<header class="shop-heading">
|
||||
<span>{{ pick(group.shopName, locale) || t("checkout.shop") }}</span>
|
||||
</header>
|
||||
<div v-for="item in group.items" :key="item.sku_id" class="order-item">
|
||||
<img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
|
||||
<div class="item-info">
|
||||
<strong>{{ pick(item.product_name, locale) }}</strong>
|
||||
<span class="muted">{{ item.sku_code }}</span>
|
||||
</div>
|
||||
<VCard class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
|
||||
<div v-for="group in groups" :key="group.shopId" class="border-b border-border pb-3 last:border-b-0 last:pb-0">
|
||||
<header class="border-b border-border py-2 text-sm font-medium">{{ pick(group.shopName, locale) || t("checkout.shop") }}</header>
|
||||
<div v-for="item in group.items" :key="item.sku_id" class="grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b border-bg py-3 last:border-b-0">
|
||||
<img class="h-14 w-14 object-cover" :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
|
||||
<div class="flex min-w-0 flex-col gap-1"><strong class="truncate">{{ pick(item.product_name, locale) }}</strong><span class="text-xs text-muted">{{ item.sku_code }}</span></div>
|
||||
<PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
|
||||
<span class="qty">× {{ item.qty }}</span>
|
||||
<strong class="line-total">
|
||||
<PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" />
|
||||
</strong>
|
||||
<span class="text-xs text-muted">× {{ item.qty }}</span>
|
||||
<strong class="text-right text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></strong>
|
||||
</div>
|
||||
<div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="coupon-picker">
|
||||
<span class="coupon-label">{{ t("checkout.coupon") }}</span>
|
||||
<select v-model="selectedCoupon[group.shopId]" class="minput coupon-select">
|
||||
<div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="flex flex-wrap items-center gap-3 pt-3 text-sm">
|
||||
<span class="text-muted">{{ t("checkout.coupon") }}</span>
|
||||
<select v-model="selectedCoupon[group.shopId]" 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">
|
||||
<option value="">{{ t("checkout.noCoupon") }}</option>
|
||||
<option v-for="coupon in couponsForShop(group.shopId)" :key="coupon.id" :value="coupon.id">
|
||||
{{ pick(coupon.title, locale) }}
|
||||
</option>
|
||||
<option v-for="coupon in couponsForShop(group.shopId)" :key="coupon.id" :value="coupon.id">{{ pick(coupon.title, locale) }}</option>
|
||||
</select>
|
||||
<span v-if="selectedCouponFor(group.shopId)" class="coupon-value">
|
||||
−
|
||||
<PriceText
|
||||
:amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0"
|
||||
:currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="selectedCouponFor(group.shopId)" class="text-danger">− <PriceText :amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0" :currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</VCard>
|
||||
|
||||
<section class="mpanel remark-panel">
|
||||
<label class="section-title" for="order-remark">{{ t("checkout.remark") }}</label>
|
||||
<textarea id="order-remark" v-model="remark" class="remark-input" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
|
||||
</section>
|
||||
<VCard class="mb-4 p-5">
|
||||
<label class="mb-1 block text-sm font-medium" for="order-remark">{{ t("checkout.remark") }}</label>
|
||||
<textarea id="order-remark" v-model="remark" 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" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
|
||||
</VCard>
|
||||
|
||||
<footer class="submit-bar mpanel">
|
||||
<span class="total-label">{{ t("checkout.total") }}:</span>
|
||||
<strong class="total-price"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
|
||||
<button class="mbtn red" type="button" :disabled="submitting" @click="submitOrder">
|
||||
{{ t("checkout.submit") }}
|
||||
</button>
|
||||
<footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
|
||||
<span class="text-sm">{{ t("checkout.total") }}:</span>
|
||||
<strong class="text-lg text-primary"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{ t("checkout.submit") }}</VBtn>
|
||||
</footer>
|
||||
</template>
|
||||
<div v-else-if="!loading" class="empty-wrap mpanel">
|
||||
<VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<UiEmptyState :text="t('checkout.noItems')" />
|
||||
<NuxtLink class="mbtn gray" to="/cart">{{ t("checkout.backToCart") }}</NuxtLink>
|
||||
</div>
|
||||
<div v-else class="loading-state">{{ $t("common.loading") }}</div>
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/cart">{{ t("checkout.backToCart") }}</NuxtLink>
|
||||
</VCard>
|
||||
<div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.transaction-page {
|
||||
padding: 24px 0 56px;
|
||||
background: #f5f5f5;
|
||||
min-height: 60vh;
|
||||
}
|
||||
.page-heading {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.error-message {
|
||||
margin: 0 0 16px;
|
||||
padding: 10px 14px;
|
||||
color: #b42318;
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffd6d2;
|
||||
}
|
||||
.mpanel {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section-title {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 16px 18px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.address-list {
|
||||
padding: 8px 18px 16px;
|
||||
}
|
||||
.address-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.address-option:hover,
|
||||
.address-option.selected {
|
||||
border-color: var(--mall-red);
|
||||
background: #fffafa;
|
||||
}
|
||||
.address-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.address-main span:last-child {
|
||||
color: var(--mall-muted);
|
||||
}
|
||||
.manual-form {
|
||||
padding: 8px 18px 16px;
|
||||
}
|
||||
.manual-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.manual-grid .span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.default-tag {
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
}
|
||||
.order-panel {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.order-group + .order-group {
|
||||
border-top: 1px solid var(--mall-line);
|
||||
}
|
||||
.shop-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 18px;
|
||||
color: #444;
|
||||
font-size: 13px;
|
||||
}
|
||||
.shop-heading img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.order-item {
|
||||
display: grid;
|
||||
grid-template-columns: 56px minmax(0, 1fr) 120px 64px 130px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 18px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
.order-item > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--mall-line);
|
||||
}
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
.item-info strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.muted,
|
||||
.qty {
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.line-total {
|
||||
color: var(--mall-red);
|
||||
text-align: right;
|
||||
}
|
||||
.coupon-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 18px 14px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
.coupon-label {
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.coupon-select {
|
||||
max-width: 320px;
|
||||
}
|
||||
.coupon-value {
|
||||
color: var(--mall-red);
|
||||
font-size: 13px;
|
||||
}
|
||||
.remark-panel {
|
||||
padding: 0 0 16px;
|
||||
}.remark-input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 36px);
|
||||
margin: 14px 18px 0;
|
||||
resize: vertical;
|
||||
border: 1px solid var(--mall-line-dark);
|
||||
padding: 10px 12px;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
.remark-input:focus {
|
||||
border-color: var(--mall-red);
|
||||
}
|
||||
.submit-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 18px;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
.total-label {
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.total-price {
|
||||
color: var(--mall-red);
|
||||
font-size: 20px;
|
||||
}
|
||||
.empty-wrap {
|
||||
padding-bottom: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-wrap :deep(.empty) {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.loading-state {
|
||||
padding: 70px 0;
|
||||
text-align: center;
|
||||
color: var(--mall-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user