dev/dcp-app-gate/pages/information/news-item.nvue

<template>
	<view class="media-item">
		<view class="infoList" @tap="toRankDetail" :data-key="newsItem.baseEntityId">
			<view class="listBox">
				<div class="leftImg" v-if="newsItem.pictureUrl">
					<image class="img" :src="'https://m.geidcp.com/api/file/pub/' + newsItem.pictureUrl" mode="">
					</image>
				</div>
				<view class="rightCont" :style="{ width: newsItem.pictureUrl?'460upx':'690upx' }">
					<view class="title">
						<text class="title-text-new" v-if="newFlag(newsItem.publishDate)">new</text>
						<text class="title-text">{{ newsItem.title }}</text>
					</view>
					<view class="info-cont">
						<text class="cont-text">{{ newsItem.content }}</text>
					</view>
					<view class="title-base">
						<text class="base-text">{{ newsItem.auther }}</text>
						<text class="time">{{ formatDate(newsItem.publishDate) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment";
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			formatDate(value, formatString, defaultString) {
				if (value == null) {
					return defaultString ? defaultString : "";
				}
				formatString = formatString || 'YYYY-MM-DD';
				return moment(value).format(formatString);
			},
			toRankDetail(e) { //详情
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: './components/rankDetail?key=' + key
				});
			},
			newFlag(value) {
				let itemDate = this.formatDate(value)
				let nowDate = this.formatDate(new Date())
				console.log(itemDate, nowDate)
				return nowDate == itemDate
			}
		}
	}
</script>

<style scoped>
	.infoList {
		padding: 0 30upx;
	}

	.listBox {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #F1F1F1;
		padding: 30upx 0;
	}

	.img {
		width: 185upx;
		height: 140upx;
	}

	.rightCont {
		width: 460upx;
	}

	.title {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.title-text {
		overflow: hidden;
		text-overflow: ellipsis;
		lines: 2;
		/* #ifndef APP-PLUS-NVUE */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		/* #endif */
		color: #333333;
		font-size: 32upx;
		font-weight: 700;
		flex: 1;
	}

	.title-text-new {
		color: red;
		/* border: 1upx solid red; */
		border-radius: 20upx;
		padding: 0 10upx;
		margin-right: 10upx;
		font-size: 28upx;
		line-height: 32upx;
	}

	.cont-text {
		margin-top: 15upx;
		font-size: 32upx;
		text-overflow: ellipsis;
		lines: 2;
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		/* #endif */
	}

	.title-base {
		margin-top: 15upx;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.base-text {
		font-size: 28upx;
		color: #999999;
	}

	.time {
		margin-left: 30upx;
		font-size: 28upx;
		color: #999999;
	}

	.media-item {
		position: relative;
		flex: 1;
		flex-direction: column;
		/* padding: 20upx 30upx 0; */
		background-color: #FFFFFF;
	}
</style>