zyejMAll-mobile/pages/seeding/seeding.vue

<template>
	<s-layout title="社区种草" :bgStyle="{ color: '#fff' }">
		<!-- 导航栏切换 -->
		<view class="top-nav">
			<view :class="{ active: currentTab === 0 }" @click="switchTab(0)">关注</view>
			<view :class="{ active: currentTab === 1 }" @click="switchTab(1)">发现</view>
		</view>

		<!-- 新增的二级导航栏 -->
		<view class="second-nav">
			<view v-for="(item, index) in secondNavList" :key="index" :class="{ active: secondNavIndex === index }"
				@click="switchSecondNav(index)">
				{{ item }}
			</view>
		</view>

		<view class="container">
			<scroll-view scroll-y :style="{ height: windowHeight + 'px' }" @scrolltolower="loadMore">
				<!-- 两列容器 -->
				<view class="waterfall">
					<!-- 左列 -->
					<view class="column">
						<view v-for="(item, index) in leftList" :key="'left-' + index" class="item"
							@click="goDetail(item.id)">
							<image :src="item.picUrl" mode="widthFix"></image>
							<view class="item-content">
								<text>{{ item.content }}</text>
								<view class="item-actions">
									<view class="action-like" @click.stop="likeItem(item.id, index, 'left')">
										<image
											:src="item.isLiked ? '/static/images/like-active.png' : '/static/images/like.png'"
											mode="aspectFit"></image>
										<text>{{ item.likeCount !== null ? item.likeCount : 0 }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 右列 -->
					<view class="column">
						<view v-for="(item, index) in rightList" :key="'right-' + index" class="item"
							@click="goDetail(item.id)">
							<image :src="item.picUrl" mode="widthFix"></image>
							<view class="item-content">
								<text>{{ item.content }}</text>
								<view class="item-actions">
									<view class="action-like" @click.stop="likeItem(item.id, index, 'right')">
										<image
											:src="item.isLiked ? '/static/images/like-active.png' : '/static/images/like.png'"
											mode="aspectFit"></image>
										<text>{{ item.likeCount !== null ? item.likeCount : 0 }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载提示 -->
				<view class="loading">{{ loadingText }}</view>
			</scroll-view>
		</view>

		<!-- 发布 -->
		<view class="publish" @click="publish" :class="bottomNavigationIsCustom ? 'bottom' : ''">发布</view>
	</s-layout>
</template>

<script setup>
	import request from '@/sheep/request';
	import SeedApi from '@/sheep/api/seedComm/seedComm.js';
	import sheep from '@/sheep';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import {
		computed,
		reactive,
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';

	// 响应式数据
	const windowHeight = ref(0);
	const allData = ref([]);
	const leftList = ref([]);
	const rightList = ref([]);
	const page = ref(1);
	const loadingText = ref('加载中...');
	const currentTab = ref(1); // 0 表示关注，1 表示发现
	const secondNavList = ref(['推荐', '视频', '短剧', '旅游', '美食', '游戏', '钓鱼', '服饰', '信息发布', '创业']);
	const secondNavIndex = ref(0);
	const isShow = ref(false);

	// 点赞功能
	const likeItem = async (id, index, column) => {
		try {
			// 先获取当前点赞状态
			const {
				code,
				data
			} = await SeedApi.getLike(id);
			if (code !== 0) {
				uni.showToast({
					title: '获取点赞状态失败',
					icon: 'fail'
				});
				return;
			}

			// 判断用户是否已点赞
			const isLiked = data === true;

			// 调用点赞API
			const {
				code: likeCode,
				data: likeData
			} = await SeedApi.doLike(id);
			if (likeCode === 0) {
				// 获取当前列表
				const list = column === 'left' ? leftList.value : rightList.value;
				const item = list[index];

				// 更新点赞状态
				item.isLiked = !isLiked; // 切换点赞状态
				// 如果已点赞，likeCount+1，否则likeCount-1
				item.likeCount = isLiked ? item.likeCount - 1 : item.likeCount + 1;

				// 更新列表
				if (column === 'left') {
					leftList.value = [...leftList.value.slice(0, index), item, ...leftList.value.slice(index + 1)];
				} else {
					rightList.value = [...rightList.value.slice(0, index), item, ...rightList.value.slice(index +
						1)];
				}

				// 提示用户
				uni.showToast({
					title: item.isLiked ? '点赞成功' : '取消点赞',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: likeData || '点赞失败',
					icon: 'fail'
				});
			}
		} catch (error) {
			console.error('点赞请求失败:', error);
			uni.showToast({
				title: '网络错误，请稍后再试',
				icon: 'fail'
			});
		}
	}
	// 生命周期
	onMounted(() => {
		windowHeight.value = uni.getSystemInfoSync().windowHeight
		// loadData()
	})
	onShow(() => {
		// 重置数据
		page.value = 1
		allData.value = []
		leftList.value = []
		rightList.value = []
		loadingText.value = '加载中...'

		loadData()
	})
	const goDetail = (id) => {
		uni.navigateTo({
			url: `/pages/seeding/seeding_fabu/detail?id=${id}`
		});
	}
	// 获取数据
	const loadData = async () => {
		if (loadingText.value !== '加载中...') return;
		try {
			let newData = [];
			if (currentTab.value === 0) {
				newData = await getFollowList();
			} else {
				newData = await getlist();
			}
			// 获取每一项的点赞状态
			for (let item of newData) {
				const {
					code,
					data
				} = await SeedApi.getLike(item.id); // 获取每条数据的点赞状态
				if (code === 0) {
					item.isLiked = data; // 根据返回的点赞状态设置
				} else {
					item.isLiked = false; // 如果获取失败，默认未点赞
				}
			}
			allData.value = [...allData.value, ...newData];

			// 简单交替分配数据
			newData.forEach((item, index) => {
				index % 2 === 0 ? leftList.value.push(item) : rightList.value.push(item);
			});

			loadingText.value = '加载完成';
		} catch (error) {
			console.error('加载数据失败:', error);
			loadingText.value = '加载失败';
		}
	};
	const loadMore = () => {
		page.value++
		loadingText.value = '加载中...'
		loadData()
	}
	// 模拟接口请求
	const mockApiRequest = () => {
		return new Promise(resolve => {
			setTimeout(() => {
				const mockData = Array(10).fill().map((_, i) => ({
					id: Date.now() + i,
					title: `Item ${page.value * 10 + i}`,
					image: `https://picsum.photos/300/${400 + Math.floor(Math.random() * 200)}`
				}))
				resolve(mockData)
			}, 1000)
		})
	}
	// 获取关注列表
	async function getFollowList() {
		const {
			code,
			data
		} = await SeedApi.getSeedList({
			pageNo: page.value,
		});
		if (code !== 0) {
			return;
		}
		return data.list;
	}

	// 获取发现列表
	async function getlist() {
		const {
			code,
			data
		} = await SeedApi.getSeedList({
			pageNo: page.value,
		});
		if (code !== 0) {
			return;
		}
		return data.list;
	}

	// 切换标签
	const switchTab = (tabIndex) => {
		currentTab.value = tabIndex;
		page.value = 1;
		allData.value = [];
		leftList.value = [];
		rightList.value = [];
		loadingText.value = '加载中...';
		loadData();
	};

	// 切换二级导航标签
	const switchSecondNav = (index) => {
		secondNavIndex.value = index;
		page.value = 1;
		allData.value = [];
		leftList.value = [];
		rightList.value = [];
		loadingText.value = '加载中...';
		loadData();
	};

	// 发布动态
	function publish() {
		uni.navigateTo({
			url: '/pages/seeding/seeding_fabu/seeding_fabu', // 根据实际路径调整
		});
	}
</script>

<style scoped lang="scss">
	.top-nav {
		display: flex;
		justify-content: center;
		padding: 10px;
		background-color: #f5f5f5;

		view {
			padding: 5px 20px;
			cursor: pointer;

			&.active {
				color: #e93323;
				font-weight: bold;
			}
		}
	}

	// .seeding {
	// 	.list {
	// 		background: white;
	// 		margin: 10px;
	// 		margin-bottom: 5px;
	// 		padding: 10px;

	// 		.top {
	// 			display: flex;
	// 			align-items: center;

	// 			.l {
	// 				margin-right: 10px;

	// 				.img {
	// 					width: 40px;
	// 					height: 40px;
	// 				}
	// 			}

	// 			.r {
	// 				.name {
	// 					font-weight: 700;
	// 				}

	// 				.time {
	// 					font-size: 12px;
	// 					color: rgba(163, 163, 163);
	// 				}
	// 			}
	// 		}

	// 		.content {
	// 			margin-top: 10px;
	// 		}

	// 		.bottom {
	// 			display: flex;
	// 			justify-content: flex-end;

	// 			.ck {
	// 				display: flex;
	// 				align-items: center;
	// 				margin-right: 20px;
	// 				color: rgba(163, 163, 163);

	// 				.img {
	// 					width: 20px;
	// 					height: 20px;
	// 					margin-right: 8px;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	// .btn {
	// 	margin-top: 50px;
	// 	background: white;
	// 	display: flex;
	// 	justify-content: center;
	// 	flex-wrap: wrap;

	// 	.content_cs {
	// 		width: 100%;
	// 		text-align: center;
	// 		padding: 10px;
	// 		margin: 20px 0;
	// 		margin-bottom: 10px;
	// 		background-color: rgba(246, 246, 246);
	// 	}

	// 	.pic {
	// 		width: 100%;
	// 		text-align: center;
	// 	}
	// }

	// .dd {
	// 	width: 100%;
	// 	text-align: center;
	// 	background: red;
	// 	color: white;
	// 	width: 50%;
	// 	margin: 0 auto;
	// 	padding: 10px;
	// 	margin-bottom: 30px;
	// 	border-radius: 15px;
	// }
	.second-nav {
		display: flex;
		justify-content: start;
		padding: 10rpx;
		background-color: #fff;
		border-bottom: 1px solid #eaeaea;
		overflow-x: auto;
		white-space: nowrap;

		view {
			padding: 5px 10px;
			cursor: pointer;

			&.active {
				color: #e93323;
				font-weight: bold;
			}
		}
	}

	.waterfall {
		display: flex;
		justify-content: space-between;
		padding: 10rpx;
	}

	.column {
		flex: 1;
		max-width: 49%;
	}

	.item {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.item image {
		width: 100%;
	}

	.loading {
		text-align: center;
		padding: 20rpx;
		color: #999;
	}

	.publish {
		position: fixed;
		z-index: 9999;
		width: 100rpx;
		height: 100rpx;
		opacity: 1;
		border-radius: 50%;
		bottom: 142rpx;
		right: 24rpx;
		color: pink;
		line-height: 100rpx;
		text-align: center;
		background-color: palevioletred;
		// @include linear-gradient(theme);

		.iconfont {
			font-size: 50rpx;
		}
	}

	.item-content {
		padding: 12rpx;

		.item-actions {
			display: flex;
			justify-content: flex-end;
			margin-top: 10rpx;

			.action-like {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}

				text {
					color: #999;
				}

				// 点赞激活状态样式
				&.liked text {
					color: #e93323;
				}
			}
		}
	}
</style>