Anti-fraud-mobile/components/Reply/index.vue

<template>
	<view @touchmove.stop.prevent="moveHandle">
		<u-popup :show="show" :round="10">
			<view class="content">
				<view class="title">
					<text>共{{total}}条回复</text>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<!-- 楼主评论 -->
				<view class="commentBox">
					<view class="left">
						<!-- 圆形标记 -->
						<view class="comment_round"></view>
						<!-- 头像 -->
						<u-avatar :src="avatarSrc" shape="square"></u-avatar>
					</view>
					<!-- 名称、内容等 -->
					<view class="comment_detail">
						<view class="comment_info">
							<view>
								<text class="name">开心小市民</text>
								<text class="landlord">楼主</text>
							</view>
							<view class="likeNum">
								<i class="custom-icon custom-icon-thumb-up"></i>
								543
							</view>
						</view>
						<view class="comment_content">我还在用果6</view>
						<view class="time">2分钟前</view>
					</view>
				</view>
				<!-- 分割线 -->
				<u-divider text="全部回复"></u-divider>
				<!-- 其他回复 -->
				<scroll-view style="maxHeight:50vh" :scroll-y="true" :refresher-enabled="true"
					:refresher-triggered="triggered" @scrolltolower="scrolltolower" @refresherrefresh="onRefresh"
					refresher-default-style="black">
					<!-- 需要滚动的区域 -->
					<view class="commentBox" v-for="item in 10" :key="item">
						<view class="left">
							<!-- 圆形标记 -->
							<view class="comment_round"></view>
							<!-- 头像 -->
							<u-avatar :src="avatarSrc" shape="square"></u-avatar>
						</view>
						<!-- 名称、内容等 -->
						<view class="comment_detail">
							<view class="comment_info">
								<view class="name">开心小市民</view>
								<view class="likeNum">
									<i class="custom-icon custom-icon-thumb-up"></i>
									543
								</view>
							</view>
							<view class="comment_content">我还在用果6</view>
							<view class="comment_func">
								<view>
									<text class="reply" @click="handleApply">回复></text>
									<text class="time">2分钟前</text>
								</view>
								<view class="delete">删除</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 评论框 -->
				<u--input placeholder="写评论" prefixIcon="edit-pen"
					prefixIconStyle="font-size: 22px;color: #909399;margin-left:10px" border="none"
					:customStyle="{height:'80rpx',marginTop: '50rpx',backgroundColor: '#eee'}"></u--input>
			</view>
		</u-popup>
		<!-- 回复弹出组件 -->
		<!-- <Reply :show="replyShow" @close="closeReply" /> -->
	</view>

</template>

<script>
	import Reply from '@/components/Reply/index.vue'
	export default {
		components: {
			Reply
		},
		props: {
			// 弹出层是否展示
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				total: 0, // 总评论量
				triggered: false, // 下拉是否激活
				list: [], // 列表数据
				pageNum: 1,
				pageSize: 10,
				isRequesting: false, // 是否正在请求，如果是则返回，用于节流
				replyShow: false,
				avatarSrc: "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg",
			};
		},
		methods: {
			closeReply() {
				this.replyShow = false
			},
			// 点击弹出回复框
			handleApply() {
				this.replyShow = true
			},
			// 关闭弹出框
			close() {
				this.$emit('close')
			},
			// 禁止外层容器滚动
			moveHandle() {},
			// 上拉加载
			scrolltolower() {
				if (this.list.length < this.total) {
					this.pageNum += 1;
					// 继续请求下一页，记得保留原先数组
					this.loadmore();
				} else {
					uni.showToast({
						title: "没有更多了",
						icon: "none",
						duration: 2000,
					});
					return;
				}
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// 开启下拉自定义样式
				this.triggered = true;
				//  重新调用
				this.loadmore();
				// 1秒之后复位
				setTimeout(() => {
					this.triggered = false;
				}, 1000);
			},


			scrolltolower() {
				this.loadmore();
			},
			loadmore() {
				this.request('/info/InfoContent/list', 'GET').then(res => {
					console.log("res:", res)
					if (res) {}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-popup {
		.content {
			// min-height: 600rpx;
			padding: 40rpx;
			max-height: 80%;
		}

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 50rpx;
			font-weight: 900;
			margin-bottom: 60rpx;
		}

		.commentBox {
			width: 100%;
			display: flex;
			color: #000;
			font-size: 32rpx;
			margin-bottom: 20rpx;

			.left {
				height: 80rpx;
				// background-color: red;
				display: flex;
				align-items: center;
				margin-right: 30rpx;

				.comment_round {
					width: 20rpx;
					height: 20rpx;
					background-color: #ff2950;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.comment_detail {
				width: 100%;

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

					.name {
						font-weight: 600;
					}

					.landlord {
						display: inline-block;
						margin-left: 10rpx;
						font-size: 28rpx;
						width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						color: #f87f2d;
						background-color: #fef2e9;
						text-align: center;
						border-radius: 50rpx;
					}

					.likeNum {
						font-size: 28rpx;
					}

					.custom-icon {
						margin-right: 10rpx;
						font-size: 40rpx;

						&::before {
							background: -webkit-linear-gradient(top, #f84a1a, #ffa53e);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							font-weight: bold;
						}
					}
				}

				.comment_content {
					margin: 20rpx 0;
					color: #333;
				}

				.time {
					color: #999;
					font-size: 28rpx;
				}

				.comment_func {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.reply {
						color: #f87f2d;
						font-size: 28rpx;
						margin-right: 10rpx;
						font-weight: 600;
					}

					.time {
						color: #999;
						font-size: 28rpx;
					}

					.delete {
						font-size: 28rpx;
						;
						width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #eae8e7;
						text-align: center;
						border-radius: 50rpx;
					}
				}
			}
		}
	}
</style>