web/src/components/push-list/PushList.vue

<template>
  <el-card class="info-list-card">
    <div slot="header" class="clearfix">
      <span class="card-title">订阅推送</span>
      <el-button @click="goManage" class="sub-manager" type="plain" icon="el-icon-jy-edit">订阅管理</el-button>
    </div>
    <div class="info-list" v-loading="listState.loading">
      <article-item
        v-for="(item, index) in listState.list"
        :key="index"
        :index="index + 1"
        :article="item"
        @onClick="toDetail(item)"
      />
      <empty v-if="showEmpty">
        <div v-if="isAllFirst">
          <span>订阅关键词，接收最新招投标信息</span>
          <div class="add-key-button">
            <span class="icon-chahao"></span>
            <span class="button-text">订阅关键词</span>
          </div>
        </div>
        <div v-else>
          <span>暂时无历史推送记录</span>
        </div>
      </empty>
    </div>
    <div class="el-pagination-container" :class="showMore ? 'center' : ''">
      <el-pagination
        background
        layout="prev, pager, next, ->"
        :hide-on-single-page="true"
        :current-page="listState.pageNum"
        :page-size="listState.pageSize"
        :total="listState.total"
        @current-change="onPageChange"
      >
      </el-pagination>
      <div class="p-right" v-if="showMore && !showEmpty">
        <el-button size="mini" class="get-more" type="plain" icon="el-icon-arrow-right" @click="getMore">更多</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { Pagination, Card, Button } from 'element-ui'
import Empty from '@/components/common/Empty.vue'
import ArticleItem from '@/components/article-item/ArticleItem.vue'
import { getPushList } from '@/api/modules/'

export default {
  name: 'push-list',
  components: {
    [Pagination.name]: Pagination,
    [Card.name]: Card,
    [Button.name]: Button,
    ArticleItem,
    Empty
  },
  props: {
    showMore: {
      type: Boolean,
      default: true
    },
    filters: {
      type: Object,
      default () {
        return {
          area: '',
          time: ''
        }
      }
    }
  },
  computed: {
    showEmpty () {
      return this.listState.list.length === 0 && this.listState.loaded
    },
    getFilters () {
      return this.filters
    }
  },
  data () {
    return {
      isAllFirst: false,
      listState: {
        loaded: true, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 10, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      }
    }
  },
  created () {
    this.doQuery()
  },
  methods: {
    goManage () {
      alert('订阅管理')
      // this.$router.push('')
    },
    // 恢复数据至第一次请求的状态(页码等)
    resetListState () {
      const state = {
        loaded: false,
        loading: false,
        pageNum: 1,
        total: 0,
        list: []
      }
      Object.assign(this.listState, state)
    },
    doQuery (filters) {
      this.resetListState()
      this.getList(filters)
    },
    async getList (filters) {
      const query = {
        pagenum: this.listState.pageNum,
        pageSize: this.listState.pageSize,
        area: this.getFilters.area,
        time: this.getFilters.time
      }

      if (filters && Object.keys(filters).length > 0) {
        filters.area && (query.area = filters.area)
        filters.time && (query.time = filters.time)
      }

      this.listState.loading = true
      this.listState.loaded = false
      // 判断是否无筛选条件
      this.isAllFirst = false
      if (query.pagenum === 1 && query.area === '' && query.time === '') {
        this.isAllFirst = true
      }
      const res = await getPushList(query)
      this.listState.loading = false
      this.listState.loaded = true

      if (res.error_code === 0) {
        this.listState.total = res.data.total
        this.listState.list = res.data.list || []
      } else {
        this.listState.total = 0
        this.listState.list = []
      }
    },
    toDetail (item) {
      const { _id } = item
      window.open(`/article/content/${_id}.html`)
    },
    onPageChange (p) {
      this.listState.pageNum = p
      this.getList()
    },
    getMore () {
      this.$emit('getMore')
    }
  }
}
</script>

<style lang="scss" scoped>
  @include diy-icon('edit', 20, 20);
  // card样式重置
  ::v-deep {
    .el-card__header {
      margin: 0 40px;
      padding-left: 0;
      padding-right: 0;
    }
    .el-card__body {
      padding: 20px 40px;
    }
    .empty-container {
      margin-top: 60px;
    }
    .get-more {
      display: flex;
      .el-icon-arrow-right {
        margin-left: 4px;
        order: 2;
      }
    }
  }

  .sub-manager {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #1d1d1d;
    border-color: #E0E0E0;
    &.el-button:focus,
    &.el-button:hover {
      color: inherit;
      background-color: inherit;
    }
  }

  .info-list-card {
    .card-title {
      font-size: 24px;
      color: #1d1d1d;
      line-height: 36px;
    }
    .sub-manager {
      float: right;
    }
    .info-list {
      min-height: 545px;
      border-top: 1px solid transparent;
    }
    .add-key-button {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 32px;
      padding: 8px 16px;
      color: #F7F9FA;
      border-radius: 6px;
      background-color: #2ABED1;
      cursor: pointer;
      .icon-chahao {
        margin-right: 4px;
        transform: rotate(-45deg);
      }
      .button-text {
        margin-left: 4px;
        white-space: nowrap;
      }
    }
    .icon-chahao {
      position: relative;
      display: inline-block;
      width: 14px;
      height: 14px;
      &:before,
      &:after {
        position: absolute;
        content: '';
        background-color: #fff;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        border-radius: 2px;
      }
      &:before {
        transform: translate(-50%,-50%) rotate(45deg);
      }
      &:after {
        transform: translate(-50%,-50%) rotate(-45deg);
      }
    }
    .el-pagination-container.center  {
      .el-pagination {
        left: 50%;
        right: unset;
        transform: translateX(-50%);
      }
    }
  }
</style>