Initial commit from monorepo
This commit is contained in:
Ruslan Bakiev
290
app/pages/supplier/[id].vue
Normal file
290
app/pages/supplier/[id].vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<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>
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user