cmanager/src/views/manage/recommend/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 v-if="status" style="height: 23px;"></div>

      <div class="recommendBody" v-if="status">
        <div class="leftBox">
          <menuLeft :menu="menu" :loading="leftLoading" switchStatus @change="menuVal"></menuLeft>
        </div>
        <div class="containerWrap">
          <menuBody :menuDetail="menuDetailObj"></menuBody>
        </div>
      </div>

      <div v-else>
        <wx-content></wx-content>
      </div>
    </basic-container>
  </div>
</template>

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

  import menuLeft from './manage/menuLeft'
  import menuBody from './manage/menuBody'
  import wxContent from './manageContent/contentManage'
  import {
    routesCompany,
    routesCompanyEdit
  } from '@/api/help/recommend/route'

export default {
  name: "index",
  components: {
    menuLeft,
    menuBody,
    wxContent
  },
  provide() {
    return {
      recommend: this,
    };
  },
  created() {
    this.initRoute()
  },
  data () {
    return {
      leftLoading: false,
      menu: [],
      titleList: [
        {
          name: '企业端后台',
          select: true
        },
        {
          name: '小程序端',
          select: false
        }
      ],
      menuDetailObj: {}
    }
  },
  methods: {
    initRoute(){
      this.leftLoading = true
      routesCompany().then(res => {
        var arr = res.data.data
        this.menu = this.statusForEach(arr)
        // this.menu = res.data.data
        this.menuDetailObj = {}
        this.leftLoading = false
      })
    },
    statusForEach (arr) {
      arr.forEach(e => {
        e.status = false
        if (e.isShow == 1) {
          e.status = true
        }
        if (e.children && e.children.length > 0) {
          this.statusForEach(e.children)
        }
      })
      return arr
    },
    titleActive (item) {
      this.titleList.forEach(e => {
        e.select = false
      })
      item.select = true
      if (item.name === '企业端后台') {
        this.menuDetailObj = {}
        this.initRoute()
      }
    },
    menuVal (item, type){
      this.menuDetailObj = JSON.parse(JSON.stringify(item))
      if (type === 'switch') {
        var params = {
          menuId: item.menuId,
          menuCode: item.menuCode,
          isShow: item.status ? 1 : 0
        }
        routesCompanyEdit(params).then(res =>{
          this.initRoute()
        })
      }
    }
  },
  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>