NUXT_FRONTEND/pages/admin/publications/create-container/index.vue

<template>
  <v-form max-width="400px" class="form-module">
    <v-text-field v-model="module.name" label="Название модуля"> </v-text-field>
    <v-checkbox
      max-width="400"
      v-model="module.activity"
      label="Показывать модуль"
    ></v-checkbox>
    <v-img :src="'https://api.amic.ru/'+img.relative_path"></v-img>
    <v-file-input
      @change="handleFile('img', 1280, 660)"
      label="Картинка:"
      type="file"
      accept="image/*"
      ref="input"
    ></v-file-input>
    <v-row>
      <v-col>
          <h4>Начало активности</h4>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
          <v-btn
            text
            color="primary"
            @click="$refs.menu.save(startActivity.date)"
          >
            OK
          </v-btn>
        </v-date-picker>
        <vue-timepicker v-model="time" format="HH:mm:ss"></vue-timepicker>
      </v-col>
      <v-col>
          <h4>Конец активности</h4>
        <v-date-picker v-model="endDate" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
          <v-btn
            text
            color="primary"
            @click="$refs.menu.save(startActivity.date)"
          >
            OK
          </v-btn>
        </v-date-picker>
        <vue-timepicker v-model="endTime" format="HH:mm:ss"></vue-timepicker>
      </v-col>
    </v-row>
    <v-btn @click="createModule">Создать модуль</v-btn>
  </v-form>
</template>

<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
export default {
  layout: "admin",
  components: {
    VueTimepicker,
  },
  data() {
    return {
      module: {
        activity: true,
        type: "module",
        name: "",
        start_activity: "",
        end_activity: "",
        background_image_id: this.img ? this.img.url : "",
      },
      img: {},
      endTime: "",
      endDate: "",
      date: "",
      time: "",
    };
  },

  async asyncData({ $axios }) {
    const containers = await $axios
      .get("/admin/containers/type_module")
      .then((res) => {
        return res.data.data;
      });
    return { containers };
  },
  methods: {
    handleFile(type, width, height) {
      let formData = new FormData();
      console.log(this.$refs.input.$refs.input.files[0]);
      formData.append("file", this.$refs.input.$refs.input.files[0]);
      formData.append("destination_width", width);
      formData.append("destination_height", height);
      formData.append("title", "example img");
      this.$axios
        .$post("authorized/admin/files/upload/image/news/raw", formData, {
          headers: {
            "Content-Type": `multipart/form-data;`,
            'Access-Control-Allow-Origin': 'origin'

          },
        })
        .then((res) => {
          this.img = res.data;
          return res;
        })
        .catch((err) => console.log(err));
    },
    createModule() {
        this.$axios.post("admin/containers/create", {
            type: "module",
            name: this.module.name,
            start_activity: this.start_activity,
            end_activity: this.end_activity,
            background_image_id: this.img.image_id,
            activity: this.module.activity
        })
    }
  },
  computed: {
      start_activity() {
        return this.date + " " + this.time;
      },
      end_activity() {
          return this.endDate + ' ' + this.endTime
      }
    },
};
</script>

<style lang="less">
.form-module {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}
</style>