11

src/views/halltwo/detail.vue

@@ -132,7 +132,12 @@
                       <el-col :span="24" class="zj">
                         <el-col :span="12" class="zjInfo" v-for="(item, index) in expertList" :key="index">
                           <el-col :span="12" class="img">
-                            <el-image :src="item.expertimage" style="width:100%;height:100%"></el-image>
+                            <el-image :src="item.expertimage" style="width:100%;height:100%" v-if="item.expertimage"></el-image>
+                            <el-image v-else>
+                              <div slot="error" class="image-slot">
+                                <el-image :src="url7" style="width:100%;height:100%"></el-image>
+                              </div>
+                            </el-image>
                           </el-col>
                           <el-col :span="12" class="text">
                             <p class="name">{{ item.name }}</p>
@@ -252,6 +257,8 @@ export default {
       url4: require('@a/sy_08.png'),
       url5: require('@a/8.jpg'),
       url6: require('@a/10.png'),
+      url7: require('@a/live/222.png'),
+
       // 展會詳情
       dockInfo: {},
       activeName: 'first',

src/views/halltwo/expertxmcg.vue

@@ -44,7 +44,38 @@
         <el-col :span="24" class="three">
           <div class="w_1200">
             <el-col :span="24" class="threeinfo">
-              专家信息
+              <el-col :span="24" class="topInfo">
+                <el-col :span="12" class="topName">技术专家</el-col>
+                <el-col :span="12" class="topSite">
+                  <span>您当前的位置：</span><el-link href="/halltwo/directTwo" :underline="false" class="link">首页</el-link><span> > 技术专家</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="list">
+                <el-col :span="6" class="card" v-for="(item, index) in expertList2" :key="index">
+                  <el-link href="" :underline="false" class="linkCon">
+                    <el-image :src="item.expertimage" style="width: 100%; height: 100%" v-if="item.expertimage"></el-image>
+                    <el-image v-else>
+                      <div slot="error" class="image-slot">
+                        <el-image :src="url7" style="width:100%;height:100%"></el-image>
+                      </div>
+                    </el-image>
+                  </el-link>
+                  <div class="text">
+                    <p>{{ item.name }}</p>
+                    <p>对接</p>
+                  </div>
+                </el-col>
+              </el-col>
+              <el-col class="page1" :span="24">
+                <el-pagination
+                  @current-change="handleCurrentChange"
+                  :current-page="currentPage"
+                  layout="total, prev, pager, next, jumper"
+                  :total="total"
+                  :page-size="pageSize"
+                >
+                </el-pagination>
+              </el-col>
             </el-col>
           </div>
         </el-col>
@@ -83,6 +114,8 @@
 import liveFoot from '@/layout/live/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -96,10 +129,18 @@ export default {
     return {
       two1: require('@a/sy_04.png'),
       two2: require('@a/dock2.png'),
+      url7: require('@a/live/222.png'),
       // 展會詳情
       dockInfo: {},
       // 指导单位
       erweima: require('@a/二维码.jpg'),
+      //专家列表
+      expertList: [],
+      total: 0,
+      pageSize: 20,
+      currentPage: 1,
+      origin: [],
+      expertList2: [],
     };
   },
   async created() {
@@ -107,6 +148,7 @@ export default {
   },
   methods: {
     ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
+    ...expertsuser({ expertQuery: 'query', expertquery: 'expertquery' }),
     async searchInfo() {
       // 查询展会详情
       if (this.dock_id) {
@@ -115,6 +157,18 @@ export default {
           this.$set(this, `dockInfo`, res.data);
         }
       }
+      //查询专家列表{ skip, limit: 20 }
+      const res = await this.expertQuery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `expertList`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    searchPage(page = 1) {
+      this.$set(this, `expertList2`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
     },
   },
   computed: {
@@ -123,7 +177,16 @@ export default {
       return this.$route.query.dock_id;
     },
   },
-  watch: {},
+  watch: {
+    expertList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
 };
 </script>
 
@@ -249,17 +312,79 @@ export default {
     }
   }
   .three {
-    height: 860px;
+    // height: 1145px;
     overflow: hidden;
     position: relative;
     top: -50px;
     z-index: 999;
     .threeinfo {
-      height: 860px;
+      // height: 1145px;
       overflow: hidden;
       background-color: #fff;
       border: 1px solid red;
       padding: 30px;
+      .topInfo {
+        .topName {
+          font-family: '微软雅黑';
+          font-weight: 400;
+          font-size: 26px;
+        }
+        .topSite {
+          text-align: right;
+          font-size: 14px;
+          line-height: 35px;
+        }
+      }
+      .list {
+        margin-top: 40px;
+        height: 1035px;
+        overflow: hidden;
+        .card {
+          width: 23.5%;
+          margin: 0 2% 30px 0;
+          padding: 10px;
+          box-shadow: 0 0 5px rgba(127, 126, 126, 0.3);
+          .linkCon {
+            height: 160px;
+            overflow: hidden;
+            border-radius: 5px;
+            display: inline-block;
+            width: 130px;
+            // width: 140px;
+          }
+          .text {
+            width: 100px;
+            float: right;
+            height: 100px;
+            p:nth-child(1) {
+              font-size: 16px;
+              margin-top: 20px;
+            }
+            p:nth-child(2) {
+              margin: 20px 0 15px 0;
+              width: 60px;
+              line-height: 24px;
+              border: 1px solid #dddd;
+              text-align: center;
+              font-size: 14px;
+            }
+            p:nth-child(2):hover {
+              color: #777;
+              cursor: pointer;
+            }
+          }
+        }
+        .card:hover {
+          box-shadow: 0 0 5px rgba(33, 82, 203, 0.5);
+        }
+        .card:nth-child(4n) {
+          margin-right: 0px;
+        }
+      }
+      .page1 {
+        text-align: center;
+        margin: 20px 0px 40px 0px;
+      }
     }
   }
   .four {
@@ -289,4 +414,12 @@ export default {
   font-size: 14px;
   color: black;
 }
+/deep/.el-link.link {
+  color: black;
+  display: inline-block;
+  margin-top: -3px;
+}
+/deep/.el-link.link:hover {
+  color: #777;
+}
 </style>