qingcheng-xiaochengxu/pages/dashboardModule/performanceRanking/performanceRanking.wxml

<!-- pages/dashboardModule/ranking/ranking.wxml（按你的实际路径命名） -->
<view class="page">
  <!-- 页面标题 -->
  <view class="page-title">
    <text class="title">{{ showRole }}绩效排名</text>
  </view>

  <scroll-view scroll-y class="content no-scrollbar">
    <!-- 表单卡片 -->
    <view class="card form-card">
      <!-- 名称 -->
      <view class="field">
        <text class="field-label">{{ showRole }}名称</text>
        <view class="input-box">
          <input
            class="input"
            placeholder="请输入{{ showRole }}名称"
            bindinput="onNameInput"
          />
        </view>
      </view>

      <!-- 手机号 -->
      <view class="field">
        <text class="field-label">手机号</text>
        <view class="input-box">
          <input
            class="input"
            placeholder="请输入手机号"
            bindinput="onPhoneInput"
            maxlength="11"
            type="number"
          />
        </view>
      </view>

      <!-- 排序条件 -->
      <view class="field">
        <text class="field-label">排序条件</text>
        <view class="picker-row">
          <!-- 排序字段 -->
          <view class="picker-box">
            <picker wx:if="{{ role === 'manager' }}"
                    mode="selector"
                    range="{{ sortFieldsByManager }}"
                    bindchange="onSortFieldChange">
              <view class="picker-inner">
                <text class="picker-text">{{ selectedSortField }}</text>
                <image class="arrow" src="./images/bottom.png" />
              </view>
            </picker>

            <picker wx:if="{{ role === 'supervisor' || role === 'staff' }}"
                    mode="selector"
                    range="{{ sortFieldsBySupervisor }}"
                    bindchange="onSortFieldChange">
              <view class="picker-inner">
                <text class="picker-text">{{ selectedSortField }}</text>
                <image class="arrow" src="./images/bottom.png" />
              </view>
            </picker>
          </view>

          <!-- 排序顺序 -->
          <view class="picker-box">
            <picker mode="selector"
                    range="{{ sortOrders }}"
                    bindchange="onSortOrderChange">
              <view class="picker-inner">
                <text class="picker-text">{{ selectedSortOrder }}</text>
                <image class="arrow" src="./images/bottom.png" />
              </view>
            </picker>
          </view>
        </view>
      </view>

      <!-- 搜索按钮 -->
      <view class="btn btn-primary" bindtap="onSearch">搜索</view>
    </view>

    <!-- 结果列表 -->
    <view class="result-wrap">
      <view class="card item-card"
            wx:for="{{ items }}"
            wx:for-item="item"
            wx:for-index="index"
            wx:key="index">

        <!-- 头部：排名 + 基本信息 -->
        <view class="item-head">
          <view class="rank-badge {{ index < 3 ? 'rank-top' : '' }}">
            <text class="rank-text">{{ index + 1 }}</text>
          </view>

          <view class="person-line">
            <text class="name">{{ item.nickName }}</text>
            <text class="phone">{{ item.phoneNumber }}</text>
          </view>
        </view>

        <!-- 指标 chips -->
        <view class="chips">
          <view wx:if="{{ k === '1' }}" class="chip">员工：{{ item.empCount }}</view>
          <view class="chip">推广：{{ item.promoCount }}</view>
          <view class="chip">下单：{{ item.orderCount }}</view>
        </view>

        <!-- 金额类键值行 -->
        <view class="kv">
          <text class="kv-key">总额</text>
          <text class="kv-val money">￥{{ item.totalAmount }}</text>
        </view>
        <view class="kv">
          <text class="kv-key">净成交</text>
          <text class="kv-val money">￥{{ item.netAmount }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view wx:if="{{ !items || !items.length }}" class="empty">
        <image class="empty-img" src="/assets/empty-list.png" mode="aspectFit" />
        <text class="empty-text">暂无数据</text>
      </view>
    </view>
  </scroll-view>
</view>