front-end/mallApp/src/components/GroupAvatarStack.vue

<!--
  拼团成员头像叠加
  用途：团购详情「当前拼团中」卡片展示已参团头像 + 空位加号
  list: [{avatar,name}]；groupSize 为成团总人数；用负 margin 叠加，禁用 gap
-->
<template>
  <view class="avatar-stack">
    <view
      v-for="(slot, index) in slots"
      :key="index"
      class="avatar-item"
      :class="{ first: index === 0, empty: slot.empty }"
    >
      <image
        v-if="!slot.empty"
        class="avatar-img"
        :src="slot.avatar | default_avatar"
        mode="aspectFill"
      />
      <view v-else class="avatar-empty">
        <text class="plus">+</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GroupAvatarStack',
  props: {
    /** 已参团成员（已支付） */
    list: { type: Array, default: () => [] },
    /** 成团所需人数 */
    groupSize: { type: Number, default: 3 },
    /** 最多展示几个头像槽位 */
    max: { type: Number, default: 5 }
  },
  computed: {
    slots() {
      const size = Math.min(Number(this.groupSize) || 3, this.max)
      const members = Array.isArray(this.list) ? this.list : []
      const result = []
      for (let i = 0; i < size; i++) {
        const m = members[i]
        if (m) {
          result.push({
            empty: false,
            avatar: m.avatar || m.avatarUrl || ''
          })
        } else {
          result.push({ empty: true, avatar: '' })
        }
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.avatar-item {
  width: 64upx;
  height: 64upx;
  border-radius: 50%;
  overflow: hidden;
  border: 4upx solid #fff;
  background: #fff;
  margin-left: -16upx;
  box-sizing: border-box;
  &.first {
    margin-left: 0;
  }
}
.avatar-img {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar-empty {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2upx dashed #ffb3c1;
  background: #fff5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.plus {
  color: #ff6b8a;
  font-size: 32upx;
  line-height: 1;
}
</style>