hlm_pl_mall_h5/pages/home/goodsdetail/GoodsEvaluation.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<home-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
    <view class="div common-header-wrap">
        <view class="status-holder"></view>
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="商品评价" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
    </view>
    </view>

    <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>

</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { mapState, mapMutations, mapActions } from 'vuex'
import EmptyRecord from '../../EmptyRecord'
import { evaluation } from './static'
import { getReviewList } from '../../../api/homegoodsdetail'
export default {
  data () {
    return {
		navHeight: 0,
		screenWidth:0,
		showimage: '',
      staticData: evaluation,
      id: 0,
      currentTag: 'total',
      grade: 0,
      subTotal: {},
      reviewList: [],
      page: 0,
      loading: false,
      hasmore: true
    }
  },
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord
  },
  onLoad: function (option) {
    this.id=option.goods_id
    this.loadMore()
  },

	computed: {
		fontSize(){
		  return getFontSize()
		},
		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"
		}
	},
	mounted(){
	    // #ifdef  MP-WEIXIN
	    this.navHeight = uni.getMenuButtonBoundingClientRect().top
	    // #endif
	    this.screenWidth=uni.getSystemInfoSync().screenWidth
	  // this.changePictureCode()
	},
  methods:{
	  goBack(){uni.navigateBack({delta:1})},
	  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>