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

<template>
  <div>
    <div class="inner d-flex flex-wrap">
      <div :class="(index + 1) % 4 === 0 ? 'margin-0' : ''" :key="index" class="item-box mb-8" v-for="(item, index) in list">
        <img :src="item.picUrl" class="con-img" v-if="item.picUrl" :title="item.name" />
        <img :src="item.visitLocation" class="con-img" :title="item.name" v-else />
        <p class="font-24 my-4 title">{{ item.name }}</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"
        :page-size="pageSize"
        :total="total"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
        v-show="total > 8"
      />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { selInstrument, searchFront, selProduct } from 'config/api';
export default {
  name: 'PlatformList',
  data() {
    return {
      list: [],
      pageSize: 8,
      total: 20,
      current: 1,
    };
  },
  computed: mapState('home', ['listState', 'labList', 'LabIpt', 'insList', 'InsIpt', 'shareCurrent', 'productList', 'productIpt']),
  watch: {
    shareCurrent(val) {
      console.log(val);
      this.monitor(this.listState);
    },
    labList(val) {
      if (this.shareCurrent === 1) {
        this.monitor(this.listState);
      }
      this.current = 1;
      this.setShareCurrent(1);
    },
    LabIpt(val) {
      if (this.LabIpt.isBtn === 1) {
        if (this.shareCurrent === 1) {
          this.monitor(this.listState);
        }
        this.current = 1;
        this.setShareCurrent(1);
      }
    },
    insList(val) {
      if (this.shareCurrent === 1) {
        this.monitor(this.listState);
      }
      this.current = 1;
      this.setShareCurrent(1);
    },
    InsIpt(val) {
      if (this.InsIpt.isBtn === 1) {
        if (this.shareCurrent === 1) {
          this.monitor(this.listState);
        }
        this.current = 1;
        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 if (this.listState === 1) {
      this.getSelI();
    } else {
      this.getProductLists();
    }
  },
  methods: {
    ...mapMutations('home', ['setShareCurrent']),
    // 查询仪器列表
    async getSelI() {
      try {
        const params = {
          param: {
            content: this.InsIpt.content, // 搜索框内容
            modelIds: this.insList, // 分类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);
      }
    },
    // 查询实验室（研究院）列表
    async getSear() {
      try {
        const params = {
          param: {
            name: this.LabIpt.content, // 搜索框内容
            moldIds: this.labList, // 分类ID数组
            pageNum: this.shareCurrent,
            pageSize: this.pageSize,
          },
        };
        const res = await searchFront(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 getProductLists() {
      try {
        const params = {
          param: {
            content: this.productIpt.content, // 搜索框内容
            modelIds: this.productList, // 分类ID数组
            pageNum: this.shareCurrent,
            pageSize: this.pageSize,
          },
        };
        const res = await selProduct(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;
      this.setShareCurrent(this.current);
    },
    // 监听触发搜索事件
    monitor(val) {
      if (val === 0) {
        this.getSear();
      } else if (val === 1) {
        this.getSelI();
      } else {
        this.getProductLists();
      }
    },
    // 查看 研究院/仪器 详情
    jump(id) {
      if (this.listState === 0) {
        this.$router.push({
          path: '/NewPlatform/Share/Institute',
          name: 'Institute',
          params: { id },
        });
      } else if (this.listState === 1) {
        this.$router.push({
          path: '/NewPlatform/Share/InsDet',
          name: 'InsDet',
          params: { id },
        });
      } else if (this.listState === 3) {
        this.$router.push({
          path: '/NewPlatform/Share/InsDet',
          name: 'InsDet',
          params: { id },
        });
      }
    },
  },
};
</script>

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

.item-box {
  width: 20.5%;
  margin-right: 6%;
  border-radius: 4px;
  position: relative;
  margin-bottom: 50px;
}

.title {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.85);
  font-size: 28px;
}

@media only screen and (max-width: 1900px) {
  .title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1650px) {
  .title {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1400px) {
  .title {
    font-size: 16px;
  }
}

.margin-0 {
  margin-right: 0 !important;
}

.con-img {
  height: 100%;
  width: 100%;
  border: none;
}
</style>