wechatShopUni/pages/distribution/index.wxml

<!--pages/distribution/index.wxml-->
<view class="container">
  <!-- 头部信息 -->
  <view class="header">
    <view class="user-info">
      <view class="avatar-wrap">
        <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        <view class="level">{{userInfo.level}}</view>
      </view>
      <view class="info">
        <view class="nickname">{{userInfo.nickName}}</view>
        <view class="id">推广ID：{{userInfo.distributionId}}</view>
      </view>
    </view>
    <view class="level-progress">
      <view class="progress-info">
        <text>距离升级还差{{userInfo.upgradeNeed}}元</text>
        <text>{{userInfo.currentAmount}}/{{userInfo.targetAmount}}元</text>
      </view>
      <view class="progress-bar">
        <view class="progress" style="width: {{userInfo.progress}}%"></view>
      </view>
    </view>
  </view>

  <!-- 收益数据 -->
  <view class="earnings-panel">
    <view class="total-earnings">
      <view class="amount">{{earnings.total}}</view>
      <view class="label">累计收益(元)</view>
    </view>
    <view class="earnings-grid">
      <view class="grid-item">
        <view class="amount">{{earnings.today}}</view>
        <view class="label">今日预估(元)</view>
      </view>
      <view class="grid-item">
        <view class="amount">{{earnings.yesterday}}</view>
        <view class="label">昨日收益(元)</view>
      </view>
      <view class="grid-item">
        <view class="amount">{{earnings.month}}</view>
        <view class="label">本月收益(元)</view>
      </view>
    </view>
  </view>
  <!-- 推广数据 -->
  <view class="promotion-panel">
    <view class="panel-title">推广数据</view>
    <view class="promotion-grid">
      <view class="grid-row">
        <view class="grid-item">
          <view class="item-main">
            <text class="amount highlight">{{promotion.orderCount}}</text>
          </view>
          <text class="label">今日推广订单</text>
          <view class="compare-line">
            <text class="compare">较昨日</text>
            <view class="trend {{promotion.orderTrend > 0 ? 'up' : 'down'}}">
              <text class="trend-icon"></text>
              <text>{{promotion.orderTrend}}%</text>
            </view>
          </view>
        </view>
        <view class="grid-item">
          <view class="item-main">
            <text class="amount highlight">{{promotion.teamCount}}</text>
          </view>
          <text class="label">今日新增团队</text>
          <view class="compare-line">
            <text class="compare">较昨日</text>
            <view class="trend {{promotion.teamTrend > 0 ? 'up' : 'down'}}">
              <text class="trend-icon"></text>
              <text>{{promotion.teamTrend}}%</text>
            </view>
          </view>
        </view>
      </view>
      <view class="grid-row">
        <view class="grid-item">
          <view class="item-main">
            <text class="amount highlight">{{promotion.visitCount}}</text>
          </view>
          <text class="label">今日访问</text>
          <view class="compare-line">
            <text class="compare">较昨日</text>
            <view class="trend {{promotion.visitTrend > 0 ? 'up' : 'down'}}">
              <text class="trend-icon"></text>
              <text>{{promotion.visitTrend}}%</text>
            </view>
          </view>
        </view>
        <view class="grid-item">
          <view class="item-main">
            <text class="amount highlight">{{promotion.convertRate}}%</text>
          </view>
          <text class="label">转化率</text>
          <view class="compare-line">
            <text class="compare">较昨日</text>
            <view class="trend {{promotion.convertTrend > 0 ? 'up' : 'down'}}">
              <text class="trend-icon"></text>
              <text>{{promotion.convertTrend}}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据趋势图表 -->
    <view class="chart-tabs">
      <view 
        class="tab-item {{currentChart === 'earnings' ? 'active' : ''}}" 
        data-type="earnings" 
        bindtap="switchChart"
      >佣金收入</view>
      <view 
        class="tab-item {{currentChart === 'orders' ? 'active' : ''}}" 
        data-type="orders" 
        bindtap="switchChart"
      >推广订单</view>
      <view 
        class="tab-item {{currentChart === 'team' ? 'active' : ''}}" 
        data-type="team" 
        bindtap="switchChart"
      >团队成员</view>
    </view>
    <view class="chart-container">
      <ec-canvas id="trend-chart" canvas-id="trend-chart" ec="{{ ec }}"></ec-canvas>
    </view>
  </view>

  <!-- 推广工具 -->
  <view class="tools-panel">
    <view class="panel-title">推广工具</view>
    <view class="tools-grid">
      <view class="tool-item" bindtap="navigateToPromotion">
        <image class="tool-icon" src="/static/images/poster.png"></image>
        <text>推广海报</text>
      </view>
      <view class="tool-item" bindtap="navigateToQrcode">
        <image class="tool-icon" src="/static/images/qrcode.png"></image>
        <text>推广二维码</text>
      </view>
      <view class="tool-item" bindtap="copyLink">
        <image class="tool-icon" src="/static/images/link.png"></image>
        <text>复制链接</text>
      </view>
      <view class="tool-item" bindtap="navigateToRules">
        <image class="tool-icon" src="/static/images/rules.png"></image>
        <text>分销规则</text>
      </view>
    </view>
  </view>

  <!-- 等级说明 -->
  <view class="level-panel">
    <view class="panel-header">
      <text class="title">等级说明</text>
      <view class="more" bindtap="showLevelDetail">
        <text>查看详情</text>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    <view class="level-list">
      <view class="level-item {{userInfo.level === item.name ? 'current' : ''}}" 
            wx:for="{{levelList}}" 
            wx:key="name">
        <view class="level-name">
          <text class="name">{{item.name}}</text>
          <text class="tag" wx:if="{{userInfo.level === item.name}}">当前</text>
        </view>
        <view class="level-info">
          <text>佣金比例{{item.commission}}%</text>
          <text class="divider">|</text>
          <text>团队佣金{{item.teamCommission}}%</text>
        </view>
        <view class="requirement">
          升级条件：月销售额≥{{item.requirement}}元
        </view>
      </view>
    </view>
  </view>
</view>