leromro-mini/pages/Volunteerside/Side_index.vue

<template>
	<view v-if="userType == 1">
			<up-waterfall v-model="flowList">
				<template v-slot:left="{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.name}}
						</view>
						<view class="demo-PriceDome">
							<image :src="item.image" mode="aspectFill" class="demo-img" />
							<view class="demo-price">
								{{item.price}}
							</view>
							<view class="dome-Like">
								<image src="/static/爱心.png" class="Wrapper-img"
									style="width: 40rpx; height: 40rpx;" />
								<text>1.4w</text>
							</view>
						</view>
	
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<up-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></up-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-PriceDome">
							<image :src="item.image" mode="aspectFill" class="demo-img" />
							<view class="demo-price">
								{{item.price}}
							</view>
							<view class="dome-Like">
								<image src="/static/爱心.png" class="Wrapper-img"
									style="width: 40rpx; height: 40rpx;" />
								<text>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
	} from 'vue';
	import {volunteerinfolist} from "@/api/volunteerDetailsApi/details.js"
	
	const flowList = ref([]); //list数据
	const loadStatus = ref('loadmore');
	const userType = uni.getStorageSync('userType') //读取本地存储

	const listData = ref([])
	
	const getList = async() =>{
		const res = await volunteerinfolist()
		console.log(res,'>>>>>')
		listData.value = res.data
	}
	
	const list = ref([{
			price: '王老板',
			title: '北国风光，千里冰封，万里雪飘北国风光，千里冰封，万里雪飘北国风光，千里冰封，万里雪飘',
			// shop: '李白杜甫白居易旗舰店',
			image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
			img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
		},
		{
			price: '李老板',
			title: '望长城内外，惟余莽莽北国风光，千里冰封，万里雪飘、望长城内外，惟余莽莽北国风光，千里冰封，万里雪飘',
			// shop: '李白杜甫白居易旗舰店',
			image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
			img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
		},
	]);
	
	// const addRandomData = () => {
	// 	const newItems = []
	// 	for (let i = 0; i < 10; i++) {
	// 		const index = Math.floor(Math.random() * list.value.length)
	// 		newItems.push({
	// 			...list.value[index],
	// 			id: generateId()
	// 		})
	// 	}
	// 	flowList.value = [...flowList.value, ...newItems] // 替换为新数组
	// }
	
	// const remove = (id) => {
	// 	const index = flowList.value.findIndex(item => item.id === id);
	// 	if (index !== -1) {
	// 		flowList.value.splice(index, 1);
	// 	}
	// };
	
	// const generateId = () => {
	// 	return Math.random().toString(36).substr(2, 9); // 生成一个随机ID
	// };
	
	const goToDetail = (item) => {
		console.log(item, '>>>>>>>>>详情事件');
		const itemInfo = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/goodsDetails/goodsDetails?itemInfo=${itemInfo}`
		});
	}
	

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

<style scoped>
	
	
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 5px;
		/* position: relative; */
	}
	
	.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;
	}
	
	.dome-Like {
		margin-left: 80rpx;
		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>