check-work/src/views/NewPlatform/Children/components/DeEnt.vue

<!--
  Copyright (c) 2020.
  author: song
  email: 15235360226@163.com
  -->

<template>
  <div v-if="newPartners && newPartners.length > 0">
    <div class="d-flex flex-wrap">
      <div
        :class="(index + 1) % 3 === 0 ? 'enterprise-box1' : ''"
        :key="index"
        @click="openProfile(item.name, item.description)"
        class="enterprise-box d-flex flex-column align-center white mb-8"
        v-for="(item, index) in newPartners"
      >
        <img :src="item.logoUrl" class="enterprise-pic my-2" />
        <div class="font-bold-24 title-color my-2">{{ item.name }}</div>
        <div
          class="font-16 textColor d-flex flex-wrap align-left fill-width enterprise-txt"
        >{{ item.description }}</div>
        <div class="d-flex flex-nowrap fill-width py-5 enterprise-more">
          <div class="flex-1"></div>
          <span class="font-16 baseColor">
            了解更多
            <a-icon type="arrow-right" />
          </span>
        </div>
      </div>
      <company-profile :show-profile="showProfile" @closeProfile="closeProfile" v-if="showProfile" />
    </div>
    <div class="inner d-flex flex-row-reverse pb-10 enterprise-page">
      <a-pagination
        :page-size="pageSize"
        :total="newPartners.length"
        @change="onChange"
        show-less-items
        v-model="current"
        v-show="newPartners.length > 6"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import 'components/Introduce/PartnerShip.styl';
import CompanyProfile from 'components/Introduce/CompanyProfile.vue';
export default {
  name: 'DeEnt',
  components: { CompanyProfile },
  props: {
    title: {
      type: String,
      default: '',
    },
    typeOfPlatform: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      current: 1,
      pageSize: 6,
      showProfile: false, // 显示公司介绍
    };
  },

  computed: {
    ...mapState('home', ['partners', 'profile']),

    newPartners() {
      let { partners } = this;
      let arr = [];
      if (partners && partners.length > 0) {
        for (let i = 0; i < partners.length; i++) {
          const element = partners[i];
          for (let j = 0; j < element.backendSearchList.length; j++) {
            const item = element.backendSearchList[j];
            arr.push(item);
          }
        }
        return arr;
      }
      return arr;
    },
  },

  async created() {
    this.setPartners([]);
    const { title, typeOfPlatform } = this;
    const params = {
      param: {
        pageNum: this.current,
        pageSize: 6,
        type: title === '合作伙伴' ? 1 : 2,
        typeOfPlatform: typeOfPlatform === '关于我们' ? 2 : 1,
      },
    };
    await this.getFrontSearchCompany(params);
  },

  methods: {
    ...mapMutations('home', ['setPartners', 'setProfile']),
    ...mapActions('home', ['getFrontSearchCompany']),

    // 切换页数
    onChange(current) {
      this.current = current;
    },

    // 介绍
    openProfile(title, description) {
      this.setProfile(null);
      const profile = {
        title,
        description,
      };
      this.setProfile(profile);
      this.showProfile = true;
    },

    closeProfile() {
      this.showProfile = false;
    },
  },
};
</script>

<style lang="stylus" scoped></style>