web-live/src/views/techolchat/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="12" class="left">
              <question :questionList="questionList" :questionnaireList="questionnaireList"></question>
            </el-col>
            <el-col :span="12" class="right">
              <work :workList="hyyjList"></work>
            </el-col>
          </el-col>
          <el-col :span="24" class="two">
            <el-image :src="jlhd"></el-image>
          </el-col>
          <el-col :span="24" class="thr">
            <gzcy :list="gzcyList" @show="show"></gzcy>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="展会服务" :visible.sync="zhfwdialog" width="50%" :before-close="handleClose">
      <zhfw></zhfw>
    </el-dialog>
    <el-dialog title="成果评价" :visible.sync="zxzxdialog" width="50%" :before-close="handleClose">
      <cgpj></cgpj>
    </el-dialog>
    <el-dialog title="建言献策" :visible.sync="jyxcdialog" width="30%" :before-close="handleClose">
      <jyxc @handleClose="handleClose"></jyxc>
    </el-dialog>
    <el-dialog title="网上调查" :visible.sync="wsdcdialog" width="30%" :before-close="handleClose">
      <wsdc @handleClose="handleClose"></wsdc>
    </el-dialog>
    <el-dialog title="举报邮箱" :visible.sync="jbyxdialog" width="30%" :before-close="handleClose">
      <jbyx></jbyx>
    </el-dialog>
  </div>
</template>

<script>
import question from './index/question.vue';
import work from './index/work.vue';
// 公众参与
import gzcy from './parts/gzcy.vue';
//展会服务
import zhfw from './gzcy/zhfw.vue';
//在线咨询
// import zxzx from './gzcy/zxzx.vue';
// 成果评价
import cgpj from './gzcy/cgpj.vue';
// 建言献策
import jyxc from './gzcy/jyxc.vue';
// 网上调查
import wsdc from './gzcy/wsdc.vue';
// 举报邮箱
import jbyx from './gzcy/jbyx.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: column } = createNamespacedHelpers('column');
const { mapActions: news } = createNamespacedHelpers('news');
const { mapActions: mapQuestion } = createNamespacedHelpers('question');
const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: { question, work, gzcy, zhfw, cgpj, jyxc, wsdc, jbyx },
  data: function() {
    return {
      jlhd: require('@p/center/jlhd.png'),
      // 公众参与
      gzcyList: [
        {
          url: require('@p/techolchat/zhfw.png'),
          title: '展会服务',
        },
        {
          url: require('@p/techolchat/zxzx.png'),
          title: '成果评价',
        },
        {
          url: require('@p/techolchat/fb.png'),
          title: '我要发布',
        },

        {
          url: require('@p/techolchat/jy.png'),
          title: '建言献策',
        },
        {
          url: require('@p/techolchat/wsdc.png'),
          title: '网上调查',
        },
        {
          url: require('@p/techolchat/lbyx.png'),
          title: '举报邮箱',
        },
      ],
      // 展会服务
      zhfwdialog: false,
      // 在线咨询
      zxzxdialog: false,
      // 建言献策
      jyxcdialog: false,
      // 网上调查
      wsdcdialog: false,
      // 举报邮箱
      jbyxdialog: false,
      // 栏目列表
      columnList: [],
      // 调研调查
      questionList: [],
      // 行业研究
      hyyjList: [],
      // 问卷调查
      questionnaireList: [],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...questionnaire({ getQuest: 'query' }),
    ...column({ columnQuery: 'query' }),
    ...news(['query']),
    ...mapQuestion({ questionQuery: 'query' }),
    async search({ skip = 0, limit = 5, ...info } = {}) {
      // 行业研究
      let column = this.columnList.find(i => i.site == 'hyyj');
      let res = await this.query({ skip, limit, column_id: column.id, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `${column.site}List`, res.data);
      }
      // 调研调查
      res = await this.questionQuery({ skip, limit: 2, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `questionList`, res.data);
      }
      // 问卷调查
      res = await this.getQuest({ skip, limit: 2 });
      if (this.$checkRes(res)) {
        this.$set(this, `questionnaireList`, res.data);
      }
    },
    async searchOther() {
      let res = await this.columnQuery();
      if (this.$checkRes(res)) this.$set(this, `columnList`, res.data);
    },
    show(data) {
      if (data.title == '展会服务') {
        this.zhfwdialog = true;
      } else if (data.title == '我要发布') {
        this.$router.push({ path: '/techolchat/product' });
      } else if (data.title == '建言献策') {
        this.jyxcdialog = true;
      } else if (data.title == '成果评价') {
        this.zxzxdialog = true;
      } else if (data.title == '网上调查') {
        this.wsdcdialog = true;
        // TODO跳转至问卷列表页
        // if (this.user && this.user.id) this.$router.push('/questionnaire/index');
        // else this.$message({ type: 'danger', message: '请登录后填写调查问卷!' });
      } else if (data.title == '举报邮箱') {
        this.jbyxdialog = true;
      }
    },
    // 公共关闭
    handleClose() {
      // 展会服务
      this.zhfwdialog = false;
      // 在线咨询
      this.zxzxdialog = false;
      // 建言献策
      this.jyxcdialog = false;
      // 网上调查
      this.wsdcdialog = false;
      // 举报邮箱
      this.jbyxdialog = false;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  padding: 15px 0;
  .one {
    margin: 0 0 10px 0;
    .left {
      width: 49%;
      min-height: 530px;
      background: #ffffff;
      padding: 15px;
      border-radius: 20px;
      margin: 0 24px 0 0;
      box-shadow: 0 0 5px #409eff;
    }
    .right {
      width: 49%;
      min-height: 530px;
      background: #ffffff;
      border-radius: 20px;
      padding: 15px;
      box-shadow: 0 0 5px #409eff;
    }
  }
  .two {
    height: 140px;
    overflow: hidden;
    margin: 0 0 10px 0;
  }
  .thr {
    overflow: hidden;
    height: 255px;
    box-shadow: 0 0 10px #2d64b3;
    border-radius: 10px;
    margin: 15px 0 0 0;
  }
}
</style>