veterans_client_web/src/views/CooperativeColleges/CooperativeCollegesIndex.vue

<!--
 * @Description: 合作院校
 * @Author: 空白格
 * @Date: 2022-08-11 17:17:33
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-11 17:48:45
 * @FilePath: \veterans_client_web\src\views\CooperativeColleges\CooperativeCollegesIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="cooperative-colleges">
    <BannerBreadcrumb title="合作院校" />
    <div class="cooperative-colleges-content" v-loading="loading">
      <div class="cooperative-colleges-content-list">
        <el-row :gutter="16">
          <el-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            v-for="(school, index) in schoolList"
            :key="index"
          >
            <div class="company-list-item">
              <div class="company-list-item-left">
                <el-image
                  class="image"
                  :src="
                    school.schoolLogoUrl ||
                    require('@/assets/images/default-school.png')
                  "
                >
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                  <div slot="error" class="image-slot">
                    <el-image
                      class="image"
                      :src="require('@/assets/images/default-school.png')"
                    ></el-image>
                  </div>
                </el-image>
              </div>
              <div class="company-list-item-center">
                <div class="name">{{ school.schoolName }}</div>
                <div>
                  {{ school.count || "-" }}个专业 ·
                  {{ school.schoolNature | filtersDict(schoolNatureList) }}
                </div>
              </div>
              <div class="company-list-item-right">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="pagination" v-if="total">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getDictData } from "@/api/Dict";
import { getSchoolList } from "@/api/CooperativeColleges";
export default {
  name: "CooperativeCollegesIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      schoolNatureList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolName: undefined,
      },
      total: 0,
      schoolList: [],
      loading: false,
    };
  },
  created() {
    this.getDict();
    this.getList();
  },
  methods: {
    /**
     * 获取字典数据
     * @date 2022-08-11
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "school_nature" }).then((res) => {
        this.schoolNatureList = res.data;
      });
    },
    /**
     * 获取学校列表
     * @date 2022-08-11
     * @returns {any}
     */
    getList() {
      this.loading = true;
      getSchoolList(this.queryParams).then((res) => {
        this.schoolList = res.rows;
        this.total = Number(res.total);
        this.loading = false;
      });
    },
    currentChange(page) {},
  },
  filters: {
    filtersDict(val, list) {
      let label = "-";
      list.forEach((element) => {
        if (Number(element.text) === Number(val)) {
          label = element.label;
        }
      });
      return label;
    },
  },
};
</script>

<style lang="scss" scoped>
.cooperative-colleges {
  &-content {
    width: calc(70% + 40px);
    min-width: 600px;
    margin: 23px auto 0;
    &-list {
      padding: 20px 20px 100px;
      background-color: #fff;
      .company-list-item {
        display: flex;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 16px;
        margin-bottom: 20px;
        cursor: pointer;
        &-left {
          width: 61px;
          height: 61px;
          margin-right: 15px;
          border: solid 1px #e2e2e2;
          border-radius: 4px;
          .image {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }
        &-center {
          width: calc(100% - 95px);
          color: #919191;
          font-size: 14px;
          font-family: SourceHanSansCN;
          .name {
            color: #1a1a1a;
            font-size: 20px;
            font-family: SourceHanSansCN;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }
        }
        &-right {
          display: flex;
          align-items: center;
          color: #9c9c9c;
          font-size: 18px;
        }
      }
      .pagination {
        text-align: center;
        :deep(.el-pager .active) {
          background-color: #ff3939;
        }
        :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
          background-color: #ff3939;
        }
      }
    }
  }
}
</style>