green.v0.3/src/components/PlatformList/Fruit.vue

<template>
  <div>
    <div class="inner d-flex flex-wrap">
      <div
        :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
        :key="index"
        class="item-box"
        v-for="(item, index) in list"
      >
        <div @click="detail(item.id)" class="font-20 title" style="cursor: pointer">
          {{ item.name }}
          <intention-model :btn-name="btnName" :type-data="getId(item.id)" style="cursor: pointer" />
        </div>
        <div
          @click="detail(item.id)"
          class="font-16 mt-3"
          style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
          v-if="item.identifier"
        >编号：{{ item.identifier }}</div>
        <!-- <p class="font-16 baseColor item-more"> -->
          <!-- <a-button type="primary" style="cursor: pointer">转化意向填报</a-button> -->
          <!-- <intention-model :btn-name="btnName" :type-data="getId(item.id)" style="cursor: pointer" /> -->
        <!-- </p> -->
      </div>
    </div>
    <div class="inner">
      <a-pagination
        :current="achCurrent"
        :page-size="pageSize"
        :total="total"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
        v-show="total > 12"
      />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { selRes } from 'config/api';
import IntentionModel from '../Introduce/IntentionModel.vue';
export default {
  name: 'PlatformList',
  components: { IntentionModel },
  data() {
    return {
      list: [],
      pageSize: 12,
      total: 0,
      typeData: {
        type: 2,
        Id: '',
      },
      btnName: '技术需求',
    };
  },
  computed: mapState('home', ['achList', 'achIpt', 'achCurrent']),
  watch: {
    achList(val) {
      this.getData();
    },
    achIpt(val) {
      if (val.isBtn === 1) {
        this.getData();
      }
    },
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapMutations('home', ['setAchCurrent', 'setAchId']),
    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.setAchCurrent(current);
      this.getData();
    },
    // 获取成果列表
    async getData() {
      try {
        const params = {
          param: {
            content: this.achIpt.content,
            modelIds: this.achList,
            pageNum: this.achCurrent,
            pageSize: 12,
          },
        };
        const res = await selRes(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.list = data.list;
          this.total = parseInt(data.total);
        }
      } catch (error) {
        // console.log(error);
      }
    },
    // 点击查看详情
    detail(id) {
      this.setAchId(id);
      this.$router.push('/NewPlatform/AchDet');
    },
    getId(Id) {
      return (this.typeData = {
        type: 2,
        Id,
      });
    },
  },
};
</script>

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

.item-box {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 10px;
}

.item-box .title{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

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

.item-more {
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-align: right;
  margin-bottom: 0 !important;
  margin-top: 40px;
}
</style>