universal-wechat-uniapp-241007/components/list/group/groupItem.vue

<template>
	<view class="group-item" @click="$emit('click')">
		<view class="group-header">
			<view class="group-avatar">
				<image :src="item.avatar || '/static/image/logo.jpg'" mode="aspectFill"></image>
			</view>
			<view class="group-info">
				<view class="group-name">{{ item.name || '群组名称' }}</view>
				<view class="group-desc">{{ item.description || '群组描述' }}</view>
				<view class="group-stats">
					<text class="member-count">{{ item.memberCount || 0 }}人</text>
					<text class="separator">·</text>
					<text class="group-type">{{ item.type || '同城群' }}</text>
				</view>
			</view>
			<view class="group-status">
				<view v-if="item.isJoined" class="joined-tag">已加入</view>
				<view v-else class="join-btn">加入</view>
			</view>
		</view>
		
		<view class="group-footer" v-if="item.lastMessage">
			<view class="last-message">
				<text class="message-prefix">最新消息：</text>
				<text class="message-content">{{ item.lastMessage }}</text>
			</view>
			<view class="message-time">{{ item.lastMessageTime || '' }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style scoped lang="scss">
	.group-item {
		margin: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		
		.group-header {
			display: flex;
			align-items: center;
			
			.group-avatar {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
			
			.group-info {
				flex: 1;
				
				.group-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.group-desc {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 8rpx;
					line-height: 1.4;
				}
				
				.group-stats {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					
					.separator {
						margin: 0 8rpx;
					}
				}
			}
			
			.group-status {
				.joined-tag {
					background-color: #5baaff;
					color: #fff;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
				}
				
				.join-btn {
					background-color: #f0f0f0;
					color: #5baaff;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					border: 1rpx solid #5baaff;
				}
			}
		}
		
		.group-footer {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx solid #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.last-message {
				flex: 1;
				font-size: 24rpx;
				color: #999;
				
				.message-prefix {
					color: #666;
				}
				
				.message-content {
					color: #999;
				}
			}
			
			.message-time {
				font-size: 22rpx;
				color: #ccc;
			}
		}
	}
</style>