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.skillDescribe}}
					</view>
					<view class="demo-PriceDome">
						<view class="demo-price">
							<image :src="item.volunteerPicture" class="name-image"></image>
							{{item.name}}
						</view>
						<view class="dome-Like">
							<text style="font-size: 25rpx; color: red;">￥</text>
							<text style="font-size: 35rpx; color: red;">1.4w</text>
						</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.skillDescribe}}
					</view>
					<view class="demo-PriceDome">
						<view class="demo-price">
							<image :src="item.volunteerPicture" class="name-image"></image>
							{{item.name}}
						</view>
						<view class="dome-Like">
							<text style="font-size: 25rpx; color: red;">￥</text>
							<text style="font-size: 35rpx; color: red;">1.4w</text>
						</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 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 () => {
		const res = await volunteerinfolist()

		// 处理左右数据展示
		let leftArr = []
		let rightArr = []

		console.log(res.data, '>>>res.data');

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

		listData.value = leftArr
		rightList.value = rightArr
	}


	const goToDetail = async (item) => {
	  const params = {
	    volunteerId: item.volunteerId,       // 获取 volunteerId
	    serviceCategory: item.serviceCategory // 获取 serviceCategory
	  };
	
	  // 使用 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: 30rpx;
		margin-top: 5px;
		color: $up-main-color;
		/* 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;
	}
	
	.name-text {
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden;    /* 超出部分隐藏 */
	  text-overflow: ellipsis; /* 显示省略号 */
	  max-width: 120rpx; /* 6个中文字符大约占120rpx */
	}
	
	.dome-Like {
	  display: flex;
	  align-items: baseline; /* 让￥和1.4w底部对齐 */
	}
</style>