更新科技超市

src/components/supermaket/supermarket.vue

@@ -17,17 +17,59 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="5" class="fenlei">
-            <fenlei></fenlei>
-          </el-col>
-          <el-col :span="19" class="rightcont">
-            <rightcont :jishuList="jishuList" :chanpinList="chanpinList" :serviceList="serviceList"></rightcont>
-          </el-col>
-          <el-col :span="24" class="fabu">
-            <fabu :fabuList="fabuList"></fabu>
-          </el-col>
-          <el-col :span="24" class="jiaoyi">
-            <jiaoyi :tableData="tableData"></jiaoyi>
+            <fenlei v-on="$listeners" :nativeList="nativeList"></fenlei>
           </el-col>
+          <span v-if="display === 'first'">
+            <el-col :span="19" class="rightcont">
+              <rightcont :jishuList="jishuList" :chanpinList="chanpinList" :serviceList="serviceList"></rightcont>
+            </el-col>
+            <el-col :span="24" class="fabu">
+              <fabu :fabuList="fabuList"></fabu>
+            </el-col>
+            <el-col :span="24" class="jiaoyi">
+              <jiaoyi :tableData="tableData"></jiaoyi>
+            </el-col>
+          </span>
+          <span v-else-if="display === 'second'">
+            <el-col :span="19" class="second">
+              <schoolInfo :schoolList="schoolList" :schoolTotal="schoolTotal"></schoolInfo>
+            </el-col>
+          </span>
+          <span v-else-if="display === 'thirth'">
+            <el-col :span="19" class="second">
+              <scientific :scientificList="scientificList" :scientificTotal="scientificTotal"></scientific>
+            </el-col>
+          </span>
+          <span v-else-if="display === 'fourth'">
+            <el-col :span="19" class="second">
+              <company :companyList="companyList" :companyTotal="companyTotal"></company>
+            </el-col>
+          </span>
+          <span v-else-if="display === 'fivth'">
+            <el-col :span="19" class="second">
+              <mechanism :mechanismList="mechanismList" :mechanismTotal="mechanismTotal"></mechanism>
+            </el-col>
+          </span>
+          <span v-else-if="display === 'sixth'">
+            <el-col :span="19" class="second">
+              研发服务
+            </el-col>
+          </span>
+          <span v-else-if="display === 'seventh'">
+            <el-col :span="19" class="second">
+              技术成果
+            </el-col>
+          </span>
+          <span v-else-if="display === 'eighth'">
+            <el-col :span="19" class="second">
+              创新产品
+            </el-col>
+          </span>
+          <span v-else-if="display === 'nineth'">
+            <el-col :span="19" class="second">
+              咨询服务
+            </el-col>
+          </span>
         </div>
       </el-col>
       <el-col :span="24" class="foot">
@@ -45,6 +87,11 @@ import logo from '@/layout/index/logo.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
 import fenlei from '@/layout/supermarket/fenlei.vue';
 import rightcont from '@/layout/supermarket/rightcont.vue';
+import schoolInfo from '@/layout/supermarket/schoolInfo.vue';
+import scientific from '@/layout/supermarket/scientific.vue';
+import company from '@/layout/supermarket/company.vue';
+import mechanism from '@/layout/supermarket/mechanism.vue';
+
 import fabu from '@/layout/supermarket/fabu.vue';
 import jiaoyi from '@/layout/supermarket/jiaoyi.vue';
 import foot from '@/layout/index/foot.vue';
@@ -53,11 +100,21 @@ export default {
   name: 'supermarket',
   props: {
     info: null, //站点信息
+    nativeList: null, //商务分类
+    display: { type: String, default: 'first' },
     jishuList: null, //技术供求
     chanpinList: null, //产品供求
     serviceList: null, //服务供求
     fabuList: null, //最新发布
     tableData: null, //交易展示
+    schoolList: null, //高校院所
+    schoolTotal: null, //分页
+    scientificList: null, //科研院所
+    scientificTotal: null, //分页
+    companyList: null, //科技企业
+    companyTotal: null, //分页
+    mechanismList: null, //机构团体
+    mechanismTotal: null, //分页
   },
   components: {
     top, //头部
@@ -65,6 +122,10 @@ export default {
     menuInfo, //导航
     fenlei, //商务分类
     rightcont, //商务分类右侧信息列表
+    schoolInfo, //高校院所
+    scientific, //科研院所
+    mechanism, //机构团体
+    company, //科技企业
     fabu, //发布信息列表
     jiaoyi, //交易展示
     foot, //底部
@@ -95,7 +156,7 @@ export default {
   overflow: hidden;
 }
 .main {
-  height: 1240px;
+  min-height: 600px;
   overflow: hidden;
   margin: 10px 0;
 }
@@ -114,17 +175,25 @@ export default {
   margin: 0 0 10px 0;
   overflow: hidden;
 }
+.second {
+  float: left;
+  width: 950px;
+  min-height: 1000px;
+  margin: 0 0 10px 0;
+  overflow: hidden;
+  background-color: #fff;
+}
 .main .fabu {
   float: left;
   width: 1200px;
-  height: 390px;
+  min-height: 10px;
   background-color: #ffffff;
   margin: 0 0 10px 0;
 }
 .main .jiaoyi {
   float: left;
   width: 1200px;
-  height: 230px;
+  min-height: 10px;
   background-color: #ffffff;
 }
 .foot {

src/layout/supermarket/company.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="company">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          科研院所
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li v-for="(item, index) in companyList" :key="index">
+              <el-link :underline="false">
+                <el-col :span="20" class="title textOver">
+                  {{ item.title }}
+                </el-col>
+                <el-col :span="4" class="city textOver"> <i class="el-icon-location"></i>{{ item.city }} </el-col>
+                <el-col :span="24" class="address textOver"> 地址：{{ item.address }} </el-col>
+                <el-col :span="24" class="content">
+                  <span>企业简介：</span>
+                  <p>{{ item.content }}</p>
+                </el-col>
+              </el-link>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="companyTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'company',
+  props: {
+    companyList: null,
+    companyTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.list ul li {
+  float: left;
+  width: 100%;
+  height: 149px;
+  padding: 20px 0 0 0;
+  border-bottom: 1px dashed #ccc;
+}
+.list ul li .title {
+  font-size: 16px;
+  color: #215299;
+  height: 36px;
+  line-height: 36px;
+}
+.list ul li .city {
+  text-align: right;
+  font-size: 12px;
+  color: #1b1b1b;
+  height: 36px;
+  line-height: 36px;
+}
+.list ul li .address {
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+  color: #000;
+}
+.list ul li .content span {
+  float: left;
+  width: 80px;
+  text-align: center;
+  height: 60px;
+  line-height: 25px;
+  font-size: 16px;
+  color: #000;
+}
+.list ul li .content p {
+  float: left;
+  width: 830px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+  color: #666;
+  line-height: 30px;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/supermarket/fenlei.vue

@@ -1,20 +1,14 @@
 <template>
   <div id="fenlei">
-    <el-col class="swfl">
+    <el-col class="swfl" :span="24">
       <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
       <span>商务分类</span>
     </el-col>
-    <el-col>
+    <el-col :span="24">
       <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
-        <el-menu-item index="1"><span slot="title">高校院所</span></el-menu-item>
-        <el-menu-item index="2"><span slot="title">科研院所</span></el-menu-item>
-        <el-menu-item index="3"><span slot="title">科技企业</span></el-menu-item>
-        <el-menu-item index="4"><span slot="title">机构团体</span></el-menu-item>
-        <el-menu-item index="5"><span slot="title">研发服务</span></el-menu-item>
-        <el-menu-item index="6"><span slot="title">技术成果</span></el-menu-item>
-        <el-menu-item index="7"><span slot="title">创新产品</span></el-menu-item>
-        <el-menu-item index="8"><span slot="title">咨询服务</span></el-menu-item>
-        <el-menu-item index="9"><span slot="title">创新人才</span></el-menu-item>
+        <el-menu-item index="1" v-for="(item, index) in nativeList" :key="index"
+          ><span slot="title" @click="clickUrl(item.name)">{{ item.name }}</span></el-menu-item
+        >
       </el-menu>
     </el-col>
   </div>
@@ -23,7 +17,9 @@
 <script>
 export default {
   name: 'fenlei',
-  props: {},
+  props: {
+    nativeList: null,
+  },
   components: {},
   data: () => ({
     src: require('@/assets/swfl.png'),
@@ -31,6 +27,10 @@ export default {
   created() {},
   computed: {},
   methods: {
+    clickUrl(name) {
+      this.$emit('onsave', { name });
+    },
+
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
@@ -44,7 +44,6 @@ export default {
 <style lang="less" scoped>
 .swfl {
   height: 60px;
-  width: 240px;
   line-height: 60px;
   background-color: #22529a;
   text-align: center;

src/layout/supermarket/mechanism.vue

@@ -0,0 +1,161 @@
+<template>
+  <div id="mechanism">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          机构团体
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in mechanismList" :key="index">
+              <el-col :span="8" class="image">
+                <el-image style="width:130px;height:130px;" :src="item.pic"></el-image>
+              </el-col>
+              <el-col :span="16" class="content">
+                <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                <el-col :span="4" class="city">
+                  <i class="el-icon-location"></i>
+                  {{ item.city }}
+                </el-col>
+                <el-col :span="24" class="guimo "> 机构规模：{{ item.guimo }} 机构等级：{{ item.dengji }}</el-col>
+                <el-col :span="24" class="lingyu"
+                  >重点研究领域：<span>{{ item.lingyu }}</span></el-col
+                >
+                <el-col :span="24" class="jianjie"
+                  ><span> 机构简介：</span>
+
+                  <p>{{ item.jianjie }}</p></el-col
+                >
+              </el-col>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="mechanismTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mechanism',
+  props: {
+    mechanismList: null,
+    mechanismTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.schoolList {
+  float: left;
+  height: 149px;
+  width: 100%;
+  padding: 20px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.schoolList .image {
+  width: 130px;
+  padding: 10px 0;
+  margin: 0 20px 0 0;
+}
+.schoolList .content {
+  width: 760px;
+  margin: 10px 0 0 0;
+}
+.schoolList .title {
+  line-height: 36px;
+  font-size: 16px;
+  color: #215299;
+  text-align: left;
+  height: 36px;
+}
+.schoolList .city {
+  line-height: 36px;
+  height: 36px;
+  font-size: 12px;
+  text-align: right;
+}
+
+.schoolList .guimo {
+  font-size: 16px;
+  color: #000000;
+  line-height: 26px;
+}
+.schoolList .lingyu {
+  font-size: 16px;
+  color: #000000;
+  line-height: 26px;
+}
+.schoolList .jianjie span {
+  float: left;
+  width: 80px;
+  height: 42px;
+  text-align: left;
+  font-size: 16px;
+  color: #000;
+  line-height: 25px;
+}
+.schoolList .jianjie p {
+  width: 680px;
+  font-size: 16px;
+  color: #666;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-height: 25px;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/supermarket/rightcont.vue

@@ -23,13 +23,15 @@
           <el-col :span="12" class="jishuList" v-for="(item, index) in jishuList" :key="index">
             <el-link :underline="false">
               <el-col :span="24" class="title">
-                <span class="textOver">{{ item.title }}</span>
+                <span class="textOver">{{ item.name }}</span>
               </el-col>
               <el-col :span="15" class="type">
-                <span>技术类型：{{ item.type }}</span>
+                <span>技术类型：{{ item.product_type_name }}</span>
               </el-col>
-              <el-col :span="9" class="date">日期：{{ item.date }}</el-col>
-              <el-col :span="24" class="yen">价格：￥{{ item.yen }}元/公斤</el-col>
+              <el-col :span="9" class="date"
+                >日期：{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</el-col
+              >
+              <el-col :span="24" class="yen">价格：￥{{ item.price }}/{{ item.priceunit }}</el-col>
             </el-link>
           </el-col>
         </el-tab-pane>
@@ -38,14 +40,14 @@
           <el-col :span="6" class="chanpinList" v-for="(item, index) in chanpinList" :key="index">
             <el-link :underline="false">
               <el-col :span="24" class="images">
-                <el-image style="width:220px;height:160px;" :src="item.pic"></el-image>
+                <el-image style="width:220px;height:160px;" :src="item.url"></el-image>
               </el-col>
               <el-col :span="24" class="title">
-                <span class="textOver">{{ item.title }}</span>
+                <span class="textOver">{{ item.name }}</span>
               </el-col>
-              <el-col :span="15" class="yen"> ￥{{ item.yen }} </el-col>
-              <el-col :span="9" class="type">
-                {{ item.type }}
+              <el-col :span="14" class="yen"> ￥{{ item.price }}/{{ item.priceunit }}</el-col>
+              <el-col :span="10" class="type">
+                {{ item.product_type_name }}
               </el-col>
             </el-link>
           </el-col>
@@ -54,18 +56,17 @@
           <span slot="label">服务供求</span>
           <el-col :span="24" class="serviceList" v-for="(item, index) in serviceList" :key="index">
             <el-col :span="10" class="title">
-              <span class="textOver">{{ item.title }}</span>
+              <span class="textOver">{{ item.name }}</span>
             </el-col>
-            <el-col :span="6" class="type"> 服务类型：{{ item.type }} </el-col>
-            <el-col :span="5" class="yen"> ￥{{ item.yen }} </el-col>
+            <el-col :span="6" class="type"> 服务类型：{{ item.product_type_name }} </el-col>
+            <el-col :span="5" class="yen"> ￥{{ item.price }}/{{ item.priceunit }} </el-col>
             <el-col :span="3" class="date">
-              {{ item.date }}
+              {{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}
             </el-col>
           </el-col>
         </el-tab-pane>
         <el-tab-pane>
-          <span slot="label">人才供求</span>
-          人才供求
+          <span slot="label" @click="clickPerson()">人才供求</span>
         </el-tab-pane>
       </el-tabs>
       <el-link class="more" :underline="false">
@@ -97,6 +98,9 @@ export default {
     handleClose(key, keyPath) {
       console.log(key, keyPath);
     },
+    clickPerson() {
+      this.$router.push({ path: '/personnel/personnel' });
+    },
   },
 };
 </script>

src/layout/supermarket/schoolInfo.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="schoolInfo">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          高校院所
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in schoolList" :key="index">
+              <el-link :underline="false">
+                <el-col :span="8" class="image">
+                  <el-image style="width:130px;height:130px;" :src="item.pic"></el-image>
+                </el-col>
+                <el-col :span="10" class="content">
+                  <el-col :span="18" class="title textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="16" class="com textOver"> 高校网站：{{ item.com }} </el-col>
+                  <el-col :span="20" class="type textOver"> 高校类别：{{ item.type }} </el-col>
+                  <el-col :span="20" class="address textOver"> 高校地址：{{ item.address }} </el-col>
+                </el-col>
+              </el-link>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="schoolTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'schoolInfo',
+  props: {
+    schoolList: null,
+    schoolTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.schoolList {
+  float: left;
+  height: 189px;
+  width: 50%;
+  border-bottom: 1px dashed #ccc;
+}
+.schoolList .image {
+  width: 130px;
+  margin: 20px;
+}
+.title {
+  width: 245px;
+  height: 66px;
+  line-height: 66px;
+  font-size: 20px;
+  color: #215299;
+  text-align: center;
+}
+.com {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.type {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.address {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/supermarket/scientific.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="scientific">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          科研院所
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in scientificList" :key="index">
+              <el-link :underline="false">
+                <el-col :span="8" class="image">
+                  <el-image style="width:130px;height:130px;" :src="item.pic"></el-image>
+                </el-col>
+                <el-col :span="10" class="content">
+                  <el-col :span="18" class="title textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="16" class="com textOver"> 高校网站：{{ item.com }} </el-col>
+                  <el-col :span="20" class="type textOver"> 高校类别：{{ item.type }} </el-col>
+                  <el-col :span="20" class="address textOver"> 高校地址：{{ item.address }} </el-col>
+                </el-col>
+              </el-link>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="scientificTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'scientific',
+  props: {
+    scientificList: null,
+    scientificTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.schoolList {
+  float: left;
+  height: 189px;
+  width: 50%;
+  border-bottom: 1px dashed #ccc;
+}
+.schoolList .image {
+  width: 130px;
+  margin: 20px;
+}
+.title {
+  width: 245px;
+  height: 66px;
+  line-height: 66px;
+  font-size: 20px;
+  color: #215299;
+  text-align: center;
+}
+.com {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.type {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.address {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/trial/native.vue

@@ -4,7 +4,7 @@
       <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
       <span>个人中心</span>
     </el-col>
-    <el-col>
+    <el-col :span="24">
       <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
         <el-menu-item index="1" v-for="(item, index) in nativeList" :key="index"
           ><span slot="title" @click="clickUrl(item.name)">{{ item.name }}</span></el-menu-item

src/views/supermaket/supermarket.vue

@@ -2,11 +2,22 @@
   <div id="supermarket">
     <supermarket-detail
       :info="info"
+      :nativeList="nativeList"
+      @onsave="nativeClick"
+      :display="display"
       :jishuList="jishuList"
       :chanpinList="chanpinList"
       :serviceList="serviceList"
       :fabuList="fabuList"
       :tableData="tableData"
+      :schoolList="schoolList"
+      :scientificList="scientificList"
+      :schoolTotal="schoolTotal"
+      :scientificTotal="scientificTotal"
+      :companyList="companyList"
+      :companyTotal="companyTotal"
+      :mechanismList="mechanismList"
+      :mechanismTotal="mechanismTotal"
     ></supermarket-detail>
   </div>
 </template>
@@ -23,16 +34,37 @@ export default {
     supermarketDetail,
   },
   data: () => ({
-    info: {
-      logo: require('@/assets/logo.png'),
-      banquan: '版权所有：吉林省计算中心',
-      jishu: '技术支持：长春市福瑞科技有限公司',
-      youbian: '邮编：130000',
-      chuanzhen: '传真：239823982',
-      address: '地址：吉林省长春市朝阳区前进大街1244号',
-      phone: '电话：0431-1234567',
-      email: '邮箱：123456@163.com',
-    },
+    info: {},
+    nativeList: [
+      {
+        name: '高校院所',
+      },
+      {
+        name: '科研院所',
+      },
+      {
+        name: '科技企业',
+      },
+      {
+        name: '机构团体',
+      },
+      {
+        name: '研发服务',
+      },
+      {
+        name: '技术成果',
+      },
+      {
+        name: '创新产品',
+      },
+      {
+        name: '咨询服务',
+      },
+      {
+        name: '创新人才',
+      },
+    ],
+    display: 'first',
     jishuList: [
       {
         title: '缩短贝类暂养吐沙净化时间',
@@ -90,6 +122,52 @@ export default {
         deal: '交易完成',
       },
     ],
+    // 高校院所
+    schoolList: [
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '长春工业大学',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
+    ],
+    schoolTotal: 1,
+    // 科研院所
+    scientificList: [
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '科研院所',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
+    ],
+    scientificTotal: 1,
+    // 科技企业
+    companyList: [
+      {
+        title: '长春市福瑞科技有限公司',
+        city: '吉林省 长春市',
+        address: '吉林省长春市朝阳区力旺广场B座16楼1608',
+        content:
+          '长春市福瑞科技有限公司办公室地址位于中国汽车和“新中国电影的摇篮--长春，长春 怡众名城第20幢3单元505室（住所期限至2043年8月19日止），于2013年08月22日在长春市工商行政管理局高新技术产业开发区分局注册成立，注册资本为100万元人民币',
+      },
+    ],
+    companyTotal: 1,
+    // 机构团体
+    mechanismList: [
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '标题',
+        city: '吉林长春',
+        guimo: '562人',
+        dengji: '国家级',
+        lingyu: '重点研究领域',
+        jianjie: '简介',
+      },
+    ],
+    mechanismTotal: 1,
   }),
   created() {
     this.searchSite();
@@ -109,9 +187,34 @@ export default {
         this.$message.error(res.errmsg ? res.errmsg : 'error');
       }
     },
-    async searchInfo({ skip = 0, limit = 6, ...info } = {}) {
+    async searchInfo({ skip = 0, limit = 8, ...info } = {}) {
       const res = await this.ProductQuery({ skip, limit, ...info });
+      console.log(res.data);
       this.$set(this, `fabuList`, res.data);
+      this.$set(this, `jishuList`, res.data);
+      this.$set(this, `chanpinList`, res.data);
+      this.$set(this, `serviceList`, res.data);
+    },
+    async nativeClick({ name }) {
+      if (name === '高校院所') {
+        this.display = 'second';
+      } else if (name === '科研院所') {
+        this.display = 'thirth';
+      } else if (name === '科技企业') {
+        this.display = 'fourth';
+      } else if (name === '机构团体') {
+        this.display = 'fivth';
+      } else if (name === '研发服务') {
+        this.display = 'sixth';
+      } else if (name === '技术成果') {
+        this.display = 'seventh';
+      } else if (name === '创新产品') {
+        this.display = 'eighth';
+      } else if (name === '咨询服务') {
+        this.display = 'nineth';
+      } else {
+        this.$router.push({ path: '/personnel/personnel' });
+      }
     },
   },
 };