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

<!-- Evaluation.vue -->
<template>
	<view class="scroll-view-wrapper div ui-evaluation" style="height:100%">
<view class="scroll-view div" style="position:relative">
		<scroll-view
      style="position: absolute;top:0;right:0;left:0;bottom:0"
			class="div ui-evaluation-body"
			@scrolltolower="loadMore"
			scroll-y="true"
		>
			<view
				class="div list"
				v-for="(item, index) in reviewList"
				v-if="reviewList.length > 0"
        :key="index"
			>
				<view class="div">
					<view class="span">
						<image mode="aspectFit" class="img avatar" :src="item.member_avatar">
						<text>{{ item.point_buyername }}</text>
					</view>
					<text class="span">{{ getTime(item.point_addtime) }}</text>
				</view>
			</view>

			<view class="div list-empty" v-if="reviewList.length <= 0">
				<view class="p">本商品暂无兑换记录</view>
			</view>
		</scroll-view>
	</view>
</view>  
</template>

<script>

import { getPointsorderList } from '../../../../api/homePointsgoods'
export default {
  data () {
    return {

      id: this.$store.state.pointsgoods.currentProductId
        ? this.$store.state.pointsgoods.currentProductId
        : '',
      reviewList: [],
      page: 0,
      loading: false,
      total: 1
    }
  },
  created () {
  this.loadMore()
  },
  methods: {

    loadMore () {
      this.loading = true
      this.page = ++this.page
      if (this.page <= this.total) {
        this.loading = false
        this.getReviewList(true)
      }
    },
    getReviewList (ispush) {
      getPointsorderList({ page: this.page, per_page: 10 }, this.id).then(res => {
        if (res) {
          if (ispush) {
            this.reviewList = this.reviewList.concat(res.result.order_list)
          } else {
            this.reviewList = res.result.order_list
          }
          if (res.hasmore) {
            this.loading = false
          } else {
            this.loading = true
          }
          this.total = res.page_total
        }
      })
    },

    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" scoped>
.scroll-view-wrapper{display: flex;flex-direction: column;}
.scroll-view{flex:1}
.ui-evaluation {
	.ui-evaluation-header {
		background: #ffffff;
		.flex-header {
			width: auto;
			display: flex;
			display: -webkit-flex;
			display: -moz-flex;
			flex-basis: 100%;
			justify-content: space-around;
			align-content: center;
			align-items: center;
			height: 2.2rem;
			.div {
				color: #5c5958;
				font-size:$subFontSize;
				height: 1.2rem;
				border: 0.5px solid #333;
				padding: 0 0.45rem;
				line-height: 1.2rem;
				text-align: center;
				&.active {
					color: #ffffff;
					background: $primaryColor;
					border: 0.5px solid transparent;
				}
			}
		}
	}
	.ui-evaluation-body {
		padding: 0 $pageSpace;
		background: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		.list {
			padding: 0.4rem 0;
			border-bottom: 0.5px solid rgba(232, 234, 237, 1);
			color: #333;
			font-size:$subFontSize;
			height:3rem;
			.div {
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				align-content: center;
				align-items: center;
				.avatar{height:3rem;width:3rem;border-radius:50%;margin-right: .5rem;}
				.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;
			}
		}
		.list-empty {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			.img {
				width: 2.75rem;
			}
			.p {
				color: #7c7f88;
				font-size:$subFontSize;
				padding: 0;
				margin: 0;
				font-weight: normal;
			}
		}
	}
}
</style>