dy-admin-manager/src/views/teamDetail/teamInfo.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" :content="name"></el-page-header>
    </h2>
    <div class="m-core">
      <!-- <p class='msg'
         :class="status=='PROGRESS'? 'ing' : '' "> <img :src="status=='PROGRESS'?stepImgs.PROGRESS:stepImgs.PAUSE"
             alt="">
        {{ status=='PROGRESS'?'进行中':'已结束' }}</p> -->
      <!-- navMenu -->
      <tab-router
        v-model.trim="activeIndex"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane lazy label="基本信息" name="1">
          <baseInfo v-if="activeIndex == '1'" :teamid="teamid" />
        </el-tab-pane>
        <el-tab-pane lazy label="声部信息" name="2">
          <soundeDetail v-if="activeIndex == '2'" :teamid="teamid" />
        </el-tab-pane>

        <el-tab-pane
          lazy
          label="预报名信息"
          name="5"
          v-if="
            team_status == 'PRE_APPLY' ||
            team_status == 'PRE_BUILD_FEE' ||
            team_status == 'FEE_AUDIT' ||
            team_status == 'APPLY'
          "
        >
          <forecastName
            v-if="activeIndex == '5'"
            :isedit="team_status == 'PRE_APPLY'"
          />
        </el-tab-pane>
        <el-tab-pane
          lazy
          label="报名列表"
          name="6"
          v-if="team_status == 'APPLY' || team_status == 'PAY'||team_status == 'PREPARE'"
        >
          <signupList v-if="activeIndex == '6'" :teamid="teamid" />
        </el-tab-pane>
           <el-tab-pane
          lazy
          label="班级列表"
          name="7"
          v-if="team_status == 'PREPARE' "
        >
          <classSeting v-if="activeIndex == '7'" :teamid="teamid" />
        </el-tab-pane>
        <!-- classSeting -->
        <el-tab-pane
          lazy
          label="学员缴费信息"
          name="3"
          v-if="team_status != 'PRE_APPLY'"
        >
          <resetPayList
            v-if="activeIndex == '3'"
            :isNewGropu="team_status == 'PRE_BUILD_FEE' ? true : false"
          />
        </el-tab-pane>
        <el-tab-pane
          lazy
          label="学校缴费信息"
          name="4"
          v-if="team_status != 'PRE_APPLY'"
        >
          <resetPayListSchool
            v-if="activeIndex == '4'"
            :isNewGropu="team_status == 'PRE_BUILD_FEE' ? true : false"
          />
        </el-tab-pane>
      </tab-router>
    </div>
  </div>
</template>
<script>
import baseInfo from "@/views/teamBuild/components/teamBaseInfo";
import soundeDetail from "@/views/resetTeaming/components/resetSoundv2";
import resetPayList from "@/views/resetTeaming/components/resetPayList";
import resetPayListSchool from "@/views/resetTeaming/components/resetPayListSchool";
import forecastName from "@/views/teamBuild/forecastName";
import signupList from "@/views/teamBuild/signupList";
import classSeting from "@/views/teamBuild/teamSeting/components/setClassV2"; // 筹备中班级列表
export default {
  data() {
    return {
      activeIndex: this.$route.query.checkIndex
        ? this.$route.query.checkIndex
        : "1",
      teamid: "",
      name: "",
      stepImgs: {
        PROGRESS: require("@/assets/images/base/ing.png"),
        PAUSE: require("@/assets/images/base/end.png"),
      },
      team_status: "",
    };
  },
  created() {
    // this.teamid = '191014135135001';
    // 191015094822001
    this.activeIndex = null;
    this.init();
    this.activeIndex = "1";
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      let teamInfo = this.$route.query;
      this.team_status = this.$route.query.team_status;
      console.log(this.team_status);
      this.teamid = teamInfo.id;
      this.name = teamInfo.name;
      // 判断是否带缓存参数
    },
    handleClick(val) {
      this.activeIndex = val.name;
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/business/teamDetail" });
    },
    getname(name) {
      this.name = name;
      localStorage.setItem("teamName", name);
    },
  },
  components: {
    baseInfo,
    soundeDetail,
    resetPayList,
    resetPayListSchool,
    forecastName,
    signupList,
    classSeting,
  },
};
</script>
<style lang="scss" scoped>
.m-container {
  .m-core {
    .msg.ing {
      color: #14928a;
    }
    .msg {
      text-align: right;
      color: #777;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      right: 40px;
      top: -33px;
      img {
        width: 36px;
        height: 36px;
        position: relative;
        top: 5px;
        margin-right: 8px;
      }
    }
    .abs {
      position: absolute;
      right: 240px;
      top: -28px;
    }
  }
  .term {
    height: 32px;
    line-height: 32px;
    border-radius: 24px;
    width: 100px;
    color: #14928a;
    border: 1px solid rgba(20, 146, 138, 1);
    font-size: 14px;
    text-align: center;
    margin-right: 12px;
    &:nth-child(1) {
      margin-left: 47px;
    }
  }
  .term.active {
    color: #fff;
    background-color: #14928a;
  }
}
</style>
<style lang='scss'>
</style>