wechatShopUni/pages/distribution/index.js

// pages/distribution/index.js
import * as echarts from '../../ec-canvas/echarts';

let chart = null;

// 初始化图表
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  return chart;
}

Page({
  data: {
    userInfo: {
      avatarUrl: '',
      nickName: '',
      distributionId: '',
      level: '普通推广员',
      upgradeNeed: '5000.00',
      currentAmount: '2390.00',
      targetAmount: '8000.00',
      progress: 30 // 进度百分比
    },
    earnings: {
      total: '5280.00',
      today: '99.00',
      yesterday: '188.00',
      month: '2390.00'
    },
    promotion: {
      orderCount: 128,
      orderTrend: 15.8,
      teamCount: 45,
      teamTrend: -5.2,
      visitCount: 1234,
      visitTrend: 23.5,
      convertRate: 12.8,
      convertTrend: 3.2
    },
    levelList: [{
      name: '普通推广员',
      commission: 10,
      teamCommission: 0,
      requirement: 0
    }, {
      name: '高级推广员',
      commission: 15,
      teamCommission: 3,
      requirement: 8000
    }, {
      name: '金牌推广员',
      commission: 20,
      teamCommission: 5,
      requirement: 20000
    }, {
      name: '钻石推广员',
      commission: 25,
      teamCommission: 8,
      requirement: 50000
    }],
    currentChart: 'earnings',
    ec: {
      onInit: initChart
    },
    chartData: {
      earnings: {
        dates: [],
        values: []
      },
      orders: {
        dates: [],
        values: []
      },
      team: {
        dates: [],
        values: []
      }
    }
  },

  onLoad() {
    this.getUserInfo()
    this.getDistributionInfo()
    this.loadChartData();
  },

  // 获取用户信息
  getUserInfo() {
    // TODO: 调用后端API获取用户信息
    const userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.setData({
        'userInfo.avatarUrl': userInfo.avatarUrl,
        'userInfo.nickName': userInfo.nickName
      })
    }
  },

  // 获取分销数据
  getDistributionInfo() {
    // TODO: 调用后端API获取分销数据
    // 这里使用模拟数据
  },

  // 导航到推广海报页面
  navigateToPromotion() {
    wx.navigateTo({
      url: '/pages/promotion/poster'
    })
  },

  // 导航到推广二维码页面
  navigateToQrcode() {
    wx.navigateTo({
      url: '/pages/promotion/qrcode'
    })
  },

  // 复制推广链接
  copyLink() {
    // TODO: 获取推广链接
    const link = 'https://example.com/share/123456'
    wx.setClipboardData({
      data: link,
      success: () => {
        wx.showToast({
          title: '链接已复制',
          icon: 'success'
        })
      }
    })
  },

  // 导航到分销规则页面
  navigateToRules() {
    wx.navigateTo({
      url: '/pages/distribution/rules'
    })
  },

  // 显示等级详情
  showLevelDetail() {
    wx.navigateTo({
      url: '/pages/distribution/level'
    })
  },

  // 加载图表数据
  loadChartData: function () {
    // 模拟7天数据
    const now = new Date();
    const dates = [];
    const data = {
      earnings: [],
      orders: [],
      team: []
    };

    for (let i = 6; i >= 0; i--) {
      const date = new Date(now);
      date.setDate(date.getDate() - i);
      dates.push(date.getDate() + '日');
      
      // 模拟数据
      data.earnings.push(+(Math.random() * 1000).toFixed(2));
      data.orders.push(Math.floor(Math.random() * 50));
      data.team.push(Math.floor(Math.random() * 20));
    }

    this.setData({
      'chartData.earnings.dates': dates,
      'chartData.earnings.values': data.earnings,
      'chartData.orders.dates': dates,
      'chartData.orders.values': data.orders,
      'chartData.team.dates': dates,
      'chartData.team.values': data.team
    }, () => {
      this.updateChart();
    });
  },

  // 切换图表
  switchChart: function (e) {
    const type = e.currentTarget.dataset.type;
    this.setData({ currentChart: type }, () => {
      this.updateChart();
    });
  },

  // 更新图表
  updateChart: function () {
    if (!chart) return;

    const data = this.data.chartData[this.data.currentChart];
    const option = {
      color: ['#ff4d4f'],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.dates,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: '#f5f5f5'
          }
        }
      },
      series: [{
        name: this.getSeriesName(),
        type: 'line',
        smooth: true,
        data: data.values,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255, 77, 79, 0.3)'
          }, {
            offset: 1,
            color: 'rgba(255, 77, 79, 0.1)'
          }])
        },
        lineStyle: {
          width: 2
        },
        symbol: 'circle',
        symbolSize: 6
      }]
    };

    chart.setOption(option);
  },

  // 获取系列名称
  getSeriesName: function () {
    const names = {
      earnings: '佣金收入',
      orders: '推广订单',
      team: '团队成员'
    };
    return names[this.data.currentChart];
  },

  onPullDownRefresh() {
    this.getUserInfo()
    this.getDistributionInfo()
    this.loadChartData();
    wx.stopPullDownRefresh()
  },

  onShareAppMessage() {
    return {
      title: '邀请你加入分销团队',
      path: '/pages/index/index?inviter=' + this.data.userInfo.distributionId,
      imageUrl: '/static/images/share.jpg'
    }
  }
})