129 lines
5.7 KiB
Vue
129 lines
5.7 KiB
Vue
<template>
|
|
<meta-head title="Загрузить изображение"></meta-head>
|
|
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
|
|
<form @submit.prevent="submit" class=" bg-indigo-200 shadow-classic rounded-md p-5">
|
|
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
|
|
<inertia-link :href="route('profile.user', $page.props.auth.user.username)" class="block hover:underline">
|
|
Вернуться
|
|
</inertia-link>
|
|
<span class="px-3">/</span>
|
|
<h1 class="text-gray">Загрузка изображения</h1>
|
|
</div>
|
|
<div class="space-y-5">
|
|
|
|
<div class="flex flex-col">
|
|
<text-input v-model="form.title" :error="form.errors.title" type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Название" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<textarea-input v-model="form.body" :error="form.errors.body" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30" rows="4" label="Описание" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<file-input-multiple
|
|
v-model="form.photos"
|
|
:error="form.errors.photos"
|
|
label="Выбрать изображения"
|
|
/>
|
|
</div>
|
|
<div class="text-gray-light">
|
|
<input class="w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" placeholder="#tags" type="text">
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-light text-lg mb-2">Тип контента</div>
|
|
<div class="flex space-x-6">
|
|
<div class="flex items-center">
|
|
<input id="feed-paid-1" v-model="paid" value="0" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
|
|
<label for="feed-paid-1" class="select-none ml-3 text-gray">Бесплатный</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="feed-paid-2" v-model="paid" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
|
|
<label for="feed-paid-2" class="select-none ml-3 text-gray">Платный</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-5" v-if="contentPaid == 1">
|
|
<div class="flex flex-col">
|
|
<text-input v-model="form.price" :error="form.errors.price" type="number" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Цена" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<file-input-multiple
|
|
v-model="form.photos_paid"
|
|
:error="form.errors.photos_paid"
|
|
label="Выбрать изображения"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 flex flex-wrap -my-1 -mx-3">
|
|
|
|
<progress
|
|
class="mx-3 my-1 w-full"
|
|
v-if="form.progress"
|
|
:value="form.progress.percentage"
|
|
max="100"
|
|
>
|
|
{{ form.progress.percentage }}%
|
|
</progress>
|
|
|
|
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none" type="submit">
|
|
Создать
|
|
</loading-button>
|
|
<button type="button"
|
|
class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
|
|
Отменить
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Layout from '@/Shared/Layout'
|
|
import MetaHead from '@/Shared/MetaHead'
|
|
import TextInput from '@/Shared/Form/TextInput'
|
|
import FileInputMultiple from '@/Shared/Form/FileInputMultiple'
|
|
import TextareaInput from '@/Shared/Form/TextareaInput'
|
|
import LoadingButton from "@/Shared/Form/LoadingButton";
|
|
import { useForm } from "@inertiajs/inertia-vue3";
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
TextInput,
|
|
FileInputMultiple,
|
|
LoadingButton,
|
|
TextareaInput,
|
|
},
|
|
layout: Layout,
|
|
data(){
|
|
return {
|
|
paid: 0,
|
|
contentPaid: 0,
|
|
}
|
|
},
|
|
watch:{
|
|
paid(value){
|
|
this.contentPaid = value;
|
|
this.form.is_paid = value;
|
|
}
|
|
},
|
|
setup() {
|
|
|
|
const form = useForm({
|
|
title: null,
|
|
body: null,
|
|
price: null,
|
|
photos: null,
|
|
photos_paid: null,
|
|
is_paid: 0
|
|
});
|
|
|
|
const submit = () => {
|
|
form.post(route("image.store"));
|
|
};
|
|
|
|
return { form, submit }
|
|
},
|
|
|
|
}
|
|
</script>
|