cfc/cfc-frontend/pages/promotion/team.vue

<template>
  <view class="container">
    <!-- 团队统计 -->
    <view class="stats-card">
      <view class="stats-item">
        <text class="stats-num" v-if="cfRate">{{ cfRate.totalTeamSize || 0 }}</text>
        <text class="stats-num" v-else>0</text>
        <text class="stats-label">团队规模</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <text class="stats-num" v-if="cfRate">{{ (cfRate.ratePercent || 0) + '%' }}</text>
        <text class="stats-num" v-else>0%</text>
        <text class="stats-label">返佣比例</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <text class="stats-num" v-if="cfRate && cfRate.tierName">{{ cfRate.tierName }}</text>
        <text class="stats-num" v-else>未入档</text>
        <text class="stats-label">当前档位</text>
      </view>
    </view>

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view class="tab-item" :class="level === 'L1' ? 'tab-active' : ''" @click="switchLevel('L1')">
        <text class="tab-text">直推(L1)</text>
      </view>
      <view class="tab-item" :class="level === 'L2' ? 'tab-active' : ''" @click="switchLevel('L2')">
        <text class="tab-text">间推(L2)</text>
      </view>
    </view>

    <!-- 成员列表 -->
    <view class="list-section">
      <text class="section-title">团队成员 ({{ total || 0 }})</text>
      <view class="empty-state" v-if="!loading && list.length === 0">
        <text>还没有推广团队成员</text>
      </view>
      <view class="member-item" v-for="item in list" :key="item.userId">
        <view class="member-avatar-wrap">
          <image v-if="item.avatarUrl" class="member-avatar-img" :src="item.avatarUrl" mode="aspectFill"></image>
          <text v-else class="member-avatar-icon">👤</text>
        </view>
        <view class="member-info">
          <text class="member-name">{{ item.nickname || '微信用户' }}</text>
          <text class="member-time">{{ formatTime(item.createdAt) }}</text>
        </view>
        <view class="member-right">
          <view class="member-badge" v-if="item.orderCount && item.orderCount > 0">
            <text class="badge-text">{{ item.orderCount }}单</text>
          </view>
          <text class="member-commission">{{ formatPriceWithSymbol(item.commissionEarned) }}</text>
        </view>
      </view>
      <view class="loading-state" v-if="loading">
        <text>加载中...</text>
      </view>
      <view class="loadmore-state" v-if="!loading && list.length > 0 && !hasMore">
        <text>没有更多了</text>
      </view>
    </view>

    <!-- 曲线图区域 -->
    <view class="charts-section" v-if="curveDataReady">
      <view class="charts-grid">
        <!-- 团队成长曲线 -->
        <view class="chart-card">
          <view class="chart-header">
            <text class="chart-title">团队成长曲线</text>
            <text class="chart-subtitle">按月份统计的新成员注册数</text>
          </view>
          <view class="chart-container">
            <canvas canvas-id="growthCurveCanvas" class="growth-canvas"></canvas>
          </view>
          <view class="chart-legend">
            <text class="legend-label">新成员数</text>
          </view>
        </view>

        <!-- 所有成员消费曲线 -->
        <view class="chart-card">
          <view class="chart-header">
            <text class="chart-title">所有成员消费曲线</text>
            <text class="chart-subtitle">按月份统计的累计消费额</text>
          </view>
          <view class="chart-container">
            <canvas canvas-id="membersConsumptionCanvas" class="members-canvas"></canvas>
          </view>
          <view class="chart-legend">
            <text class="legend-label">累计消费(分)</text>
          </view>
        </view>

        <!-- 直推团队(L1)消费曲线 -->
        <view class="chart-card">
          <view class="chart-header">
            <text class="chart-title">直推团队(L1)消费曲线</text>
            <text class="chart-subtitle">按月份统计L1成员消费总额</text>
          </view>
          <view class="chart-container">
            <canvas canvas-id="l1ConsumptionCanvas" class="l1-canvas"></canvas>
          </view>
          <view class="chart-legend">
            <text class="legend-label">L1消费(分)</text>
          </view>
        </view>
      </view>
    </view>
  </view>

<script>
import { getCfRate, getTeamList } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      list: [],
      total: 0,
      page: 1,
      level: 'L1',
      loading: false,
      hasMore: true,
      cfRate: null
    }
  },
  onLoad() {
    this.loadTeamStats()
    this.loadList()
  },
  onShow() {
    this.loadCurveData()
    this.loadTeamStats()
    this.loadList()
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++
      this.loadList()
    }
  },
  methods: {
    async loadTeamStats() {
      try {
        var res = await getCfRate()
        if (res.data) {
          this.cfRate = res.data
        }
      } catch (e) {
        console.error('获取团队统计失败', e)
      }
    },
    async loadList() {
      this.loading = true
      try {
        var res = await getTeamList(this.page, 20, this.level)
        if (res.data && res.data.records) {
          this.list = this.page === 1 ? res.data.records : this.list.concat(res.data.records)
          this.total = res.data.total || 0
          this.hasMore = res.data.records.length >= 20
        } else {
          this.hasMore = false
        }
      } catch (e) {
        console.error('获取团队成员失败', e)
      }
      this.loading = false
    },
    switchLevel(level) {
      if (this.level === level) return
      this.level = level
      this.page = 1
      this.list = []
      this.hasMore = true
      this.loadList()
    },
    formatTime(time) {
      if (!time) return ''
      var d = parseDate(time)
      if (!d) return ''
      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
    },

    // 绘制团队成长曲线
    drawGrowthCurve(data) {
      var labels = data.labels || []
      var dataValues = data.data || []

      if (!labels || labels.length === 0) return

      uni.createCanvasContext('growthCurveCanvas', this)
      var ctx = uni.getCanvasContext('growthCurveCanvas', this)

      if (!ctx) return

      ctx.clearRect(0, 0, 320, 200)

      var canvasWidth = 320
      var canvasHeight = 200
      var padding = 40
      var chartWidth = canvasWidth - padding * 2
      var chartHeight = canvasHeight - padding * 2

      // 绘制坐标轴
      ctx.setStrokeStyle('#C0C0C0')
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.moveTo(padding, padding)
      ctx.lineTo(padding, canvasHeight - padding)
      ctx.lineTo(canvasWidth - padding, canvasHeight - padding)
      ctx.stroke()
      ctx.closePath()

      // 绘制X轴刻度和标签
      ctx.setFontSize(12)
      for (var i = 0; i < labels.length; i++) {
        var x = padding + (i * (chartWidth / (labels.length - 1))) || padding
        ctx.beginPath()
        ctx.moveTo(x, canvasHeight - padding)
        ctx.lineTo(x, canvasHeight - padding + 5)
        ctx.stroke()
        ctx.fillText(labels[i], x - ctx.measureText(labels[i]).width / 2, canvasHeight - padding + 20)
      }

      // 绘制Y轴刻度
      var maxValue = Math.max(...dataValues) || 1
      var stepHeight = chartHeight / 5
      for (var i = 0; i <= 5; i++) {
        var y = canvasHeight - padding - i * stepHeight
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(padding - 5, y)
        ctx.stroke()
        ctx.fillText(String(Math.round(maxValue * (5 - i) / 5)), padding - 30, y + 4)
      }

      // 绘制折线图
      if (dataValues.length > 1) {
        ctx.setStrokeStyle('#F97316')
        ctx.setLineWidth(2)
        ctx.beginPath()

        for (var i = 0; i < dataValues.length; i++) {
          var x = padding + (i * (chartWidth / (dataValues.length - 1)))
          var y = canvasHeight - padding - (dataValues[i] / maxValue) * chartHeight
          if (i === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        }
        ctx.stroke()
        ctx.closePath()

        // 绘制填充区域
        ctx.setFillStyle('rgba(249, 115, 22, 0.2)')
        ctx.beginPath()
        ctx.moveTo(padding, canvasHeight - padding)
        for (var i = 0; i < dataValues.length; i++) {
          var x = padding + (i * (chartWidth / (dataValues.length - 1)))
          var y = canvasHeight - padding - (dataValues[i] / maxValue) * chartHeight
          ctx.lineTo(x, y)
        }
        ctx.lineTo(canvasWidth - padding, canvasHeight - padding)
        ctx.closePath()
        ctx.fill()
      }
    },

    // 绘制所有成员消费曲线
    drawMembersConsumptionCurve(data) {
      var labels = data.labels || []
      var dataValues = data.data || []

      if (!labels || labels.length === 0) return

      uni.createCanvasContext('membersConsumptionCanvas', this)
      var ctx = uni.getCanvasContext('membersConsumptionCanvas', this)

      if (!ctx) return

      ctx.clearRect(0, 0, 320, 200)

      var canvasWidth = 320
      var canvasHeight = 200
      var padding = 40
      var chartWidth = canvasWidth - padding * 2
      var chartHeight = canvasHeight - padding * 2

      // 绘制坐标轴
      ctx.setStrokeStyle('#C0C0C0')
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.moveTo(padding, padding)
      ctx.lineTo(padding, canvasHeight - padding)
      ctx.lineTo(canvasWidth - padding, canvasHeight - padding)
      ctx.stroke()
      ctx.closePath()

      // 绘制X轴刻度
      ctx.setFontSize(12)
      for (var i = 0; i < labels.length; i++) {
        var x = padding + (i * (chartWidth / (labels.length - 1))) || padding
        ctx.beginPath()
        ctx.moveTo(x, canvasHeight - padding)
        ctx.lineTo(x, canvasHeight - padding + 5)
        ctx.stroke()
        ctx.fillText(labels[i], x - ctx.measureText(labels[i]).width / 2, canvasHeight - padding + 20)
      }

      // 绘制Y轴刻度（金额）
      var maxVal = Math.max(...dataValues) || 1
      var stepHeight = chartHeight / 5
      for (var i = 0; i <= 5; i++) {
        var y = canvasHeight - padding - i * stepHeight
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(padding - 5, y)
        ctx.stroke()
        ctx.fillText('¥' + Math.round(maxVal * (5 - i) / 5 / 100), padding - 30, y + 4)
      }

      // 绘制折线图
      if (dataValues.length > 1) {
        ctx.setStrokeStyle('#0EA5E9')
        ctx.setLineWidth(2)
        ctx.beginPath()

        for (var i = 0; i < dataValues.length; i++) {
          var x = padding + (i * (chartWidth / (dataValues.length - 1)))
          var y = canvasHeight - padding - (dataValues[i] / maxVal) * chartHeight
          if (i === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        }
        ctx.stroke()
        ctx.closePath()

        // 绘制填充区域
        ctx.setFillStyle('rgba(14, 165, 233, 0.2)')
        ctx.beginPath()
        ctx.moveTo(padding, canvasHeight - padding)
        for (var i = 0; i < dataValues.length; i++) {
          var x = padding + (i * (chartWidth / (dataValues.length - 1)))
          var y = canvasHeight - padding - (dataValues[i] / maxVal) * chartHeight
          ctx.lineTo(x, y)
        }
        ctx.lineTo(canvasWidth - padding, canvasHeight - padding)
        ctx.closePath()
        ctx.fill()
      }
    },

    // 绘制L1直推团队消费曲线
    drawL1ConsumptionCurve(data) {
      var labels = data.labels || []
      var dataValues = data.data || []

      if (!labels || labels.length === 0) return

      uni.createCanvasContext('l1ConsumptionCanvas', this)
      var ctx = uni.getCanvasContext('l1ConsumptionCanvas', this)

      if (!ctx) return

      ctx.clearRect(0, 0, 320, 200)

      var canvasWidth = 320
      var canvasHeight = 200
      var padding = 40
      var chartWidth = canvasWidth - padding * 2
      var chartHeight = canvasHeight - padding * 2

      // 绘制坐标轴
      ctx.setStrokeStyle('#C0C0C0')
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.moveTo(padding, padding)
      ctx.lineTo(padding, canvasHeight - padding)
      ctx.lineTo(canvasWidth - padding, canvasHeight - padding)
      ctx.stroke()
      ctx.closePath()

      // 绘制X轴刻度
      ctx.setFontSize(12)
      for (var i = 0; i < labels.length; i++) {
        var x = padding + (i * (chartWidth / (labels.length - 1))) || padding
        ctx.beginPath()
        ctx.moveTo(x, canvasHeight - padding)
        ctx.lineTo(x, canvasHeight - padding + 5)
        ctx.stroke()
        ctx.fillText(labels[i], x - ctx.measureText(labels[i]).width / 2, canvasHeight - padding + 20)
      }

      // 绘制Y轴刻度
      var maxValue = Math.max(...dataValues) || 1
      var stepHeight = chartHeight / 5
      for (var i = 0; i <= 5; i++) {
        var y = canvasHeight - padding - i * stepHeight
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(padding - 5, y)
        ctx.stroke()
        ctx.fillText(String(Math.round(maxValue * (5 - i) / 5)), padding - 30, y + 4)
      }

      // 绘制折线图 - 使用暖橙色
      ctx.setStrokeStyle('#F97316')
      ctx.setLineWidth(2)
      ctx.beginPath()

      for (var i = 0; i < dataValues.length; i++) {
        var x = padding + (i * (chartWidth / (dataValues.length - 1)))
        var y = canvasHeight - padding - (dataValues[i] / maxValue) * chartHeight
        if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
      ctx.stroke()
      ctx.closePath()

      // 绘制填充区域
      ctx.setFillStyle('rgba(249, 115, 22, 0.2)')
      ctx.beginPath()
      ctx.moveTo(padding, canvasHeight - padding)
      for (var i = 0; i < dataValues.length; i++) {
        var x = padding + (i * (chartWidth / (dataValues.length - 1)))
        var y = canvasHeight - padding - (dataValues[i] / maxValue) * chartHeight
        ctx.lineTo(x, y)
      }
      ctx.lineTo(canvasWidth - padding, canvasHeight - padding)
      ctx.closePath()
      ctx.fill()
    },

    async loadCurveData() {
      try {
        // 获取团队成长曲线数据（12个月）
        var growthRes = await getTeamGrowthCurve(12)
        if (growthRes && growthRes.data) {
          this.drawGrowthCurve(growthRes.data)
        }
        // 获取所有成员消费曲线数据
        var consumptionRes = await getTeamAllMembersConsumptionCurve(12)
        if (consumptionRes && consumptionRes.data) {
          this.drawMembersConsumptionCurve(consumptionRes.data)
        }
        // 获取L1直推团队消费曲线数据
        var l1Res = await getTeamL1ConsumptionCurve(12)
        if (l1Res && l1Res.data) {
          this.drawL1ConsumptionCurve(l1Res.data)
        }
        this.curveDataReady = true
      } catch (e) {
        console.error('获取曲线数据失败', e)
        uni.showToast({ title: '获取数据失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #FFF7ED;
}

/* ===== 团队统计 ===== */
.stats-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.stats-item {
  flex: 1;
  text-align: center;
}
.stats-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}
.stats-label {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 4rpx;
  display: block;
}
.stats-divider {
  width: 1rpx;
  height: 48rpx;
  background: #FED7AA;
}

/* ===== Tab切换 ===== */
.tab-bar {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(249,115,22,0.06);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  border-radius: 12rpx;
}
.tab-active {
  background: #F97316;
}
.tab-active .tab-text {
  color: #fff;
  font-weight: 600;
}
.tab-text {
  font-size: 26rpx;
  color: #64748B;
}

/* ===== 成员列表 ===== */
.list-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 20rpx;
}
.member-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FED7AA;
}
.member-item:last-child {
  border-bottom: none;
}
.member-avatar-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  overflow: hidden;
  flex-shrink: 0;
}
.member-avatar-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}
.member-avatar-icon {
  font-size: 36rpx;
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 28rpx;
  color: #1E293B;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-time {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 4rpx;
  display: block;
}
.member-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 16rpx;
}
.member-badge {
  display: inline-block;
  background: #FEF3C7;
  border-radius: 8rpx;
  padding: 2rpx 10rpx;
  margin-bottom: 4rpx;
}
.badge-text {
  font-size: 20rpx;
  color: #D97706;
}
.member-commission {
  font-size: 28rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}
.empty-state, .loading-state, .loadmore-state {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
  font-size: 28rpx;
}
</style>