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

<!-- Evaluation.vue -->
<template>
	<view class="scroll-view-wrapper div ui-evaluation" style="height:100%">
		<view class="div ui-evaluation-header">
			<view class="div flex-header">
				<view class="div"
					v-for="(item, index) in staticData"
					v-bind:key="item.id"
					v-bind:class="{ active: currentTag == item.value }"
					v-on:click="changeTab(item.value, item.grade)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
    <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 item">
					<view class="span">
						<image mode="aspectFit" class="img avatar" :src="item.member_avatar" />
						{{ item.geval_isanonymous?'匿名':item.geval_frommembername }}
						<view 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) }}</view
						>
					</view>

					<text class="span">{{ 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="p explain" v-if="item.geval_explain">掌柜回复：{{ item.geval_explain }}</view>
				<view class="div geval-image-list" v-if="item.geval_image && item.geval_image.length">
					<view class="div geval-image-item" v-for="(image,i) in item.geval_image" :key="i">
						<view class="div image-wrapper"><image mode="aspectFit" class="img image" :src="image" @click="openImage(image)" /></view>
					</view>
				</view>
			</view>


		</scroll-view>
    <view class="div list-empty" v-if="reviewList.length <= 0">
      <view class="div iconfont empty-icon">&#xe636;</view>
    	<view class="p">本商品暂无评价</view>
    </view>
    </view>
		<uni-popup ref="isshow" class="popup" >
			<image mode="aspectFit" class="img" :src="showimage" :style="getBannerStyle" @click="hidePopup('isshow')">
		</uni-popup>
	</view>
</template>

<script>
import { evaluation } from '../static'
import { getReviewList } from '../../../../api/homegoodsdetail'
export default {
  data () {
    return {
		showimage: '',
      staticData: evaluation,
      id: this.$store.state.goodsdetail.currentProductId
        ? this.$store.state.goodsdetail.currentProductId
        : '',
      currentTag: 'total',
      grade: 0,
      subTotal: {},
      reviewList: [],
      page: 0,
      loading: false,
      hasmore: true
    }
  },
  created () {
  this.loadMore()
  },
	computed: {
		getBannerStyle: function () {
			const res = uni.getSystemInfoSync()
			var width = res.windowWidth
			var height = res.windowHeight
			let itemWidth = width
			let itemHeight = height
			return "width:"+itemWidth +"px;height:"+itemHeight +"px"
		}
	},
  methods:{
	  showPopup(id){
	    this.$refs[id].open()
	  },
	  hidePopup(id){
	    this.$refs[id].close()
	  },
	  openImage (src) {
		  this.showimage = src
		  this.isshow = true
	  },
    loadMore () {
      if(this.loading){
        return
      }
      
      this.loading = true
      if (this.hasmore) {
        this.page = ++this.page
        this.getReviewList(true)
      }
    },
    getReviewList (ispush) {
      getReviewList(this.id, this.grade, 10, this.page).then(res => {
        this.loading = false
        if (res) {
          if (ispush) {
            this.reviewList = this.reviewList.concat(res.result.goods_eval_list)
          } else {
            this.reviewList = res.result.goods_eval_list
          }
          this.hasmore = res.result.hasmore
        }
      })
    },
    changeTab (value, grade) {
      this.currentTag = value
      this.grade = grade
      this.getReviewList(false)
    },
    getGrade (grade) {
      if (grade == 1) {
        return '差评'
      } else if (grade > 3) {
        return '好评'
      } else {
        return '中评'
      }
    },
    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: $descTextColor;
				font-size:$subFontSize;
				height:1.2rem;
				border: 0.5px solid #eee;
				padding: 0 0.45rem;
				line-height: 1.2rem;
				text-align: center;
				border-radius: 1.2rem;
				&.active {
					color: $primaryColor;
					border: 0.5px solid $primaryColor;
				}
			}
		}
	}
	.ui-evaluation-body {
		padding: 0 0.75rem;
		background: rgba(255, 255, 255, 1);
    box-sizing: border-box;
		.list {
			padding: 0.75rem 0;
			border-bottom: 0.5px dashed #eee;
			color: #333;
			font-size:$subFontSize;
			.item {
				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;}
				.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;
			}
      .explain{color:orange}
		}
		
	}
  .list-empty {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	text-align: center;
    .empty-icon{font-size:3rem;padding:1rem 0;color:#999}
  	.img {
  		width:2.75rem;
  	}
  	.p {
  		color: #7c7f88;
  		font-size:$subFontSize;
  		padding: 0;
  		margin: 0;
  		font-weight: normal;
  	}
  }
	.geval-image-list{overflow: hidden;margin-top:1rem;
		.geval-image-item{width:33.33%;height:0;padding-bottom: 33.33%;float: left;position: relative;
			.image-wrapper{position: absolute;left:0;right:0.1rem;top:0;bottom:0.1rem;
				.image{width:100%;height: 100%;}
			}
		}
	}
}
</style>