leromro-mini/components/Services/services.vue

<template>
	<view>
		<up-waterfall>
			<template #left>
				<view class="demo-warter" v-for="(item, index) in props.leftList" :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>
				<view class="demo-warter" v-for="(item, index) in props.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>
	const props = defineProps({
		leftList: {
			type: Array,
			default: () => []
		},
		rightList: {
			type: Array,
			default: () => []
		}
	});
	
	const goToDetail = async (item) => {
		const params = {
			volunteerId: item.volunteerId, // 获取 volunteerId
			serviceCategory: item.serviceCategory, // 获取 serviceCategory
			businessManagementId: item.businessManagementId, //获取 businessManagementId
		};
		uni.navigateTo({
			url: `/pages_home/pages/Volunteerside/goodsDetails?params=${JSON.stringify(params)}`
		});
	}
</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>