tongli_WeChat/compoents/userReviews.vue

<template>
	<!-- 游客点评 -->
	<view class="comment-box" id="comment">
		<view class="comment-title flex-between">
			<view>用户评价</view>
			<view class="comment-num" @click="viewAll()">
				共{{commentNum}}条 >
			</view>
		</view>
		<view class="comment-container" v-if="commentList.length > 0">
			<view class="comment-item" v-for="(item,index) in commentList" :key="index">

				<view class="flex flex-items-center">
					<img :src="item.user.avatar" class="comment-avatar">
					<view class="comment-name text-overflow">{{item.user.nickname}}</view>
				</view>

				<view class="comment-content text-overflowRows">
					{{ item.content }}
				</view>
				
			</view>
		</view>
		<view class="empty-box" v-else>
		    <view>这里空空如也，快去点评吧!</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		props:['goodsId'],
		data() {
			return {
				commentList: [],
				commentNum: 0
			}
		},
		mounted () {
			this.getComment()
		},
		methods: {
			getComment() {
				this.commentList = []
				this.commentNum = 0
				if (!this.goodsId)  return
				this.Post({
					goods_id: this.goodsId,
					offset: 0,
					limit: 2
				}, '/api/scenic/getGoodsCommentByScenicId').then(res => {
					this.commentList = res.data
					this.commentNum = res.msg
				})
			},
			viewAll () {
				uni.navigateTo({
					url:'/subPackages/eventCalendar/detail?id='+this.id
				})
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
	.comment-box{
		width: 697rpx;
		height: auto;
		margin: 24rpx auto 0;
		
		.comment-title{
			height: 95rpx;
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 37rpx;
			color: #000000;
			
			
			.comment-num{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #515150;
			}
		}
		
		.comment-container{
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 29rpx;
		}
		
		.comment-item{
			padding: 27rpx 0;
			border-bottom: 1rpx solid #D8D8D8;
			
			.comment-avatar{
				width: 53rpx;
				height: 53rpx;
				background: #999999;
				border-radius: 50%;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			
			.comment-name{
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
			
			.comment-time {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
			
			.comment-content{
				margin-top: 24rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
		}
		.comment-item:last-of-type{
			border: none;
		}
		
		.empty-box {
		    text-align: center;
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 200rpx;
		}
		
		.content-more{
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	

	
</style>