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" @click="handlTabs" 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" @click="click" class="tabs-content" />
					<up-tabs :list="list3" @click="click" class="tabs-content" />
				</view>
			</view>


			<!-- 瀑布流 -->
			<view>
				<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.image"
								:index="index"></up-lazy-load>
							<view class="demo-title">
								{{item.skillDescribe}}
							</view>
							<view class="demo-PriceDome">
								<view class="demo-price">
									<image src="../../static/用户.png" 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.image"
								:index="index"></up-lazy-load>
							<view class="demo-title">
								{{item.skillDescribe}}
							</view>
							<view class="demo-PriceDome">
								<view class="demo-price">
									<image src="../../static/用户.png" 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>

				<!-- <up-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></up-loadmore> -->
			</view>

		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import volunteerSide from "@/pages/Volunteerside/Side_index.vue"
	import {
		typeOptionSelect,
		volunteerInfoList,
		getDetailsvolunteerId,
		dictListlrRstudy,
		dictListlrData
	} from "@/api/volunteerDetailsApi/details.js"

	const value1 = ref(1)
	const value2 = ref(2)
	const list1 = ref([])
	const list2 = ref([])
	const list3 = ref([])
	const flowList = ref([]); //list数据
	const listData = ref([])
	const rightList = ref([])
	const defaultTab = ref({
		dictValue: 1
	});

	
	const showDropdown = ref(false)

	function toggleDropdown() {
		console.log("点击了")
		showDropdown.value = !showDropdown.value
	}

	const getListData = async (dictSort = null) => {
		try {

			const params = {
				pageNum: 1,
				pageSize: 10,
				dictType: 'lrr_service_category',
				dictSort
			}
			const res = await typeOptionSelect(params)
			console.log((res, '获取健值成功'))
			if (res.code == 200 && res.rows) {
				list1.value = res.rows.map(item => ({
					...item,
					name: item.dictLabel,
				}))
			}
		} catch (e) {
			console.log('获取失败')
		}
	}

	const getListData2 = async () => {
		try {

			const params = {
				dictType: 'lrr_service_subject',
			}
			const res = await dictListlrRstudy(params)
			if (res.code == 200 && res.rows) {
				list2.value = res.rows.map(item => ({
					...item,
					name: item.dictLabel,
				}))
			}
		} catch (e) {
			console.log('获取失败')
		}
	}
	
	const getListData3 = async () => {
		try {
	
			const params = {
				dictType: 'lrr_study',
			}
			const res = await dictListlrData(params)
			if (res.code == 200 && res.rows) {
				list3.value = res.rows.map(item => ({
					...item,
					name: item.dictLabel,
				}))
			}
		} catch (e) {
			console.log('获取失败')
		}
	}


	// tabs选择服务类型
	const handlTabs = async (tab) => {
		const params = {
			serviceCategory: tab.dictValue
		}
		const res = await volunteerInfoList(params)

		// 处理左右数据展示
		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 volunteerId = item.volunteerId;
		uni.navigateTo({
			url: `/pages/goodsDetails/goodsDetails?volunteerId=${volunteerId}`
		});
	}

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

	onMounted(() => {
		getListData()
		getListData2()
		getListData3()
		handlTabs(defaultTab.value)
	})
</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: 30rpx;
		margin-top: 5px;
		color: $up-main-color;
		margin-left: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 限制显示两行 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		word-break: break-all;
	}



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

	}

	.demo-PriceDome {
		display: flex;
		font-size: 30rpx;
		color: $up-type-error;
		/* margin-top: 5px; */
		margin-top: 20rpx;
	}

	.demo-price {
		display: flex;
	}

	.name-image {
		width: 40rpx;
		height: 40rpx;
	}

	.dome-Like {
		margin-left: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>