leromro-mini/pages/Volunteerside/Side_index.vue

<template>
	<view v-if="userType == '1'">
		<up-waterfall v-model="flowList">
			<template #left :listData="listData">
				<view class="demo-warter" v-for="(item, index) in listData" :key="index" @click="goToDetail(item)">
					<up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture"
						:index="index"></up-lazy-load>
					<view class="demo-title">
						{{item.businessTierName}}
					</view>
					<view class="demo-skillDescribe">
						{{item.skillDescribe}}
					</view>
					<view class="demo-PriceDome">
						<view class="demo-price">
							<image :src="item.volunteerPicture" class="name-image"></image>
							{{item.name}}
						</view>

					</view>
				</view>
			</template>
			<template #right :rightList="rightList">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goToDetail(item)">
					<up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture"
						:index="index"></up-lazy-load>
					<view class="demo-title">
						{{item.businessTierName}}
					</view>
					<view class="demo-skillDescribe">
						{{item.skillDescribe}}
					</view>
					<view class="demo-PriceDome">
						<view class="demo-price">
							<image :src="item.volunteerPicture" class="name-image"></image>
							{{item.name}}
						</view>

					</view>
				</view>
			</template>
		</up-waterfall>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		volunteerinfolist,
		getDetailsvolunteerId
	} from "@/api/volunteerDetailsApi/details.js"


	const flowList = ref([]); //list数据
	const total = ref(0)
	const loadStatus = ref('loadmore');
	const userType = uni.getStorageSync('userType') //读取本地存储

	// 用户/志愿者 识别标识
	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储


	const listData = ref([])
	const rightList = ref([])


	const getList = async () => {
		try {
			const res = await volunteerinfolist();
			if (!res || !res.rows) {
				console.error('No data returned from API');
				return;
			}

			let leftArr = [];
			let rightArr = [];

			(res.rows || []).forEach((item, index) => {
				index % 2 !== 0 ? leftArr.push(item) : rightArr.push(item);
			});

			listData.value = leftArr;
			rightList.value = rightArr;
			total.value = res.rows;
		} catch (error) {
			console.error('Error fetching data:', error);
		}
	};

	const goToDetail = async (item) => {
		const params = {
			volunteerId: item.volunteerId, // 获取 volunteerId
			serviceCategory: item.serviceCategory, // 获取 serviceCategory
			businessManagementId: item.businessManagementId, //获取 businessManagementId
		};

		// 使用 JSON.stringify 将对象传递给 URL 参数
		uni.navigateTo({
			url: `/pages/goodsDetails/goodsDetails?params=${JSON.stringify(params)}`
		});
	}

	onShow(() => {
		getList()
	})
</script>

<style scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 5px;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 25rpx;
		margin-top: 5px;
		color: #ccc;
		/* margin-left: 15rpx; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}
	.demo-skillDescribe{
		font-size: 30rpx;
		margin-top: 5px;
		color: black;
		/* margin-left: 15rpx; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}
	.demo-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;

	}

	.demo-PriceDome {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 15rpx;
	}

	.demo-price {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	.name-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.name-text {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		max-width: 120rpx;
		/* 6个中文字符大约占120rpx */
	}
</style>