leromro-mini/components/Services/services.vue

<template>
  <view>
    <up-waterfall>
      <template #left>
        <view class="demo-warter" v-for="(item, index) in props.leftList" :key="index" @click="goToDetail(item)">
          <view v-if="item.type == 'slideshow'" class="home-swiper" @click.stop>
            <view v-if="ValueZoneSwiper.length > 0">
              <up-swiper :list="ValueZoneSwiper" :indicator="false" class="Up-swiper" @click="handleSwiperClick"
                :height="'516rpx'"></up-swiper>
            </view>
          </view>

          <template v-else>
            <up-lazy-load threshold="50" border-radius="10" :image="getVolunteerPicture(item)" :index="index"
              mode="aspectFill"></up-lazy-load>
            <view class="demo-skillDescribe">
              {{ item.businessDescribe }}
            </view>
            <view class="demo-title-container">
              <view class="demo-title">
                {{ item.businessTierName }}
              </view>
            </view>


            <view class="demo-PriceDome">
              <view class="demo-price">
                <image :src="getVolunteerPicture(item)" class="name-image"></image>
                <text class="name-text">{{ item.name }}</text>
              </view>
              <view class="demo-price">
                <image src="/static/img/1x.png" class="image-1x"></image>
                <text class="name-textNumber">1w</text>
              </view>
            </view>
            <view class="demo-price-distance">
              <view class="demo-price-distance-text-1">
                <text class="demo-price-distance-text-2">￥</text>
                <text class="demo-price-distance-text">{{ item.businessPrice }}</text>
              </view>
              <button class="demo-price-distance-button" @click="goToDetail(item)">抢购</button>
            </view>
          </template>
        </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="getVolunteerPicture(item)" :index="index"
            mode="aspectFill"></up-lazy-load>
          <view class="demo-skillDescribe">
            {{ item.businessDescribe }}
          </view>
          <view class="demo-title-container">
            <view class="demo-title">
              {{ item.businessTierName }}
            </view>
          </view>

          <view class="demo-PriceDome">
            <view class="demo-price">
              <image :src="getVolunteerPicture(item)" class="name-image"></image>
              <text class="name-text">{{ item.name }}</text>
            </view>
            <view class="demo-price">
              <image src="/static/img/1x.png" class="image-1x"></image>
              <text class="name-textNumber">1w</text>
            </view>
          </view>
          <view class="demo-price-distance">
            <view class="demo-price-distance-text-1">
              <text class="demo-price-distance-text-2">￥</text>
              <text class="demo-price-distance-text">{{ item.businessPrice }}</text>
            </view>
            <button class="demo-price-distance-button" @click="goToDetail(item)">抢购</button>
          </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 getVolunteerPicture = (item) => {
  // volunteerPicture是用逗号拼接的多张图片，取第一张
  const pictures = item.volunteerPicture.split(',');
  return pictures[0];
};

// 轮播图点击事件
const handleSwiperClick = (item) => {
  console.log('轮播图点击', item);
  // 这里可以添加轮播图的点击处理逻辑
}

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 lang="scss">
/* 轮播图片 */
.home-swiper {
  width: 340rpx;
  height: 516rpx;

  :deep(.Up-swiper) {
    width: 100%;
    height: 100%;
  }
}

.demo-warter {
  margin-top: 80rpx;
  border-radius: 8px;
  margin: 5px;
  background-color: #ffffff;
  // padding-left: 10rpx;
  // padding-right: 10rpx;
  margin-bottom: 30rpx;
}

.u-close {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
}

.demo-image {
  width: 100%;
  border-radius: 4px;
}

.demo-title-container {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
  padding: 4rpx 0rpx;
  // z-index: 0;
  margin-top: 10rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  // border: 1rpx solid rgba(237, 93, 49, 0.8);
}

.demo-title {

  font-size: 22rpx;
  color: #ED5D31;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.demo-skillDescribe {
  width: 345rpx;
  height: auto;
  font-family: PingFang SC;
  font-size: 26rpx;
  font-weight: 500;
  line-height: 36rpx;
  letter-spacing: normal;
  color: #141414;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  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;
  overflow: hidden;
  /* 防止内容溢出 */
}

.image-1x {
  width: 20rpx;
  height: 20rpx;
  z-index: 0;
}

.name-textNumber {
  font-size: 22rpx;
  font-weight: normal;
  line-height: 24rpx;
  text-align: right;
  letter-spacing: -0.04em;
  color: #FF6E51;
}

.demo-price-distance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;

  .demo-price-distance-text-1 {
    display: flex;
    align-items: center;

    .demo-price-distance-text-2 {
      font-family: Source Han Sans;
      font-size: 22rpx;
      font-weight: bold;
      line-height: 34rpx;
      color: #FA2922;
    }
  }

  .demo-price-distance-text {
    font-family: Source Han Sans;
    font-weight: 700;
    font-size: 40rpx;
    font-variation-settings: "opsz" auto;
    color: #FA2922;
  }

  .demo-price-distance-button {
    width: 124rpx;
    height: 51rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 36rpx;
    background: linear-gradient(90deg, #FE534B 25%, #FD8F7C 91%);
    box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(0, 0, 0, 0.18), inset 0rpx 4rpx 10rpx 0rpx rgba(255, 221, 221, 0.3);
    color: #FFFFFF;
    font-size: 30rpx;
    padding: 0;
    margin-left: 70rpx;
  }
}


.name-text {
  width: 117rpx;
  height: 34rpx;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-weight: normal;
  line-height: 34rpx;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.8);
}

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