front/src/views/career/zhiyuan/NewSimulatedVolunteer.vue

<template>
  <div class="zhiyuan-wrapper">
    <div  class="bar">
      <!--  步骤条-->
      <div class="step-list line">
        <div class="step-item right" v-for="(item, index) in topStep" :key="index">
          <div class="step-number" :class="active.name == item.label ? 'curindex' : ''" v-if="active.index < item.index">
            {{ item.index + 1 }}
          </div>
          <i v-else class="el-icon-check"></i>
          <div class="step-label">{{ item.label }}</div>
        </div>
      </div>
      <div>
        <h1 class="text-center f-primary" >{{active.title}}</h1>
<!--        <span>我的志愿表</span>-->
      </div>
    </div>
    <div class="content">
      <score ref="score" v-show="active.index == 0" ></score>
      <phase @onFillIn="onFillIn" v-if="active.index == 1" :list="zytbBatchesList" :formSubject="form"></phase>
      <recommend :batch="batch" v-if="active.index == 2" :formSubject="form"></recommend>
    </div>
    <div class="text-center mt15">
      <el-button plain  @click="toReport">查看记录</el-button>
      <el-button type="primary" @click="toBackPage"  :disabled="currentStep == 0">上一步</el-button>
      <el-button type="primary" @click="next" v-if="currentStep <= 1">下一步</el-button>
      <el-button type="primary" @click="save" v-if="currentStep > 1">保存志愿</el-button>
    </div>
    <div :class="{'active':show,'right_cart': true}">
      <div class="btn-wrap" @click="show = !show">
        当前志愿表
      </div>
      <transition name="content">
        <div class="content-wrap">
          <el-input class="input" v-model="input" placeholder="院校/专业搜索"></el-input>
          <div class="content">
            <div class="list"></div>
            <div class="btn">
              <el-button style="width: 100%;height: 30px"  type="primary">保存志愿表</el-button>
            </div>
          </div>
        </div>
      </transition>

    </div>
  </div>
</template>
<script>
import Score from './components/score'
import Phase from './components/phase'
import Recommend from './components/recommend'
import { zytbBatches } from '@/api/webApi/webQue'
export default {
  components:{
    Recommend,
    Phase,
    Score,
  },
  data() {
    return {
      input:'',
      show:false,
      topStep: [
        { index: 0, label: "高考分数",title:'(一)输入高考的成绩' },
        { index: 1, label: "填报批次",title:'(二)选择填报批次'  },
        { index: 2, label: "院校专业",title:'(三)选择院校专业'  },
        { index: 3, label: "保存志愿",title:'(四)我的志愿'  },
      ],
      batch:{},
      form: {
        score: '',
        firstSubject: '',
        lastSubject: []
      },
      zytbBatchesList: [],
      currentStep: 0
    }
  },
  computed: {
    active() {
      return  this.topStep.find(item => {
        return item.index == this.currentStep
      })
    },
  },
  mounted() {
    // 初始化
    this.$refs.score.init(this.form)
  },
  methods:{
    toReport() {
      this.$router.push('/career/VolunteerList')
    },
    save() {
      console.log('保存志愿')
    },
    onFillIn(item)  {
      console.log(item)
      this.batch = item
      this.currentStep = 2
    },
    next() {
      const currentActive = this.currentStep
      switch (currentActive) {
        case 0:
          this.submitScore()
          break;
        case 1:
          this.$message.warning('请点击批次按钮进行填写')
          break;
      }
    },
    submitScore() {
      this.$refs.score.validate(() => {
        // 成功下一步
        this.httpzytbBatches()
      })
    },
    toBackPage() {
      if (this.currentStep <= 0) {
        return;
      }
      this.currentStep --;
      // this.$refs.score.init(this.form)
    },
    httpzytbBatches() {
      const mode =  [this.form.firstSubject, ...this.form.lastSubject].toString()
      console.log(mode)
      zytbBatches({
        score: this.form.score,
        mode: mode,
      }).then((res) => {
        this.zytbBatchesList = res.rows;
        this.currentStep = 1
      });
    },
  }
}
</script>

<style scoped>
.zhiyuan-wrapper{
  padding: 20px 0;
  margin: 30px auto;
  background-color: #fff;
}
.bar{
  padding: 0 100px 20px;
  border-bottom: 1px solid #d6d6d6;
}


.step-list {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 50px;
}
.step-list.line::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  top: 50%;
  background: #6cd1b5;
  z-index: 0;
}
.step-item {
  position: relative;
  background: #fff;
  z-index: 2;
  border: 1px solid #6cd1b5;
  border-radius: 50%;
  color: #6cd1b5;
  width: 48px;
  height: 48px;
  line-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-label {
  font-weight: bolder;
  color: #555555;
  width: 100px;
  text-align: center;
  font-size: 14px;
  position: absolute;
  bottom: -40px;
}
.step-number {
  line-height: 48px;
  text-align: center;
}
.step-number.curindex {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: #6cd1b5;
  border-radius: 50%;
  color: #fff;
}
.right_cart{
  position: fixed;
  top: 50%;
  right: -320px;
  transform: translate(0%,-50%);
  transition: all 1s ease;
}
.active{
  right: 0;
}
.right_cart{
  display: flex;
  z-index: 9999;
}
.right_cart .btn-wrap{
  cursor: pointer;
  align-self: baseline;
  border-radius: 5px 0 0 5px;
  color: white;
  background: #42b983;
  width: 30px;
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
  padding: 7px;
}
.content-wrap{
  padding: 10px 0;
  background: #fff;
  width: 320px;
  min-height: 268px;
  display: flex;
  flex-direction: column;

  border: 1px solid #f2f2f2;
}
.content{
  height: 100%;
}

.content .list{
  min-height: 188px;
}
.content-wrap .input{
  padding: 0 15px;
}

.content-wrap .btn{
  width: 100% ;
  padding: 0 15px;
}

</style>