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">
        <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 stepspan3"
          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">
          <teamPayInfo @chiosetab="chiosetab" :getTeamList="getTeamList" />
        </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: "",
      Fsearch: null,
      Frules: null,
    };
  },
  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;
        console.log( this.getTeamList)
      }
      // 判断是否带缓存参数
      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 = "建团申请";
         this.activeIndex = 0;
      } else {
        this.pageName = "乐团修改";
         this.activeIndex = 0;
      }
    },
    chiosetab(val) {
      console.log(val);
      this.activeIndex = val;
    },
    goBack() {
      this.$router.push({
        path: "/business/teamDetail",
        query: { search: this.Fsearch, rules: this.Frules },
      });
    },
  },
};
</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;
      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>