universal-wechat-uniapp-241007/pages_order/group/groupChat.vue

<template>
	<view class="page">
		<navbar title="群组聊天" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- 消息列表 -->
		<scroll-view 
			class="message-list" 
			scroll-y="true" 
			:scroll-top="scrollTop"
			@scrolltoupper="loadMoreMessages"
		>
			<view class="message-container">
				<view 
					v-for="(message, index) in messageList" 
					:key="message.id || index"
					class="message-item"
					:class="{ 'message-mine': message.isMine }"
				>
					<image 
						:src="message.avatar || '/static/image/logo.jpg'" 
						class="message-avatar" 
						mode="aspectFill"
					></image>
					<view class="message-content">
						<view class="message-info">
							<text class="sender-name">{{ message.senderName }}</text>
							<text class="message-time">{{ message.time }}</text>
						</view>
						<view class="message-text">{{ message.content }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 输入框 -->
		<view class="input-container">
			<view class="input-box">
				<uv-input 
					v-model="inputMessage"
					placeholder="输入消息..."
					:border="false"
					:clearable="true"
					@confirm="sendMessage"
				></uv-input>
			</view>
			<view class="send-btn" @click="sendMessage">
				<uv-icon name="paperplane" size="40rpx" color="#fff"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: '',
				groupInfo: {},
				inputMessage: '',
				scrollTop: 0,
				messageList: [
					{
						id: 1,
						senderName: '张三',
						avatar: '/static/image/logo.jpg',
						content: '大家好，欢迎加入群组！',
						time: '10:30',
						isMine: false
					},
					{
						id: 2,
						senderName: '我',
						avatar: '/static/image/logo.jpg',
						content: '谢谢，很高兴认识大家',
						time: '10:32',
						isMine: true
					},
					{
						id: 3,
						senderName: '李四',
						avatar: '/static/image/logo.jpg',
						content: '有人知道江华哪里有好的租房信息吗？',
						time: '10:35',
						isMine: false
					},
					{
						id: 4,
						senderName: '王五',
						avatar: '/static/image/logo.jpg',
						content: '我这边有个单间出租，位置不错',
						time: '10:38',
						isMine: false
					}
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.groupId = options.id
				this.getGroupInfo()
			}
		},
		onShow() {
			this.scrollToBottom()
		},
		methods: {
			// 获取群组信息
			getGroupInfo() {
				// 模拟群组信息
				const mockGroupInfo = {
					1: { id: 1, name: '江华同城交流群' },
					2: { id: 2, name: '江华美食分享群' },
					3: { id: 3, name: '江华租房信息群' },
					4: { id: 4, name: '江华求职招聘群' },
					5: { id: 5, name: '江华旅游攻略群' },
					6: { id: 6, name: '江华学习交流群' },
					7: { id: 7, name: '江华二手交易群' },
					8: { id: 8, name: '江华宠物交流群' },
					9: { id: 9, name: '江华汽车交流群' },
					10: { id: 10, name: '江华宝妈交流群' },
					11: { id: 11, name: '江华IT技术交流群' },
					12: { id: 12, name: '江华健身运动群' },
					13: { id: 13, name: '江华摄影爱好者群' },
					14: { id: 14, name: '江华创业交流群' },
					15: { id: 15, name: '江华医疗健康群' },
					16: { id: 16, name: '江华读书会' },
					17: { id: 17, name: '江华音乐爱好者群' },
					18: { id: 18, name: '江华电商交流群' },
					19: { id: 19, name: '江华园艺爱好者群' },
					20: { id: 20, name: '江华法律咨询群' }
				}
				
				setTimeout(() => {
					this.groupInfo = mockGroupInfo[this.groupId] || { name: '群组聊天' }
				}, 300)
			},
			
			// 发送消息
			sendMessage() {
				if (!this.inputMessage.trim()) {
					return
				}
				
				const message = {
					id: Date.now(),
					senderName: '我',
					avatar: '/static/image/logo.jpg',
					content: this.inputMessage,
					time: this.getCurrentTime(),
					isMine: true
				}
				
				this.messageList.push(message)
				this.inputMessage = ''
				
				// 滚动到底部
				this.$nextTick(() => {
					this.scrollToBottom()
				})
				
				// 这里可以调用发送消息API
				// this.$api('sendGroupMessage', {
				// 	groupId: this.groupId,
				// 	content: message.content
				// }, res => {
				// 	if (res.code == 200) {
				// 		console.log('消息发送成功')
				// 	}
				// })
			},
			
			// 加载更多消息
			loadMoreMessages() {
				// 这里可以实现加载历史消息的逻辑
				console.log('加载更多消息')
			},
			
			// 滚动到底部
			scrollToBottom() {
				this.scrollTop = 999999
			},
			
			// 获取当前时间
			getCurrentTime() {
				const now = new Date()
				const hours = now.getHours().toString().padStart(2, '0')
				const minutes = now.getMinutes().toString().padStart(2, '0')
				return `${hours}:${minutes}`
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
	
	.message-list {
		flex: 1;
		padding: 20rpx;
		
		.message-container {
			.message-item {
				display: flex;
				margin-bottom: 30rpx;
				
				&.message-mine {
					flex-direction: row-reverse;
					
					.message-content {
						margin-left: 0;
						margin-right: 20rpx;
						align-items: flex-end;
						
						.message-info {
							flex-direction: row-reverse;
							
							.sender-name {
								margin-left: 10rpx;
								margin-right: 0;
							}
						}
						
						.message-text {
							background-color: #5baaff;
							color: #fff;
							border-radius: 20rpx 20rpx 4rpx 20rpx;
						}
					}
				}
				
				.message-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				
				.message-content {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					
					.message-info {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						
						.sender-name {
							font-size: 24rpx;
							color: #666;
							margin-right: 10rpx;
						}
						
						.message-time {
							font-size: 22rpx;
							color: #999;
						}
					}
					
					.message-text {
						background-color: #fff;
						padding: 20rpx;
						border-radius: 20rpx 20rpx 20rpx 4rpx;
						font-size: 28rpx;
						color: #333;
						line-height: 1.4;
						word-break: break-all;
					}
				}
			}
		}
	}
	
	.input-container {
		background-color: #fff;
		padding: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.input-box {
			flex: 1;
			background-color: #f5f5f5;
			border-radius: 30rpx;
			padding: 0 20rpx;
		}
		
		.send-btn {
			width: 80rpx;
			height: 80rpx;
			background-color: #5baaff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>