50 lines
2.0 KiB
Vue
50 lines
2.0 KiB
Vue
<!-- Ported from legacy henza_pwa/src/components/product/order.vue -->
|
|
<template>
|
|
<div
|
|
@click="emit('view', value)"
|
|
class="w-full cursor-pointer relative rounded-[10px] mb-4 p-[10px] text-primary border border-solid border-[#E5E7EB] bg-[#fff]"
|
|
>
|
|
<div class="grid grid-cols-2 p-2">
|
|
<div>
|
|
<div class="text-[18px] font-sans font-semibold mb-2">
|
|
<span class="text-[#656f87]">سفارش :</span>
|
|
{{ value.orderNumber }}
|
|
</div>
|
|
<div>
|
|
<span class="text-[16px] font-bold pl-2">{{ value.items.length }}</span>
|
|
<span class="text-[14px] font-medium">آیتم</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid justify-end">
|
|
<div class="rounded-[5px] px-[20px] py-[4px] w-fit text-[14px] mb-2" :style="{ background: color?.background, color: color?.font }">
|
|
{{ statusLabel }}
|
|
</div>
|
|
<div>
|
|
<span class="text-[16px] font-bold pl-2">{{ parseFloat(value.totalGoldWeightGrams).toFixed(2) }} </span>
|
|
<span class="text-[14px] font-medium">گرم</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-divider style="margin: 8px 0" />
|
|
<div class="flex justify-between p-2">
|
|
<div class="text-[16px] text-[#656f87]">{{ jdate(value.createdAt) }}</div>
|
|
<Icon icon="vuesax-linear:arrow-left-1" class="cursor-pointer text-left" size="24" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { Divider as ADivider } from 'ant-design-vue'
|
|
import Icon from '../icon/Icon.vue'
|
|
import { ORDER_STATUS_COLORS, ORDER_STATUS_LABELS } from '../../utils/orderStatus'
|
|
import { jdate } from '../../utils/filters'
|
|
import type { OrderDetail } from '../../api/client'
|
|
|
|
const props = withDefaults(defineProps<{ value: OrderDetail }>(), {})
|
|
const emit = defineEmits<{ (e: 'view', value: OrderDetail): void }>()
|
|
|
|
const statusLabel = computed(() => ORDER_STATUS_LABELS[props.value.status] ?? props.value.status)
|
|
const color = computed(() => ORDER_STATUS_COLORS[props.value.status])
|
|
</script>
|