295 lines
11 KiB
Plaintext
295 lines
11 KiB
Plaintext
<!-- pages/performance/performance.wxml — 业绩总览 -->
|
||
|
||
<!-- 加载态（toast 浮层，不白屏） -->
|
||
<view class="g-toast-loading" wx:if="{{pageState === 'loading'}}">
|
||
<view class="g-toast-loading-inner">
|
||
<t-loading theme="circular" size="40rpx" />
|
||
<text class="g-toast-loading-text">加载中...</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空数据态 -->
|
||
<view class="page-empty" wx:elif="{{pageState === 'empty'}}">
|
||
<t-icon name="chart-bar" size="40px" color="#dcdcdc" />
|
||
<text class="empty-text">暂无业绩数据</text>
|
||
</view>
|
||
|
||
<!-- 错误态 -->
|
||
<view class="page-error" wx:elif="{{pageState === 'error'}}">
|
||
<t-icon name="close-circle" size="40px" color="#e34d59" />
|
||
<text class="error-text">加载失败，请点击重试</text>
|
||
<view class="retry-btn" hover-class="retry-btn--hover" bindtap="onRetry">
|
||
<text>重试</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 正常态 -->
|
||
<block wx:else>
|
||
<!-- Banner 区域 — SVG 做渐变底图 -->
|
||
<view class="banner-section">
|
||
<image class="banner-bg-img" src="/assets/images/banner-bg-blue-light-aurora.svg" mode="widthFix" />
|
||
<view class="banner-content">
|
||
|
||
|
||
<!-- 个人信息 -->
|
||
<view class="coach-info">
|
||
<view class="coach-avatar">
|
||
<image src="/assets/images/avatar-coach.png" class="avatar-img" mode="aspectFill" />
|
||
</view>
|
||
<view class="coach-meta">
|
||
<view class="coach-name-row">
|
||
<text class="coach-name">{{coachName}}</text>
|
||
<text class="coach-role-tag">{{coachRole}}</text>
|
||
</view>
|
||
<text class="coach-store">{{storeName}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 核心收入数据 -->
|
||
<view class="income-overview">
|
||
<view class="income-card">
|
||
<text class="income-label">本月预计收入</text>
|
||
<text class="income-value">{{monthlyIncome}}</text>
|
||
</view>
|
||
<view class="income-card">
|
||
<text class="income-label">上月收入</text>
|
||
<text class="income-value income-highlight">{{lastMonthIncome}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 收入情况 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<view class="title-dot dot-primary"></view>
|
||
<text>收入情况</text>
|
||
</view>
|
||
|
||
<!-- 当前档位 -->
|
||
<view class="tier-card tier-current">
|
||
<view class="tier-badge badge-current">当前档位</view>
|
||
<view class="tier-row">
|
||
<view class="tier-icon-label">
|
||
<text class="tier-emoji">📊</text>
|
||
<text class="tier-label tier-label-green">当前档位</text>
|
||
</view>
|
||
<view class="tier-rates">
|
||
<view class="rate-item">
|
||
<view class="rate-value-row">
|
||
<text class="rate-value rate-green">{{currentTier.basicRate}}</text>
|
||
<text class="rate-unit rate-green-light">元/h</text>
|
||
</view>
|
||
<text class="rate-desc rate-green-light">基础课到手</text>
|
||
</view>
|
||
<view class="rate-divider"></view>
|
||
<view class="rate-item">
|
||
<view class="rate-value-row">
|
||
<text class="rate-value rate-green">{{currentTier.incentiveRate}}</text>
|
||
<text class="rate-unit rate-green-light">元/h</text>
|
||
</view>
|
||
<text class="rate-desc rate-green-light">激励课到手</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下一阶段 -->
|
||
<view class="tier-card tier-next">
|
||
<view class="tier-badge badge-next">下一阶段</view>
|
||
<view class="tier-row">
|
||
<view class="tier-icon-label">
|
||
<text class="tier-emoji">🎯</text>
|
||
<text class="tier-label tier-label-yellow">下一阶段</text>
|
||
</view>
|
||
<view class="tier-rates">
|
||
<view class="rate-item">
|
||
<view class="rate-value-row">
|
||
<text class="rate-value rate-yellow">{{nextTier.basicRate}}</text>
|
||
<text class="rate-unit rate-yellow-light">元/h</text>
|
||
</view>
|
||
<text class="rate-desc rate-yellow-light">基础课到手</text>
|
||
</view>
|
||
<view class="rate-divider rate-divider-yellow"></view>
|
||
<view class="rate-item">
|
||
<view class="rate-value-row">
|
||
<text class="rate-value rate-yellow">{{nextTier.incentiveRate}}</text>
|
||
<text class="rate-unit rate-yellow-light">元/h</text>
|
||
</view>
|
||
<text class="rate-desc rate-yellow-light">激励课到手</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 升级提示 -->
|
||
<view class="upgrade-hint">
|
||
<view class="upgrade-left">
|
||
<text class="upgrade-emoji">⏱️</text>
|
||
<view class="upgrade-text">
|
||
<text class="upgrade-label">距离下一阶段</text>
|
||
<view class="upgrade-hours">
|
||
<text>需完成 </text>
|
||
<text class="upgrade-hours-num">{{upgradeHoursNeeded}}</text>
|
||
<text> 小时</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="upgrade-bonus">
|
||
<text class="bonus-label">到达即得</text>
|
||
<text class="bonus-value">{{upgradeBonus}}元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 本月业绩 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<view class="title-dot dot-success"></view>
|
||
<text>本月业绩 预估</text>
|
||
</view>
|
||
|
||
<view class="income-list">
|
||
<view class="income-row" wx:for="{{incomeItems}}" wx:key="label">
|
||
<view class="income-row-left">
|
||
<view class="income-icon-box">
|
||
<text>{{item.icon}}</text>
|
||
</view>
|
||
<view class="income-info">
|
||
<text class="income-item-label">{{item.label}}</text>
|
||
<text class="income-item-desc">{{item.desc}}</text>
|
||
</view>
|
||
</view>
|
||
<text class="income-item-value">{{item.value}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 合计 -->
|
||
<view class="income-total">
|
||
<text class="total-label">本月合计 预估</text>
|
||
<text class="total-value">{{monthlyTotal}}</text>
|
||
</view>
|
||
|
||
<!-- 服务记录明细 -->
|
||
<view class="service-records-section">
|
||
<view class="service-records-header">
|
||
<text class="service-records-emoji">📋</text>
|
||
<text class="service-records-title">我的服务记录明细</text>
|
||
</view>
|
||
|
||
<block wx:for="{{thisMonthRecords}}" wx:key="date" wx:if="{{thisMonthRecordsExpanded || index < visibleRecordGroups}}">
|
||
<view class="date-divider">
|
||
<text decode class="dd-date">{{item.date}} —</text>
|
||
|
||
<text decode class="dd-stats" wx:if=" {{item.totalHours}}">{{item.totalHours}} · {{item.totalIncome}} </text>
|
||
<view class="dd-line"></view>
|
||
</view>
|
||
<view class="record-item" wx:for="{{item.records}}" wx:for-item="rec" wx:key="customerName" bindtap="onRecordTap" data-customer-name="{{rec.customerName}}" data-task-id="{{rec.taskId}}">
|
||
<view class="record-avatar avatar-{{rec.avatarColor}}">
|
||
<text>{{rec.avatarChar}}</text>
|
||
</view>
|
||
<view class="record-content">
|
||
<view class="record-top">
|
||
<view class="record-name-time">
|
||
<text class="record-name">{{rec.customerName}}</text>
|
||
<text class="record-time">{{rec.timeRange}}</text>
|
||
</view>
|
||
<text class="record-hours">{{rec.hours}}</text>
|
||
</view>
|
||
<view class="record-bottom">
|
||
<view class="record-tags">
|
||
<text class="course-tag {{rec.courseTypeClass}}">{{rec.courseType}}</text>
|
||
<text class="record-location">{{rec.location}}</text>
|
||
</view>
|
||
<text class="record-income">我的预估收入 <text class="record-income-val">{{rec.income}}</text></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<view class="records-actions">
|
||
<view class="records-toggle" hover-class="toggle-btn--hover" bindtap="toggleThisMonthRecords" wx:if="{{thisMonthRecords.length > visibleRecordGroups}}">
|
||
<text>{{thisMonthRecordsExpanded ? '收起' : '展开更多'}}</text>
|
||
<t-icon name="{{thisMonthRecordsExpanded ? 'chevron-up' : 'chevron-down'}}" size="24px" />
|
||
</view>
|
||
|
||
<view class="records-view-all" hover-class="view-all--hover" bindtap="goToRecords">
|
||
<text>查看全部</text>
|
||
<t-icon name="chevron-right" size="24px" color="#0052d9" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的新客 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<view class="title-dot dot-cyan"></view>
|
||
<text>我的新客</text>
|
||
</view>
|
||
|
||
<view class="customer-list">
|
||
<view
|
||
class="customer-item"
|
||
hover-class="customer-item--hover"
|
||
wx:for="{{newCustomers}}"
|
||
wx:key="name"
|
||
wx:if="{{newCustomerExpanded ? index < 20 : index < 5}}"
|
||
data-name="{{item.name}}"
|
||
bindtap="onCustomerTap"
|
||
>
|
||
<view class="customer-avatar avatar-{{item.avatarColor}}">
|
||
<text>{{item.avatarChar}}</text>
|
||
</view>
|
||
<view class="customer-info">
|
||
<text class="customer-name">{{item.name}}</text>
|
||
<text class="customer-detail">最近服务: {{item.lastService}} · {{item.count}}次</text>
|
||
</view>
|
||
<t-icon name="chevron-right" size="24px" color="#c5c5c5" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="toggle-btn" hover-class="toggle-btn--hover" bindtap="toggleNewCustomer" wx:if="{{newCustomers.length > 5}}">
|
||
<text>{{newCustomerExpanded ? '收起 ↑' : '查看更多 ↓'}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的常客 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<view class="title-dot dot-pink"></view>
|
||
<text>我的常客</text>
|
||
</view>
|
||
|
||
<view class="customer-list">
|
||
<view
|
||
class="customer-item"
|
||
hover-class="customer-item--hover"
|
||
wx:for="{{regularCustomers}}"
|
||
wx:key="name"
|
||
wx:if="{{regularCustomerExpanded ? index < 20 : index < 5}}"
|
||
data-name="{{item.name}}"
|
||
bindtap="onCustomerTap"
|
||
>
|
||
<view class="customer-avatar avatar-{{item.avatarColor}}">
|
||
<text>{{item.avatarChar}}</text>
|
||
</view>
|
||
<view class="customer-info">
|
||
<text class="customer-name">{{item.name}}</text>
|
||
<text class="customer-detail">{{item.count}}次 · {{item.hours}}h · {{item.income}}</text>
|
||
</view>
|
||
<t-icon name="chevron-right" size="24px" color="#c5c5c5" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="toggle-btn" hover-class="toggle-btn--hover" bindtap="toggleRegularCustomer" wx:if="{{regularCustomers.length > 5}}">
|
||
<text>{{regularCustomerExpanded ? '收起 ↑' : '查看更多 ↓'}}</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- AI 悬浮按钮 -->
|
||
<ai-float-button />
|
||
|
||
<dev-fab />
|