shop_app/components/ktt/comment.vue

<template>
	<view class="dialogBox" v-if="show">
		<view class="dialog" @click="close()"></view>
		
		<view class="block">
			<view class="title">
				<text>本团评价</text>
				<view class="close" @click="close()"><up-icon name="close" color="#666" /></view>
			</view>
			<scroll-view scroll-y="true" class="contentBox" @scrolltolower="scorllBottom">
				<view class="item" v-for="(item, index) in list" :key="item.id">
					<view class="user" v-if="item.user">
						<image :src="item.user.avatar"></image>
						<view class="box">
							<view class="name">{{item.user.nickname}}</view>
							<view class="time">{{item.date}}</view>
						</view>
					</view>
					<view v-if="item.item && item.item.sku_name" class="sku_name">规格：{{item.item.sku_name}}</view>
					<text class="comment">{{item.comment}}</text>
					<view class="box_zong" v-if="item.material.length">
						<view class="box_imgs" v-for="(it, index) in item.material" :key="index">
							<image :src="it.url" v-if="it.type === 1" @click="viewImg(it, item.material)" mode="aspectFill"></image>
						</view>
					</view>
					<view class="btm">
						<view style="display: flex;margin-right: 10px;" @click="toPingbi(index)"><up-icon name="eye-off" color="#666" />屏蔽</view>
						<view style="display: flex;" @click="toTousu(item)"><up-icon name="warning-fill" color="#666" />举报</view>
					</view>
				</view>
				
				<view class="noMore" v-if="list.length && page >= lastPage && !loading">— 没有更多了 —</view>
				<view class="empty" v-if="!list.length && !loading">
					<up-empty mode="comment" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/comment.png" text="暂无评价喔"></up-empty>
				</view>
				<view v-if="loading" class="loadbox">
					<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { get } from '@/api/request.js'
	import { showToast } from '../common.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			},
			id: {
				type: Number,
				default: 0
			}
		},
		setup(props, context) {
			const data = reactive({
				id: 0,
				show: false,
				list: [],
				loading: false,
				page: 1,
				lastPage: 0
			})
			
			function getInfo(val) {
				data.loading = true
				get(`/api/v1/goods/comment/${data.id}`, {
					page: data.page,
					pageSize: 20,
					type: 1
				}).then((res) => {
					data.list = val == 1 ? data.list.concat(res.data) : res.data
					data.lastPage = res.meta.last_page
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			function scorllBottom() {
				if (data.page < data.lastPage) {
					data.page ++
					getInfo(1)
				}
			}
			
			const viewImg = (it, imgs) => {
				var img = []
				imgs.forEach((res) => {
					if (res.type == 1) {
						img.push(res.url)
					}
				})
				uni.previewImage({
					current: it.url,
					urls: img
				})
			}
			
			function close() {
				context.emit('close')
			}
			
			function toTousu(item) {
				let text = '举报用户“' + item.user.nickname + '”' + '在团购ID“' + data.id + '”的评论'
				uni.navigateTo({
					url: '/pages/mine/msg/complaint?type=2&desc=' + text
				})
			}
			
			function toPingbi(i) {
				data.list.splice(i, 1)
			}
			
			watch(props, async (newProps) => {
				if (newProps.show) {
					data.show = true
					data.id = newProps.id * 1
					data.page = 1
					data.list = []
					getInfo(0)
				} else {
					data.show = false
				}
			})
			
			return {
				...toRefs(data),
				getInfo,
				close,
				scorllBottom,
				viewImg,
				toPingbi,
				toTousu
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialogBox{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 200;
		overflow: hidden;
		.dialog{
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}
		.block{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: #fff;
			height: 78vh;
			border-radius: 20rpx 20rpx 0 0;
			.title{
				color: #333;
				font-size: 30rpx;
				height: 100rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				.close{
					padding: 10rpx;
				}
			}
			.contentBox{
				height: calc(100% - 100rpx);
				overflow-y: auto;
				.item{
					padding: 24rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #f1f1f1;
					.user{
						display: flex;
						justify-content: space-between;
						align-items: center;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 6rpx;
						}
						.box{
							width: calc(100% - 80rpx);
							.name{
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
								margin-right: 10rpx;
							}
							.time{
								font-size: 24rpx;
								color: #999;
							}
						}
					}
					.sku_name{
						color: #999;
						margin-top: 10rpx;
						font-size: 24rpx;
					}
					.comment{
						font-size: 28rpx;
						line-height: 40rpx;
					}
					.box_zong{
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;
						.box_imgs{
							margin-right: 20rpx;
							&:nth-child(3n+3) {
								margin-right: 0;
							}
							image{
								width: 200rpx;
								height: 200rpx;
								margin-bottom: 20rpx;
							}
						}
					}
					.btm{
						display: flex;
						align-items: center;
						justify-content: flex-end;
						font-size: 24rpx;
						color: #666;
						padding: 16rpx 24rpx;
						background: #f6f6f6;
						border-radius: 4px;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	.noMore{
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin: auto;
		padding: 30rpx 0 60rpx;
		width: 100%;
	}
	.empty{
		width: 100%;
		padding: 120rpx 0;
		text-align: center;
		.img{
			width: 400rpx;
		}
		text{
			display: block;
			font-size: 24rpx;
			color: #aaa;
			margin-top: 20rpx;
		}
	}
	.loadbox{
		padding: 30rpx 0;
		text-align: center;
		color: #666;
	}
</style>