Files
Neo-ZQYY/apps/miniprogram - 副本/miniprogram/pages/customer-detail/customer-detail.wxml

216 lines
8.2 KiB
Plaintext

<!-- 加载态 -->
<view class="page-loading" wx:if="{{pageState === 'loading'}}">
<t-loading theme="circular" size="80rpx" text="加载中..." />
</view>
<!-- 空态 -->
<view class="page-empty" wx:elif="{{pageState === 'empty'}}">
<t-icon name="info-circle" size="120rpx" color="#c5c5c5" />
<text class="empty-text">未找到客户信息</text>
</view>
<!-- 正常态 -->
<block wx:elif="{{pageState === 'normal'}}">
<!-- Banner 区域 -->
<view class="banner-area">
<view class="banner-bg"></view>
<view class="banner-overlay">
<!-- 导航栏 -->
<view class="banner-nav">
<view class="nav-back" bindtap="onBack">
<t-icon name="chevron-left" size="48rpx" color="#ffffff" />
</view>
<text class="nav-title">客户详情</text>
<view class="nav-placeholder"></view>
</view>
<!-- 客户基本信息 -->
<view class="customer-header">
<view class="avatar-box">
<text class="avatar-text">{{detail.name[0] || '?'}}</text>
</view>
<view class="info-right">
<view class="name-row">
<text class="customer-name">{{detail.name}}</text>
<t-tag wx:for="{{detail.tags}}" wx:key="*this"
variant="light" size="small" theme="warning"
class="customer-tag">{{item}}</t-tag>
</view>
<view class="sub-info">
<text class="phone">{{detail.phone}}</text>
<text class="member-id">VIP20231215</text>
</view>
</view>
</view>
<!-- Banner 统计指标 -->
<view class="banner-stats">
<view class="stat-item stat-border">
<text class="stat-value stat-green">{{bannerStats.balance}}</text>
<text class="stat-label">储值余额</text>
</view>
<view class="stat-item stat-border">
<text class="stat-value">{{bannerStats.spend60d}}</text>
<text class="stat-label">60天消费</text>
</view>
<view class="stat-item stat-border">
<text class="stat-value">{{bannerStats.idealInterval}}</text>
<text class="stat-label">理想间隔</text>
</view>
<view class="stat-item">
<text class="stat-value stat-amber">{{bannerStats.daysSinceVisit}}</text>
<text class="stat-label">距今到店</text>
</view>
</view>
</view>
</view>
<!-- 主体内容 -->
<view class="main-content">
<!-- AI 智能洞察 -->
<view class="ai-insight-card">
<view class="ai-insight-header">
<text class="ai-icon-emoji">🤖</text>
<text class="ai-insight-label">AI 智能洞察</text>
</view>
<text class="ai-insight-summary">{{aiInsight.summary}}</text>
<view class="ai-strategy-box">
<text class="strategy-title">📋 当前推荐策略</text>
<view class="strategy-list">
<view class="strategy-item" wx:for="{{aiInsight.strategies}}" wx:key="index">
<view class="strategy-dot dot-{{item.color}}"></view>
<text class="strategy-text">{{item.text}}</text>
</view>
</view>
</view>
</view>
<!-- 维客线索 -->
<view class="card">
<view class="card-header">
<text class="section-title title-green">维客线索</text>
<view class="ai-badge-box">
<text class="ai-badge-emoji">🤖</text>
<text class="ai-badge-text">AI智能洞察</text>
</view>
</view>
<view class="clue-list">
<view class="clue-item {{item.detail ? 'clue-with-detail' : ''}}" wx:for="{{clues}}" wx:key="index">
<view class="clue-main">
<view class="clue-category clue-cat-{{item.categoryColor}}">
<text>{{item.category}}</text>
</view>
<view class="clue-content">
<text class="clue-text">{{item.text}}</text>
<text class="clue-source">By:{{item.source}}</text>
</view>
</view>
<text class="clue-detail" wx:if="{{item.detail}}">{{item.detail}}</text>
</view>
</view>
</view>
<!-- 助教任务 -->
<view class="card">
<view class="card-header">
<text class="section-title title-blue">助教任务</text>
<text class="header-hint">当前进行中</text>
</view>
<view class="coach-task-list">
<view class="coach-task-card {{item.bgClass}}" wx:for="{{coachTasks}}" wx:key="index">
<view class="coach-task-top">
<view class="coach-name-row">
<text class="coach-name">{{item.name}}</text>
<text class="coach-level level-{{item.levelColor}}">{{item.level}}</text>
</view>
<text class="coach-task-type type-{{item.taskColor}}">{{item.taskType}}</text>
</view>
<text class="coach-last-service">上次服务:{{item.lastService}}</text>
<view class="coach-metrics">
<view class="coach-metric" wx:for="{{item.metrics}}" wx:for-item="m" wx:key="label">
<text class="metric-label">{{m.label}}</text>
<text class="metric-value {{m.color ? 'text-' + m.color : ''}}">{{m.value}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 最喜欢的助教 -->
<view class="card">
<view class="card-header">
<text class="section-title title-pink">最喜欢的助教</text>
<text class="header-hint">近60天</text>
</view>
<view class="fav-coach-list">
<view class="fav-coach-card {{item.bgClass}}" wx:for="{{favoriteCoaches}}" wx:key="index">
<view class="fav-coach-top">
<view class="fav-coach-name">
<text class="fav-emoji">{{item.emoji}}</text>
<text class="fav-name">{{item.name}}</text>
</view>
<view class="fav-index">
<text class="fav-index-label">关系指数</text>
<text class="fav-index-value text-{{item.indexColor}}">{{item.relationIndex}}</text>
</view>
</view>
<text class="fav-period">近60天</text>
<view class="fav-stats">
<view class="fav-stat" wx:for="{{item.stats}}" wx:for-item="s" wx:key="label">
<text class="fav-stat-label">{{s.label}}</text>
<text class="fav-stat-value {{s.color ? 'text-' + s.color : ''}}">{{s.value}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 消费记录 -->
<view class="card">
<view class="card-header" bindtap="onViewServiceRecords">
<text class="section-title title-orange">消费记录</text>
<t-icon name="chevron-right" size="40rpx" color="#a6a6a6" />
</view>
<view class="record-list" wx:if="{{sortedRecords.length > 0}}">
<view class="record-item" wx:for="{{sortedRecords}}" wx:key="id">
<view class="record-header">
<view class="record-project">
<view class="record-dot"></view>
<text class="record-project-name">{{item.project}}</text>
</view>
<text class="record-date">{{item.date}}</text>
</view>
<view class="record-body">
<view class="record-info">
<text class="record-coach" wx:if="{{item.coachName !== '-'}}">助教:{{item.coachName}}</text>
<text class="record-duration" wx:if="{{item.duration > 0}}">{{item.duration}}分钟</text>
</view>
<text class="record-amount">¥{{item.amount}}</text>
</view>
</view>
</view>
<view class="record-empty" wx:else>
<t-icon name="info-circle" size="80rpx" color="#dcdcdc" />
<text class="empty-hint">暂无消费记录</text>
</view>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-bar safe-area-bottom">
<view class="btn-chat" bindtap="onStartChat">
<t-icon name="chat" size="40rpx" color="#ffffff" />
<text>问问助手</text>
</view>
<view class="btn-note" bindtap="onAddNote">
<t-icon name="edit-1" size="40rpx" color="#242424" />
<text>备注</text>
</view>
</view>
<!-- AI 悬浮按钮 -->
<ai-float-button bottom="{{200}}" customerId="{{detail.id}}" />
</block>
<dev-fab />