Compare commits
2 Commits
de95dbd059
...
0337cebc63
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0337cebc63 | ||
|
|
f03554893b |
@@ -20,12 +20,11 @@
|
||||
<OfferResultCard
|
||||
v-for="option in productRouteOptions"
|
||||
:key="option.sourceUuid"
|
||||
:source-name="option.sourceName || 'Склад'"
|
||||
:location-name="getOfferData(option.sourceUuid)?.locationName"
|
||||
:product-name="productName"
|
||||
:price-per-unit="getOfferData(option.sourceUuid)?.pricePerUnit"
|
||||
:currency="getOfferData(option.sourceUuid)?.currency"
|
||||
:unit="getOfferData(option.sourceUuid)?.unit"
|
||||
:total-distance="option.distanceKm || 0"
|
||||
:stages="getRouteStages(option)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
<template>
|
||||
<Card padding="md" interactive @click="$emit('select')">
|
||||
<!-- Header: Source + Price -->
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<!-- Header: Location + Price -->
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<Text weight="semibold">{{ sourceName }}</Text>
|
||||
<Text weight="semibold">{{ locationName || 'Локация' }}</Text>
|
||||
<Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
|
||||
{{ priceDisplay }}
|
||||
</Text>
|
||||
<Text tone="muted" size="sm">{{ formatDistance(totalDistance) }} км</Text>
|
||||
</div>
|
||||
<Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
|
||||
{{ priceDisplay }}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<!-- Route stepper -->
|
||||
@@ -23,12 +20,11 @@
|
||||
import type { RouteStage } from './RouteStepper.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
sourceName: string
|
||||
locationName?: string
|
||||
productName?: string
|
||||
pricePerUnit?: number | null
|
||||
currency?: string | null
|
||||
unit?: string | null
|
||||
totalDistance: number
|
||||
stages?: RouteStage[]
|
||||
}>(), {
|
||||
stages: () => []
|
||||
@@ -40,13 +36,33 @@ defineEmits<{
|
||||
|
||||
const priceDisplay = computed(() => {
|
||||
if (!props.pricePerUnit) return null
|
||||
const curr = props.currency || 'USD'
|
||||
const u = props.unit || 'т'
|
||||
return `${props.pricePerUnit} ${curr}/${u}`
|
||||
const currSymbol = getCurrencySymbol(props.currency)
|
||||
const unitName = getUnitName(props.unit)
|
||||
const formattedPrice = props.pricePerUnit.toLocaleString()
|
||||
return `${currSymbol}${formattedPrice}/${unitName}`
|
||||
})
|
||||
|
||||
const formatDistance = (km?: number | null) => {
|
||||
if (!km) return '0'
|
||||
return Math.round(km).toLocaleString()
|
||||
const getCurrencySymbol = (currency?: string | null) => {
|
||||
switch (currency?.toUpperCase()) {
|
||||
case 'USD': return '$'
|
||||
case 'EUR': return '€'
|
||||
case 'RUB': return '₽'
|
||||
case 'CNY': return '¥'
|
||||
default: return '$'
|
||||
}
|
||||
}
|
||||
|
||||
const getUnitName = (unit?: string | null) => {
|
||||
switch (unit?.toLowerCase()) {
|
||||
case 'т':
|
||||
case 'ton':
|
||||
case 'tonne':
|
||||
return 'тонна'
|
||||
case 'кг':
|
||||
case 'kg':
|
||||
return 'кг'
|
||||
default:
|
||||
return 'тонна'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-1 flex-wrap text-xs">
|
||||
<template v-for="(stage, index) in stages" :key="index">
|
||||
<div v-if="index > 0" class="w-3 h-px bg-base-300" />
|
||||
<div class="flex items-center gap-0.5">
|
||||
<span>{{ getTransportIcon(stage.transportType) }}</span>
|
||||
<span class="text-base-content/70">{{ formatDistance(stage.distanceKm) }}км</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<ul class="steps steps-horizontal text-xs w-full">
|
||||
<li
|
||||
v-for="(stage, index) in stages"
|
||||
:key="index"
|
||||
class="step step-primary"
|
||||
:data-content="getTransportIcon(stage.transportType)"
|
||||
>
|
||||
{{ formatDistance(stage.distanceKm) }} км
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -27,6 +28,7 @@ const getTransportIcon = (type?: string | null) => {
|
||||
case 'sea':
|
||||
return '🚢'
|
||||
case 'road':
|
||||
case 'auto':
|
||||
default:
|
||||
return '🚛'
|
||||
}
|
||||
|
||||
@@ -60,12 +60,11 @@
|
||||
|
||||
<template #card="{ item }">
|
||||
<OfferResultCard
|
||||
:source-name="item.name"
|
||||
:location-name="getOfferData(item.uuid)?.locationName"
|
||||
:product-name="selectedProductName"
|
||||
:price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
|
||||
:currency="getOfferData(item.uuid)?.currency"
|
||||
:unit="getOfferData(item.uuid)?.unit"
|
||||
:total-distance="item.distanceKm"
|
||||
:stages="item.stages"
|
||||
/>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user