47 lines
1.9 KiB
Vue
47 lines
1.9 KiB
Vue
|
<!--
|
||
|
|
Ported from legacy henza_pwa/src/components/product/orderItem.vue.
|
||
|
|
Adapted: product/variant title comes from a client-side lookup (see
|
||
|
|
useOrderItemProduct.ts) since the real order-items response only carries
|
||
|
|
productVariantId. `note` always shows '-' — our OrderItem schema has no
|
||
|
|
note field (legacy's per-item note was a real column there; ours isn't).
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="bg-white/10 rounded-[10px] p-[12px] flex items-center">
|
||
|
|
<img v-lazy="lookup?.imageUrl" class="ml-[8px] w-[120px]" />
|
||
|
|
<div class="flex-1" style="width: calc(100% - 82px)">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="font-semibold text-[16px] ml-2">{{ lookup?.productTitle ?? '—' }}</div>
|
||
|
|
<div class="text-[12px] text-secondary">({{ lookup?.variantTitle }})</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2">
|
||
|
|
<div class="mt-2">
|
||
|
|
<div>تعداد کالاها :</div>
|
||
|
|
<div class="pt-1">وزن :</div>
|
||
|
|
<div class="pt-1">اجرت :</div>
|
||
|
|
<div class="pt-1">توضیحات :</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-left mt-2 text-black font-semibold">
|
||
|
|
<div>{{ value.quantity }} <span>عدد</span></div>
|
||
|
|
<div class="pt-1">{{ value.computedWeightGrams }} <span>گرم</span></div>
|
||
|
|
<div class="pt-1">{{ value.wagePercentSnapshot }} <span>درصد</span></div>
|
||
|
|
<div class="pt-1">-</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import { useOrderItemProduct, type VariantLookup } from '../../composables/useOrderItemProduct'
|
||
|
|
import type { OrderItemDetail } from '../../api/client'
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<{ value: OrderItemDetail }>(), {})
|
||
|
|
const { lookup: lookupVariant } = useOrderItemProduct()
|
||
|
|
const lookup = ref<VariantLookup | undefined>()
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
lookup.value = await lookupVariant(props.value.productVariantId)
|
||
|
|
})
|
||
|
|
</script>
|