xinhuaqujiaoyuju/components/leo-list/leo-list.vue

<template>
	<view class="leo-list">
		<template v-if="list.length">
			<view class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item" v-for="(item, index) in list"
			 :key="index"  @tap="navTo(path + item.id)">
				<view class="uni-flex uni-row leo-align-items-center">
					<view style="width: 100%;">
						<view class="text-line-height-1 text-title leo-ellipsis-1">
							{{ item.tatle || "暂无数据"}}
						</view>
						<view class="text-line-height-1 text-date leo-ellipsis-1">
							{{item.createTime|time}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="" style="text-align: center;">
				暂无数据
			</view>
		</template>
	</view>
</template>

<script>
	import moment from '@/common/moment';
	export default {
		props: {
			list: {
				type:Array,
				default() {
					return []
				}
			},
			borderRadius: {
				type: [Number, String],
				default: 0
			},
			path: {
				type: String,
				default: ''
			}
		},
		filters:{
			time(val) {
				// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
				var curTime = new Date();
				var postTime = new Date(val);
				var timeDiff = curTime.getTime() - postTime.getTime();
			
				// 单位换算
				var min = 60 * 1000;
				var hour = min * 60;
				var day = hour * 24;
				var week = day * 7;
			
				// 计算发布时间距离当前时间的周、天、时、分
				var exceedWeek = Math.floor(timeDiff / week);
				var exceedDay = Math.floor(timeDiff / day);
				var exceedHour = Math.floor(timeDiff / hour);
				var exceedMin = Math.floor(timeDiff / min);
			
				// 最后判断时间差到底是属于哪个区间，然后return
				if (exceedWeek > 0) {
					if(curTime.getFullYear()==postTime.getFullYear()){
						return moment(val).format('MM-DD');
					}else{
						return moment(val).format('YYYY-MM-DD');
					}
				} else {
					if (exceedDay < 7 && exceedDay > 0) {
						return exceedDay + '天前';
					} else {
						if (exceedHour < 24 && exceedHour > 0) {
							return exceedHour + '小时前';
						} else {
							if(exceedMin<1){
								exceedMin=0
							}
							return exceedMin + '分钟前';
						}
					}
				}
			}
		},
		data() {
			return {
			}
		},
		methods: {
			// 通用跳转
			navTo(route) {
				this.$mRouter.push({
					route
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leo-list {
		
		.leo-list-item {
			padding: 30rpx 0rpx;
			border-top: #e4e7ed 2rpx solid;
			&:first-child {
				border-top: #e4e7ed 2rpx solid;
			}

			.icon {
				display: block;
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
	.uni-flex {
		display: flex;
		flex-direction: row;
	}
	
	.uni-flex-item {
		flex: 1;
	}
	
	.uni-row {
		flex-direction: row;
	}
	
	.uni-column {
		flex-direction: column;
	}
	
	.leo-align-items-center {
		align-items: center;
		width: 100%;
	}
	
	.leo-space-between {
		justify-content: space-between;
	}
	
	.text-line-height-1 {
		line-height: 1.5 !important;
	}
	
	
	.text-title {
		font-size:16px !important;
		line-height: 1.5;
		//width:78%;
		//float: left;
		//white-space:nowrap;
		//text-overflow:ellipsis;
		//-o-text-overflow:ellipsis;
		//overflow: hidden;
	}
	
	.text-date {
		font-size: $font-sm !important;
		float: right;
		//width:20%;
		text-align: right;
		color: rgba(156,164,169,1);
		margin-top: 6rpx;
	}
	.leo-ellipsis-1 {
		 display: -webkit-box;
		 text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 -webkit-line-clamp: 2;
		 line-clamp: 2;
		 -webkit-box-orient: vertical;
	}
</style>