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>
      </div>
    </div>
    <div class="content">
      <score ref="score" :form="this.form" 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>
    </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: [],
        rank: ''
      },
      zytbBatchesList: [],
      currentStep: 0
    }
  },
  computed: {
    active() {
      return this.topStep.find(item => {
        return item.index == this.currentStep
      })
    }
  },
  methods: {
    toReport() {
      this.$router.push({ name: '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().then(() => 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].filter(i => i != '').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;
}


.mask {
  z-index: 2009;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  opacity: 0.5;
  margin: 0;
}

</style>