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 List"
				:item="item"
				@click="onGroupClick(item)"
			/>
		</view>
		
		<!-- 空状态 -->
		<view v-if="List.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 loadList from '@/mixins/loadList.js'
	import { mapState } from 'vuex'
	
	export default {
		components : {
			tabber,
			groupItem,
		},
		mixins: [loadList],
		data() {
			return {
				searchKeyword: '',
				currentCityTabIndex: 0, // uv-tabs当前选中的城市索引
				mixinsListApi: 'groupList', // 使用group.js中的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')
		},
		methods: {
			// 搜索群组
			onSearch(keyword) {
				this.searchKeyword = keyword
				this.queryParams.title = keyword // 使用后端字段名
				this.refreshList()
			},
			
			// 清除搜索
			onClear() {
				this.searchKeyword = ''
				delete this.queryParams.title
				this.refreshList()
			},
			
			// 分类点击
			onCategoryClick(item) {
				this.currentCityTabIndex = item.index
				
				if (item.value) {
					// 使用城市ID作为筛选条件
					this.queryParams.classId = item.value // 使用后端字段名
				} else {
					// 选择"全部"时清除城市筛选
					delete this.queryParams.classId
				}
				this.refreshList()
			},
			
			// 群组点击
			onGroupClick(item) {
				// 跳转到群组详情页
				this.$utils.navigateTo('/pages_order/group/groupDetail?id=' + item.id)
			},
			
			// 创建群组
			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>