hlm_pl_mall_h5/pages/home/pointsgoods/child/ReviewList.vue

<!-- List.vue -->
<template>
	<view class="div ui-review-list">
		<view class="div list" v-for="(item, index) in list" v-bind:key="index">
			<view class="div">
				<text class="span">
					{{ utils.replaceStr(item.author.username) }}

				</text>
				<text class="span">{{ getTime(item.point_addtime) }}</text>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},

	props: ['list'],

	created() {},

	methods: {


		/*
			getTime: 获取评论的时间
			@params: timestamps 时间戳
		 */
		getTime(timestamps) {
			let date = new Date(timestamps * 1000)
			let year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate()
			return year + '-' + month + '-' + day
		}
	}
}
</script>

<style lang="scss">
.ui-review-list {
	background: rgba(255, 255, 255, 1);
	.list {
		padding: 0.75rem;
		border-bottom: 0.5px solid #e8eaed;
		color: #333;
		font-size:$h3;
		.div {
			overflow: hidden;
			padding-bottom: 0.75rem;
			display: flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			.span {
				&:first-child {
					display: flex;
					justify-content: space-around;
					align-content: center;
					align-items: center;
					.span {
						margin-left: 0.75rem;
						color: #ffffff;
						font-size:$fontSize;
					}
				}
				&:last-child {
					color: #999999;
					font-size:$fontSize;
				}
				&.good-review {
					background: #fc2e39;
					width: 1.8rem;
					height: 0.8rem;
					text-align: center;
					background-size: cover;
					line-height: 0.8rem;
					border-radius: 0.4rem;
				}
				&.medium-review {
					background: $primaryColor;
					width: 1.8rem;
					height: 0.8rem;
					text-align: center;
					background-size: cover;
					line-height: 0.8rem;
					border-radius: 0.4rem;
				}
				&.bad-review {
					background: #c3c3c3;
					width: 1.8rem;
					height: 0.8rem;
					text-align: center;
					background-size: cover;
					line-height: 0.8rem;
					border-radius: 0.4rem;
				}
			}
		}
		.p {
			padding: 0;
			margin: 0;
			flex-basis: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}
}
</style>