侧边志愿表

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -21,12 +21,29 @@
       <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>
+    <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>
@@ -42,6 +59,8 @@ export default {
   },
   data() {
     return {
+      input:'',
+      show:false,
       topStep: [
         { index: 0, label: "高考分数",title:'(一)输入高考的成绩' },
         { index: 1, label: "填报批次",title:'(二)选择填报批次'  },
@@ -70,6 +89,9 @@ export default {
     this.$refs.score.init(this.form)
   },
   methods:{
+    toReport() {
+      this.$router.push('/career/VolunteerList')
+    },
     save() {
       console.log('保存志愿')
     },
@@ -179,4 +201,56 @@ export default {
   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>

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

@@ -21,7 +21,7 @@
           <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>
+              <el-checkbox @change="change('province',$event)"  v-model="isAll.province" >不限</el-checkbox>
             </div>
             <el-checkbox-group v-model="filter_form.provinces">
               <el-checkbox v-for="provinces in filters.locations" :label="provinces" :key="provinces">{{provinces}}</el-checkbox>
@@ -32,7 +32,7 @@
           <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>
+              <el-checkbox @change="change('major',$event)"  v-model="isAll.major" >不限</el-checkbox>
             </div>
             <el-radio-group v-model="filter_form.major">
               <el-radio v-for="major in filters.marjors" :label="major.value" :key="major.value">{{major.label}}</el-radio>
@@ -43,7 +43,7 @@
           <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>
+              <el-checkbox @change="change('type',$event)"  v-model="isAll.type" >不限</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>
@@ -54,7 +54,7 @@
           <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>
+              <el-checkbox @change="change('feature',$event)"  v-model="isAll.feature" >不限</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>
@@ -65,7 +65,7 @@
           <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>
+              <el-checkbox @change="change('pick',$event)"  v-model="isAll.pickType" >不限</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>
@@ -75,7 +75,7 @@
       </div>
     </div>
     <div class="zhiyuan-list">
-
+      <mx-table :propDefines="propDefines" :rows="rows"></mx-table>
     </div>
     <!--    <span @click="close">关闭</span>-->
   </div>
@@ -107,8 +107,28 @@ export default {
           {label: '保守型',value:'2'},
         ],
       },
-      major: '',
-      filters:{}
+      filters:{},
+      rows:[{}],
+      propDefines: {
+        name:{
+          label:'院校名称'
+        },
+        local:{
+          label:'所在地'
+        },
+        subject:{
+          label:'选科要求'
+        },
+        count:{
+          label:'招生人数'
+        },
+        year:{
+          label:'年份'
+        },
+        action:{
+          label:'填报'
+        }
+      }
     }
   },
   props: {
@@ -123,35 +143,18 @@ export default {
     }))
   },
   computed: {
-    typeIsAll:{
-      get() {
-        return !this.filter_form.type.length
-      },
-      set(){}
-    },
-    pickIsAll:{
-      get() {
-        return !this.filter_form.pickType
-      },
-      set(){}
-    },
-    featureIsAll:{
+    isAll: {
       get() {
-        return !this.filter_form.feature.length
-      },
-      set(){}
-    },
-    provinceIsAll:{
-      get() {
-        return !this.filter_form.provinces.length
-      },
-      set(){}
-    },
-    majorIsAll:{
-      get() {
-        return !this.filter_form.major
+        return {
+          type: !this.filter_form.type.length,
+          pickType: !this.filter_form.pickType,
+          feature: !this.filter_form.feature.length,
+          province: !this.filter_form.provinces.length,
+          major: !this.filter_form.major.length,
+        }
       },
-      set(){}
+      set() {
+      }
     }
   },
   methods:{
@@ -206,7 +209,9 @@ export default {
   display: flex;
   border-bottom: 1px solid #eee;
 }
-
+.filters .filter:last-child{
+  border-bottom: 0;
+}
 .zhiyuan-filter .filters .filter >>> .el-checkbox, .zhiyuan-filter .filters .filter >>> .el-radio {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;