更新

src/views/market/detail/achiDetail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="achiDetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="8" class="left">
+            <el-carousel trigger="click" height="250px" :autoplay="false">
+              <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
+                <el-image :src="item.url" style="width:100%;height:240px;"></el-image>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="16" class="right">
+            <el-col :span="24" class="name textOver">
+              {{ detailInfo.name }}
+            </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 所属领域：{{ detailInfo.field }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 合作方式：{{ detailInfo.cooperation }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 成果状态：{{ detailInfo.achievestatus }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 成果权属：{{ detailInfo.achieveown }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 成果来源：{{ detailInfo.achievesource }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 项目路演：{{ detailInfo.roadshow }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 意向价格：{{ detailInfo.intentionprice }}万元 </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 企业名称：{{ detailInfo.company }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 企业网址{{ detailInfo.companyweb }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 联系人：{{ detailInfo.contacts }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> QQ&微信：{{ detailInfo.qqwx }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 电子邮箱：{{ detailInfo.email }} </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="downInfo">
+            <h2>成果简介：</h2>
+            <p>
+              {{ detailInfo.achievebrief }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>技术特点：</h2>
+            <p>
+              {{ detailInfo.features }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>技术团队：</h2>
+            <p>
+              {{ detailInfo.team }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>商业预期：</h2>
+            <p>
+              {{ detailInfo.expectations }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>合作要求：</h2>
+            <p>
+              {{ detailInfo.present }}
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'achiDetail',
+  props: {
+    detailInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 250px;
+    overflow: hidden;
+    border-bottom: 1px dashed #ccc;
+    // .left {
+    // }
+    .right {
+      padding: 0 10px;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+        padding: 10px 0;
+      }
+      .otherInfo {
+        font-size: 16px;
+        padding: 5px 0;
+      }
+    }
+  }
+  .down {
+    .downInfo {
+      padding: 10px 0;
+      p {
+        font-size: 16px;
+        text-indent: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/market/detail/busiDetail.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="busiDetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="24" class="name">
+            {{ detailInfo.name }}
+          </el-col>
+          <el-col :span="12" class="otherInfo">信息属性：{{ detailInfo.messattribute }} </el-col>
+          <el-col :span="12" class="otherInfo">需求程度：{{ detailInfo.demand }} </el-col>
+          <el-col :span="12" class="otherInfo">联系人：{{ detailInfo.contacts }} </el-col>
+          <el-col :span="12" class="otherInfo">发布时间：{{ detailInfo.meta | getDate }} </el-col>
+          <el-col :span="12" class="otherInfo">QQ&微信：{{ detailInfo.qqwx }} </el-col>
+          <el-col :span="12" class="otherInfo">电子邮箱：{{ detailInfo.email }} </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="downInfo">
+            <h2>信息描述：</h2>
+            <p>
+              {{ detailInfo.informationdesc }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>核心要素：</h2>
+            <p>
+              {{ detailInfo.coreelements }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>价格信息：</h2>
+            <p>
+              {{ detailInfo.priceinfo }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>商务预期：</h2>
+            <p>
+              {{ detailInfo.businessexpect }}
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'busiDetail',
+  props: {
+    detailInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 160px;
+    overflow: hidden;
+    border-bottom: 1px dashed #ccc;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+      padding: 10px 0;
+    }
+    .otherInfo {
+      font-size: 16px;
+      padding: 5px 0;
+    }
+  }
+  .down {
+    .downInfo {
+      padding: 10px 0;
+      p {
+        font-size: 16px;
+        text-indent: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/market/detail/expeDetail.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="techDetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="8" class="left">
+            <el-image v-if="detailInfo.expertimage != ''" :src="detailInfo.expertimage" style="width:100%;height:220px;"></el-image>
+            <el-image v-else :src="expertimage" style="width:100%;height:220px;"></el-image>
+          </el-col>
+          <el-col :span="16" class="right">
+            <el-col :span="24" class="name textOver">
+              {{ detailInfo.name }}
+            </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 毕业院校：{{ detailInfo.school }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 最高学历：{{ detailInfo.education }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 出生日期：{{ detailInfo.birthDate }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 工作单位：{{ detailInfo.company }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> QQ&微信：{{ detailInfo.qqwx }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 电子邮箱：{{ detailInfo.email }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 职务职称：{{ detailInfo.zwzc }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 擅长领域：{{ detailInfo.expertise }} </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="downInfo">
+            <h2>工作经历：</h2>
+            <p>
+              {{ detailInfo.workexperience || '暂无' }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>科研综述：</h2>
+            <p>
+              {{ detailInfo.scientific || '暂无' }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>承担项目：</h2>
+            <p>
+              {{ detailInfo.undertakingproject || '暂无' }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>科技奖励：</h2>
+            <p>
+              {{ detailInfo.scienceaward || '暂无' }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>社会任职：</h2>
+            <p>
+              {{ detailInfo.social || '暂无' }}
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'techDetail',
+  props: {
+    detailInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      expertimage: require('@/assets/live/222.png'),
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 230px;
+    overflow: hidden;
+    border-bottom: 1px dashed #ccc;
+    // .left {
+    // }
+    .right {
+      padding: 0 10px;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+        padding: 10px 0;
+      }
+      .otherInfo {
+        font-size: 16px;
+        padding: 10px 0;
+      }
+    }
+  }
+  .down {
+    .downInfo {
+      padding: 10px 0;
+      p {
+        font-size: 16px;
+        text-indent: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/market/detail/techDetail.vue

@@ -0,0 +1,110 @@
+<template>
+  <div id="techDetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="8" class="left">
+            <el-carousel trigger="click" height="250px" :autoplay="false">
+              <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
+                <el-image :src="item.url" style="width:100%;height:240px;"></el-image>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="16" class="right">
+            <el-col :span="24" class="name textOver">
+              {{ detailInfo.name }}
+            </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 所属领域：{{ detailInfo.field }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 合作方式：{{ detailInfo.cooperation }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 投资预算：{{ detailInfo.budget }}万元 </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 需求紧急程度：{{ detailInfo.degreeurgency }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 企业名称：{{ detailInfo.company }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 注册类型：{{ detailInfo.companytype }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 企业网址{{ detailInfo.companyweb }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 联系人：{{ detailInfo.contacts }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> QQ&微信：{{ detailInfo.qqwx }} </el-col>
+            <el-col :span="12" class="otherInfo textOver"> 电子邮箱：{{ detailInfo.email }} </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="downInfo">
+            <h2>技术难题&难题说明：</h2>
+            <p>
+              {{ detailInfo.requirementdesc }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>预期技术目标描述：</h2>
+            <p>
+              {{ detailInfo.expect }}
+            </p>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <h2>需求现状及应对措施：</h2>
+            <p>
+              {{ detailInfo.present }}
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'techDetail',
+  props: {
+    detailInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 250px;
+    overflow: hidden;
+    border-bottom: 1px dashed #ccc;
+    // .left {
+    // }
+    .right {
+      padding: 0 10px;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+        padding: 10px 0;
+      }
+      .otherInfo {
+        font-size: 16px;
+        padding: 8px 0;
+      }
+    }
+  }
+  .down {
+    .downInfo {
+      padding: 10px 0;
+      p {
+        font-size: 16px;
+        text-indent: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/market/index.vue

@@ -58,7 +58,7 @@
                     {{ item.name }}
                   </el-col>
                   <el-col :span="4" class="date">
-                    {{ item.date }}
+                    {{ item.meta | getDate }}
                   </el-col>
                   <el-col :span="12" class="field"> 所属领域：{{ item.field }} </el-col>
                   <el-col :span="12" class="field"> 合作方式：{{ item.cooperation }} </el-col>
@@ -97,7 +97,7 @@
                   </el-col>
                   <el-col :span="10" class="messbute"> 信息属性：{{ item.messattribute }} </el-col>
                   <el-col :span="4" class="date">
-                    {{ item.date }}
+                    {{ item.meta | getDate }}
                   </el-col>
                   <el-col :span="24" class="info">
                     {{ item.informationdesc }}
@@ -189,6 +189,17 @@ export default {
       if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
     },
   },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {

src/views/market/list/achieve.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="achieve">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="21" class="name" @click.native="clickDetail(item.id)">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="3" class="date">
+            {{ item.meta | getDate }}
+          </el-col>
+          <el-col :span="24" class="brief"> 成果简介：{{ item.achievebrief }} </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'achieve',
+  props: {
+    achieveList: { type: Array },
+    total: { type: Number },
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1, //默认数据1
+      pageSize: 5, //每页显示数据数量
+      origin: [], //分割数据
+      list: [], //显示数据列表
+    };
+  },
+  created() {},
+  methods: {
+    searchPage(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    // 详情
+    clickDetail(id) {
+      this.$emit('clickDetail', { column_name: '技术成果', id: id });
+    },
+  },
+  watch: {
+    achieveList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .list {
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+    }
+    .date {
+      font-size: 16px;
+      text-align: center;
+    }
+    .brief {
+      font-size: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      margin: 10px 0 0 0;
+      max-height: 42px;
+    }
+  }
+  .list:hover {
+    cursor: pointer;
+    .name {
+      -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: #0085d2;
+    }
+  }
+}
+.page {
+  text-align: center;
+  height: 40px;
+  padding: 5px 0;
+}
+</style>

src/views/market/list/business.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="business">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="15" class="name textOver" @click.native="clickDetail(item.id)">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="6" class="field"> 信息属性：{{ item.messattribute }} </el-col>
+          <el-col :span="3" class="date">
+            {{ item.meta | getDate }}
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'business',
+  props: {
+    businessList: { type: Array },
+    total: { type: Number },
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1, //默认数据1
+      pageSize: 10, //每页显示数据数量
+      origin: [], //分割数据
+      list: [], //显示数据列表
+    };
+  },
+  created() {},
+  methods: {
+    searchPage(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    // 详情
+    clickDetail(id) {
+      this.$emit('clickDetail', { column_name: '商务信息', id: id });
+    },
+  },
+  watch: {
+    businessList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .list {
+    padding: 12px 0;
+    .name {
+      font-size: 18px;
+    }
+    .field {
+      font-size: 16px;
+    }
+    .date {
+      text-align: center;
+      font-size: 16px;
+    }
+  }
+  .list:nth-child(5) {
+    border-bottom: 1px solid #ccc;
+  }
+  .list:hover {
+    cursor: pointer;
+    .name {
+      -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: #0085d2;
+    }
+  }
+}
+.page {
+  text-align: center;
+  height: 40px;
+  padding: 5px 0;
+}
+</style>

src/views/market/list/expert.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="expert">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="21" class="name" @click.native="clickDetail(item.id)">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="3" class="date">
+            {{ item.meta | getDate }}
+          </el-col>
+          <el-col :span="24" class="brief"> 科研综述：{{ item.scientific }} </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'expert',
+  props: {
+    expertList: { type: Array },
+    total: { type: Number },
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1, //默认数据1
+      pageSize: 5, //每页显示数据数量
+      origin: [], //分割数据
+      list: [], //显示数据列表
+    };
+  },
+  created() {},
+  methods: {
+    searchPage(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    // 详情
+    clickDetail(id) {
+      this.$emit('clickDetail', { column_name: '专家服务', id: id });
+    },
+  },
+  watch: {
+    expertList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .list {
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+    }
+    .date {
+      font-size: 16px;
+      text-align: center;
+    }
+    .brief {
+      font-size: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      margin: 10px 0 0 0;
+      max-height: 42px;
+    }
+  }
+  .list:hover {
+    cursor: pointer;
+    .name {
+      -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: #0085d2;
+    }
+  }
+}
+.page {
+  text-align: center;
+  height: 40px;
+  padding: 5px 0;
+}
+</style>

src/views/market/list/technology.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="technology">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="15" class="name textOver" @click.native="clickDetail(item.id)">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="6" class="field"> 所属领域：{{ item.field }} </el-col>
+          <el-col :span="3" class="date">
+            {{ item.meta | getDate }}
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'technology',
+  props: {
+    technologyList: { type: Array },
+    total: { type: Number },
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1, //默认数据1
+      pageSize: 10, //每页显示数据数量
+      origin: [], //分割数据
+      list: [], //显示数据列表
+    };
+  },
+  created() {},
+  methods: {
+    searchPage(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    // 详情
+    clickDetail(id) {
+      this.$emit('clickDetail', { column_name: '科技需求', id: id });
+    },
+  },
+  watch: {
+    technologyList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .list {
+    padding: 12px 0;
+    .name {
+      font-size: 18px;
+    }
+    .field {
+      font-size: 16px;
+    }
+    .date {
+      text-align: center;
+      font-size: 16px;
+    }
+  }
+  .list:nth-child(5) {
+    border-bottom: 1px solid #ccc;
+  }
+  .list:hover {
+    cursor: pointer;
+    .name {
+      -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: #0085d2;
+    }
+  }
+}
+.page {
+  text-align: center;
+  height: 40px;
+  padding: 5px 0;
+}
+</style>

src/views/market/marketlists.vue

@@ -23,11 +23,53 @@
                 </el-col>
               </el-col>
               <el-col :span="24" class="listDown">
-                <el-button @click="display = 'detail'">详情</el-button>
+                <span v-if="column_name == '科技需求'">
+                  <technology :technologyList="technologyList" :total="technologyTotal" @clickDetail="clickDetail"></technology>
+                </span>
+                <span v-else-if="column_name == '技术成果'">
+                  <achieve :achieveList="achieveList" :total="achieveTotal" @clickDetail="clickDetail"></achieve>
+                </span>
+                <span v-else-if="column_name == '商务信息'">
+                  <business :businessList="businessList" :total="businessTotal" @clickDetail="clickDetail"></business>
+                </span>
+                <span v-else-if="column_name == '专家服务'">
+                  <expert :expertList="expertList" :total="expertTotal" @clickDetail="clickDetail"></expert>
+                </span>
               </el-col>
             </span>
             <span v-else>
-              <el-button @click="display = 'list'">返回</el-button>
+              <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"></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"></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"></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"></expeDetail>
+                </el-col>
+              </span>
             </span>
           </el-col>
         </div>
@@ -37,11 +79,36 @@
 </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('enterpriseproject');
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
 export default {
   name: 'marketlists',
   props: {},
-  components: {},
+  components: {
+    // 科技需求
+    technology,
+    techDetail,
+    // 技术成果
+    achieve,
+    achiDetail,
+    // 商务信息
+    business,
+    busiDetail,
+    // 专家服务
+    expert,
+    expeDetail,
+  },
   data: function() {
     return {
       squareImage: require('@/assets/live/square_big.png'),
@@ -56,13 +123,32 @@ export default {
       column_name: '科技需求',
       // 搜索
       infoName: '',
+      // 列表&詳情
+      // 科技需求
+      technologyList: [],
+      technologyTotal: 0,
+      techDetail: {},
+      // 技术成果
+      achieveList: [],
+      achieveTotal: 0,
+      achiDetail: {},
+      // 商务信息
+      businessList: [],
+      businessTotal: 0,
+      busiDetail: {},
+      // 专家信息
+      expertList: [],
+      expertTotal: 0,
+      expeDetail: {},
     };
   },
   created() {
     this.searchColumn();
   },
   methods: {
-    // 查询栏目
+    ...product({ productList: 'newquery', productFetch: 'newfetch' }),
+    ...expertsuser({ expertsuserList: 'query', expertsuserFetch: 'fetch' }),
+    // 查询栏目，列表，详情
     async searchColumn() {
       if (this.type == 0) {
         this.changeMenu(this.columnName, this.type);
@@ -75,6 +161,8 @@ export default {
       }
       if (this.id) {
         this.display = 'detail';
+        // 查看详情
+        this.searchDetail(this.columnName, this.id);
       } else {
         this.display = 'list';
       }
@@ -85,6 +173,49 @@ export default {
       this.column_name = name;
       this.menuIndex = index;
       this.menuColor = 'rgb(254, 149, 14)';
+      this.searchInfo({ name });
+    },
+    // 查看列表
+    async searchInfo({ skip = 0, limit = 10, name, ...info } = {}) {
+      if (name == '科技需求') {
+        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 (name == '技术成果') {
+        let res = await this.productList({ skip, type: '1', status: '1', ...info });
+        if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
+        this.$set(this, `achieveTotal`, res.total);
+      } else if (name == '商务信息') {
+        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 (name == '专家服务') {
+        let res = await this.expertsuserList({ skip, ...info });
+        if (this.$checkRes(res)) 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);
     },
   },
   computed: {
@@ -148,7 +279,7 @@ export default {
   .listInfo {
     float: right;
     width: 78%;
-    height: 600px;
+    min-height: 600px;
     overflow: hidden;
     box-shadow: 0 0 10px #2d64b3;
     padding: 10px;