412 lines
16 KiB
TypeScript
412 lines
16 KiB
TypeScript
import { mockTaskDetails } from '../../utils/mock-data'
|
||
import type { TaskDetail, Note } from '../../utils/mock-data'
|
||
import { sortByTimestamp } from '../../utils/sort'
|
||
import { formatRelativeTime } from '../../utils/time'
|
||
import { formatMoney } from '../../utils/money'
|
||
|
||
/** 维客线索项 */
|
||
interface RetentionClue {
|
||
tag: string
|
||
tagColor: 'primary' | 'success' | 'purple' | 'error'
|
||
emoji: string
|
||
text: string
|
||
source: string
|
||
desc?: string
|
||
expanded?: boolean
|
||
}
|
||
|
||
/** 服务记录项 */
|
||
interface ServiceRecord {
|
||
table: string
|
||
type: string
|
||
typeClass: 'basic' | 'vip' | 'tip' | 'recharge' | 'incentive'
|
||
/** 卡片类型：course=普通课，recharge=充值提成 */
|
||
recordType?: 'course' | 'recharge'
|
||
duration: number // 折算后课时（小时，number）
|
||
durationRaw?: number // 折算前课时（小时，number，可选）
|
||
income: number // 收入（元，整数）
|
||
/** 是否预估金额 */
|
||
isEstimate?: boolean
|
||
drinks: string
|
||
date: string
|
||
}
|
||
|
||
/** 服务汇总 */
|
||
interface ServiceSummary {
|
||
totalHours: number
|
||
totalIncome: number
|
||
avgIncome: number
|
||
}
|
||
|
||
/**
|
||
* 将 ISO/空格分隔的日期字符串格式化为中文短格式
|
||
* "2026-02-07T21:30" → "2月7日 21:30"
|
||
* 与 customer-service-records 页面拼接方式保持一致
|
||
*/
|
||
function formatServiceDate(dateStr: string): string {
|
||
if (!dateStr) return dateStr
|
||
// 兼容 "2026-02-07T21:30" 和 "2026-02-07 21:30"
|
||
const normalized = dateStr.replace('T', ' ')
|
||
const [datePart, timePart] = normalized.split(' ')
|
||
if (!datePart) return dateStr
|
||
const parts = datePart.split('-')
|
||
if (parts.length < 3) return dateStr
|
||
const month = parseInt(parts[1], 10)
|
||
const day = parseInt(parts[2], 10)
|
||
return timePart ? `${month}月${day}日 ${timePart}` : `${month}月${day}日`
|
||
}
|
||
|
||
Page({
|
||
data: {
|
||
pageState: 'loading' as 'loading' | 'empty' | 'normal' | 'error',
|
||
detail: null as TaskDetail | null,
|
||
sortedNotes: [] as Note[],
|
||
noteModalVisible: false,
|
||
|
||
// --- 维客线索 ---
|
||
retentionClues: [
|
||
{ tag: '客户\n基础', tagColor: 'primary', emoji: '🎂', text: '生日 3月15日 · VIP会员 · 注册2年', source: 'By:系统', expanded: false },
|
||
{ tag: '消费\n习惯', tagColor: 'success', emoji: '🌙', text: '常来夜场 · 月均4-5次', source: 'By:系统', expanded: false },
|
||
{ tag: '消费\n习惯', tagColor: 'success', emoji: '💰', text: '高客单价', source: 'By:系统', desc: '近60天场均消费 ¥420，高于门店均值 ¥180；偏好夜场时段，酒水附加消费占比 35%', expanded: false },
|
||
{ tag: '玩法\n偏好', tagColor: 'purple', emoji: '🎱', text: '偏爱中式八球 · 斯诺克进阶中 · 最近对花式九球也有兴趣偏爱中式八球 · 斯诺克进阶中 · 最近对花式九球也有兴趣', source: 'By:系统', desc: '中式八球占比 60%，斯诺克 30%；近2周开始尝试花式九球，技术水平中等偏上', expanded: false },
|
||
{ tag: '重要\n反馈', tagColor: 'error', emoji: '⚠️', text: '上次提到想练斯诺克走位', source: 'By:小燕', desc: '2月7日到店时主动提及，希望有针对性的走位训练；建议下次安排斯诺克专项课程', expanded: false },
|
||
{ tag: '社交\n偏好', tagColor: 'purple', emoji: '👥', text: '喜欢带朋友来玩 · 社交型客户', source: 'By:系统', desc: '70%的到店记录都是多人消费，经常介绍新客户；建议推荐团建套餐和会员推荐奖励', expanded: false },
|
||
{ tag: '消费\n习惯', tagColor: 'success', emoji: '🍷', text: '酒水消费占比高 · 偏好高端酒水', source: 'By:系统', desc: '每次到店必点酒水，偏好芝华士、百威等品牌；酒水消费占总消费的40%', expanded: false },
|
||
{ tag: '重要\n反馈', tagColor: 'error', emoji: '💬', text: '上次提到想办生日派对', source: 'By:Lucy', desc: '3月15日生日，想在店里办派对，预计10-15人；已记录需求，建议提前联系确认', expanded: false },
|
||
] as RetentionClue[],
|
||
|
||
// --- 话术参考 ---
|
||
talkingPoints: [
|
||
'王哥您好，好久不见！最近店里新到了几张国际标准的斯诺克球桌，知道您是斯诺克爱好者，想邀请您有空来体验一下~',
|
||
'王哥，最近忙吗？这周末我们有个老客户专属的球友交流赛，奖品还挺丰富的，您要不要来参加？',
|
||
'王哥好呀，上次您提到想练练斯诺克的走位，我最近研究了一些新的训练方法，下次来的时候可以一起试试~',
|
||
'王哥，好久没见您了，您的老位置 A12 号台一直给您留着呢！最近晚上人不多，环境特别好，随时欢迎您来~',
|
||
'王哥您好，我们这个月推出了储值会员专属的夜场优惠套餐，包含球台+酒水，性价比很高，给您留意着呢~',
|
||
] as string[],
|
||
copiedIndex: -1,
|
||
|
||
// --- 近期服务记录 ---
|
||
serviceSummary: { totalHours: 6.0, totalIncome: 510, avgIncome: 170 } as ServiceSummary,
|
||
serviceRecords: [
|
||
{ table: 'A12号台', type: '基础课', typeClass: 'basic', duration: 2.5, durationRaw: 3.0, income: 200, isEstimate: true, drinks: '🍷 百威x2 红牛x1', date: formatServiceDate('2026-02-07T21:30') },
|
||
{ table: '3号台', type: '基础课', typeClass: 'basic', duration: 2.0, durationRaw: 2.0, income: 160, isEstimate: false, drinks: '🍷 可乐x1', date: formatServiceDate('2026-02-01T20:30') },
|
||
{ table: 'VIP1号房', type: '包厢课', typeClass: 'vip', duration: 1.5, durationRaw: 1.5, income: 150, isEstimate: true, drinks: '🍷 芝华士x1 矿泉水x2', date: formatServiceDate('2026-01-28T19:00') },
|
||
{ table: '', type: '充值', typeClass: 'recharge', recordType: 'recharge', duration: 0, durationRaw: 0, income: 80, isEstimate: false, drinks: '', date: formatServiceDate('2026-01-15T10:00') },
|
||
] as ServiceRecord[],
|
||
|
||
// --- 放弃弹窗 ---
|
||
abandonModalVisible: false,
|
||
|
||
// --- 手机号显示 ---
|
||
phoneVisible: false,
|
||
|
||
// --- 储值等级 ---
|
||
storageLevel: '非常多',
|
||
|
||
// --- 关系等级相关 ---
|
||
relationLevel: 'excellent' as 'poor' | 'normal' | 'good' | 'excellent',
|
||
relationLevelText: '很好',
|
||
relationColor: '#e91e63',
|
||
|
||
// --- Banner 背景（根据任务类型动态切换）---
|
||
bannerBgSvg: '/assets/images/banner-bg-red-aurora.svg',
|
||
|
||
// --- 调试面板 ---
|
||
showDebugPanel: false,
|
||
debugTaskType: 'high_priority',
|
||
debugHeartScore: 8.5,
|
||
debugShowExpandBtn: true, // 调试：备注弹窗是否显示展开/收起按钮
|
||
|
||
// --- AI 配色 ---
|
||
aiColor: 'indigo' as 'red' | 'orange' | 'yellow' | 'blue' | 'indigo' | 'purple',
|
||
},
|
||
|
||
onLoad(options: { id?: string }) {
|
||
const id = options?.id || ''
|
||
// 随机 AI 配色
|
||
const aiColors = ['red', 'orange', 'yellow', 'blue', 'indigo', 'purple'] as const
|
||
const aiColor = aiColors[Math.floor(Math.random() * aiColors.length)]
|
||
this.setData({ aiColor })
|
||
this.loadData(id)
|
||
},
|
||
|
||
loadData(id: string) {
|
||
this.setData({ pageState: 'loading' })
|
||
setTimeout(() => {
|
||
try {
|
||
const detail = mockTaskDetails.find((t) => t.id === id) || mockTaskDetails[0]
|
||
if (!detail) {
|
||
this.setData({ pageState: 'empty' })
|
||
return
|
||
}
|
||
|
||
// 根据任务类型设置 Banner 背景
|
||
let bannerBgSvg = '/assets/images/banner-bg-red-aurora.svg'
|
||
if (detail.taskType === 'high_priority') {
|
||
bannerBgSvg = '/assets/images/banner-bg-red-aurora.svg'
|
||
} else if (detail.taskType === 'priority_recall') {
|
||
bannerBgSvg = '/assets/images/banner-bg-orange-aurora.svg'
|
||
} else if (detail.taskType === 'relationship') {
|
||
bannerBgSvg = '/assets/images/banner-bg-pink-aurora.svg'
|
||
} else if (detail.taskType === 'callback') {
|
||
bannerBgSvg = '/assets/images/banner-bg-teal-aurora.svg'
|
||
}
|
||
|
||
// 添加更多 mock 备注
|
||
const mockNotes: Note[] = [
|
||
{ id: 'note-1', content: '已通过微信联系王先生，表示对新到的斯诺克球桌感兴趣，周末可能来体验。', tagType: 'customer', tagLabel: '客户：王先生', createdAt: '2026-03-10T16:30', score: 10 },
|
||
{ id: 'note-2', content: '王先生最近出差较多，到店频率降低。建议等他回来后再约。', tagType: 'customer', tagLabel: '客户：王先生', createdAt: '2026-03-05T14:20', score: 7.5 },
|
||
{ id: 'note-3', content: '上次到店时推荐了会员续费活动，客户说考虑一下。', tagType: 'customer', tagLabel: '客户：王先生', createdAt: '2026-02-28T18:45', score: 6 },
|
||
{ id: 'note-4', content: '客户对今天的服务非常满意，特别提到小燕的教学很专业。', tagType: 'customer', tagLabel: '客户：王先生', createdAt: '2026-02-20T21:15', score: 9.5 },
|
||
{ id: 'note-5', content: '完成高优先召回任务。客户反馈最近工作太忙，这周末会来店里。', tagType: 'customer', tagLabel: '客户：王先生', createdAt: '2026-02-15T10:30', score: 8 },
|
||
]
|
||
|
||
// 附加 timeLabel 字段
|
||
const notesWithLabel = mockNotes.map((n) => ({
|
||
...n,
|
||
timeLabel: formatRelativeTime(n.createdAt),
|
||
}))
|
||
const sorted = sortByTimestamp(notesWithLabel) as (Note & { timeLabel: string })[]
|
||
this.updateRelationshipDisplay(detail.heartScore)
|
||
this.setData({
|
||
pageState: 'normal',
|
||
detail,
|
||
sortedNotes: sorted,
|
||
debugHeartScore: detail.heartScore,
|
||
bannerBgSvg,
|
||
})
|
||
} catch (_e) {
|
||
this.setData({ pageState: 'error' })
|
||
}
|
||
}, 500)
|
||
},
|
||
|
||
/** 更新关系等级显示 */
|
||
updateRelationshipDisplay(score: number) {
|
||
let level: 'poor' | 'normal' | 'good' | 'excellent' = 'poor'
|
||
let text = '待发展'
|
||
let color = '#64748b' // 蓝灰色，区别于蓝色爱心
|
||
|
||
if (score > 8.5) {
|
||
level = 'excellent'
|
||
text = '很好'
|
||
color = '#e91e63' // 深粉色，区别于粉红爱心
|
||
} else if (score >= 6) {
|
||
level = 'good'
|
||
text = '良好'
|
||
color = '#ea580c' // 深橙色，区别于橙色爱心
|
||
} else if (score >= 3.5) {
|
||
level = 'normal'
|
||
text = '一般'
|
||
color = '#eab308' // 金黄色，区别于黄色爱心
|
||
}
|
||
|
||
this.setData({
|
||
relationLevel: level,
|
||
relationLevelText: text,
|
||
relationColor: color,
|
||
})
|
||
},
|
||
|
||
/** 返回 */
|
||
onBack() {
|
||
wx.navigateBack()
|
||
},
|
||
|
||
/** 重试 */
|
||
onRetry() {
|
||
const id = this.data.detail?.id || ''
|
||
this.loadData(id)
|
||
},
|
||
|
||
/** 查看/隐藏手机号 */
|
||
onTogglePhone() {
|
||
this.setData({ phoneVisible: !this.data.phoneVisible })
|
||
},
|
||
|
||
/** 复制手机号 */
|
||
onCopyPhone() {
|
||
const phone = '13812345678'
|
||
wx.setClipboardData({
|
||
data: phone,
|
||
success: () => {
|
||
wx.showToast({ title: '手机号码已复制', icon: 'none' })
|
||
},
|
||
})
|
||
},
|
||
|
||
/** 展开/收起维客线索描述 */
|
||
onToggleClue(e: WechatMiniprogram.BaseEvent) {
|
||
const idx = e.currentTarget.dataset.index as number
|
||
const key = `retentionClues[${idx}].expanded`
|
||
const current = this.data.retentionClues[idx]?.expanded || false
|
||
this.setData({ [key]: !current })
|
||
},
|
||
|
||
/** 复制话术 */
|
||
onCopySpeech(e: WechatMiniprogram.BaseEvent) {
|
||
const idx = e.currentTarget.dataset.index as number
|
||
const text = this.data.talkingPoints[idx]
|
||
if (!text) return
|
||
wx.setClipboardData({
|
||
data: text,
|
||
success: () => {
|
||
this.setData({ copiedIndex: idx })
|
||
setTimeout(() => this.setData({ copiedIndex: -1 }), 2000)
|
||
},
|
||
})
|
||
},
|
||
|
||
/** 打开备注弹窗 */
|
||
onAddNote() {
|
||
this.setData({ noteModalVisible: true })
|
||
},
|
||
|
||
/** 备注弹窗确认 */
|
||
onNoteConfirm(e: WechatMiniprogram.CustomEvent) {
|
||
const { content } = e.detail
|
||
wx.showToast({ title: '备注已保存', icon: 'success' })
|
||
this.setData({ noteModalVisible: false })
|
||
const newNote: Note = {
|
||
id: `note-${Date.now()}`,
|
||
content,
|
||
tagType: 'customer',
|
||
tagLabel: `客户：${this.data.detail?.customerName || ''}`,
|
||
createdAt: new Date().toLocaleString('zh-CN', { hour12: false }),
|
||
}
|
||
this.setData({ sortedNotes: [newNote, ...this.data.sortedNotes] })
|
||
},
|
||
|
||
/** 备注弹窗取消 */
|
||
onNoteCancel() {
|
||
this.setData({ noteModalVisible: false })
|
||
},
|
||
|
||
/** 删除备注 */
|
||
onDeleteNote(e: WechatMiniprogram.BaseEvent) {
|
||
const noteId = e.currentTarget.dataset.id as string
|
||
wx.showModal({
|
||
title: '删除备注',
|
||
content: '确定要删除这条备注吗？删除后无法恢复。',
|
||
confirmColor: '#e34d59',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const notes = this.data.sortedNotes.filter((n) => n.id !== noteId)
|
||
this.setData({ sortedNotes: notes })
|
||
wx.showToast({ title: '已删除', icon: 'success' })
|
||
}
|
||
},
|
||
})
|
||
},
|
||
|
||
/** 放弃/取消放弃 */
|
||
onAbandon() {
|
||
// 如果已放弃，直接取消放弃（不需要二次确认）
|
||
if (this.data.detail?.status === 'abandoned') {
|
||
this.cancelAbandon()
|
||
return
|
||
}
|
||
// 否则打开放弃弹窗
|
||
this.setData({ abandonModalVisible: true })
|
||
},
|
||
|
||
/** 取消放弃 - 直接修改状态 */
|
||
cancelAbandon() {
|
||
wx.showLoading({ title: '处理中...' })
|
||
setTimeout(() => {
|
||
wx.hideLoading()
|
||
// 更新状态为 pending
|
||
this.setData({ 'detail.status': 'pending' })
|
||
wx.showToast({ title: '已取消放弃', icon: 'success' })
|
||
}, 500)
|
||
},
|
||
|
||
/** 放弃 — 确认 */
|
||
onAbandonConfirm(_e: WechatMiniprogram.CustomEvent<{ reason: string }>) {
|
||
this.setData({ abandonModalVisible: false })
|
||
wx.showLoading({ title: '处理中...' })
|
||
setTimeout(() => {
|
||
wx.hideLoading()
|
||
// 更新状态为 abandoned
|
||
this.setData({ 'detail.status': 'abandoned' })
|
||
wx.showToast({ title: '已放弃该客户的维护', icon: 'none' })
|
||
}, 500)
|
||
},
|
||
|
||
/** 放弃 — 取消 */
|
||
onAbandonCancel() {
|
||
this.setData({ abandonModalVisible: false })
|
||
},
|
||
|
||
/** 问问助手 */
|
||
onAskAssistant() {
|
||
const customerId = this.data.detail?.id || ''
|
||
wx.navigateTo({
|
||
url: `/pages/chat/chat?customerId=${customerId}`,
|
||
fail: () => wx.showToast({ title: '页面跳转失败', icon: 'none' }),
|
||
})
|
||
},
|
||
|
||
/** 查看全部服务记录 */
|
||
onViewAllRecords() {
|
||
const customerId = this.data.detail?.id || ''
|
||
wx.navigateTo({
|
||
url: `/pages/customer-service-records/customer-service-records?customerId=${customerId}`,
|
||
fail: () => wx.showToast({ title: '页面跳转失败', icon: 'none' }),
|
||
})
|
||
},
|
||
|
||
/** noop — 阻止弹窗背景点击冒泡 */
|
||
noop() {},
|
||
|
||
/** 切换调试面板 */
|
||
toggleDebugPanel() {
|
||
this.setData({ showDebugPanel: !this.data.showDebugPanel })
|
||
},
|
||
|
||
/** 调试 - 切换任务类型 */
|
||
onDebugTaskType(e: WechatMiniprogram.BaseEvent) {
|
||
const type = e.currentTarget.dataset.type as string
|
||
const typeMap: Record<string, string> = {
|
||
high_priority: '高优先召回',
|
||
priority_recall: '优先召回',
|
||
relationship: '关系构建',
|
||
callback: '客户回访',
|
||
}
|
||
|
||
// 根据任务类型设置 Banner 背景
|
||
let bannerBgSvg = '/assets/images/banner-bg-red-aurora.svg'
|
||
if (type === 'high_priority') {
|
||
bannerBgSvg = '/assets/images/banner-bg-red-aurora.svg'
|
||
} else if (type === 'priority_recall') {
|
||
bannerBgSvg = '/assets/images/banner-bg-orange-aurora.svg'
|
||
} else if (type === 'relationship') {
|
||
bannerBgSvg = '/assets/images/banner-bg-pink-aurora.svg'
|
||
} else if (type === 'callback') {
|
||
bannerBgSvg = '/assets/images/banner-bg-teal-aurora.svg'
|
||
}
|
||
|
||
this.setData({
|
||
debugTaskType: type,
|
||
'detail.taskTypeLabel': typeMap[type] || '高优先召回',
|
||
bannerBgSvg,
|
||
})
|
||
},
|
||
|
||
/** 调试 - 调整关系数值 */
|
||
onDebugHeartScore(e: WechatMiniprogram.SliderChange) {
|
||
const score = e.detail.value
|
||
this.setData({
|
||
debugHeartScore: score,
|
||
'detail.heartScore': score,
|
||
})
|
||
this.updateRelationshipDisplay(score)
|
||
},
|
||
|
||
/** 调试 - 切换备注弹窗展开按钮 */
|
||
onDebugToggleExpandBtn(e: WechatMiniprogram.BaseEvent) {
|
||
const value = e.currentTarget.dataset.value as boolean
|
||
this.setData({ debugShowExpandBtn: value })
|
||
},
|
||
})
|