11

src/views/hallList/parts/kjpd.vue

@@ -1,127 +1,88 @@
 <template>
-  <div id="personallist">
+  <div id="product">
     <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="linkBtn(item)">进入频道</el-button>
-            </p>
-          </el-col>
-        </el-col>
+      <el-col :span="24" class="product">
+        <!-- 是否支持多开 accordion -->
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item title="创新成果" name="1">
+            <kjpdlist :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></kjpdlist>
+          </el-collapse-item>
+          <el-collapse-item title="科技普及" name="2">
+            <kjpdlist :list="listPre" :total="preTotal" status="0" @query="searchList" :province="province" :place="place"></kjpdlist>
+          </el-collapse-item>
+          <el-collapse-item title="专家讲堂" name="3">
+            <kjpdlist :list="listPast" :total="pastTotal" status="2" @query="searchList" :province="province" :place="place"></kjpdlist>
+          </el-collapse-item>
+        </el-collapse>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import page from '@/components/pagination.vue';
+import _ from 'lodash';
+import kjpdlist from './kjpdlist.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
-const { mapActions: channel } = createNamespacedHelpers('channel');
 export default {
-  name: 'personallist',
+  name: 'product',
   props: {
+    // 省
     province: { type: Array, default: () => [] },
     // 市
     place: { type: Array, default: () => [] },
   },
-  components: {},
-  data: () => {
+  components: {
+    kjpdlist,
+  },
+  data: function() {
     return {
-      hall: require('@a/kjzx.jpg'),
-      list: [],
+      activeName: '1',
+      // 下期预告
+      listPre: [],
+      preTotal: 0,
+      // 正在直播
+      listNow: [],
+      nowTotal: 0,
+      // 往期直播
+      listPast: [],
+      pastTotal: 0,
     };
   },
   async created() {
-    await this.search();
+    await this.searchList({ status: '0' });
+    await this.searchList({ status: '1' });
+    await this.searchList({ status: '2' });
   },
   methods: {
-    ...dock({ livefetch: 'fetch', livelist: 'query', livecreate: 'create', liveupdate: 'update' }),
-    ...channel(['query']),
-    // 过滤省
-    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 linkBtn(item) {
-      if (this.user.uid || this.user.suid) {
-        if (
-          this.user.role == '0' ||
-          this.user.role == '1' ||
-          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: '/kjpdhall/index', query: { id: item.id } });
-        } else {
-          this.$router.push({ path: '/webLogin' });
+    ...dock({ dockQuery: 'query' }),
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {
+      let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
+      if (res.errcode === 0) {
+        if (status == '0') {
+          this.$set(this, `preTotal`, res.total);
+          this.$set(this, `listPre`, res.data);
+        } else if (status == '1') {
+          this.$set(this, `nowTotal`, res.total);
+          this.$set(this, `listNow`, res.data);
+        } else if (status == '2') {
+          this.$set(this, `pastTotal`, res.total);
+          this.$set(this, `listPast`, res.data);
         }
-      } else {
-        this.$router.push({ path: '/webLogin' });
-      }
-    },
-    // 查询
-    async search() {
-      let res = await this.query();
-      if (this.$checkRes(res)) {
-        this.$set(this, `list`, res.data);
       }
     },
   },
   computed: {
     ...mapState(['user']),
   },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
 };
 </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;
-  }
+/deep/.el-collapse-item__content {
+  padding-bottom: 0;
 }
 </style>

src/views/hallList/parts/kjpdlist.vue

@@ -0,0 +1,160 @@
+<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 class="orgin textOver">来源：{{ item.orgin }}</span>
+              <span><i class="el-icon-time"></i>{{ item.create_time }}</span>
+            </p>
+            <p>
+              <el-button type="warning" size="mini" @click="linkBtn(item)">进入频道</el-button>
+              <el-button type="warning" size="mini" @click="linkBtn1(item)">管理进入</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: channel } = createNamespacedHelpers('channel');
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
+export default {
+  name: 'personallist',
+  props: {},
+  components: {},
+  data: () => {
+    return {
+      hall: require('@a/kjzx.jpg'),
+      list: [],
+      typelist: [],
+    };
+  },
+  async created() {
+    await this.searchType();
+    await this.search();
+  },
+  methods: {
+    ...channel(['query']),
+    ...markettype({ typequery: 'query', typefetch: 'fetch' }),
+    // 进入对接会
+    async linkBtn(item) {
+      if (this.user.uid || this.user.suid) {
+        if (
+          this.user.role == '0' ||
+          this.user.role == '1' ||
+          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: '/kjpdhall/index', query: { id: item.id } });
+        } else {
+          this.$router.push({ path: '/webLogin' });
+        }
+      } else {
+        this.$router.push({ path: '/webLogin' });
+      }
+    },
+    //管理进入
+    async linkBtn1(item) {
+      if (this.user.uid || this.user.suid) {
+        if (
+          this.user.role == '0' ||
+          this.user.role == '1' ||
+          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: '/kjpdhall/index', query: { id: item.id } });
+        } else {
+          this.$router.push({ path: '/webLogin' });
+        }
+      } else {
+        this.$router.push({ path: '/webLogin' });
+      }
+    },
+    //查询类型
+    async searchType() {
+      let res = await this.typequery({ category: '04' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `typelist`, res.data);
+      }
+    },
+    // 查询
+    async search() {
+      let type = this.typelist;
+      let one = type.find(i.code == '040');
+      let res = await this.query({ type: one.id });
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+        this.$set(this, `list`, res.data);
+      }
+      //
+      // for (const val of type) {
+      //   let res = await this.query({ type: val.id });
+      //   if (this.$checkRes(res)) {
+      //     console.log(res.data);
+      //     // this.$set(this, `list`, res.data);
+      //   }
+      // }
+    },
+  },
+  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;
+        }
+        .orgin {
+          display: inline-block;
+          width: 247px;
+        }
+      }
+      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>