ee7b8d0ee4
Some checks failed
Build Docker Image / build (push) Has been cancelled
- Add layout: 'topnav' to all 27 pages that were using default layout - Delete app/layouts/default.vue 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
294 lines
9.3 KiB
Vue
294 lines
9.3 KiB
Vue
<template>
|
|
<Section variant="plain">
|
|
<Stack gap="6">
|
|
<Stack gap="2">
|
|
<Stack direction="row" gap="2" wrap>
|
|
<Button :as="'NuxtLink'" :to="localePath('/')" variant="ghost">
|
|
{{ t('supplierFlow.breadcrumb.home') }}
|
|
</Button>
|
|
<Text tone="muted">→</Text>
|
|
<Button :as="'NuxtLink'" :to="localePath('/search')" variant="ghost">
|
|
{{ t('supplierFlow.breadcrumb.search_results') }}
|
|
</Button>
|
|
<Text tone="muted">→</Text>
|
|
<Text weight="semibold">{{ t('supplierFlow.breadcrumb.select_services') }}</Text>
|
|
</Stack>
|
|
<Heading :level="1">{{ supplier?.name }}</Heading>
|
|
<Text tone="muted">📍 {{ supplier?.location }}</Text>
|
|
</Stack>
|
|
|
|
<Card padding="lg">
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack gap="1">
|
|
<Heading :level="3" weight="semibold">{{ supplier?.name }}</Heading>
|
|
<Text tone="muted">{{ supplier?.selectedLogistics?.route }}</Text>
|
|
</Stack>
|
|
<Stack gap="1" align="end">
|
|
<Text weight="semibold">{{ supplier?.totalPrice }}₽</Text>
|
|
<Text tone="muted">{{ $t('supplier.delivery_time') }}: {{ supplier?.selectedLogistics?.time }}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Stack gap="4">
|
|
<Stack gap="2">
|
|
<Heading :level="2">{{ t('supplierFlow.sections.logistics.title') }}</Heading>
|
|
<Text tone="muted">{{ t('supplierFlow.sections.logistics.subtitle') }}</Text>
|
|
</Stack>
|
|
<Grid :cols="1" :md="2" :gap="4">
|
|
<Card
|
|
v-for="logistics in logisticsCompanies"
|
|
:key="logistics.id"
|
|
padding="lg"
|
|
interactive
|
|
:active="selectedServices.logistics === logistics.id"
|
|
@click="selectedServices.logistics = logistics.id"
|
|
>
|
|
<Stack gap="2">
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Heading :level="4" weight="semibold">{{ logistics.name }}</Heading>
|
|
<Pill variant="primary">{{ logistics.price.toLocaleString() }}₽</Pill>
|
|
</Stack>
|
|
<Text tone="muted">{{ logistics.description }}</Text>
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Text tone="muted" size="base">{{ t('supplierFlow.labels.rating_reviews', { rating: logistics.rating, reviews: logistics.reviews }) }}</Text>
|
|
<Text tone="muted" size="base">{{ logistics.experience }}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Stack gap="4">
|
|
<Stack gap="2">
|
|
<Heading :level="2">{{ t('supplierFlow.sections.financing.title') }}</Heading>
|
|
<Text tone="muted">{{ t('supplierFlow.sections.financing.subtitle') }}</Text>
|
|
</Stack>
|
|
<Grid :cols="1" :md="2" :gap="4">
|
|
<Card
|
|
v-for="bank in banks"
|
|
:key="bank.id"
|
|
padding="lg"
|
|
interactive
|
|
:active="selectedServices.financing === bank.id"
|
|
@click="selectedServices.financing = bank.id"
|
|
>
|
|
<Stack gap="2">
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Heading :level="4" weight="semibold">{{ bank.name }}</Heading>
|
|
<Pill variant="primary">{{ bank.rate }}%</Pill>
|
|
</Stack>
|
|
<Text tone="muted">{{ bank.terms }}</Text>
|
|
<Text tone="muted" size="base">{{ bank.period }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Stack gap="4">
|
|
<Stack gap="2">
|
|
<Heading :level="2">{{ t('supplierFlow.sections.insurance.title') }}</Heading>
|
|
<Text tone="muted">{{ t('supplierFlow.sections.insurance.subtitle') }}</Text>
|
|
</Stack>
|
|
<Grid :cols="1" :md="2" :gap="4">
|
|
<Card
|
|
v-for="insurance in insuranceCompanies"
|
|
:key="insurance.id"
|
|
padding="lg"
|
|
interactive
|
|
:active="selectedServices.insurance === insurance.id"
|
|
@click="selectedServices.insurance = insurance.id"
|
|
>
|
|
<Stack gap="2">
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Heading :level="4" weight="semibold">{{ insurance.name }}</Heading>
|
|
<Pill variant="primary">{{ insurance.cost }}₽</Pill>
|
|
</Stack>
|
|
<Text tone="muted">{{ insurance.coverage }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Stack gap="4">
|
|
<Stack gap="2">
|
|
<Heading :level="2">{{ t('supplierFlow.sections.quality.title') }}</Heading>
|
|
<Text tone="muted">{{ t('supplierFlow.sections.quality.subtitle') }}</Text>
|
|
</Stack>
|
|
<Grid :cols="1" :md="2" :gap="4">
|
|
<Card
|
|
v-for="lab in laboratories"
|
|
:key="lab.id"
|
|
padding="lg"
|
|
interactive
|
|
:active="selectedServices.laboratory === lab.id"
|
|
@click="selectedServices.laboratory = lab.id"
|
|
>
|
|
<Stack gap="2">
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Heading :level="4" weight="semibold">{{ lab.name }}</Heading>
|
|
<Pill variant="primary">{{ lab.price }}₽</Pill>
|
|
</Stack>
|
|
<Text tone="muted">{{ lab.tests }}</Text>
|
|
<Text tone="muted" size="base">🏆 {{ lab.certification }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Card padding="lg">
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack gap="1">
|
|
<Heading :level="3" weight="semibold">{{ $t('supplier.total_summary') }}</Heading>
|
|
<Text tone="muted">{{ $t('supplier.all_services_selected') }}</Text>
|
|
</Stack>
|
|
<Stack gap="1" align="end">
|
|
<Heading :level="2">{{ totalCost }}₽</Heading>
|
|
<Text tone="muted">{{ $t('supplier.final_cost') }}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<Stack direction="row" gap="3" wrap>
|
|
<Button variant="outline" :as="'NuxtLink'" :to="localePath('/search')">
|
|
{{ $t('supplier.back_to_suppliers') }}
|
|
</Button>
|
|
<Button fullWidth>
|
|
{{ $t('supplier.place_order') }}
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'topnav'
|
|
})
|
|
|
|
const route = useRoute()
|
|
const localePath = useLocalePath()
|
|
const { t } = useI18n()
|
|
|
|
const selectedServices = ref({
|
|
logistics: null,
|
|
financing: null,
|
|
insurance: null,
|
|
laboratory: null
|
|
})
|
|
|
|
const logisticsCompanies = [
|
|
{
|
|
id: 1,
|
|
name: "RosLogistic",
|
|
price: 15000,
|
|
description: "National transportation network",
|
|
rating: 4.8,
|
|
reviews: 156,
|
|
experience: "15 years of experience",
|
|
verified: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "TransService",
|
|
price: 12000,
|
|
description: "Regional carrier",
|
|
rating: 4.5,
|
|
reviews: 89,
|
|
experience: "8 years of experience",
|
|
verified: false
|
|
}
|
|
]
|
|
|
|
const banks = [
|
|
{
|
|
id: 1,
|
|
name: "VTB",
|
|
rate: 12.5,
|
|
terms: "Loan for raw materials",
|
|
period: "up to 24 months",
|
|
rating: 4.7,
|
|
reviews: 89,
|
|
verified: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Sberbank",
|
|
rate: 13.2,
|
|
terms: "Trade financing",
|
|
period: "up to 18 months",
|
|
rating: 4.9,
|
|
reviews: 145,
|
|
verified: true
|
|
}
|
|
]
|
|
|
|
const insuranceCompanies = [
|
|
{
|
|
id: 1,
|
|
name: "RESO",
|
|
cost: 3500,
|
|
coverage: "Cargo insurance up to 500M ₽",
|
|
rating: 4.6,
|
|
reviews: 67,
|
|
verified: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Ingosstrakh",
|
|
cost: 4200,
|
|
coverage: "Full transaction insurance",
|
|
rating: 4.8,
|
|
reviews: 91,
|
|
verified: true
|
|
}
|
|
]
|
|
|
|
const laboratories = [
|
|
{
|
|
id: 1,
|
|
name: "MetalTest",
|
|
price: 8000,
|
|
tests: "Chemical analysis, mechanical properties",
|
|
certification: "ISO 9001",
|
|
rating: 4.7,
|
|
reviews: 45,
|
|
verified: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "QualityControl",
|
|
price: 6500,
|
|
tests: "Basic quality tests",
|
|
certification: "GOST R",
|
|
rating: 4.4,
|
|
reviews: 32,
|
|
verified: false
|
|
}
|
|
]
|
|
|
|
const supplier = computed(() => ({
|
|
id: route.params.id,
|
|
name: "UralMetal",
|
|
location: "Yekaterinburg",
|
|
totalPrice: 180000,
|
|
selectedLogistics: { route: "Auto delivery", time: "5-7 days" }
|
|
}))
|
|
|
|
const totalCost = computed(() => {
|
|
let total = supplier.value.totalPrice
|
|
if (selectedServices.value.logistics) {
|
|
const logistics = logisticsCompanies.find(l => l.id === selectedServices.value.logistics)
|
|
total += logistics?.price || 0
|
|
}
|
|
if (selectedServices.value.insurance) {
|
|
const insurance = insuranceCompanies.find(i => i.id === selectedServices.value.insurance)
|
|
total += insurance?.cost || 0
|
|
}
|
|
if (selectedServices.value.laboratory) {
|
|
const lab = laboratories.find(l => l.id === selectedServices.value.laboratory)
|
|
total += lab?.price || 0
|
|
}
|
|
return total
|
|
})
|
|
</script>
|