列表

src/views/hall/productList/technologyList.vue

@@ -11,8 +11,24 @@
             </el-col>
             <el-col :span="24" class="main">
               <el-col :span="24" class="maintop">
-                <span>项目成果(15)</span>
-                <span>返回活动首页></span>
+                <span>项目成果({{ total }})</span>
+                <span @click="fanhui">返回活动首页></span>
+              </el-col>
+              <el-col :span="24" class="mianbottom">
+                <el-col :span="24" class="all"><span>全部</span> </el-col>
+                <el-col :span="24" class="list" v-for="(item, index) in productList" :key="index">
+                  <span>{{ item.name }}</span>
+                  <span>{{ item.contact_user }}</span>
+                  <el-button
+                    size="mini"
+                    type="success"
+                    @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id, user_id: user_id } })"
+                    >对接</el-button
+                  >
+                </el-col>
+              </el-col>
+              <el-col class="page" :span="24">
+                <el-pagination background layout="total,prev, pager, next,jumper" :total="total" @current-change="handleCurrentChange"> </el-pagination>
               </el-col>
             </el-col>
           </div>
@@ -24,21 +40,52 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
-
+const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
 export default {
   name: 'technologyList',
   props: {},
   components: {},
   data: () => ({
     beijingPic: require('@a/live/top_3.png'),
+    total: 0,
+    productList: [],
   }),
-  created() {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  methods: {
+    ...mapProduct({ mapProductQuery: 'newquery' }),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const type = this.totalType;
+      let res = await this.mapProductQuery({ skip, limit, totaltype: type });
+      this.$set(this, `productList`, res.data);
+      this.$set(this, `total`, res.total);
+    },
+    fanhui() {
+      history.back();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.search({ skip: (val - 1) * 10, limit: 10 });
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    totalType() {
+      const column_name = this.$route.query.column_name;
+      let type;
+      if (column_name === '技术') {
+        type = 0;
+      } else if (column_name === '产品') {
+        type = 1;
+      } else if (column_name === '服务') {
+        type = 2;
+      }
+      return type;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -95,6 +142,10 @@ p {
   background: #fff;
   padding: 30px 20px;
 }
+.maintop {
+  border-bottom: 4px solid rgb(240, 240, 240);
+  padding: 0 0 5px 0;
+}
 .maintop span:first-child {
   display: inline-block;
   background-color: #d80000;
@@ -107,5 +158,52 @@ p {
 }
 .maintop span:nth-child(2) {
   float: right;
+  line-height: 50px;
+  cursor: pointer;
+}
+.all {
+  border-bottom: 1px solid rgb(200, 200, 200);
+  margin: 10px 0;
+}
+.all span {
+  border: 1px #f90 solid;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background: #f90;
+  color: #fff;
+  width: 60px;
+  height: 40px;
+  line-height: 40px;
+  display: inline-block;
+  text-align: center;
+  margin-left: 8px;
+}
+.list {
+  border-bottom: 1px #ccc dashed;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 20px;
+}
+.list:nth-child(2n) {
+  background: #f2f2f2;
+}
+.list span:first-child {
+  float: left;
+  width: 664px;
+  font-size: 14px;
+}
+.list span:nth-child(2) {
+  float: left;
+  width: 200px;
+  font-size: 14px;
+  padding-left: 20px;
+}
+.list .el-button {
+  float: right;
+  margin-top: 12px;
+}
+.page {
+  margin: 20px 0;
+  text-align: center;
 }
 </style>