jzpc/src/views/cause/cells/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('/cause/cells/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 {
		getList
	} 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
				}
				getList({
					page: obj.page,
					limit: obj.limit,
					name: obj.keyword
				},67).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>
	.new-list {

		position: relative;
		
		.empty {
			text-align: center;
			color: #999;
			height: 400px;
			line-height: 400px;
		}
		.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>