116 lines
4.8 KiB
Vue
Executable File
116 lines
4.8 KiB
Vue
Executable File
<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>
|
||
<span v-if="!is_active_sub" class="text-pink"> (Подписка закончилась)</span>
|
||
</p>
|
||
<div class="rounded-xl bg-indigo-300 px-3 py-4 mt-5">
|
||
<toggle
|
||
:user_id="user_id"
|
||
:enabled="user_autosubscription"
|
||
textin="Автоматическое списание отключено"
|
||
textout="Автоматическое списание включно" @clicked="makeAutoSubs"
|
||
/>
|
||
</div>
|
||
|
||
<div v-for="plan in plans" :key="plan.id"
|
||
:class="[is_active_sub && 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>
|
||
</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 :disabled="offerCheck == false" type="button"
|
||
:class="[is_active_sub && lastSubscription?.package.id === plan.id ? 'bg-white border border-green text-green' : 'text-white bg-green' , 'mt-4 my-1 transition shadow-none inline-flex items-center px-8 py-3 justify-center text-base rounded-3xl focus:outline-none disabled:bg-gray-light disabled:cursor-not-allowed']"
|
||
@click="subsPlan(plan.id)"
|
||
>
|
||
<span v-if="is_active_sub && lastSubscription?.package.id === plan.id">
|
||
активен
|
||
</span>
|
||
<span v-else>
|
||
купить тариф
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5 flex items-center">
|
||
<input id="offer_check" v-model="offerCheck"
|
||
type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="offer_check" class="select-none ml-3 text-gray text-lg md:text-xl">Согласен с условиями
|
||
<a href="/docs/offer_paid_subscription.pdf" class="underline"
|
||
target="_blank"
|
||
rel="noopener noreferrer nofollow"
|
||
>оферты</a></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Inertia } from '@inertiajs/inertia'
|
||
|
||
import Toggle from '@/Shared/Form/Toggle.vue'
|
||
import Layout from '@/Shared/Layout.vue'
|
||
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
|
||
import MetaHead from '@/Shared/MetaHead.vue'
|
||
|
||
export default {
|
||
components: {
|
||
MetaHead,
|
||
SettingsMenu,
|
||
Toggle,
|
||
},
|
||
layout: Layout,
|
||
props: {
|
||
plans: Array,
|
||
is_active_sub: Boolean,
|
||
user_autosubscription: Boolean,
|
||
user_id: Number,
|
||
lastSubscription: Object,
|
||
},
|
||
data: function() {
|
||
return {
|
||
offerCheck: true
|
||
}
|
||
},
|
||
methods: {
|
||
makeAutoSubs(id){
|
||
Inertia.patch(route('users.settingsAutoSubs', id), {
|
||
preserveScroll: true,
|
||
preserveState: true,
|
||
})
|
||
},
|
||
subsPlan(id) {
|
||
Inertia.post(route('users.plan', id), {
|
||
preserveScroll: true,
|
||
preserveState: true,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|