frontend-app/pages/other_package/productInfo/components/product-group-rules.vue

<template>
  <!-- 拼团玩法与可直接参与的拼团 (高保真还原) -->
  <view class="group_rules_card" v-if="isGroupProduct">
    <!-- 拼团玩法 -->
    <view class="group_rules_section">
      <view class="group_section_title">拼团玩法</view>
      <view class="group_steps_row">
        <!-- Step 1 -->
        <view class="group_step_item">
          <image class="step_icon_img" src="https://static.tbmall.xin/static/new/group_buying_1.png"
            mode="aspectFit">
          </image>
          <text class="step_text">开团/参加</text>
        </view>

        <!-- Step 2 -->
        <view class="group_step_item">
          <image class="step_icon_img" src="https://static.tbmall.xin/static/new/group_buying_2.png"
            mode="aspectFit">
          </image>
          <text class="step_text">邀请好友参团</text>
        </view>

        <!-- Step 3 -->
        <view class="group_step_item">
          <image class="step_icon_img" src="https://static.tbmall.xin/static/new/group_buying_3.png"
            mode="aspectFit">
          </image>
          <text class="step_text">成团发货</text>
        </view>
      </view>
      <view class="group_rules_notice">
        购买须知：付款后等待成团，成团后 1-3 天发货。未成团且不支持自动成团时全额退款。
      </view>
    </view>

    <!-- 可直接参与的拼团 (无数据时不展示) -->
    <view v-if="displayGroupTeams && displayGroupTeams.length > 0">
      <!-- 分割线 -->
      <view class="group_section_divider"></view>

      <!-- 可直接参与的拼团 -->
      <view class="group_direct_section">
        <view class="group_direct_header" @click="$emit('openJoinablePopup')">
          <text class="group_direct_title">可直接参与的拼团</text>
          <view class="group_direct_more">
            <up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"></up-image>
          </view>
        </view>
        <view class="group_teams_list">
          <view class="group_team_item" v-for="(team, tIdx) in displayGroupTeams.slice(0, 3)" :key="team.id || tIdx">
            <view class="team_user_info">
              <view class="team_avatar_wrap">
                <image class="team_avatar avatar_1" :src="team.avatar1" mode="aspectFill"></image>
                <image class="team_avatar avatar_2" :src="team.avatar2" mode="aspectFill"></image>
              </view>
              <text class="team_user_name">{{ team.nickname }}</text>
            </view>
            <view class="team_action_wrap">
              <text class="team_countdown_text">{{ team.countdownText }}</text>
              <view class="btn_join_team" @click="$emit('joinTeam', team)">
                <text class="btn_join_text">去拼团</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "product-group-rules",
  props: {
    isGroupProduct: {
      type: Boolean,
      default: false,
    },
    displayGroupTeams: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.group_rules_card {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  margin-top: 20rpx;

  .group_section_title {
    font-size: 28rpx;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 24rpx;
  }

  .group_steps_row {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 10rpx 0;

    .group_step_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 180rpx;

      .step_icon_img {
        width: 96rpx;
        height: 96rpx;
      }

      .step_text {
        font-size: 24rpx;
        color: #333333;
        margin-top: 14rpx;
        font-weight: 500;
        text-align: center;
      }
    }
  }

  .group_rules_notice {
    font-size: 22rpx;
    color: #999999;
    line-height: 36rpx;
    margin-top: 20rpx;
    padding-top: 16rpx;
  }

  .group_section_divider {
    height: 1rpx;
    background-color: #f2f2f2;
    margin: 24rpx 0;
  }

  .group_direct_section {
    .group_direct_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12rpx;

      .group_direct_title {
        font-size: 28rpx;
        font-weight: bold;
        color: #1a1a1a;
      }
    }

    .group_teams_list {
      .group_team_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16rpx 0;

        .team_user_info {
          display: flex;
          align-items: center;
          flex: 1;
          min-width: 0;

          .team_avatar_wrap {
            display: flex;
            align-items: center;
            position: relative;
            width: 80rpx;
            height: 52rpx;
            flex-shrink: 0;

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

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

              &.avatar_2 {
                left: 28rpx;
                z-index: 1;
              }
            }
          }

          .team_user_name {
            font-size: 26rpx;
            color: #333333;
            font-weight: 500;
            margin-left: 12rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200rpx;
          }
        }

        .team_action_wrap {
          display: flex;
          align-items: center;
          flex-shrink: 0;

          .team_countdown_text {
            font-size: 22rpx;
            color: #999999;
            margin-right: 16rpx;
          }

          .btn_join_team {
            background: linear-gradient(90deg, #8a3bf8 0%, #742af5 100%);
            border-radius: 26rpx;
            padding: 0 24rpx;
            height: 52rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.2s;

            &:active {
              opacity: 0.85;
            }

            .btn_join_text {
              color: #ffffff;
              font-size: 24rpx;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>