知识培训与科技人才服务平台

src/components/PlatformList/Tutors.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    ++{{fruitIpt}}
+    <div class="inner d-flex flex-wrap">
+      <div
+        :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
+        :key="index"
+        class="item-box"
+        v-for="(item, index) in list"
+      >
+        <p @click="detail(item.id)" class="font-24 my-3" style="cursor: pointer">{{ item.name }}</p>
+        <p
+          @click="detail(item.id)"
+          class="font-16"
+          style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
+        >编号：{{ item.identifier }}</p>
+        <p class="font-16 baseColor item-more">
+          <intention-model :btn-name="btnName" :type-data="getId(item.id)" style="cursor: pointer" />
+        </p>
+      </div>
+    </div>
+    <div class="inner">
+      <a-pagination
+        :current="current"
+        :page-size="pageSize"
+        :total="total"
+        @change="onShowSizeChange"
+        class="pagination"
+        show-less-items
+        show-quick-jumper
+        v-show="total > 12"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex';
+import { selTeacher } from 'config/api';
+import IntentionModel from '../Introduce/IntentionModel.vue';
+export default {
+  name: 'PlatformList',
+  components: { IntentionModel },
+  props: {
+    fruitIpt: { type: String, default: '' },
+    achList: { type: Array, default: () => [] },
+  },
+
+  data() {
+    return {
+      list: [],
+      current: 1,
+      pageSize: 12,
+      total: 0,
+      typeData: {
+        type: 2,
+        Id: '',
+      },
+      btnName: '技术需求',
+    };
+  },
+
+  created() {
+    this.getData();
+  },
+
+  methods: {
+    ...mapMutations('home', ['setAchId']),
+    // 改变单当前页数
+    onShowSizeChange(current, size) {
+      this.current = current;
+      this.getData();
+    },
+
+    /**
+     * 获取创业导师列表
+     * @param {string} pageNum 页码
+     * @param {string} pageSize 每页多少条
+     * @param {string} platform 所属平台(0-全部,1-创新平台,2-孵化平台,3-产业平台)
+     * @param {string} teacherId 导师id
+     * @param {string} teacherName 导师名字
+     * @param {Array} teacherType 导师分类
+     */
+    async getData() {
+      try {
+        const params = {
+          param: {
+            pageNum: this.current,
+            pageSize: 10,
+            platform: 2,
+            teacherName: this.fruitIpt,
+            teacherType: this.achList,
+          },
+        };
+        const res = await selTeacher(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.list = data.list;
+          this.total = parseInt(data.total);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 点击查看详情
+    detail(id) {
+      this.setAchId(id);
+      this.$router.push('/NewPlatform/AchDet');
+    },
+    getId(Id) {
+      return (this.typeData = {
+        type: 2,
+        Id,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.pagination {
+  margin: 40px 0;
+  text-align: right;
+}
+
+.item-box {
+  position: relative;
+  width: 20.5%;
+  background: #fff;
+  margin-right: 6%;
+  border-radius: 4px;
+  margin-bottom: 40px;
+  padding: 10px;
+  padding-bottom: 60px;
+}
+
+.margin-0 {
+  margin-right: 0% !important;
+}
+
+.item-more {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  text-align: right;
+  margin-bottom: 0 !important;
+  margin-top: 40px;
+}
+</style>

src/config/api.js

@@ -119,11 +119,14 @@ export const selProduct = params => axios.post(`${product}/selProduct`, params);
 // 查询 产品列表 详情
 export const selProductMes = params => axios.post(`${product}/selProductMes`, params);
 
-// 查询 创业导师
-export const selTeacher = () => axios.post(`${tutorRelated}/selTeacher`);
-
 // 入驻企业申请
 export const Settled = params => axios.post(`${greenvalley}/place/apply`, params);
 
 // 入驻企业名录查询
 export const searchEnt = params => axios.post(`${greenvalley}/place/searchFront`, params);
+
+// 查询 创业导师
+export const selTeacher = params => axios.post(`${tutorRelated}/selTeacher`, params);
+
+// 查询 导师分类
+export const selTutor = params => axios.post(`${tutorRelated}/selTutor`, params);

src/views/NewPlatform/Children/Develop.vue

@@ -4,30 +4,121 @@
     <div class="inner my-1">
       <bread-crumb :arr="arr" />
     </div>
-    <div class="dev-box">
+    <div>
-      <img src="~assets/build.png" />
+      <div class="search-background">
+        <div class="d-flex">
+          <div class="flex-3 flex-wrap">
+            <span class="ins-title">导师分类：</span>
+            <span
+              :class="item.isActive ? 'act-color' : ''"
+              :key="index"
+              @click="choose(index)"
+              class="ins-name"
+              v-for="(item, index) in list"
+            >{{ item.categoryName }}</span>
+          </div>
+          <div class="flex-1 align-center">
+            <a-input-search
+              @search="searchFruit"
+              class="item-search"
+              enter-button="搜索"
+              placeholder="搜索导师"
+              v-model="fruitIpt"
+            />
+          </div>
+        </div>
+      </div>
     </div>
+    <tutors :achList="achList" :fruitIpt="fruitIpt" ref="child" />
   </div>
 </template>
 
 <script>
 import SenNav from './components/SenNav.vue';
 import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
+import { mapMutations } from 'vuex';
+import { selTutor } from 'config/api';
+import Tutors from 'components/PlatformList/Tutors.vue';
+
 export default {
   name: 'Develop',
-  components: { SenNav, BreadCrumb },
+  components: { SenNav, BreadCrumb, Tutors },
   data() {
     return {
-      title: '创新服务',
+      title: '知识培训与科技人才服务平台',
       typeOfPlatform: '创新平台',
       arr: [
         { name: '创新平台', url: '/NewPlatform/NewCore' },
         { name: '创新资源平台', url: '/NewPlatform/News' },
-        { name: '创新服务', url: '' },
+        { name: '知识培训与科技人才服务平台', url: '' },
       ],
       list: [],
+      achList: [],
+      fruitIpt: '',
     };
   },
+
+  watch: {
+    fruitIpt(val) {
+      const obj = {
+        content: this.fruitIpt,
+        isBtn: 0,
+      };
+      this.setAchIpt(obj);
+    },
+  },
+
+  created() {
+    this.getType();
+  },
+
+  methods: {
+    ...mapMutations('home', ['setAchIpt']),
+    /**
+     * 获取导师分类
+     * @param {string} categoryName 分类名称
+     * @param {number} recStatus 分类状态
+     */
+    async getType() {
+      try {
+        const params = { param: { categoryName: '', recStatus: 0 } };
+        const res = await selTutor(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.list = data;
+          for (var i = 0; i < this.list.length; i++) {
+            this.list[i].isActive = false;
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    // 点击搜索
+    searchFruit() {
+      this.$refs.child.getData();
+    },
+
+    // 选中类型时触发
+    async choose(index) {
+      await this.setType(index);
+      await this.$refs.child.getData('teacherType', this.achList);
+    },
+
+    setType(index) {
+      const that = this;
+      that.achList = [];
+      const { list } = this;
+      list[index].isActive = !list[index].isActive;
+      this.list = [...list];
+      for (let i = 0; i < list.length; i++) {
+        if (list[i].isActive) {
+          this.achList.push(list[i].id);
+        }
+      }
+    },
+  },
 };
 </script>
 
@@ -36,11 +127,35 @@ export default {
   margin: 20px auto;
 }
 
-.dev-box {
+.search-background {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  height: auto;
+  padding: 0 20px;
+  width: 82%;
+  margin: 40px auto;
+  line-height: 44px;
+}
+
+.item-search {
   width: 100%;
+  height: 32px;
+}
+
+.ins-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.ins-name {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  padding: 0 10px;
+  cursor: pointer;
+}
 
-  img {
+.act-color {
-    width: 100%;
+  color: #13ACC4 !important;
-  }
 }
 </style>