dy-admin-manager/src/views/teamBuild/index.vue

<template>
  <div class="m-container">
    <div class="line"></div>
    <h2>
      <el-page-header @back="goBack"
                      :content="pageName"> </el-page-header>
    </h2>
    <div class="m-core">
      <div class="stepbox">
        <!--  @click="activeIndex = 0" -->
        <span class="stepspan stepspan1">
          <div class="step1 sptep"
               :class="activeIndex >= 0 ? 'activestep' : ''">
            基本信息
          </div>
          <img :src="activeIndex  >=  0 ? stepImgs.nol : stepImgs.active"
               alt=""
               class="arrow" />
        </span>
        <!-- @click="activeIndex = 1" -->
        <span class="stepspan stepspan2"
              v-if="showFlag?activeIndex>= 1:true">
          <!--    -->
          <div class="step2 sptep"
               :class="activeIndex  >= 1 ? 'activestep' : ''">
            声部设置
          </div>
          <img :src="activeIndex >=  1 ? stepImgs.nol : stepImgs.active"
               alt=""
               class="arrow" />
        </span>
        <!--  @click="activeIndex = 2" -->
        <!-- <span class="stepspan stepspan3"
              v-if="showFlag?activeIndex  >=  2:true">
          <div class="step2 sptep"
               :class="activeIndex  >=  2 ? 'activestep' : ''">
            创建缴费
          </div>
          <img :src="activeIndex >= 2 ? stepImgs.nol : stepImgs.active"
               alt=""
               class="arrow" />
        </span> -->
      </div>

      <!-- 下面显示的内容 -->
      <div class="stepcontent">
        <div v-show="activeIndex == 0">
          <teamBaseInfo @chiosetab="chiosetab"
                        ref='teamBaseInfo'
                        :getTeamList="getTeamList"
                        @getBaseInfo="getBaseInfo" />
        </div>
        <div v-if="activeIndex == 1">
          <teamSoundMoney @chiosetab="chiosetab"
                          :getTeamList="getTeamList"
                          @getBaseInfo="getBaseInfo" />
        </div>
        <!-- <div v-if="activeIndex == 2">
          <teamPayInfo @chiosetab="chiosetab"
                       :getTeamList="getTeamList"
                       :baseInfo="baseInfo" />
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import teamBaseInfo from "@/views/teamBuild/components/teamBaseInfo";
import teamSoundMoney from "@/views/teamBuild/components/teamSoundSet";
import teamPayInfo from "@/views/teamBuild/components/teamPayInfo";
export default {
  components: { teamBaseInfo, teamSoundMoney, teamPayInfo },
  name: "teamBuild",
  data () {
    return {
      activeIndex: 0,
      stepImgs: {
        nol: require("@/assets/images/base/step-arrow-active.png"),
        active: require("@/assets/images/base/step-arrow.png"),
      },
      pageName: "建团申请",
      getTeamList: [],
      teamStatus: "",
    };
  },
  created () {
    // 判断 是新建乐团还是修改乐团
    this.activeIndex = 0;
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.teamStatus = this.$route.query.type;
      if (this.$route.query.teamList) {
        this.getTeamList = this.$route.query.teamList;
      }

      if (this.teamStatus == "newTeam") {
        // 新建团
        this.pageName = "建团申请";
        this.activeIndex = 0;
      } else {
        this.pageName = "乐团修改";
        this.activeIndex = 0;
      }
    },
    chiosetab (val) {
      this.activeIndex = val;
      if (val == 0 && this.teamStatus != "newTeam" || val == 0 && this.teamStatus != "feeAudit") {
        this.$refs.teamBaseInfo.init()
      }
    },
    goBack () {
      this.$router.push({
        path: "/business/teamDetail",
      });
    },
    getBaseInfo (baseInfo) {
      this.baseInfo = baseInfo
      this.pageName = baseInfo.musicGroup?.name
    },
  },
  computed: {
    showFlag () {
      return (this.teamStatus == 'newTeam' || this.teamStatus == 'teamList')
    }
  }
};
</script>
<style lang="scss" scoped>
.stepbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .stepspan {
    font-size: 14px;
    display: block;
    line-height: 40px;
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .sptep {
      width: 110px;
      height: 40px;
      border: 1px solid #dcdfe6;
      border-right: none;
      border-bottom: none;
      padding-left: 25px;
      border-radius: 4px 0 0 0;
    }
    .arrow {
      height: 40px;
      width: 17px;
      position: relative;
      top: 1px;
      z-index: 40;
    }
  }
  .stepspan.stepspan2 {
    position: relative;
    z-index: 20;
    left: -17px;
    .sptep {
      padding-left: 30px !important;
      border-radius: 0 !important;
    }
  }
  .stepspan.stepspan3 {
    position: relative;
    z-index: 10;
    left: -34px;
    background-color: #fff;
    .sptep {
      padding-left: 30px !important;
      border-radius: 0 !important;
    }
  }
  .sptep.activestep {
    color: #fff;
    font-weight: bold;
    background-color: #4eada7;
  }
}
.stepcontent {
  border-top: 1px solid #dcdfe6;
  padding-top: 30px;
}
</style>