孵化平台-产品展示

src/components/PlatformList/PlatformList.vue

@@ -1,17 +1,26 @@
 <template>
   <div>
     <div class="inner d-flex flex-wrap">
-      <div v-for="(item, index) in list" :key="index" class="item-box" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
+      <div
+        :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
+        :key="index"
+        class="item-box mb-6"
+        v-for="(item, index) in list"
+      >
         <img :src="item.imgUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
-        <p class="font-24 my-4">{{ item.name }}</p>
+        <p class="font-24 my-4 title">{{ item.name }}</p>
-        <p class="font-16 baseColor" style="text-align: right; cursor: pointer" @click="jump(item.id)">了解更多→</p>
+        <p
+          @click="jump(item.id)"
+          class="font-16 baseColor"
+          style="text-align: right; cursor: pointer"
+        >了解更多→</p>
       </div>
     </div>
     <div class="inner">
       <a-pagination
         :current="current"
-        :total="total"
         :page-size="pageSize"
+        :total="total"
         @change="onShowSizeChange"
         class="pagination"
         show-less-items
@@ -34,7 +43,7 @@ export default {
       current: 1,
     };
   },
-  computed: mapState('home', ['listState', 'labList', 'LabIpt', 'insList', 'InsIpt', 'shareCurrent']),
+  computed: mapState('home', ['listState', 'labList', 'LabIpt', 'insList', 'InsIpt', 'shareCurrent', 'productList', 'productIpt']),
   watch: {
     shareCurrent(val) {
       console.log(val);
@@ -72,13 +81,31 @@ export default {
         this.setShareCurrent(1);
       }
     },
+    productList(val) {
+      if (this.shareCurrent === 1) {
+        this.monitor(this.listState);
+      }
+      this.current = 1;
+      this.setShareCurrent(1);
+    },
+    productIpt(val) {
+      if (this.productIpt.isBtn === 1) {
+        if (this.shareCurrent === 1) {
+          this.monitor(this.listState);
+        }
+        this.current = 1;
+        this.setShareCurrent(1);
+      }
+    },
   },
   created() {
     this.current = this.shareCurrent;
     if (this.listState === 0) {
       this.getSear();
-    } else {
+    } else if (this.listState === 1) {
       this.getSelI();
+    } else {
+      this.getProductLists();
     }
   },
   methods: {
@@ -125,6 +152,27 @@ export default {
         console.log(error);
       }
     },
+    // 查询孵化平台产品列表
+    async getProductLists() {
+      try {
+        const params = {
+          param: {
+            content: this.productIpt.content, // 搜索框内容
+            modelIds: this.productList, // 分类ID数组
+            pageNum: this.shareCurrent,
+            pageSize: this.pageSize,
+          },
+        };
+        const res = await selInstrument(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.list = data.list;
+          this.total = parseInt(data.total);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
     // 改变单当前页数
     onShowSizeChange(current, size) {
       this.current = current;
@@ -134,8 +182,10 @@ export default {
     monitor(val) {
       if (val === 0) {
         this.getSear();
-      } else {
+      } else if (val === 1) {
         this.getSelI();
+      } else {
+        this.getProductLists();
       }
     },
     // 查看 研究院/仪器 详情
@@ -152,6 +202,12 @@ export default {
           name: 'InsDet',
           params: { id },
         });
+      } else if (this.listState === 3) {
+        this.$router.push({
+          path: '/NewPlatform/ServiceDet',
+          name: 'ServiceDet',
+          params: { id },
+        });
       }
     },
   },
@@ -168,7 +224,10 @@ export default {
   width: 20.5%;
   margin-right: 6%;
   border-radius: 4px;
-  box-shadow: 6px 6px 6px #eee;
+
+  .title {
+    text-align: center;
+  }
 }
 
 .margin-0 {

src/config/api-user.js

@@ -26,4 +26,4 @@ export const getSmscode = params => axios.get(`${users}/smscode`, params);
 export const changePassword = params => axios.post(`${users}/password`, params);
 
 // 通过userId获取token
-export const getUserId = params => axios.post(`${users}/userId`, params);
+export const getUserId = params => axios.get(`${users}/userId`, params);

src/store/modules/home/mutations.js

@@ -233,6 +233,33 @@ const mutations = {
   setLabId(state, num) {
     state.LabId = num;
   },
+
+  /**
+   * 改变孵化平台-产品展示所选类型所选类型
+   * @param {object} state
+   * @param {List} list
+   */
+  setProductList(state, list) {
+    state.productList = list;
+  },
+
+  /**
+   * 改变孵化平台-产品展示所选类型搜索框内容
+   * @param {object} state
+   * @param {object} obj
+   */
+  setProductIpt(state, obj) {
+    state.productIpt = { ...obj };
+  },
+
+  /**
+   * 改变当前孵化平台-产品展示 详情的 id
+   * @param {object} state
+   * @param {number} num
+   */
+  setProductId(state, num) {
+    state.productId = num;
+  },
 };
 
 export default mutations;

src/store/modules/home/state.js

@@ -31,7 +31,7 @@ const state = {
   },
   achCurrent: 1, // 知识产权与技术转移转化服务平台-成果列表页数
   achId: 0, // 知识产权与技术转移转化服务平台-成果详情页Id
-  listState: 0, // 科技资源开放共享服务平台-列表展示数据（0：实验室，1：仪器//默认0）
+  listState: 0, // 科技资源开放共享服务平台-列表展示数据（0：实验室，1：仪器//默认0, 2：研究院，3：产品）
   shareCurrent: 1, // 科技资源开放共享服务平台-列表当前处于第几页
   labList: [], // 科技资源开放共享服务平台-实验室所选类型
   LabIpt: {
@@ -46,6 +46,13 @@ const state = {
     isBtn: 0,
   },
   LabId: 0, // 当前研究院详情Id
+  productList: [], // 孵化平台-产品展示所选类型
+  productIpt: {
+    // 产品展示搜索框内容
+    content: '',
+    isBtn: 0,
+  },
+  productId: 0, // 当前产品详情Id
 };
 
 export default state;

src/views/IncubationPlatform/Children/Products.vue

@@ -1,31 +1,34 @@
 <template>
-  <div class="inner">
+  <div>
-    <bread-crumb :arr="arr" />
+    <h-nav />
-    <sen-nav />
+    <div class="inner">
-    <div>
+      <bread-crumb :arr="arr" />
-      <div class="search-background">
+      <div>
-        <div class="d-flex">
+        <div class="search-background">
-          <div class="flex-3 flex-wrap">
+          <div class="d-flex">
-            <span class="ins-title">研究开发实验室：</span>
+            <div class="flex-3 flex-wrap">
-            <span
+              <span class="ins-title">产品类目：</span>
-              :class="item.isActive ? 'act-color' : ''"
+              <span
-              :key="index"
+                :class="item.isActive ? 'act-color' : ''"
-              @click="choose(index, 0)"
+                :key="index"
-              class="ins-name"
+                @click="choose(index)"
-              v-for="(item, index) in laboratory"
+                class="ins-name"
-            >{{ item.name }}</span>
+                v-for="(item, index) in productLists"
-          </div>
+              >{{ item.name }}</span>
-          <div class="flex-1 align-center">
+            </div>
-            <a-input-search
+            <div class="flex-1 align-center">
-              @search="searchLab"
+              <a-input-search
-              class="item-search"
+                @search="searchProduct"
-              enter-button="搜索"
+                class="item-search"
-              placeholder="搜索实验室"
+                enter-button="搜索"
-              v-model="LabIpt"
+                placeholder="请输入"
-            />
+                v-model="productIpt"
+              />
+            </div>
           </div>
         </div>
       </div>
+      <p class="font-bold-24">产品展示</p>
     </div>
     <platform-list />
   </div>
@@ -35,40 +38,30 @@
 import { mapMutations } from 'vuex';
 import { selModel } from 'config/api';
 import PlatformList from 'components/PlatformList/PlatformList.vue';
-import SenNav from './components/SenNav.vue';
+import HNav from './../components/HNav.vue';
 import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
 
 export default {
   name: 'Products',
-  components: { BreadCrumb, SenNav, PlatformList },
+  components: { BreadCrumb, HNav, PlatformList },
   data() {
     return {
       arr: [
         { name: '孵化平台', url: '/IncubationPlatform/MakerSpace' },
         { name: '产品展示', url: '' },
       ],
-      LabIpt: '', // 实验室搜索框内容
+      productIpt: '', // 产品搜索框内容
-      laboratory: [], // 实验室
+      productLists: [], // 产品类目
-      labList: [], // 实验室类型选择列表
+      productList: [], // 产品类型选择列表
-      InsIpt: '', // 仪器搜索框内容
-      instrument: [], // 仪器
-      insList: [], // 仪器类型选择列表
     };
   },
   watch: {
-    LabIpt(val) {
+    productIpt(val) {
-      const obj = {
-        content: this.LabIpt,
-        isBtn: 0,
-      };
-      this.setLabIpt(obj);
-    },
-    InsIpt(val) {
       const obj = {
-        content: this.InsIpt,
+        content: this.productIpt,
         isBtn: 0,
       };
-      this.setInsIpt(obj);
+      this.setProductIpt(obj);
     },
   },
   created() {
@@ -76,111 +69,76 @@ export default {
       content: '',
       isBtn: 0,
     };
-    this.setLabList([]);
+    this.setProductList([]);
-    this.setInsList([]);
+    this.setProductIpt(obj);
-    this.setLabIpt(obj);
+    this.getType(3);
-    this.setInsIpt(obj);
-    this.getType(1);
-    this.getType(2);
   },
   methods: {
-    ...mapMutations('home', ['setLabList', 'setInsList', 'setLabIpt', 'setInsIpt', 'setListState']),
+    ...mapMutations('home', ['setProductIpt', 'setProductList', 'setListState']),
     async getType(num) {
       try {
         const params = { param: { model: num } };
         const res = await selModel(params);
         const { code, mst, data } = res.data;
         if (code === 200) {
-          if (num === 1) {
+          this.productLists = data;
-            this.instrument = data;
+          for (let i = 0; i < this.productLists.length; i++) {
-            for (let i = 0; i < this.instrument.length; i++) {
+            this.productLists[i].isActive = false;
-              this.instrument[i].isActive = false;
-            }
-          } else if (num === 2) {
-            this.laboratory = data;
-            for (let i = 0; i < this.laboratory.length; i++) {
-              this.laboratory[i].isActive = false;
-            }
           }
         }
       } catch (error) {
         console.log(error);
       }
     },
+
     // 选中类型时触发
-    choose(index, num) {
+    choose(index) {
-      const that = this;
+      this.productList = [];
-      if (num === 0) {
+      const { productLists } = this;
-        this.labList = [];
+      for (let i = 0; i < productLists.length; i++) {
-        const { laboratory, instrument } = this;
+        productLists[i].isActive = false;
-        for (let i = 0; i < instrument.length; i++) {
-          instrument[i].isActive = false;
-        }
-        this.setListState(0);
-        laboratory[index].isActive = !laboratory[index].isActive;
-        this.laboratory = [...laboratory];
-        for (let i = 0; i < laboratory.length; i++) {
-          if (laboratory[i].isActive) {
-            this.labList.push(laboratory[i].id);
-          }
-        }
-        this.setLabList(this.labList);
-      } else if (num === 1) {
-        this.insList = [];
-        const { laboratory, instrument } = this;
-        for (let i = 0; i < laboratory.length; i++) {
-          laboratory[i].isActive = false;
-        }
-        this.setListState(1);
-        instrument[index].isActive = !instrument[index].isActive;
-        this.instrument = [...instrument];
-        for (let i = 0; i < instrument.length; i++) {
-          if (instrument[i].isActive) {
-            this.insList.push(instrument[i].id);
-          }
-        }
-        this.setInsList(this.insList);
       }
-    },
+      this.setListState(3);
-    searchLab() {
+      productLists[index].isActive = !productLists[index].isActive;
-      const { instrument } = this;
+      this.productLists = [...productLists];
-      for (let i = 0; i < instrument.length; i++) {
+      for (let i = 0; i < productLists.length; i++) {
-        instrument[i].isActive = false;
+        if (productLists[i].isActive) {
+          this.productList.push(productLists[i].id);
+        }
       }
-      this.instrument = [...instrument];
+      this.setProductList(this.productList);
-      this.setListState(0);
-      this.InsIpt = '';
-      const obj = {
-        content: this.LabIpt,
-        isBtn: 1,
-      };
-      this.setLabIpt(obj);
     },
-    searchIns() {
+
-      const { laboratory } = this;
+    // 搜索
-      for (let i = 0; i < laboratory.length; i++) {
+    searchProduct() {
-        laboratory[i].isActive = false;
+      const { productLists } = this;
+      for (let i = 0; i < productLists.length; i++) {
+        productLists[i].isActive = false;
       }
-      this.laboratory = [...laboratory];
+      this.productLists = [...productLists];
-      this.setListState(1);
+      this.setListState(3);
-      this.LabIpt = '';
+      this.productIpt = '';
       const obj = {
-        content: this.InsIpt,
+        content: this.productIpt,
         isBtn: 1,
       };
-      this.setInsIpt(obj);
+      this.setProductList(obj);
     },
   },
 };
 </script>
 
 <style lang="stylus" scoped>
+.inner {
+  margin: 40px auto;
+}
+
 .search-background {
   background: rgba(0, 0, 0, 0.02);
   border: 1px solid rgba(0, 0, 0, 0.06);
   height: auto;
   padding: 0 20px;
-  width: 82%;
+  width: 100%;
   margin: 40px auto;
   line-height: 44px;
 }

src/views/IncubationPlatform/Children/ShareChild/InsDet.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="inner equ-box">
-    <div class="equ-info d-flex">
-      <img :src="obj.img" alt="" />
-      <div class="equ-info-box">
-        <p class="equ-name">{{ obj.name }}</p>
-        <div class="d-flex flex-wrap">
-          <div style="width: 200px" class="equ-info-left">
-            <p>仪器名字：</p>
-            <p>制造商：</p>
-            <p>型号：</p>
-            <p>规格：</p>
-            <p>性能指标：</p>
-            <p>联系人：</p>
-            <p>联系方式：</p>
-          </div>
-          <div style="width: 500px">
-            <p>{{ obj.name }}</p>
-            <p>{{ obj.manufactor }}</p>
-            <p>{{ obj.model }}</p>
-            <p>{{ obj.specifications }}</p>
-            <p>{{ obj.performance }}</p>
-            <p>
-              <span v-for="(item, index) in obj.selPeoList" :key="index">{{ item.contactsName }}、</span>
-            </p>
-            <p>
-              <span v-for="(item, index) in obj.selPeoList" :key="index">{{ item.contactsPhone }}、</span>
-            </p>
-          </div>
-        </div>
-        <p class="equ-btn">
-          <a-button style="margin-right: 20px">转化意向</a-button>
-          <a-button type="primary">加入购物车</a-button>
-        </p>
-      </div>
-    </div>
-    <div class="content-box">
-      <div v-dompurify-html="obj.purpose"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { selInstrumentMes } from 'config/api';
-export default {
-  name: 'InsDet',
-  data() {
-    return {
-      obj: {},
-      id: 0,
-    };
-  },
-  created() {
-    this.id = this.$route.params.id;
-    this.getData();
-  },
-  methods: {
-    async getData() {
-      try {
-        const params = { param: { id: this.id } };
-        const res = await selInstrumentMes(params);
-        const { code, data, msg } = res.data;
-        if (code === 200) {
-          console.log(data);
-          this.obj = data;
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="stylus" scoped>
-.equ-box {
-  background: #fff;
-  padding: 20px;
-  margin: 60px auto;
-}
-
-.equ-info {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.14901960784313725);
-  position: relative;
-  padding-bottom: 24px;
-
-  img {
-    width: 300px;
-    height: 300px;
-  }
-}
-
-.equ-name {
-  font-size: 24px;
-  font-family: Microsoft YaHei;
-  font-weight: bold;
-  line-height: 31px;
-  color: rgba(0, 0, 0, 0.85);
-  opacity: 1;
-}
-
-.equ-info-box {
-  position: relative;
-  font-size: 16px;
-  margin-left: 20px;
-  height: 300px;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.65);
-  opacity: 1;
-
-  p {
-    margin-bottom: 6px;
-  }
-}
-
-.equ-info-left {
-  font-size: 16px;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.45);
-  opacity: 1;
-
-  p {
-    margin-bottom: 6px;
-  }
-}
-
-.equ-btn {
-  position: absolute;
-  bottom: 0;
-}
-
-.content-box {
-  min-height: 400px;
-  padding: 20px;
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.65);
-}
-</style>

src/views/IncubationPlatform/Children/ShareChild/Institute.vue

@@ -1,209 +0,0 @@
-<template>
-  <div>
-    <rotation />
-    <h-nav />
-    <div class="inner ins-box">
-      <p class="font-bold-24 item-title">设备列表</p>
-      <div class="d-flex flex-wrap">
-        <div v-for="(item, index) in list" :key="index" class="item-box" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
-          <img :src="item.imgUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
-          <p class="font-24 my-4">{{ item.name }}</p>
-          <p class="font-16 baseColor item-more" @click="jump(item.id)">了解更多→</p>
-        </div>
-      </div>
-      <p class="font-bold-24 item-title">人才团队带头人情况</p>
-      <div class="d-flex">
-        <div class="header-box" style="flex: 1">
-          <p style="background: #11b7ce; color: #fff">姓名</p>
-          <p>性别</p>
-          <p>民族</p>
-          <p>出生年月</p>
-          <p>学历</p>
-          <p>职称</p>
-          <p>所学专业</p>
-          <p>从事专业</p>
-          <p>团队名称</p>
-          <p>工作单位</p>
-          <p>研究方向</p>
-        </div>
-        <div class="header-box" style="flex: 5; background: #fff">
-          <p style="border-bottom: 1px solid #eee">{{ obj.name }}</p>
-          <p><span v-if="obj.gender - 0 === 1">男</span> <span v-else-if="obj.gender - 0 === 2">女</span></p>
-          <p>{{ obj.famousFamily }}</p>
-          <p>{{ obj.birthday }}</p>
-          <p>{{ obj.education }}</p>
-          <p>{{ obj.position }}</p>
-          <p>{{ obj.major }}</p>
-          <p>{{ obj.professional }}</p>
-          <p>{{ obj.teamName }}</p>
-          <p>{{ obj.workUnit }}</p>
-          <p>{{ obj.direction }}</p>
-        </div>
-      </div>
-      <p class="font-bold-24 item-title">团队成员信息</p>
-      <div style="background: #fff">
-        <div class="d-flex">
-          <div class="h-box" style="flex: 1">姓名</div>
-          <div class="h-box" style="flex: 1">性别</div>
-          <div class="h-box" style="flex: 1">所在单位</div>
-          <div class="h-box" style="flex: 1">出生年月</div>
-          <div class="h-box" style="flex: 1">学历学位</div>
-          <div class="h-box" style="flex: 1">职称职务</div>
-          <div class="h-box" style="flex: 1">研究方向</div>
-        </div>
-        <div class="d-flex" v-for="(item, index) in obj.teamMemberList" :key="index">
-          <div class="con-box" style="flex: 1">{{ item.name }}</div>
-          <div class="con-box" style="flex: 1">
-            <span v-if="item.gender - 0 === 1">男</span>
-            <span v-else-if="item.gender - 0 === 2">女</span>
-          </div>
-          <div class="con-box" style="flex: 1">???????????????</div>
-          <div class="con-box" style="flex: 1">{{ item.birthday }}</div>
-          <div class="con-box" style="flex: 1">{{ item.education }}</div>
-          <div class="con-box" style="flex: 1">{{ item.position }}</div>
-          <div class="con-box" style="flex: 1">{{ item.direction }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations, mapState } from 'vuex';
-import { selInstrumentByRes, teamSearch } from 'config/api';
-import Rotation from 'components/Rotation/Rotation.vue';
-import HNav from './../../components/HNav.vue';
-export default {
-  name: 'Institute',
-  components: { Rotation, HNav },
-  data() {
-    return {
-      id: 0,
-      obj: {},
-      list: [],
-    };
-  },
-  computed: mapState('home', ['LabId']),
-  created() {
-    if (this.$route.params.id) {
-      this.setLabId(this.$route.params.id);
-      this.id = this.$route.params.id;
-    } else {
-      this.id = this.LabId;
-    }
-    this.getData();
-    this.getTeam();
-  },
-  methods: {
-    ...mapMutations('home', ['setLabId']),
-
-    // 获取当前研究院（实验室）下的仪器列表
-    async getData() {
-      try {
-        const params = {
-          param: {
-            id: this.id,
-            pageNum: 1,
-            pageSize: 6,
-          },
-        };
-        const res = await selInstrumentByRes(params);
-        const { code, msg, data } = res.data;
-        if (code === 200) {
-          this.list = data.list;
-          this.total = parseInt(data.total);
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 获取当前研究院（实验室）下的团队详情
-    async getTeam() {
-      try {
-        const params = { param: { instituteId: this.id } };
-        const res = await teamSearch(params);
-        const { code, msg, data } = res.data;
-        if (code === 200) {
-          this.obj = data[0];
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 查看 研究院/仪器 详情
-    jump(id) {
-      this.$router.push({
-        path: '/NewPlatform/Share/InsDet',
-        name: 'InsDet',
-        params: { id },
-      });
-    },
-  },
-};
-</script>
-
-<style lang="stylus" scoped>
-.ins-box {
-  min-height: 500px;
-  height: auto;
-  margin: 40px auto;
-}
-
-.pagination {
-  margin: 40px 0;
-  text-align: right;
-}
-
-.item-more {
-  right: 10px;
-  bottom: 0px;
-  cursor: pointer;
-  position: absolute;
-}
-
-.item-box {
-  position: relative;
-  width: 20.5%;
-  margin-right: 6%;
-  border-radius: 4px;
-  padding-bottom: 40px;
-  box-shadow: 6px 6px 6px #eee;
-}
-
-.margin-0 {
-  margin-right: 0 !important;
-}
-
-.item-title {
-  color: rgba(0, 0, 0, 0.85);
-  margin-top: 60px;
-}
-
-.header-box {
-  text-align: center;
-
-  p {
-    font-size: 24px;
-    color: rgba(0, 0, 0, 0.66);
-    height: 56px;
-    line-height: 56px;
-    margin-bottom: 0 !important;
-  }
-}
-
-.h-box {
-  text-align: center;
-  font-size: 22px;
-  color: #096DD9;
-  height: 56px;
-  line-height: 56px;
-}
-
-.con-box {
-  text-align: center;
-  font-size: 18px;
-  height: 46px;
-  line-height: 46px;
-  color: rgba(112, 112, 112, 0.66);
-}
-</style>