store/pages/evaluate/evaluate.vue

<template>
	<view class="evaluate">
		<view class="title">全部</view>
		<view class="eva_con" v-for="item in evaList" :key="item.id">
			<image :src="item.user.avatar" v-if="item.user" style="flex-shrink: 0;"></image>
			<view class="eva_detail">
				<view class="flexB">
					<view>
						<view style="font-size:32rpx;font-weight: bold;" v-if="item.user">{{ item.user.nickname }}</view>
						<text style="font-size:28rpx;">{{ item.created_at }}</text>
					</view>
					<view class="copy_btn flexC" @click="replay(item.id, item.user.nickname)">回复</view>
				</view>
				<view style="word-wrap: break-word">{{ item.content }}</view>
				<view class="reply">
					<view v-for="temp in item.comment" :key="temp.id">
						<view class="reply_photo flexS">
							<image :src="item.store.img"></image>
							<text>{{ item.store.name }}</text>
						</view>
						<view class="reply_con">
							<text>回复</text>
							<text style="color:#B5B5B5;margin:0 10rpx;" v-if="item.user">{{ item.user.nickname }}</text>
							<text>：{{ temp.content }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-if="evaList.length == 0">
			<image src="../../static/imgs/default/no_comment.png"></image>
			<view>暂无评价</view>
		</view>
		<view class="eval flexC" v-if="isReplay">
			<input type="text" :placeholder="'@' + name" v-model="content" />
			<view class="flexC base_btn" @click="send">回复</view>
		</view>
	</view>
</template>

<script>
import { getComment, replyCommet } from '@/apis/shop.js';
export default {
	data() {
		return {
			isReplay: false, //是否显示回复输入框
			evaList: [], //评论列表
			params: {
				page_index: 1,
				page_size: 15
			},
			id: '', //回复当前评论的id
			name: '', //回复的对象
			content: '', //回复内容
			total: '' //总条数
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		/*获取评论列表*/
		getList() {
			let { page_index, page_size } = this.params;
			getComment({ page_index, page_size }).then(res => {
				this.total = Math.ceil(this.page_size / res.data.total);
				this.evaList = res.data.list;
			});
		},
		/*点击回复按钮
		 *@  name  回复的对象
		 *@  id  回复的评论的id
		 */
		replay(id, name) {
			this.id = id;
			this.isReplay = true;
			this.name = name;
		},
		/*回复评论
		 *@params content 回复内容
		 *@params comment_id   此条评论的id
		 */
		send() {
			if (!this.content) {
				uni.showModal({
					content: '请输入回复内容',
					showCancel: false
				});
				return false;
			}
			replyCommet({ content: this.content, comment_id: this.id }).then(res => {
				if (res.code == 200) {
					this.isReplay = false;
					this.content = '';
					this.getList();
					uni.showToast({
						title: '回复成功',
						duration: 3000
					});
				} else {
					uni.showModal({
						content: res.data,
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.evaluate {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	// margin: 0 auto;
	min-height: 100%;
	background: #fff;
	position: relative;
	padding-bottom: 120rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 20rpx;
		&::after {
			content: '';
			display: block;
			width: 32rpx;
			height: 6rpx;
			background: linear-gradient(180deg, #fc9863 0%, #f76454 100%);
			border-radius: 6rpx;
			margin: 3rpx 0 0 15rpx;
		}
	}
	.eva_con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		box-sizing: border-box;
		image {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.eva_detail {
			width: 90%;
			border-bottom: 2rpx solid #f5f5f5;
			padding-bottom: 30rpx;
			> view {
				view {
					font-size: 28rpx;
					margin-bottom: 15rpx;
				}
				text {
					font-size: 24rpx;
					color: #999;
				}
				// .reply_btn {
				// 	width: 116rpx;
				// 	height: 54rpx;
				// 	background: linear-gradient(92deg, #fc9863 0%, #f76454 100%);
				// 	border-radius: 28rpx;
				// 	color: #fff;
				// 	font-size: 28rpx;
				// }
			}
			.reply_count {
				margin-top: 20rpx;
				color: $base-color;
				font-size: 24rpx;
			}
			.reply {
				margin-top: 40rpx;
				.reply_photo {
					image {
						height: 50rpx;
						width: 50rpx;
						margin-right: 20rpx;
					}
					text {
						font-size: 28rpx;
						color: #ea4a41;
					}
				}
				.reply_con {
					margin-top: 15rpx;

					text {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}
	.eval {
		width: 100%;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		background-color: #fff;
		input {
			width: 418rpx;
			height: 68rpx;
			background: #f8f8f8;
			border-radius: 34rpx;
			padding-left: 20rpx;
			color: #333;
		}
	}
}
</style>