web-live/src/views/twoweb/service/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="4" class="list" v-for="(item, index) in list" :key="index" @click.native="btn(item)">
              <el-col :span="24" class="name">
                <i class="iconfont" :class="item.icon"></i>
                <p>{{ item.name }}</p>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="two">
            <el-col :span="24" class="two_1">
              <el-col :span="12" class="left">
                <top topText="成果评价" @more="more(0)"></top>
                <achieve-frame :list="achieveList" @detail="achDetail"></achieve-frame>
              </el-col>
              <el-col :span="12" class="right">
                <top topText="科技需求" @more="more(1)"></top>
                <techol-frame :list="techolList" @detail="tecDetail"></techol-frame>
              </el-col>
            </el-col>
            <el-col :span="24" class="two_2">
              <el-image :src="imgUrl"></el-image>
            </el-col>
            <el-col :span="24" class="two_1">
              <el-col :span="12" class="left">
                <top topText="专利交易公告" @more="more(2)"></top>
                <trans-frame :list="transList" @detail="transDetail"></trans-frame>
              </el-col>
              <el-col :span="12" class="right">
                <top topText="专利导航" @more="more(3)"></top>
                <nav-frame :list="navList" @detail="navDetail"></nav-frame>
              </el-col>
            </el-col>
            <!-- <el-col :span="24" class="two_1 two_3" style="display:none">
              <el-col :span="24" class="left">
                <top topText="项目申报" @more="more(2)"></top>
                <project-frame :list="declareList" @detail="proDetail"></project-frame>
              </el-col>
            </el-col> -->
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dialogInfo.name" class="dialog" :visible.sync="dialog" width="70%" :before-close="close">
      <info :type="dialogInfo.type"></info>
      <el-col :span="24" class="two" v-if="dialogInfo.type == '5'">
        <el-form :model="form2" :rules="rulesForm2" ref="form2" label-width="80px">
          <el-form-item label="用户账号" prop="institution_code">
            <el-input v-model="form2.institution_code" placeholder="请输入用户账号" maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="passwd">
            <el-input v-model="form2.password" placeholder="请输入登录密码" type="password" show-password></el-input>
          </el-form-item>
          <el-col :span="24" class="btn">
            <el-button type="primary" @click="onSubmit2('form2')">提交登录</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-dialog>
  </div>
</template>

<script>
import info from './parts/info.vue';
import top from './parts/top.vue';
import achieveFrame from './index/achieve.vue';
import techolFrame from './index/techol.vue';
import projectFrame from './index/project.vue';
import transFrame from './index/trans.vue';
import navFrame from './index/nav.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: organization } = createNamespacedHelpers('organization');
const { mapActions: achieveApply } = createNamespacedHelpers('achieveApply');
const { mapActions: product } = createNamespacedHelpers('product');
const { mapActions: declare } = createNamespacedHelpers('declare');
const { mapActions: patenttrans } = createNamespacedHelpers('patenttrans');
const { mapActions: patentnav } = createNamespacedHelpers('patentnav');
export default {
  name: 'index',
  props: {},
  components: {
    info,
    top,
    achieveFrame,
    techolFrame,
    // projectFrame,
    transFrame,
    navFrame,
  },
  data: function() {
    return {
      list: [
        { icon: 'iconzhengji', name: '项目征集', type: '1' },
        { icon: 'iconwenjuan', name: '问卷调查', type: '2' },
        { icon: 'iconchengguo', name: '成果评价', type: '3' },
        { icon: 'iconinformation-delivery', name: '信息发布', type: '4' },
        { icon: 'iconshenbao', name: '高企申报', type: '5' },
        { icon: 'iconyuyuefuwu', name: '预约服务', type: '6' },
      ],
      dialogInfo: {},
      dialog: false,
      form2: {},
      rulesForm2: {},
      // 公共信息
      imgUrl: require('@common/src/assets/center/cxfw.png'),
      // 成果评价
      achieveList: [],
      // 科技需求
      techolList: [],
      // 项目申报
      declareList: [],
      // 专利交易公告
      transList: [],
      // 专利导航
      navList: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...organization(['orgLogin', 'fetch']),
    ...achieveApply(['query']),
    ...product({ productQuery: 'query' }),
    ...declare({ declareQuery: 'query' }),
    ...patenttrans({ patenttransQuery: 'query' }),
    ...patentnav({ patentnavQuery: 'query' }),
    // 查询列表
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit: 5, status: '7', ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `achieveList`, res.data);
      }
      res = await this.productQuery({ skip, limit: 6, type: '0', status: '2', ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `techolList`, res.data);
      }
      res = await this.declareQuery({ skip, limit: 6, is_cashing: '1', ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `declareList`, res.data);
      }
      // 专利交易公告
      res = await this.patenttransQuery({ skip, limit: 5, status: '4', ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `transList`, res.data);
      }
      // 专利导航
      res = await this.patentnavQuery({ skip, limit: 8, is_show: true, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `navList`, res.data);
      }
    },
    // 打开弹框
    btn(data) {
      if (data.type == '1') {
        this.$router.push({ path: '/twoweb/service/project' });
      } else if (data.type == '2') {
        this.$router.push({ path: '/twoweb/service/question' });
      } else if (data.type == '4') {
        this.$router.push({ path: '/twoweb/service/product' });
      } else if (data.type == '6') {
        this.$router.push({ path: '/twoweb/service/order' });
      } else {
        this.$set(this, `dialogInfo`, data);
        this.dialog = true;
      }
    },
    // 关闭弹框
    close() {
      this.dialog = false;
    },
    // 提交登录
    onSubmit2(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let data = this.form2;
          const res = await this.orgLogin({ user: data });
          if (this.$checkRes(res)) {
            if (this.dialogInfo.type === '5') this.$router.push({ path: '/twoweb/service/policy' });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 更多
    more(index) {
      this.$router.push({ path: '/twoweb/service/list', query: { index: index } });
    },
    // 成果评价详情
    achDetail(data) {
      this.$router.push({ path: '/twoweb/service/list', query: { index: 0, id: data.id } });
    },
    // 科技需求详情
    tecDetail(data) {
      this.$router.push({ path: '/twoweb/service/list', query: { index: 1, id: data.id } });
    },
    // // 项目申报
    // proDetail(data) {
    //   this.$router.push({ path: '/twoweb/service/list', query: { index: 2, id: data._id } });
    // },
    // 专利交易公告
    transDetail(data) {
      // this.$router.push({ path: '/twoweb/service/list', query: { index: 2, id: data._id } });
    },
    // 专利导航
    navDetail(data) {
      this.$router.push({ path: '/twoweb/service/list', query: { index: 3, id: data._id } });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 10px 0;
  .one {
    margin: 0 0 20px 0;
    .list {
      width: 15.9%;
      height: 140px;
      margin: 0 10px 0px 0;
      text-align: center;
      padding: 30px 0;
      border-radius: 5px;
      box-shadow: 0 0 5px #409eff;
      .name {
        .iconfont {
          font-size: 40px;
        }
        p {
          font-size: 16px;
          font-weight: bold;
          margin: 10px 0 0 0;
        }
      }
    }
    .list:last-child {
      margin: 0 0 0 0;
    }
    .list:hover {
      cursor: pointer;
      .name {
        p {
          color: #6495ed;
        }
      }
    }
  }
  .two {
    .two_1 {
      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_2 {
      height: 140px;
      overflow: hidden;
      margin: 0 0 10px 0;
    }
    .two_3 {
      .left {
        width: 100%;
      }
    }
  }
}
.dialog {
  .two {
    height: 200px;
    background: #fff;
    padding: 10px 20%;
    .btn {
      text-align: center;
      padding: 10px 0;
    }
  }
  /deep/.el-dialog__body {
    padding: 0;
  }
}
</style>