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

<!-- List.vue -->
<template>
	<view class="div ui-review-list">
		<view class="div list" v-for="(item, index) in list" :key="index">
			<view class="div content">
				<view class="user-info">
					<image mode="aspectFit" class="img avatar" :src="item.member_avatar" />
					{{ item.geval_isanonymous?'匿名':item.geval_frommembername }}
					<text class="span"
							v-bind:class="{
							'good-review': item.geval_scores > 3,
							'medium-review': item.geval_scores > 1,
							'bad-review': item.geval_scores == 1
						}"
					>{{ getGrade(item.geval_scores) }}</text
					>
				</view>
				<text class="addtime">{{ getTime(item.geval_addtime) }}</text>
			</view>
			<view class="p" v-if="item.geval_content">{{ item.geval_content }}</view>
			<view class="p" v-if="!item.geval_content">无评价信息</view>
			<view class="div explain" v-if="item.geval_explain">
				<view class="div title">掌柜回复</view>
				<view class="div mt-5">{{item.geval_explain}}</view>
			</view>
		</view>
	</view>
</template>

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

  props: ['list'],

  created () {},

  methods: {
    /*
                getGrade: 获取评论的等级
                @params： grade 等级
             */
    getGrade (grade) {
      if (grade == 1) {
        return '差评'
      } else if (grade == 2) {
        return '中评'
      } else {
        return '好评'
      }
    },

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

<style lang="scss">
	.ui-review-list {
		background: rgba(255, 255, 255, 1);
		.list {
			padding: 0.75rem;
			color: #333;
			font-size:$h3;
			.explain{padding:.5rem;background: #eee;margin-top:.5rem;
				.title{color:#333}
			}
			.content {
				overflow: hidden;
				padding-bottom: 0.75rem;
				display: flex;
				justify-content: space-between;
				align-content: center;
				align-items: center;
				.avatar{width:2rem;height: 2rem;border-radius: 50%;margin-right: .3rem;}
				.user-info {
					display: flex;
					justify-content: space-around;
					align-content: center;
					align-items: center;
					.span {
						margin-left: 0.75rem;
						color: #ffffff;
						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;
					}
				}
				.addtime {
					color: #999999;
					font-size:$fontSize;
				}
			}
			.p {
				padding: 0;
				margin: 0;
				flex-basis: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}
</style>