caimei-applets-caimei/components/module/productDetails/evaluate.vue

<template name="evaluate">
	<!-- 供应商信息 -->
	<view class="evaluate clearfix">
		<view class="evaluate-header">评价({{evaluateList.length}})</view>
		<view class="evaluate-empty" v-if="isEmpty">该商品暂无评价</view>
		<view class="evaluate-list" v-else>
			<scroll-view scroll-y :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower">
				<view class="row-list" v-for="(item, index) in evaluateList" :key="index">
					<view class="list-title">
						<view class="name">{{item.name}}</view>
						<view class="stars">
							<uni-stars :stars="item.score2" :icon-class='iconClass' :icon-color='iconColor' :font-size='36' :width-info="178"></uni-stars>
						</view>
					</view>
					<view class="list-content">
						{{item.commentContent}}
					</view>
					<view class="list-time">
						<text>{{item.postTime }}</text>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :text='nomoreText'></tui-nomore>
				<!--加载loadding-->
			</scroll-view>	
		</view>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	import { queryEvaluate } from "@/api/product.js" 
	
	export default{
		name:'evaluate',
		props:{
			queryProductid: {
				// Unistars类型
				type: Number,
				default: 0
			}
		},
		components:{
			tuiLoadmore,
			tuiNomore,
			uniStars
		},
		data() {
			return{
				evaluateList:[],
				iconClass:'icon-aixin',
				iconColor:'#FF7800',
				isEmpty:false,
				pageNum:1,
				pageSize:10,
				hasNextPage:false,
				loadding: false,
				pullUpOn: true,
				nomoreText: '上拉显示更多',
				productID:'',
				scrollHeight: '',
			}
		},
		created() {
			this.productID = this.queryProductid
			this.infoEvaluate()
			this.setScrollHeight();		
		},
		methods:{
			infoEvaluate(){
				queryEvaluate({productID:this.productID,pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
					let responseData = response.data
					if(responseData.results&&responseData.results.length > 0){
						this.isEmpty = false
						this.hasNextPage = responseData.hasNextPage
						this.evaluateList =responseData.results
						this.pullFlag = false;
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = true
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}else{
						this.isEmpty = true
					}
				}).catch(response =>{
					this.$util.msg(response.msg,2000)
				})
			},
			getOnReachBottomData(){
				this.pageNum+=1
				let params = {productID:this.productID,pageNum:this.pageNum,pageSize:this.pageSize}
				queryEvaluate(params).then(response =>{
					let responseData = response.data
					if(responseData.results&&responseData.results.length > 0){
						this.hasNextPage = responseData.hasNextPage
						this.evaluateList = this.evaluateList.concat(responseData.results) 
						this.pullFlag = false;// 防上拉暴滑
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				}).catch(response =>{
					this.$util.msg(response.msg,2000)
				})
			},
			scrolltolower() {
				if(this.hasNextPage){
					this.loadding = true
					this.pullUpOn = true
					this.getOnReachBottomData(this.currentTab);
				}	
			},
			setScrollHeight() {
				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
				this.windowHeight = windowHeight - 1;
				this.scrollHeight = windowHeight - 1;
			}
		},
		
	}
</script>

<style lang="scss">	
.evaluate{
	background: #FFFFFF;
	width: 100%;
	.scoll-y {
		height: 100%;
	}
	.evaluate-empty{
		width: 702rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 24rpx;
		font-size: $font-size-32;
		color: #999999;
		text-align: center;
	}
	.evaluate-header{
		width: 702rpx;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 24rpx;
		font-size: $font-size-32;
		color: $text-color;
		border-bottom: 1px solid #F2F2F2;
		text-align: left;
	}
	.evaluate-list{
		width: 702rpx;
		height: auto;
		padding: 24rpx;
		.row-list{
			width: 100%;
			height: auto;
			float: left;
			padding: 15rpx 0;
			border-bottom: 1px solid #F2F2F2;
			&:last-child{
				margin-bottom: 30rpx;
			}
			.list-title{
				height: 40rpx;
				line-height: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				padding: 20rpx 0;
				.name{
					float: left;
					margin-right: 30rpx;
				}
				.stars{
					width: 178rpx;
					float: right;
				}
			}
			.list-content{
				width: 100%;
				min-height: 80rpx;
				height: auto;
				font-size: $font-size-24;
				line-height: 30rpx;
				text-align: justify;
				padding: 10rpx 0;
				color: #999999;
			}
			.list-time{
				width: 100%;
				height: 40rpx;
				font-size: $font-size-24;
				line-height: 40rpx;
				text-align: right;
				color: #999999;
			}
		}
	}
}
</style>