更新

src/layout/supermarket/company.vue

@@ -7,27 +7,27 @@
         </el-col>
         <el-col :span="24" class="list">
           <ul>
-            <li v-for="(item, index) in companyList" :key="index">
+            <li v-for="(item, index) in list" :key="index">
               <el-link :underline="false">
                 <el-col :span="20" class="title textOver">
-                  {{ item.title }}
+                  {{ item.name }}
                 </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="4" class="city textOver"> <i class="el-icon-location"></i>{{ item.city }} </el-col> -->
+                <el-col :span="24" class="address textOver"> 地址：{{ item.addr || '暂无' }} </el-col>
                 <el-col :span="24" class="content">
                   <span>企业简介：</span>
-                  <p>{{ item.content }}</p>
+                  <p>{{ item.companybrief || '暂无' }}</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"
+              :page-size="pageSize"
             >
             </el-pagination>
           </el-col>
@@ -38,6 +38,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 export default {
   name: 'company',
   props: {
@@ -47,15 +48,28 @@ export default {
   components: {},
   data: () => ({
     currentPage: 1,
+    pageSize: 10,
+    origin: [],
+    list: [],
   }),
   created() {},
   computed: {},
   methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    search(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    handleCurrentChange(currentPage) {
+      this.search(currentPage);
+    },
+  },
+  watch: {
+    companyList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.search();
+      },
     },
   },
 };

src/layout/supermarket/enterprise.vue

@@ -56,6 +56,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 export default {
   name: 'enterprise',
   props: {
@@ -66,18 +67,16 @@ export default {
     region: '',
     inputs: '',
     title: '科技企业',
-    currentPage: 1,
-    total: 1,
   }),
   created() {},
   computed: {},
   methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
+    //   search(page = 1) {
+    //     this.$set(this, `list`, this.origin[page - 1]);
+    //   },
+    //   handleCurrentChange(currentPage) {
+    //     this.search(currentPage);
+    //   },
   },
 };
 </script>

src/layout/supermarket/mechanism.vue

@@ -7,35 +7,27 @@
         </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 }}
+            <li v-for="(item, index) in list" :key="index">
+              <el-link :underline="false">
+                <el-col :span="20" class="title textOver">
+                  {{ item.name }}
                 </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>
+                <!-- <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.addr || '暂无' }} </el-col>
+                <el-col :span="24" class="content">
+                  <span>企业简介：</span>
+                  <p>{{ item.companybrief || '暂无' }}</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="mechanismTotal"
+              :page-size="pageSize"
             >
             </el-pagination>
           </el-col>
@@ -46,6 +38,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 export default {
   name: 'mechanism',
   props: {
@@ -55,15 +48,28 @@ export default {
   components: {},
   data: () => ({
     currentPage: 1,
+    pageSize: 10,
+    origin: [],
+    list: [],
   }),
   created() {},
   computed: {},
   methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    search(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    handleCurrentChange(currentPage) {
+      this.search(currentPage);
+    },
+  },
+  watch: {
+    mechanismList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.search();
+      },
     },
   },
 };
@@ -93,66 +99,53 @@ p {
   color: #215299;
   font-size: 18px;
 }
-.schoolList {
+.list ul li {
   float: left;
-  height: 149px;
   width: 100%;
-  padding: 20px 0;
+  height: 149px;
+  padding: 20px 0 0 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;
+.list ul li .title {
   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;
+.list ul li .city {
+  text-align: right;
+  font-size: 12px;
+  color: #1b1b1b;
+  height: 36px;
+  line-height: 36px;
 }
-.schoolList .lingyu {
+.list ul li .address {
+  height: 30px;
+  line-height: 30px;
   font-size: 16px;
-  color: #000000;
-  line-height: 26px;
+  color: #000;
 }
-.schoolList .jianjie span {
+.list ul li .content span {
   float: left;
   width: 80px;
-  height: 42px;
-  text-align: left;
+  text-align: center;
+  height: 60px;
+  line-height: 25px;
   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;
+.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-line-clamp: 2;
-  line-height: 25px;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+  color: #666;
+  line-height: 30px;
 }
 .page {
   padding: 34px 0;

src/views/supermaket/supermarket.vue

@@ -19,8 +19,8 @@
       :scientificTotal="scientificTotal"
       :companyList="companyList"
       :companyTotal="companyTotal"
-      :mechanismList="mechanismList"
-      :mechanismTotal="mechanismTotal"
+      :mechanismList="companyList"
+      :mechanismTotal="companyTotal"
       @fabu="fabu"
     ></supermarket-detail>
   </div>
@@ -87,15 +87,21 @@ export default {
     ],
     scientificTotal: 1,
     // 科技企业
-    companyList: [
+    companyList: [],
+    companyTotal: 0,
+    // 机构团体
+    mechanismList: [
       // {
-      //   title: '长春市福瑞科技有限公司',
-      //   city: '吉林省 长春市',
-      //   address: '吉林省长春市朝阳区力旺广场B座16楼1608',
-      //   content:
-      //     '长春市福瑞科技有限公司办公室地址位于中国汽车和“新中国电影的摇篮--长春，长春 怡众名城第20幢3单元505室（住所期限至2043年8月19日止），于2013年08月22日在长春市工商行政管理局高新技术产业开发区分局注册成立，注册资本为100万元人民币',
+      //   pic: require('@/assets/fabu.jpg'),
+      //   title: '标题',
+      //   city: '吉林长春',
+      //   guimo: '562人',
+      //   dengji: '国家级',
+      //   lingyu: '重点研究领域',
+      //   jianjie: '简介',
       // },
     ],
+    // mechanismTotal: 0,
     // 技术型
     jishuList: [],
     // 技术型分页
@@ -135,20 +141,6 @@ export default {
         deal: '交易完成',
       },
     ],
-    companyTotal: 1,
-    // 机构团体
-    mechanismList: [
-      {
-        pic: require('@/assets/fabu.jpg'),
-        title: '标题',
-        city: '吉林长春',
-        guimo: '562人',
-        dengji: '国家级',
-        lingyu: '重点研究领域',
-        jianjie: '简介',
-      },
-    ],
-    mechanismTotal: 1,
   }),
   async created() {
     await this.search();
@@ -171,7 +163,10 @@ export default {
     // 查询列表
     async searchList({ ...info }) {
       let res = await this.userQuery({ role: 5, ...info });
-      // console.log(res);
+      if (this.$checkRes(res)) {
+        this.$set(this, `companyTotal`, res.total);
+        this.$set(this, `companyList`, res.data);
+      }
     },
     // 发布
     fabu() {},