jzpc/src/views/directories/List.vue

<template>
	<div class="new-list">
		<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.release_time?item.release_time:item.add_time | 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 , regulationList, getDirectoriesList } from '../../request/api.js';
export default {
	data() {
		return {
			newList: [],
			total: 0,
			page: 1,
			limit: 15
		};
	},
	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() {
			let obj = this
			getDirectoriesList({
				page: obj.page,
				limit: obj.limit
			}).then(res => {
				obj.newList = res.data.list.sort(this.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 {
	// padding: 0px 72px 0 40px;
	.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: 800px;
			.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;
	}
</style>