微信小程序页面迁移校验之前 P5任务处理之前
This commit is contained in:
335
docs/h5_ui/rendered/task-detail-relationship.html
Normal file
335
docs/h5_ui/rendered/task-detail-relationship.html
Normal file
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务详情 - 关系构建</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="../css/banner.css" rel="stylesheet">
|
||||
<link href="../css/task-detail.css" rel="stylesheet">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-pink texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">任务详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">陈</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">陈先生</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">关系构建</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>137****8899</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13788998899';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
<span>💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">一般</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 维客线索 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13">维客线索</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户基础 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🆕 新客户 · 入会2个月 · 消费潜力大</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消费习惯 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">☀️ 偏好下午 14:00-18:00 · 到店2次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💎 消费潜力大</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">单次消费 ¥180，高于新客均值 ¥120；消费能力较强，有提升空间，适合推荐课程套餐</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 初学者 · 对台球感兴趣 · 技术待提升</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">尚未形成明确偏好，对各类玩法都有兴趣；技术水平初级，适合推荐入门课程和基础训练</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💬 上次课后反馈良好，想继续学习</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">2月5日基础课后表示很有收获，希望能有更多练习机会；建议安排球友交流活动帮助融入</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 text-white text-sm font-semibold rounded-xl shadow-sm">💙 待发展</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-blue-400 to-cyan-500 rounded-full" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-blue-500">0.45</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
接触次数较少，仅有 2 次服务记录。客户对您还不太熟悉，但反馈良好。建议通过专业服务和关心，逐步建立信任关系。
|
||||
</p>
|
||||
<!-- 最近服务记录 -->
|
||||
<div class="svc-section-bg">
|
||||
<p class="text-sm font-semibold text-gray-13 mb-3">📋 近期服务记录</p>
|
||||
<div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">2号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">1.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥120</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 矿泉水x2</span>
|
||||
<span class="svc-date">2026-02-05 15:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">A03号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥160</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 可乐x1 雪碧x1</span>
|
||||
<span class="svc-date">2026-01-22 16:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">6号台</span>
|
||||
<span class="svc-type incentive">激励课</span>
|
||||
<span class="svc-duration">1.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥100</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 红牛x1</span>
|
||||
<span class="svc-date">2026-01-10 14:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button onclick="window.location.href='customer-service-records.html'" class="text-xs text-primary font-medium">查看全部服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl p-4 border border-pink-100">
|
||||
<p class="text-sm text-pink-600 leading-relaxed font-medium mb-3">
|
||||
<span class="flex items-center justify-between">
|
||||
<span>💝 关系构建重点</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户消费潜力大但关系指数较低，建议重点培养：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>主动关心学习进度，提供技术指导</li>
|
||||
<li>了解其兴趣爱好，建立共同话题</li>
|
||||
<li>适时推荐适合初学者的课程套餐</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-gray-13 text-sm">💬 话术参考</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥您好，上次看您打球进步很快呀！我们这周有个初学者交流会，可以认识一些同水平的球友一起练习，您有兴趣参加吗？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥好呀，上次教您的那个发力技巧练得怎么样了？下次来的时候我再帮您看看，争取早日突破~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥，我们店里新推出了一个入门课程套餐，专门针对想快速提升的球友，性价比很高，要不要了解一下？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥您好，这周六下午有几位球友约了练习赛，水平都差不多，要不要一起来切磋切磋？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥，最近天气不错，下午来打打球放松一下吧，我帮您留个好位置~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我给TA的备注 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">我给TA的备注</h2>
|
||||
<span class="text-xs text-gray-6">暂无备注</span>
|
||||
</div>
|
||||
<div id="noteList" class="space-y-3 hidden"></div>
|
||||
<div id="noteEmpty" class="text-center py-6">
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-5">快点击下方备注按钮，添加客人备注！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-pink-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button id="noteExpandBtn" onclick="expandNoteRating()" class="note-expand-btn">展开评价 ▾</button>
|
||||
</div>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="noteRatingSection" class="hidden">
|
||||
<!-- 星星打分：再次服务意愿 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再次服务此客户</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不想</span><span></span><span>一般</span><span></span><span>非常想</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星星打分：再来店可能性 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再来店可能性</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不可能</span><span></span><span>不好说</span><span></span><span>肯定能</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-pink-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-pink-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除备注确认弹窗 -->
|
||||
<div id="deleteNoteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center px-6">
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-base font-semibold text-gray-13">删除备注</span>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 mb-5">确定要删除这条备注吗？删除后无法恢复。</p>
|
||||
<button onclick="deleteNote()" class="w-full h-12 bg-gradient-to-r from-error to-red-400 text-white font-medium rounded-xl shadow-lg shadow-error/30 text-sm">确认删除</button>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-full text-center text-sm text-gray-6 py-2 mt-2 bg-transparent border-0 cursor-pointer">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 提示 -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user