79 lines
3.6 KiB
Vue
79 lines
3.6 KiB
Vue
<template>
|
|
<meta-head title="Тарифы"></meta-head>
|
|
|
|
<div class="xl:container xl:mx-auto px-2 md:px-3">
|
|
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
|
|
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
|
|
|
|
<settings-menu />
|
|
|
|
<div class="col-span-4">
|
|
<div class="mx-4 2xl:mx-28 my-8">
|
|
|
|
<h2 class="text-xl lg:text-2xl xl:text-4xl text-white font-semibold">
|
|
Выберите тариф, который подходит именно вам
|
|
</h2>
|
|
<p class="mt-4 lg:text-xl xl:text-2xl text-white">
|
|
Более 1 млн фотографий, видео и музыки в постоянном доступе для вас!
|
|
</p>
|
|
<p v-if="lastSubscription" class="mt-4 xl:text-xl text-green">
|
|
Дата окончания подписки:
|
|
<span class="block md:inline-block">{{ lastSubscription.endDateTime }} ({{ lastSubscription.package.name }})</span>
|
|
</p>
|
|
|
|
<div v-for="plan in plans" :key='plan.id' :class="[lastSubscription?.package.id === plan.id ? 'border-l-4 lg:border-l-8 border-orange' : '' ,'mt-7 p-7 xl:mt-14 xl:p-14 shadow-classic rounded-md bg-indigo-100']">
|
|
<div class="flex flex-col lg:grid grid-cols-6 gap-3 items-center">
|
|
<div class="col-start-1 col-end-4 flex flex-col items-center lg:items-start text-center lg:text-left">
|
|
<span class="text-xl md:text-2xl lg:text-3xl xl:text-4xl text-white font-medium">{{plan.name}}</span>
|
|
<span class="mt-4 text-lg xl:text-2xl text-gray-light">For individuals that need advanced recording & editing.</span>
|
|
</div>
|
|
|
|
<div class="col-start-5 col-end-7 flex flex-col items-center">
|
|
<span class="text-3xl lg:text-4xl xl:text-6xl text-white font-bold">{{plan.price}}</span>
|
|
<button type="button"
|
|
@click="subsPlan(plan.id)"
|
|
:class="[lastSubscription?.package.id === plan.id ? 'bg-white border border-green text-green' : 'text-white bg-pink hover:shadow-pink' , 'mt-4 my-1 transition shadow-none inline-flex items-center px-8 py-3 justify-center text-base rounded-3xl focus:outline-none']">
|
|
<span v-if="lastSubscription?.package.id === plan.id">
|
|
активен
|
|
</span>
|
|
<span v-else>
|
|
выбрать тариф
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
import Layout from '@/Shared/Layout'
|
|
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
|
|
import MetaHead from '@/Shared/MetaHead'
|
|
export default {
|
|
layout: Layout,
|
|
components: {
|
|
MetaHead,
|
|
SettingsMenu,
|
|
},
|
|
props:{
|
|
plans: Array,
|
|
lastSubscription: Object,
|
|
},
|
|
methods: {
|
|
subsPlan(id) {
|
|
Inertia.post(route("users.plan", id), {
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|