xinhuaqujiaoyuju/components/leo-list/db-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">
				<view class="uni-flex uni-row leo-align-items-center" v-if="item.documentornotify==='公文'" @tap="navTo('/pages/gongwen/content?businessKey='+item.businessKey+'&qianshou=false')">
					<view style="width: 100%;">
						<view class="text-line-height-1 text-title leo-ellipsis-1">
							<uni-tag class="tag" type="error" :text="item.documentornotify | notifyTypeFilter"
								size="small" />
							{{ item.title || "暂无数据"}}
						</view>
						<view class="text-line-height-1 text-date leo-ellipsis-1" style="margin-top: 16rpx; color: rgba(156,164,169,1);">
							{{item.createTime|time}}
						</view>
						
					</view>
				</view>
				
				<view class="uni-flex uni-row leo-align-items-center" v-else @tap="navTo('/pages/notify/content?id='+item.id+'&qianshou=0')">
					<view style="width: 100%;">
						<view class="text-line-height-1 text-title leo-ellipsis-1">
						<uni-tag class="tag" type="error" :text="item.documentornotify | notifyTypeFilter"
							size="small" />
							{{ item.title || "暂无数据"}}
						</view>
						<view class="text-line-height-1 text-date leo-ellipsis-1" style="margin-top: 16rpx; color: rgba(156,164,169,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
			}
		},
		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 + '分钟前';
						}
					}
				}
			},
			notifyTypeFilter(val) {
				return val;
			}
		},
		data() {
			return {
			}
		},
		methods: {
			// 通用跳转
			navTo(route) {
				this.$mRouter.push({
					route
				});
			}
		}
	}
</script>

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

			&:first-child {
				border-top: #e4e7ed 0rpx 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 !important;
	}
	
	.text-title {
		font-size: $font-lg !important;
	}
	
	.text-date {
		font-size: $font-sm !important;
		float: right;
	}
	
	.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;
	}
	.tag {
		position: relative;
		float: left;
		border: none;
		font-size: $font-sm;
		opacity: 0.8;
		margin-right: 5px;
	}
</style>