web-test/src/views/technical/list.vue

<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="5" class="menu">
            <el-image :src="squareImage"></el-image>
            <span class="menuTitle">Menu</span>
            <el-col :span="24" class="menuList" v-for="(item, index) in menuList" :key="index">
              <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
            </el-col>
          </el-col>
          <el-col :span="18" class="listInfo">
            <span v-if="display == 'list'">
              <span v-if="column_name == '专家问诊'">
                <exports :zhuantiList="zhuantiList" :total="zhuantiTotal" :menuName="column_name"></exports>
              </span>
              <span v-else-if="column_name == '行业研究'">
                <industry :industryList="industryList" :total="industryTotal" :menuName="column_name"></industry>
              </span>
              <span v-else-if="column_name == '嘉宾访谈'">
                <guidance :guidanceList="guidanceList" :total="guidanceTotal" :menuName="column_name"></guidance>
              </span>
              <span v-else-if="column_name == '项目路演'">
                <roadshow :roadshowList="roadshowList" :total="roadshowTotal" :menuName="column_name"></roadshow>
              </span>
            </span>
            <span v-else>
              <span v-if="column_name == '专家问诊'">
                <el-col :span="24" style="text-align:right;">
                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                </el-col>
                <el-col :span="24">
                  <expdetail :detailinfo="expdetail"></expdetail>
                </el-col>
              </span>
              <span v-else-if="column_name == '行业研究'">
                <el-col :span="24" style="text-align:right;">
                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                </el-col>
                <el-col :span="24">
                  <inddetail></inddetail>
                </el-col>
              </span>
              <span v-else-if="column_name == '嘉宾访谈'">
                <el-col :span="24" style="text-align:right;">
                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                </el-col>
                <el-col :span="24">
                  <guidetail></guidetail>
                </el-col>
              </span>
              <span v-else-if="column_name == '项目路演'">
                <el-col :span="24" style="text-align:right;">
                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                </el-col>
                <el-col :span="24">
                  <roadetail></roadetail>
                </el-col>
              </span>
            </span>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
// 列表
import exports from './list/export.vue';
import industry from './list/industry.vue';
import guidance from './list/guidance.vue';
import roadshow from './list/roadshow.vue';
// 详情
import expdetail from './detail/expdetail.vue';
import inddetail from './detail/inddetail.vue';
import guidetail from './detail/guidetail.vue';
import roadetail from './detail/roadetail.vue';

import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: column } = createNamespacedHelpers('column');
const { mapActions: news } = createNamespacedHelpers('news');
const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
export default {
  name: 'list',
  props: {},
  components: {
    exports,
    industry,
    guidance,
    roadshow,
    expdetail,
    inddetail,
    guidetail,
    roadetail,
  },
  data: function() {
    return {
      squareImage: require('@/assets/live/square_big.png'),
      // 菜单
      menuList: [{ name: '专家问诊' }, { name: '行业研究' }, { name: '嘉宾访谈' }, { name: '项目路演' }],
      menuIndex: '0',
      menuColor: 'rgb(254, 149, 14)',
      // 右侧显示
      // list:列表，detail:详情
      display: 'list',
      // 右侧头部栏目
      column_name: '专家问诊',
      // 专家问诊，行业研究栏目
      columnLists: [],
      // 专家列表
      zhuantiList: [],
      zhuantiTotal: 0,
      // 行业研究
      industryList: [],
      industryTotal: 0,
      // 嘉宾访谈
      guidanceList: [],
      guidanceTotal: 0,
      // 项目路演
      roadshowList: [],
      roadshowTotal: 0,
      // 专家详情
      expdetail: {},
    };
  },
  async created() {
    await this.searchcol();
    await this.searchColumn();
  },
  methods: {
    ...column({ columnList: 'query', columnInfo: 'fetch' }),
    ...news({ newsList: 'query', newsFetch: 'fetch' }),
    ...newsguidance({ danceQuery: 'query' }),
    ...newsroadshow({ adshowQuery: 'query' }),
    // 查询栏目，列表，详情
    async searchColumn() {
      if (this.type == 1) {
        this.changeMenu(this.columnName, 0);
      } else if (this.type == 2) {
        this.changeMenu(this.columnName, 1);
      } else if (this.type == 3) {
        this.changeMenu(this.columnName, 2);
      } else if (this.type == 4) {
        this.changeMenu(this.columnName, 3);
      }
      if (this.id) {
        this.display = 'detail';
        // 查看详情
        this.searchDetail(this.columnName, this.id);
      } else {
        this.display = 'list';
      }
    },
    // 选择菜单
    changeMenu(columnName, index) {
      this.display = 'list';
      this.column_name = columnName;
      this.menuIndex = index;
      this.menuColor = 'rgb(254, 149, 14)';
      this.searchInfo({ columnName });
    },
    // 查看列表
    async searchInfo({ skip = 0, columnName, name, ...info } = {}) {
      if (columnName == '专家问诊') {
        let column = this.columnLists.find(i => i.name == '专家问诊');
        const res = await this.newsList({ column_id: column._id });
        if (this.$checkRes(res)) {
          this.$set(this, `zhuantiList`, res.data);
          this.$set(this, `zhuantiTotal`, res.total);
        }
      } else if (columnName == '行业研究') {
        let column = this.columnLists.find(i => i.name == '行业研究');
        const res = await this.newsList({ column_id: column._id });
        if (this.$checkRes(res)) {
          this.$set(this, `industryList`, res.data);
          this.$set(this, `industryTotal`, res.total);
        }
      } else if (columnName == '嘉宾访谈') {
        let res = await this.danceQuery({ column_name: '嘉宾访谈' });
        if (this.$checkRes(res)) {
          this.$set(this, `guidanceList`, res.data);
          this.$set(this, `guidanceTotal`, res.total);
        }
      } else if (columnName == '项目路演') {
        let res = await this.adshowQuery({ column_name: '项目路演' });
        if (this.$checkRes(res)) {
          this.$set(this, `roadshowList`, res.data);
          this.$set(this, `roadshowTotal`, res.total);
        }
      }
    },
    // 查看详情
    async searchDetail(columnName, id) {
      if (columnName == '专家问诊') {
        let res = await this.newsFetch(id);
        if (this.$checkRes(res)) {
          this.$set(this, `expdetail`, res.data);
        }
      }
    },
    // 点击查看详情
    clickDetail({ column_name, id }) {
      this.$set(this, `column_name`, column_name);
      this.display = 'detail';
      this.searchDetail(column_name, id);
    },
    // 查询栏目
    async searchcol() {
      let res = await this.columnList();
      if (res) this.$set(this, `columnLists`, res.data);
    },
  },
  computed: {
    ...mapState(['user']),
    type() {
      return this.$route.query.type;
    },
    columnName() {
      return this.$route.query.column_name;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  margin: 15px 0;
  .menu {
    height: 600px;
    overflow: hidden;
    padding: 15px 10px;
    background: no-repeat 100% 100%;
    background-image: url('~@/assets/live/menu_back.jpg');
    box-sizing: border-box;
    box-shadow: 0 0 10px #bbbaba;
    .menuTitle {
      font-size: 24px;
      color: #92959a;
      font-weight: bold;
      position: relative;
      top: -10px;
      left: 10px;
    }
    .menuList {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #2d64b3;
      p {
        font-weight: bold;
        font-size: 18px;
        color: #044b79;
      }
    }
    .menuList:hover {
      cursor: pointer;
    }
  }
  .listInfo {
    float: right;
    width: 78%;
    min-height: 600px;
    overflow: hidden;
    box-shadow: 0 0 10px #2d64b3;
    padding: 10px;
  }
}
</style>