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

<template>
  <div class='m-container'>
    <div class="line"></div>
    <h2>
      <!-- <div class='squrt'></div> {{ pageName }} -->
      <el-page-header @back="goBack"
                      :content="pageName">
      </el-page-header>
    </h2>
    <div class="m-core">
      <div class="stepbox">
        <span class='stepspan  stepspan1'
              @click="activeIndex=0">
          <div class="step1 sptep"
               :class="activeIndex >= 0?'activestep':''">
            基本信息
          </div>
          <img :src="activeIndex >= 0?stepImgs.nol:stepImgs.active"
               alt=""
               class="arrow">
        </span>
        <span class='stepspan  stepspan2'
              v-if="activeIndex==1"
              @click="activeIndex=1">
          <!--    -->
          <div class="step2 sptep"
               :class="activeIndex == 1?'activestep':''">
            声部费用
          </div>
          <img :src="activeIndex == 1?stepImgs.nol:stepImgs.active"
               alt=""
               class="
               arrow">
        </span>
        <!-- <span class='stepspan  stepspan2'
              v-if="activeIndex==2"
              @click="activeIndex==2">
          <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'
                        :getTeamList='getTeamList' />
        </div>
        <div v-if='activeIndex==1'>
          <teamSoundMoney @chiosetab='chiosetab'
                          :getTeamList='getTeamList' />
        </div>
        <!-- <div v-if='activeIndex==2'>
          <teamResetSound @chiosetab='chiosetab'
                          :getTeamList='getTeamList' />
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import teamBaseInfo from '@/views/teamBuild/components/teamBaseInfo'
import teamSoundMoney from '@/views/teamBuild/components/teamSoundMoney'
import teamResetSound from '@/views/teamBuild/components/teamResetSound'
export default {
  components: { teamBaseInfo, teamSoundMoney, teamResetSound },
  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: '',
      Fsearch: null,
      Frules: null
    }
  },
  created () {
    // 判断 是新建乐团还是修改乐团 
    this.teamStatus = this.$route.query.type;
    if (this.$route.query.teamList) {
      this.getTeamList = this.$route.query.teamList
    }
    // 判断是否带缓存参数
    if (this.$route.query.search) {
      this.Fsearch = this.$route.query.search;
    }
    if (this.$route.query.rules) {
      this.Frules = this.$route.query.rules
    }

    if (this.teamStatus == 'newTeam') {
      // 新建团
      this.pageName = '建团申请'
    } else {
      this.pageName = '乐团修改'
    }
  },
  methods: {
    chiosetab (val) {
      this.activeIndex = val;
    },
    goBack () {
      // this.$rout
    }
  },
}
</script>
<style lang="scss" scoped>
.stepbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .stepspan {
    cursor: pointer;
    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;
    }
  }
  .stepspan.stepspan2 {
    position: relative;
    z-index: 10;
    left: -17px;
    padding-right: 33px;
    .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>