1047 lines
72 KiB
HTML
1047 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>客源详情 · Fonrey</title>
|
||
<meta name="viewport" content="width=1280">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: {
|
||
50:'#F0FDFA',100:'#CCFBF1',200:'#99F6E4',
|
||
500:'#14B8A6',600:'#0F766E',700:'#115E59',800:'#134E4A',
|
||
},
|
||
neutral: {
|
||
50:'#F8FAFC',100:'#F1F5F9',200:'#E2E8F0',300:'#CBD5E1',
|
||
400:'#94A3B8',500:'#64748B',600:'#475569',700:'#334155',
|
||
800:'#1E293B',900:'#0F172A',
|
||
},
|
||
success:{50:'#F0FDF4',600:'#16A34A'},
|
||
warning:{50:'#FFFBEB',600:'#D97706'},
|
||
danger: {50:'#FEF2F2',600:'#DC2626'},
|
||
info: {50:'#EFF6FF',600:'#2563EB'},
|
||
},
|
||
boxShadow: {
|
||
xs:'0 1px 2px rgba(15,23,42,0.04)',
|
||
},
|
||
fontFamily: {
|
||
sans:['Inter','PingFang SC','Microsoft YaHei','sans-serif'],
|
||
mono:['JetBrains Mono','SFMono-Regular','Menlo','monospace'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
<style>
|
||
body { font-family: 'Inter','PingFang SC','Microsoft YaHei',sans-serif; }
|
||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||
::-webkit-scrollbar{width:6px;height:6px}
|
||
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
|
||
::-webkit-scrollbar-thumb:hover{background:#94A3B8}
|
||
[x-cloak]{display:none!important}
|
||
</style>
|
||
</head>
|
||
<body class="bg-neutral-50 text-neutral-700 text-sm antialiased" x-data="clientDetailPage()" x-init="init()">
|
||
|
||
<!-- ============ Topbar ============ -->
|
||
<header class="fixed top-0 left-0 right-0 h-14 z-20 bg-primary-800 flex items-center justify-between">
|
||
<!-- 左区：Logo -->
|
||
<div class="flex items-center gap-2 px-4 w-60 shrink-0">
|
||
<div class="w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">F</div>
|
||
<span class="text-base font-semibold text-white">Fonrey · 房睿</span>
|
||
</div>
|
||
<!-- 中区：主导航 -->
|
||
<nav class="flex items-center gap-1 flex-1 px-2 text-sm" aria-label="主导航">
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">工作台</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">房源</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md bg-primary-600 text-white font-medium">客源</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">营销</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">交易</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">数据</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">人事</a>
|
||
<a href="#" class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">系统</a>
|
||
<!-- 全局搜索 -->
|
||
<div class="max-w-xs w-full relative ml-4">
|
||
<svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-primary-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/></svg>
|
||
<input type="text" placeholder="搜索房源 / 客户 / 楼盘 ⌘K"
|
||
class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md bg-primary-700/60 border border-transparent text-white placeholder:text-primary-300 hover:bg-primary-700 focus:bg-white focus:text-neutral-700 focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 focus:outline-none focus:placeholder:text-neutral-400">
|
||
</div>
|
||
</nav>
|
||
<!-- 右区 -->
|
||
<div class="flex items-center gap-1 px-4 shrink-0">
|
||
<button class="relative p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label="消息通知">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
|
||
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-danger-600"></span>
|
||
</button>
|
||
<div class="flex items-center gap-2 pl-3 ml-1 border-l border-primary-700">
|
||
<div class="w-7 h-7 rounded-full bg-primary-600 text-white flex items-center justify-center text-xs font-semibold">魏</div>
|
||
<span class="text-sm font-medium text-primary-100">魏深</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ 侧边栏 ============ -->
|
||
<aside class="fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white overflow-y-auto">
|
||
<nav class="p-3 space-y-0.5 text-sm">
|
||
<div class="px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">客源管理</div>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>
|
||
全部客源 <span class="ml-auto text-xs text-neutral-500 tabular-nums">3,214</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
|
||
我的私客 <span class="ml-auto text-xs text-neutral-500 tabular-nums">186</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
|
||
公客池 <span class="ml-auto text-xs text-neutral-500 tabular-nums">1,840</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/></svg>
|
||
收藏客源
|
||
</a>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
|
||
回收站
|
||
</a>
|
||
<div class="px-2 pt-4 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">视图</div>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-danger-600"></span> 今日到期
|
||
</a>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-warning-600"></span> 未跟进 7 天
|
||
</a>
|
||
<a href="#" class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-info-600"></span> 高意向客户
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- ============ 主内容区 ============ -->
|
||
<main class="ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5">
|
||
<div class="mx-auto max-w-[1600px] space-y-4">
|
||
|
||
<!-- 面包屑 + 页面头 -->
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<nav class="flex items-center gap-1 text-xs text-neutral-500 mb-1" aria-label="面包屑">
|
||
<a href="#" class="hover:text-neutral-700">客源</a>
|
||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
|
||
<a href="#" class="hover:text-neutral-700">我的私客</a>
|
||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
|
||
<span class="text-neutral-700">客源详情</span>
|
||
</nav>
|
||
<h1 class="text-xl font-semibold text-neutral-800">客源详情</h1>
|
||
<p class="text-xs text-neutral-500 mt-0.5">按 Section 连续展示，点击导航锚点快速定位</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主网格：左 8 列 + 右 4 列 -->
|
||
<div class="grid grid-cols-12 gap-6 items-start">
|
||
|
||
<!-- ======= 左侧主内容 ======= -->
|
||
<section class="col-span-8 min-w-0 space-y-6">
|
||
|
||
<!-- Section 锚点导航（sticky） -->
|
||
<div class="bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-16 z-30 shadow-xs">
|
||
<nav class="flex items-center gap-1 overflow-x-auto whitespace-nowrap" aria-label="详情分区导航">
|
||
<template x-for="item in navItems" :key="item.id">
|
||
<a :href="'#' + item.id"
|
||
@click.prevent="scrollToSection(item.id)"
|
||
:aria-current="activeSection === item.id ? 'true' : 'false'"
|
||
:class="activeSection === item.id
|
||
? 'bg-primary-50 text-primary-700 font-medium'
|
||
: 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800'"
|
||
class="px-3 py-1.5 text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40 transition-colors"
|
||
x-text="item.label"></a>
|
||
</template>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- ====== Section 1：需求信息 ====== -->
|
||
<div id="section-requirements" class="section-anchor scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">需求信息</h2>
|
||
<a href="#" class="text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">编辑</a>
|
||
</div>
|
||
<dl class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">总价</dt>
|
||
<dd class="text-sm text-neutral-900 tabular-nums">500 - 800 万</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">面积</dt>
|
||
<dd class="text-sm text-neutral-900 tabular-nums">80 - 120 m²</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">居室</dt>
|
||
<dd class="text-sm text-neutral-900">3室2厅</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">装修</dt>
|
||
<dd class="text-sm text-neutral-900">精装修</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">朝向</dt>
|
||
<dd class="text-sm text-neutral-900">南北通透</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">楼层</dt>
|
||
<dd class="text-sm text-neutral-900">中高层</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">楼龄</dt>
|
||
<dd class="text-sm text-neutral-900 tabular-nums">10 年内</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">意向商圈</dt>
|
||
<dd class="text-sm text-neutral-900">浦东·张江、浦东·碧云</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">意向小区</dt>
|
||
<dd class="text-sm text-neutral-900">碧云国际社区、金色家园</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="text-xs text-neutral-500 mb-0.5">交通情况</dt>
|
||
<dd class="text-sm text-neutral-900">地铁 2 号线附近</dd>
|
||
</div>
|
||
<div class="col-span-3">
|
||
<dt class="text-xs text-neutral-500 mb-0.5">备注</dt>
|
||
<dd class="text-sm text-neutral-900">客户全款购房，近期有出行计划，月底前必须看房。孩子就读张江实验学校，需在学区范围内。</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<!-- ====== Section 2：跟进记录 ====== -->
|
||
<div id="section-follow" class="section-anchor scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">跟进记录</h2>
|
||
<button @click="drawerOpen=true"
|
||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/></svg>
|
||
写跟进
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 类型筛选条 -->
|
||
<div class="flex items-center gap-2 flex-wrap" id="follow-section-body">
|
||
<button class="px-3 py-1 text-xs rounded-full bg-primary-600 text-white">全部</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">写入跟进</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">敏感信息跟进</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">修改跟进</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">其他跟进</button>
|
||
</div>
|
||
|
||
<!-- 日期筛选栏 -->
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs text-neutral-600">
|
||
<div class="flex items-center gap-1.5">
|
||
<label class="text-neutral-500">开始日期</label>
|
||
<input type="date" value="2026-01-01" class="px-2 py-1 text-xs rounded border border-neutral-300 focus:border-primary-600 focus:ring-1 focus:ring-primary-600/20 focus:outline-none bg-white">
|
||
</div>
|
||
<span class="text-neutral-400">–</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<label class="text-neutral-500">结束日期</label>
|
||
<input type="date" value="2026-04-25" class="px-2 py-1 text-xs rounded border border-neutral-300 focus:border-primary-600 focus:ring-1 focus:ring-primary-600/20 focus:outline-none bg-white">
|
||
</div>
|
||
<label class="flex items-center gap-1.5 cursor-pointer">
|
||
<input type="checkbox" class="rounded border-neutral-300 text-primary-600"> 有录音
|
||
</label>
|
||
<label class="flex items-center gap-1.5 cursor-pointer">
|
||
<input type="checkbox" class="rounded border-neutral-300 text-primary-600"> 有图片
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 时间线 -->
|
||
<ol id="follow-timeline-list" class="relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5">
|
||
<!-- 普通跟进记录 -->
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1.5">
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500 flex-wrap">
|
||
<span class="font-medium text-neutral-700">魏深</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-info-50 text-info-600 font-medium text-xs">电话</span>
|
||
<span>·</span>
|
||
<time class="tabular-nums">2026-04-25 14:30</time>
|
||
</div>
|
||
<p class="text-sm text-neutral-700">电话沟通，客户表示本周末有时间看房，确认看碧云国际社区 A 栋 18 楼。目前对价格较为敏感，希望能在 720 万以内成交。</p>
|
||
</div>
|
||
</li>
|
||
<!-- 敏感跟进记录 -->
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-warning-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-warning-600/20 bg-warning-50 p-3 space-y-1.5">
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500 flex-wrap">
|
||
<span class="font-medium text-neutral-700">魏深</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-warning-50 text-warning-600 font-medium text-xs border border-warning-600/30">敏感查看</span>
|
||
<span>·</span>
|
||
<time class="tabular-nums">2026-04-23 10:05</time>
|
||
</div>
|
||
<p class="text-sm text-neutral-700">查看了客户完整联系电话及证件信息，用于报备。</p>
|
||
</div>
|
||
</li>
|
||
<!-- 修改跟进 -->
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1.5">
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500 flex-wrap">
|
||
<span class="font-medium text-neutral-700">魏深</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-neutral-100 text-neutral-600 font-medium text-xs">修改跟进</span>
|
||
<span>·</span>
|
||
<time class="tabular-nums">2026-04-20 16:22</time>
|
||
</div>
|
||
<p class="text-sm text-neutral-700">更新客户预算区间，由 600-900 万调整为 500-800 万，需求面积也收窄为 80-120 m²。</p>
|
||
</div>
|
||
</li>
|
||
<!-- 普通记录 -->
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1.5">
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500 flex-wrap">
|
||
<span class="font-medium text-neutral-700">魏深</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-info-50 text-info-600 font-medium text-xs">电话</span>
|
||
<span>·</span>
|
||
<time class="tabular-nums">2026-04-15 09:10</time>
|
||
</div>
|
||
<p class="text-sm text-neutral-700">首次电话联系，客户通过门店广告找来，计划全款购置二手房用于自住，子女入学在即。</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<!-- 查看全部 -->
|
||
<div class="text-center pt-2">
|
||
<button class="text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">查看全部跟进</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== Section 3：带看记录 ====== -->
|
||
<div id="section-viewings" class="section-anchor scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">带看记录</h2>
|
||
<div class="flex items-center gap-2">
|
||
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/></svg>
|
||
新增预约
|
||
</button>
|
||
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||
新增带看
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日期筛选栏 -->
|
||
<div id="viewings-section-body" class="border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs text-neutral-600">
|
||
<div class="flex items-center gap-1.5">
|
||
<label class="text-neutral-500">开始日期</label>
|
||
<input type="date" value="2026-01-01" class="px-2 py-1 text-xs rounded border border-neutral-300 focus:border-primary-600 focus:ring-1 focus:ring-primary-600/20 focus:outline-none bg-white">
|
||
</div>
|
||
<span class="text-neutral-400">–</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<label class="text-neutral-500">结束日期</label>
|
||
<input type="date" value="2026-04-25" class="px-2 py-1 text-xs rounded border border-neutral-300 focus:border-primary-600 focus:ring-1 focus:ring-primary-600/20 focus:outline-none bg-white">
|
||
</div>
|
||
<label class="flex items-center gap-1.5 cursor-pointer">
|
||
<input type="checkbox" class="rounded border-neutral-300 text-primary-600" checked> 归属人带看
|
||
</label>
|
||
<label class="flex items-center gap-1.5 cursor-pointer">
|
||
<input type="checkbox" class="rounded border-neutral-300 text-primary-600"> 其他人带看
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 带看时间线 -->
|
||
<ol class="relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5">
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-2">
|
||
<div class="flex items-center gap-2 flex-wrap text-xs text-neutral-500">
|
||
<span class="font-medium text-neutral-700">魏深</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 font-medium">一看</span>
|
||
<span>·</span>
|
||
<time class="tabular-nums">2026-04-20 10:00</time>
|
||
</div>
|
||
<div class="text-sm text-neutral-700">
|
||
带看房源：<a href="#" class="text-primary-600 hover:underline underline-offset-2">碧云国际社区 3 室 2 厅 · 102 m² · 高层</a>
|
||
</div>
|
||
<div class="text-xs text-neutral-500">带看备注：客户对户型满意，但认为价格偏高，希望进一步洽谈。</div>
|
||
</div>
|
||
</li>
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-neutral-300 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-2">
|
||
<div class="flex items-center gap-2 flex-wrap text-xs text-neutral-500">
|
||
<span class="font-medium text-neutral-700">魏深</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-neutral-100 text-neutral-500 font-medium">预约</span>
|
||
<span>·</span>
|
||
<time class="tabular-nums">2026-04-27 14:30（预约）</time>
|
||
</div>
|
||
<div class="text-sm text-neutral-700">
|
||
预约带看：<a href="#" class="text-primary-600 hover:underline underline-offset-2">金色家园 3 室 2 厅 · 96 m² · 中层</a>
|
||
</div>
|
||
<div class="text-xs text-neutral-500">提前预约，待确认带看时间。</div>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<!-- 查看全部 -->
|
||
<div class="text-center pt-2">
|
||
<button class="text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">查看全部带看记录</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== Section 4：客源解读 ====== -->
|
||
<div id="section-insights" class="section-anchor scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">客源解读</h2>
|
||
<span class="text-xs text-neutral-500">更新于 2026-04-25 00:00</span>
|
||
</div>
|
||
<!-- 行为指标 -->
|
||
<div id="insights-section-body">
|
||
<div class="grid grid-cols-3 gap-3 mb-3">
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-white">
|
||
<div class="text-xs text-neutral-500 mb-1">活跃行为</div>
|
||
<div class="text-xl font-semibold text-neutral-900 tabular-nums">高频</div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">近 30 天 18 次操作</div>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-white">
|
||
<div class="text-xs text-neutral-500 mb-1">工作日活跃</div>
|
||
<div class="text-xl font-semibold text-neutral-900 tabular-nums">72<span class="text-sm font-normal text-neutral-500">%</span></div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">周一至周五为主</div>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-white">
|
||
<div class="text-xs text-neutral-500 mb-1">周末活跃</div>
|
||
<div class="text-xl font-semibold text-neutral-900 tabular-nums">28<span class="text-sm font-normal text-neutral-500">%</span></div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">周末看房意愿较强</div>
|
||
</div>
|
||
</div>
|
||
<!-- 偏好占比 -->
|
||
<div class="grid grid-cols-3 gap-3">
|
||
<div class="border border-neutral-200 rounded-md p-3 text-center bg-white">
|
||
<div class="text-xs text-neutral-500 mb-1">价格偏好</div>
|
||
<div class="text-2xl font-semibold text-primary-600 tabular-nums">650<span class="text-sm font-normal text-neutral-500">万</span></div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">成交倾向中位</div>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 text-center bg-white">
|
||
<div class="text-xs text-neutral-500 mb-1">户型偏好</div>
|
||
<div class="text-2xl font-semibold text-primary-600 tabular-nums">84<span class="text-sm font-normal text-neutral-500">%</span></div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">三居室优先</div>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 text-center bg-white">
|
||
<div class="text-xs text-neutral-500 mb-1">面积偏好</div>
|
||
<div class="text-2xl font-semibold text-primary-600 tabular-nums">95<span class="text-sm font-normal text-neutral-500">m²</span></div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">90-110 m² 区间集中</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== Section 5：二手配房 ====== -->
|
||
<div id="section-matches" class="section-anchor scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">二手配房</h2>
|
||
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/></svg>
|
||
批量分享
|
||
</button>
|
||
</div>
|
||
|
||
<div id="matches-section-body" class="space-y-4">
|
||
<!-- 分组：优质户型 -->
|
||
<div>
|
||
<h3 class="text-sm font-semibold text-neutral-700 mb-2">优质户型</h3>
|
||
<div class="space-y-2">
|
||
<!-- 房源卡片 1 -->
|
||
<div class="border border-neutral-200 rounded-md p-3 flex items-start gap-3 hover:bg-neutral-50 transition-colors">
|
||
<input type="checkbox" class="mt-1 rounded border-neutral-300 text-primary-600">
|
||
<div class="w-20 h-14 rounded bg-neutral-100 shrink-0 flex items-center justify-center text-neutral-300">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-start justify-between gap-2">
|
||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline underline-offset-2 leading-snug">碧云国际社区 · 3室2厅 · 18层</a>
|
||
<span class="text-sm font-medium text-neutral-900 tabular-nums shrink-0">730 万</span>
|
||
</div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">3室2厅 · 102 m² · 浦东·碧云</div>
|
||
<div class="flex items-center gap-1.5 mt-1.5 flex-wrap">
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-warning-50 text-warning-600">南北通透</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-info-50 text-info-600">私盘</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-success-50 text-success-600">在售</span>
|
||
</div>
|
||
<div class="text-xs text-neutral-500 mt-1">降价说明：<span class="font-normal text-neutral-500">较上月降 20 万</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 房源卡片 2 -->
|
||
<div class="border border-neutral-200 rounded-md p-3 flex items-start gap-3 hover:bg-neutral-50 transition-colors">
|
||
<input type="checkbox" class="mt-1 rounded border-neutral-300 text-primary-600">
|
||
<div class="w-20 h-14 rounded bg-neutral-100 shrink-0 flex items-center justify-center text-neutral-300">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-start justify-between gap-2">
|
||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline underline-offset-2 leading-snug">金色家园 · 3室2厅 · 12层</a>
|
||
<span class="text-sm font-medium text-neutral-900 tabular-nums shrink-0">695 万</span>
|
||
</div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">3室2厅 · 96 m² · 浦东·张江</div>
|
||
<div class="flex items-center gap-1.5 mt-1.5 flex-wrap">
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-warning-50 text-warning-600">朝南</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-success-50 text-success-600">在售</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分组：价格适中 -->
|
||
<div>
|
||
<h3 class="text-sm font-semibold text-neutral-700 mb-2">价格适中</h3>
|
||
<div class="space-y-2">
|
||
<div class="border border-neutral-200 rounded-md p-3 flex items-start gap-3 hover:bg-neutral-50 transition-colors">
|
||
<input type="checkbox" class="mt-1 rounded border-neutral-300 text-primary-600">
|
||
<div class="w-20 h-14 rounded bg-neutral-100 shrink-0 flex items-center justify-center text-neutral-300">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-start justify-between gap-2">
|
||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline underline-offset-2 leading-snug">张江半岛 · 3室1厅 · 8层</a>
|
||
<span class="text-sm font-medium text-neutral-900 tabular-nums shrink-0">598 万</span>
|
||
</div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">3室1厅 · 88 m² · 浦东·张江</div>
|
||
<div class="flex items-center gap-1.5 mt-1.5 flex-wrap">
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-warning-50 text-warning-600">朝东南</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-info-50 text-info-600">私盘</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-success-50 text-success-600">在售</span>
|
||
</div>
|
||
<div class="text-xs text-neutral-500 mt-1">降价说明：<span class="font-normal text-neutral-500">急售，可议价</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- ======= 右侧面板 ======= -->
|
||
<aside class="col-span-4 min-w-0 space-y-3 sticky top-16 max-h-[calc(100vh-80px)] overflow-y-auto">
|
||
|
||
<!-- 6.1 客源信息概览 -->
|
||
<div class="bg-white rounded-lg border border-neutral-200 overflow-hidden">
|
||
<!-- 顶部标识区 -->
|
||
<div class="bg-primary-600 px-4 py-3">
|
||
<div class="flex items-center justify-between gap-2">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="inline-flex items-center shrink-0 px-2 py-0.5 rounded-full text-xs font-medium bg-white/20 text-white">求购</span>
|
||
<span class="text-sm font-semibold text-white truncate">陈晓芸</span>
|
||
</div>
|
||
<div x-data="{ open: false }" @click.away="open=false" class="relative shrink-0">
|
||
<button @click="open=!open" class="p-1 rounded hover:bg-white/20 text-white">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>
|
||
</button>
|
||
<div x-show="open" x-transition class="absolute right-0 mt-1 w-36 z-40 bg-white rounded-md shadow-md border border-neutral-200 py-1 text-left">
|
||
<button class="w-full text-left px-3 py-2 text-xs text-neutral-700 hover:bg-neutral-50">打印客源</button>
|
||
<button class="w-full text-left px-3 py-2 text-xs text-neutral-700 hover:bg-neutral-50">导出 PDF</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-white/80 mt-1.5">带看进度：一看 · 跟进中</div>
|
||
</div>
|
||
|
||
<!-- 标签行 -->
|
||
<div class="px-4 py-2.5 flex items-center gap-1.5 flex-wrap border-b border-neutral-100">
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-neutral-100 text-neutral-600">私客</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-primary-50 text-primary-700">一看</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-warning-50 text-warning-600">C(一般)</span>
|
||
<a href="#" class="ml-auto text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">编辑</a>
|
||
</div>
|
||
|
||
<!-- 字段列表 -->
|
||
<div class="px-4 py-3">
|
||
<dl class="space-y-1.5">
|
||
<div class="grid grid-cols-[72px_1fr] gap-2">
|
||
<dt class="text-xs text-neutral-500">最近跟进</dt>
|
||
<dd class="text-xs text-right text-neutral-800 tabular-nums">2026-04-25</dd>
|
||
</div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2">
|
||
<dt class="text-xs text-neutral-500">客户编号</dt>
|
||
<dd class="text-xs text-right text-neutral-800 font-mono">CL-20260415-0038</dd>
|
||
</div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2">
|
||
<dt class="text-xs text-neutral-500">委托日期</dt>
|
||
<dd class="text-xs text-right text-neutral-800 tabular-nums">2026-04-15</dd>
|
||
</div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2">
|
||
<dt class="text-xs text-neutral-500">需求类型</dt>
|
||
<dd class="text-xs text-right text-neutral-800">购置自住</dd>
|
||
</div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2">
|
||
<dt class="text-xs text-neutral-500">房源用途</dt>
|
||
<dd class="text-xs text-right text-neutral-800">住宅</dd>
|
||
</div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2">
|
||
<dt class="text-xs text-neutral-500">客户来源</dt>
|
||
<dd class="text-xs text-right text-neutral-800">门店广告</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6.2 快捷操作区 -->
|
||
<div class="bg-white rounded-lg border border-neutral-200 p-3 space-y-2">
|
||
<!-- 三主按钮 -->
|
||
<div class="grid grid-cols-3 gap-2">
|
||
<button class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/></svg>
|
||
打电话
|
||
</button>
|
||
<button @click="drawerOpen=true" class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/></svg>
|
||
写跟进
|
||
</button>
|
||
<button class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"/></svg>
|
||
报备/常看
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 操作网格 -->
|
||
<div class="grid grid-cols-2 gap-1">
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/></svg>
|
||
收藏
|
||
</button>
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
||
不置顶
|
||
</button>
|
||
<button @click="modal='grade'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/></svg>
|
||
改等级
|
||
</button>
|
||
<button @click="modal='status'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
|
||
改状态
|
||
</button>
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
|
||
转公客
|
||
</button>
|
||
<button @click="modal='deal'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
||
转成交
|
||
</button>
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-danger-600 hover:bg-danger-50 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
||
转无效
|
||
</button>
|
||
<button @click="modal='edit'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Z"/></svg>
|
||
编辑客源
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6.3 联系人面板 -->
|
||
<div class="bg-white rounded-lg border border-neutral-200 p-3">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<h3 class="text-sm font-semibold text-neutral-800">联系人</h3>
|
||
<div class="flex items-center gap-2 text-xs">
|
||
<button id="phone-reveal-btn" class="text-primary-600 hover:underline underline-offset-2">查看号码</button>
|
||
<span class="text-neutral-300">|</span>
|
||
<button class="text-primary-600 hover:underline underline-offset-2">新增联系人</button>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<!-- 联系人 1 -->
|
||
<div class="flex items-start justify-between gap-2">
|
||
<div>
|
||
<div class="text-sm font-medium text-neutral-900">陈晓芸</div>
|
||
<div id="phone-1" class="text-xs text-neutral-600 tabular-nums mt-0.5">138****5678</div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">本人 · 拨打 3 次</div>
|
||
</div>
|
||
<button class="p-1.5 rounded-md hover:bg-neutral-100 text-neutral-500">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/></svg>
|
||
</button>
|
||
</div>
|
||
<!-- 联系人 2 -->
|
||
<div class="flex items-start justify-between gap-2">
|
||
<div>
|
||
<div class="text-sm font-medium text-neutral-900">陈国平（配偶）</div>
|
||
<div class="text-xs text-neutral-600 tabular-nums mt-0.5">139****9012</div>
|
||
<div class="text-xs text-neutral-500 mt-0.5">配偶 · 拨打 1 次</div>
|
||
</div>
|
||
<button class="p-1.5 rounded-md hover:bg-neutral-100 text-neutral-500">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6.4 相关员工面板 -->
|
||
<div class="bg-white rounded-lg border border-neutral-200 p-3">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<h3 class="text-sm font-semibold text-neutral-800">相关员工</h3>
|
||
<button class="text-xs text-primary-600 hover:underline underline-offset-2">编辑</button>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<div class="text-xs font-medium text-neutral-700">【首录人】</div>
|
||
<div class="text-sm text-neutral-900 mt-0.5">魏深</div>
|
||
<div class="text-xs text-neutral-500 tabular-nums mt-0.5">参与自 2026-04-15</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-medium text-neutral-700">【带看人】</div>
|
||
<div class="text-sm text-neutral-900 mt-0.5">魏深</div>
|
||
<div class="text-xs text-neutral-500 tabular-nums mt-0.5">参与自 2026-04-20</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- ============ Drawer：写跟进 ============ -->
|
||
<!-- 遮罩 -->
|
||
<div x-show="drawerOpen" x-transition.opacity
|
||
class="fixed inset-0 z-50 bg-neutral-900/40"
|
||
@click="drawerOpen=false" x-cloak></div>
|
||
|
||
<!-- 抽屉面板 -->
|
||
<div x-show="drawerOpen"
|
||
x-transition:enter="ease-out duration-200"
|
||
x-transition:enter-start="translate-x-full"
|
||
x-transition:enter-end="translate-x-0"
|
||
x-transition:leave="ease-in duration-150"
|
||
x-transition:leave-start="translate-x-0"
|
||
x-transition:leave-end="translate-x-full"
|
||
class="fixed right-0 top-0 h-full w-[480px] z-60 bg-white shadow-lg flex flex-col border-l border-neutral-200"
|
||
x-cloak>
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200">
|
||
<h2 class="text-base font-semibold text-neutral-800">写跟进</h2>
|
||
<button @click="drawerOpen=false" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<!-- Body -->
|
||
<div class="flex-1 overflow-y-auto px-5 py-4 space-y-4">
|
||
<!-- 跟进方式 -->
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">跟进方式 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option value="">请选择跟进方式</option>
|
||
<option value="phone" selected>电话</option>
|
||
<option value="visit">上门拜访</option>
|
||
<option value="wechat">微信沟通</option>
|
||
<option value="meeting">当面洽谈</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
<!-- 跟进内容 -->
|
||
<div class="space-y-1" x-data="{ content: '' }">
|
||
<label class="block text-sm font-medium text-neutral-700">跟进内容 <span class="text-danger-600">*</span></label>
|
||
<textarea x-model="content" rows="5" placeholder="请输入跟进内容（至少 6 字）"
|
||
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 placeholder:text-neutral-400 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 resize-y"></textarea>
|
||
<p class="text-xs text-neutral-500 text-right" x-text="content.length + ' 字'">0 字</p>
|
||
</div>
|
||
<!-- 跟进时间 -->
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">跟进时间</label>
|
||
<input type="datetime-local" value="2026-04-25T14:30"
|
||
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
</div>
|
||
<!-- 附件 -->
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">附件</label>
|
||
<div class="border-2 border-dashed border-neutral-200 rounded-md p-4 text-center hover:border-primary-400 transition-colors cursor-pointer">
|
||
<svg class="w-8 h-8 mx-auto text-neutral-300 mb-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
|
||
<p class="text-sm text-neutral-500">点击上传或拖拽文件</p>
|
||
<p class="text-xs text-neutral-400 mt-1">支持图片、音频、PDF，单文件不超过 20 MB</p>
|
||
<input type="file" class="hidden" multiple accept="image/*,audio/*,.pdf">
|
||
</div>
|
||
</div>
|
||
<!-- 开放给同事查看 -->
|
||
<div class="flex items-center gap-3">
|
||
<button type="button" role="switch" aria-checked="true"
|
||
x-data="{ on: true }" @click="on=!on"
|
||
:class="on ? 'bg-primary-600' : 'bg-neutral-300'"
|
||
class="relative inline-flex items-center w-9 h-5 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<span :class="on ? 'translate-x-4' : 'translate-x-0.5'"
|
||
class="inline-block w-4 h-4 bg-white rounded-full shadow transition-transform"></span>
|
||
</button>
|
||
<label class="text-sm text-neutral-700">开放给同事查看</label>
|
||
</div>
|
||
</div>
|
||
<!-- Footer -->
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50">
|
||
<button @click="drawerOpen=false"
|
||
class="px-3 py-1.5 text-sm font-medium border border-neutral-300 rounded-md text-neutral-700 hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
取消
|
||
</button>
|
||
<button class="px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
保存跟进
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ Modal：改等级 ============ -->
|
||
<div x-show="modal !== null" x-transition.opacity
|
||
class="fixed inset-0 z-50 bg-neutral-900/40"
|
||
@click="modal=null" x-cloak></div>
|
||
|
||
<!-- 改等级 -->
|
||
<div x-show="modal === 'grade'"
|
||
x-transition
|
||
class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none"
|
||
x-cloak>
|
||
<div class="w-full max-w-sm bg-white rounded-xl shadow-lg border border-neutral-200 flex flex-col pointer-events-auto">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200">
|
||
<h2 class="text-base font-semibold text-neutral-800">修改客源等级</h2>
|
||
<button @click="modal=null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="px-5 py-4 space-y-4">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs text-neutral-500">当前等级：</span>
|
||
<span class="inline-flex items-center px-2 py-0.5 text-xs rounded bg-warning-50 text-warning-600">C（一般）</span>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">新等级 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option value="">请选择等级</option>
|
||
<option value="S">S（超级）</option>
|
||
<option value="A">A（优质）</option>
|
||
<option value="B">B（良好）</option>
|
||
<option value="C" selected>C（一般）</option>
|
||
<option value="D">D（较差）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50 rounded-b-xl">
|
||
<button @click="modal=null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md text-neutral-700 hover:bg-white">取消</button>
|
||
<button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">确认修改</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 改状态 -->
|
||
<div x-show="modal === 'status'"
|
||
x-transition
|
||
class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none"
|
||
x-cloak>
|
||
<div class="w-full max-w-md bg-white rounded-xl shadow-lg border border-neutral-200 flex flex-col pointer-events-auto">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200">
|
||
<h2 class="text-base font-semibold text-neutral-800">修改客源状态</h2>
|
||
<button @click="modal=null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="px-5 py-4 space-y-4">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs text-neutral-500">当前状态：</span>
|
||
<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-warning-50 text-warning-600">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-warning-600"></span>跟进中
|
||
</span>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">新状态 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option value="">请选择状态</option>
|
||
<option value="follow" selected>跟进中</option>
|
||
<option value="paused">暂缓</option>
|
||
<option value="invalid">无效</option>
|
||
<option value="deal">已成交</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">备注理由</label>
|
||
<textarea rows="3" placeholder="请说明状态变更的原因（选填）"
|
||
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 placeholder:text-neutral-400 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 resize-none"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50 rounded-b-xl">
|
||
<button @click="modal=null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md text-neutral-700 hover:bg-white">取消</button>
|
||
<button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">确认修改</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 转成交 -->
|
||
<div x-show="modal === 'deal'"
|
||
x-transition
|
||
class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none"
|
||
x-cloak>
|
||
<div class="w-full max-w-lg bg-white rounded-xl shadow-lg border border-neutral-200 flex flex-col pointer-events-auto">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200">
|
||
<h2 class="text-base font-semibold text-neutral-800">转成交</h2>
|
||
<button @click="modal=null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="px-5 py-4 space-y-4">
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">成交状态 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option value="signed">已签约</option>
|
||
<option value="completed">已成交</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">房源类型 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option value="second">二手房</option>
|
||
<option value="new">新房</option>
|
||
<option value="rent">租赁</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">成交房源</label>
|
||
<div class="flex items-center gap-2">
|
||
<div class="flex-1 px-3 py-2 text-sm rounded-md border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||
碧云国际社区 3 室 2 厅 · 102 m²
|
||
</div>
|
||
<button class="px-3 py-2 text-sm border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 shrink-0">更换</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50 rounded-b-xl">
|
||
<button @click="modal=null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md text-neutral-700 hover:bg-white">取消</button>
|
||
<button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">确认成交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑基础信息 -->
|
||
<div x-show="modal === 'edit'"
|
||
x-transition
|
||
class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none"
|
||
x-cloak>
|
||
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg border border-neutral-200 flex flex-col max-h-[85vh] pointer-events-auto">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200">
|
||
<h2 class="text-base font-semibold text-neutral-800">编辑客源基础信息</h2>
|
||
<button @click="modal=null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="flex-1 overflow-y-auto px-5 py-4">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">需求类型 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option selected>购置自住</option>
|
||
<option>投资</option>
|
||
<option>改善</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">客户来源 <span class="text-danger-600">*</span></label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option selected>门店广告</option>
|
||
<option>老客转介绍</option>
|
||
<option>网络平台</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">房源用途</label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option selected>住宅</option>
|
||
<option>商业</option>
|
||
<option>办公</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="block text-sm font-medium text-neutral-700">付款方式</label>
|
||
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 bg-white">
|
||
<option selected>全款</option>
|
||
<option>商贷</option>
|
||
<option>公积金贷款</option>
|
||
<option>组合贷</option>
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1 col-span-2">
|
||
<label class="block text-sm font-medium text-neutral-700">证件号码</label>
|
||
<input type="text" value="310***********0038" placeholder="请输入身份证号码"
|
||
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 placeholder:text-neutral-400 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 font-mono">
|
||
<p class="text-xs text-neutral-500">证件信息属于敏感数据，查看将记录审计日志。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50 rounded-b-xl">
|
||
<button @click="modal=null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md text-neutral-700 hover:bg-white">取消</button>
|
||
<button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ Toast 容器 ============ -->
|
||
<div class="fixed bottom-6 right-6 z-70 space-y-2">
|
||
<div x-data="{ show: true }" x-show="show" x-transition
|
||
class="w-80 bg-white rounded-lg shadow-lg border border-neutral-200 flex items-start gap-3 p-3">
|
||
<svg class="w-5 h-5 text-success-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
||
<div class="flex-1 text-sm">
|
||
<p class="font-medium text-neutral-800">跟进已保存</p>
|
||
<p class="text-xs text-neutral-500">陈晓芸的跟进记录已成功添加</p>
|
||
</div>
|
||
<button @click="show=false" class="text-neutral-400 hover:text-neutral-600 mt-0.5">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function clientDetailPage() {
|
||
return {
|
||
modal: null, // 'grade' | 'status' | 'deal' | 'edit' | null
|
||
drawerOpen: false,
|
||
navItems: [
|
||
{ id: 'section-requirements', label: '需求信息' },
|
||
{ id: 'section-follow', label: '跟进记录' },
|
||
{ id: 'section-viewings', label: '带看记录' },
|
||
{ id: 'section-insights', label: '客源解读' },
|
||
{ id: 'section-matches', label: '二手配房' }
|
||
],
|
||
activeSection: 'section-requirements',
|
||
observer: null,
|
||
|
||
scrollToSection(id) {
|
||
const el = document.getElementById(id)
|
||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||
},
|
||
|
||
init() {
|
||
// ESC 关闭 modal / drawer
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
this.modal = null
|
||
this.drawerOpen = false
|
||
}
|
||
})
|
||
|
||
// IntersectionObserver 驱动锚点高亮
|
||
const sections = Array.from(document.querySelectorAll('.section-anchor'))
|
||
this.observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
this.activeSection = entry.target.id
|
||
}
|
||
})
|
||
}, {
|
||
root: null,
|
||
rootMargin: '-140px 0px -55% 0px',
|
||
threshold: 0.01
|
||
})
|
||
sections.forEach((s) => this.observer.observe(s))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|