liebao-web/src/components/help/feedback.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" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
            <el-dropdown v-else @command="chooseCoupon">
              <span class="el-dropdown-link item" :class="tabNum==i?'active-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 feedbackInfo from "./feedbackInfo.vue";
import myFeedback from "./myFeedback.vue";
export default {
  name: "feedback",
  components: {
    feedbackInfo,
    myFeedback,
  },
  data() {
    return {
      activeName: "feedbackInfo",
      tabList: [
        { name: "意见反馈", index: 0, activeName: "feedbackInfo" },
        { name: "我的反馈", index: 1, activeName: "myFeedback" },
      ],
      tabNum: 0,
      renderComponent: true,
    };
  },
  created() {
    this.changeTabs(0);
    this.$bus.$on("goFeedbackList", (index) => {
      this.changeTabs(index);
    });
  },
  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;
        }
        .active-item {
          color: #fc7200;
        }
        .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;
    box-sizing: border-box;
    background: #ffffff;
    padding: 0 20px;
  }
}
</style>