frontend-app/pages/other_package/productInfo/components/product-joinable-popup.vue

<template>
  <!-- 可直接参与的拼团弹窗 -->
  <up-popup :show="show" mode="bottom" :round="16" :closeOnClickOverlay="true"
    @close="$emit('update:show', false)">
    <view class="joinable_popup_container">
      <!-- 头部 -->
      <view class="joinable_popup_header">
        <text class="joinable_popup_title">可直接参与的拼团</text>
        <view class="joinable_popup_close" @click="$emit('update:show', false)">
          <u-icon name="close" size="18" color="#71737c"></u-icon>
        </view>
      </view>

      <!-- 拼团列表 -->
      <scroll-view scroll-y class="joinable_popup_body">
        <view class="joinable_popup_list">
          <view class="joinable_team_item" v-for="(team, idx) in list" :key="team.teamId || team.id || idx">
            <!-- 头像区域（叠层） -->
            <view class="joinable_avatar_wrap">
              <image class="joinable_avatar avatar_main" :src="team.avatar1" mode="aspectFill"></image>
              <image class="joinable_avatar avatar_sub" :src="team.avatar2" mode="aspectFill"></image>
            </view>
            <!-- 昵称 -->
            <text class="joinable_name">{{ team.nickname }}</text>
            <!-- 倒计时 -->
            <text class="joinable_countdown">{{ team.countdownText }}</text>
            <!-- 去拼团按钮 -->
            <view class="joinable_btn" @click="$emit('join', team)">
              <text class="joinable_btn_text">去拼团</text>
            </view>
          </view>
          <!-- 列表为空 -->
          <view v-if="!list || list.length === 0" class="joinable_empty">
            <text class="joinable_empty_text">暂无可参与的拼团</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </up-popup>
</template>

<script>
export default {
  name: "product-joinable-popup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.joinable_popup_container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 80vh;

  .joinable_popup_header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 36rpx 40rpx 24rpx;
    border-bottom: 1rpx solid #f2f2f2;

    .joinable_popup_title {
      font-size: 32rpx;
      font-weight: bold;
      color: #1a1a1a;
    }

    .joinable_popup_close {
      position: absolute;
      right: 40rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .joinable_popup_body {
    flex: 1;
    max-height: calc(80vh - 120rpx);

    .joinable_popup_list {
      padding: 0 40rpx;

      .joinable_team_item {
        display: flex;
        align-items: center;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #f6f6f6;

        &:last-child {
          border-bottom: none;
        }

        // 头像叠层
        .joinable_avatar_wrap {
          position: relative;
          width: 80rpx;
          height: 56rpx;
          flex-shrink: 0;

          .joinable_avatar {
            width: 56rpx;
            height: 56rpx;
            border-radius: 50%;
            border: 2rpx solid #ffffff;
            background-color: #e6e6e6;
            position: absolute;
            top: 0;

            &.avatar_main {
              left: 0;
              z-index: 2;
            }

            &.avatar_sub {
              left: 24rpx;
              z-index: 1;
            }
          }
        }

        // 昵称
        .joinable_name {
          flex: 1;
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;
          margin-left: 12rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        // 倒计时
        .joinable_countdown {
          font-size: 22rpx;
          color: #999999;
          margin: 0 20rpx 0 12rpx;
          white-space: nowrap;
          flex-shrink: 0;
        }

        // 去拼团按钮
        .joinable_btn {
          background: linear-gradient(90deg, #8a3bf8 0%, #742af5 100%);
          border-radius: 28rpx;
          padding: 0 24rpx;
          height: 56rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transition: opacity 0.2s;

          &:active {
            opacity: 0.82;
          }

          .joinable_btn_text {
            color: #ffffff;
            font-size: 26rpx;
            font-weight: bold;
          }
        }
      }

      // 空列表占位
      .joinable_empty {
        padding: 80rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .joinable_empty_text {
          font-size: 28rpx;
          color: #cccccc;
        }
      }
    }
  }
}
</style>