discounts-minapp/study/community.vue

<template>
	<view class="community">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="author-info">
				<image class="head" :src="item.head" mode=""></image>
				<view class="name">
					{{item.name}}
				</view>
			</view>
			<view class="title">
				{{item.content}}
			</view>
			 <u-album :urls="item.imgList" space="20rpx" multipleSize="190" maxCount="3" ></u-album>
			 
			 <view class="handle-box">
			 	<view class="btn">
					<image class="icon" src="../static/zan.png" mode=""></image>
					点赞
			 	</view>
				<view class="btn" @click="showComment">
					<image class="icon" src="../static/pinglun.png" mode=""></image>
					评论
				</view>
			 </view>
		</view>
		
		<image class="send-btn" src="../static/send.png" @click="send" mode=""></image>
		
		<!-- 评论区 -->
		<u-popup :show="show" :round="16" closeable mode="bottom" @close="close" @open="open">
			<view class="comment-box">
				<view class="comment-title">
					评论
				</view>
				<view class="comment-item" v-for="(item,index) in commentList" :key="index">
					<image class="head" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623" mode=""></image>
					<view class="info">
						<view class="user-name">
							{{item.name}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				albumWidth: 0,
					// 论坛列表
					list:[
						{
							head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623',
							name:'李老师',
							content:'总算结束了一天的课程，又是元气满满的一天',
							imgList:[
					'https://gd-hbimg.huaban.com/0703ff963e28a9bb8084926380fd632c9f981e30c6581-Aa0GcN_fw658webp',
					'https://gd-hbimg.huaban.com/7454f225f6174f65f0584eab4be2a7699d140aa917da0-Qsm2AY_fw658webp',
					'https://gd-hbimg.huaban.com/54c90225377e9ddb9aa260a735f429edf15309361cb73-QCueku_fw658webp',
					'https://gd-hbimg.huaban.com/b1a17ed6f8c2b6510b9b2fae0a24720142b7082753e46-eswEfR_fw658webp',
					'https://gd-hbimg.huaban.com/cd497f0ac15a9724439e8a166550c5704970a44914ebbf-N5Buhq_fw658webp'
					],
						},
						{
								head:'https://gd-hbimg.huaban.com/39f79920b96a969e257370a97d6408c95326707cc241-wlRfjI_fw658webp',
								name:'白老师',
								content:'总算结束了一天的课程，又是元气满满的一天',
								imgList:[
						'https://gd-hbimg.huaban.com/5519accd3d95a5f992bd2f485fa5ca04c9af67be56754-gus75N_fw658webp',
						'https://gd-hbimg.huaban.com/1f80d1853ac691d48d1ce16d07f0b34cba1aa13ebcf1-xDl3c3_fw658webp',
						'https://gd-hbimg.huaban.com/114b9fd15abef0d506b89311ecad91897c31cf7885c0-YDYx4A_fw658webp',
						'https://gd-hbimg.huaban.com/cd497f0ac15a9724439e8a166550c5704970a44914ebbf-N5Buhq_fw658webp'
						],
							},
							{
									head:'https://gd-hbimg.huaban.com/ccd8ea8cd52d82b9ced4e8d2e2a48462827ce8b5d503-ELfVHW_fw658webp',
									name:'张老师',
									content:'总算结束了一天的课程，又是元气满满的一天',
									imgList:[
							'https://gd-hbimg.huaban.com/e1dff5990532ceefe53fbab078101782d089733d178e7-PrqgOk_fw658webp',
							'https://gd-hbimg.huaban.com/811a433a12a73ff1ecae6e0e06b2c8d0a32326b713fa1-uE04AT_fw658webp',
							'https://gd-hbimg.huaban.com/f2bb5d1d714c08ac4e976eabf6b2f7a402152ab320bec4-7gy06Q_fw658webp',

							],
								}
					],
					// 评论列表
					commentList:[
						{
							name:'李老师',
							head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623',
							content:'继续加油哦，看好你！',
							time:'8-29 21:13'
						},
						{
							name:'洋洋小小',
							head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623',
							content:'明天也会是美好的一天，以后都会是',
							time:'8-29 21:18'
						},
						{
							name:'吾煎榴莲',
							head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623',
							content:'哈哈哈哈，要幸福',
							time:'8-29 21:32'
						}
					]
			}
		},
		methods: {
			showComment(){
				this.show = true
			},
			send() {
				uni.navigateTo({
					url:'./publish'
				})
			},
			close(){
				this.show = false
			},
			open(){
				
			},
		},
		created() {
		}
	}
</script>

<style lang="scss" >
//评论区关闭按钮 
.community .uicon-close{
	font-size: 30rpx!important;
}
.community{
	padding:30rpx;
	background: #F9F9F9;
	border-radius: 16rpx;
	min-height: 100vh;
	.item{
		padding: 30rpx;
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		.author-info{
			display: flex;
			align-items: center;
			.head{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background: #999;
			}
			.name{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin-left: 10rpx;
			}
		}
		.title{
			margin: 24rpx 0;
		}
		
		.handle-box{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.btn{
				margin-right: 80rpx;
				.icon{
					width: 33rpx;
					height: 35rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
	
	.send-btn{
		position: fixed;
		bottom: 150rpx;
		right: 30rpx;
		width: 88rpx;
		height: 88rpx;
	}
	
	.comment-box{
		padding: 30rpx;
		.comment-title{
			font-size: 28rpx;
			font-weight: bold;
			color: #0F0F0F;
			margin-bottom: 20rpx;
		}
		.comment-item{
			display: flex;
			margin-bottom: 30rpx;
			.head{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.info{
				margin-left: 20rpx;
				.user-name{
					font-size: 24rpx;
					color: #999999;
				}
				.content{
					font-size: 24rpx;
					color: #333333;
					margin: 10rpx 0 20rpx;
				}
				.time{
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
}
</style>