NUXT_FRONTEND/pages/admin/advertising/index.vue

<template>
  <div>
    <nuxt-link to="/admin/advertising/create">
      <v-btn elevation="2"> Создать рекламу</v-btn>
    </nuxt-link>

    <nuxt-link to="/admin/advertising/create-section">
      <v-btn elevation="2"> Создать секцию</v-btn>
    </nuxt-link>
    <div v-for="section in adsList">
      <v-expansion-panels v-model="panel" multiple>
        <v-expansion-panel v-for="(adsItem, i) in section" :key="i">
          <v-expansion-panel-header>
            <span>
              Секция:
              {{ adsItem.advertising_section_display_name }}
            </span>
            <span>
              {{ adsItem.display_title }}
            </span>
            <span> </span>
            <span> </span>
            <v-divider vertical></v-divider>
            Время:
            {{ convertDate(adsItem.begin_showing_time) }} -
            {{ convertDate(adsItem.end_showing_time) }}
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </v-expansion-panel-content>
          <nuxt-link
            :to="{
              name: 'admin-advertising-adsId',
              params: { adsItem: adsItem, adsId: adsItem.id },
            }"
          >
            <v-btn tile color="success">
              <v-icon left> mdi-pencil </v-icon>
              изменить
            </v-btn>
          </nuxt-link>
          <v-btn tile color="warning" @click="deleteItem(adsItem)">
            <v-icon left> mdi-pencil </v-icon>
            Удалить
          </v-btn>
          <v-btn tile color="primary" @click="copy(adsItem)">
            <v-icon left> mdi-pencil </v-icon>
            копировать
          </v-btn>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

      adsList: "",
      sectionsList: ''
    }

  },
  layout: "admin",
  mounted() {

     this.$axios.$post("/authorized/admin/advertising/list")
      .then((res) => {
        console.log(res.data);
        this.adsList = res.data;
        return res.data;
      });
     this.$axios.$get("/advertising/sections/all")
      .then((res) => {
        console.log(res.data);
        this.sectionsList = res.data;
        return res.data;
      });

  },
  methods: {
    convertDate(dateTampstamp) {
      const date = new Date(dateTampstamp * 1000);
      const dateString =
        ("0" + date.getDate()).slice(-2) +
        "." +
        ("0" + (date.getMonth() + 1)).slice(-2) +
        "." +
        date.getFullYear() +
        " " +
        ("0" + date.getHours()).slice(-2) +
        ":" +
        ("0" + date.getMinutes()).slice(-2);
      return dateString;
    },
    deteleItem(item) {
      this.$axios.post("authorized/admin/advertising/delete", { id: item.id });
    },
  },
};
</script>

<style>
</style>