1

src/views/hallList/index.vue

@@ -55,4 +55,14 @@ export default {
     min-height: 600px;
   }
 }
+/deep/.el-tabs__item {
+  height: 50px;
+  line-height: 50px;
+  font-size: 18px;
+  font-weight: bold;
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  background-color: #409eff;
+  color: #fff;
+}
 </style>

src/views/hallList/parts/export copy.vue

@@ -0,0 +1,204 @@
+<template>
+  <div id="export">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <p>专家培训在线展会模板</p>
+            <p>主办方：吉林省计算中心</p>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="22" class="left" :offset="1">
+            <el-col :span="24" class="top">
+              <span style="color:#409eff">专家培训直播</span>
+              <span>直播</span>
+            </el-col>
+            <el-col :span="24" class="down">
+              视频播放框
+            </el-col>
+          </el-col>
+          <el-col :span="22" class="right" :offset="1">
+            <el-col :span="24" class="top">
+              公共聊天
+            </el-col>
+            <el-col :span="24" class="down">
+              <el-col :span="24" class="list">
+                <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
+                  <el-col :span="1" class="image">
+                    <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
+                  </el-col>
+                  <el-col :span="23" class="other">
+                    <el-col :span="24" class="otherone">
+                      <span>{{ item.name }}</span>
+                      <span>{{ item.date }}</span>
+                    </el-col>
+                    <el-col :span="24" class="othertwo">
+                      <p class="remark">{{ item.content }}</p>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="chat">
+                <el-col :span="21" class="input">
+                  <el-input v-model="text" placeholder="请输入聊天内容"></el-input>
+                </el-col>
+                <el-col :span="3" class="btn">
+                  <el-button type="primary" size="mini">发送</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'export',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 聊天列表 超过6个就有滚动条
+      chatList: [
+        { name: '顾红伟', date: '10:00', content: '信息内容' },
+        { name: '顾红伟', date: '10:00', content: '信息内容' },
+      ],
+      touxiang: require('@/assets/emotion/touxiang.png'),
+      // 发言内容
+      text: '',
+      per: require('@/assets/personal.jpg'),
+      // 招聘信息
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .top {
+      margin: 0 0 15px 0;
+      text-align: center;
+      p:nth-child(1) {
+        font-size: 40px;
+      }
+      p:nth-child(2) {
+        font-size: 18px;
+        padding: 15px 0;
+      }
+    }
+  }
+  .two {
+    margin: 0 0 15px 0;
+    text-align: center;
+    .left {
+      height: 600px;
+      overflow: hidden;
+      border: 5px solid #000;
+      background: #fff;
+      border-radius: 5px;
+      padding: 10px;
+      .top {
+        height: 30px;
+        line-height: 30px;
+        font-weight: bold;
+        font-size: 20px;
+        margin: 0 0 5px 0;
+      }
+      .down {
+        height: 535px;
+        background-color: #000;
+        color: #fff;
+      }
+    }
+    .right {
+      height: 560px;
+      margin-top: 30px;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+      overflow: hidden;
+      background: #f0ffff5f;
+      border-bottom: 1px solid #f1f1f1;
+      .top {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 10px;
+        font-weight: bold;
+        font-size: 18px;
+        color: #fff;
+        background-color: #409eff;
+      }
+      .down {
+        overflow: hidden;
+        padding: 0 0 0 10px;
+        .list {
+          height: 480px;
+          overflow-y: auto;
+          .chatList {
+            padding: 10px 0;
+            border-bottom: 1px dashed #409eff;
+            .image {
+              text-align: center;
+            }
+            .other {
+              .otherone {
+                text-align: left;
+                span:nth-child(1) {
+                  color: #000;
+                  font-size: 16px;
+                  font-weight: bold;
+                }
+                span:nth-child(2) {
+                  display: inline-block;
+                  margin: 0 0 0 15px;
+                  color: #ccc;
+                }
+              }
+              .othertwo {
+                margin: 5px 0 0 0;
+                color: #000;
+                .remark {
+                  min-height: 20px;
+                  font-size: 15px;
+                  padding: 5px;
+                  border-radius: 5px;
+                  background: #cccccc5f;
+                }
+              }
+            }
+          }
+        }
+        .chat {
+          height: 40px;
+          .input {
+            /deep/.el-input__inner {
+              height: 35px;
+              line-height: 35px;
+            }
+          }
+          .btn {
+            /deep/.el-button--mini,
+            .el-button--mini.is-round {
+              padding: 10px 15px;
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/hallList/parts/export.vue

@@ -1,82 +1,85 @@
 <template>
   <div id="export">
     <el-row>
-      <el-col :span="24" class="main">
-        <el-col :span="24" class="one">
-          <el-col :span="24" class="top">
-            <p>专家培训在线展会模板</p>
-            <p>主办方：吉林省计算中心</p>
-          </el-col>
-        </el-col>
-        <el-col :span="24" class="two">
-          <el-col :span="22" class="left" :offset="1">
-            <el-col :span="24" class="top">
-              <span style="color:#409eff">专家培训直播</span>
-              <span>直播</span>
-            </el-col>
-            <el-col :span="24" class="down">
-              视频播放框
-            </el-col>
-          </el-col>
-          <el-col :span="22" class="right" :offset="1">
-            <el-col :span="24" class="top">
-              公共聊天
-            </el-col>
-            <el-col :span="24" class="down">
-              <el-col :span="24" class="list">
-                <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
-                  <el-col :span="1" class="image">
-                    <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
-                  </el-col>
-                  <el-col :span="23" class="other">
-                    <el-col :span="24" class="otherone">
-                      <span>{{ item.name }}</span>
-                      <span>{{ item.date }}</span>
-                    </el-col>
-                    <el-col :span="24" class="othertwo">
-                      <p class="remark">{{ item.content }}</p>
-                    </el-col>
-                  </el-col>
-                </el-col>
-              </el-col>
-              <el-col :span="24" class="chat">
-                <el-col :span="21" class="input">
-                  <el-input v-model="text" placeholder="请输入聊天内容"></el-input>
-                </el-col>
-                <el-col :span="3" class="btn">
-                  <el-button type="primary" size="mini">发送</el-button>
-                </el-col>
-              </el-col>
-            </el-col>
-          </el-col>
-        </el-col>
+      <el-col :span="24" class="product">
+        <!-- 是否支持多开 accordion -->
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item title="正在直播" name="1">
+            <exportlist :list="listNow" :total="nowTotal" status="1" @query="searchList"></exportlist>
+          </el-collapse-item>
+          <el-collapse-item title="下期预告" name="2">
+            <exportlist :list="listPre" :total="preTotal" status="0" @query="searchList"></exportlist>
+          </el-collapse-item>
+          <el-collapse-item title="往期直播" name="3">
+            <exportlist :list="listPast" :total="pastTotal" status="2" @query="searchList"></exportlist>
+          </el-collapse-item>
+        </el-collapse>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import _ from 'lodash';
+import exportlist from './exportlist.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
   name: 'export',
   props: {},
-  components: {},
+  components: {
+    exportlist,
+  },
   data: function() {
     return {
-      // 聊天列表 超过6个就有滚动条
-      chatList: [
-        { name: '顾红伟', date: '10:00', content: '信息内容' },
-        { name: '顾红伟', date: '10:00', content: '信息内容' },
+      activeName: '1',
+      // 下期预告
+      listPre: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '专家培训在线模板',
+        },
+      ],
+      preTotal: 0,
+      // 正在直播
+      listNow: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '专家培训在线模板',
+        },
+      ],
+      nowTotal: 0,
+      // 往期直播
+      listPast: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '专家培训在线模板',
+        },
       ],
-      touxiang: require('@/assets/emotion/touxiang.png'),
-      // 发言内容
-      text: '',
-      per: require('@/assets/personal.jpg'),
-      // 招聘信息
+      pastTotal: 0,
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.searchList({ status: '0' });
+    this.searchList({ status: '1' });
+    this.searchList({ status: '2' });
+  },
+  methods: {
+    ...dock({ dockQuery: 'query' }),
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {},
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -87,118 +90,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.main {
-  .one {
-    .top {
-      margin: 0 0 15px 0;
-      text-align: center;
-      p:nth-child(1) {
-        font-size: 40px;
-      }
-      p:nth-child(2) {
-        font-size: 18px;
-        padding: 15px 0;
-      }
-    }
-  }
-  .two {
-    margin: 0 0 15px 0;
-    text-align: center;
-    .left {
-      height: 600px;
-      overflow: hidden;
-      border: 5px solid #000;
-      background: #fff;
-      border-radius: 5px;
-      padding: 10px;
-      .top {
-        height: 30px;
-        line-height: 30px;
-        font-weight: bold;
-        font-size: 20px;
-        margin: 0 0 5px 0;
-      }
-      .down {
-        height: 535px;
-        background-color: #000;
-        color: #fff;
-      }
-    }
-    .right {
-      height: 560px;
-      margin-top: 30px;
-      border-top-left-radius: 5px;
-      border-bottom-left-radius: 5px;
-      overflow: hidden;
-      background: #f0ffff5f;
-      border-bottom: 1px solid #f1f1f1;
-      .top {
-        height: 40px;
-        line-height: 40px;
-        padding: 0 10px;
-        font-weight: bold;
-        font-size: 18px;
-        color: #fff;
-        background-color: #409eff;
-      }
-      .down {
-        overflow: hidden;
-        padding: 0 0 0 10px;
-        .list {
-          height: 480px;
-          overflow-y: auto;
-          .chatList {
-            padding: 10px 0;
-            border-bottom: 1px dashed #409eff;
-            .image {
-              text-align: center;
-            }
-            .other {
-              .otherone {
-                text-align: left;
-                span:nth-child(1) {
-                  color: #000;
-                  font-size: 16px;
-                  font-weight: bold;
-                }
-                span:nth-child(2) {
-                  display: inline-block;
-                  margin: 0 0 0 15px;
-                  color: #ccc;
-                }
-              }
-              .othertwo {
-                margin: 5px 0 0 0;
-                color: #000;
-                .remark {
-                  min-height: 20px;
-                  font-size: 15px;
-                  padding: 5px;
-                  border-radius: 5px;
-                  background: #cccccc5f;
-                }
-              }
-            }
-          }
-        }
-        .chat {
-          height: 40px;
-          .input {
-            /deep/.el-input__inner {
-              height: 35px;
-              line-height: 35px;
-            }
-          }
-          .btn {
-            /deep/.el-button--mini,
-            .el-button--mini.is-round {
-              padding: 10px 15px;
-              width: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
+/deep/.el-collapse-item__content {
+  padding-bottom: 0;
 }
 </style>

src/views/hallList/parts/exportlist.vue

@@ -0,0 +1,144 @@
+<template>
+  <div id="personallist">
+    <el-row>
+      <el-col :span="24" class="productlist">
+        <el-col :span="8" class="list" v-for="(item, index) in list" :key="index">
+          <el-image :src="hall" style="width:100%;height:200px;"></el-image>
+          <el-col :span="24" class="other">
+            <p class="textOver">{{ item.title }}</p>
+            <p class="textOver">
+              <span><i class="el-icon-location-outline"></i>{{ getprovince(item.province) }}-{{ getplace(item.place) }}</span>
+              <span><i class="el-icon-time"></i>{{ item.start_time }}-{{ item.end_time }}</span>
+            </p>
+            <p>
+              <el-button type="warning" size="mini" @click="dockBtn()" v-if="user.role == '3' || user.role == '7'">管理进入</el-button>
+              <el-button type="warning" size="mini" @click="linkBtn(item)" v-if="status == '1'">进入对接会</el-button>
+              <el-button type="warning" size="mini" @click="apply(item)" v-if="status == '0' && user.uid != undefined">申请对接会</el-button>
+              <el-button type="warning" size="mini" @click="check(item)" v-if="status == '2' && user.role == '3'">查看成果</el-button>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import page from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+export default {
+  name: 'personallist',
+  props: { list: { type: Array, default: () => [] }, status: { type: String, default: '0' } },
+  components: {},
+  data: () => {
+    return {
+      hall: require('@a/expert.jpg'),
+      // 省
+      province: [],
+      // 市
+      place: [],
+    };
+  },
+  created() {
+    this.searchplace();
+  },
+  methods: {
+    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
+    ...dock({ livefetch: 'fetch', livelist: 'query', livecreate: 'create', liveupdate: 'update' }),
+    // 过滤省
+    getprovince(item) {
+      let res = this.province.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    // 过滤市
+    getplace(item) {
+      let res = this.place.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    async searchplace() {
+      let res = await this.palcequery({ level: 1 });
+      let arr = await this.palcequery({ level: 2 });
+      if (res || arr) {
+        this.$set(this, `province`, res.data);
+        this.$set(this, `place`, arr.data);
+      }
+    },
+    // 管理进入
+    dockBtn() {
+      // if (this.user.uid) {
+      //   this.$router.push({ path: '/adminCenter/index', query: { num: '1' } });
+      // } else {
+      //   this.$router.push({ path: '/dockLogin' });
+      // }
+    },
+    // 进入对接会
+    async linkBtn(item) {
+      if (this.user.uid || this.user.suid) {
+        if (
+          this.user.role == '2' ||
+          this.user.role == '3' ||
+          this.user.role == '4' ||
+          this.user.role == '5' ||
+          this.user.role == '6' ||
+          this.user.role == '7' ||
+          this.user.role == '8'
+        ) {
+          this.$router.push({ path: '/hall/directBefore', query: { id: item.id } });
+        } else {
+          this.$router.push({ path: '/webLogin' });
+        }
+      } else {
+        this.$router.push({ path: '/webLogin' });
+      }
+    },
+    // 申请对接会
+    apply(item) {
+      // this.$router.push({ path: '/live/liveApply', query: { id: item.id } });
+    },
+    // 查看成果
+    check(item) {
+      // this.$router.push({ path: '/hallList/zongjie', query: { id: item.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.productlist {
+  .list {
+    position: relative;
+    width: 32%;
+    height: 310px;
+    border: 1px solid #ccc;
+    margin: 0 15px 10px 0;
+    .other {
+      p:nth-child(1) {
+        padding: 0 10px;
+        font-size: 16px;
+        font-weight: bold;
+      }
+      p:nth-child(2) {
+        padding: 5px;
+        span:nth-child(2) {
+          float: right;
+        }
+      }
+      p:nth-child(3) {
+        position: absolute;
+        width: 100%;
+        bottom: 5px;
+        text-align: center;
+      }
+    }
+  }
+  .list:nth-child(3n) {
+    width: 33%;
+    margin: 0 0 10px 0;
+  }
+}
+</style>

src/views/hallList/parts/personal copy.vue

@@ -0,0 +1,453 @@
+<template>
+  <div id="personal">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <p>人才招聘展会模板</p>
+            <p>主办方：吉林省计算中心</p>
+          </el-col>
+          <el-col :span="24" class="down">
+            <p v-for="(item, index) in numList" :key="index">
+              <span>{{ item.name }}</span>
+              <span>{{ item.num }}人</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="12" class="left">
+            <el-col :span="24" class="top">
+              <span style="color:#409eff">人才视频</span>
+              <span>直播</span>
+            </el-col>
+            <el-col :span="24" class="down">
+              视频播放框
+            </el-col>
+          </el-col>
+          <el-col :span="12" class="right">
+            <el-col :span="24" class="top">
+              公共聊天
+            </el-col>
+            <el-col :span="24" class="down">
+              <el-col :span="24" class="list">
+                <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
+                  <el-col :span="2" class="image">
+                    <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
+                  </el-col>
+                  <el-col :span="22" class="other">
+                    <el-col :span="24" class="otherone">
+                      <span>{{ item.name }}</span>
+                      <span>{{ item.date }}</span>
+                    </el-col>
+                    <el-col :span="24" class="othertwo">
+                      <p class="remark">{{ item.content }}</p>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="chat">
+                <el-col :span="21" class="input">
+                  <el-input v-model="text" placeholder="请输入聊天内容"></el-input>
+                </el-col>
+                <el-col :span="3" class="btn">
+                  <el-button type="primary" size="mini">发送</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="three">
+          <el-image :src="per"></el-image>
+        </el-col>
+        <el-col :span="24" class="four">
+          <el-tabs type="border-card">
+            <el-tab-pane label="招聘信息">
+              <el-col :span="24" class="fourone">
+                <el-col :span="24" class="zpxxList" v-for="(item, index) in zpxxList" :key="index">
+                  <el-col :span="16" class="name textOver">
+                    {{ item.name }}
+                  </el-col>
+                  <el-col :span="4" class="type textOver"> 类型：{{ item.type }} </el-col>
+                  <el-col :span="4" class="date textOver">
+                    {{ item.date }}
+                  </el-col>
+                  <el-col :span="24" class="content">
+                    {{ item.content }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+            <el-tab-pane label="正式岗位">
+              <el-col :span="24" class="fourtwo">
+                <el-col :span="12" class="zsgwList" v-for="(item, index) in zsgwList" :key="index">
+                  <el-col :span="20" class="name textOver">
+                    {{ item.name }}
+                  </el-col>
+                  <el-col :span="4" class="date textOver">
+                    {{ item.date }}
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <span class="textOver">需求人数：{{ item.num }}</span>
+                    <span class="textOver" style="color:#ff0000;">薪资：{{ item.xz }}</span>
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <span class="textOver">福利待遇：{{ item.fldy }}</span>
+                    <span class="textOver">职位诱惑：{{ item.zwyh }}</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+            <el-tab-pane label="实习岗位">
+              <el-col :span="24" class="fourthree">
+                <el-col :span="6" class="sxList" v-for="(item, index) in sxList" :key="index">
+                  <el-image :src="sx" class="image"></el-image>
+                  <el-col :span="24" class="name textOver">
+                    {{ item.name }}
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <span class="textOver"><i class="el-icon-coin"></i>{{ item.xz }}</span>
+                    <span class="textOver"><i class="el-icon-location"></i>{{ item.address }}</span>
+                  </el-col>
+                  <el-col :span="24" class="fldy textOver">
+                    <span>福利待遇：{{ item.fldy }}</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { zpxx } from '../js/zpxxList.js';
+import { zsgw } from '../js/zsgwList.js';
+import { sx } from '../js/sxList.js';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'personal',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      numList: [
+        { name: '同时在线', num: 1000 },
+        { name: '特邀嘉宾', num: 1000 },
+        { name: '洽谈合作', num: 1000 },
+        { name: '达成意向', num: 1000 },
+        { name: '对接成功', num: 1000 },
+        { name: '参展职位', num: 1000 },
+      ],
+      // 聊天列表
+      chatList: [
+        { name: '顾红伟', date: '10:00', content: '信息内容' },
+        { name: '顾红伟', date: '10:00', content: '信息内容' },
+      ],
+      touxiang: require('@/assets/emotion/touxiang.png'),
+      // 发言内容
+      text: '',
+      per: require('@/assets/personal.jpg'),
+      // 招聘信息
+      zpxxList: zpxx,
+      // 正式岗位
+      zsgwList: zsgw,
+      // 实习岗位
+      sx: require('@/assets/sx.png'),
+      sxList: sx,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .top {
+      margin: 0 0 15px 0;
+      text-align: center;
+      p:nth-child(1) {
+        font-size: 40px;
+      }
+      p:nth-child(2) {
+        font-size: 18px;
+        padding: 15px 0;
+      }
+    }
+    .down {
+      margin: 0 0 15px 0;
+      p {
+        float: left;
+        width: 16%;
+        background: #cccccc5f;
+        color: #000;
+        height: 50px;
+        line-height: 50px;
+        border-radius: 30px;
+        margin: 0 7px 0 0;
+        span:first-child {
+          display: inline-block;
+          width: 56%;
+          text-align: center;
+          height: 50px;
+          line-height: 50px;
+          font-size: 16px;
+          background: #76bdfe;
+          border-radius: 30px;
+          color: #fff;
+          font-weight: 700;
+        }
+        span:last-child {
+          display: inline-block;
+          width: 42%;
+          text-align: center;
+          font-size: 15px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  .two {
+    height: 450px;
+    margin: 0 0 15px 0;
+    .left {
+      height: 450px;
+      overflow: hidden;
+      border: 5px solid #000;
+      background: #fff;
+      border-radius: 5px;
+      padding: 10px;
+      .top {
+        height: 30px;
+        line-height: 30px;
+        font-weight: bold;
+        font-size: 20px;
+        margin: 0 0 5px 0;
+      }
+      .down {
+        height: 385px;
+        background-color: #000;
+        color: #fff;
+      }
+    }
+    .right {
+      height: 450px;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+      overflow: hidden;
+      background: #f0ffff5f;
+      border-bottom: 1px solid #f1f1f1;
+      .top {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 10px;
+        font-weight: bold;
+        font-size: 18px;
+        color: #fff;
+        background-color: #409eff;
+      }
+      .down {
+        height: 410px;
+        overflow: hidden;
+        padding: 0 0 0 10px;
+        .list {
+          height: 370px;
+          overflow-y: auto;
+          .chatList {
+            padding: 10px 0;
+            border-bottom: 1px dashed #409eff;
+            .image {
+              text-align: center;
+            }
+            .other {
+              .otherone {
+                span:nth-child(1) {
+                  color: #000;
+                  font-size: 16px;
+                  font-weight: bold;
+                }
+                span:nth-child(2) {
+                  display: inline-block;
+                  margin: 0 0 0 15px;
+                  color: #ccc;
+                }
+              }
+              .othertwo {
+                margin: 5px 0 0 0;
+                color: #000;
+                .remark {
+                  min-height: 20px;
+                  font-size: 15px;
+                  padding: 5px;
+                  border-radius: 5px;
+                  background: #cccccc5f;
+                }
+              }
+            }
+          }
+        }
+        .chat {
+          height: 40px;
+          .input {
+            /deep/.el-input__inner {
+              height: 35px;
+              line-height: 35px;
+            }
+          }
+          .btn {
+            /deep/.el-button--mini,
+            .el-button--mini.is-round {
+              padding: 10px 15px;
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+  .three {
+    height: 120px;
+    margin: 10px 0 15px 0;
+    .el-image {
+      width: 100%;
+      height: 120px;
+      border: 1px solid #f1f1f1;
+      box-shadow: 0 0 10px #f1f1f1;
+    }
+  }
+  .four {
+    height: 500px;
+    overflow: hidden;
+    .el-tabs {
+      height: 497px;
+      overflow: hidden;
+    }
+    .fourone {
+      height: 430px;
+      overflow: hidden;
+      .zpxxList {
+        border-bottom: 1px dashed #ccc;
+        margin: 0 0 10px 0;
+        height: 100px;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+          padding: 0 0 5px 0;
+        }
+        .type {
+          font-size: 16px;
+          padding: 0 0 5px 0;
+          text-align: left;
+        }
+        .date {
+          font-size: 16px;
+          padding: 0 0 5px 0;
+          text-align: right;
+        }
+        .content {
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          margin: 10px 0 0 0;
+        }
+      }
+      .zpxxList:hover {
+        cursor: pointer;
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+    .fourtwo {
+      height: 430px;
+      overflow: hidden;
+      .zsgwList {
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin: 0 0 5px 0;
+        height: 103px;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          text-align: right;
+          font-size: 16px;
+        }
+        .other {
+          padding: 2px 0 1px 0;
+          font-size: 16px;
+          span {
+            display: inline-block;
+            width: 50%;
+          }
+        }
+      }
+      .zsgwList:hover {
+        cursor: pointer;
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+    .fourthree {
+      .sxList {
+        padding: 15px;
+        margin: 0 15px 10px 0;
+        height: 212px;
+        width: 24%;
+        border-radius: 10px;
+        box-shadow: 0 0px 5px #ccc;
+        .image {
+          height: 100px;
+          padding: 0 60px;
+        }
+        .name {
+          font-size: 18px;
+          text-align: center;
+          font-weight: bold;
+          padding: 5px 0 0 0;
+        }
+        .other {
+          font-size: 16px;
+          text-align: center;
+          padding: 5px 0;
+          span {
+            display: inline-block;
+            margin: 0 10px;
+          }
+          span:nth-child(1) {
+            color: #ff0000;
+          }
+        }
+        .fldy {
+          font-size: 16px;
+          text-align: center;
+        }
+      }
+      .sxList:nth-child(4n) {
+        margin: 0 0 10px 0;
+      }
+      .sxList:hover {
+        cursor: pointer;
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/hallList/parts/personal.vue

@@ -1,165 +1,85 @@
 <template>
   <div id="personal">
     <el-row>
-      <el-col :span="24" class="main">
-        <el-col :span="24" class="one">
-          <el-col :span="24" class="top">
-            <p>人才招聘展会模板</p>
-            <p>主办方：吉林省计算中心</p>
-          </el-col>
-          <el-col :span="24" class="down">
-            <p v-for="(item, index) in numList" :key="index">
-              <span>{{ item.name }}</span>
-              <span>{{ item.num }}人</span>
-            </p>
-          </el-col>
-        </el-col>
-        <el-col :span="24" class="two">
-          <el-col :span="12" class="left">
-            <el-col :span="24" class="top">
-              <span style="color:#409eff">人才视频</span>
-              <span>直播</span>
-            </el-col>
-            <el-col :span="24" class="down">
-              视频播放框
-            </el-col>
-          </el-col>
-          <el-col :span="12" class="right">
-            <el-col :span="24" class="top">
-              公共聊天
-            </el-col>
-            <el-col :span="24" class="down">
-              <el-col :span="24" class="list">
-                <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
-                  <el-col :span="2" class="image">
-                    <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
-                  </el-col>
-                  <el-col :span="22" class="other">
-                    <el-col :span="24" class="otherone">
-                      <span>{{ item.name }}</span>
-                      <span>{{ item.date }}</span>
-                    </el-col>
-                    <el-col :span="24" class="othertwo">
-                      <p class="remark">{{ item.content }}</p>
-                    </el-col>
-                  </el-col>
-                </el-col>
-              </el-col>
-              <el-col :span="24" class="chat">
-                <el-col :span="21" class="input">
-                  <el-input v-model="text" placeholder="请输入聊天内容"></el-input>
-                </el-col>
-                <el-col :span="3" class="btn">
-                  <el-button type="primary" size="mini">发送</el-button>
-                </el-col>
-              </el-col>
-            </el-col>
-          </el-col>
-        </el-col>
-        <el-col :span="24" class="three">
-          <el-image :src="per"></el-image>
-        </el-col>
-        <el-col :span="24" class="four">
-          <el-tabs type="border-card">
-            <el-tab-pane label="招聘信息">
-              <el-col :span="24" class="fourone">
-                <el-col :span="24" class="zpxxList" v-for="(item, index) in zpxxList" :key="index">
-                  <el-col :span="16" class="name textOver">
-                    {{ item.name }}
-                  </el-col>
-                  <el-col :span="4" class="type textOver"> 类型：{{ item.type }} </el-col>
-                  <el-col :span="4" class="date textOver">
-                    {{ item.date }}
-                  </el-col>
-                  <el-col :span="24" class="content">
-                    {{ item.content }}
-                  </el-col>
-                </el-col>
-              </el-col>
-            </el-tab-pane>
-            <el-tab-pane label="正式岗位">
-              <el-col :span="24" class="fourtwo">
-                <el-col :span="12" class="zsgwList" v-for="(item, index) in zsgwList" :key="index">
-                  <el-col :span="20" class="name textOver">
-                    {{ item.name }}
-                  </el-col>
-                  <el-col :span="4" class="date textOver">
-                    {{ item.date }}
-                  </el-col>
-                  <el-col :span="24" class="other">
-                    <span class="textOver">需求人数：{{ item.num }}</span>
-                    <span class="textOver" style="color:#ff0000;">薪资：{{ item.xz }}</span>
-                  </el-col>
-                  <el-col :span="24" class="other">
-                    <span class="textOver">福利待遇：{{ item.fldy }}</span>
-                    <span class="textOver">职位诱惑：{{ item.zwyh }}</span>
-                  </el-col>
-                </el-col>
-              </el-col>
-            </el-tab-pane>
-            <el-tab-pane label="实习岗位">
-              <el-col :span="24" class="fourthree">
-                <el-col :span="6" class="sxList" v-for="(item, index) in sxList" :key="index">
-                  <el-image :src="sx" class="image"></el-image>
-                  <el-col :span="24" class="name textOver">
-                    {{ item.name }}
-                  </el-col>
-                  <el-col :span="24" class="other">
-                    <span class="textOver"><i class="el-icon-coin"></i>{{ item.xz }}</span>
-                    <span class="textOver"><i class="el-icon-location"></i>{{ item.address }}</span>
-                  </el-col>
-                  <el-col :span="24" class="fldy textOver">
-                    <span>福利待遇：{{ item.fldy }}</span>
-                  </el-col>
-                </el-col>
-              </el-col>
-            </el-tab-pane>
-          </el-tabs>
-        </el-col>
+      <el-col :span="24" class="product">
+        <!-- 是否支持多开 accordion -->
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item title="正在直播" name="1">
+            <personallist :list="listNow" :total="nowTotal" status="1" @query="searchList"></personallist>
+          </el-collapse-item>
+          <el-collapse-item title="下期预告" name="2">
+            <personallist :list="listPre" :total="preTotal" status="0" @query="searchList"></personallist>
+          </el-collapse-item>
+          <el-collapse-item title="往期直播" name="3">
+            <personallist :list="listPast" :total="pastTotal" status="2" @query="searchList"></personallist>
+          </el-collapse-item>
+        </el-collapse>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { zpxx } from '../js/zpxxList.js';
-import { zsgw } from '../js/zsgwList.js';
-import { sx } from '../js/sxList.js';
+import _ from 'lodash';
+import personallist from './personallist.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
   name: 'personal',
   props: {},
-  components: {},
+  components: {
+    personallist,
+  },
   data: function() {
     return {
-      numList: [
-        { name: '同时在线', num: 1000 },
-        { name: '特邀嘉宾', num: 1000 },
-        { name: '洽谈合作', num: 1000 },
-        { name: '达成意向', num: 1000 },
-        { name: '对接成功', num: 1000 },
-        { name: '参展职位', num: 1000 },
+      activeName: '1',
+      // 下期预告
+      listPre: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '人才招聘会模板',
+        },
+      ],
+      preTotal: 0,
+      // 正在直播
+      listNow: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '人才招聘会模板',
+        },
       ],
-      // 聊天列表
-      chatList: [
-        { name: '顾红伟', date: '10:00', content: '信息内容' },
-        { name: '顾红伟', date: '10:00', content: '信息内容' },
+      nowTotal: 0,
+      // 往期直播
+      listPast: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '人才招聘会模板',
+        },
       ],
-      touxiang: require('@/assets/emotion/touxiang.png'),
-      // 发言内容
-      text: '',
-      per: require('@/assets/personal.jpg'),
-      // 招聘信息
-      zpxxList: zpxx,
-      // 正式岗位
-      zsgwList: zsgw,
-      // 实习岗位
-      sx: require('@/assets/sx.png'),
-      sxList: sx,
+      pastTotal: 0,
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.searchList({ status: '0' });
+    this.searchList({ status: '1' });
+    this.searchList({ status: '2' });
+  },
+  methods: {
+    ...dock({ dockQuery: 'query' }),
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {},
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -170,284 +90,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.main {
-  .one {
-    .top {
-      margin: 0 0 15px 0;
-      text-align: center;
-      p:nth-child(1) {
-        font-size: 40px;
-      }
-      p:nth-child(2) {
-        font-size: 18px;
-        padding: 15px 0;
-      }
-    }
-    .down {
-      margin: 0 0 15px 0;
-      p {
-        float: left;
-        width: 16%;
-        background: #cccccc5f;
-        color: #000;
-        height: 50px;
-        line-height: 50px;
-        border-radius: 30px;
-        margin: 0 7px 0 0;
-        span:first-child {
-          display: inline-block;
-          width: 56%;
-          text-align: center;
-          height: 50px;
-          line-height: 50px;
-          font-size: 16px;
-          background: #76bdfe;
-          border-radius: 30px;
-          color: #fff;
-          font-weight: 700;
-        }
-        span:last-child {
-          display: inline-block;
-          width: 42%;
-          text-align: center;
-          font-size: 15px;
-          font-weight: 700;
-        }
-      }
-    }
-  }
-  .two {
-    height: 450px;
-    margin: 0 0 15px 0;
-    .left {
-      height: 450px;
-      overflow: hidden;
-      border: 5px solid #000;
-      background: #fff;
-      border-radius: 5px;
-      padding: 10px;
-      .top {
-        height: 30px;
-        line-height: 30px;
-        font-weight: bold;
-        font-size: 20px;
-        margin: 0 0 5px 0;
-      }
-      .down {
-        height: 385px;
-        background-color: #000;
-        color: #fff;
-      }
-    }
-    .right {
-      height: 450px;
-      border-top-left-radius: 5px;
-      border-bottom-left-radius: 5px;
-      overflow: hidden;
-      background: #f0ffff5f;
-      border-bottom: 1px solid #f1f1f1;
-      .top {
-        height: 40px;
-        line-height: 40px;
-        padding: 0 10px;
-        font-weight: bold;
-        font-size: 18px;
-        color: #fff;
-        background-color: #409eff;
-      }
-      .down {
-        height: 410px;
-        overflow: hidden;
-        padding: 0 0 0 10px;
-        .list {
-          height: 370px;
-          overflow-y: auto;
-          .chatList {
-            padding: 10px 0;
-            border-bottom: 1px dashed #409eff;
-            .image {
-              text-align: center;
-            }
-            .other {
-              .otherone {
-                span:nth-child(1) {
-                  color: #000;
-                  font-size: 16px;
-                  font-weight: bold;
-                }
-                span:nth-child(2) {
-                  display: inline-block;
-                  margin: 0 0 0 15px;
-                  color: #ccc;
-                }
-              }
-              .othertwo {
-                margin: 5px 0 0 0;
-                color: #000;
-                .remark {
-                  min-height: 20px;
-                  font-size: 15px;
-                  padding: 5px;
-                  border-radius: 5px;
-                  background: #cccccc5f;
-                }
-              }
-            }
-          }
-        }
-        .chat {
-          height: 40px;
-          .input {
-            /deep/.el-input__inner {
-              height: 35px;
-              line-height: 35px;
-            }
-          }
-          .btn {
-            /deep/.el-button--mini,
-            .el-button--mini.is-round {
-              padding: 10px 15px;
-              width: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-  .three {
-    height: 120px;
-    margin: 10px 0 15px 0;
-    .el-image {
-      width: 100%;
-      height: 120px;
-      border: 1px solid #f1f1f1;
-      box-shadow: 0 0 10px #f1f1f1;
-    }
-  }
-  .four {
-    height: 500px;
-    overflow: hidden;
-    .el-tabs {
-      height: 497px;
-      overflow: hidden;
-    }
-    .fourone {
-      height: 430px;
-      overflow: hidden;
-      .zpxxList {
-        border-bottom: 1px dashed #ccc;
-        margin: 0 0 10px 0;
-        height: 100px;
-        .name {
-          font-size: 18px;
-          font-weight: bold;
-          padding: 0 0 5px 0;
-        }
-        .type {
-          font-size: 16px;
-          padding: 0 0 5px 0;
-          text-align: left;
-        }
-        .date {
-          font-size: 16px;
-          padding: 0 0 5px 0;
-          text-align: right;
-        }
-        .content {
-          font-size: 16px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 2;
-          word-break: break-all;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          margin: 10px 0 0 0;
-        }
-      }
-      .zpxxList:hover {
-        cursor: pointer;
-        .name {
-          color: #409eff;
-        }
-      }
-    }
-    .fourtwo {
-      height: 430px;
-      overflow: hidden;
-      .zsgwList {
-        border: 1px solid #ccc;
-        padding: 10px;
-        margin: 0 0 5px 0;
-        height: 103px;
-        .name {
-          font-size: 18px;
-          font-weight: bold;
-        }
-        .date {
-          text-align: right;
-          font-size: 16px;
-        }
-        .other {
-          padding: 2px 0 1px 0;
-          font-size: 16px;
-          span {
-            display: inline-block;
-            width: 50%;
-          }
-        }
-      }
-      .zsgwList:hover {
-        cursor: pointer;
-        .name {
-          color: #409eff;
-        }
-      }
-    }
-    .fourthree {
-      .sxList {
-        padding: 15px;
-        margin: 0 15px 10px 0;
-        height: 212px;
-        width: 24%;
-        border-radius: 10px;
-        box-shadow: 0 0px 5px #ccc;
-        .image {
-          height: 100px;
-          padding: 0 60px;
-        }
-        .name {
-          font-size: 18px;
-          text-align: center;
-          font-weight: bold;
-          padding: 5px 0 0 0;
-        }
-        .other {
-          font-size: 16px;
-          text-align: center;
-          padding: 5px 0;
-          span {
-            display: inline-block;
-            margin: 0 10px;
-          }
-          span:nth-child(1) {
-            color: #ff0000;
-          }
-        }
-        .fldy {
-          font-size: 16px;
-          text-align: center;
-        }
-      }
-      .sxList:nth-child(4n) {
-        margin: 0 0 10px 0;
-      }
-      .sxList:hover {
-        cursor: pointer;
-        .name {
-          color: #409eff;
-        }
-      }
-    }
-  }
+/deep/.el-collapse-item__content {
+  padding-bottom: 0;
 }
 </style>

src/views/hallList/parts/personallist.vue

@@ -0,0 +1,144 @@
+<template>
+  <div id="personallist">
+    <el-row>
+      <el-col :span="24" class="productlist">
+        <el-col :span="8" class="list" v-for="(item, index) in list" :key="index">
+          <el-image :src="hall" style="width:100%;height:200px;"></el-image>
+          <el-col :span="24" class="other">
+            <p class="textOver">{{ item.title }}</p>
+            <p class="textOver">
+              <span><i class="el-icon-location-outline"></i>{{ getprovince(item.province) }}-{{ getplace(item.place) }}</span>
+              <span><i class="el-icon-time"></i>{{ item.start_time }}-{{ item.end_time }}</span>
+            </p>
+            <p>
+              <el-button type="warning" size="mini" @click="dockBtn()" v-if="user.role == '3' || user.role == '7'">管理进入</el-button>
+              <el-button type="warning" size="mini" @click="linkBtn(item)" v-if="status == '1'">进入对接会</el-button>
+              <el-button type="warning" size="mini" @click="apply(item)" v-if="status == '0' && user.uid != undefined">申请对接会</el-button>
+              <el-button type="warning" size="mini" @click="check(item)" v-if="status == '2' && user.role == '3'">查看成果</el-button>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import page from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+export default {
+  name: 'personallist',
+  props: { list: { type: Array, default: () => [] }, status: { type: String, default: '0' } },
+  components: {},
+  data: () => {
+    return {
+      hall: require('@a/personal1.jpg'),
+      // 省
+      province: [],
+      // 市
+      place: [],
+    };
+  },
+  created() {
+    this.searchplace();
+  },
+  methods: {
+    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
+    ...dock({ livefetch: 'fetch', livelist: 'query', livecreate: 'create', liveupdate: 'update' }),
+    // 过滤省
+    getprovince(item) {
+      let res = this.province.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    // 过滤市
+    getplace(item) {
+      let res = this.place.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    async searchplace() {
+      let res = await this.palcequery({ level: 1 });
+      let arr = await this.palcequery({ level: 2 });
+      if (res || arr) {
+        this.$set(this, `province`, res.data);
+        this.$set(this, `place`, arr.data);
+      }
+    },
+    // 管理进入
+    dockBtn() {
+      // if (this.user.uid) {
+      //   this.$router.push({ path: '/adminCenter/index', query: { num: '1' } });
+      // } else {
+      //   this.$router.push({ path: '/dockLogin' });
+      // }
+    },
+    // 进入对接会
+    async linkBtn(item) {
+      if (this.user.uid || this.user.suid) {
+        if (
+          this.user.role == '2' ||
+          this.user.role == '3' ||
+          this.user.role == '4' ||
+          this.user.role == '5' ||
+          this.user.role == '6' ||
+          this.user.role == '7' ||
+          this.user.role == '8'
+        ) {
+          this.$router.push({ path: '/hall/directBefore', query: { id: item.id } });
+        } else {
+          this.$router.push({ path: '/webLogin' });
+        }
+      } else {
+        this.$router.push({ path: '/webLogin' });
+      }
+    },
+    // 申请对接会
+    apply(item) {
+      // this.$router.push({ path: '/live/liveApply', query: { id: item.id } });
+    },
+    // 查看成果
+    check(item) {
+      // this.$router.push({ path: '/hallList/zongjie', query: { id: item.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.productlist {
+  .list {
+    position: relative;
+    width: 32%;
+    height: 310px;
+    border: 1px solid #ccc;
+    margin: 0 15px 10px 0;
+    .other {
+      p:nth-child(1) {
+        padding: 0 10px;
+        font-size: 16px;
+        font-weight: bold;
+      }
+      p:nth-child(2) {
+        padding: 5px;
+        span:nth-child(2) {
+          float: right;
+        }
+      }
+      p:nth-child(3) {
+        position: absolute;
+        width: 100%;
+        bottom: 5px;
+        text-align: center;
+      }
+    }
+  }
+  .list:nth-child(3n) {
+    width: 33%;
+    margin: 0 0 10px 0;
+  }
+}
+</style>