zyejMAll-mobile/pages/seeding/seeding.vue

<template>
	<s-layout title="社区种草" :bgStyle="{ color: '#fff' }">
		<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">
							<image :src="item.picUrl" mode="widthFix"></image>
							<text>{{ item.content }}</text>
						</view>
					</view>
					<!-- 右列 -->
					<view class="column">
						<view v-for="(item, index) in rightList" :key="'right-' + index" class="item">
							<image :src="item.picUrl" mode="widthFix"></image>
							<text>{{ item.content }}</text>
						</view>
					</view>
				</view>
				<!-- 加载提示 -->
				<view class="loading">{{ loadingText }}</view>
			</scroll-view>
		</view>

		<!-- <view class="seeding">
			<view class="list" v-for="(item,index) in getData" :key="index">
				<view class="top">
					<view class="l">
						<image :src="item.picUrl" class="img"></image>
					</view>
					<view class="r">
						<view class="name">{{item.nickname}}</view>
						<view class="time">{{sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="bottom">
					<view class="ck"><image src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/fa998f749128876ceba66145c9c543f5650aaa16a71da8123c436ddb45071dc5.png" class="img"></image>{{item.lookCount}}</view>
					<view class="ck"><image src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/6141e7edbc442871fdf4fb321cbb842b41509d0b527338b1b02b6e96ff976dcb.png" class="img"></image>{{item.likeCount}}</view>
					<view class="ck"><image src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/88994efd6eec03acb0b09c38f43ad2b5f78744ec2a99f1ab2bbb6a70c20fd386.png" class="img"></image>{{item.commentCount}}</view>
				</view>
			</view>
			
			<view class="btn" v-if="isShow">
				<input class="content_cs" v-model="content"></input>
				
				<input class="pic content_cs" v-model="picUrl"/>
			</view>
			<view class="dd" @click="fabu" v-if="!isShow">
				我想发布动态
			</view>
			<view class="dd" @click="setlist" v-if="isShow">
				确定
			</view>
		</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 state = reactive({
	// 	pagination: {
	// 		list: [],
	// 		total: 0,
	// 		pageNo: 1,
	// 		pageSize: 10,
	// 	},
	// })

	// 生命周期
	onMounted(() => {
		windowHeight.value = uni.getSystemInfoSync().windowHeight
		loadData()
	})

	// 方法声明
	const loadData = async () => {
		if (loadingText.value !== '加载中...') return

		try {
			// const newData = await mockApiRequest()
			const newData = await getlist()
			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 getlist() {
		const { code, data } = await SeedApi.getSeedList({
			pageNo: page.value,
		});
		console.log("返回数据", data);
		// getData.value = res.data.list;
		if (code !== 0) {
		  return;
		}
		return data.list;
		
	}

	//发布动态按钮
	function fabu() {
		isShow.value = !isShow.value
	}

	// getlist();
</script>

<style scoped lang="scss">
	.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;
	}

	.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;
	}
</style>