leromro-mini/components/Services/services.vue

<template>
  <view>

    <!-- <view class="home-swiper">
      <view v-if="ValueZoneSwiper.length > 0">
        <up-swiper :list="ValueZoneSwiper" :indicator="false" indicatorMode="line" circular></up-swiper>
      </view>
    </view> -->
    <up-waterfall>
      <template #left>
        <view class="demo-warter" v-for="(item, index) in props.leftList" :key="index" @click="goToDetail(item)">
          <up-lazy-load threshold="50" border-radius="10" :image="item.volunteerPicture" :index="index"
            mode="aspectFill"></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 props.rightList" :key="index" @click="goToDetail(item)">
          <up-lazy-load threshold="50" border-radius="10" :image="item.volunteerPicture" :index="index"
            mode="aspectFill"></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>
</template>

<script setup>
	const props = defineProps({
		leftList: {
			type: Array,
			default: () => []
		},
		rightList: {
			type: Array,
			default: () => []
    },
    ValueZoneSwiper: {
      type: Array,
      default: () => []
    }
	});

	const goToDetail = async (item) => {
		const params = {
			volunteerId: item.volunteerId, // 获取 volunteerId
			serviceCategory: item.serviceCategory, // 获取 serviceCategory
			businessManagementId: item.businessManagementId, //获取 businessManagementId
		};
		const data = encodeURIComponent(JSON.stringify(params))
		console.log(data, '>>>>>data');
		uni.navigateTo({
			url: `/pages_home/pages/Volunteerside/goodsDetails?params=${data}`
		});
	}
</script>

<style scoped>

/* 轮播图片 */
.home-swiper{
  width: 340rpx;
    height: 516rpx;
  margin-top: 25rpx;
  /* margin-left: 10rpx; */
  margin-right: 25rpx;
}

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