liebao-web/src/components/waimai.vue

<template>
  <div class="shopInfo">
    <el-row class="order_tab">
      <el-col :span="24">
        <div class="tabList">
          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
            <span class="item" v-if="!item.children">{{item.name}}</span>
            <el-dropdown v-else @command="chooseCoupon">
              <span class="el-dropdown-link item">
                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="tab_line"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="content">
      <component v-if="renderComponent" :is="activeName"></component>
    </el-row>
  </div>
</template>

<script>
import printerList from "./shopCompoents/bindPrinter.vue";
import usbPrinter from "./shopCompoents/bindUsbPrint.vue";
import pictureManagement from "./waimaiComponents/pictureManagement.vue";
import addressManagement from "./waimaiComponents/addressManagement.vue";
import deliverySetting from "./waimaiComponents/deliverySetting.vue";
import voiceSetting from "./waimaiComponents/voiceSetting.vue";
export default {
  name: "waimai",
  components: {
    printerList,
    usbPrinter,
    pictureManagement,
    addressManagement,
    deliverySetting,
    voiceSetting,
  },
  data() {
    return {
      activeName: "deliverySetting",
      tabList: [
        { name: "配送设置", index: 0, activeName: "deliverySetting" },
        { name: "语音设置", index: 1, activeName: "voiceSetting" },
        {
          name: "打印机管理",
          index: 2,
          activeName: "printerList",
          children: [
            { name: "云打印机", command: "printerList" },
            { name: "USB打印机", command: "usbPrinter" },
          ],
        },
        { name: "商品管理", index: 3, activeName: "pictureManagement" },
        { name: "常用地址", index: 4, activeName: "addressManagement" },
      ],
      tabNum: 0,
      renderComponent: true,
    };
  },
  created() {
    this.changeTabs(0);
  },
  methods: {
    chooseCoupon(e) {
      this.tabNum = 2;
      this.activeName = e;
    },
    forceRerender() {
      // 从 DOM 中删除 my-component 组件
      this.renderComponent = false;
      this.$nextTick(() => {
        // 在 DOM 中添加 my-component 组件
        this.renderComponent = true;
      });
    },
    changeTabs(i) {
      if (i === this.tabNum) {
        this.forceRerender();
        return;
      }
      this.tabNum = i;
      this.activeName = this.tabList[i].activeName;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.shopInfo {
  .order_tab {
    width: 100%;
    height: 74px;
    background: #fff;

    .tabList {
      width: 100%;
      height: 74px;
      padding-top: 20px;
      padding-left: 36px;
      box-sizing: border-box;
      display: flex;

      .tab_item {
        min-width: 58px;
        margin-right: 56px;
        .item {
          font-size: 16px;
          font-weight: 500;
          color: #b1b1b1;
          position: relative;
          text-align: center;
          cursor: pointer;
        }
        .tab_line {
          width: 58px;
          height: 6px;
          background: #fff;
          border-radius: 3px;
          margin: 15px auto 0;
        }
      }

      .tab_item_ac {
        color: #fc7200;

        .tab_line {
          background: #fc7200;
        }
      }
    }
  }

  .content {
    width: 100%;
    margin-top: 10px;
    // padding: 20px;
    box-sizing: border-box;
    background: #f5f5f5;
  }
}
</style>