universal-wechat-uniapp-241007/pages/index/activity.vue

<template>
	<view class="page">
		
		<navbar title="同城群"/>
		
		<!-- 顶部操作栏 -->
		<view class="top-actions">
			<view class="search-container">
				<uv-search 
					v-model="searchKeyword"
					placeholder="搜索群组名称"
					@search="onSearch"
					@clear="onClear"
					bgColor="#f5f5f5"
					:showAction="false"
				></uv-search>
			</view>
			<view class="create-btn" @click="createGroup">
				<uv-icon name="plus" size="30rpx" color="#fff"></uv-icon>
				<text>创建群组</text>
			</view>
		</view>
		
		<!-- 城市分类标签 -->
		<view class="city-tabs-container">
			<uv-tabs 
				:list="categoryList" 
				:current="currentCityTabIndex"
				:activeStyle="{color: '#5baaff', fontWeight: 600}"
				lineColor="#5baaff" 
				lineHeight="6rpx" 
				lineWidth="40rpx"
				keyName="name"
				@click="onCategoryClick"
			/>
		</view>
		
		<!-- 群组列表 -->
		<view class="group-list">
			<groupItem
				:key="index"
				v-for="(item, index) in groupList"
				:item="item"
				@click="onGroupClick(item)"
			/>
		</view>
		
		<!-- 空状态 -->
		<view v-if="groupList.length === 0 && !loading" class="empty-state">
			<uv-empty 
				mode="list"
				text="暂无群组"
				iconSize="120"
			></uv-empty>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-state">
			<uv-loading-icon size="40"></uv-loading-icon>
			<text>加载中...</text>
		</view>
		
		<tabber select="2" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import groupItem from '@/components/list/group/groupItem.vue'
	import { mapState } from 'vuex'
	
	export default {
		components : {
			tabber,
			groupItem,
		},
		data() {
			return {
				searchKeyword: '',
				loading: false,
				currentCityTabIndex: 0, // uv-tabs当前选中的城市索引
				queryParams: {
					cityId: null
				},
				groupList: [],
			}
		},
		computed: {
			...mapState(['cityList']),
			
			// 城市分类列表（包含"全部"选项）
			categoryList() {
				const allTab = { name: '全部', value: null }
				const cityTabs = this.cityList.map(city => ({
					name: city.name || city.cityName || city.title,
					value: city.id || city.cityId
				}))
				return [allTab, ...cityTabs]
			}
		},
		onLoad() {
			// 获取城市列表
			this.$store.commit('getCityList')
			
			// 页面加载时初始化数据
			this.loadStaticGroupData()
		},
		onShow() {
			// 页面显示时刷新数据
			if (this.groupList.length === 0) {
				this.loadStaticGroupData()
			}
		},
		methods: {
			// 加载静态群组数据
			loadStaticGroupData(){
				console.log('开始加载静态群组数据')
				this.loading = true
				// 模拟加载延迟
				setTimeout(() => {
					this.loading = false
					console.log('加载完成，开始筛选数据')
					// 根据分类筛选静态数据
					this.filterGroupListByCategory()
				}, 500)
			},
			
			// 根据分类筛选群组列表
			filterGroupListByCategory() {
				const allGroups = [
					{
						id: 1,
						name: '江华同城交流群',
						description: '江华本地生活交流，分享美食、租房、工作信息',
						avatar: '/static/image/logo.jpg',
						memberCount: 1280,
						type: '同城群',
						category: 'local',
						qrCode: '/static/image/qr/group1.jpg',
						lastMessage: '有人知道江华哪里有好的租房信息吗？',
						lastMessageTime: '2小时前'
					},
					{
						id: 2,
						name: '江华美食分享群',
						description: '发现江华本地美食，分享美食攻略',
						avatar: '/static/image/logo.jpg',
						memberCount: 856,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group2.jpg',
						lastMessage: '推荐一家新开的火锅店，味道不错',
						lastMessageTime: '1小时前'
					},
					{
						id: 3,
						name: '江华租房信息群',
						description: '江华租房信息发布与交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 2341,
						type: '同城群',
						category: 'local',
						qrCode: '/static/image/qr/group3.jpg',
						lastMessage: '有单间出租，位置好，价格实惠',
						lastMessageTime: '30分钟前'
					},
					{
						id: 4,
						name: '江华求职招聘群',
						description: '江华本地求职招聘信息发布',
						avatar: '/static/image/logo.jpg',
						memberCount: 1567,
						type: '工作群',
						category: 'work',
						qrCode: '/static/image/qr/group4.jpg',
						lastMessage: '招聘销售员，待遇优厚',
						lastMessageTime: '1天前'
					},
					{
						id: 5,
						name: '江华旅游攻略群',
						description: '江华旅游景点推荐，攻略分享',
						avatar: '/static/image/logo.jpg',
						memberCount: 623,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group5.jpg',
						lastMessage: '周末去瑶族文化园玩，有一起的吗？',
						lastMessageTime: '3小时前'
					},
					{
						id: 6,
						name: '江华学习交流群',
						description: '江华本地学习交流，分享学习资源',
						avatar: '/static/image/logo.jpg',
						memberCount: 445,
						type: '学习群',
						category: 'study',
						qrCode: '/static/image/qr/group6.jpg',
						lastMessage: '有人一起学习英语吗？',
						lastMessageTime: '2天前'
					},
					{
						id: 7,
						name: '江华二手交易群',
						description: '江华本地二手物品交易',
						avatar: '/static/image/logo.jpg',
						memberCount: 1890,
						type: '同城群',
						category: 'local',
						qrCode: '/static/image/qr/group7.jpg',
						lastMessage: '出售一台九成新的洗衣机',
						lastMessageTime: '1小时前'
					},
					{
						id: 8,
						name: '江华宠物交流群',
						description: '江华宠物爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 567,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group8.jpg',
						lastMessage: '有人知道江华哪里有好的宠物医院吗？',
						lastMessageTime: '4小时前'
					},
					{
						id: 9,
						name: '江华汽车交流群',
						description: '江华汽车爱好者交流，分享用车心得',
						avatar: '/static/image/logo.jpg',
						memberCount: 892,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group9.jpg',
						lastMessage: '有人知道江华哪里有好的汽车维修店吗？',
						lastMessageTime: '5小时前'
					},
					{
						id: 10,
						name: '江华宝妈交流群',
						description: '江华宝妈育儿经验分享',
						avatar: '/static/image/logo.jpg',
						memberCount: 1234,
						type: '同城群',
						category: 'local',
						qrCode: '/static/image/qr/group10.jpg',
						lastMessage: '推荐江华最好的儿童医院',
						lastMessageTime: '6小时前'
					},
					{
						id: 11,
						name: '江华IT技术交流群',
						description: '江华IT从业者技术交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 345,
						type: '工作群',
						category: 'work',
						qrCode: '/static/image/qr/group11.jpg',
						lastMessage: '有前端开发的工作机会吗？',
						lastMessageTime: '1天前'
					},
					{
						id: 12,
						name: '江华健身运动群',
						description: '江华健身爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 678,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group12.jpg',
						lastMessage: '有人一起去健身房吗？',
						lastMessageTime: '2小时前'
					},
					{
						id: 13,
						name: '江华摄影爱好者群',
						description: '江华摄影爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 456,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group13.jpg',
						lastMessage: '分享一张江华夜景照片',
						lastMessageTime: '1天前'
					},
					{
						id: 14,
						name: '江华创业交流群',
						description: '江华创业者交流平台',
						avatar: '/static/image/logo.jpg',
						memberCount: 789,
						type: '工作群',
						category: 'work',
						qrCode: '/static/image/qr/group14.jpg',
						lastMessage: '寻找创业合作伙伴',
						lastMessageTime: '3天前'
					},
					{
						id: 15,
						name: '江华医疗健康群',
						description: '江华医疗健康咨询交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 1123,
						type: '同城群',
						category: 'local',
						qrCode: '/static/image/qr/group15.jpg',
						lastMessage: '推荐江华最好的牙科医院',
						lastMessageTime: '4小时前'
					},
					{
						id: 16,
						name: '江华读书会',
						description: '江华读书爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 234,
						type: '学习群',
						category: 'study',
						qrCode: '/static/image/qr/group16.jpg',
						lastMessage: '推荐一本好书《江华瑶族文化》',
						lastMessageTime: '1周前'
					},
					{
						id: 17,
						name: '江华音乐爱好者群',
						description: '江华音乐爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 567,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group17.jpg',
						lastMessage: '有人会弹吉他吗？想学',
						lastMessageTime: '2天前'
					},
					{
						id: 18,
						name: '江华电商交流群',
						description: '江华电商从业者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 890,
						type: '工作群',
						category: 'work',
						qrCode: '/static/image/qr/group18.jpg',
						lastMessage: '分享电商运营经验',
						lastMessageTime: '1周前'
					},
					{
						id: 19,
						name: '江华园艺爱好者群',
						description: '江华园艺爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 345,
						type: '兴趣群',
						category: 'interest',
						qrCode: '/static/image/qr/group19.jpg',
						lastMessage: '推荐江华最好的花店',
						lastMessageTime: '3天前'
					},
					{
						id: 20,
						name: '江华法律咨询群',
						description: '江华法律咨询服务交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 678,
						type: '同城群',
						category: 'local',
						qrCode: '/static/image/qr/group20.jpg',
						lastMessage: '免费法律咨询服务',
						lastMessageTime: '5天前'
					}
				]

				this.groupList = allGroups
				
				// 强制更新视图
				this.$forceUpdate()
			},
			
			// 搜索群组
			onSearch(keyword) {
				this.searchKeyword = keyword
				this.filterGroups()
			},
			
			// 清除搜索
			onClear() {
				this.searchKeyword = ''
				this.filterGroups()
			},
			
			// 分类点击
			onCategoryClick(item) {
				this.currentCityTabIndex = item.index
				
				if (item.value) {
					// 使用城市ID作为筛选条件
					this.queryParams.cityId = item.value
					delete this.queryParams.category // 清除原有的分类参数
				} else {
					// 选择"全部"时清除城市筛选
					delete this.queryParams.cityId
					delete this.queryParams.category
				}
				this.loadStaticGroupData()
			},
			
			// 群组点击
			onGroupClick(item) {
				// 跳转到群组详情页
				this.$utils.navigateTo('/pages_order/group/groupDetail?id=' + item.id)
			},
			
			// 过滤群组
			filterGroups() {
				if (!this.searchKeyword) {
					return
				}
				// 这里可以实现搜索过滤逻辑
			},
			
			// 创建群组
			createGroup() {
				this.$utils.navigateTo('/pages_order/group/createGroup')
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	background-color: #f5f5f5;
	min-height: 100vh;
	
	.top-actions {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.search-container {
			flex: 1;
		}
		
		.create-btn {
			display: flex;
			align-items: center;
			background-color: #5baaff;
			color: #fff;
			padding: 15rpx 20rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			
			text {
				margin-left: 8rpx;
			}
		}
	}
	
	.category-tabs {
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	
	.group-list {
		padding-bottom: 120rpx;
	}
	
	.empty-state {
		padding: 100rpx 0;
		text-align: center;
	}
	
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		text {
			margin-top: 20rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
}
</style>