This commit is contained in:
Viet An
2026-06-18 11:57:37 +07:00
parent 5302e685a4
commit 8b07ab4e65
34 changed files with 90 additions and 65 deletions

View File

@@ -11,7 +11,6 @@ function openModal() {
component: "orders/SelectedOrder",
title: "Chi tiết đơn hàng",
width: "75%",
height: "500px",
vbind: {
invoice: props.invoice,
},

View File

@@ -64,7 +64,7 @@ const historyItems = [
:class="`has-text-${item.color}-40`"
/>
<div
class="is-flex-grow-1 has-background-grey-lighter rounded-full"
class="is-flex-grow-1 has-background-grey-85 rounded-full"
style="width: 3px"
></div>
</div>

View File

@@ -36,7 +36,7 @@ function openModal() {
<div class="is-flex is-flex-direction-column is-gap-2">
<!-- customer info -->
<div>
<p class="has-text-grey-darker">{{ order.customer__name }}</p>
<p class="has-text-grey-20">{{ order.customer__name }}</p>
<div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
<Icon name="material-symbols:call-outline-rounded" />
<p>{{ order.customer__phone }}</p>
@@ -44,12 +44,12 @@ function openModal() {
</div>
<!-- product info -->
<div>
<p class="fs-24 has-text-grey-darker font-bold">
<p class="fs-24 has-text-grey-20 font-bold">
{{ $shortenCurrency(order.total) }}
</p>
<p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
</div>
<hr class="m-0 has-background-grey-lighter" />
<hr class="m-0 has-background-grey-85" />
<div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
<p class="is-flex is-align-items-center is-gap-0.5">
<Icon

View File

@@ -8,7 +8,7 @@ const { $formatNum } = useNuxtApp();
<template>
<div>
<div class="is-flex is-gap-2">
<div class="is-flex-grow-1 p-3 rounded-md has-background-white-bis">
<div class="is-flex-grow-1 p-3 rounded-md has-background-white-100">
<p class="fs-13 has-text-grey">Tổng tiền</p>
<p class="font-bold">
{{ $formatNum(invoice.total, { hasUnit: true }) }}

View File

@@ -43,7 +43,7 @@ const phases = [
v-bind="phase"
/>
</div>
<hr class="has-background-grey-lighter" />
<hr class="has-background-grey-85" />
<div class="is-flex is-justify-content-space-between">
<p>Tổng đơn hàng</p>
<p class="fs-18 font-semibold">

View File

@@ -27,12 +27,12 @@ const invoiceProducts = computed(() => {
<div
v-for="product in invoiceProducts"
:key="product.id"
class="p-3 has-background-white-ter rounded-md"
class="p-3 has-background-white-95 rounded-md"
>
<div class="is-flex is-justify-content-space-between is-align-items-flex-end">
<div>
<p class="font-semibold">{{ product.variant__product__name }}</p>
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
<div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-1">
<p>SL: {{ product.amount }}</p>
<p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p>
</div>
@@ -47,15 +47,15 @@ const invoiceProducts = computed(() => {
<table class="table is-fullwidth is-bordered fs-14 mb-8">
<tbody class="has-text-right">
<tr>
<td class="has-text-grey-dark">Tổng tiền hàng</td>
<td class="has-text-grey-30">Tổng tiền hàng</td>
<td>{{ $formatNum(invoice.total_amount, { hasUnit: true }) }}</td>
</tr>
<tr>
<td class="has-text-grey-dark">Phí vận chuyển</td>
<td class="has-text-grey-30">Phí vận chuyển</td>
<td>{{ $formatNum(invoice.shipping_fee, { hasUnit: true }) }}</td>
</tr>
<tr>
<td class="has-text-grey-dark">Giảm giá</td>
<td class="has-text-grey-30">Giảm giá</td>
<td>{{ $formatNum(invoice.discount_amount, { hasUnit: true }) }}</td>
</tr>
<tr class="font-bold">

View File

@@ -9,7 +9,7 @@ const props = defineProps({
<Icon
name="material-symbols:receipt-long-outline-rounded"
:size="50"
class="has-text-grey-light"
class="has-text-grey-70"
/>
<p>Chưa hoá đơn</p>
<button class="button is-purple">Tạo hoá đơn</button>

View File

@@ -25,7 +25,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
`has-background-${status.color}-90`,
]"
>
<p class="font-semibold has-text-grey-darker">{{ status.name }}</p>
<p class="font-semibold has-text-grey-20">{{ status.name }}</p>
<p
class="px-2 py-1 font-semibold rounded-lg has-background-white"
:style="{ border: `1px solid var(--bulma-${status.color}-60)` }"
@@ -33,8 +33,8 @@ const emit = defineEmits(["selectOrder", "unselect"]);
{{ orders.filter((o) => o.status === status.id).length }}
</p>
</div>
<hr class="m-0 has-background-grey-lighter" />
<div class="has-background-white-bis p-4">
<hr class="m-0 has-background-grey-85" />
<div class="has-background-white-100 p-4">
<OrderKanbanCard
v-if="orders.filter((o) => o.status === status.id).length > 0"
v-for="order in orders.filter((o) => o.status === status.id)"

View File

@@ -29,7 +29,7 @@ const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
<Icon
name="material-symbols:arrow-forward-rounded"
:size="24"
class="has-text-grey-light"
class="has-text-grey-70"
/>
</div>
</template>