专家智库

src/router/index.js

@@ -173,6 +173,12 @@ const routes = [
     meta: { title: '专家智库', isleftarrow: false },
     component: () => import('../viewTwo/expert/index.vue'),
   },
+  {
+    path: '/viewTwo/expert/detail',
+    name: 'expert',
+    meta: { title: '专家智库详情', isleftarrow: true },
+    component: () => import('../viewTwo/expert/detail.vue'),
+  },
   // 在线服务
   {
     path: '/viewTwo/service/index',

src/viewTwo/expert/detail.vue

@@ -0,0 +1,261 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="back"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="mainTop">
+            <el-image :src="beijing"></el-image>
+          </el-col>
+          <el-col :span="24" class="message">
+            <el-col :span="24" class="one">
+              <el-image v-if="info.expertimage != null || undefined" :src="info.expertimage"></el-image>
+              <el-image :src="expertimage" v-else></el-image>
+              <p>
+                <span>{{ info.name || '暂无' }}</span>
+                <span>{{ info.email || '暂无' }}</span>
+              </p>
+            </el-col>
+            <el-col :span="24" class="two">
+              <van-tabs v-model="active" type="card" animated>
+                <van-tab title="基本资料">
+                  <el-col :span="24" class="basic">
+                    <p>
+                      <span>工作单位</span>
+                      <span>{{ info.company || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>毕业院校</span>
+                      <span>{{ info.school || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>最高学历</span>
+                      <span>{{ info.education || '暂无' }}</span>
+                    </p>
+
+                    <p>
+                      <span>出生日期</span>
+                      <span>{{ info.birthDate || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>职务职称</span>
+                      <span>{{ info.zwzc || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>QQ/微信</span>
+                      <span>{{ getphone(info.qqwx) || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>电子邮箱</span>
+                      <span>{{ info.email || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>擅长领域</span>
+                      <span>{{ info.expertise || '暂无' }}</span>
+                    </p>
+                  </el-col>
+                </van-tab>
+                <van-tab title="工作经历">
+                  <el-col :span="24" class="resume">
+                    <p>{{ info.workexperience || '暂无' }}</p>
+                  </el-col>
+                </van-tab>
+                <van-tab title="技术能力">
+                  <el-col :span="24" class="basic">
+                    <p>
+                      <span>科研综述</span>
+                      <span>{{ info.scientific || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>承担项目</span>
+                      <span>{{ info.undertakingproject || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>科技奖励</span>
+                      <span>{{ info.scienceaward || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>社会任职</span>
+                      <span>{{ info.social || '暂无' }}</span>
+                    </p>
+                  </el-col>
+                </van-tab>
+              </van-tabs>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      beijing: require('@/assets/test1.jpg'),
+      expertimage: require('@/assets/222.png'),
+      active: '1',
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...exportuser(['fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, res.data);
+      }
+    },
+    back() {
+      this.$router.push({ path: '/viewTwo/expert/index' });
+    },
+    // 隐藏手机号
+    getphone(value) {
+      if (value == undefined) {
+        return '暂无';
+      } else {
+        if (value.length === 11 || value.length === 12) {
+          let start = value.slice(0, 4);
+          let end = value.slice(-3);
+          return `${start}****${end}`;
+        } else if (value.length === 20) {
+          let start = value.slice(0, 13);
+          let end = value.slice(-3);
+          return `${start}****${end}`;
+        } else {
+          return value;
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+  .mainTop {
+    height: 150px;
+    overflow: hidden;
+    .el-image {
+      height: 150px;
+      overflow: hidden;
+    }
+  }
+  .message {
+    position: relative;
+    top: -40px;
+    padding: 0 15px;
+    .one {
+      height: 80px;
+      height: 80px;
+      margin: 0 0 15px 0;
+
+      .el-image {
+        float: left;
+        width: 80px;
+        height: 80px;
+        border-radius: 90px;
+      }
+      p {
+        float: left;
+        width: 65%;
+        font-size: 18px;
+        padding: 0 15px;
+        span {
+          display: inline-block;
+          width: 100%;
+          padding: 9px 0px;
+        }
+      }
+    }
+    .two {
+      .basic {
+        font-size: 16px;
+        color: #000;
+        p {
+          padding: 0 10px;
+          min-height: 40px;
+          line-height: 40px;
+          border-bottom: 1px dashed #f6f6f6;
+          span:first-child {
+            display: inline-block;
+            width: 25%;
+            color: #cccccc;
+          }
+        }
+      }
+      .resume {
+        font-size: 16px;
+        padding: 10px;
+        p {
+          line-height: 30px;
+        }
+      }
+    }
+  }
+}
+/deep/.van-tabs--card > .van-tabs__wrap {
+  height: 40px;
+}
+/deep/.van-tabs__nav--card {
+  height: 40px;
+  border: 1px solid #ccc;
+  margin: 0;
+}
+/deep/.van-tabs__nav--card .van-tab {
+  color: #666;
+}
+/deep/.van-tabs__nav--card .van-tab.van-tab--active {
+  background: transparent;
+  color: #2c69fe;
+  font-weight: bold;
+}
+/deep/.van-tabs__nav--card .van-tab {
+  border-right: 1px solid #ccc;
+}
+</style>

src/viewTwo/expert/index.vue

@@ -1,32 +1,101 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <p>专家智库</p>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="search">
+            <van-search v-model="name" @search="search" placeholder="请输入信息标题" />
+          </el-col>
+          <el-col :span="24" class="data">
+            <list :list="list"></list>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import list from './parts/list.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    NavBar,
+    list,
+  },
   data: function() {
-    return {};
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      active: 0,
+      // 查询
+      name: '',
+      list: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...exportuser(['query']),
+    async search({ ...info } = {}) {
+      if (this.name) info.name = this.name;
+      let res = await this.query({ limit: 5, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   watch: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #f9fafc;
+  .top {
+    height: 45px;
+    overflow: hidden;
+  }
+  .down {
+    .search {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+      border-bottom: 1px dashed #ccc;
+    }
+    .data {
+      position: absolute;
+      width: 100%;
+      top: 100px;
+    }
+  }
+}
+</style>

src/viewTwo/expert/parts/list.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="tec">
+    <el-row>
+      <el-col :span="24" class="tec">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="6" class="image">
+            <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage" style="width: 100%"></el-image>
+            <el-image :src="expertimage" style="width: 100%" v-else></el-image>
+          </el-col>
+          <el-col :span="18" class="name">
+            <p class="textOver">{{ item.name || '暂无' }}</p>
+            <p class="textOver">{{ item.zwzc || '暂无' }}</p>
+            <p class="textOver">{{ item.company || '暂无' }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'tec',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      expertimage: require('@/assets/222.png'),
+    };
+  },
+  created() {},
+  methods: {
+    //详情
+    detailBtn(data) {
+      this.$router.push({ path: '/viewTwo/expert/detail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tec {
+  padding: 0 10px;
+  .list {
+    padding: 10px 0px;
+    border-bottom: 1px dashed #ccc;
+    .image {
+      .el-image {
+        border-radius: 50%;
+        height: 88px;
+      }
+    }
+    .name {
+      padding-left: 10px;
+      p {
+        color: #666;
+        font-size: 16px;
+        padding-top: 5px;
+      }
+      p:nth-child(1) {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>