cmanager/src/views/manage/advertisement/index.vue

<template>
  <div>
    <basic-container>
      <!--      <div style="border-bottom: 1px solid #1890FF;">-->
      <!--        <button class="btn" v-for="item in titleList" :key="item.name" :class="item.select ? 'primary' : ''"-->
      <!--                @click="titleActive(item)">{{ item.name }}-->
      <!--        </button>-->
      <!--      </div>-->
      <!--      <div style="height: 23px;"></div>-->
      <div class="recommendBody">
        <!--        <div v-if="status" class="leftBox">-->
        <!--          &lt;!&ndash; <menuLeft :menu="menu" :loading="leftLoading" @change="menuVal"></menuLeft> &ndash;&gt;-->
        <!--          <el-menu>-->
        <!--            <el-menu-item v-for="(item, index) in menuList" :key="index" :index="index +1" @click="menuVal(item)">-->
        <!--              <div slot="title" style="display: flex;justify-content: space-between;align-items: center;">-->
        <!--                <span>{{item.name}}</span>-->
        <!--                &lt;!&ndash;              <el-switch v-model="item.status"></el-switch>&ndash;&gt;-->
        <!--              </div>-->
        <!--            </el-menu-item>-->
        <!--          </el-menu>-->
        <!--        </div>-->
        <!--        <div v-else  class="leftBox">-->
        <!--          -->
        <!--        </div>-->

        <div class="containerWrap">
          <advertisement-body ref="advertisementBody" :menuDetail="menuDetail"></advertisement-body>
        </div>
      </div>
    </basic-container>

  </div>
</template>

<script>
import {mapGetters} from "vuex";

import menuLeft from '../recommend/manage/menuLeft'
import advertisementBody from "./advertisementBody";
import {
  routesCompany
} from '@/api/help/recommend/route'

export default {
  name: "index",
  components: {
    menuLeft,
    advertisementBody
  },
  provide() {
    return {
      recommend: this,
    };
  },
  created() {
    this.leftLoading = true
    routesCompany().then(res => {
      this.menu = res.data.data
      this.leftLoading = false
    })
  },
  data() {
    return {
      leftLoading: false,
      menu: [],
      titleList: [
        {
          name: '轮播图',
          select: true
        }

      ],
      menuList: [
        {
          name: "小程序、H5首页",
          menuName: "小程序、H5首页",
        },
        // {
        //   name: "门户首页",
        //   menuName: "门户首页",
        // }
      ],
      menuDetail: {}
    }
  },
  mounted() {
    this.$refs.advertisementBody.bannerInit()
  },
  methods: {
    titleActive(item) {
      if (item.select) return
      this.titleList.forEach(e => {
        e.select = false
      })
      item.select = true
      this.menuDetail = {}
    },
    menuVal(item) {
      this.menuDetail = JSON.parse(JSON.stringify(item))
      if (this.titleList[0].select) {
        this.$refs.advertisementBody.onLoad()
        // this.$refs.advertisementBody.bannerInit()
      } else if (this.titleList[1].select) {
        this.$refs.advertisementBody.bannerInit()
      }
    }
  },
  computed: {
    ...mapGetters([
      // "menu",
    ]),
    status() {
      return this.titleList[0].select
    }
  }
}
</script>

<style scoped>
.recommendBody {
  display: flex;
  box-sizing: border-box;
}

.containerWrap {
  padding-top: 0 !important;
  flex: 1;
  overflow: auto;
}

.leftBox {
  width: 260px;
  background: #FAFAFA;
  margin-right: 23px;
}

.btn {
  width: 144px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 4px 4px 0px 0px;
  border: 1px solid #D9D9D9;

  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  line-height: 32px;

  margin-right: 16px;
}

.primary {
  background-color: #1890FF !important;
  color: #FFFFFF !important;
}
</style>