1

src/views/achieveLive/detail/productData.vue

@@ -13,8 +13,8 @@
                   <p class="textOver">联系人{{ item.contacts }}</p>
                 </el-col>
                 <el-col :span="24" class="down">
-                  <el-button size="mini" type="primary">详情</el-button>
-                  <el-button size="mini" type="success">对接</el-button>
+                  <el-button size="mini" type="primary" @click="achieveDetailBtn(item)">详情</el-button>
+                  <el-button size="mini" type="success" @click="achievetransBtn(item)">对接</el-button>
                 </el-col>
               </el-col>
             </el-col>
@@ -22,7 +22,7 @@
               <el-button type="primary" size="mini" @click="moreBtn('1')">查看更多项目</el-button>
             </el-col>
           </el-tab-pane>
-          <el-tab-pane label="科技需求" name="second">
+          <el-tab-pane label="科技需求" name="second" disabled>
             <el-col :span="24" class="second">
               <el-col :span="5" class="techolList" v-for="(item, index) in techolList" :key="index">
                 <el-col :span="24" class="top">
@@ -42,16 +42,22 @@
         </el-tabs>
       </el-col>
     </el-row>
+    <el-dialog title="技术成果详情" :visible.sync="dialog" width="55%" :before-close="handleClose">
+      <detailInfo :form="info" :showBtn="false"></detailInfo>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import detailInfo from '../product/detailInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
   name: 'productData',
   props: {},
-  components: {},
+  components: {
+    detailInfo,
+  },
   data: function() {
     return {
       active: 'first',
@@ -62,6 +68,9 @@ export default {
           field: '所属领域',
         },
       ],
+      // 技术成果详情
+      dialog: false,
+      info: {},
     };
   },
   async created() {
@@ -81,6 +90,19 @@ export default {
     moreBtn(type) {
       this.$router.push({ path: '/achieveLive/product/index', query: { dock_id: this.id, type } });
     },
+    // 成果详情
+    achieveDetailBtn(data) {
+      this.$set(this, `info`, data);
+      this.dialog = true;
+    },
+    // 成果对接
+    achievetransBtn(data) {
+      console.log(data);
+    },
+    // 取消查看
+    handleClose() {
+      this.dialog = false;
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/achieveLive/product/detailInfo.vue

@@ -0,0 +1,283 @@
+<template>
+  <div id="detailInfo">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="7" class="left" v-if="form.image != ''">
+            <el-carousel trigger="click" height="345px" :autoplay="false">
+              <el-carousel-item v-for="(item, index) in form.image" :key="index">
+                <el-image :src="item.url" style="width:99%;height:345px;border: 1px solid #ccc;"></el-image>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="7" v-else class="achieveImage">
+            <p class="name textOver">{{ form.name }}</p>
+            <p class="brief">{{ form.achievebrief }}</p>
+            <p class="other">
+              <span class="textOver">领域：{{ form.field }}</span>
+              <span class="textOver">联系人：{{ form.contacts }}</span>
+            </p>
+          </el-col>
+          <el-col :span="17" class="right">
+            <el-col :span="24" class="name textOver">
+              {{ form.name || '暂无' }}
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="4" class="otherInfo textOver">
+                成果单位
+              </el-col>
+              <el-col :span="20" class="otherInfo textOver">
+                {{ form.company }}
+                <el-link v-if="form.companyweb != null || ''" :href="form.companyweb" :underline="false" target="_blank">({{ form.companyweb }})</el-link>
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                所属领域
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.field || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                合作方式
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.cooperation || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                成果状态
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.achievestatus || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                成果来源
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.achievesource || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                成果权属
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.achieveown || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                意向价格
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.intentionprice || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                联系人
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                {{ form.contacts || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <el-col :span="8" class="otherInfo textOver">
+                联系方式
+              </el-col>
+              <el-col :span="16" class="otherInfo textOver">
+                <el-tooltip class="item" effect="dark" placement="top">
+                  <div slot="content">{{ form.email }}/{{ form.qqwx || '暂无' }}</div>
+                  <p class="textOver">{{ form.email }}/{{ form.qqwx || '暂无' }}</p>
+                </el-tooltip>
+              </el-col>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="4" class="otherInfo textOver">
+                项目路演
+              </el-col>
+              <el-col :span="20" class="otherInfo textOver">
+                <el-link :href="form.roadshow" :underline="false">{{ form.roadshow ? '观看演示文件' : '暂无' }}</el-link>
+              </el-col>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="4" class="otherInfo textOver">
+                专利信息
+              </el-col>
+              <el-col :span="20" class="otherInfo textOver" style="padding: 6px">
+                <el-button type="primary" size="mini" @click="dialogTableVisible1 = true">专利信息</el-button>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="downInfo">
+            <el-col :span="4" class="tit">
+              <h2>成果简介</h2>
+            </el-col>
+            <el-col :span="20" class="info">
+              {{ form.achievebrief || '暂无' }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <el-col :span="4" class="tit">
+              <h2>技术特点</h2>
+            </el-col>
+            <el-col :span="20" class="info">
+              {{ form.features || '暂无' }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <el-col :span="4" class="tit">
+              <h2>技术团队</h2>
+            </el-col>
+            <el-col :span="20" class="info">
+              {{ form.team || '暂无' }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <el-col :span="4" class="tit">
+              <h2>商业预期</h2>
+            </el-col>
+            <el-col :span="20" class="info">
+              {{ form.expectations || '暂无' }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="downInfo">
+            <el-col :span="4" class="tit">
+              <h2>合作要求</h2>
+            </el-col>
+            <el-col :span="20" class="info">
+              {{ form.condition || '暂无' }}
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="anniu" v-if="showBtn">
+          <el-button type="primary" size="mini" v-if="this.user.uid != form.userid">交流洽谈</el-button>
+          <el-button type="success" size="mini" v-if="this.user.uid != form.userid">供求对接</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="专利信息" :visible.sync="dialogTableVisible1">
+      <el-table :data="form.patent" style="width: 100%" border>
+        <el-table-column prop="patentinfo" label="专利信息" align="center"> </el-table-column>
+        <el-table-column prop="patentstatus" label="专利状态" align="center"> </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detailInfo',
+  props: {
+    form: { type: Object },
+    showBtn: { type: Boolean, default: () => true },
+  },
+  components: {},
+  data: function() {
+    return {
+      dialogTableVisible1: false,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  margin: 10px 0 0 0;
+  .top {
+    height: 360px;
+    overflow: hidden;
+    .right {
+      padding: 0 0 0 10px;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+        padding: 10px;
+        border: 1px solid #ccc;
+        text-align: center;
+      }
+      .otherInfo {
+        padding: 10px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+      }
+    }
+    .achieveImage {
+      position: relative;
+      height: 348px;
+      background: url('~@common/src/assets/achieve.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      padding: 28px 25px;
+      .name {
+        font-size: 16px;
+        font-weight: bold;
+        margin: 10px 0;
+      }
+      .brief {
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 11;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+      .other {
+        position: absolute;
+        bottom: 10px;
+        width: 82%;
+        font-size: 14px;
+        span {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+    }
+  }
+  .down {
+    margin: 0 0 15px 0;
+    .downInfo {
+      border: 1px solid #ccc;
+      .tit {
+        height: 150px;
+        line-height: 150px;
+        text-align: center;
+        border-right: 1px solid #ccc;
+      }
+      .info {
+        font-size: 16px;
+        padding: 10px;
+        min-height: 150px;
+      }
+    }
+  }
+  .anniu {
+    text-align: center;
+    /deep/.el-button {
+      margin: 0 10px;
+    }
+  }
+}
+</style>