新模拟志愿--过滤

src/router/index.js

@@ -817,25 +817,8 @@ export const constantRoutes = [{
         }
       },
       {
-        path: '/zhiyuan/NewSimulatedVolunteer',
+        path: '/zhiyuan/apply',
         component: (resolve) => require(['@/views/career/zhiyuan/NewSimulatedVolunteer'], resolve),
-        redirect: '/zhiyuan/score',
-        children: [
-          {
-          path: '/zhiyuan/score',
-          name:'高考分数',
-          component: (resolve) => require(['@/views/career/zhiyuan/components/score'], resolve)
-          },
-          {
-          path: '/zhiyuan/phase',
-          name:'填报批次',
-          component: (resolve) => require(['@/views/career/zhiyuan/components/phase'], resolve)
-          },
-          {
-            path: '/zhiyuan/recommend',
-            name:'院校专业',
-            component: (resolve) => require(['@/views/career/zhiyuan/components/recommend'], resolve)
-          },]
       },
     ]
   }

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -4,20 +4,42 @@
       <!--  步骤条-->
       <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">
+          <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>
-      <h1 class="text-center f-primary" >{{active.title}}</h1>
+      <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" :form="form"></phase>
+      <recommend :batch="batch" v-if="active.index == 2"></recommend>
+    </div>
+    <div class="text-center">
+      <el-button plain="">查看记录</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>
-    <router-view></router-view>
   </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 {
       topStep: [
@@ -26,22 +48,71 @@ export default {
         { index: 2, label: "院校专业",title:'(三)选择院校专业'  },
         { index: 3, label: "保存志愿",title:'(四)我的志愿'  },
       ],
+      batch:{},
+      form: {
+        score: '',
+        firstSubject: '',
+        lastSubject: []
+      },
+      zytbBatchesList: [],
+      currentStep: 0
     }
   },
   computed: {
     active() {
-      const curStep = this.topStep.find(item => {
-        return item.label == this.$route.name
+      return  this.topStep.find(item => {
+        return item.index == this.currentStep
       })
-      console.log(curStep)
-      return {
-        name: this.$route.name,
-        index:curStep.index + 1,
-        title: curStep.title
-      }
-    }
+    },
+  },
+  mounted() {
+    // 初始化
+    this.$refs.score.init(this.form)
   },
-  created() {
+  methods:{
+    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>

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

@@ -5,40 +5,40 @@
         <span class="mr20">您的预估高考成绩</span>
         <span class="mr20">选科科目：<em  class="f-primary">{{form.firstSubject }}<em v-for="item in form.lastSubject">,{{item}}</em> </em></span>
         <span class="mr20">总分：<em  class="f-primary">{{ form.score }}</em></span>
-        <a href="/zhiyuan/score" class="f-red">
-          <i class="el-icon-edit-outline"></i>
-          修改成绩
-        </a>
       </div>
     </div>
     <div class="recommend-wrap" >
-      <div class="fx-row jc-between recommend ai-center">
+      <div class="fx-row jc-between recommend ai-center" v-for="item in list">
         <div class="left">
-          <p class="mb15 f20 bold f-666">普通类院校本科批</p>
-          <p class="f12 ">2021年本科批控制线： <span class="f-primary">历史 466， 物理 434</span></p>
+          <p class="mb15 f20 bold f-666">{{ item.name }}</p>
+          <!--          <p class="f12 ">2021年本科批控制线： <span class="f-primary">历史 466， 物理 434</span></p>-->
+          <p class="f12 ">{{ item.tips}}</p>
         </div>
-        <el-button type="primary">开始</el-button>
-      </div>
-      <div class="fx-row jc-between recommend ai-center">
-        <div class="left">
-          <p class="mb15 f20 bold f-666">普通类院校高职专科批</p>
-          <p class="f12 ">2021年高职专科批控制线：<span class="f-primary">历史 200， 物理 200</span></p>
-        </div>
-        <el-button type="primary" @click="$router.push('/zhiyuan/recommend')">开始</el-button>
+        <el-button type="primary" @click="onFillIn(item)">开始填写</el-button>
+        <span v-if="item.recommand">重点推荐</span>
       </div>
     </div>
   </div>
 </template>
 <script>
 export default {
-  created() {
-    this.form = this.$route.query
-    console.log(this.$route.query)
+  props: {
+    form: {
+      type: Object,
+      default: {}
+    },
+    list: {type: Array,
+      default: []
+    }
   },
   data() {
     return {
-      form:{}
     }
+  },
+  methods:{
+    onFillIn(item) {
+      this.$emit("onFillIn", item);
+    },
   }
 }
 </script>
@@ -53,9 +53,18 @@ export default {
    font-style: normal;
  }
  .recommend{
+   position: relative;
    padding: 16px ;
    margin-bottom: 15px;
    background: #f1f1f1;
-
+ }
+ .recommend > span{
+   position: absolute;
+   top: 0px;
+   background: #42b983;
+   transform: translate(0, -50%);
+   padding: 4px;
+   font-size: 12px;
+   color: #fff;
  }
 </style>

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

@@ -1,22 +1,22 @@
 <template>
-  <div>
+  <div style="width: 80%; margin:0 auto">
     <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">-->
+<!--              &lt;!&ndash;  no_limited 隐藏 选中框  &ndash;&gt;-->
+<!--              <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">
@@ -24,7 +24,7 @@
               <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 v-for="provinces in filters.locations" :label="provinces" :key="provinces">{{provinces}}</el-checkbox>
             </el-checkbox-group>
           </div>
         </div>
@@ -35,43 +35,41 @@
               <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 v-for="major in filters.marjors" :label="major.value" :key="major.value">{{major.label}}</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 class="filter_name">院校类型：</div>
+          <div class="items fx-row">
+            <div class="no_limited">
+              <el-checkbox @change="change('type',$event)"  v-model="typeIsAll" >不限</el-checkbox>
             </div>
+            <el-checkbox-group v-model="filter_form.type">
+              <el-checkbox v-for="filter in filters.types" :label="filter" :key="filter">{{filter}}</el-checkbox>
+            </el-checkbox-group>
           </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 class="filter_name">院校特性：</div>
+          <div class="items fx-row">
+            <div class="no_limited">
+              <el-checkbox @change="change('feature',$event)"  v-model="featureIsAll" >不限</el-checkbox>
             </div>
+            <el-checkbox-group v-model="filter_form.feature">
+              <el-checkbox v-for="feature in localFilters.features" :label="feature.value" :key="feature.value">{{feature.label}}</el-checkbox>
+            </el-checkbox-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 class="filter_name">推荐类型：</div>
+          <div class="items fx-row">
+            <div class="no_limited">
+              <el-checkbox @change="change('pick',$event)"  v-model="pickIsAll" >不限</el-checkbox>
             </div>
+            <el-radio-group v-model="filter_form.pickType">
+              <el-radio v-for="pick in localFilters.picks" :label="pick.value" :key="pick.value">{{pick.label}}</el-radio>
+            </el-radio-group>
           </div>
         </div>
       </div>
@@ -83,24 +81,63 @@
   </div>
 </template>
 <script>
+import { zytbFilter } from '@/api/webApi/webQue'
+
 export default {
   data() {
     return {
-      cities:  ['北京', '上海', '深圳', '广州', '杭州', '南京', '武汉', '西安', '长沙', '重庆', '南充'],
-      provinces:['湖南','安徽','福建','沈阳','山东','山西','甘肃','广东','广西','重庆','上海','黑龙江','吉林','辽宁','西藏','新疆'],
-      majors: ['哲学','经济学','法学','教育学','文学','历史学','理学','工学','农学','医学','管理学','艺术学'],
       filter_form: {
-        checkedCities:[],
         provinces: [],
-        major: ''
+        major: '',
+        type:[],
+        feature:[],
+        pickType: ''
+      },
+      localFilters: {
+        features:[
+          {label: '一流大学建设高校',value:'ylxx'},
+          {label: '一流学科建设高校',value:'ylxk'},
+          {label: '研究生院',value:'yjsy'},
+          {label: '独立学院',value:'dlxy'},
+          {label: '民办高校',value:'mbgx'}
+        ],
+        picks:[
+          {label: '冲刺型',value:'0'},
+          {label: '稳妥型',value:'1'},
+          {label: '保守型',value:'2'},
+        ],
       },
-      major: ''
+      major: '',
+      filters:{}
+    }
+  },
+  props: {
+    batch: {
+      type: Object,
+      default:{}
     }
   },
+  created() {
+    this.$nextTick(_ => zytbFilter(this.batch.batch).then((res) => {
+      this.filters = res.data;
+    }))
+  },
   computed: {
-    cityIsAll:{
+    typeIsAll:{
       get() {
-        return !this.filter_form.checkedCities.length
+        return !this.filter_form.type.length
+      },
+      set(){}
+    },
+    pickIsAll:{
+      get() {
+        return !this.filter_form.pickType
+      },
+      set(){}
+    },
+    featureIsAll:{
+      get() {
+        return !this.filter_form.feature.length
       },
       set(){}
     },
@@ -120,15 +157,21 @@ export default {
   methods:{
     change(val,$event) {
       if($event) {
-        if(val == 'city') {
-          this.filter_form.checkedCities = []
+        if(val == 'type') {
+          this.filter_form.type = []
         }
         if(val == 'province') {
           this.filter_form.provinces = []
         }
+        if(val == 'feature') {
+          this.filter_form.feature = []
+        }
         if(val == 'major') {
           this.filter_form.major = ''
         }
+        if(val == 'pick') {
+          this.filter_form.pickType = ''
+        }
       }
     }
   }
@@ -146,6 +189,7 @@ export default {
 .filter_name{
   box-sizing: border-box;
   width: 70px;
+  font-size: 14px;
   line-height: 20px;
   flex: none;
   padding: 6px 0 6px 0;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="form">
+  <div class="form" v-if="initReady">
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="您的总分" prop="score">
           <el-input  v-model="form.score" placeholder="请输入分数"></el-input>
@@ -22,9 +22,6 @@
         <el-input   disabled placeholder="当前为估分模拟，不需填写位次"></el-input>
         <span class="f12 f-666 ml10">当前为估分模拟，不需填写排名</span>
       </el-form-item>
-      <el-form-item label="">
-        <el-button type="primary" class="btn" @click="next" >下一步</el-button>
-      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -43,12 +40,8 @@ export default {
       callback();
     };
     return {
-      form: {
-        score: '',
-        firstSubject: '',
-        lastSubject: []
-      },
-      list: [],
+      form: {},
+      initReady: false,
       rules: {
         score:  [
           { required: true, message: '请输入你的总分', trigger: 'blur' },
@@ -65,15 +58,17 @@ export default {
     }
   },
   methods: {
-    next() {
+    init(form) {
+      this.form = form
+      this.initReady = true
+    },
+    validate(cb) {
       this.$refs.form.validate((valid) => {
-        console.log(valid)
         if (valid) {
-          this.$router.push({ path:'/zhiyuan/phase', query:{...this.form} })
           console.log('success submit!!');
+          cb && cb()
         } else {
           console.log('error submit!!');
-          return false;
         }
       })
     }

src/views/career/zhiyuan/tips.vue

@@ -7,7 +7,7 @@
         {{ item }}
       </p>
     </div>
-    <p class="text-center">   <el-button @click="$router.push('/zhiyuan/NewSimulatedVolunteer')" type="primary">进入填报</el-button></p>
+    <p class="text-center">   <el-button @click="$router.push('/zhiyuan/apply')" type="primary">进入填报</el-button></p>
 
   </div>
 </template>