更新

src/router/index.js

@@ -260,6 +260,13 @@ const live = [
     component: () => import('../views/hall/productList/expertList.vue'),
   },
 
+  // 直播大厅-查看更多技术列表
+  {
+    path: '/hall/productList/technologyList',
+    name: 'live_technologyList',
+    meta: { title: '产品列表', subSite: true },
+    component: () => import('../views/hall/productList/technologyList.vue'),
+  },
   {
     path: '/hall/index',
     name: 'hall_index',

src/views/hall/direct.vue

@@ -113,101 +113,162 @@
               <el-tabs type="border-card" @tab-click="handleClick">
                 <el-tab-pane label="找技术">
                   <el-col :span="24" class="one">
-                    <el-col :span="24" class="onnList" v-for="(item, index) in jishulist" :key="index">
-                      <el-col :span="20" class="oneName">
-                        {{ item.name }}
+                    <el-row class="jishulist">
+                      <el-col :span="24" class="topList">
+                        <el-col :span="24" class="list" v-for="(item, index) in jishulist" :key="index">
+                          <el-col :span="20" class="name">
+                            <p>{{ item.name }}</p>
+                          </el-col>
+                          <el-col :span="4" class="click">
+                            <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
+                            <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>
-                      <el-col :span="4" class="btn">
-                        <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
+                      <el-col :span="24" class="btn">
                         <el-button
+                          type="primary"
                           size="mini"
-                          type="success"
-                          @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id, user_id: user_id } })"
-                          >对接</el-button
+                          @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '技术' } })"
+                          >查看所有项目</el-button
                         >
                       </el-col>
-                      <el-col :span="24" class="oneInfo">
-                        <el-col :span="12" class="oneInfoLeft">
-                          <p>
-                            <span>类型:{{ item.totaltype === '0' ? '技术' : item.totaltype === '1' ? '产品' : item.totaltype === '2' ? '服务' : '暂无' }}</span>
-                            <span>研发阶段:{{ item.phase == '0' ? '阶段成果' : item.phase == '1' ? '阶段成果' : '暂无' }}</span>
-                          </p>
-                          <p>
-                            <span>交易方式:{{ item.business == '0' ? '公用' : item.business == '1' ? '转让' : item.business == '2' ? '竞价' : '暂无' }}</span>
-                            <span>交易价格:{{ item.price || '暂无' }}/{{ item.priceunit || '暂无' }}</span>
-                          </p>
-                        </el-col>
-                        <el-col :span="12" class="oneInfoRight">
-                          {{ item.introduction }}
-                        </el-col>
-                      </el-col>
-                    </el-col>
+                    </el-row>
                   </el-col>
                 </el-tab-pane>
                 <el-tab-pane label="找产品">
                   <el-col :span="24" class="one">
-                    <el-col :span="24" class="onnList" v-for="(item, index) in demandList" :key="index">
-                      <el-col :span="20" class="oneName">
-                        {{ item.name }}
-                      </el-col>
-                      <el-col :span="4" class="btn">
-                        <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
-                        <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 :span="24" class="oneInfo">
-                        <el-col :span="12" class="oneInfoLeft">
-                          <p>
-                            <span>类型:{{ item.totaltype === '0' ? '技术' : item.totaltype === '1' ? '产品' : item.totaltype === '2' ? '服务' : '暂无' }}</span>
-                            <span>研发阶段:{{ item.phase == '0' ? '阶段成果' : item.phase == '1' ? '阶段成果' : '暂无' }}</span>
-                          </p>
-                          <p>
-                            <span>交易方式:{{ item.business == '0' ? '公用' : item.business == '1' ? '转让' : item.business == '2' ? '竞价' : '暂无' }}</span>
-                            <span>交易价格:{{ item.price || '暂无' }}/{{ item.priceunit || '暂无' }}</span>
-                          </p>
+                    <el-row>
+                      <el-col :span="24" class="demandList">
+                        <el-col :span="24" class="topList">
+                          <el-col :span="24" class="list" v-for="(item, index) in demandList" :key="index">
+                            <el-col :span="20" class="name">
+                              <p>{{ item.name }}</p>
+                            </el-col>
+                            <el-col :span="4" class="click">
+                              <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
+                              <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 :span="16" class="otherInfo">
+                              <el-col :span="12">
+                                <p class="field">
+                                  <span>所属领域:</span
+                                  ><span>{{
+                                    item.field == '0'
+                                      ? '先进制造'
+                                      : item.field == '1'
+                                      ? '新材料'
+                                      : item.field == '2'
+                                      ? '光电子'
+                                      : item.field == '3'
+                                      ? '信息技术'
+                                      : item.field == '4'
+                                      ? '文化和科技融合'
+                                      : '暂无'
+                                  }}</span>
+                                </p>
+                              </el-col>
+                              <el-col :span="12">
+                                <p class="coopermode">
+                                  <span>合作方式:</span
+                                  ><span>
+                                    {{
+                                      item.coopermode == '0'
+                                        ? '技术转让'
+                                        : item.coopermode == '1'
+                                        ? '技术服务'
+                                        : item.coopermode == '2'
+                                        ? '技术许可'
+                                        : item.coopermode == '3'
+                                        ? '技术融资'
+                                        : item.coopermode == '4'
+                                        ? '其他'
+                                        : '暂无'
+                                    }}
+                                  </span>
+                                </p>
+                              </el-col>
+                            </el-col>
+                            <el-col :span="8" class="introduction">
+                              <p><span>简介:</span>{{ item.introduction }}</p>
+                            </el-col>
+                          </el-col>
                         </el-col>
-                        <el-col :span="12" class="oneInfoRight">
-                          {{ item.introduction }}
+                        <el-col :span="24" class="btn">
+                          <el-button
+                            type="primary"
+                            size="mini"
+                            @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '产品' } })"
+                            >查看所有项目</el-button
+                          >
                         </el-col>
                       </el-col>
-                    </el-col>
+                    </el-row>
                   </el-col>
                 </el-tab-pane>
                 <el-tab-pane label="找服务">
                   <el-col :span="24" class="one">
-                    <el-col :span="24" class="onnList" v-for="(item, index) in serviceList" :key="index">
-                      <el-col :span="20" class="oneName">
-                        {{ item.name }}
-                      </el-col>
-                      <el-col :span="4" class="btn">
-                        <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
-                        <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 :span="24" class="oneInfo">
-                        <el-col :span="12" class="oneInfoLeft">
-                          <p>
-                            <span>类型:{{ item.totaltype === '0' ? '技术' : item.totaltype === '1' ? '产品' : item.totaltype === '2' ? '服务' : '暂无' }}</span>
-                            <span>研发阶段:{{ item.phase == '0' ? '阶段成果' : item.phase == '1' ? '阶段成果' : '暂无' }}</span>
-                          </p>
-                          <p>
-                            <span>交易方式:{{ item.business == '0' ? '公用' : item.business == '1' ? '转让' : item.business == '2' ? '竞价' : '暂无' }}</span>
-                            <span>交易价格:{{ item.price || '暂无' }}/{{ item.priceunit || '暂无' }}</span>
-                          </p>
+                    <el-row>
+                      <el-col :span="24" class="serviceList">
+                        <el-col :span="24" class="topList">
+                          <el-col :span="24" class="list" v-for="(item, index) in serviceList" :key="index">
+                            <el-col :span="20" class="name">
+                              <p>{{ item.name }}</p>
+                            </el-col>
+                            <el-col :span="4" class="click">
+                              <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
+                              <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 :span="16" class="otherInfo">
+                              <el-col :span="12">
+                                <p class="field">
+                                  <span>所属领域:</span
+                                  ><span>{{
+                                    item.field == '0'
+                                      ? '先进制造'
+                                      : item.field == '1'
+                                      ? '新材料'
+                                      : item.field == '2'
+                                      ? '光电子'
+                                      : item.field == '3'
+                                      ? '信息技术'
+                                      : item.field == '4'
+                                      ? '文化和科技融合'
+                                      : '暂无'
+                                  }}</span>
+                                </p>
+                              </el-col>
+                            </el-col>
+                            <el-col :span="8" class="introduction">
+                              <p><span>简介:</span>{{ item.introduction }}</p>
+                            </el-col>
+                          </el-col>
                         </el-col>
-                        <el-col :span="12" class="oneInfoRight">
-                          {{ item.introduction }}
+                        <el-col :span="24" class="btn">
+                          <el-button
+                            type="primary"
+                            size="mini"
+                            @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '服务' } })"
+                            >查看所有项目</el-button
+                          >
                         </el-col>
                       </el-col>
-                    </el-col>
+                    </el-row>
                   </el-col>
                 </el-tab-pane>
                 <el-tab-pane label="找专家">
@@ -581,22 +642,17 @@ export default {
     //技术
     async searchInfo(newname) {
       let res = await this.mapProductQuery({ skip: 0, limit: 10, totaltype: '0', name: newname });
+      console.log(res);
       if (this.$checkRes(res)) this.$set(this, `jishulist`, res.data);
-      // res = await this.mapProductQuery({ skip: 0, limit: 10, totaltype: '1' });
-      // if (this.$checkRes(res)) this.$set(this, `demandList`, res.data);
-      // res = await this.mapProductQuery({ skip: 0, limit: 10, totaltype: '2' });
-      // if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
-      // res = await this.expertQuery({ skip: 0, limit: 10 });
-      // if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
     },
     //产品
     async searchchanpin(newname) {
-      let res = await this.mapProductQuery({ skip: 0, limit: 10, totaltype: '1', name: newname });
+      let res = await this.mapProductQuery({ skip: 0, limit: 5, totaltype: '1', name: newname });
       if (this.$checkRes(res)) this.$set(this, `demandList`, res.data);
     },
     //服务
     async searchfuwu(newname) {
-      let res = await this.mapProductQuery({ skip: 0, limit: 10, totaltype: '2', name: newname });
+      let res = await this.mapProductQuery({ skip: 0, limit: 5, totaltype: '2', name: newname });
       if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
     },
     //专家
@@ -663,7 +719,7 @@ export default {
     // 技术,产品，服务详情
     oneBtnDetail(data) {
       this.dialogVisible = true;
-      console.log(data.introduction.length);
+      console.log(data);
       this.$set(this, `directInfo`, data);
     },
     // 关闭dialog
@@ -1221,4 +1277,112 @@ export default {
 /deep/.video-js {
   height: 396px !important;
 }
+// 新增
+// 产品
+.jishulist {
+  .topList {
+    .list {
+      border-bottom: 1px dashed #ccc;
+      padding: 6px 0;
+      .name {
+        height: 30px;
+        line-height: 30px;
+        p {
+          font-size: 16px;
+        }
+      }
+      .click {
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+      }
+    }
+  }
+  .btn {
+    margin: 6px 0 0 0;
+    text-align: center;
+  }
+}
+// 技术
+.demandList {
+  .topList {
+    .list {
+      padding: 11px 0;
+      border-bottom: 1px dashed #ccc;
+      .name {
+        height: 30px;
+        line-height: 30px;
+        p {
+          font-size: 16px;
+        }
+      }
+      .click {
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+      }
+      .otherInfo {
+        .field {
+          font-size: 14px;
+          padding: 8px 0 0 0;
+        }
+        .coopermode {
+          font-size: 14px;
+          padding: 8px 0 0 0;
+        }
+      }
+      .introduction {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .btn {
+    text-align: center;
+    margin: 6px 0 0 0;
+  }
+}
+// 服务
+.serviceList {
+  .topList {
+    .list {
+      padding: 11px 0;
+      border-bottom: 1px dashed #ccc;
+      .name {
+        height: 30px;
+        line-height: 30px;
+        p {
+          font-size: 16px;
+        }
+      }
+      .click {
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+      }
+      .otherInfo {
+        .field {
+          font-size: 14px;
+          padding: 8px 0 0 0;
+        }
+      }
+      .introduction {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .btn {
+    text-align: center;
+    margin: 6px 0 0 0;
+  }
+}
 </style>

src/views/hall/productList/technologyList.vue

@@ -1,25 +1,91 @@
 <template>
   <div id="technologyList">
-    <p>技术产品服务列表</p>
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-image :src="beijingPic"></el-image>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="top">
+              <p>吉林省计算中心对接直播大厅</p>
+              <p>主办方：吉林省计算中心</p>
+            </el-col>
+            <el-col :span="24" class="main">
+              <el-col :span="24" class="maintop">
+                <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>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
 export default {
   name: 'technologyList',
   props: {},
   components: {},
-  data: function() {
-    return {};
+  data: () => ({
+    beijingPic: require('@a/live/top_3.png'),
+    total: 0,
+    productList: [],
+  }),
+  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 });
+    },
   },
-  created() {},
-  methods: {},
   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 };
@@ -27,4 +93,117 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.style {
+  height: 100vh;
+}
+.style .info {
+  position: relative;
+  top: -450px;
+}
+.style .top {
+  position: relative;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 999;
+  height: 172px;
+  margin: 0 0 20px 0;
+}
+.style .top p:first-child {
+  font-size: 50px;
+  color: #fff;
+}
+.style .top p:last-child {
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  top: 135px;
+}
+.style .main {
+  min-height: 800px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  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;
+  width: 140px;
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  height: 50px;
+  line-height: 50px;
+}
+.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>