ts-program/src/components/PlatformList/PlatformList.vue

<template>
  <div>
    <div class="inner d-flex justify-space-between flex-wrap">
      <div v-for="(item, index) in list" :key="index">
        <img :src="item.imgUrl" style="height: 220px" />
        <p class="font-24 my-4">{{ item.title }}</p>
        <p 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"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
      />
    </div>
  </div>
</template>

<script>
import { selInstrument, searchFront } from 'config/api';
export default {
  name: 'PlatformList',
  data() {
    return {
      list: [
        {
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          title: 'XX实验平台',
          id: 1,
        },
        {
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          title: 'XX实验平台',
          id: 2,
        },
        {
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          title: 'XX实验平台',
          id: 3,
        },
        {
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          title: 'XX实验平台',
          id: 4,
        },
        {
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          title: 'XX实验平台',
          id: 5,
        },
        {
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          title: 'XX实验平台',
          id: 6,
        },
      ],
      current: 1,
      pageSize: 6,
      total: 20,
    };
  },
  created() {
    this.getSelI();
    this.getSear();
  },
  methods: {
    // 查询仪器列表
    async getSelI() {
      try {
        const params = {
          param: {
            content: '', // 搜索框内容
            modelIds: [], // 分类ID数组
            pageNum: 1,
            pageSize: 6,
          },
        };
        const res = await selInstrument(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          console.log(data);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 查询实验室（研究院）列表
    async getSear() {
      try {
        const params = {
          param: {
            name: '', // 搜索框内容
            moldIds: [], // 分类ID数组
            pageNum: 1,
            pageSize: 6,
          },
        };
        const res = await searchFront(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          console.log(data);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 改变单当前页数
    onShowSizeChange(current, size) {
      console.log(current);
      this.current = current;
    },
  },
};
</script>

<style lang="stylus" scoped>
.pagination {
  margin: 40px 0;
  text-align: right;
}
</style>