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.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 class="container" v-else-if="userType == '2'">
			<view v-for="(item, index) in list" :key="index" class="item">
	
				<!-- 左侧：图片 -->
				<view class="Wrap-img">
					<image :src="item.image" mode="aspectFit" class="image"></image>
				</view>
	
				<!-- 中间：姓名、分类、技能介绍 -->
				<view class="middle">
					<view class="name">姓名：{{ item.name }}</view>
					<view class="category">类别：{{ item.category }}</view>
					<view class="title">技能介绍：{{ item.title }}</view>
				</view>
	
				<!-- 右侧：评分 + 按钮 -->
				<view class="right">
					<view class="score">评分：{{ item.score }}</view>
					<up-button type="error" text="购买" size="mini" custom-style="
			                 width: 120rpx;
			                 height: 50rpx;
			                 font-size: 24rpx;
			                 border-radius: 25rpx;
			                 margin-left: 40rpx;
			               "></up-button>
				</view>
			</view>
		</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()
		console.log(res,'>>>>>222')
		
		// 处理左右数据展示
		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
		console.log(rightList.value,'>>>>>>>>>rightList.value')
	}

	
	const goToDetail = async(item) => {
		console.log("11111")
		   const volunteerId = item.volunteerId; // 获取具体的 volunteerId
		uni.navigateTo({
			 url: `/pages/goodsDetails/goodsDetails?volunteerId=${volunteerId}`
		});
	}
	

	
	
	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: 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;
	}
	
	/* 志愿者列表 */
	/* 容器样式 */
	.container {
		padding: 20rpx;
	}
	
	/* 每个 item 使用 Flex 布局 */
	.item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 16rpx;
	}
	
	/* 图片固定宽度 */
	.image {
		width: 230rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	
	/* 中间部分：自动填充剩余空间 */
	.middle {
		flex: 1;
		margin-right: 20rpx;
	}
	
	/* 姓名样式 */
	.name {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}
	
	/* 分类样式 */
	.category {
		color: #666;
		font-size: 28rpx;
		margin-bottom: 8rpx;
	}
	
	.title {
		font-size: 28rpx;
		color: #888;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		/* 可选：长单词强制换行 */
	}
	
	/* 右侧：评分和按钮 */
	.right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		min-width: 160rpx;
	}
	
	/* 评分样式 */
	.score {
		color: orange;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		height: 120rpx;
	}
</style>