美化了样式
This commit is contained in:
@ -1,97 +1,127 @@
|
||||
<view class="flex-col page">
|
||||
<!-- pages/dashboardModule/ranking/ranking.wxml（按你的实际路径命名） -->
|
||||
<view class="page">
|
||||
<!-- 页面标题 -->
|
||||
<text class="self-center text">{{ showRole }}绩效排名</text>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="flex-col self-stretch mt-27">
|
||||
<view class="flex-col section">
|
||||
|
||||
<!-- 主管名称 -->
|
||||
<text class="self-start font text_2">{{ showRole }}名称</text>
|
||||
<view class="flex-col justify-start items-start self-start text-wrapper">
|
||||
<input class="text_3 font text_4" placeholder="请输入{{ showRole }}名称" bindinput="onNameInput"/>
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<text class="self-start font text_5">手机号</text>
|
||||
<view class="flex-col justify-start items-start self-start text-wrapper_1">
|
||||
<input class="text_3 font text_6" placeholder="请输入手机号" bindinput="onPhoneInput"
|
||||
maxLength="11" type="number"/>
|
||||
</view>
|
||||
|
||||
<!-- 排序条件选择 -->
|
||||
<text class="self-start font text_7">排序条件</text>
|
||||
<view class="flex-row equal-division">
|
||||
<view class="flex-row justify-between section_2 section_1">
|
||||
<picker wx:if="{{ role === 'manager' }}" mode="selector" range="{{sortFieldsByManager}}" bindchange="onSortFieldChange">
|
||||
<view class="flex-row justify-between section_2">
|
||||
<text class="font text_1">{{selectedSortField}}</text>
|
||||
<image class="image" src="./images/bottom.png"/>
|
||||
</view>
|
||||
</picker>
|
||||
<picker mode="selector" wx:if="{{ role === 'supervisor' || role === 'staff'}}" range="{{sortFieldsBySupervisor}}" bindchange="onSortFieldChange">
|
||||
<view class="flex-row justify-between section_2">
|
||||
<text class="font text_1">{{selectedSortField}}</text>
|
||||
<image class="image" src="./images/bottom.png"/>
|
||||
</view>
|
||||
</picker>
|
||||
<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 class="flex-row justify-between section_2 section_3 ml-16">
|
||||
<picker mode="selector" range="{{sortOrders}}" bindchange="onSortOrderChange">
|
||||
<view class="flex-row justify-between section_2">
|
||||
<text class="font text_16">{{selectedSortOrder}}</text>
|
||||
<image class="image" src="./images/bottom.png"/>
|
||||
</view>
|
||||
</picker>
|
||||
</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="flex-col justify-start items-center self-stretch text-wrapper_2" bindtap="onSearch">
|
||||
<text class="font text_8" >搜索</text>
|
||||
</view>
|
||||
<view class="btn btn-primary" bindtap="onSearch">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 查询结果展示 -->
|
||||
<view class="flex-col mt-26">
|
||||
<view class="flex-col list-item mt-19" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index">
|
||||
<!-- 排名 -->
|
||||
<view class="flex-row">
|
||||
<view class="flex-col justify-start items-center text-wrapper_4">
|
||||
<text class="font_2 text_9">{{index + 1}}</text>
|
||||
<!-- 结果列表 -->
|
||||
<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>
|
||||
<!-- 主管信息 -->
|
||||
<view class="flex-row items-center self-start group ml-20">
|
||||
<text class="font_3">{{item.nickName}}</text>
|
||||
<text class="font_4 ml-7">{{item.phoneNumber}}</text>
|
||||
|
||||
<!-- 指标 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 class="flex-row mt-14">
|
||||
<view class="flex-col justify-start items-center text-wrapper_5" wx:if="{{k === '1'}}">
|
||||
<text class="font_5 text_11">员工：{{item.empCount}}</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_6">
|
||||
<text class="font_5 text_12">推广：{{item.promoCount}}</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_7 ml-8">
|
||||
<text class="font_5">下单：{{item.orderCount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单金额 -->
|
||||
<view class="flex-row mt-14">
|
||||
<view class="flex-col justify-start text-wrapper_8">
|
||||
<text class="font_5 text_13">总额：￥{{item.totalAmount}}</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start text-wrapper_9 ml-16">
|
||||
<text class="font_5 text_14">净成交：￥{{item.netAmount}}</text>
|
||||
</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>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user