添加搜索功能

src/containers/center/center.vue

@@ -24,6 +24,9 @@ export default {
   computed: {
   	...mapGetters("user", ["userInfo"])
   },
+  created(){
+    this.loadAllPromise()
+  },
   beforeMount(){
     console.log("enter", this.userInfo )
     if( !this.userInfo || !this.userInfo.token){
@@ -33,7 +36,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions("user", ["loadBaseInfo", "doLogout"]),
+    ...mapActions("user", ["loadBaseInfo", "doLogout", "loadAllPromise"]),
     handleCommand(command) {
       if (command == "exit") {
         this.doLogout().then( res=>{

src/containers/center/market/index.css

@@ -21,10 +21,28 @@
   padding: 4px 40px 4px 40px;
   border: 1px solid #EBEEF5;
   text-align: center;
+}
 
+.filterName{
+  margin-left: 20px;
+  height: 34px;
+  width: 220px;
+  margin-top: 4px;
 }
 
 .nav-btn-years:hover{
   background: none;
   color: #5a9fd9;
 }
+
+.type_item{
+    min-width: 160px;
+    height: 36px;
+    margin: 4px;
+    padding: 4 4px;
+}
+.type_active{
+    color: white !important;
+    background-color: #5a9fd9 !important;
+    transform: translate(2px);
+}

src/containers/center/market/index.vue

@@ -27,9 +27,15 @@
       </div>
 
       <el-row class="pt-line mt20">
-        <el-col :span="6" v-for="item in typeList"  :key="item.id" v-if="item.isOpen && !item.isNew && !item.link">
-          <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
+        <el-col span="6">
+          <el-button :class="{type_active : type==''}" class="type_item" type="text" @click="type=''">所有</el-button>
         </el-col>
+
+        <el-col span="6" v-for="item in typeList"  :key="item.id" v-if="item.isOpen && item.isNew==0 && !item.link">
+          <el-button :class="{type_active:item.name==type }" class="type_item" type="text" @click="type=item.name">{{item.name}} </el-button>
+        </el-col>
+
+
       </el-row>
       <div class="mt10" v-if="type=='施工现场专业人员'">
         <p style="color: red;font-size: 16px;">
@@ -61,6 +67,12 @@
         <li v-for="item in ndList" style="float: left;">
           <span :class="{active:item==nd }" class="nav-btn-years" @click="nd=item">{{item}} </span>
         </li>
+        <li style="float: left;">
+          <input type="text" style="line-height: 1;padding: 10px"
+            v-model="filterName"
+            class="ui-ipt ng-pristine ng-valid filterName"
+            placeholder="输入名字查找">
+        </li>
       </ul>
 
       <ul class="m-course-list clear mt10 classlist">
@@ -293,6 +305,7 @@
         showTip: false,
         width: "",
         type: '',
+        filterName:'',
         list: [],
         nd: new Date().getFullYear()+'',
         ndList:[],
@@ -315,7 +328,6 @@
           list:[]
         },
         promise:{status:0,showType:1},
-        promiseList: [],
         imgUrl: '',
         qrcodeUrl: "",
         outTradeNo: "",
@@ -372,7 +384,7 @@
       };
     },
     computed: {
-      ...mapGetters("user", ["typeList", "userInfo"])
+      ...mapGetters("user", ["typeList", "userInfo", "promiseList"])
     },
     components: {
       DoUpload
@@ -382,13 +394,6 @@
         return parseTime(val, '{y}-{m}-{d}')
       }
     },
-    created(){
-      // 获取所有承诺书
-      httpServer("course.GetAllCoursePromise", {}).then((res) => {
-        if (res.code != 200) return;
-        this.promiseList = res.data.list;
-      });
-    },
     watch: {
       type(val) {
         this.page = 1
@@ -398,27 +403,18 @@
       nd(val){
         this.filterData()
       },
+      filterName(){
+        this.filterData()
+      },
       isCommitment(val) {
         console.log(val)
       }
     },
     beforeMount() {
       this.type = this.$route.query.type||''
-      if( this.type ){
-        this.getData();
-      }
-    },
-    mounted(){
-      if (!this.type && this.typeList.length > 0) {
-        for( let i in this.typeList){
-          let item = this.typeList[i];
-          if(item.isOpen && !item.isNew ){
-            this.type = item.name;
-            break;
-          }
-        }
-      }
+      this.getData();
     },
+
     beforeDestroy() {
       if (this.timer) window.clearInterval(this.timer);
     },
@@ -454,13 +450,15 @@
         }
       },
       getData() {
-        if (!this.type) return;
-        // 匹配承诺书
+        let type = this.type||'';
         let param = {
           size: 100,
-          type: this.type,
+          type,
           from: 0
         }
+        if(type == ''){
+          param.trainType = 2
+        }
         httpServer("course.getcoursemarket", param).then((res) => {
           if (res.code == 200) {
             this.allList = res.data.list;
@@ -475,8 +473,9 @@
       },
       filterData(){
         let nd = this.nd;
+        let filterName = this.filterName;
         this.list = this.allList.filter( res=>{
-          return res.nd == nd;
+          return res.nd == nd && res.name.indexOf(filterName)>-1;
         })
       },
       cancelBuyCourse(){

src/containers/center/market/trainIndex.vue

@@ -27,10 +27,14 @@
       </div>
 
       <el-row class="pt-line mt20">
-        <el-col :span="6" v-for="item in typeList"  :key="item.id" v-if="item.isOpen && item.isNew==1">
-          <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
+        <el-col span="4">
+          <el-button :class="{type_active : type==''}" class="type_item" type="text" @click="type=''">所有</el-button>
+        </el-col>
+        <el-col span="4" v-for="item in typeList"  :key="item.id" v-if="item.isOpen && item.isNew==1">
+          <el-button :class="{type_active:item.name==type }" class="type_item" type="text" @click="type=item.name">{{item.name}} </el-button>
         </el-col>
       </el-row>
+
       <div class="mt10" v-if="type=='施工现场专业人员'">
         <p style="color: red;font-size: 16px;">
           报名对象为：2020年度及以后由培训单位核发的和2021年度换发的“电子培训合格证”且每年度需参加继续教育人员
@@ -48,9 +52,19 @@
         <li style="float: left;font-size: 16px;margin: 4px;padding: 4px;" >
             <span>课程年度:</span>
         </li>
+
         <li v-for="item in ndList" style="float: left;">
           <span :class="{active:item==nd }" class="nav-btn-years" @click="nd=item">{{item}} </span>
         </li>
+
+        <li style="float: left;">
+          <input type="text" style="line-height: 1;padding: 10px"
+            v-model="filterName"
+            class="ui-ipt ng-pristine ng-valid filterName"
+            placeholder="输入名字查找">
+        </li>
+
+
       </ul>
 
       <ul class="m-course-list clear mt10 classlist">
@@ -271,8 +285,8 @@
         type: '',
         list: [],
         promiseType:{1:'温馨提示', 2:'承诺书',  3:'委 托 书'},
-        promiseList:[],
         nd: new Date().getFullYear()+'',
+        filterName: '',
         ndList:[],
         allList:[],
         isCommitment: "",
@@ -348,7 +362,7 @@
       };
     },
     computed: {
-      ...mapGetters("user", ["typeList", "userInfo"])
+      ...mapGetters("user", ["typeList", "userInfo", "promiseList"])
     },
     components: {
       unLogin,
@@ -361,12 +375,14 @@
     },
     watch: {
       type(val) {
-        if( !val ) return;
         this.page = 1
         this.nd = new Date().getFullYear()+''
         this.getData()
       },
-      nd(val){
+      nd(){
+        this.filterData()
+      },
+      filterName(){
         this.filterData()
       },
       isCommitment(val) {
@@ -375,28 +391,7 @@
     },
     beforeMount() {
       this.type = this.$route.query.type||''
-      if( this.type ){
-        this.getData();
-      }
-    },
-    mounted(){
-      console.log( this.type, this.typeList)
-      if (!this.type && this.typeList.length > 0) {
-        for( let i in this.typeList){
-          let item = this.typeList[i];
-          if(item.isOpen && item.isNew ){
-            this.type = item.name;
-            break;
-          }
-        }
-      }
-    },
-    created(){
-      // 获取所有承诺书
-      httpServer("course.GetAllCoursePromise", {}).then((res) => {
-        if (res.code != 200) return;
-        this.promiseList = res.data.list;
-      });
+      this.getData();
     },
     beforeDestroy() {
       if (this.timer) window.clearInterval(this.timer);
@@ -419,12 +414,15 @@
         this.width = width + "px";
       },
       getData() {
-        if (!this.type) return;
+        let type = this.type || '';
         let param = {
           size: 100,
-          type: this.type,
+          type,
           from: 0
         }
+        if(type == ''){
+          param.trainType = 1
+        }
         httpServer("course.getcoursemarket", param).then((res) => {
           if (res.code == 200) {
             this.allList = res.data.list;
@@ -439,8 +437,9 @@
       },
       filterData(){
         let nd = this.nd;
+        let filterName = this.filterName;
         this.list = this.allList.filter( res=>{
-          return res.nd == nd;
+          return res.nd == nd && res.name.indexOf(filterName)>-1;
         })
       },
       cancelBuyCourse(){

src/store/module/user.js

@@ -13,6 +13,7 @@ export const user = {
     },
     notices: {},
     typeList: [],
+    promiseList: [],
     token: "",
   },
   mutations: {
@@ -23,6 +24,9 @@ export const user = {
     setNotice(state, courseId) {
       state.notices[courseId] = true;
     },
+    setPromiseList(state, list){
+      state.promiseList = list;
+    },
     setToken(state, token) {
       state.token = token
     },
@@ -63,6 +67,14 @@ export const user = {
       commit('setToken', res.data.token)
       return res.data
     },
+    async loadAllPromise({
+      commit,
+      router
+    }) {
+      let res = await httpServer("Course.GetAllCoursePromise", {})
+      commit('setPromiseList', res.data.list || [])
+      return true
+    },
     async loadTypeList({
       commit,
       router
@@ -71,6 +83,8 @@ export const user = {
       commit('setTypeList', res.data || [])
       return true
     },
+
+
     async saveBaseInfo({
       commit
     }, userInfo) {
@@ -111,6 +125,9 @@ export const user = {
     typeList(state) {
       return state.typeList
     },
+    promiseList(state){
+      return state.promiseList
+    },
     token(state) {
       return state.token
     },