1

src/views/market/detail/patentDetail.vue

@@ -1,40 +1,82 @@
 <template>
   <div id="patentDetail">
     <el-row>
-      <el-col :span="24">
-        <el-col :span="24" class="image">
-          <el-image :src="detailInfo.url"></el-image>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="7" class="left">
+            <el-col :span="24" class="noImage" v-if="detailInfo.effective_date">
+              <p>专利有效性</p>
+              <p>{{ detailInfo.effective_date }}</p>
+            </el-col>
+            <el-image v-else :src="url"></el-image>
+          </el-col>
+          <el-col :span="17" class="right">
+            <el-col :span="24" class="name textOver">
+              {{ detailInfo.name }}
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                申请日
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.create_date || '暂无' }}
+              </el-col>
+            </el-col>
+
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                公开(公告)号
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.number || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                公开(公告)日
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.complete_date || '暂无' }}
+              </el-col>
+            </el-col>
+
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                发明人
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.inventor || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                发明人地址
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.inventor_address || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                代理人
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.agency_person || '暂无' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="5" class="otherInfo textOver">
+                代理机构
+              </el-col>
+              <el-col :span="19" class="otherInfo textOver">
+                {{ detailInfo.agency || '暂无' }}
+              </el-col>
+            </el-col>
+          </el-col>
         </el-col>
-        <el-col :span="24" class="type"> {{ detailInfo.type }}专利证书 </el-col>
-        <el-col :span="24" class="otherInfo">
-          <p>
-            <span>名称：</span>
-            <span>{{ detailInfo.title }}</span>
-          </p>
-          <p>
-            <span>发明人：</span>
-            <span>{{ detailInfo.name }}</span>
-          </p>
-          <p>
-            <span>专利号：</span>
-            <span>{{ detailInfo.num }}</span>
-          </p>
-          <p>
-            <span>专利申请日：</span>
-            <span>{{ detailInfo.create_date }}</span>
-          </p>
-          <p>
-            <span>专利授人：</span>
-            <span>{{ detailInfo.pubilc }}</span>
-          </p>
-          <p>
-            <span>授权公告日：</span>
-            <span>{{ detailInfo.release_date }}</span>
-          </p>
-          <p>
-            <span>专利详情：</span>
-            {{ detailInfo.brief }}
-          </p>
+        <el-col :span="24" class="down">
+          <h1>摘要</h1>
+          <p>{{ detailInfo.content || '暂无' }}</p>
         </el-col>
       </el-col>
     </el-row>
@@ -48,21 +90,13 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'patentDetail',
-  props: {},
+  props: {
+    detailInfo: { type: Object },
+  },
   components: {},
   data: function() {
     return {
-      detailInfo: {
-        url: require('@a/fmzl.jpg'),
-        type: '实用类型',
-        title: '计算机发明',
-        name: '发明人',
-        num: '123456789',
-        create_date: '2020-01-06',
-        pubilc: '授权人',
-        release_date: '2020-01-06',
-        brief: '信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
-      },
+      url: require('@a/fmzl.jpg'),
     };
   },
   created() {},
@@ -76,34 +110,61 @@ export default {
 
 <style lang="less" scoped>
 .main {
-  .image {
-    text-align: center;
-    .el-image {
-      width: 150px;
-      height: 150px;
-    }
-  }
-  .type {
-    font-size: 20px;
-    font-weight: bold;
-    text-align: center;
-    padding: 15px 0;
-  }
-  .otherInfo {
-    p {
-      padding: 10px 0;
-      font-size: 18px;
-      font-weight: bold;
-      span {
-        font-size: 18px;
+  margin: 15px 0 0 0;
+  .top {
+    margin: 0 0 10px 0;
+    .left {
+      margin: 0 10px 0 0;
+      border: 1px solid #ccc;
+      .el-image {
+        width: 100%;
+        height: 320px;
       }
-      span:nth-child(1) {
-        color: #666;
+      .noImage {
+        height: 320px;
+        p:nth-child(1) {
+          font-size: 25px;
+          text-align: left;
+          padding: 10px;
+        }
+        p:nth-child(2) {
+          text-align: center;
+          padding: 25% 0;
+          font-size: 35px;
+          font-weight: bold;
+        }
       }
-      span:nth-child(2) {
+    }
+    .right {
+      width: 638px;
+      border: 1px solid #ccc;
+      .name {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 10px;
+        border-bottom: 1px solid #ccc;
+        font-size: 18px;
         font-weight: bold;
+        text-align: center;
+      }
+      .otherInfo {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 0 0 10px;
+        border-right: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        font-size: 16px;
       }
     }
   }
+  .down {
+    border: 1px solid #cccccc;
+    padding: 10px;
+    p {
+      font-size: 18px;
+      line-height: 38px;
+      text-indent: 2rem;
+    }
+  }
 }
 </style>

src/views/market/index.vue

@@ -54,6 +54,8 @@ import business from './index/business.vue';
 import expert from './index/expert.vue';
 import roadshow from './index/roadshow.vue';
 import patent from './index/patent.vue';
+// 专利信息
+import { patentList } from '@/util/patent.js';
 
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: product } = createNamespacedHelpers('marketproduct');
@@ -90,14 +92,7 @@ export default {
       // 项目路演
       roadshowList: [],
       // 专利
-      patentList: [
-        { id: '1', url: require('@a/fmzl.jpg'), title: '发明专利' },
-        { id: '2', url: require('@a/fmzl.jpg'), title: '发明专利' },
-        { id: '3', url: require('@a/fmzl.jpg'), title: '发明专利' },
-        { id: '4', url: require('@a/fmzl.jpg'), title: '发明专利' },
-        { id: '5', url: require('@a/fmzl.jpg'), title: '发明专利' },
-        { id: '6', url: require('@a/fmzl.jpg'), title: '发明专利' },
-      ],
+      patentList: patentList,
     };
   },
   created() {

src/views/market/index/patent.vue

@@ -13,8 +13,8 @@
             :key="index"
             @click.native="$router.push({ path: '/market/marketlists', query: { type: '5', column_name: 'e专利', id: item.id } })"
           >
-            <el-image :src="item.url"></el-image>
-            <p class="textOver">{{ item.title }}</p>
+            <el-image :src="url"></el-image>
+            <p class="textOver">{{ item.name }}</p>
           </el-col>
         </el-col>
       </el-col>
@@ -38,6 +38,7 @@ export default {
   },
   data: function() {
     return {
+      url: require('@a/fmzl.jpg'),
       topInfo: {
         title: 'e专利',
         engTitle: 'Patent',

src/views/market/list/patent.vue

@@ -13,11 +13,11 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
-          <el-col :span="15" class="name textOver" @click.native="clickDetail('1')">{{ item.name }} </el-col>
-          <el-col :span="6" class="type textOver"> 行业分类：{{ item.type }} </el-col>
-          <el-col :span="3" class="date"> {{ item.date }} </el-col>
+          <el-col :span="15" class="name textOver" @click.native="clickDetail(item.id)">{{ item.name }} </el-col>
+          <el-col :span="6" class="type textOver"> 专利有限性：{{ item.effective_date }} </el-col>
+          <el-col :span="3" class="date"> {{ item.complete_date }} </el-col>
           <el-col :span="24" class="brief">
-            {{ item.brief }}
+            {{ item.content }}
           </el-col>
         </el-col>
       </el-col>
@@ -48,44 +48,7 @@ export default {
   data: function() {
     return {
       infoName: '',
-      list: [
-        {
-          name: 'e专利',
-          type: '计算机行业',
-          date: '2020-01-06',
-          brief: '信息简介',
-        },
-        {
-          name: 'e专利',
-          type: '计算机行业',
-          date: '2020-01-06',
-          brief: '信息简介',
-        },
-        {
-          name: 'e专利',
-          type: '计算机行业',
-          date: '2020-01-06',
-          brief: '信息简介',
-        },
-        {
-          name: 'e专利',
-          type: '计算机行业',
-          date: '2020-01-06',
-          brief: '信息简介',
-        },
-        {
-          name: 'e专利',
-          type: '计算机行业',
-          date: '2020-01-06',
-          brief: '信息简介',
-        },
-        {
-          name: 'e专利',
-          type: '计算机行业',
-          date: '2020-01-06',
-          brief: '信息简介',
-        },
-      ],
+      list: [],
       currentPage: 1, //默认数据1
       pageSize: 6, //每页显示数据数量
       origin: [], //分割数据
@@ -108,7 +71,20 @@ export default {
       this.$emit('searchData', { name: this.infoName, columnName: 'e专利' });
     },
   },
-  watch: {},
+  watch: {
+    patentList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) {
+          this.$set(this, `origin`, _.chunk(val, this.pageSize));
+          this.searchPage();
+        } else {
+          this.$set(this, `list`, []);
+        }
+      },
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {

src/views/market/marketlists.vue

@@ -81,7 +81,7 @@
                   <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                 </el-col>
                 <el-col :span="24">
-                  <patentDetail></patentDetail>
+                  <patentDetail :detailInfo="patentDetail"></patentDetail>
                 </el-col>
               </span>
               <span v-else-if="column_name == '商务服务'">
@@ -139,6 +139,8 @@ import busiDetail from './detail/busiDetail.vue';
 import expeDetail from './detail/expeDetail.vue';
 import techDetail from './detail/techDetail.vue';
 import roadDetail from './detail/roadDetail.vue';
+// 专利信息
+import { patentList } from '@/util/patent.js';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: product } = createNamespacedHelpers('marketproduct');
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
@@ -195,8 +197,9 @@ export default {
       // 其他单位列表
       dropList: [],
       // e专利
-      patentList: [],
-      patentTotal: 0,
+      patentList: patentList,
+      patentTotal: 5,
+      patentDetail: {},
       // 商务服务
       businessList: [],
       businessTotal: 0,
@@ -306,7 +309,8 @@ export default {
         let res = await this.productFetch(id);
         if (this.$checkRes(res)) this.$set(this, `achiDetail`, res.data);
       } else if (columnName == 'e专利') {
-        console.log('e专利');
+        let res = this.patentList.find(i => i.id == id);
+        if (res) this.$set(this, `patentDetail`, res);
       } else if (columnName == '商务服务') {
         let res = await this.productFetch(id);
         if (this.$checkRes(res)) this.$set(this, `busiDetail`, res.data);