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

<template>
	<view class="square-page">
		<navbar title="广场"/>


		<!-- 一级分类：关注/发现 -->
		<view class="primary-tabs">
			<view 
				class="primary-tab-item" 
				:class="{active: currentPrimaryTab === 0}"
				@click="switchPrimaryTab(0)"
			>
				关注
			</view>
			<view 
				class="primary-tab-item" 
				:class="{active: currentPrimaryTab === 1}"
				@click="switchPrimaryTab(1)"
			>
				发现
			</view>
		</view>
		
		<!-- 二级分类：城市列表 -->
		<!-- <view class="secondary-tabs">
			<scroll-view scroll-x="true" class="city-scroll">
				<view class="city-tabs">
					<view 
						class="city-tab-item" 
						:class="{active: currentCityIndex === -1}"
						@click="switchCity(-1, null)"
					>
						全部
					</view>
					<view 
						v-for="(city, index) in cityList" 
						:key="city.id || index"
						class="city-tab-item" 
						:class="{active: currentCityIndex === index}"
						@click="switchCity(index, city)"
					>
						{{ city.name || city.cityName }}
					</view>
				</view>
			</scroll-view>
		</view> -->
		
		<!-- 使用uv-tabs组件的城市分类 -->
		<view class="city-tabs-container">
			<uv-tabs 
				:list="cityTabsList" 
				:current="currentCityTabIndex"
				:activeStyle="{color: '#5baaff', fontWeight: 600}"
				lineColor="#5baaff" 
				lineHeight="6rpx" 
				lineWidth="40rpx"
				keyName="name"
				@click="onCityTabClick"
			/>
		</view>
		
		<!-- 瀑布流列表 -->
		<view class="content-container">
			<waterfallContainer 
				:list="List"
				@item-click="onItemClick"
				@item-like="onItemLike"
			/>
			
			<!-- 加载更多提示 -->
			<view v-if="loadmore && List.length > 0" class="load-more">
				<uv-loading-icon size="28"></uv-loading-icon>
				<text class="load-more-text">加载更多...</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view v-if="!loadmore && List.length > 0" class="no-more">
				<text>— 没有更多了 —</text>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-if="!loading && List.length === 0" class="empty-state">
			<uv-empty 
				text="暂无动态" 
				textColor="#999"
				icon="list"
				iconColor="#ddd"
				iconSize="120"
			></uv-empty>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading && List.length === 0" class="loading-state">
			<uv-loading-icon size="40"></uv-loading-icon>
			<text class="loading-text">加载中...</text>
		</view>
        
		<tabber select="1" />
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	import tabber from '@/components/base/tabbar.vue'
	import waterfallContainer from '@/components/list/square/waterfallContainer.vue'
	import mixinsList from '@/mixins/loadList.js'
	import { mapState } from 'vuex'
	
	export default {
		mixins: [mixinsList],
		components: {
			navbar,
			tabber,
			waterfallContainer
		},
		data() {
			return {
				mixinsListApi: 'getPostPage', // 使用与首页相同的API
				currentPrimaryTab: 1, // 默认显示发现
				currentCityIndex: -1, // 默认全部城市
				currentCity: null,
				currentCityTabIndex: 0 // uv-tabs当前选中的城市索引
			}
		},
		onLoad() {
			// 获取城市列表
			this.$store.commit('getCityList')
			
			// 初始化查询参数
			this.initQueryParams()
		},
		onShow() {
			this.refreshList()
		},
		onPullDownRefresh() {
			this.refreshList()
		},
		onReachBottom() {
			this.loadMore()
		},
		computed: {
			...mapState(['cityList']),
			
			// 城市标签页列表（包含"全部"选项）
			cityTabsList() {
				const allTab = { id: null, name: '全部' }
				const cityTabs = this.cityList.map(city => ({
					id: city.id || city.cityId,
					name: city.name || city.cityName || city.title
				}))
				return [allTab, ...cityTabs]
			}
		},
		methods: {
			// 初始化查询参数
			initQueryParams() {
				// 设置默认查询参数
				this.queryParams = {
					...this.queryParams,
					type: this.currentPrimaryTab // 0: 关注, 1: 发现
				}
				
				// 如果有选择城市，添加城市参数
				if (this.currentCity) {
					this.queryParams.cityId = this.currentCity.id || this.currentCity.cityId
				}
			},
			
			// 切换一级分类
			switchPrimaryTab(index) {
				if (this.currentPrimaryTab === index) return
				
				this.currentPrimaryTab = index
				this.queryParams.type = index
				
				this.refreshList()
			},
			
			// 切换城市（已注释，改用uv-tabs的onCityTabClick方法）
			// switchCity(index, city) {
			// 	if (this.currentCityIndex === index) return
			// 	
			// 	this.currentCityIndex = index
			// 	this.currentCity = city
			// 	
			// 	// 更新查询参数
			// 	if (city) {
			// 		this.queryParams.cityId = city.id || city.cityId
			// 	} else {
			// 		delete this.queryParams.cityId
			// 	}
			// 	
			// 	this.refreshList()
			// },
			
			// 重写刷新方法
			onRefresh() {
				this.refreshList()
			},
			
			// 点击动态项
			onItemClick(item) {
				this.$utils.navigateTo('/pages_order/post/postDetail?id=' + item.id)
			},
			
			// 点赞动态
			onItemLike(item) {
				console.log('点赞动态:', item.id)
				// 这里可以添加点赞API调用
			},
			
			// uv-tabs城市切换事件
			onCityTabClick(item) {
				this.currentCityTabIndex = item.index
				
				// 如果是第一个（全部），清除城市筛选
				if (item.index === 0) {
					this.currentCity = null
					this.currentCityIndex = -1
					delete this.queryParams.cityId
				} else {
					// 获取对应的城市数据
					const cityData = this.cityList[item.index - 1] // 减1是因为第一个是"全部"
					this.currentCity = cityData
					this.currentCityIndex = item.index - 1
					this.queryParams.cityId = cityData.id || cityData.cityId
				}
				
				this.refreshList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.square-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	

	
	.primary-tabs {
		background-color: #fff;
		display: flex;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		
		.primary-tab-item {
			flex: 1;
			text-align: center;
			padding: 30rpx 0;
			font-size: 32rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: #5baaff;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background-color: #5baaff;
					border-radius: 3rpx;
				}
			}
		}
	}
	
	// 原有的二级分类样式（已注释）
	// .secondary-tabs {
	// 	background-color: #fff;
	// 	border-bottom: 1rpx solid #eee;
	// 	
	// 	.city-scroll {
	// 		padding: 20rpx 0;
	// 		
	// 		.city-tabs {
	// 			display: flex;
	// 			white-space: nowrap;
	// 			padding: 0 30rpx;
	// 			
	// 			.city-tab-item {
	// 				flex-shrink: 0;
	// 				padding: 16rpx 32rpx;
	// 				margin-right: 20rpx;
	// 				background-color: #f8f9fa;
	// 				border-radius: 30rpx;
	// 				font-size: 28rpx;
	// 				color: #666;
	// 				border: 1rpx solid transparent;
	// 				
	// 				&.active {
	// 					background-color: #5baaff;
	// 					color: #fff;
	// 				}
	// 				
	// 				&:last-child {
	// 					margin-right: 30rpx;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	
	// uv-tabs城市分类容器
	.city-tabs-container {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		padding: 0 20rpx;
	}
	
	.content-container {
		padding: 0;
	}
	
	.empty-state {
		padding: 100rpx 0;
		text-align: center;
	}
	
	.loading-state {
		padding: 100rpx 0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.load-more {
		padding: 30rpx 0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.load-more-text {
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.no-more {
		padding: 30rpx 0;
		text-align: center;
		
		text {
			font-size: 24rpx;
			color: #ccc;
		}
	}
	
	// 原有的城市滚动条隐藏样式（已注释，uv-tabs自带滚动处理）
	// /deep/ .city-scroll::-webkit-scrollbar {
	// 	display: none;
	// }
</style>