1

src/layout/common/footInfo.vue

@@ -6,7 +6,7 @@
           <!-- <van-tabbar-item to="/">
             <p class="text">首页</p>
           </van-tabbar-item> -->
-          <van-tabbar-item to="/live/index">
+          <van-tabbar-item to="/live/index" @click="change()">
             <p class="text">直播大厅</p>
           </van-tabbar-item>
           <van-tabbar-item to="/market/index">
@@ -24,6 +24,11 @@
         </van-tabbar>
       </el-col>
     </el-row>
+    <el-col :span="24" class="live" v-if="display">
+      <p v-for="(item, index) in liveList" :key="index" @click="changetxt(item, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
+        {{ item.title }}
+      </p>
+    </el-col>
   </div>
 </template>
 
@@ -32,10 +37,34 @@ export default {
   name: 'footInfo',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    display: false,
+    liveList: [
+      { code: '1', title: '科技成果' },
+      { code: '2', title: '人才对接' },
+      { code: '3', title: '专家培训' },
+    ],
+    menuIndex: '0',
+    menuColor: 'rgb(255,255,255)',
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    // 选择显示
+    change() {
+      if (this.display) {
+        this.display = false;
+      } else {
+        this.display = true;
+      }
+    },
+    // 选择模块
+    changetxt(data) {
+      this.menuIndex = data.code - 1;
+      this.$emit('changetxt', data);
+      this.display = false;
+    },
+  },
 };
 </script>
 
@@ -48,4 +77,24 @@ p {
   height: 50px;
   overflow: hidden;
 }
+.live {
+  position: absolute;
+  width: 30%;
+  z-index: 999;
+  height: 90px;
+  bottom: 50px;
+  background: #f1f1f1;
+  text-align: center;
+  left: 5px;
+  border-radius: 10px;
+  padding: 0 10px;
+  p {
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px dashed #fff;
+  }
+  p:nth-child(3) {
+    border-bottom: none;
+  }
+}
 </style>

src/views/live/index.vue

@@ -6,7 +6,7 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <van-tabs v-model="active">
+          <!-- <van-tabs v-model="active">
             <van-tab title="科技成果在线">
               <product :province="province" :place="place" news="1"></product>
             </van-tab>
@@ -16,20 +16,19 @@
             <van-tab title="专家培训在线">
               <exports :province="province" :place="place" news="3"></exports>
             </van-tab>
-
-            <!-- <van-tab title="正在直播">
-              <liveList :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></liveList>
-            </van-tab>
-            <van-tab title="下期预告">
-              <liveList :list="listPre" :total="nowTotal" status="0" @query="searchList" :province="province" :place="place"></liveList>
-            </van-tab>
-            <van-tab title="往期直播">
-              <liveList :list="listPast" :total="nowTotal" status="2" @query="searchList" :province="province" :place="place"></liveList>
-            </van-tab> -->
-          </van-tabs>
+          </van-tabs> -->
+          <span v-if="columnview == '1'">
+            <product :province="province" :place="place"></product>
+          </span>
+          <span v-else-if="columnview == '2'">
+            <personal :province="province" :place="place"></personal>
+          </span>
+          <span v-else-if="columnview == '3'">
+            <exports :province="province" :place="place"></exports>
+          </span>
         </el-col>
         <el-col :span="24" class="foot">
-          <footInfo></footInfo>
+          <footInfo @changetxt="changetxt"></footInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -43,7 +42,6 @@ import footInfo from '@/layout/common/footInfo.vue';
 import product from './parts/product.vue';
 import personal from './parts/personal.vue';
 import exports from './parts/exports.vue';
-
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: place } = createNamespacedHelpers('place');
 const jwt = require('jsonwebtoken');
@@ -53,9 +51,9 @@ export default {
   components: {
     NavBar,
     footInfo,
-    exports,
-    personal,
     product,
+    personal,
+    exports,
   },
   data: function() {
     return {
@@ -66,46 +64,20 @@ export default {
       // 返回
       navShow: true,
       active: 0,
-      // // 下期预告
-      // listPre: [],
-      // preTotal: 0,
-      // // 正在直播
-      // listNow: [],
-      // nowTotal: 0,
-      // // 往期直播
-      // listPast: [],
-      // pastTotal: 0,
       // 省
       province: [],
       // 市
       place: [],
+      // 显示模块
+      columnview: '1',
     };
   },
   async created() {
     await this.searchPlace();
-    // await this.searchList({ status: '0' });
-    // await this.searchList({ status: '1' });
-    // await this.searchList({ status: '2' });
   },
   methods: {
     ...mapMutations(['setUser']),
-    // ...dock({ dockQuery: 'query' }),
     ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
-    // 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);
-    //     }
-    //   }
-    // },
     async searchPlace() {
       let res1 = await this.palcequery({ level: 1 });
       let arr = await this.palcequery({ level: 2 });
@@ -123,6 +95,20 @@ export default {
         }
       }
     },
+    changetxt(data) {
+      this.$set(this, `columnview`, data.code);
+      console.log(data);
+    },
+    // 选择栏目
+    changecolumn() {
+      if (this.columnview == '1') {
+        this.$set(this, `title`, '科技成果在线');
+      } else if (this.columnview == '2') {
+        this.$set(this, `title`, '人才对接在线');
+      } else if (this.columnview == '3') {
+        this.$set(this, `title`, '专家培训在线');
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -139,9 +125,16 @@ export default {
         this.sesstoken();
       },
     },
+    columnview: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.changecolumn();
+      },
+    },
   },
   mounted() {
-    this.title = this.$route.meta.title;
+    // this.title = this.$route.meta.title;
     this.isleftarrow = this.$route.meta.isleftarrow;
   },
 };