site/resources/js/Pages/Music/Create.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
                    v-model="form.preview"
                    accept="image/png, image/jpeg, image/jpg"
                    :error="form.errors.preview"
                    label="Загрузить превью"
                />
            </div>

            <div class="flex flex-col">
                <file-input-multiple
                    @fileTime='saveTimeFile'
                    v-model="form.musics"
                    accept=".mp3"
                    :error="form.errors.musics"
                    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
                        @fileTime='savePaidTimeFile'
                        v-model="form.musics_paid"
                        accept=".mp3"
                        :error="form.errors.musics_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 FileInput from "@/Shared/Form/FileInput";
import TextareaInput from "@/Shared/Form/TextareaInput";
import LoadingButton from "@/Shared/Form/LoadingButton";
import { useForm } from "@inertiajs/inertia-vue3";

export default {
  layout: Layout,
  components: {
    MetaHead,
    TextInput,
    FileInput,
    FileInputMultiple,
    LoadingButton,
    TextareaInput,
  },

  watch: {
    paid(value) {
      this.contentPaid = value;
      this.form.is_paid = value;
    },
  },
  data() {
    return {
      paid: 0,
      contentPaid: 0,
    };
  },

  setup() {
    const form = useForm({
      title: null,
      body: null,
      preview: null,
      musics: null,
      musics_paid: null,
      price: null,
      is_paid: 0,
      times: [],
      times_paid: [],
    });

    const submit = () => {
      form.post(route("music.store"));
    };

    const saveTimeFile = (time) => {
      form.times.push(time);
    };

    const savePaidTimeFile = (time) => {
      form.times_paid.push(time);
    };

    return { form, submit, saveTimeFile, savePaidTimeFile };
  },
};
</script>