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

		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		nextTick
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		typeOptionSelect,
		volunteerInfoList,
		getDetailsvolunteerId,
		dictListlrRstudy,
		dictListlrData,
		volunteerSeachgetTreeList,
		volunteerinfolist
	} from "@/api/volunteerDetailsApi/details.js"
	import {
		useRoute
	} from 'vue-router';


	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 defaultTab = ref({
		dictValue: 1
	});
	const currentTabs2 = ref(0)
	const total = ref(0)


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

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

	// 获取当前路由对象
	const route = useRoute();

	// 存储服务名称
	const serviceName = ref('');

	const showDropdown = ref(false)

	function handlTabs(item, index) {
		console.log(index, typeof index, '>>>>index');
		console.log(item, '>>>>item');
		currentTabs2.value = 0
		list2.value = item.children

	}

	function clickList2(item, index) {
		console.log(index, typeof index, '>>>>index99999');
		console.log(item, '>>>>item9999');
		// list2.value = item.children
		currentTabs2.value = index
	}

	function toggleDropdown() {
		console.log("点击了")
		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));
		// businessName
		console.log(dataList, '>>>>>option');
		// data.value = option;

		list1.value = dataList
		list2.value = dataList[0].children

	})

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


	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>