hz-zhhq-app/pages/evaluate/evaluate.vue

<template>
	<view class="container" >
		<view class="banner-box">
			<image  src="/static/imgs/food-comment-banner.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" style="width: 100%;" >{{title[type]}}</view>
			</view>
			<view class="comment-list" v-if="commentList.length > 0">
				<view class="comment-item" v-for="(item,index) in commentList" :key="index">
					<view class="user-head">
						<image v-if="item.wx_profile" :src="item.wx_profile" mode=""></image>
						<image v-else src="/static/imgs/missing-face.png" mode=""></image>
					</view>
					<view class="fr-content"> 
						<view class="date">{{item.mobile}}</view><!-- formatDate(item.gmt_created,'dateTime') -->
						<view class="name">{{item.applicant_name}}</view>
						
						<view class="food-list" style="margin: 10upx 0upx 20upx 0upx; ">
							<view class="food-item" style="background-color: #C5F2E0;">{{commentGrade[item.satisfied_level>2?0:item.satisfied_level].name}}</view>
						</view>
						<view class="comment-content" style="font-size: 26upx;color: #000000;">{{item.comment_content}}</view>
						<view class="comment-content" style="font-size: 24upx;">服务时间：{{item.detail_time}}</view>
						<view class="comment-content" style="font-size: 24upx;">评价时间：{{formatDate(item.gmt_created,'m_Time')}}</view>
					</view>
				</view> 
			</view>
			<content-none v-else :padTop="35"></content-none>
		</view>
		<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import {getCommentListByType} from '@/common/api.js';
	import {callbackRequest,formatDate} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				formatDate: formatDate,
				loading:false,
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				title:['','理发服务评价',"洗车服务评价",'','','用车服务评价','服务报修评价','咨询服务评价','用户投诉评价','报事服务评价','就诊服务评价'],
				titleIndex:0,
				type:0,
				commentList:[],
				commentGrade: [
					{
						value: '0',
						name: '非常满意'
					},
					{
						value: '1',
						name: '满意',
						checked: 'true'
					},
					{
						value: '2',
						name: '一般'
					}
				],
			};
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad(option) {
			this.type=option.type||0;
			this.initData();
		},
		methods:{
			initData(){
				let params = {
					"method":getCommentListByType,
					data:{
						type:this.type,
						pageSize:this.pageSize,
						pageNum:this.page
					}
				}
				
				callbackRequest(params)
				.then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						if (this.page == 1) {
							this.commentList = res.returnData ;
						} else {
							if (res.returnData.length > 0) {
								this.commentList = this.commentList.concat(res.returnData);
								this.loadingType = 0;
							} else {
								this.loadingType = 2;
							}
						}
					} else {
						alertTip(res.returnMsg);
					}
				})
			}
		},
		onReachBottom() {
			if(this.loadingType !== 0){
				return false;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.initData();
			
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		background: #f8f8f8;
		min-height:100vh;
		overflow: hidden;
		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 100%;
				height: 100%;
			}
			border-radius: 30upx;
		}
		.main {
			margin: 172upx 40upx 0;
			position: relative;
			z-index: 10;
		}
		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 70upx;
			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}
			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
	.comment-list{
		padding:30upx 30rpx 0;
		background: #fff;
		.comment-item{
			overflow:hidden;
			margin-bottom:20rpx;
			.user-head{
				float:left;
				width:90upx;
				height:90upx;
				border-radius:50%;
				image{
					width:100%;
					height:100%;
					border-radius:50%;
				}
			}
			.fr-content{
				margin:0 0 0upx 110upx;
				border-bottom:1px solid #f5f5f5;
				padding-bottom:26upx;
				.name{
					font-size:28upx;
					font-weight:bold;
					line-height:44upx;
				}
				.date{
					float:right;
					font-size:26upx;
					color:#666;
					line-height:44upx;
				}
				.grade{
					padding-bottom:10upx;
					text{
						display:inline-block;
						font-size:26upx;
						color:#666;
						line-height:36upx;
						vertical-align: top;
						padding-right:20upx;
					}
					image{
						width:36upx;
						height:36upx;
						margin-right:8upx;
						vertical-align: top;
					}
				}
				.comment-content{
					font-size:26upx;
					color:#666;
					line-height:40upx;
				}
				.food-list {
					padding: 10rpx 0 0;
					overflow: hidden;
				
					.food-item {
						float: left;
						margin-right: 10rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						color: #13ab5f;
						padding: 4rpx 16rpx;
						border-radius: 6upx;
					}
				}
			}
		}
	}
</style>