更新

src/router/index.js

@@ -252,6 +252,14 @@ const live = [
     meta: { title: '直播大厅', subSite: true },
     component: () => import('../views/hall/direct.vue'),
   },
+
+  {
+    path: '/hall/productList/expertList',
+    name: 'productList_expertList',
+    meta: { title: '直播大厅', subSite: true },
+    component: () => import('../views/hall/productList/expertList.vue'),
+  },
+
   {
     path: '/hall/index',
     name: 'hall_index',

src/views/hall/direct.vue

@@ -237,6 +237,11 @@
                         </p>
                       </el-col>
                     </el-col>
+                    <el-col :span="24" class="onmore">
+                      <el-button type="primary" @click="$router.push({ path: '/hall/productList/expertList', query: { dockid: id, user_id: user_id } })"
+                        >更多</el-button
+                      ></el-col
+                    >
                   </el-col>
                 </el-tab-pane>
               </el-tabs>
@@ -596,7 +601,7 @@ export default {
     },
     //专家
     async searchzhanjia(newname) {
-      let res = await this.expertQuery({ skip: 0, limit: 10, name: newname, role: 6 });
+      let res = await this.expertQuery({ skip: 0, limit: 6, name: newname, role: 6 });
       if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
     },
     //tabs
@@ -1143,7 +1148,8 @@ export default {
     .twoList {
       box-shadow: 0 0 3px red;
       margin-bottom: 30px;
-      padding: 15px;
+      // padding: 15px;
+      padding: 6px;
       .image {
         border-radius: 90px;
         .el-image {

src/views/hall/productList/expertList.vue

@@ -1,22 +1,94 @@
 <template>
-  <div id="expertList">
-    <p>专家列表</p>
+  <div id="dockDetail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-image :src="beijingPic"></el-image>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="top">
+              <p>吉林省计算中心对接直播大厅</p>
+              <p>主办方：吉林省计算中心</p>
+            </el-col>
+            <el-col :span="24" class="main">
+              <el-col :span="24" class="mainTop">
+                <el-col :span="21" class="expert"
+                  ><div>专家数量:{{ total || 0 }}人</div></el-col
+                >
+                <el-col :span="3" class="back" @click.native="back">返回活动首页></el-col>
+              </el-col>
+              <el-col :span="24" class="maintitle"><el-col :span="2" class="title">全部</el-col></el-col>
+
+              <el-col :span="24">
+                <el-col :span="24" v-for="(item, index) in tableData" :key="index" class="list">
+                  <el-col :span="24"
+                    ><el-col :span="22">{{ item.name }}</el-col
+                    ><el-col :span="2"> <el-button type="primary" @click="zhuanjiaduijies(item)" size="mini">对接</el-button> </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+
+              <el-col :span="24">
+                <page v-bind="$attrs" position="center" :limit="limit" :total="total" @query="search"></page>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import _ from 'lodash';
+import page from '@/components/pagination.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
 export default {
-  name: 'expertList',
+  name: 'dockDetail',
   props: {},
-  components: {},
-  data: function() {
-    return {};
+  components: { page },
+  data: () => ({
+    beijingPic: require('@a/live/top_3.png'),
+    display: '1',
+    detailInfo: {},
+    scope: '123',
+    resume: '123',
+    dialogVisible: false,
+    tableData: [],
+    dialogTableVisible: false,
+    room: {},
+    limit: 10,
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...expertsuser({ expertQuery: 'query' }),
+
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.expertQuery({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `tableData`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    back() {
+      console.log(this.dockid);
+
+      this.$router.push({ path: '/hall/direct', query: { id: this.dockid } });
+    },
+    zhuanjiaduijies(item) {
+      console.log(item.id);
+      this.$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: item.id, dockid: this.dockid } });
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
+    dockid() {
+      return this.$route.query.dockid;
+    },
+
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -24,7 +96,113 @@ export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  // beforeDestroy() {
+  //   this.killTalk();
+  // },
+  beforeRouteLeave(to, from, next) {
+    // this.killTalk();
+    next();
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// .textOver{}
+// 	overflow: hidden;
+// 	text-overflow: ellipsis;
+// 	-webkit-line-clamp: 3;
+// 	word-break: break-all;
+// 	display: -webkit-box;
+//   -webkit-box-orient: vertical;
+//   }
+.style {
+  height: 100vh;
+}
+.style .info {
+  position: relative;
+  top: -450px;
+}
+.style .top {
+  position: relative;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 999;
+  height: 172px;
+  margin: 0 0 20px 0;
+}
+.style .top p:first-child {
+  font-size: 50px;
+  color: #fff;
+}
+.style .top p:last-child {
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  top: 135px;
+}
+.style .main {
+  min-height: 600px;
+  // border: 1px solid red;
+  background: #fff;
+  padding: 20px 20px;
+  .mainTop {
+    border-bottom: 10px solid #ccc;
+    margin-bottom: 20px;
+    .expert {
+      div {
+        background-color: red;
+        text-align: center;
+        color: #fff;
+        height: 40px;
+        width: 100px;
+        line-height: 40px;
+        // border-bottom: 10px solid #ccc;
+      }
+    }
+    .back {
+      height: 40px;
+      line-height: 40px;
+      float: right;
+      padding: 0 0 0px 37px;
+    }
+  }
+  .maintitle {
+    border-bottom: 1px #ccc solid;
+    .title {
+      height: 40px;
+      line-height: 40px;
+      width: 60px;
+      text-align: center;
+      border: 1px #f90 solid;
+      background: #f90;
+      color: #fff;
+      margin: 0 0 0 10px;
+    }
+  }
+  .list {
+    border-bottom: 1px #ccc dashed;
+    height: 50px;
+    line-height: 50px;
+    padding: 0 30px;
+    overflow: hidden;
+  }
+  .list:nth-child(2n) {
+    background: #f2f2f2;
+  }
+}
+</style>