NUXT_FRONTEND/pages/admin/advertising/create/index.vue

<template>
  <v-form
    class="mx-auto"
    width="900"
    ref="form"
    lazy-validation
    @submit.prevent="createAdsItem"
  >
    <v-checkbox
      max-width="600"
      v-model="adsItem.visibility"
      label="Показывать рекламу"
    ></v-checkbox>
    <v-combobox
      v-model="adsItem.advertising_section_id"
      label="Секция показа рекламы:"
      required
      :items="sectionsList"
      item-text="display_name"
      item-value="section_code"
      outlined
    >
    </v-combobox>
    <v-text-field
      v-model="adsItem.display_title"
      label="Название рекламного блока:"
      required
      outlined
    ></v-text-field>
    <v-text-field
      v-model="adsItem.div_id"
      label="ID рекламного блока:"
      required
      outlined
    ></v-text-field>
    <v-textarea
      label="Вставка кода:"
      v-model="adsItem.code"
      auto-grow
      outlined
      rows="10"
      row-height="20"
    ></v-textarea>
    <v-btn type="submit"> Принять </v-btn>
  </v-form>
</template>

<script>
export default {
  layout: "admin",
  data() {
    return {
      adsItem: {
        display_title: "",
        visibility: true,
        advertising_section_id: "",
        div_id: "",
        code: ""
      },
    };
  },
  methods: {
    async createAdsItem({ $axios }) {
      let response = await this.$axios.$post(
        "/authorized/admin/advertising/create",
        {
          begin_showing_time: this.date,
          end_showing_time: 1661651787,
          display_title: this.adsItem.display_title,
          visibility: true,
          advertising_section_id: this.adsItem.advertising_section_id.id,
          script: this.adsItem.code,
          ad_click_url: this.adsItem.div_id
        }
      );
    },
  },
  async asyncData({ $axios }) {
    const sectionsList = await $axios
      .$get("/advertising/sections/all")
      .then((res) => {
        console.log(res.data);
        return res.data;
      });
    return { sectionsList };
  },
  computed: {
    date() {
      return Math.floor(Date.now() / 1000)
    }
  }
};
</script>

<style scope lang="less">
form {
  width: 90%;
}
</style>