dy-admin-manager/src/views/teamBuild/teamDraft.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"
            @getName="getName"
            ref="teamBaseInfo"
            :getTeamList="getTeamList"
            @getBaseInfo="getBaseInfo"
          />
        </div>
        <!-- v-if="showSecond" -->
        <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";
import merge from "webpack-merge";
export default {
  components: { teamBaseInfo, teamSoundMoney, teamPayInfo },
  name: "teamDraft",
  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: "",
      showSecond: false,
    };
  },
  created() {
    // 判断 是新建乐团还是修改乐团
    // this.activeIndex = 0;
    this.init();
  },
  activated() {
    if (this.$route.query.clear == "true") {
      this.showSecond = false;
      this.$store.dispatch("draftIndex", 0);
      this.$router.push({
        query: merge(this.$route.query, { clear: false }),
      });
    }
    this.init();
  },
  destroyed() {
    this.showSecond = false;
  },
  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 = this.$store.getters.buildIndex || 0;
      } else {
        console.log(this.$store.getters.draftIndex, this.activeIndex);
        this.pageName = "乐团修改";
        this.activeIndex = this.$store.getters.draftIndex || 0;
      }
    },
    chiosetab(val) {
      this.activeIndex = val;
      if (
        (val == 0 && this.teamStatus != "newTeam") ||
        (val == 0 && this.teamStatus != "feeAudit")
      ) {
        this.$refs.teamBaseInfo.init();
      }
      this.showSecond = true;
    },
    goBack() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/business/teamDetail",
      });
    },
    getBaseInfo(baseInfo) {
      this.baseInfo = baseInfo;
      this.pageName = baseInfo.musicGroup?.name;
    },
    getName(name) {
      this.pageName = 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>