更新

src/layout/market/exportDetails.vue

@@ -0,0 +1,219 @@
+<template>
+  <div id="exportDetails">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <el-image :src="beijing"></el-image>
+        </el-col>
+        <el-col :span="24" class="message">
+          <el-col :span="24" class="one">
+            <el-image :src="exportInfo.img_path"></el-image>
+            <p>
+              <span>{{ exportInfo.name }}</span>
+              <span>{{ exportInfo.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>{{ exportInfo.gender }}</span>
+                  </p>
+                  <p>
+                    <span>出生年月</span>
+                    <span>{{ exportInfo.birthday }}</span>
+                  </p>
+                  <p>
+                    <span>身份证号</span>
+                    <span>{{ exportInfo.cardnumber }}</span>
+                  </p>
+
+                  <p>
+                    <span>电话号码</span>
+                    <span>{{ exportInfo.phone }}</span>
+                  </p>
+                  <p>
+                    <span>毕业院校</span>
+                    <span>{{ exportInfo.school }}</span>
+                  </p>
+                  <p>
+                    <span>专业</span>
+                    <span>{{ exportInfo.major }}</span>
+                  </p>
+                  <p>
+                    <span>学历</span>
+                    <span>{{ exportInfo.xl }}</span>
+                  </p>
+                  <p>
+                    <span>学位</span>
+                    <span>{{ exportInfo.xw }}</span>
+                  </p>
+                  <p>
+                    <span>地址</span>
+                    <span>{{ exportInfo.addr }}</span>
+                  </p>
+                </el-col>
+              </van-tab>
+              <van-tab title="技术能力">
+                <el-col :span="24" class="basic">
+                  <p>
+                    <span>从事专业</span>
+                    <span>{{ exportInfo.professional }}</span>
+                  </p>
+                  <p>
+                    <span>职称名称</span>
+                    <span>{{ exportInfo.levelname }}</span>
+                  </p>
+                  <p>
+                    <span>职称级别</span>
+                    <span>{{ exportInfo.level }}</span>
+                  </p>
+                  <p>
+                    <span>职务</span>
+                    <span>{{ exportInfo.position }}</span>
+                  </p>
+                  <p>
+                    <span>项目</span>
+                    <span>{{ exportInfo.project }}</span>
+                  </p>
+                  <p>
+                    <span>学术成就</span>
+                    <span>{{ exportInfo.academic }}</span>
+                  </p>
+                  <p>
+                    <span>论文</span>
+                    <span>{{ exportInfo.paper }}</span>
+                  </p>
+                  <p>
+                    <span>备注</span>
+                    <span>{{ exportInfo.remark }}</span>
+                  </p>
+                </el-col>
+              </van-tab>
+              <van-tab title="个人简介">
+                <el-col :span="24" class="resume">
+                  <p>{{ exportInfo.resume }}</p>
+                </el-col>
+              </van-tab>
+            </van-tabs>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'exportDetails',
+  props: {
+    exportInfo: null,
+  },
+  components: {},
+  data: function() {
+    return {
+      beijing: require('@/assets/test1.jpg'),
+      active: '1',
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  background: #fff;
+  .top {
+    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/router/index.js

@@ -25,6 +25,14 @@ const routes = [
     meta: { title: '产品详情', isleftarrow: true },
     component: () => import('../views/market/prodDetail.vue'),
   },
+  // 科技超市-专家详情
+  {
+    path: '/market/exportDetail',
+    name: 'market_exportDetail',
+    meta: { title: '专家详情', isleftarrow: true },
+    component: () => import('../views/market/exportDetail.vue'),
+  },
+
   // 科技超市-发布产品
   {
     path: '/market/detail',

src/views/market/exportDetail.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="exportDetail">
+    <el-row>
+      <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="main">
+          <exportDetails :exportInfo="exportInfo"></exportDetails>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import exportDetails from '@/layout/market/exportDetails.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+export default {
+  name: 'exportDetail',
+  props: {},
+  components: {
+    NavBar,
+    exportDetails, //专家详情
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+    exportInfo: {},
+  }),
+  created() {
+    this.searchInfo();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  methods: {
+    ...expertsuser(['fetch']),
+    async searchInfo() {
+      if (this.id) {
+        const res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          res.data.phone = this.phoneNumFilter(res.data.phone);
+          res.data.cardnumber = this.cardnumberNumFilter(res.data.cardnumber);
+          this.$set(this, `exportInfo`, res.data);
+        }
+      }
+    },
+    phoneNumFilter(phone) {
+      let start = phone.slice(0, 3);
+      let end = phone.slice(-4);
+      return `${start}****${end}`;
+    },
+    cardnumberNumFilter(cardnumber) {
+      let start = cardnumber.slice(0, 4);
+      let end = cardnumber.slice(-3);
+      return `${start}****${end}`;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 600px;
+  background: #fff;
+}
+</style>

src/views/market/parts/expertList.vue

@@ -2,7 +2,13 @@
   <div id="expertList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+        <el-col
+          :span="24"
+          class="list"
+          @click.native="$router.push({ path: '/market/exportDetail', query: { id: item.id } })"
+          v-for="(item, index) in list"
+          :key="index"
+        >
           <el-col :span="4" class="left">
             <el-image :src="item.img_path"></el-image>
           </el-col>