11

src/router/index.js

@@ -52,12 +52,12 @@ const routes = [
     meta: { title: '科技超市', isleftarrow: false },
     component: () => import('../views/market/index.vue'),
   },
-  // {
-  //   path: '/market/productDetail',
-  //   name: 'market_productDetail',
-  //   meta: { title: '科技超市详情', isleftarrow: true },
-  //   component: () => import('../views/market/productDetail.vue'),
-  // },
+  {
+    path: '/market/detail',
+    name: 'detail',
+    meta: { title: '科技超市详情', isleftarrow: true },
+    component: () => import('../views/market/detail.vue'),
+  },
   // {
   //   path: '/market/exportDetail',
   //   name: 'market_exportDetail',

src/views/market/detail.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="detail">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="back"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <span v-if="type == '4'">
+            <pantentDeatil :info="info"></pantentDeatil>
+          </span>
+          <span v-else-if="type == '1'">
+            <tecDetail :info="info"></tecDetail>
+          </span>
+          <span v-else-if="type == '0'">
+            <demandDetail :info="info"></demandDetail>
+          </span>
+          <span v-else-if="type == '2'">
+            <serveDetail :info="info"></serveDetail>
+          </span>
+          <span v-else>
+            <expertDetail></expertDetail>
+          </span>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+//e专利详情
+import pantentDeatil from './detailParts/pantentDeatil.vue';
+//科技成果详情
+import tecDetail from './detailParts/tecDetail.vue';
+//科技需求详情
+import demandDetail from './detailParts/demandDetail.vue';
+//在线服务详情
+import serveDetail from './detailParts/serveDetail.vue';
+//专家智库详情
+import expertDetail from './detailParts/expertDetail.vue';
+const { mapActions: product } = createNamespacedHelpers('product');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    //顶部
+    NavBar,
+    //e专利详情
+    pantentDeatil,
+    //科技成果详情
+    tecDetail,
+    //科技需求详情
+    demandDetail,
+    //在线服务详情
+    serveDetail,
+    //专家智库详情
+    expertDetail,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+    await this.setTitle();
+  },
+  methods: {
+    ...product(['fetch']),
+    //查详情
+    async search() {
+      if (this.type == '4') {
+        console.log('专利');
+        return;
+      }
+      const res = await this.fetch(this.id);
+      // console.log(res.data);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, res.data);
+        // console.log(this.info);
+      }
+    },
+    //设置标题
+    setTitle() {
+      let type = this.type;
+      if (type == '1') {
+        this.$set(this, `title`, '科技成果');
+      } else if (type === '4') {
+        this.$set(this, `title`, 'e专利');
+      } else if (type == '0') {
+        this.$set(this, `title`, '科技需求');
+      } else if (type == '2') {
+        this.$set(this, `title`, '在线服务');
+      } else {
+        this.$set(this, `title`, '专家智库');
+      }
+    },
+    // 返回首页
+    back() {
+      this.$router.push({ path: '/market/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    type() {
+      return this.$route.query.type;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+</style>

src/views/market/detailParts/demandDetail.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="demandDetail">
+    <el-row>
+      <el-col :span="24" class="demandDetail">
+        <el-col :span="24" class="top">
+          <van-swipe style="height: 220px;" vertical>
+            <template v-if="info.image && info.image.length > 0">
+              <van-swipe-item v-for="(item, index) in info.image" :key="index">
+                <van-image :src="item.url" />
+              </van-swipe-item>
+            </template>
+            <template v-else>
+              <van-image :src="noimage" />
+            </template>
+          </van-swipe>
+        </el-col>
+        <el-col :span="24" class="message">
+          <p>
+            <span>产品名称</span>
+            <span>{{ info.name || '暂无' }}</span>
+          </p>
+          <p>
+            <span>需求方</span>
+            <span>{{ info.company || '暂无' }}</span>
+          </p>
+          <p>
+            <span>所属领域</span>
+            <span>{{ info.field || '暂无' }}</span>
+          </p>
+          <p>
+            <span>注册类型</span>
+            <span>{{ info.companytype || '暂无' }}</span>
+          </p>
+          <p>
+            <span>注册时间</span>
+            <span>{{ info.companydate || '暂无' }}</span>
+          </p>
+          <p>
+            <span>注册资金</span>
+            <span>{{ info.companycapital || '暂无' }}</span>
+          </p>
+          <p>
+            <span>投资预算</span>
+            <span>{{ info.budget || '暂无' }}</span>
+          </p>
+
+          <p>
+            <span>紧急程度</span>
+            <span>{{ info.degreeurgency || '暂无' }}</span>
+          </p>
+          <p>
+            <span>合作方式</span>
+            <span>{{ info.cooperation || '暂无' }}</span>
+          </p>
+          <p>
+            <span>联系人</span>
+            <span>{{ info.contacts || '暂无' }}</span>
+          </p>
+          <p>
+            <span>电子邮箱</span>
+            <span>{{ info.email || '暂无' }}</span>
+          </p>
+          <p>
+            <span>需求说明</span>
+            <span>{{ info.requirementdesc || '暂无' }}</span>
+          </p>
+          <p>
+            <span>预期目标</span>
+            <span>{{ info.expect || '暂无' }}</span>
+          </p>
+          <p>
+            <span>需求现状</span>
+            <span>{{ info.present || '暂无' }}</span>
+          </p>
+          <p>
+            <span>合作要求</span>
+            <span>{{ info.condition || '暂无' }}</span>
+          </p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'demandDetail',
+  props: {
+    info: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      noimage: require('@/assets/noimage.jpg'),
+    };
+  },
+  created() {
+    // console.log(this.info);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.demandDetail {
+  .top {
+    padding: 0px 15px;
+    margin-bottom: 10px;
+    min-height: 220px;
+    background-color: #fff;
+    .van-swipe {
+      padding: 10px 0px;
+      box-sizing: border-box;
+      .van-image {
+        height: 200px;
+      }
+    }
+  }
+  .message {
+    background: #fff;
+    padding: 0 15px;
+    min-height: 50px;
+    p {
+      min-height: 50px;
+      line-height: 50px;
+      border-bottom: 1px solid #ccc;
+      span {
+        color: #000;
+      }
+      span:nth-child(1) {
+        display: inline-block;
+        width: 80px;
+        color: #ccc;
+      }
+    }
+    p:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/views/market/detailParts/expertDetail.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="expertDetail">
+    <el-row>
+      <el-col :span="24">
+        <p>expertDetail</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'expertDetail',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/market/detailParts/pantentDeatil.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="pantentDeatil">
+    <el-row>
+      <el-col :span="24">
+        <p>pantentDeatil</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'pantentDeatil',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/market/detailParts/serveDetail.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="serveDetail">
+    <el-row>
+      <el-col :span="24" class="serveDetail">
+        <el-col :span="24" class="message">
+          <p>
+            <span>产品名称</span>
+            <span>{{ info.name || '暂无' }}</span>
+          </p>
+          <p>
+            <span>信息属性</span>
+            <span>{{ info.messattribute || '暂无' }}</span>
+          </p>
+          <p>
+            <span>需求程度</span>
+            <span>{{ info.demand || '暂无' }}</span>
+          </p>
+          <p>
+            <span>联系人</span>
+            <span>{{ info.contacts || '暂无' }}</span>
+          </p>
+          <p>
+            <span>联系方式</span>
+            <span>{{ info.qqwx || '暂无' }}</span>
+          </p>
+          <p>
+            <span>信息描述</span>
+            <span>{{ info.informationdesc || '暂无' }}</span>
+          </p>
+          <p>
+            <span>核心要素</span>
+            <span>{{ info.coreelements || '暂无' }}</span>
+          </p>
+
+          <p>
+            <span>价格信息</span>
+            <span>{{ info.priceinfo || '暂无' }}</span>
+          </p>
+          <p>
+            <span>商务预期</span>
+            <span>{{ info.businessexpect || '暂无' }}</span>
+          </p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'serveDetail',
+  props: {
+    info: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.serveDetail {
+  .message {
+    background: #fff;
+    padding: 0 15px;
+    min-height: 50px;
+    p {
+      min-height: 50px;
+      line-height: 50px;
+      border-bottom: 1px solid #ccc;
+      span {
+        color: #000;
+      }
+      span:nth-child(1) {
+        display: inline-block;
+        width: 80px;
+        color: #ccc;
+      }
+    }
+    p:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/views/market/detailParts/tecDetail.vue

@@ -0,0 +1,184 @@
+<template>
+  <div id="tecDetail">
+    <el-row>
+      <el-col :span="24" class="tecDetail">
+        <!-- <el-col :span="24" class="top">
+          <el-carousel trigger="click" class="carousel">
+            <template v-if="info.image && info.image.length > 0">
+              <el-carousel-item v-for="(item, index) in info.image" :key="index">
+                <el-image :src="item.url" style="width:100%"> </el-image>
+              </el-carousel-item>
+            </template>
+            <template v-else>
+              <el-image :src="noimage"></el-image>
+            </template>
+          </el-carousel>
+        </el-col> -->
+        <el-col :span="24" class="top">
+          <van-swipe style="height: 220px;" vertical>
+            <template v-if="info.image && info.image.length > 0">
+              <van-swipe-item v-for="(item, index) in info.image" :key="index">
+                <van-image :src="item.url" />
+              </van-swipe-item>
+            </template>
+            <template v-else>
+              <van-image :src="noimage" />
+            </template>
+          </van-swipe>
+        </el-col>
+        <el-col :span="24" class="message">
+          <p>
+            <span>产品名称</span>
+            <span>{{ info.name || '暂无' }}</span>
+          </p>
+          <p>
+            <span>所属领域</span>
+            <span>{{ info.field || '暂无' }}</span>
+          </p>
+          <p>
+            <span>合作方式</span>
+            <span>{{ info.cooperation || '暂无' }}</span>
+          </p>
+          <p>
+            <span>成果状态</span>
+            <span>{{ info.achievestatus || '暂无' }}</span>
+          </p>
+          <p>
+            <span>成果来源</span>
+            <span>{{ info.achievesource || '暂无' }}</span>
+          </p>
+          <p>
+            <span>成果权属</span>
+            <span>{{ info.achieveown || '暂无' }}</span>
+          </p>
+          <p>
+            <span>意向价格</span>
+            <span>{{ info.intentionprice || '暂无' }}</span>
+          </p>
+          <p>
+            <span>联系人</span>
+            <span>{{ info.contacts || '暂无' }}</span>
+          </p>
+          <p>
+            <span>联系方式</span>
+            <span>{{ info.email }}/{{ info.qqwx || '暂无' }}</span>
+          </p>
+          <p>
+            <span>项目路演</span>
+            <el-link :href="info.roadshow" :underline="false">{{ info.roadshow ? '观看演示文件' : '暂无' }}</el-link>
+          </p>
+          <p>
+            <span>成果简介</span>
+            <span>{{ info.achievebrief || '暂无' }}</span>
+          </p>
+          <p>
+            <span>技术特点</span>
+            <span>{{ info.features || '暂无' }}</span>
+          </p>
+          <p>
+            <span>技术团队</span>
+            <span>{{ info.team || '暂无' }}</span>
+          </p>
+          <p>
+            <span>商业预期</span>
+            <span>{{ info.expectations || '暂无' }}</span>
+          </p>
+          <p>
+            <span>合作要求</span>
+            <span>{{ info.condition || '暂无' }}</span>
+          </p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'tecDetail',
+  props: {
+    info: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      noimage: require('@/assets/noimage.jpg'),
+    };
+  },
+  created() {
+    console.log(this.info);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tecDetail {
+  // .top {
+  //   background: #fff;
+  //   min-height: 220px;
+  //   padding: 0 15px;
+  //   margin: 0 0 10px 0;
+  //   .carousel {
+  //     height: 200px !important;
+  //     padding: 10px 0;
+  //   }
+  //   .el-image {
+  //     width: 100%;
+  //     height: 200px;
+  //   }
+  //   p {
+  //     font-size: 18px;
+  //     color: #000;
+  //     padding: 0 0 10px 0;
+  //   }
+  // }
+  .top {
+    padding: 0px 15px;
+    margin-bottom: 10px;
+    min-height: 220px;
+    background-color: #fff;
+    .van-swipe {
+      padding: 10px 0px;
+      box-sizing: border-box;
+      .van-image {
+        height: 200px;
+      }
+    }
+  }
+  .message {
+    background: #fff;
+    padding: 0 15px;
+    min-height: 50px;
+    p {
+      min-height: 50px;
+      line-height: 50px;
+      border-bottom: 1px solid #ccc;
+      span {
+        color: #000;
+      }
+      span:nth-child(1) {
+        display: inline-block;
+        width: 80px;
+        color: #ccc;
+      }
+    }
+    p:last-child {
+      border-bottom: none;
+    }
+  }
+}
+// /deep/.el-carousel__container {
+//   height: 200px !important;
+// }
+/deep/.el-link.el-link--default {
+  color: #000;
+}
+</style>

src/views/market/index.vue

@@ -19,19 +19,21 @@
           <el-col :span="24" class="main">
             <van-tabs v-model="active">
               <van-tab title="技术成果">
-                <tec :tecList="tecList"></tec>
+                <tec :tecList="tecList" @detail="detail"></tec>
               </van-tab>
               <van-tab title="e专利">
-                <pantent :pantentList="pantentList"></pantent>
+                <pantent :pantentList="pantentList" @detail="detail" :typeList="typeList"></pantent>
               </van-tab>
               <van-tab title="科技需求">
-                <demand :demandList="demandList"></demand>
+                <demand :demandList="demandList" @detail="detail"></demand>
               </van-tab>
               <van-tab title="专家智库">
-                <expert :expertList="expertList"></expert>
+                <!-- <expert :expertList="expertList" @detail="expertDet"></expert>
+                 -->
+                <expert :expertList="expertList" @detail="detail"></expert>
               </van-tab>
               <van-tab title="在线服务">
-                <serve :serveList="serveList"></serve>
+                <serve :serveList="serveList" @detail="detail"></serve>
               </van-tab>
             </van-tabs>
           </el-col>
@@ -100,22 +102,22 @@ export default {
       active: 0,
       //科技成果列表
       tecList: [],
-      //专利列表
+      //专利列表 假设e专利的type为4，注意这里的type和typeList里面的e专利的type要一样，还有改了详情的type也要改
       pantentList: [
         {
           title: '标题',
           time: '2021-09-19',
-          type: '类型',
+          type: '4',
         },
         {
           title: '标题',
           time: '2021-09-19',
-          type: '类型',
+          type: '4',
         },
         {
           title: '标题',
           time: '2021-09-19',
-          type: '类型',
+          type: '4',
         },
       ],
       //科技需求列表
@@ -192,6 +194,14 @@ export default {
         this.search();
       }
     },
+    //详情
+    detail(data) {
+      this.$router.push({ path: '/market/detail', query: { id: data.id, type: data.type } });
+    },
+    //专家智库详情
+    // expertDet(data) {
+    //   console.log(data);
+    // },
   },
   computed: {
     ...mapState(['user']),

src/views/market/parts/demand.vue

@@ -2,7 +2,7 @@
   <div id="demand">
     <el-row>
       <el-col :span="24" class="demand">
-        <el-col :span="24" class="list" v-for="(item, index) in demandList" :key="index">
+        <el-col :span="24" class="list" v-for="(item, index) in demandList" :key="index" @click.native="detail(item)">
           <el-col :span="24" class="name textOver">
             {{ item.name }}
           </el-col>
@@ -33,7 +33,12 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    //详情
+    detail(data) {
+      this.$emit('detail', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/market/parts/expert.vue

@@ -2,7 +2,7 @@
   <div id="expert">
     <el-row>
       <el-col :span="24" class="expert">
-        <el-col :span="24" class="list" v-for="(item, index) in expertList" :key="index">
+        <el-col :span="24" class="list" v-for="(item, index) in expertList" :key="index" @click.native="detail(item)">
           <el-col :span="6" class="image">
             <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
             <el-image :src="expertimage" v-else></el-image>
@@ -36,7 +36,12 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    //详情
+    detail(data) {
+      this.$emit('detail', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/market/parts/pantent.vue

@@ -2,9 +2,9 @@
   <div id="pantent">
     <el-row>
       <el-col :span="24" class="pantent">
-        <el-col :span="24" class="list" v-for="(item, index) in pantentList" :key="index">
+        <el-col :span="24" class="list" v-for="(item, index) in pantentList" :key="index" @click.native="detail(item)">
           <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
-          <el-col :span="12" class="type textOver">类型：{{ item.type }}</el-col>
+          <el-col :span="12" class="type textOver">类型：{{ getType(item.type) }}</el-col>
           <el-col :span="12" class="time textOver">时间：{{ item.time }}</el-col>
         </el-col>
       </el-col>
@@ -22,13 +22,24 @@ export default {
   name: 'pantent',
   props: {
     pantentList: { type: Array },
+    typeList: { type: Array },
   },
   components: {},
   data: function() {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    //详情
+    detail(data) {
+      this.$emit('detail', data);
+    },
+    //过滤类型
+    getType(type) {
+      let types = this.typeList.find(i => i.type == type);
+      return types.name;
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/market/parts/serve.vue

@@ -2,7 +2,7 @@
   <div id="serve">
     <el-row>
       <el-col :span="24" class="serve">
-        <el-col :span="24" class="list" v-for="(item, index) in serveList" :key="index">
+        <el-col :span="24" class="list" v-for="(item, index) in serveList" :key="index" @click.native="detail(item)">
           <el-col :span="24" class="name textOver">
             {{ item.name }}
           </el-col>
@@ -31,7 +31,12 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    //详情
+    detail(data) {
+      this.$emit('detail', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/market/parts/tec.vue

@@ -2,7 +2,7 @@
   <div id="tec">
     <el-row>
       <el-col :span="24" class="tec">
-        <el-col :span="24" class="list" v-for="(item, index) in tecList" :key="index">
+        <el-col :span="24" class="list" v-for="(item, index) in tecList" :key="index" @click.native="detail(item)">
           <el-col :span="24" class="name textOver">
             {{ item.name }}
           </el-col>
@@ -33,7 +33,12 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    //详情
+    detail(data) {
+      this.$emit('detail', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },