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">
          <menuLeft :menu="menu" :loading="leftLoading" @change="menuVal"></menuLeft>
        </div>
        <div v-else  class="leftBox">
          <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>
                <!--              <el-switch v-model="item.status"></el-switch>-->
              </div>
            </el-menu-item>
          </el-menu>
        </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
          },
          {
            name: '轮播图',
            select: false
          }
        ],
        menuList: [
          {
            name: "小程序、H5首页",
            menuName: "小程序、H5首页",
          },
          {
            name: "门户首页",
            menuName: "门户首页",
          }
        ],
        menuDetail: {}
      }
    },
    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()
        } 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>