|
|
@@ -0,0 +1,423 @@
|
|
|
+<template>
|
|
|
+ <div id="list">
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="5" class="menu">
|
|
|
+ <el-image :src="squareImage"></el-image>
|
|
|
+ <span>Menu</span>
|
|
|
+ <el-col class="menuList" :span="24" 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="19" class="info" v-if="display == '1'">
|
|
|
+ <el-col v-if="menuIndex == '0'" class="leftInfo">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <span>|</span> <span>{{ menuName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
|
|
|
+ <p>{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</p>
|
|
|
+ <p>
|
|
|
+ <span class="textOver" @click="clickshanpin(item.id)">{{ item.name }}</span>
|
|
|
+ <span>{{ item.introduction }}</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="menuIndex == '1'" class="leftInfo">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <span>|</span> <span>{{ menuName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="infoRightList" :span="24" v-for="(item, index) in jishuList" :key="index">
|
|
|
+ <p>
|
|
|
+ <span class="textOver" @click="clickjishu(item.id)">{{ item.name }}</span
|
|
|
+ ><span class="textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="menuIndex == '2'" class="leftInfo">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <span>|</span> <span>{{ menuName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
|
|
|
+ <p>
|
|
|
+ <span class="textOver" @click="clickfuwu(item.id)">{{ item.name }}</span
|
|
|
+ ><span class="textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="menuIndex == '3'" class="leftInfo">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <span>|</span> <span>{{ menuName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
|
|
|
+ <p>{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</p>
|
|
|
+ <p>
|
|
|
+ <span class="textOver" @click="clickzhuanjia(item.id)">{{ item.name }}</span>
|
|
|
+ <span>{{ item.job_profile }}</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page.sync="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total,prev, pager, next, jumper"
|
|
|
+ :total="pageTotal"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19" v-else-if="display == '2'" class="info">
|
|
|
+ <context :detailInfo="detailInfo" @onSubmit="onSubmit"></context>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19" v-else-if="display == '3'" class="info">
|
|
|
+ <zhuanjia></zhuanjia>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from 'lodash';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: product } = createNamespacedHelpers('marketproduct');
|
|
|
+const { mapActions: talentExperts } = createNamespacedHelpers('talentExperts');
|
|
|
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
|
|
|
+const { mapActions: tranaudit } = createNamespacedHelpers('tranaudit');
|
|
|
+import zhuanjia from '@/layout/market/zhuanjia.vue';
|
|
|
+import context from '@/layout/market/context.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'list',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ context,
|
|
|
+ zhuanjia,
|
|
|
+ },
|
|
|
+ data: () => ({
|
|
|
+ squareImage: require('@/assets/live/square_big.png'),
|
|
|
+ menuList: [{ name: '科技产品' }, { name: '技术供求' }, { name: '服务供求' }, { name: '专家供求' }],
|
|
|
+ menuIndex: '0',
|
|
|
+ menuName: '科技产品',
|
|
|
+ menuColor: 'rgb(254, 149, 14)',
|
|
|
+ currentPage: 1,
|
|
|
+ pageTotal: 0,
|
|
|
+ pageSize: 10,
|
|
|
+ limit: 10,
|
|
|
+ zhuantiList: [],
|
|
|
+ jishuList: [],
|
|
|
+ hangyeList: [],
|
|
|
+ jiaoyuList: [],
|
|
|
+ display: '1',
|
|
|
+ detailInfo: {},
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.searchList();
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ totaltype() {
|
|
|
+ return this.$route.query.totaltype;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ ...product({ list: 'newquery', newfetch: 'newfetch' }),
|
|
|
+ ...talentExperts({ lists: 'query', fetch: 'fetch' }),
|
|
|
+ ...transaction({ transactioncreate: 'create', transactionfetch: 'fetch' }),
|
|
|
+ ...tranaudit({ tranauditcreate: 'create' }),
|
|
|
+ async searchList({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ if (this.$route.query.column_name == '科技产品') {
|
|
|
+ this.display = '1';
|
|
|
+ this.changeMenu(this.$route.query.column_name, 0);
|
|
|
+ } else if (this.$route.query.column_name == '技术供求') {
|
|
|
+ this.display = '1';
|
|
|
+ this.changeMenu(this.$route.query.column_name, 1);
|
|
|
+ } else if (this.$route.query.column_name == '服务供求') {
|
|
|
+ this.display = '1';
|
|
|
+ this.changeMenu(this.$route.query.column_name, 2);
|
|
|
+ } else if (this.$route.query.column_name == '专家供求') {
|
|
|
+ this.display = '1';
|
|
|
+ this.changeMenu(this.$route.query.column_name, 3);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async changeMenu(name, index) {
|
|
|
+ console.log(index, name);
|
|
|
+
|
|
|
+ this.menuIndex = index;
|
|
|
+ this.menuColor = 'rgb(254, 149, 14)';
|
|
|
+ this.menuName = name;
|
|
|
+ this.initList({ name });
|
|
|
+ },
|
|
|
+ async initList({ name, skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ this.display = '1';
|
|
|
+ let res = [];
|
|
|
+ this.pageSize = 5;
|
|
|
+ if (name == '科技产品') {
|
|
|
+ let totaltype = '1';
|
|
|
+ console.log(totaltype);
|
|
|
+
|
|
|
+ res = await this.list({ skip, limit, totaltype, status: 1, ...info });
|
|
|
+
|
|
|
+ this.$set(this, `zhuantiList`, res.data);
|
|
|
+ } else if (name == '技术供求') {
|
|
|
+ let totaltype = '0';
|
|
|
+ console.log(totaltype);
|
|
|
+ res = await this.list({ skip, limit, totaltype, status: 1, ...info });
|
|
|
+ this.$set(this, `jishuList`, res.data);
|
|
|
+ } else if (name == '服务供求') {
|
|
|
+ let totaltype = '2';
|
|
|
+ console.log(totaltype);
|
|
|
+ res = await this.list({ skip, limit, totaltype, status: 1, ...info });
|
|
|
+ this.$set(this, `hangyeList`, res.data);
|
|
|
+ } else if (name == '专家供求') {
|
|
|
+ let totaltype = this.totaltype;
|
|
|
+ res = await this.lists({ skip, limit, status: 1, ...info });
|
|
|
+ this.$set(this, `jiaoyuList`, res.data);
|
|
|
+ }
|
|
|
+ this.$set(this, `pageTotal`, res.total);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ const name = this.menuName;
|
|
|
+ if (name == '科技产品' || name == '专家供求') {
|
|
|
+ this.limit = 5;
|
|
|
+ }
|
|
|
+ this.initList({ name: name, skip: (val - 1) * this.limit, limit: this.limit });
|
|
|
+ },
|
|
|
+ async clickshanpin(id) {
|
|
|
+ this.display = '2';
|
|
|
+ console.log(id);
|
|
|
+ const res = await this.newfetch(id);
|
|
|
+ console.log(res.data);
|
|
|
+ this.$set(this, `detailInfo`, res.data);
|
|
|
+ },
|
|
|
+
|
|
|
+ async clickjishu(id) {
|
|
|
+ this.display = '2';
|
|
|
+ console.log(id);
|
|
|
+ const res = await this.newfetch(id);
|
|
|
+ console.log(res.data);
|
|
|
+ this.$set(this, `detailInfo`, res.data);
|
|
|
+ },
|
|
|
+
|
|
|
+ async search() {
|
|
|
+ if (this.display == '2') {
|
|
|
+ console.log(id);
|
|
|
+ const res = await this.newfetch(id);
|
|
|
+ console.log(res.data);
|
|
|
+ this.$set(this, `detailInfo`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async clickfuwu(id) {
|
|
|
+ this.display = '2';
|
|
|
+ console.log(id);
|
|
|
+ const res = await this.newfetch(id);
|
|
|
+ console.log(res.data);
|
|
|
+ this.$set(this, `detailInfo`, res.data);
|
|
|
+ },
|
|
|
+
|
|
|
+ async clickzhuanjia(id) {
|
|
|
+ this.display = '3';
|
|
|
+ },
|
|
|
+
|
|
|
+ async onSubmit() {
|
|
|
+ console.log(this.user.uid);
|
|
|
+ let form = {};
|
|
|
+ form.userid = this.user.uid;
|
|
|
+ form.username = this.user.name;
|
|
|
+ form.product_id = this.detailInfo.id;
|
|
|
+ form.product_name = this.detailInfo.name;
|
|
|
+ form.market_userid = this.detailInfo.userid;
|
|
|
+ form.market_username = this.detailInfo.contact_user;
|
|
|
+ form.status = '0';
|
|
|
+ console.log(form);
|
|
|
+ let res = await this.transactioncreate(form);
|
|
|
+ this.$checkRes(res, '发起洽谈交易成功', '交易失败');
|
|
|
+ let shenhe = {};
|
|
|
+ shenhe.result = '0';
|
|
|
+ console.log(res.data.id);
|
|
|
+
|
|
|
+ shenhe.transaction_id = res.data.id;
|
|
|
+ shenhe.userid = this.detailInfo.userid;
|
|
|
+ shenhe.product_id = this.detailInfo.userid;
|
|
|
+ console.log(shenhe);
|
|
|
+ let ress = await this.tranauditcreate(shenhe);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+.menu {
|
|
|
+ float: left;
|
|
|
+ height: 450px;
|
|
|
+ width: 20%;
|
|
|
+ background: no-repeat bottom right;
|
|
|
+ background-image: url(../../assets/live/menu_back.jpg);
|
|
|
+ margin: 30px 0;
|
|
|
+ padding: 10px 0 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0 0 10px #bbbaba;
|
|
|
+}
|
|
|
+.menu .el-image {
|
|
|
+ width: 30px;
|
|
|
+ display: inline-table;
|
|
|
+ margin: 10px 5px;
|
|
|
+}
|
|
|
+.menu span {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #92959a;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 3px;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+}
|
|
|
+.menuList p {
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #2d64b3;
|
|
|
+ color: #044b79;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ width: 77%;
|
|
|
+ float: right;
|
|
|
+ margin: 30px 0 30px 2px;
|
|
|
+ min-height: 766px;
|
|
|
+ box-shadow: 0 0 10px #2d64b3;
|
|
|
+ overflow: hidden;
|
|
|
+ right: 0px;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.leftInfo {
|
|
|
+ height: 500px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.leftTop {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 96%;
|
|
|
+ height: 41px;
|
|
|
+ line-height: 35px;
|
|
|
+ border-bottom: 1px solid #e5e5e5;
|
|
|
+ position: relative;
|
|
|
+ bottom: 1px;
|
|
|
+ margin: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #22529a;
|
|
|
+}
|
|
|
+.infoLeftList {
|
|
|
+ float: left;
|
|
|
+ width: 95%;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ padding: 10px 0 10px 10px;
|
|
|
+ height: 87px;
|
|
|
+ margin: 0 0 0 5px;
|
|
|
+}
|
|
|
+.infoLeftList:hover p:last-child span:first-child {
|
|
|
+ -webkit-transform: translateY(-3px);
|
|
|
+ -ms-transform: translateY(-3px);
|
|
|
+ transform: translateY(-3px);
|
|
|
+ -webkit-box-shadow: 0 0 6px #999;
|
|
|
+ box-shadow: 0 0 6px #999;
|
|
|
+ -webkit-transition: all 0.5s ease-out;
|
|
|
+ transition: all 0.5s ease-out;
|
|
|
+ color: #005293;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.infoLeftList p:first-child {
|
|
|
+ float: left;
|
|
|
+ width: 20%;
|
|
|
+ font-size: 15px;
|
|
|
+ background: #044b79;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 4px 0px;
|
|
|
+ margin: 0 0 0 5px;
|
|
|
+}
|
|
|
+.infoLeftList p:last-child {
|
|
|
+ float: right;
|
|
|
+ width: 70%;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+}
|
|
|
+.infoLeftList p:last-child span:first-child {
|
|
|
+ float: left;
|
|
|
+ width: 90%;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.infoLeftList p:last-child span:last-child {
|
|
|
+ float: left;
|
|
|
+ width: 90%;
|
|
|
+ font-size: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.infoRightList {
|
|
|
+ float: left;
|
|
|
+ width: 95%;
|
|
|
+ padding: 7px 0;
|
|
|
+ margin: 0 0 0 5px;
|
|
|
+}
|
|
|
+.infoRightList:nth-child(6) {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 0 0 17px 0;
|
|
|
+}
|
|
|
+.infoRightList:nth-child(7) {
|
|
|
+ padding: 15px 0 0 0;
|
|
|
+}
|
|
|
+.infoRightList:nth-child(11) {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 0 0 15px 0;
|
|
|
+}
|
|
|
+.infoRightList:hover p span:first-child {
|
|
|
+ -webkit-transform: translateY(-3px);
|
|
|
+ -ms-transform: translateY(-3px);
|
|
|
+ transform: translateY(-3px);
|
|
|
+ -webkit-box-shadow: 0 0 6px #999;
|
|
|
+ box-shadow: 0 0 6px #999;
|
|
|
+ -webkit-transition: all 0.5s ease-out;
|
|
|
+ transition: all 0.5s ease-out;
|
|
|
+ color: #005293;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.infoRightList p {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.infoRightList p span:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 20px 0 10px;
|
|
|
+}
|
|
|
+.infoRightList p span:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 21%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+</style>
|
