新版模拟志愿

src/router/index.js

@@ -818,12 +818,17 @@ export const constantRoutes = [{
       },
       {
         path: '/zhiyuan/NewSimulatedVolunteer',
-        component: (resolve) => require(['@/views/career/zhiyuan/tips'], resolve),
+        component: (resolve) => require(['@/views/career/zhiyuan/NewSimulatedVolunteer'], resolve),
         redirect: '/zhiyuan/score',
         children: [{
           path: '/zhiyuan/score',
+          name:'输入高考成绩',
           component: (resolve) => require(['@/views/career/zhiyuan/score'], resolve)
-        }]
+        },{
+          path: '/zhiyuan/phase',
+          name:'选择填报批次',
+          component: (resolve) => require(['@/views/career/zhiyuan/phase'], resolve)
+        },]
       },
     ]
   }

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -1,6 +1,18 @@
 <template>
-  <div>
-    <div>定位、导航</div>
+  <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>
+      <ul class="zhiyuan-progress">
+        <li :class="{'active': step == $route.name}" v-for="step in steps">{{ step }}</li>
+      </ul>
+    </div>
     <router-view></router-view>
   </div>
 </template>
@@ -8,12 +20,52 @@
 export default {
   data() {
     return {
-
+      steps:[
+        '输入高考成绩','选择填报批次','选择院校专业','生成模拟志愿'
+      ]
     }
+  },
+  created() {
+    // console.log(this.$route)
   }
 }
 </script>
 
 <style scoped>
-
+.zhiyuan-wrapper{
+  padding: 20px 0;
+  margin: 30px auto;
+  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;
+}
+.zhiyuan-progress{
+  display: flex;
+  list-style: none;
+}
+.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;
+}
+.zhiyuan-progress  li.active {
+  color: #666;
+  border-top-color: #42b983;
+}
 </style>

src/views/career/zhiyuan/phase.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="phase">
+    <div class="pt40 pb40 fx-row jc-between">
+      <div class="left f14">
+        <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-primary">
+          <i class="el-icon-edit-outline"></i>
+          修改成绩
+        </a>
+      </div>
+    </div>
+    <el-button type="primary" >下一步</el-button>
+  </div>
+</template>
+<script>
+export default {
+  created() {
+    this.form = this.$route.query
+    console.log(this.$route.query)
+  },
+  data() {
+    return {
+      form:{}
+    }
+  }
+}
+</script>
+
+<style scoped>
+ .phase {
+  padding: 0 40px 0 100px;}
+ em{
+   font-weight: 400;
+   font-style: normal;
+ }
+</style>

src/views/career/zhiyuan/score.vue

@@ -1,18 +1,105 @@
 <template>
-  <div>
-    score
+  <div class="form">
+    <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>
+        </el-form-item>
+      <el-form-item label="您的首选科目" prop="firstSubject">
+        <el-radio-group v-model="form.firstSubject" >
+          <el-radio label="物理"></el-radio>
+          <el-radio label="历史"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="您的次选科目" prop="lastSubject">
+        <el-checkbox-group v-model="form.lastSubject" :max="2">
+          <el-checkbox label="化学" name="type"></el-checkbox>
+          <el-checkbox label="生物" name="type"></el-checkbox>
+          <el-checkbox label="政治" name="type"></el-checkbox>
+          <el-checkbox label="地理" name="type"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="您的位次">
+        <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>
 <script>
+
 export default {
   data() {
-    return {
+    var coustomValid = (rule, value, callback) => {
+      if (rule.field == 'score' &&  value > 750) {
+        return callback(new Error('成绩超出当前省份满分'));
+      }
 
+      if (rule.field == 'lastSubject' &&  value.length < 2) {
+        return callback(new Error('请选择两项次选科目'));
+      }
+      callback();
+    };
+    return {
+      form: {
+        score: '',
+        firstSubject: '',
+        lastSubject: []
+      },
+      list: [],
+      rules: {
+        score:  [
+          { required: true, message: '请输入你的总分', trigger: 'blur' },
+          { validator: coustomValid, trigger: 'blur'  }
+        ],
+        firstSubject: [
+          { required: true, message: '请选择首选科目', trigger: 'change' }
+        ],
+        lastSubject:[
+          { required: true, message: '请选择次选科目', trigger: 'change' },
+          { validator: coustomValid, trigger: 'change'  }
+        ]
+      }
+    }
+  },
+  methods: {
+    next() {
+      this.$refs.form.validate((valid) => {
+        console.log(valid)
+        if (valid) {
+          this.$router.push({ path:'/zhiyuan/phase', query:{...this.form} })
+          console.log('success submit!!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      })
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.form{
+  position: relative;
+  padding: 40px 280px 10px 280px;
+}
+.form {
+  ::v-deep {
+    .el-form-item__label {
+      padding-right: 25px;
+    }
+    .el-input {
+       width: 300px;
+     }
+  }
+}
+.btn{
+  width: 120px;
+  margin-left: 83px;
+  margin-top: 30px;
+}
 
 </style>

src/views/career/zhiyuan/tips.vue

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