模拟志愿

src/router/index.js

@@ -820,18 +820,20 @@ export const constantRoutes = [{
         path: '/zhiyuan/NewSimulatedVolunteer',
         component: (resolve) => require(['@/views/career/zhiyuan/NewSimulatedVolunteer'], resolve),
         redirect: '/zhiyuan/score',
-        children: [{
+        children: [
+          {
           path: '/zhiyuan/score',
-          name:'输入高考成绩',
+          name:'高考分数',
           component: (resolve) => require(['@/views/career/zhiyuan/components/score'], resolve)
-        },{
+          },
+          {
           path: '/zhiyuan/phase',
-          name:'选择填报批次',
+          name:'填报批次',
           component: (resolve) => require(['@/views/career/zhiyuan/components/phase'], resolve)
-        },
+          },
           {
             path: '/zhiyuan/recommend',
-            name:'选择院校专业',
+            name:'院校专业',
             component: (resolve) => require(['@/views/career/zhiyuan/components/recommend'], resolve)
           },]
       },

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -1,17 +1,27 @@
 <template>
   <div class="zhiyuan-wrapper">
     <div  class="bar">
-      <div class="zhiyuan-breadcrumb f14 f-666 fx-row jc-center ai-center">
-       <i class="el-icon-location"></i>
-        位置：
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item>模拟志愿</el-breadcrumb-item>
-        <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
-      </el-breadcrumb>
+      <!--  步骤条-->
+      <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>
-      <ul class="zhiyuan-progress">
-        <li :class="{'active': step == $route.name}" v-for="step in steps">{{ step }}</li>
-      </ul>
+<!--      <div class="zhiyuan-breadcrumb f14 f-666 fx-row jc-center ai-center">-->
+<!--       <i class="el-icon-location"></i>-->
+<!--        位置：-->
+<!--        <el-breadcrumb separator-class="el-icon-arrow-right">-->
+<!--        <el-breadcrumb-item>模拟志愿</el-breadcrumb-item>-->
+<!--        <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>-->
+<!--      </el-breadcrumb>-->
+<!--      </div>-->
+<!--      <ul class="zhiyuan-progress">-->
+<!--        <li :class="{'active': step == $route.name}" v-for="step in steps">{{ step }}</li>-->
+<!--      </ul>-->
     </div>
     <router-view></router-view>
   </div>
@@ -20,13 +30,25 @@
 export default {
   data() {
     return {
-      steps:[
-        '输入高考成绩','选择填报批次','选择院校专业','生成模拟志愿'
-      ]
+      topStep: [
+        { index: 0, label: "高考分数" },
+        { index: 1, label: "填报批次" },
+        { index: 2, label: "院校专业" },
+        { index: 3, label: "保存志愿" },
+      ],
+    }
+  },
+  computed: {
+    active() {
+      return {
+        name: this.$route.name,
+        index: this.topStep.findIndex(item => {
+          item.label == this.$route.name
+        }) + 1
+      }
     }
   },
   created() {
-    console.log(this.$route)
   }
 }
 </script>
@@ -38,34 +60,59 @@ export default {
   background-color: #fff;
 }
 .bar{
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: 0 100px 20px;
   border-bottom: 1px solid #d6d6d6;
 }
-.el-icon-location{
-  margin-right: 5px;
-  font-size: 16px;
-  color: #999;
+
+
+.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;
 }
-.zhiyuan-progress{
+.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;
-  list-style: none;
+  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;
 }
-.zhiyuan-progress  li {
-  padding: 3px 6px;
-  margin-right: 1px;
-  font-size: 12px;
-  color: #999;
-  border-top-width: 3px;
-  border-top-style: solid;
-  border-top-color: #e4e7ed;
+.step-number {
+  line-height: 48px;
+  text-align: center;
 }
-.zhiyuan-progress  li.active {
-  color: #666;
-  border-top-color: #42b983;
+.step-number.curindex {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  background: #6cd1b5;
+  border-radius: 50%;
+  color: #fff;
 }
 </style>

src/views/career/zhiyuan/components/recommend.vue

@@ -6,23 +6,49 @@
       <span class="mr20 f-primary">选科科目： <em class="f-primary">历史,生物,政治</em></span>
       <span class="mr20">总分：<em class="f-primary">750</em> </span>
       </p>
-    <div class="text-center mt20 mb20"><el-button type="primary">开始志愿选择</el-button></div>
+    <div class="text-center mt20 mb20"><el-button type="primary" @click="show =true">开始志愿选择</el-button></div>
+    <mx-table :prop-defines="propDefines" :rows="rows"></mx-table>
+    <select-volunteer  v-model="show"></select-volunteer>
   </div>
 </template>
 <script>
+import SelectVolunteer from './select-volunteer'
 export default {
+  components: {SelectVolunteer},
   created() {
     this.form = this.$route.query
   },
   data() {
     return {
-      form:{}
+      form:{},
+      show: false,
+      rows: [{},{},{},{},{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},],
+      propDefines: {
+        index: {
+          label: '',
+          type:'index'
+        },
+        volunteerGroup:{
+          label: '志愿组'
+        },
+        major:{
+          label: '专业'
+        },
+        obey:{
+          label: '是否服从其他专业',
+          width: '100px'
+        },
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+.recommend{
+  margin: 0 auto;
+  width: 80%;
+}
 p{
   background: #f3f3f3;
   padding-left: 20px;

src/views/career/zhiyuan/components/select-volunteer.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-dialog
+    :visible.sync="show"
+    width="80%"
+    :close-on-click-modal="false"
+     :before-close="close"
+  >
+
+    <div class="zhiyuan-filter">
+      <div class="header">
+        <h3 class="f-666">您的选考科目为：历史,生物,政治， 请手动选择志愿</h3>
+      </div>
+      <div class="filters">
+        <div class="filter">
+          <div class="filter_name">热门城市：</div>
+          <div class="items fx-row">
+            <div class="no_limited">
+              <!--  no_limited 隐藏 选中框  -->
+              <el-checkbox @change="change('city',$event)"  v-model="cityIsAll" >不限</el-checkbox>
+            </div>
+            <el-checkbox-group v-model="filter_form.checkedCities">
+              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="filter">
+          <div class="filter_name">院校省份：</div>
+          <div class="items fx-row">
+            <div class="no_limited">
+              <el-checkbox @change="change('province',$event)"  v-model="provinceIsAll" >不限</el-checkbox>
+            </div>
+            <el-checkbox-group v-model="filter_form.provinces">
+              <el-checkbox v-for="city in provinces" :label="city" :key="city">{{city}}</el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="filter">
+          <div class="filter_name">专业类别：</div>
+          <div class="items fx-row">
+            <div class="no_limited">
+              <el-checkbox @change="change('major',$event)"  v-model="majorIsAll" >不限</el-checkbox>
+            </div>
+            <el-radio-group v-model="filter_form.major">
+              <el-radio v-for="city in majors" :label="city" :key="city">{{city}}</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="filter">
+          <div class="filter_name">意向专业：</div>
+          <div class="items">
+            <div>
+              <el-autocomplete class="inline-input mr10" v-model="major" placeholder="搜索意向专业"></el-autocomplete>
+              <el-button plain size="mini" icon="el-icon-add">添加</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="filter">
+          <div class="filter_name">更多筛选：</div>
+          <div class="items">
+            <div class="more">
+              <span >
+                <el-button plain size="mini">志愿梯度</el-button>
+              </span>
+              <span>
+                <el-button plain size="mini">院校类型</el-button>
+              </span><span>
+                <el-button plain size="mini">院校特色</el-button>
+              </span><span>
+                <el-button plain size="mini">办学类型</el-button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="filter">
+          <div class="filter_name">搜索专业：</div>
+          <div class="items">
+            <div>
+              <el-autocomplete class="inline-input mr10" v-model="major" placeholder="请输入专业名词或者专业关键词"></el-autocomplete>
+              <el-button plain size="mini" icon="el-icon-add">搜索</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="zhiyuan-list">
+
+    </div>
+<!--    <span @click="close">关闭</span>-->
+  </el-dialog>
+</template>
+<script>
+export default {
+  model:{
+    prop: 'show',
+    event: 'close'
+  },
+  props: {
+    show: { type: Boolean },
+  },
+  data() {
+    return {
+      cities:  ['北京', '上海', '深圳', '广州', '杭州', '南京', '武汉', '西安', '长沙', '重庆', '南充'],
+      provinces:['湖南','安徽','福建','沈阳','山东','山西','甘肃','广东','广西','重庆','上海','黑龙江','吉林','辽宁','西藏','新疆'],
+      majors: ['哲学','经济学','法学','教育学','文学','历史学','理学','工学','农学','医学','管理学','艺术学'],
+      filter_form: {
+        checkedCities:[],
+        provinces: [],
+        major: ''
+      },
+      major: ''
+    }
+  },
+  computed: {
+    cityIsAll:{
+      get() {
+        return !this.filter_form.checkedCities.length
+      },
+      set(){}
+    },
+    provinceIsAll:{
+      get() {
+        return !this.filter_form.provinces.length
+      },
+      set(){}
+    },
+    majorIsAll:{
+      get() {
+        return !this.filter_form.major
+      },
+      set(){}
+    }
+  },
+  methods:{
+    close(){
+      this.$emit('close',false);
+    },
+    change(val,$event) {
+      if($event) {
+        if(val == 'city') {
+          this.filter_form.checkedCities = []
+        }
+        if(val == 'province') {
+          this.filter_form.provinces = []
+        }
+        if(val == 'major') {
+          this.filter_form.major = ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.more span {
+  margin-right: 10px;
+}
+.filters{
+  padding: 0 20px;
+  border: 1px solid #eee;
+}
+.filter_name{
+   box-sizing: border-box;
+   width: 70px;
+   line-height: 20px;
+   flex: none;
+   padding: 6px 0 6px 0;
+   margin-right: 10px;
+ }
+.zhiyuan-filter .filters .filter .items .no_limited{
+  margin-right: 10px;
+}
+.zhiyuan-filter .filters .filter .items .no_limited >>> .el-checkbox__input {
+  display: none;
+}
+.filters .filter{
+  padding: 10px  0;
+  display: flex;
+  border-bottom: 1px solid #eee;
+}
+
+.zhiyuan-filter .filters .filter >>> .el-checkbox, .zhiyuan-filter .filters .filter >>> .el-radio {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 32px;
+  padding: 8px 8px;
+  margin: 0;
+}
+>>>  .el-input--medium .el-input__inner{
+  height: 30px;
+  line-height: 30px;
+}
+>>> .el-input{
+  width: 260px;
+}
+</style>