recycle-front/pages/subcomponent/promotion-team.vue

<template>
  <view class="team-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text class="title">我的团队</text>
    </view>
    <view class="main-content">
      <!-- tab栏 -->
      <view class="team-tabs">
        <view :class="['tab', tabActive===0 ? 'active' : '']" @tap="tabActive=0">一级团队</view>
        <view :class="['tab', tabActive===1 ? 'active' : '']" @tap="tabActive=1">二级团队</view>
      </view>
      <!-- 统计 -->
      <view class="team-summary">
        共邀请 <text class="highlight">{{ teamList.length }}</text> 人，
        <text class="highlight">{{ orderedCount }}</text>人已下单，
        <text class="highlight">{{ notOrderedCount }}</text>人未下单
      </view>
      <!-- 团队列表 -->
      <view class="team-list-card">
        <view class="team-item" v-for="(item, idx) in teamList" :key="idx">
          <image class="avatar" :src="item.avatar" mode="aspectFill" />
          <view class="team-info">
            <view class="team-name">{{ item.name }}</view>
            <view class="team-join">已加入平台{{ item.days }}天</view>
          </view>
          <view class="team-order">
            <view class="order-count">{{ item.orders }}单</view>
            <view class="order-label">下单量</view>
          </view>
          <view class="team-amount">
            <view class="amount">¥{{ item.amount }}</view>
            <view class="amount-label">佣金</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabActive: 0,
      teamList: [],
      teamList1: [], // 一级团队
      teamList2: []  // 二级团队
    }
  },
  computed: {
    orderedCount() {
      return this.teamList.filter(item => item.orders > 0).length;
    },
    notOrderedCount() {
      return this.teamList.filter(item => item.orders == 0).length;
    }
  },
  watch: {
    tabActive(val) {
      this.teamList = val === 0 ? this.teamList1 : this.teamList2;
    }
  },
  mounted() {
    this.fetchTeamList(0); // 一级
    this.fetchTeamList(1); // 二级
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    fetchTeamList(state) {
      this.$api('getHanHaiMemberUser', { state }, res => {
        if (res && res.code === 200 && res.result && Array.isArray(res.result.records)) {
          const list = res.result.records.map(item => {
            // 计算加入天数
            let days = 0;
            if (item.createTime) {
              const joinDate = new Date(item.createTime.replace(/-/g, '/'));
              const now = new Date();
              days = Math.floor((now - joinDate) / (1000 * 60 * 60 * 24));
            }
            return {
              avatar: item.headImage,
              name: item.nickName,
              days,
              orders: item.orderNum,
              amount: item.commission
            }
          });
          if (state === 0) {
            this.teamList1 = list;
            if (this.tabActive === 0) this.teamList = list;
          } else {
            this.teamList2 = list;
            if (this.tabActive === 1) this.teamList = list;
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.team-container {
  min-height: 100vh;
  background: #f7f7f7;
}
.nav-bar {
  display: flex;
  align-items: center;
  height: calc(150rpx + var(--status-bar-height));
  padding: 0 32rpx;
  padding-top: var(--status-bar-height);
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  .back {
    padding: 20rpx;
    margin-left: -20rpx;
  }
  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #222;
  }
}
.main-content {
  margin-top: calc(150rpx + var(--status-bar-height));
  margin-bottom: 40rpx;
}
.team-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  margin: 0 32rpx;
  padding: 0 0 0 0;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  .tab {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #b3b3b3;
    font-weight: 500;
    padding: 32rpx 0 24rpx 0;
    border-bottom: 4rpx solid transparent;
    transition: color 0.2s, border-color 0.2s;
    &.active {
      color: #ff8917;
      border-bottom: 4rpx solid #ff8917;
      font-weight: 600;
    }
  }
}
.team-summary {
  background: #eeffe9;
  color: #4cbb4c;
  font-size: 26rpx;
  text-align: center;
  padding: 18rpx 0;
  margin: 0 32rpx 0 32rpx;
  border-radius: 0 0 20rpx 20rpx;
  font-family: PingFang SC;
  font-weight: 400;
  .highlight {
    color: #f79400;
    font-weight: 600;
  }
}
.team-list-card {
  background: #fff;
  border-radius: 40rpx;
  margin: 24rpx 32rpx 32rpx 32rpx;
  padding: 0 0 0 0;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.team-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 28rpx 36rpx 28rpx 36rpx;
  border-bottom: 2rpx solid #f3f3f3;
  &:last-child {
    border-bottom: none;
  }
}
.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  object-fit: cover;
  background: #f5f5f5;
}
.team-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 120rpx;
}
.team-name {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
}
.team-join {
  font-size: 22rpx;
  color: #b3b3b3;
  font-weight: 400;
  margin-top: 2rpx;
}
.team-order {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90rpx;
  margin-left: 12rpx;
  margin-right: 12rpx;
  .order-count {
    font-size: 26rpx;
    color: #222;
    font-weight: 500;
  }
  .order-label {
    font-size: 22rpx;
    color: #b3b3b3;
    font-weight: 400;
    margin-top: 2rpx;
  }
}
.team-amount {
  min-width: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 12rpx;
  .amount {
    font-size: 26rpx;
    color: #f79400;
    font-weight: 500;
  }
  .amount-label {
    font-size: 22rpx;
    color: #b3b3b3;
    font-weight: 400;
    margin-top: 2rpx;
  }
}
</style>