249 lines
11 KiB
Vue
249 lines
11 KiB
Vue
<template>
|
|
<UiContainer class="space-25-75">
|
|
<div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="relative flex flex-col">
|
|
<h1 class="text-3xl font-bold">
|
|
{{ component.front_section_lang.at(0).data.drawing_up_a_proposal_for_asave_contract }}
|
|
</h1>
|
|
<div class="flex flex-wrap flex-1">
|
|
<!-- left -->
|
|
<div class="w-full md:w-1/2 p-4">
|
|
<h3 class="w-full border-b my-2">
|
|
{{ component.front_section_lang.at(0).data.simulation_of_the_contract_proposal }}
|
|
</h3>
|
|
<p>{{ component.front_section_lang.at(0).data.monthly_savings }}</p>
|
|
<div class="my-8">
|
|
<div class="text-2xl">
|
|
{{ formater.price(store.monthlySavings) }}
|
|
</div>
|
|
<input v-model="store.monthlySavings" type="range" :max="store.getMaxAmount" :min="store.getMinAmount" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
|
|
</div>
|
|
<div class="my-8">
|
|
<div class="text-2xl">
|
|
{{ store.storagePeriod }}
|
|
</div>
|
|
<input v-model="store.storagePeriod" type="range" :max="investmentStore.maxYear" :min="investmentStore.minYear" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
|
|
</div>
|
|
</div>
|
|
<!-- right -->
|
|
<div class="w-full md:w-1/2 p-4">
|
|
<h3 class="w-full border-b my-2">
|
|
{{ component.front_section_lang.at(0).data.details_of_the_contract_proposal }}
|
|
</h3>
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.current_price_per_bar }}</span>
|
|
<span>{{ formater.price(investmentStore.calculationResult.calculator_output.investment_piece.price) }}</span>
|
|
</p>
|
|
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.money_for_spend }}</span>
|
|
<span>{{ formater.price(investmentStore.calculationResult.calculator_output.money_spent) }}</span>
|
|
</p>
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.weight_per_bar }}</span>
|
|
<span>{{ getWeight }}</span>
|
|
</p>
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.count }}</span>
|
|
<span>{{ investmentStore.calculationResult.calculator_output.max_pieces_in_package }}</span>
|
|
</p>
|
|
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.contract_type }}</span>
|
|
<span>50/50</span>
|
|
</p>
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.special_fee }}</span>
|
|
<span>{{ formater.price(investmentStore.calculationResult.calculator_output.total_input_price_increase) }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- next section -->
|
|
<div class="flex flex-wrap">
|
|
<!-- left -->
|
|
<div class="w-full md:w-1/2 p-4">
|
|
<h3 class="w-full border-b my-2">
|
|
{{ component.front_section_lang.at(0).data.graphic_simulation_of_future_profits }}
|
|
</h3>
|
|
<p class="my-4 md:my-12">
|
|
<img :src="`data:image/svg+xml;base64,${investmentStore.calculationResult.chart}`" alt="" class="bg-white rounded-2xl p-2">
|
|
</p>
|
|
</div>
|
|
<!-- right -->
|
|
<div class="w-full md:w-1/2 p-4">
|
|
<h3 class="w-full border-b my-2">
|
|
{{ component.front_section_lang.at(0).data.summary_of_the_contract_proposal }}
|
|
</h3>
|
|
|
|
<p class="flex justify-between my-4">
|
|
<span>{{ component.front_section_lang.at(0).data.save }}</span>
|
|
<span>{{ component.front_section_lang.at(0).data.expected_value_of_savings }}</span>
|
|
</p>
|
|
<p class="flex justify-between my-4">
|
|
<span></span>
|
|
<span class="font-bold text-2xl">{{ formater.price(investmentStore.calculationResult.calculator_output.total_investement_value)
|
|
}}</span>
|
|
</p>
|
|
<div class="flex flex-col items-center">
|
|
<img :src="`/api/public/file/${investmentStore.calculationResult.calculator_output.investment_piece.cover_picture_uuid}_m.webp`" :alt="investmentStore.calculationResult.calculator_output.investment_piece.name" class="object-contain object-center w-48 max-h-64">
|
|
<span class="my-2 text-sm">{{ investmentStore.calculationResult.calculator_output.investment_piece.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="my-4">
|
|
<div class="flex w-full flex-wrap justify-center md:justify-end mt-8">
|
|
<a :href="getPrintLink" target="_blank" class="my-2 mx-4">
|
|
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
|
|
{{ component.front_section_lang.at(0).data.print }}
|
|
</UiButtonArrow>
|
|
</a>
|
|
<nuxt-link :to="getInvestLink" class="my-2 mx-4">
|
|
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
|
|
{{ component.front_section_lang.at(0).data.invest }}
|
|
</UiButtonArrow>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
component: {
|
|
id: number
|
|
name: string
|
|
img: string[]
|
|
component_name: string
|
|
is_no_lang: boolean
|
|
page_name: string
|
|
front_section_lang: {
|
|
data: {
|
|
drawing_up_a_proposal_for_asave_contract: string
|
|
simulation_of_the_contract_proposal: string
|
|
monthly_savings: string
|
|
details_of_the_contract_proposal: string
|
|
current_price_per_bar: string
|
|
money_for_spend: string
|
|
weight_per_bar: string
|
|
count: string
|
|
contract_type: string
|
|
special_fee: string
|
|
graphic_simulation_of_future_profits: string
|
|
summary_of_the_contract_proposal: string
|
|
save: string
|
|
expected_value_of_savings: string
|
|
print: string
|
|
invest: string
|
|
}
|
|
id_front_section: number
|
|
id_lang: number
|
|
}[]
|
|
}
|
|
}>()
|
|
|
|
const investmentStore = useInvestmentStore()
|
|
const store = useStore()
|
|
const formater = useFormater(useNuxtApp())
|
|
const userStore = useUserStore()
|
|
const router = useRouter()
|
|
const menuStore = useMenuStore()
|
|
|
|
await investmentStore.getCalculator()
|
|
|
|
const getWeight = computed(() => {
|
|
return investmentStore.calculationResult.calculator_output.investment_piece.features.find(feature => feature.feature_id === 1)?.value
|
|
})
|
|
|
|
const getPrintLink = computed(() => {
|
|
const query = new URLSearchParams({
|
|
monthly_deposit: String(store.monthlySavings),
|
|
years: String(store.storagePeriod),
|
|
grid: 'false',
|
|
legend: 'false',
|
|
title: 'false',
|
|
ingots_bought_dots: 'true',
|
|
draw_linear: 'true',
|
|
annotations: 'false',
|
|
show_real_value: 'false',
|
|
series_stroke_width: '1',
|
|
})
|
|
|
|
return `/api/public/plan-prediction/easy/plan-proposal?${query.toString()}`
|
|
})
|
|
|
|
const getInvestLink = computed(() => {
|
|
if (userStore.isLogged) {
|
|
return { path: '/golden-panel/save-contract' }
|
|
}
|
|
return { name: router.currentRoute.value.name, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite }, query: { to: btoa('/golden-panel/save-contract') } }
|
|
})
|
|
|
|
/*
|
|
INSERT INTO `front_page` (`created_at`, `updated_at`, `name`, `is_default`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','0','16');
|
|
INSERT INTO `front_menu` (`created_at`, `updated_at`, `active`, `position_id`, `id_front_page`, `is_default`, `is_root`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','1','1','16','0','0','16');
|
|
INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investment','2','16','Investment');
|
|
INSERT INTO `front_menu_lang` (`link_rewrite`, `id_front_menu`, `id_lang`, `name`) VALUES ('inwestycja','16','1','Inwestycja');
|
|
INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investice','3','16','Investice');
|
|
INSERT INTO `front_section` (`id`, `created_at`, `updated_at`, `name`, `img`, `component_name`, `is_no_lang`) VALUES ('35','2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','[]','InvestmentBlock','0');
|
|
INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','1','35');
|
|
INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','2','4');
|
|
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
|
|
"drawing_up_a_proposal_for_asave_contract": "Przygotowanie propozycji umowy SAVE",
|
|
"simulation_of_the_contract_proposal": "Symulacja propozycji umowy",
|
|
"monthly_savings": "Miesięczne oszczędności",
|
|
"details_of_the_contract_proposal": "Szczegóły propozycji umowy",
|
|
"current_price_per_bar": "Aktualna cena za sztabkę",
|
|
"money_for_spend": "Kwota do wydania",
|
|
"weight_per_bar": "Waga jednej sztabki",
|
|
"count": "Liczba",
|
|
"contract_type": "Typ umowy",
|
|
"special_fee": "Opłata specjalna",
|
|
"graphic_simulation_of_future_profits": "Graficzna symulacja przyszłych zysków",
|
|
"summary_of_the_contract_proposal": "Podsumowanie propozycji umowy",
|
|
"save": "Zaoszczędzona kwota",
|
|
"expected_value_of_savings": "Oczekiwana wartość oszczędności",
|
|
"print": "Drukuj",
|
|
"invest": "Zainwestuj"
|
|
}', '35', '1');
|
|
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
|
|
"drawing_up_a_proposal_for_asave_contract": "Drawing up a proposal for a SAVE contract",
|
|
"simulation_of_the_contract_proposal": "Simulation of the contract proposal",
|
|
"monthly_savings": "Monthly savings",
|
|
"details_of_the_contract_proposal": "Details of the contract proposal",
|
|
"current_price_per_bar": "Current price per bar",
|
|
"money_for_spend": "Money for spend",
|
|
"weight_per_bar": "Weight per bar",
|
|
"count": "Count",
|
|
"contract_type": "Contract type",
|
|
"special_fee": "Special fee",
|
|
"graphic_simulation_of_future_profits": "Graphic simulation of future profits",
|
|
"summary_of_the_contract_proposal": "Summary of the contract proposal",
|
|
"save": "Saved Amount",
|
|
"expected_value_of_savings": "Expected value of savings",
|
|
"print": "Print",
|
|
"invest": "Invest"
|
|
}', '35', '2');
|
|
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
|
|
"drawing_up_a_proposal_for_asave_contract": "Vypracování návrhu smlouvy SAVE",
|
|
"simulation_of_the_contract_proposal": "Simulace návrhu smlouvy",
|
|
"monthly_savings": "Měsíční úspory",
|
|
"details_of_the_contract_proposal": "Podrobnosti návrhu smlouvy",
|
|
"current_price_per_bar": "Aktuální cena za slitku",
|
|
"money_for_spend": "Částka k utracení",
|
|
"weight_per_bar": "Hmotnost slitku",
|
|
"count": "Počet",
|
|
"contract_type": "Typ smlouvy",
|
|
"special_fee": "Speciální poplatek",
|
|
"graphic_simulation_of_future_profits": "Grafická simulace budoucích zisků",
|
|
"summary_of_the_contract_proposal": "Shrnutí návrhu smlouvy",
|
|
"save": "Ušetřená částka",
|
|
"expected_value_of_savings": "Očekávaná hodnota úspor",
|
|
"print": "Tisk",
|
|
"invest": "Investovat"
|
|
}', '35', '3');
|
|
*/
|
|
</script>
|