leromro-mini/pages_home/pages/client/details.vue

<template>
	<view style="padding-top: 20rpx; width: 100vw; height: 100vh; overflow: hidden">
		<view style="width: 100%; height: 100%; overflow:scroll">
			<view class="Wrapper">
				<image src="/static/img/Location.png" class="Wrapper-img" />
				<span class="Wrapper-content">重庆</span>
				<vie class="input-container">
					<up-input v-model="value" @click.native="goToDetail" placeholder="请输入内容" prefixIcon="search"
						:customStyle="inputStyle"></up-input>
				</vie>
			</view>
			<view class="tabs-container">
				<view class="tabs-wrapper">
					<!-- 可滑动的 tabs 区域 -->
					<scroll-view scroll-x class="tabs-scroll">
						<up-tabs :list="list1" @change="handlTabs" keyName="businessName"
							class="tabs-content"></up-tabs>
					</scroll-view>
					<!-- 固定不动的图标 -->
					<image ref="iconRef" src="/static/img/分类or广场or其他.png" class="fixed-icon" @click="toggleDropdown" />
				</view>

				<view v-if="showDropdown" class="custom-dropdown">
					<up-tabs :list="list2" @change="clickList2" class="tabs-content" :current="currentTabs2"
						keyName="businessName" />
					<!-- <up-tabs :list="list3" @click="click" class="tabs-content"  keyName="businessName" /> -->
				</view>
			</view>


			<!-- 瀑布流 -->
			<view v-if="userType == '1'">
				<up-waterfall v-model="flowList">
					<template #left>
						<view class="demo-warter" v-for="(item, index) in 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 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>
			<up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
				:loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
				:nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" v-if="userType == 1" />

		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import {
		typeOptionSelect,
		volunteerInfoList,
		getDetailsvolunteerId,
		dictListlrRstudy,
		dictListlrData,
		volunteerSeachgetTreeList,
		volunteerinfolist
	} from "@/api/volunteerDetailsApi/details.js"


	const value1 = ref(1)
	const value2 = ref(2)
	const list1 = ref([])
	const list2 = ref([])
	const flowList = ref([]); //list数据
	const listData = ref([])
	const rightList = ref([])
	const currentTabs2 = ref(0)
	const total = ref(0)
	const serviceCategory = ref('')
	const leftList = ref([])
	const showDropdown = ref(false)



	const defaultTab = ref({
		dictValue: 1
	});


	const userType = uni.getStorageSync('userType') //读取本地存储

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



	function handlTabs(item, index) {
		currentTabs2.value = 0
		list2.value = item.children
	}

	function clickList2(item, index) {
		currentTabs2.value = index
	}

	function toggleDropdown() {
		showDropdown.value = !showDropdown.value
	}

	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)}`
		});
	}

	const inputStyle = { //input輸入框樣式設置
		borderRadius: '140rpx',
		border: '1rpx solid #ccc',
		height: '70rpx',
		paddingLeft: '30rpx',
		width: '600rpx',
	}

	onLoad((options) => {
		const dataList = JSON.parse(decodeURIComponent(options.dataList));
		
		serviceCategory.value = options.serviceCategory
		list1.value = dataList
		list2.value = dataList[0].children
	})

	// 分页
	const pages = ref({
		current: 1,
		pageSize: 10,
		total: 0
	})



	const loadmoreInfo = ref({
		status: 'loadmore',
		loadingText: '努力加载中...',
		loadmoreText: '点击加载更多~',
		nomoreText: '已经到底啦～'
	})


	// 加载更多
	async function handleLoadmore(e) {
		if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
			pages.value.current += 1;
			loadmoreInfo.value.status = 'loading';
			await getList();
		} else {
			loadmoreInfo.value.status = 'nomore';
		}
	}


	// const getListAdderss = async () => {
	// 	const res = await volunteerDataList()
	// 	console.log(res, 'volunteerDataList>>>>>>>>>>')
	// }
	

	const getList = async () => {
		try {
			loadmoreInfo.value.status = 'loading';

			// 请求时传递分页参数
			const res = await volunteerinfolist({
				pageNum: pages.value.current, // 当前页码
				pageSize: pages.value.pageSize, // 每页大小
				serviceCategory: serviceCategory.value
			});

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

			if (!res || !res.rows) {
				return;
			}

			// 判断是否已经到了最后一页
			if (pages.value.current >= Math.ceil(res.total / pages.value.pageSize)) {
				loadmoreInfo.value.status = 'nomore';
			} else {
				loadmoreInfo.value.status = 'loadmore';
			}

			// 将数据分成左右两列
			res.rows.forEach((item, index) => {
				index % 2 !== 0 ? leftList.value.push(item) : rightList.value.push(item);
			});

			pages.value.total = res.total;
		} catch (error) {
			leftList.value = [];
			rightList.value = [];
			loadmoreInfo.value.status = 'loadmore';
			pages.value.total = 0;
			console.error('Error fetching data:', error);
		}
	};

	onReachBottom(() => {
		if (loadmoreInfo.value.status !== 'nomore') { // 更宽松的条件
			loadmoreInfo.value.status = 'loading';
			pages.value.current += 1;
			getList();
		}
	})



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

<style scoped>
	.Wrapper {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.Wrapper-img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
	}


	.Wrapper-content {
		color: rgba(16, 16, 16, 1);
		font-size: 25rpx;
		font-family: PingFangSC-regular;
		line-height: 20rpx;
	}

	/* 外层容器 */
	.tabs-container {
		width: 100%;
		background: #fff;
		padding: 10px 0;
	}

	/* Flex 布局容器 */
	.tabs-wrapper {
		display: flex;
		align-items: center;
		position: relative;
	}

	/* 可横向滚动的 scroll-view */
	.tabs-scroll {
		flex: 1;
		/* 占据剩余空间 */
		overflow-x: auto;
		/* 允许横向滚动 */
		white-space: nowrap;
		/* 禁止换行 */
		-webkit-overflow-scrolling: touch;
		/* iOS 平滑滚动 */
	}

	/* 隐藏滚动条（可选） */
	.tabs-scroll::-webkit-scrollbar {
		display: none;
	}

	/* 固定图标（始终显示在右侧） */
	.fixed-icon {
		width: 30px;
		height: 30px;
		margin-left: 10px;
		/* 与 tabs 的间距 */
		flex-shrink: 0;
		/* 禁止压缩 */
	}



	.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>