newjzpc/src/views/directories/List.vue

<template>
  <div class="new-list">
    <div class="serch-wrapper">
      <div class="search">
        <input
          type="text"
          v-model="keyword"
          placeholder="请输入内容进行搜索"
          class=""
          @keyup.enter="getList(keyword)"
        />
        <img
          src="../../assets/img/search.png"
          class="hand"
          @click="getList(keyword)"
        />
      </div>
    </div>
    <div class="empty" v-if="newList.length == 0">暂无数据</div>
    <div
      class="new-item hand"
      v-for="item in newList"
      :key="item.id"
      @click="navTo('/directories/detail?id=' + item.id)"
    >
      <div class="title clamp">
        <span class="title-icon"></span>
        {{ item.title }}
      </div>
      <div class="time">
        {{ item.releasetime | time }}
      </div>
    </div>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      background
      prev-text="上一页"
      next-text="下一页"
      @current-change="currentChange"
      :page-size="15"
      hide-on-single-page
    ></el-pagination>
  </div>
</template>

<script>
import {
  loadIndexs,
  splist,
  loveList,
  friendList,
  newsList,
  openList,
  getList,
  getArtList
} from "../../request/api.js";
export default {
  data() {
    return {
      newList: [],
      total: 0,
      page: 1,
      limit: 15,
      keyword: "",
    };
  },
  filters: {
    time(val) {
      let arr = val.split(" ");
      let str = arr[0];
      str = str.replace(/-/g, ".");
      return str;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    navTo(url) {
      this.$router.push(url);
    },
    currentChange(e) {
      this.page = e;
      this.getList();
    },
    getList(keyword) {
      let obj = this;
      if (keyword) {
        obj.page = 1;
      }
      getArtList({
        ifyid: 51,
        page: obj.page,
        limit: obj.limit,
        key: keyword,
      }).then((res) => {
        obj.newList = res.data.list.sort(this.compare("id"));
        // var newArrayData=res.data.list.sort(compare('Id'))
        obj.total = res.data.count;
      });
    },
    compare(attribute) {
      return function (obj1, obj2) {
        var val1 = obj1[attribute];
        var val2 = obj2[attribute];
        if (val1 < val2) {
          return 1;
        } else if (val1 > val2) {
          return -1;
        } else {
          return 0;
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.empty {
  text-align: center;
  color: #999;
  height: 400px;
  line-height: 400px;
}

.new-list {
  position: relative;
  .new-item {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    height: 40px;
    border-bottom: 1px solid #e5e5e5;
    line-height: 40px;

    &:hover {
      color: red;

      .title {
        .title-icon {
          border-left-color: red;
        }
      }
    }

    .title {
      width: 500px;

      .title-icon {
        display: inline-block;
        width: 0;
        height: 0;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-left: 8px solid #d2d2d2;
        border-bottom: 6px solid transparent;
      }
    }
  }
}

/deep/ .el-pagination {
  margin-top: 50px;
  text-align: center;
}

.serch-wrapper {
  display: flex;
  height: 33px;
  position: absolute;
  top: -80px;
  right: -50px;

  .search {
    padding-left: 13px;
    padding-right: 13px;
    width: 295px;
    height: 33px;
    line-height: 33px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 10px;
    // margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      width: 235px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      outline: none;
      border: none;
    }

    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>