1

src/router/index.js

@@ -98,6 +98,12 @@ const live = [
     meta: { title: '直播大厅-参展专家', subSite: true },
     component: () => import('../views/achieveLive/expert/index.vue'),
   },
+  {
+    path: '/achieveLive/expert/detail',
+    name: 'achieveLive_detail',
+    meta: { title: '直播大厅-对接专家', subSite: true },
+    component: () => import('../views/achieveLive/expert/detail.vue'),
+  },
   {
     path: '/achieveLive/product/index',
     name: 'achieveLive_product',

src/views/achieveLive/detail/expertData.vue

@@ -18,8 +18,8 @@
                   <p class="textOver">{{ item.zwzc }}</p>
                   <p class="textOver">{{ item.company }}</p>
                   <p>
-                    <el-button type="primary" size="mini">详情</el-button>
-                    <el-button type="success" size="mini">对接</el-button>
+                    <el-button type="primary" size="mini" @click="detailBtn(item)">详情</el-button>
+                    <el-button type="success" size="mini" @click="transBtn(item)">对接</el-button>
                   </p>
                 </el-col>
               </el-col>
@@ -31,10 +31,14 @@
         </el-tabs>
       </el-col>
     </el-row>
+    <el-dialog title="专家信息" :visible.sync="dialog" width="60%" :before-close="handleClose">
+      <detailInfo :form="info" :showBtn="false"></detailInfo>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import detailInfo from '../expert/detailInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: expert } = createNamespacedHelpers('expert');
 export default {
@@ -43,7 +47,9 @@ export default {
   },
   name: 'expertData',
   props: {},
-  components: {},
+  components: {
+    detailInfo,
+  },
   data: function() {
     return {
       active: 'first',
@@ -51,6 +57,9 @@ export default {
       // 无头像
       img_url: require('@common/src/assets/live/d10_fbb1.png'),
       expertList: [],
+      // 专家详情
+      dialog: false,
+      info: {},
     };
   },
   async created() {
@@ -68,6 +77,19 @@ export default {
     moreBtn() {
       this.$router.push({ path: '/achieveLive/expert/index', query: { dock_id: this.id } });
     },
+    // 查看专家详情
+    detailBtn(data) {
+      this.$set(this, `info`, data);
+      this.dialog = true;
+    },
+    // 取消查看
+    handleClose() {
+      this.dialog = false;
+    },
+    // 对接
+    transBtn(data) {
+      this.$router.push({ path: '/achieveLive/expert/detail', query: { dock_id: this.id, id: data.user_id } });
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/achieveLive/expert/detail.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <subTop :liveInfo="liveInfo"></subTop>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="infoMess">
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini" @click="back">返回活动首页</el-button>
+              </el-col>
+              <el-col :span="24">
+                <detailInfo :form="info"></detailInfo>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import subTop from '../parts/subTop.vue';
+import detailInfo from '../expert/detailInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: expert } = createNamespacedHelpers('expert');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    subTop,
+    detailInfo,
+  },
+  data: function() {
+    return {
+      liveInfo: {},
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...dock(['fetch']),
+    ...expert({ expertFetch: 'fetch' }),
+    async search() {
+      if (this.dock_id) {
+        let res = await this.fetch(this.dock_id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `liveInfo`, res.data);
+        }
+        res = await this.expertFetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `info`, res.data);
+        }
+      }
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/achieveLive/detail', query: { id: this.dock_id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    dock_id() {
+      return this.$route.query.dock_id;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    position: absolute;
+    top: 70%;
+    padding: 0 0 15px 0;
+    .infoMess {
+      min-height: 630px;
+      box-shadow: 0 0 5px #ccc;
+      background-color: #fff;
+      padding: 20px;
+      .btn {
+        text-align: right;
+        margin: 0 0 10px 0;
+        height: 40px;
+        overflow: hidden;
+        border-bottom: 2px solid #666;
+      }
+    }
+  }
+}
+</style>

src/views/achieveLive/expert/detailInfo.vue

@@ -0,0 +1,192 @@
+<template>
+  <div id="detailInfo">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <el-col :span="6" class="left">
+              <el-image v-if="form.img_path != null || undefined" :src="form.img_path" style="width:100%;height:220px;"></el-image>
+              <el-image v-else :src="img_url" style="width:100%;height:220px;"></el-image>
+            </el-col>
+            <el-col :span="18" class="right">
+              <el-col :span="24" class="name textOver">
+                {{ form.name || '暂无' }}
+              </el-col>
+              <el-col :span="24">
+                <el-col :span="4" class="otherInfo textOver">
+                  工作单位
+                </el-col>
+                <el-col :span="20" class="otherInfo textOver">
+                  {{ form.company || '暂无' }}
+                </el-col>
+              </el-col>
+              <el-col :span="12">
+                <el-col :span="8" class="otherInfo textOver">
+                  毕业院校
+                </el-col>
+                <el-col :span="16" class="otherInfo textOver">
+                  {{ form.school || '暂无' }}
+                </el-col>
+              </el-col>
+              <el-col :span="12">
+                <el-col :span="8" class="otherInfo textOver">
+                  最高学历
+                </el-col>
+                <el-col :span="16" class="otherInfo textOver">
+                  {{ form.education || '暂无' }}
+                </el-col>
+              </el-col>
+              <el-col :span="12">
+                <el-col :span="8" class="otherInfo textOver">
+                  出生日期
+                </el-col>
+                <el-col :span="16" class="otherInfo textOver">
+                  {{ form.birthDate || '暂无' }}
+                </el-col>
+              </el-col>
+              <el-col :span="12">
+                <el-col :span="8" class="otherInfo textOver">
+                  职务职称
+                </el-col>
+                <el-col :span="16" class="otherInfo textOver">
+                  {{ form.zwzc || '暂无' }}
+                </el-col>
+              </el-col>
+              <el-col :span="12">
+                <el-col :span="8" class="otherInfo textOver">
+                  电子邮箱
+                </el-col>
+                <el-col :span="16" class="otherInfo textOver">
+                  {{ form.email || '暂无' }}
+                </el-col>
+              </el-col>
+              <el-col :span="12">
+                <el-col :span="8" class="otherInfo textOver">
+                  擅长领域
+                </el-col>
+                <el-col :span="16" class="otherInfo textOver">
+                  {{ form.expertise || '暂无' }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-col :span="24" class="downInfo">
+              <el-col :span="4" class="tit">
+                <h2>工作经历</h2>
+              </el-col>
+              <el-col :span="20" class="info">
+                {{ form.workexperience || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="downInfo">
+              <el-col :span="4" class="tit">
+                <h2>科研综述</h2>
+              </el-col>
+              <el-col :span="20" class="info">
+                {{ form.scientific || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="downInfo">
+              <el-col :span="4" class="tit">
+                <h2>承担项目</h2>
+              </el-col>
+              <el-col :span="20" class="info">
+                {{ form.undertakingproject || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="downInfo">
+              <el-col :span="4" class="tit">
+                <h2>科技奖励</h2>
+              </el-col>
+              <el-col :span="20" class="info">
+                {{ form.scienceaward || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="downInfo">
+              <el-col :span="4" class="tit">
+                <h2>社会任职</h2>
+              </el-col>
+              <el-col :span="20" class="info">
+                {{ form.social || '暂无' }}
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="btn" v-if="showBtn">
+          <el-button type="primary" size="mini">交流洽谈</el-button>
+          <el-button type="success" size="mini">供求对接</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detailInfo',
+  props: {
+    form: { type: Object },
+    showBtn: { type: Boolean, default: () => true },
+  },
+  components: {},
+  data: function() {
+    return {
+      img_url: require('@common/src/assets/live/d10_fbb1.png'),
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .top {
+      height: 230px;
+      overflow: hidden;
+      .right {
+        padding: 0 0 0 10px;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+          padding: 10px;
+          text-align: center;
+          border: 1px solid #ccc;
+        }
+        .otherInfo {
+          font-size: 16px;
+          padding: 10px;
+          border: 1px solid #ccc;
+        }
+      }
+    }
+    .down {
+      margin: 0 0 15px 0;
+      .downInfo {
+        border: 1px solid #ccc;
+        .tit {
+          height: 150px;
+          line-height: 150px;
+          text-align: center;
+          border-right: 1px solid #ccc;
+        }
+        .info {
+          font-size: 16px;
+          padding: 10px;
+          min-height: 150px;
+        }
+      }
+    }
+  }
+  .btn {
+    text-align: center;
+  }
+}
+</style>

src/views/achieveLive/expert/index.vue

@@ -83,7 +83,7 @@ export default {
     },
     // 对接
     toCheck({ data }) {
-      console.log(data);
+      this.$router.push({ path: '/achieveLive/expert/detail', query: { dock_id: this.dock_id, id: data.user_id } });
     },
     // 返回
     back() {

vue.config.js

@@ -33,12 +33,12 @@ module.exports = {
         target: 'http://free.liaoningdoupo.com',
       },
       '/api': {
-        target: 'http://192.168.1.118',
+        target: 'http://broadcast.waityou24.cn',
         changeOrigin: true,
         ws: true,
       },
       '/site': {
-        target: 'http://192.168.1.118',
+        target: 'http://broadcast.waityou24.cn',
         changeOrigin: true,
         ws: true,
       },