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

<template>
	<view class="main-content">
		<view class="content-box">
			<view class="tabs-container">
				<Tabs :list="list1" @change="handlTabs" ref="tabRef" />
			</view>

			<!-- 瀑布流 -->
			<view v-if="userType == '1'">
				<up-waterfall v-model="flowList" v-if="pages.total >0">
					<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 v-else>
					<NoneView />
				</view>
			</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 && pages.total >0" />
		</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"

	import Tabs from "@/pages_home/components/tabs/index.vue"
	import NoneView from '@/components/NoneView/index.vue'


	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 tabRef = ref(null)

	const businessManagementId = ref(null)


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


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

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



	function handlTabs(record) {
		clearList();
		serviceCategory.value = record.parentId;
		businessManagementId.value = record.id;
		// 重置分页状态
		pages.value.current = 1;
		pages.value.total = 0;
		loadmoreInfo.value.status = 'loadmore';
		getList();
	}

	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';

			// 检查 businessManagementId 是否存在
			if (!businessManagementId.value) {
				console.log('No businessManagementId selected');
				return;
			}

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

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

			// 如果是第一页，先清空
			if (pages.value.current === 1) {
				leftList.value = [];
				rightList.value = [];
			}

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

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

	const clearList = () => {
		leftList.value = [];
		rightList.value = [];
		loadmoreInfo.value.status = 'loadmore';
		pages.value.total = 0;
	}

	onReachBottom(() => {
		if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
			pages.value.current += 1;
			loadmoreInfo.value.status = 'loading';
			getList();
		}
	})



	onMounted(() => {
		// 如果有默认选中的 tab，则初始化数据
		if (list1.value.length > 0) {
			const defaultTab = list1.value[0];
			businessManagementId.value = defaultTab.id;
			getList();
		}
	})
</script>

<style scoped>
.main-content {
	width: 100%;
	height: 100vh;
	background: #fff;
}

.content-box {
	width: 100%;
	height: 100%;
	padding-bottom: 40rpx;
}

	.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: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		padding: 10rpx;
	}

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

	.demo-image {
		width: 100%;
		border-radius: 8rpx;
	}

	.demo-title {
		font-size: 25rpx;
		margin-top: 8rpx;
		color: #999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
	}

	.demo-skillDescribe {
		font-size: 30rpx;
		margin-top: 8rpx;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
	}

	.demo-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

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

	.demo-price {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}

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

	.name-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 150rpx;
		color: #444;
	}

	.demo-warter {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		padding: 10rpx;
	}

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

	.demo-image {
		width: 100%;
		border-radius: 8rpx;
	}

	.demo-title {
		font-size: 25rpx;
		margin-top: 8rpx;
		color: #999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
	}

	.demo-skillDescribe {
		font-size: 30rpx;
		margin-top: 8rpx;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
	}

	.demo-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

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

	.demo-price {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}

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

	.name-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 150rpx;
		color: #444;
	}
</style>