LocalLivingServicesUniapp/pages/evaluate/evaluate.vue

<template>
	<view class="evaluate">
		<view class="top"></view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				客户评价
			</view>
		</view>
		<view class="center">
			<view class="score">
				<view class="picture">
					<view class="left">
						<view class="mark">
							{{statistics.grade}}
						</view>
						<view class="num">
							<u-rate :count="count" v-model="statistics.grade" active-icon="heart-fill" inactive-icon="heart"
								size="20"></u-rate>
							<span>{{statistics.sum}}条评价</span>
						</view>
					</view>
					<view class="separate"></view>
					<view class="right">
						<view class="line" v-for="(item,index) in statistics.commentAppSumVos" :key="index">
							<span>{{item.name}}</span><u-line-progress :percent="item.percent" active-color="#FF5D39"
								style="width: 230rpx;margin-right:5rpx"></u-line-progress>{{item.percent}}%
						</view>
					</view>
				</view>
				<view class="people_num">
					<view class="statis" v-for="(item,index) in statistics.commentAppSumVos" :key="index">
						{{item.value}}人{{item.name}}<span></span>
					</view>
				</view>
			</view>
			<view class="appraise">
				<view class="select">
					<view class="type" :class="curremtIndex == index?'active':''" v-for="(item,index) in typeList" :key="index"
						@click="change(item,index)">
						{{item.name}}
					</view>
					<view style="width: 144rpx;"></view>
				</view>
				<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getcommentList" @init="mescrollInit"
					style="height: 64vh;" :use="false">
					<view class="item" v-for=" (item,index) in appraiseList" :key="index">
						<view class=" headr">
							<view class="left">
								<view class="img">
									<image :src="item.commentsReply" mode="" v-if="item.commentsReply"></image>
									<image src="/static/avatar_boy.png" mode="" v-else></image>
								</view>
								<view class="name">
									{{item.userName}}<br />
									<span>{{item.commentTime}}发布</span>
								</view>
							</view>

							<view class="right">
								<u-rate :count="count" v-model="item.commentGrade" active-icon="heart-fill" size="20" :disabled="true"
									inactive-icon="heart"></u-rate><span>{{item.grade}}</span>
							</view>
						</view>
						<view class="product">
							{{item.productName}}
						</view>
						<view class="content">
							{{item.commentContent}}
						</view>
						<view class="image" v-if="item.imagesList">
							<view class="img" v-for="(row,index) in item.imagesList" :key="index">
								<image :src="row" mode=""></image>
							</view>
						</view>
						<view class="recover" v-if="item.commentsReply">
							商家回复：{{item.commentsReply[0].commentContent}}
						</view>

						
						<!-- <view class="remove" v-if="item.commentsReply">
							{{item.time}}{{item.commentContent}}
							<view class="btn">删除回复</view>
						</view> -->
						<view class="reply">
							<input v-model="item.reply" placeholder="回复..." style="height: 36rpx;"  @confirm="replyUser(item)" />
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		// mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				merchantId: '',
				statistics: {},
				curremtIndex: 0,
				timestamp: 86400,
				checked: true,
				count: 5,
				value: 3,
				icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'],
				typeList: [{
						name: '全部',
						commentGrade: 0
					},
					{
						name: '推荐',
						commentGrade: 1
					},
					{
						name: '一般',
						commentGrade: 2
					},
					{
						name: '差评',
						commentGrade: 3
					},
					{
						name: '未回复',
						commentGrade: 4
					},
					{
						name: '有文字',
						commentGrade: 5
					},
					{
						name: '图/视频',
						commentGrade: 6
					},
				],
				appraiseList: [],
				reply: '',
				commentGrade: 0,
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				
			};
		},
		mounted() {
			this.getcomment()
			this.mescroll.optDown.use = false
			// this.getcommentList()
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//切换条件
			change(item, index) {
				this.curremtIndex = index
				this.commentGrade = item.commentGrade
				let page = {
					num: 1,
					size: 10
				}
				this.appraiseList = []
				this.getcommentList(page)
			},
			//获取用户评论数据
			getcomment() {
				this.$http.get("/app/comments/statistics?merchantId=" + this.merchantId).then(res => {
					if (res.data.code == 200) {
						this.statistics = res.data.result
					}
				})
			},
			//获取用户评论列表
			getcommentList(page) {
				console.log(page)
				this.$http.get("/app/comments/list?merchantId=" + this.merchantId + '&commentGrade=' + this.commentGrade +
					'&pageNo=' + page.num + '&pageSize=' + page.size).then(
					res => {
						if (res.data.code == 200) {
							console.log(res)
							this.appraiseList = this.appraiseList.concat(res.data.result.records)
							this.mescroll.endSuccess(res.data.result.records.length, res.data.result.total);; // 结束下拉刷新状态
						}
					}).catch(() => {
					this.mescroll.endErr()
				})
			},
			replyUser(item){
				console.log(item)
				let data = {
					commentContent:item.reply,
					commentId:item.commentId
				}
				this.$http.post('/app/comments/reply',data).then(res =>{
					console.log(res)
					if(res.data.code == 200){
						uni.showToast({
							icon:'none',
							title:'回复成功'
						})
						let page = {
							num: 1,
							size: 10
						}
						this.getcommentList(page)
					}
					
					
				})
			}
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'login_user_info',
				success: function(res) {
					that.merchantId = res.data.merchantId
				}
			})
		}
	};
</script>

<style lang="scss" scoped>
	.evaluate {
		width: 100vw;
		height: 100vh;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
				background: linear-gradient(90deg, #DCF0FF 4%, #FFE3CE 67%, #FFFCE6 100%), linear-gradient(0, #F7F8FC 0%, rgba(247, 248, 252, 0) 100%);
		}

		/*#endif*/
		.head {
			width: 100%;
			height: 112rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(90deg, #DCF0FF 4%, #FFE3CE 67%, #FFFCE6 100%), linear-gradient(0, #F7F8FC 0%, rgba(247, 248, 252, 0) 100%);
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}

			.case {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		/*#ifdef APP-PLUS*/
		.head {
			width: 100%;
			height: var(--status-bar-height);
			background: linear-gradient(90deg, #DCF0FF 4%, #FFE3CE 67%, #FFFCE6 100%), linear-gradient(0, #F7F8FC 0%, rgba(247, 248, 252, 0) 100%);
		}

		/*#endif*/
		.center {
			flex: 1;
			padding: 0px 22rpx 10rpx;
			overflow-y: auto;

			.score {
				width: 100%;
				margin: 20rpx auto 0px;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 16rpx;

				.picture {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #eeeeee;
					padding-bottom: 10rpx;

					.left {
						width: 225rpx;
						height: 93rpx;
						display: flex;
						align-items: center;

						.mark {
							flex: 1;
							font-size: 64rpx;
							font-weight: 600;
							margin-right: 16rpx;
						}

						.num {
							font-size: 22rpx;
							color: #999999;

							span {
								display: block;
								margin-top: 8rpx;
							}
						}
					}

					.separate {
						width: 1px;
						height: 92rpx;
						background-color: #eeeeee;
					}

					.right {
						width: 354rpx;
						// padding: 20rpx;
						display: flex;
						flex-direction: column;
						// align-items: center;
						justify-content: space-between;
						font-size: 20rpx;
						color: #999999;

						.line {
							width: 100%;
							display: flex;
							align-items: center;

							span {
								margin-right: 10rpx;
							}
						}
					}
				}

				.people_num {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #999999;
					margin-top: 10rpx;

					.statis {
						display: flex;
						align-items: center;

						span {
							display: block;
							width: 1rpx;
							height: 22rpx;
							background-color: #999999;
							margin: 0px 16rpx;
						}
					}


				}
			}

			.appraise {
				width: 100%;
				margin-top: 20rpx;

				.select {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					gap: 33rpx;
					margin-bottom: 10rpx;

					.type {
						width: 144rpx;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #ccc;
						// margin-right: 20rpx;
						// margin-bottom: 20rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
					}

					.active {
						background: rgba(68, 154, 255, 0.1);
						border: 1px solid #449AFF;
						color: #2983EC;
					}
				}

				.list {

					.item {
						margin-top: 20rpx;
						background: #ffffff;
						padding: 16rpx;
						border-radius: 16rpx;
						box-shadow: 0px 2px 8px 0px rgba(214, 225, 237, 0.1);
					}

					.headr {
						display: flex;
						justify-content: space-between;

						.left {
							display: flex;

							.img {
								width: 70rpx;
								height: 70rpx;
								border-radius: 8rpx;
								overflow: hidden;
								margin-right: 12rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.name {
							font-size: 24rpx;
							color: #000000;

							span {
								font-size: 22rpx;
								color: #999999;
							}
						}

						.right {
							width: 200rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							color: #FF2848;

							span {
								display: block;
							}
						}
					}

					.product {
						width: 50%;
						height: 36rpx;
						background: #F4F4F4;
						border-radius: 4rpx;
						font-size: 22rpx;
						color: #666666;
						display: flex;
						align-items: center;
						padding: 0 12rpx;
						margin: 10rpx 0px;
					}

					.type {
						margin-top: 20rpx;
					}

					.content {
						margin-top: 20rpx;
					}

					.recover {
						background: #F7F8FC;
						border-radius: 4rpx;
						padding: 12rpx;
						margin: 16rpx 0px 10rpx;
					}

					.image {
						display: flex;
						align-items: center;
						margin: 10rpx 0px 16rpx;

						.img {
							width: 156rpx;
							height: 156rpx;
							border-radius: 4rpx;
							overflow: hidden;
							margin-right: 7rpx;
						}

						.img:nth-child(4n) {
							margin: 0;
						}

						image {
							width: 156rpx;
							height: 156rpx;
						}
					}

					.time {
						margin-top: 20rpx;
					}

					.reply {
						height: 60rpx;
						background: #F7F8FC;
						margin-top: 16rpx;
						padding: 12rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						input {
              width: 80%;
							font-size: 22rpx;
						}
					}

					.remove {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 22rpx;
						color: #999999;

						.btn {
							margin-top: 10rpx;
							width: 144rpx;
							height: 47rpx;
							border-radius: 47rpx;
							border: 1px solid #449AFF;
							font-size: 24rpx;
							color: #449AFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

			}
		}



	}

	::v-deep.u-iconfont {
		font-size: 20rpx;
		width: 20rpx;
		height: 20rpx;
	}

	::v-deep.u-progress {
		height: 12rpx !important;
		border-radius: 53rpx;
	}
</style>