web-test/src/views/market/marketlists.vue

<template>
  <div id="marketlists">
    <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'">
              <el-col :span="24" class="listDown">
                <span v-if="column_name == '科技需求'">
                  <technology
                    :technologyList="technologyList"
                    :column_name="column_name"
                    :total="technologyTotal"
                    @clickDetail="clickDetail"
                    @searchData="searchData"
                  ></technology>
                </span>
                <span v-else-if="column_name == '技术成果'">
                  <achieve
                    :achieveList="achieveList"
                    :column_name="column_name"
                    :total="achieveTotal"
                    @clickDetail="clickDetail"
                    @searchData="searchData"
                    @changeCom="changeCom"
                    :dropList="dropList"
                  ></achieve>
                </span>
                <span v-else-if="column_name == '商务服务'">
                  <business
                    :businessList="businessList"
                    :column_name="column_name"
                    :total="businessTotal"
                    @clickDetail="clickDetail"
                    @searchData="searchData"
                  ></business>
                </span>
                <span v-else-if="column_name == '专家智库'">
                  <expert
                    :expertList="expertList"
                    :column_name="column_name"
                    :total="expertTotal"
                    @clickDetail="clickDetail"
                    @searchData="searchData"
                    @changeExpertCom="changeExpertCom"
                    :dropList="expertdropList"
                  ></expert>
                </span>
              </el-col>
            </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">
                  <techDetail :detailInfo="techDetail" @onSubmit="techSubmit" :displayBtn="displayBtn"></techDetail>
                </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">
                  <achiDetail :detailInfo="achiDetail" @onSubmit="techSubmit" :displayBtn="displayBtn"></achiDetail>
                </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">
                  <busiDetail :detailInfo="busiDetail" @onSubmit="techSubmit" :displayBtn="displayBtn"></busiDetail>
                </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">
                  <expeDetail :detailInfo="expeDetail" @onSubmit="expertSuubmit" :displayBtn="displayBtn"></expeDetail>
                </el-col>
              </span>
            </span>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 列表
import technology from './list/technology.vue';
import achieve from './list/achieve.vue';
import business from './list/business.vue';
import expert from './list/expert.vue';
// 详情
import techDetail from './detail/techDetail.vue';
import achiDetail from './detail/achiDetail.vue';
import busiDetail from './detail/busiDetail.vue';
import expeDetail from './detail/expeDetail.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: product } = createNamespacedHelpers('marketproduct');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
const { mapActions: markettype } = createNamespacedHelpers('markettype');
import _ from 'lodash';
export default {
  name: 'marketlists',
  props: {},
  components: {
    // 科技需求
    technology,
    techDetail,
    // 技术成果
    achieve,
    achiDetail,
    // 商务服务
    business,
    busiDetail,
    // 专家智库
    expert,
    expeDetail,
  },
  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: '科技需求',
      // 搜索
      infoName: '',
      // 列表&詳情
      // 科技需求
      technologyList: [],
      technologyTotal: 0,
      techDetail: {},
      // 技术成果
      // 原数组
      priAchieve: [],
      priAchieveTotal: 0,
      // 显示数组
      achieveList: [],
      achieveTotal: 0,
      achiDetail: {},
      // 其他单位列表
      dropList: [],
      // 商务服务
      businessList: [],
      businessTotal: 0,
      busiDetail: {},
      // 专家信息
      // 原数组
      priExpert: [],
      priExpertTotal: 0,
      expertList: [],
      expertTotal: 0,
      expeDetail: {},
      // 单位列表
      expertdropList: [],
      // 显示按钮
      displayBtn: true,
    };
  },
  async created() {
    await this.searchColumn();
    await this.searchCom();
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function('event.returnValue=false');
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=false');
    });
  },
  methods: {
    ...product({ productList: 'newquery', productFetch: 'newfetch' }),
    ...expertsuser({ expertsuserList: 'query', expertsuserFetch: 'fetch' }),
    ...transaction({ transactioncreate: 'create', transactionfetch: 'fetch' }),
    ...markettype({ markettypeList: 'query' }),
    // 查询栏目，列表，详情
    async searchColumn() {
      if (this.type == 0) {
        this.changeMenu(this.columnName, this.type);
      } else if (this.type == 1) {
        this.changeMenu(this.columnName, this.type);
      } else if (this.type == 2) {
        this.changeMenu(this.columnName, this.type);
      } else if (this.type == 3) {
        this.changeMenu(this.columnName, this.type);
      }
      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, limit = 10, columnName, name, ...info } = {}) {
      if (name) info.name = name;
      if (columnName == '科技需求') {
        let res = await this.productList({ skip, type: '0', status: '1', ...info });
        if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
        this.$set(this, `technologyTotal`, res.total);
      } else if (columnName == '技术成果') {
        let res = await this.productList({ skip, type: '1', status: '1', ...info });
        if (this.$checkRes(res)) this.$set(this, `priAchieve`, res.data);
        this.$set(this, `priAchieveTotal`, res.total);
        this.$set(this, `achieveList`, res.data);
        this.$set(this, `achieveTotal`, res.total);
      } else if (columnName == '商务服务') {
        let res = await this.productList({ skip, type: '2', status: '1', ...info });
        if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
        this.$set(this, `businessTotal`, res.total);
      } else if (columnName == '专家智库') {
        let res = await this.expertsuserList({ skip, ...info });
        if (this.$checkRes(res)) this.$set(this, `priExpert`, res.data);
        this.$set(this, `priExpertTotal`, res.total);
        this.$set(this, `expertList`, res.data);
        this.$set(this, `expertTotal`, res.total);
      }
    },
    // 查看详情
    async searchDetail(columnName, id) {
      if (columnName == '科技需求') {
        let res = await this.productFetch(id);
        if (this.$checkRes(res)) this.$set(this, `techDetail`, res.data);
      } else if (columnName == '技术成果') {
        let res = await this.productFetch(id);
        if (this.$checkRes(res)) this.$set(this, `achiDetail`, res.data);
      } else if (columnName == '商务服务') {
        let res = await this.productFetch(id);
        if (this.$checkRes(res)) this.$set(this, `busiDetail`, res.data);
      } else {
        let res = await this.expertsuserFetch(id);
        if (this.$checkRes(res)) this.$set(this, `expeDetail`, res.data);
      }
    },
    // 点击查看详情
    clickDetail({ column_name, id }) {
      this.$set(this, `column_name`, column_name);
      this.display = 'detail';
      this.searchDetail(column_name, id);
    },
    // 科技需求，技术成果，商务服务洽谈
    async techSubmit({ data }) {
      let form = {
        userid: this.user.uid,
        username: this.user.name,
        product_id: data.id,
        product_name: data.name,
        market_userid: data.userid,
        market_username: data.contacts,
        status: '0',
      };
      if (!this.user.uid) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong><a href="http://broadcast.waityou24.cn/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
          type: 'error',
        });
        return;
      } else {
        let res = await this.transactioncreate(form);
        this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
      }
    },
    // 专家智库
    async expertSuubmit({ data }) {
      let form = {
        userid: this.user.uid,
        username: this.user.name,
        product_id: data.id,
        product_name: data.name,
        market_userid: data.id,
        market_username: data.name,
        status: '0',
        type: '1',
      };
      if (!this.user.uid) {
        // this.$message.error('游客身份无法与卖家对话,请先注册');
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong><a href="http://broadcast.waityou24.cn/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
          type: 'error',
        });
        return;
      } else {
        let res = await this.transactioncreate(form);
        this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
      }
    },
    // 名字查询
    searchData({ name, columnName }) {
      this.searchInfo({ columnName, name });
    },
    // 查询成果单位,专家工作单位
    async searchCom() {
      // 成果单位
      let res = await this.markettypeList({ category: '05' });
      if (this.$checkRes(res)) {
        let newRes = res.data;
        newRes.push({ name: '其他' });
        this.$set(this, `dropList`, newRes);
      }
      // 专家工作单位
      res = await this.markettypeList({ category: '06' });
      if (this.$checkRes(res)) {
        let newRes = res.data;
        newRes.push({ name: '其他' });
        this.$set(this, `expertdropList`, newRes);
      }
    },
    // 成果选择单位
    async changeCom(data) {
      if (data) {
        if (data == '中科系') {
          let newRes = this.priAchieve.filter(
            i =>
              i.company == '中科院长春分院' ||
              i.company == '中国科学院东北地理与农业生态研究所' ||
              i.company == '中国科学院长春应用化学研究所' ||
              i.company == '中科院长春光学精密机械与物理研究所'
          );
          this.$set(this, `achieveList`, newRes);
          this.$set(this, `achieveTotal`, newRes.length);
        } else if (data == '其他') {
          let newRes = this.priAchieve.filter(
            i =>
              i.company != '中科院长春分院' &&
              i.company != '中国科学院东北地理与农业生态研究所' &&
              i.company != '中国科学院长春应用化学研究所' &&
              i.company != '中科院长春光学精密机械与物理研究所' &&
              i.company != '吉林大学' &&
              i.company != '长春工业大学'
          );
          this.$set(this, `achieveList`, newRes);
          this.$set(this, `achieveTotal`, newRes.length);
        } else {
          let newRes = this.priAchieve.filter(f => f.company.includes(data));
          if (newRes) {
            this.$set(this, `achieveList`, newRes);
            this.$set(this, `achieveTotal`, newRes.length);
          }
        }
      } else {
        this.$set(this, `achieveList`, this.priAchieve);
        this.$set(this, `achieveTotal`, this.priAchieve.length);
      }
    },
    // 专家选择单位
    async changeExpertCom(data) {
      if (data) {
        if (data == '中科系') {
          let newRes = this.priExpert.filter(
            i =>
              i.company == '中科院长春分院' ||
              i.company == '中国科学院东北地理与农业生态研究所' ||
              i.company == '中国科学院长春应用化学研究所' ||
              i.company == '中科院长春光学精密机械与物理研究所'
          );
          this.$set(this, `expertList`, newRes);
          this.$set(this, `expertTotal`, newRes.length);
        } else if (data == '其他') {
          let newRes = this.priExpert.filter(
            i =>
              i.company != '中科院长春分院' &&
              i.company != '中国科学院东北地理与农业生态研究所' &&
              i.company != '中国科学院长春应用化学研究所' &&
              i.company != '中科院长春光学精密机械与物理研究所' &&
              i.company != '吉林大学' &&
              i.company != '长春工业大学' &&
              i.company != '长春工程学院'
          );
          this.$set(this, `expertList`, newRes);
          this.$set(this, `expertTotal`, newRes.length);
        } else {
          let newRes = this.priExpert.filter(f => f.company.includes(data));
          if (newRes) {
            this.$set(this, `expertList`, newRes);
            this.$set(this, `expertTotal`, newRes.length);
          }
        }
      } else {
        this.$set(this, `expertList`, this.priExpert);
        this.$set(this, `expertTotal`, this.priExpert.legnth);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    type() {
      return this.$route.query.type;
    },
    columnName() {
      return this.$route.query.column_name;
    },
    id() {
      return this.$route.query.id;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  // width: 80%;
  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>