generated from root/feiqiu-ETL
feat:引入 TDesign 以及前端初稿
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
miniprogram_npm
|
||||||
273
Prototype/css/banner.css
Normal file
273
Prototype/css/banner.css
Normal file
@@ -0,0 +1,273 @@
|
|||||||
|
/**
|
||||||
|
* 通用Banner背景样式
|
||||||
|
* 使用方式：
|
||||||
|
* 1. 引入此CSS文件
|
||||||
|
* 2. 在banner容器上添加 class="banner-bg"
|
||||||
|
* 3. 添加主题类名定义颜色，如 class="banner-bg theme-blue"
|
||||||
|
*
|
||||||
|
* 可用主题：
|
||||||
|
* - theme-blue (默认蓝色)
|
||||||
|
* - theme-blue-light (浅蓝色)
|
||||||
|
* - theme-red (红色-高优先)
|
||||||
|
* - theme-orange (橙色-优先)
|
||||||
|
* - theme-pink (粉色-关系)
|
||||||
|
* - theme-green (绿色)
|
||||||
|
* - theme-purple (紫色)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ===== 主题颜色变量定义 ===== */
|
||||||
|
:root {
|
||||||
|
/* 蓝色主题 (默认) */
|
||||||
|
--banner-color-start: #1e6fff;
|
||||||
|
--banner-color-mid: #3d8bff;
|
||||||
|
--banner-color-end: #5ba3ff;
|
||||||
|
|
||||||
|
/* 纹理透明度 */
|
||||||
|
--texture-opacity: 0.08;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 基础Banner样式 ===== */
|
||||||
|
.banner-bg {
|
||||||
|
position: relative;
|
||||||
|
background:
|
||||||
|
/* 1. 底部边缘高光 */
|
||||||
|
linear-gradient(0deg, rgba(255,255,255,0.15) 0%, transparent 25%),
|
||||||
|
/* 2. 右下角光晕 */
|
||||||
|
radial-gradient(ellipse 60% 45% at 85% 95%, rgba(255,255,255,0.25) 0%, transparent 55%),
|
||||||
|
/* 3. 左侧柔和光晕 */
|
||||||
|
radial-gradient(ellipse 50% 80% at 5% 40%, rgba(255,255,255,0.12) 0%, transparent 50%),
|
||||||
|
/* 4. 顶部深色加深 */
|
||||||
|
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 40%),
|
||||||
|
/* 5. 左上角深色区域 */
|
||||||
|
radial-gradient(ellipse 80% 70% at -10% -5%, rgba(0,0,0,0.25) 0%, transparent 45%),
|
||||||
|
/* 6. 斜向丝绸光带 */
|
||||||
|
linear-gradient(315deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(255,255,255,0.04) 20%,
|
||||||
|
rgba(255,255,255,0.12) 45%,
|
||||||
|
rgba(255,255,255,0.12) 55%,
|
||||||
|
rgba(255,255,255,0.04) 80%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
/* 7. 主渐变 - 多色过渡（翻转） */
|
||||||
|
linear-gradient(330deg,
|
||||||
|
var(--banner-color-start) 0%,
|
||||||
|
var(--banner-color-start) 15%,
|
||||||
|
var(--banner-color-mid) 40%,
|
||||||
|
var(--banner-color-mid) 60%,
|
||||||
|
var(--banner-color-end) 85%,
|
||||||
|
var(--banner-color-end) 100%
|
||||||
|
);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 纹理层 - 几何线条 ===== */
|
||||||
|
.banner-bg::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: var(--texture-opacity);
|
||||||
|
background-image:
|
||||||
|
/* 斜线网格 */
|
||||||
|
repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 20px,
|
||||||
|
rgba(255,255,255,0.5) 20px,
|
||||||
|
rgba(255,255,255,0.5) 21px
|
||||||
|
),
|
||||||
|
repeating-linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 20px,
|
||||||
|
rgba(255,255,255,0.3) 20px,
|
||||||
|
rgba(255,255,255,0.3) 21px
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 纹理层 - 右上角柔和光晕 ===== */
|
||||||
|
.banner-bg::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -110px;
|
||||||
|
right: -130px;
|
||||||
|
width: 300px;
|
||||||
|
height: 280px;
|
||||||
|
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 65%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保内容在纹理之上 */
|
||||||
|
.banner-bg > * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 主题颜色预设 ===== */
|
||||||
|
|
||||||
|
/* 蓝色主题 (默认) - 深蓝色 */
|
||||||
|
.banner-bg.theme-blue,
|
||||||
|
.banner-bg {
|
||||||
|
--banner-color-start: #002d80;
|
||||||
|
--banner-color-mid: #0052d9;
|
||||||
|
--banner-color-end: #2b7de9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 浅蓝色主题 */
|
||||||
|
.banner-bg.theme-blue-light {
|
||||||
|
--banner-color-start: #1a6dd9;
|
||||||
|
--banner-color-mid: #4087e9;
|
||||||
|
--banner-color-end: #6ba8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 红色主题 - 高优先召回 */
|
||||||
|
.banner-bg.theme-red {
|
||||||
|
--banner-color-start: #991b1b;
|
||||||
|
--banner-color-mid: #dc2626;
|
||||||
|
--banner-color-end: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 橙色主题 - 优先召回 */
|
||||||
|
.banner-bg.theme-orange {
|
||||||
|
--banner-color-start: #9a3412;
|
||||||
|
--banner-color-mid: #ea580c;
|
||||||
|
--banner-color-end: #f97316;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 粉色主题 - 关系构建 */
|
||||||
|
.banner-bg.theme-pink {
|
||||||
|
--banner-color-start: #9d174d;
|
||||||
|
--banner-color-mid: #db2777;
|
||||||
|
--banner-color-end: #ec4899;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 绿色主题 */
|
||||||
|
.banner-bg.theme-green {
|
||||||
|
--banner-color-start: #00796b;
|
||||||
|
--banner-color-mid: #00a870;
|
||||||
|
--banner-color-end: #4cd964;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 紫色主题 */
|
||||||
|
.banner-bg.theme-purple {
|
||||||
|
--banner-color-start: #7b1fa2;
|
||||||
|
--banner-color-mid: #9c27b0;
|
||||||
|
--banner-color-end: #ba68c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 青绿色主题 - 客户回访 */
|
||||||
|
.banner-bg.theme-teal {
|
||||||
|
--banner-color-start: #0f766e;
|
||||||
|
--banner-color-mid: #14b8a6;
|
||||||
|
--banner-color-end: #2dd4bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 黑金主题 - 客户详情 */
|
||||||
|
.banner-bg.theme-dark-gold {
|
||||||
|
--banner-color-start: #1a1a1a;
|
||||||
|
--banner-color-mid: #2a2520;
|
||||||
|
--banner-color-end: #1f1c18;
|
||||||
|
--texture-opacity: 0.06;
|
||||||
|
}
|
||||||
|
.banner-bg.theme-dark-gold::after {
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse at 60% 70%, rgba(255, 196, 0, 0.25) 0%, transparent 50%),
|
||||||
|
linear-gradient(135deg, transparent 0%, rgba(255, 187, 0, 0.15) 30%, rgba(255, 183, 0, 0.2) 60%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 珊瑚粉主题 - 助教详情 */
|
||||||
|
.banner-bg.theme-coral {
|
||||||
|
--banner-color-start: #be4a62;
|
||||||
|
--banner-color-mid: #d4617a;
|
||||||
|
--banner-color-end: #e8899a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 纹理变体 ===== */
|
||||||
|
|
||||||
|
|
||||||
|
/* 艺术波浪纹理 */
|
||||||
|
.banner-bg.texture-artistic::before {
|
||||||
|
background-image:
|
||||||
|
/* 全局柔和渐变 */
|
||||||
|
linear-gradient(120deg,
|
||||||
|
rgba(255,255,255,0.15) 0%,
|
||||||
|
transparent 40%,
|
||||||
|
rgba(255,255,255,0.05) 70%,
|
||||||
|
rgba(255,255,255,0.12) 100%
|
||||||
|
),
|
||||||
|
/* 多层流动曲线 */
|
||||||
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M-20 80 Q30 40 80 80 T180 80 T280 80' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.5'/%3E%3Cpath d='M-20 120 Q40 160 100 120 T220 120' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpath d='M-20 160 Q50 130 110 160 T240 160' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
|
||||||
|
background-size: 100% 100%, 200px 150px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 丝绸流线纹理 */
|
||||||
|
.banner-bg.texture-silk::before {
|
||||||
|
background-image:
|
||||||
|
/* 丝绸光泽渐变 */
|
||||||
|
linear-gradient(135deg,
|
||||||
|
rgba(255,255,255,0.18) 0%,
|
||||||
|
transparent 25%,
|
||||||
|
rgba(255,255,255,0.06) 50%,
|
||||||
|
transparent 75%,
|
||||||
|
rgba(255,255,255,0.1) 100%
|
||||||
|
),
|
||||||
|
/* 优雅的贝塞尔曲线 */
|
||||||
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath d='M0 100 C50 50, 100 150, 150 100 S250 50, 300 100' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3Cpath d='M0 140 C60 90, 120 190, 180 140 S280 90, 340 140' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3Cpath d='M0 60 C40 30, 90 90, 140 60 S220 30, 280 60' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
|
||||||
|
background-size: 100% 100%, 280px 180px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Windows 11 Bloom 风格 - 流动丝带效果 */
|
||||||
|
.banner-bg.texture-aurora::before {
|
||||||
|
background-image:
|
||||||
|
/* 流动丝带 SVG */
|
||||||
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='ribbon1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0.4)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.15)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0.3)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(0,0,0,0.15)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.2)'/%3E%3Cstop offset='100%25' stop-color='rgba(0,0,0,0.1)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon3' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop offset='30%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='70%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C!-- 底层丝带 --%3E%3Cpath d='M-50 180 Q80 100 180 140 T350 100 T500 140' fill='none' stroke='url(%23ribbon2)' stroke-width='60' stroke-linecap='round' filter='url(%23blur)'/%3E%3C!-- 中层丝带 --%3E%3Cpath d='M-30 50 Q100 120 200 70 T380 110 T520 60' fill='none' stroke='url(%23ribbon1)' stroke-width='45' stroke-linecap='round'/%3E%3C!-- 顶层高光丝带 --%3E%3Cpath d='M0 120 Q120 60 220 100 T420 70' fill='none' stroke='url(%23ribbon3)' stroke-width='25' stroke-linecap='round'/%3E%3C!-- 光影细节 --%3E%3Cpath d='M50 90 Q150 150 280 90 T450 120' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||||
|
background-size: 480px 160px;
|
||||||
|
background-position: center 40px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 流线纹理 */
|
||||||
|
.banner-bg.texture-flow::before {
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
120deg,
|
||||||
|
transparent,
|
||||||
|
transparent 40px,
|
||||||
|
rgba(255,255,255,0.08) 40px,
|
||||||
|
rgba(255,255,255,0.08) 80px
|
||||||
|
);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 简约纹理 - 只有光晕无线条 */
|
||||||
|
.banner-bg.texture-minimal::before {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 动画效果（可选） ===== */
|
||||||
|
.banner-bg.animated::before {
|
||||||
|
animation: texture-shift 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes texture-shift {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0, 0 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 40px 40px, -40px -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
BIN
Prototype/img/Windows11.png
Normal file
BIN
Prototype/img/Windows11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
Prototype/img/zjtx.png
Normal file
BIN
Prototype/img/zjtx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
242
Prototype/index.html
Normal file
242
Prototype/index.html
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>球房运营助手 - 原型展示</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/tdesign-miniprogram/miniprogram_dist/common/style/index.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.prototype-container {
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.prototype-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(393px, 1fr));
|
||||||
|
gap: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.phone-frame {
|
||||||
|
width: 393px;
|
||||||
|
height: 852px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 12px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.phone-frame::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.phone-screen {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.page-label {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="prototype-container">
|
||||||
|
<h1>球房运营助手 - 原型展示</h1>
|
||||||
|
<div class="prototype-grid">
|
||||||
|
<!-- 登录页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">登录页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/login.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 账号申请页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">账号申请页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/apply.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 审核中页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">审核中页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/reviewing.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 无权限页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">无权限页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/no-permission.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务列表页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">任务列表页（首页）</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/task-list.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务详情页 - 高优先召回 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">任务详情页 - 高优先召回</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/task-detail.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务详情页 - 优先召回 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">任务详情页 - 优先召回</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/task-detail-priority.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务详情页 - 关系构建 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">任务详情页 - 关系构建</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/task-detail-relationship.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务详情页 - 客户回访 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">任务详情页 - 客户回访</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/task-detail-callback.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 业绩详情页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">业绩详情页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/performance.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 看板-财务视图 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">看板 - 财务视图</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/board-finance.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 看板-客户视图 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">看板 - 客户视图</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/board-customer.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户详情页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">客户详情页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/customer-detail.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 看板-助教视图 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">看板 - 助教视图</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/board-coach.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助教详情页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">助教详情页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/coach-detail.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 我的首页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">我的首页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/my-profile.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注记录页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">备注记录页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/notes.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手对话记录页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">助手对话记录页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/chat-history.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 首页设置页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">首页设置页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/home-settings.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手对话页 -->
|
||||||
|
<div>
|
||||||
|
<div class="page-label">助手对话页</div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<iframe src="pages/chat.html" class="phone-screen"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
119
Prototype/js/ai-float-btn.js
Normal file
119
Prototype/js/ai-float-btn.js
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
/**
|
||||||
|
* AI 浮动对话按钮组件
|
||||||
|
* 统一在所有需要的页面使用
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
// 创建样式
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
.ai-float-btn-container {
|
||||||
|
position: fixed;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 96px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-float-btn {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 渐变动画背景 */
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradientShift 8s ease infinite;
|
||||||
|
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-float-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-float-btn::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景渐变动画 */
|
||||||
|
@keyframes gradientShift {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
25% { background-position: 50% 100%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
75% { background-position: 50% 0%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-float-btn svg {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
// 创建按钮DOM
|
||||||
|
function createAIFloatBtn() {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.className = 'ai-float-btn-container';
|
||||||
|
|
||||||
|
const btn = document.createElement('div');
|
||||||
|
btn.className = 'ai-float-btn';
|
||||||
|
|
||||||
|
// 可爱风格的AI图标 - 小机器人助手
|
||||||
|
btn.innerHTML = `
|
||||||
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- 机器人头部 -->
|
||||||
|
<rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
|
||||||
|
|
||||||
|
<!-- 天线 -->
|
||||||
|
<path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<circle cx="12" cy="3" r="1.5" fill="white"/>
|
||||||
|
|
||||||
|
<!-- 眼睛 - 可爱的大眼睛 -->
|
||||||
|
<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"/>
|
||||||
|
<rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 点击跳转到聊天页面
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
// 可以根据需要修改跳转逻辑
|
||||||
|
window.location.href = 'chat.html';
|
||||||
|
});
|
||||||
|
|
||||||
|
container.appendChild(btn);
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载完成后创建按钮
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', createAIFloatBtn);
|
||||||
|
} else {
|
||||||
|
createAIFloatBtn();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
91
Prototype/js/bottom-nav.js
Normal file
91
Prototype/js/bottom-nav.js
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
/**
|
||||||
|
* 通用底部导航组件
|
||||||
|
* 在所有需要底部导航的页面引入此脚本即可自动生成底部导航栏
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
// 获取当前页面路径
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);
|
||||||
|
|
||||||
|
// 判断当前激活的tab
|
||||||
|
const isTaskActive = currentPage === 'task-list.html';
|
||||||
|
const isBoardActive = currentPage.startsWith('board-');
|
||||||
|
const isMyActive = currentPage === 'my-profile.html';
|
||||||
|
|
||||||
|
// 统一的图标定义 - 激活态用fill+stroke，未激活态用stroke
|
||||||
|
const icons = {
|
||||||
|
// 任务图标 - 剪贴板带勾选
|
||||||
|
task: {
|
||||||
|
active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="5" y="4" width="14" height="17" rx="2" fill="currentColor" stroke="currentColor" stroke-width="1"/>
|
||||||
|
<rect x="8" y="2" width="8" height="4" rx="1" fill="currentColor" stroke="currentColor" stroke-width="1"/>
|
||||||
|
<path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>`,
|
||||||
|
inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<rect x="5" y="4" width="14" height="17" rx="2"/>
|
||||||
|
<rect x="8" y="2" width="8" height="4" rx="1"/>
|
||||||
|
<path d="M9 12l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>`
|
||||||
|
},
|
||||||
|
// 看板图标 - 三个柱状图
|
||||||
|
board: {
|
||||||
|
active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
|
||||||
|
<rect x="4" y="13" width="4" height="8" rx="1"/>
|
||||||
|
<rect x="10" y="8" width="4" height="13" rx="1"/>
|
||||||
|
<rect x="16" y="3" width="4" height="18" rx="1"/>
|
||||||
|
</svg>`,
|
||||||
|
inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<rect x="4" y="13" width="4" height="8" rx="1"/>
|
||||||
|
<rect x="10" y="8" width="4" height="13" rx="1"/>
|
||||||
|
<rect x="16" y="3" width="4" height="18" rx="1"/>
|
||||||
|
</svg>`
|
||||||
|
},
|
||||||
|
// 我的图标 - 人物头像
|
||||||
|
my: {
|
||||||
|
active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
|
||||||
|
<circle cx="12" cy="7" r="4"/>
|
||||||
|
<path d="M5.5 21a6.5 6.5 0 0113 0h-13z"/>
|
||||||
|
</svg>`,
|
||||||
|
inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<circle cx="12" cy="7" r="4"/>
|
||||||
|
<path d="M5.5 21a6.5 6.5 0 0113 0h-13z"/>
|
||||||
|
</svg>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 创建底部导航HTML
|
||||||
|
const navHTML = `
|
||||||
|
<div id="bottomNav" class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-4 z-50">
|
||||||
|
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||||
|
${isTaskActive ? icons.task.active : icons.task.inactive}
|
||||||
|
<span class="text-xs ${isTaskActive ? 'text-primary font-medium' : 'text-gray-6'}">任务</span>
|
||||||
|
</a>
|
||||||
|
<a href="board-finance.html" class="flex flex-col items-center gap-1">
|
||||||
|
${isBoardActive ? icons.board.active : icons.board.inactive}
|
||||||
|
<span class="text-xs ${isBoardActive ? 'text-primary font-medium' : 'text-gray-6'}">看板</span>
|
||||||
|
</a>
|
||||||
|
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||||
|
${isMyActive ? icons.my.active : icons.my.inactive}
|
||||||
|
<span class="text-xs ${isMyActive ? 'text-primary font-medium' : 'text-gray-6'}">我的</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 等待DOM加载完成后插入导航
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', insertNav);
|
||||||
|
} else {
|
||||||
|
insertNav();
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertNav() {
|
||||||
|
// 移除页面中已有的底部导航（如果有的话）
|
||||||
|
const existingNav = document.querySelector('nav.fixed.bottom-0, div.fixed.bottom-0[class*="h-16"]');
|
||||||
|
if (existingNav && (existingNav.querySelector('a[href*="task-list"]') || existingNav.querySelector('a[href*="board-"]') || existingNav.querySelector('a[href*="my-profile"]'))) {
|
||||||
|
existingNav.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入新导航到body末尾
|
||||||
|
document.body.insertAdjacentHTML('beforeend', navHTML);
|
||||||
|
}
|
||||||
|
})();
|
||||||
180
Prototype/pages/apply.html
Normal file
180
Prototype/pages/apply.html
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>账号申请 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-gradient-main {
|
||||||
|
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white/80 backdrop-blur-lg sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-200/50">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="15 18 9 12 15 6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-base font-medium text-gray-13">申请访问权限</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="flex-1 p-4">
|
||||||
|
<!-- 欢迎卡片 -->
|
||||||
|
<div class="bg-gradient-to-br from-primary to-blue-400 rounded-2xl p-5 mb-4 text-white shadow-lg shadow-primary/20">
|
||||||
|
<div class="flex items-center gap-4 mb-3">
|
||||||
|
<div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold mb-1">欢迎加入球房运营助手</h2>
|
||||||
|
<p class="text-white/80 text-sm">请填写申请信息，等待管理员审核</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 说明文字 -->
|
||||||
|
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 mb-4">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-primary font-medium mb-1">申请说明</p>
|
||||||
|
<p class="text-xs text-gray-7 leading-relaxed">
|
||||||
|
请填写您的真实信息，包括姓名、岗位和所属门店等，以便管理员快速审核您的申请。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表单区域 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||||
|
<div class="mb-3 flex items-center gap-1">
|
||||||
|
<span class="text-error text-sm">*</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">申请说明</span>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="applyReason"
|
||||||
|
class="w-full h-36 p-4 bg-gray-50 rounded-xl border border-gray-100 resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
|
||||||
|
placeholder="点击填写申请信息： 1. 您的姓名 2. 您的岗位（如：助教、店长等） 3. 所属门店 4. 其他说明（可选）"
|
||||||
|
></textarea>
|
||||||
|
<p id="errorTip" class="text-error text-xs mt-2 hidden">申请说明不能为空</p>
|
||||||
|
<div class="flex items-center justify-between mt-3">
|
||||||
|
<span class="text-xs text-gray-5">请认真填写，信息不完整可能导致审核不通过</span>
|
||||||
|
<span class="text-xs text-gray-6"><span id="charCount">0</span>/200</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 审核流程说明 -->
|
||||||
|
<div class="mt-4 bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 mb-4">审核流程</h3>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-xs font-medium mb-2">1</div>
|
||||||
|
<span class="text-xs text-gray-7">提交申请</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">2</div>
|
||||||
|
<span class="text-xs text-gray-6">等待审核</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">3</div>
|
||||||
|
<span class="text-xs text-gray-6">审核通过</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">4</div>
|
||||||
|
<span class="text-xs text-gray-6">开始使用</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="p-4 pb-8 bg-white/80 backdrop-blur-lg border-t border-gray-100">
|
||||||
|
<button id="submitBtn" class="w-full py-4 bg-gradient-to-r from-primary to-blue-500 rounded-xl text-white font-medium text-base shadow-lg shadow-primary/30 active:scale-[0.98] transition-transform">
|
||||||
|
提交申请
|
||||||
|
</button>
|
||||||
|
<p class="text-xs text-gray-5 text-center mt-3">
|
||||||
|
审核通常需要 1-3 个工作日
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const textarea = document.getElementById('applyReason');
|
||||||
|
const charCount = document.getElementById('charCount');
|
||||||
|
const errorTip = document.getElementById('errorTip');
|
||||||
|
const submitBtn = document.getElementById('submitBtn');
|
||||||
|
|
||||||
|
textarea.addEventListener('input', function() {
|
||||||
|
const len = this.value.length;
|
||||||
|
charCount.textContent = len;
|
||||||
|
if (len > 200) {
|
||||||
|
this.value = this.value.slice(0, 200);
|
||||||
|
charCount.textContent = 200;
|
||||||
|
}
|
||||||
|
if (this.value.trim()) {
|
||||||
|
errorTip.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
submitBtn.addEventListener('click', function() {
|
||||||
|
if (!textarea.value.trim()) {
|
||||||
|
errorTip.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
alert('申请已提交，请等待审核');
|
||||||
|
window.location.href = 'reviewing.html';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
526
Prototype/pages/board-coach.html
Normal file
526
Prototype/pages/board-coach.html
Normal file
@@ -0,0 +1,526 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板-助教 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #0052d9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.filter-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.filter-overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1001;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.filter-dropdown.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* 二级筛选栏层级与动效 */
|
||||||
|
#filterBar {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 120px;
|
||||||
|
transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
|
||||||
|
will-change: transform, opacity;
|
||||||
|
}
|
||||||
|
/* 浠呯敤浜庘€滈娆¤繘鍏ラ〉闈⑩€濈殑涓嬫粦鍑虹幇锛堢敤 transition 瑙﹀彂涓€娆★級 */
|
||||||
|
#filterBar.filter-bar-enter {
|
||||||
|
transform: translateY(-16px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
#filterBar.filter-bar-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-110%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@keyframes filterBarDrop {
|
||||||
|
from { transform: translateY(-16px); opacity: 0; }
|
||||||
|
to { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
#filterBar { animation: none; transition: none; }
|
||||||
|
}
|
||||||
|
.coach-card {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.coach-card:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 一级 Tab -->
|
||||||
|
<div class="flex">
|
||||||
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||||
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||||
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">助教</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域（二级） -->
|
||||||
|
<div id="filterBar" class="bg-gray-1 sticky top-[88px] z-10 px-4 py-2 border-b border-gray-2">
|
||||||
|
<div class="bg-white rounded-2xl p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
||||||
|
<button onclick="toggleFilter('sort')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="sortLabel">创收最多</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('skill')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="skillLabel">不限</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="timeLabel">本月</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||||
|
|
||||||
|
<!-- 排序筛选弹窗 -->
|
||||||
|
<div id="sortDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('创收最多')">创收最多</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('创收最低')">创收最低</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('业绩最高')">业绩最高</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('业绩最低')">业绩最低</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最高')">工资最高</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最低')">工资最低</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('潜在客源储值')">潜在客源储值</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 擅长项目筛选弹窗 -->
|
||||||
|
<div id="skillDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('不限')">不限</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('中🎱')">中🎱</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('斯诺克')">斯诺克</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('麻将')">麻将</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('团建')">团建</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 时间筛选弹窗 -->
|
||||||
|
<div id="timeDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本月')">本月</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上个月')">上个月</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('最近3个月')">最近3个月</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本季度')">本季度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助教列表 -->
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<!-- 助教卡片 1 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">小</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">8.6万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 王先生</span>
|
||||||
|
<span>💖 李女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课86小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 2 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">泡</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded">高级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">7.2万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 陈先生</span>
|
||||||
|
<span>💛 刘女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课72小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 3 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">A</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">6.8万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 张先生</span>
|
||||||
|
<span>💛 周女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课68小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 4 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">麻将</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">5.5万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 赵先生</span>
|
||||||
|
<span>💛 吴女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课55小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 5 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">糖</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded">初级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">4.2万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 钱先生</span>
|
||||||
|
<span>💛 孙女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课42小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 6 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">露</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">团建</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">3.8万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 郑先生</span>
|
||||||
|
<span>💛 冯女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课38小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<!-- 通用底部导航 -->
|
||||||
|
<script src="../js/bottom-nav.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentFilter = null;
|
||||||
|
|
||||||
|
function positionDropdown(dropdownEl) {
|
||||||
|
const bar = document.getElementById('filterBar');
|
||||||
|
if (!bar || !dropdownEl) return;
|
||||||
|
const rect = bar.getBoundingClientRect();
|
||||||
|
dropdownEl.style.top = `${rect.bottom}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFilter(type) {
|
||||||
|
const overlay = document.getElementById('filterOverlay');
|
||||||
|
const sortDropdown = document.getElementById('sortDropdown');
|
||||||
|
const skillDropdown = document.getElementById('skillDropdown');
|
||||||
|
const timeDropdown = document.getElementById('timeDropdown');
|
||||||
|
|
||||||
|
if (currentFilter === type) {
|
||||||
|
closeAllFilters();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeAllFilters();
|
||||||
|
currentFilter = type;
|
||||||
|
overlay.classList.add('show');
|
||||||
|
|
||||||
|
if (type === 'sort') {
|
||||||
|
positionDropdown(sortDropdown);
|
||||||
|
sortDropdown.classList.add('show');
|
||||||
|
} else if (type === 'skill') {
|
||||||
|
positionDropdown(skillDropdown);
|
||||||
|
skillDropdown.classList.add('show');
|
||||||
|
} else if (type === 'time') {
|
||||||
|
positionDropdown(timeDropdown);
|
||||||
|
timeDropdown.classList.add('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllFilters() {
|
||||||
|
currentFilter = null;
|
||||||
|
document.getElementById('filterOverlay').classList.remove('show');
|
||||||
|
document.getElementById('sortDropdown').classList.remove('show');
|
||||||
|
document.getElementById('skillDropdown').classList.remove('show');
|
||||||
|
document.getElementById('timeDropdown').classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectSort(value) {
|
||||||
|
document.getElementById('sortLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectSkill(value) {
|
||||||
|
document.getElementById('skillLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectTime(value) {
|
||||||
|
document.getElementById('timeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动时：下滑隐藏筛选栏，上滑显示（单次滚动手势结束后判断一次，避免抖动）
|
||||||
|
(function initFilterBarScrollBehavior() {
|
||||||
|
const bar = document.getElementById('filterBar');
|
||||||
|
if (!bar) return;
|
||||||
|
|
||||||
|
const TRIGGER_DISTANCE_DOWN = 24;
|
||||||
|
const TRIGGER_DISTANCE_UP = 12;
|
||||||
|
const JITTER_THRESHOLD = 2;
|
||||||
|
|
||||||
|
let lastY = window.scrollY || 0;
|
||||||
|
let lastDir = null; // 'down' | 'up'
|
||||||
|
let ticking = false;
|
||||||
|
let acc = 0;
|
||||||
|
let lockedDir = null; // 'down' | 'up'
|
||||||
|
|
||||||
|
// 首次进入：用 transition åšä¸€æ¬¡ä»Žä¸Šåˆ°ä¸‹å‡ºçŽ°
|
||||||
|
bar.classList.add('filter-bar-enter');
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
bar.classList.remove('filter-bar-enter');
|
||||||
|
});
|
||||||
|
|
||||||
|
function setVisible(visible) {
|
||||||
|
if (visible) {
|
||||||
|
bar.classList.remove('filter-bar-hidden');
|
||||||
|
} else {
|
||||||
|
if (!bar.classList.contains('filter-bar-hidden')) closeAllFilters();
|
||||||
|
bar.classList.add('filter-bar-hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetGesture(y) {
|
||||||
|
lastY = y;
|
||||||
|
lastDir = null;
|
||||||
|
acc = 0;
|
||||||
|
lockedDir = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onScrollFrame() {
|
||||||
|
const y = window.scrollY || 0;
|
||||||
|
|
||||||
|
if (y <= 8) {
|
||||||
|
setVisible(true);
|
||||||
|
resetGesture(y);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const delta = y - lastY;
|
||||||
|
if (Math.abs(delta) <= JITTER_THRESHOLD) {
|
||||||
|
lastY = y;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dir = delta > 0 ? 'down' : 'up';
|
||||||
|
if (lastDir === null) {
|
||||||
|
lastDir = dir;
|
||||||
|
} else if (dir !== lastDir) {
|
||||||
|
lastDir = dir;
|
||||||
|
lockedDir = null;
|
||||||
|
acc = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastY = y;
|
||||||
|
|
||||||
|
if (lockedDir === dir) return;
|
||||||
|
acc += Math.abs(delta);
|
||||||
|
const threshold = dir === 'up' ? TRIGGER_DISTANCE_UP : TRIGGER_DISTANCE_DOWN;
|
||||||
|
if (acc < threshold) return;
|
||||||
|
|
||||||
|
setVisible(dir === 'up');
|
||||||
|
lockedDir = dir;
|
||||||
|
acc = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (ticking) return;
|
||||||
|
ticking = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
onScrollFrame();
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
}, { passive: true });
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
524
Prototype/pages/board-customer.html
Normal file
524
Prototype/pages/board-customer.html
Normal file
@@ -0,0 +1,524 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板-客户 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #0052d9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.filter-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.filter-overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1001;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.filter-dropdown.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* 二级筛选栏层级与动效 */
|
||||||
|
#filterBar {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 120px;
|
||||||
|
transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
|
||||||
|
will-change: transform, opacity;
|
||||||
|
}
|
||||||
|
/* 仅用于“首次进入页面”的下滑出现（用 transition 触发一次） */
|
||||||
|
#filterBar.filter-bar-enter {
|
||||||
|
transform: translateY(-16px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
#filterBar.filter-bar-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-110%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@keyframes filterBarDrop {
|
||||||
|
from { transform: translateY(-16px); opacity: 0; }
|
||||||
|
to { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
#filterBar { animation: none; transition: none; }
|
||||||
|
}
|
||||||
|
.customer-card {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.customer-card:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 一级 Tab -->
|
||||||
|
<div class="flex">
|
||||||
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||||
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">客户</a>
|
||||||
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域（二级） -->
|
||||||
|
<div id="filterBar" class="bg-gray-1 sticky top-[88px] z-10 px-4 py-2 border-b border-gray-2">
|
||||||
|
<div class="bg-white rounded-2xl p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
||||||
|
<button onclick="toggleFilter('type')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="typeLabel">最应召回</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('project')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="projectLabel">不限</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||||
|
|
||||||
|
<!-- 类型筛选弹窗 -->
|
||||||
|
<div id="typeDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近到店')">最近到店</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最应召回')">最应召回</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近充值')">最近充值</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高消费')">最高消费</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高余额')">最高余额</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最频繁')">最频繁</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('潜力股')">潜力股</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最专一')">最专一</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目筛选弹窗 -->
|
||||||
|
<div id="projectDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('不限')">不限</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('中式/追分')">中式/追分</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('斯诺克')">斯诺克</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('麻将')">麻将</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('团建')">团建</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户列表 -->
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<!-- 客户卡片 1 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">王</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">王先生</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：15天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.92</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
<span>💛 泡芙</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">30天到店5次</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 2 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">李</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">李女士</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：20天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.88</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 Amy</span>
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">余额8000元</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 3 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">张</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">张先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：10天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.85</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">高频客户</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 4 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">刘</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">刘先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：8天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.78</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 泡芙</span>
|
||||||
|
<span>💛 Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">偏好斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 5 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">陈</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">陈先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：12天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.72</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">潜力客户</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 6 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">赵</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">赵女士</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：5天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.68</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 泡芙</span>
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
<span>💛 Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">余额12000元</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 7 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">周</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">周先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：7天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.65</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">新客户</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<!-- 通用底部导航 -->
|
||||||
|
<script src="../js/bottom-nav.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentFilter = null;
|
||||||
|
|
||||||
|
function positionDropdown(dropdownEl) {
|
||||||
|
const bar = document.getElementById('filterBar');
|
||||||
|
if (!bar || !dropdownEl) return;
|
||||||
|
const rect = bar.getBoundingClientRect();
|
||||||
|
dropdownEl.style.top = `${rect.bottom}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFilter(type) {
|
||||||
|
const overlay = document.getElementById('filterOverlay');
|
||||||
|
const typeDropdown = document.getElementById('typeDropdown');
|
||||||
|
const projectDropdown = document.getElementById('projectDropdown');
|
||||||
|
|
||||||
|
if (currentFilter === type) {
|
||||||
|
closeAllFilters();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeAllFilters();
|
||||||
|
currentFilter = type;
|
||||||
|
overlay.classList.add('show');
|
||||||
|
|
||||||
|
if (type === 'type') {
|
||||||
|
positionDropdown(typeDropdown);
|
||||||
|
typeDropdown.classList.add('show');
|
||||||
|
} else if (type === 'project') {
|
||||||
|
positionDropdown(projectDropdown);
|
||||||
|
projectDropdown.classList.add('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllFilters() {
|
||||||
|
currentFilter = null;
|
||||||
|
document.getElementById('filterOverlay').classList.remove('show');
|
||||||
|
document.getElementById('typeDropdown').classList.remove('show');
|
||||||
|
document.getElementById('projectDropdown').classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectType(value) {
|
||||||
|
document.getElementById('typeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectProject(value) {
|
||||||
|
document.getElementById('projectLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动时：下滑隐藏筛选栏，上滑显示（单次滚动手势结束后判断一次，避免抖动）
|
||||||
|
(function initFilterBarScrollBehavior() {
|
||||||
|
const bar = document.getElementById('filterBar');
|
||||||
|
if (!bar) return;
|
||||||
|
|
||||||
|
const TRIGGER_DISTANCE_DOWN = 24;
|
||||||
|
const TRIGGER_DISTANCE_UP = 12;
|
||||||
|
const JITTER_THRESHOLD = 2;
|
||||||
|
|
||||||
|
let lastY = window.scrollY || 0;
|
||||||
|
let lastDir = null; // 'down' | 'up'
|
||||||
|
let ticking = false;
|
||||||
|
let acc = 0;
|
||||||
|
let lockedDir = null; // 方向锁：同方向只触发一次，直到方向反转
|
||||||
|
|
||||||
|
// 首次进入：用 transition 做一次从上到下出现
|
||||||
|
bar.classList.add('filter-bar-enter');
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
bar.classList.remove('filter-bar-enter');
|
||||||
|
});
|
||||||
|
|
||||||
|
function setVisible(visible) {
|
||||||
|
if (visible) {
|
||||||
|
bar.classList.remove('filter-bar-hidden');
|
||||||
|
} else {
|
||||||
|
if (!bar.classList.contains('filter-bar-hidden')) closeAllFilters();
|
||||||
|
bar.classList.add('filter-bar-hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetGesture(y) {
|
||||||
|
lastY = y;
|
||||||
|
lastDir = null;
|
||||||
|
acc = 0;
|
||||||
|
lockedDir = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onScrollFrame() {
|
||||||
|
const y = window.scrollY || 0;
|
||||||
|
|
||||||
|
if (y <= 8) {
|
||||||
|
setVisible(true);
|
||||||
|
resetGesture(y);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const delta = y - lastY;
|
||||||
|
if (Math.abs(delta) <= JITTER_THRESHOLD) {
|
||||||
|
lastY = y;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dir = delta > 0 ? 'down' : 'up';
|
||||||
|
if (lastDir === null) {
|
||||||
|
lastDir = dir;
|
||||||
|
} else if (dir !== lastDir) {
|
||||||
|
lastDir = dir;
|
||||||
|
lockedDir = null;
|
||||||
|
acc = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastY = y;
|
||||||
|
|
||||||
|
// 同方向只触发一次：锁住直到方向反转
|
||||||
|
if (lockedDir === dir) return;
|
||||||
|
acc += Math.abs(delta);
|
||||||
|
const threshold = dir === 'up' ? TRIGGER_DISTANCE_UP : TRIGGER_DISTANCE_DOWN;
|
||||||
|
if (acc < threshold) return;
|
||||||
|
|
||||||
|
setVisible(dir === 'up');
|
||||||
|
lockedDir = dir;
|
||||||
|
acc = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (ticking) return;
|
||||||
|
ticking = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
onScrollFrame();
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
}, { passive: true });
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
528
Prototype/pages/board-finance.html
Normal file
528
Prototype/pages/board-finance.html
Normal file
@@ -0,0 +1,528 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板-财务 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #0052d9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.filter-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.filter-overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1001;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.filter-dropdown.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* 二级筛选栏层级与动效 */
|
||||||
|
#filterBar {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 120px;
|
||||||
|
transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
|
||||||
|
will-change: transform, opacity;
|
||||||
|
}
|
||||||
|
/* 浠呯敤浜庘€滈娆¤繘鍏ラ〉闈⑩€濈殑涓嬫粦鍑虹幇锛堢敤 transition 瑙﹀彂涓€娆★級 */
|
||||||
|
#filterBar.filter-bar-enter {
|
||||||
|
transform: translateY(-16px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
#filterBar.filter-bar-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-110%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@keyframes filterBarDrop {
|
||||||
|
from { transform: translateY(-16px); opacity: 0; }
|
||||||
|
to { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
#filterBar { animation: none; transition: none; }
|
||||||
|
}
|
||||||
|
.summary-gradient {
|
||||||
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 一级 Tab -->
|
||||||
|
<div class="flex">
|
||||||
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">财务</a>
|
||||||
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||||
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域（二级） -->
|
||||||
|
<div id="filterBar" class="bg-gray-1 sticky top-[88px] z-10 px-4 py-2 border-b border-gray-2">
|
||||||
|
<div class="bg-white rounded-2xl p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
||||||
|
<button onclick="toggleFilter('mode')" class="flex-1 px-3 py-2 bg-primary-light rounded-lg text-sm text-primary flex items-center justify-center gap-1 border border-primary/20">
|
||||||
|
<span id="modeLabel">记账</span>
|
||||||
|
<svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="timeLabel">本月</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('area')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="areaLabel">全部区域</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||||
|
|
||||||
|
<!-- 时间筛选弹窗 -->
|
||||||
|
<div id="timeDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本月')">
|
||||||
|
<span>本月</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-本月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上个月')">
|
||||||
|
<span>上个月</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-上个月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('最近3个月')">
|
||||||
|
<span>最近3个月</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-最近3个月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('最近半年')">
|
||||||
|
<span>最近半年</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-最近半年" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本季度')">
|
||||||
|
<span>本季度</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-本季度" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上个季度')">
|
||||||
|
<span>上个季度</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-上个季度" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本周')">
|
||||||
|
<span>本周</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-本周" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上周')">
|
||||||
|
<span>上周</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-上周" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 口径筛选弹窗 -->
|
||||||
|
<div id="modeDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectMode('记账')">记账</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectMode('实收/实付')">实收/实付</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 区域筛选弹窗 -->
|
||||||
|
<div id="areaDropdown" class="filter-dropdown">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectArea('全部区域')">全部区域</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('大厅')">大厅</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('A区')">A区</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('B区')">B区</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('C区')">C区</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('麻将房')">麻将房</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('团建房')">团建房</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 财务汇总 -->
|
||||||
|
<div class="summary-gradient mx-4 mt-4 rounded-2xl p-5 text-white">
|
||||||
|
<div class="grid grid-cols-3 gap-4 text-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-white/60 text-xs mb-1">实际收入</p>
|
||||||
|
<p class="text-xl font-bold text-green-400">28.5万</p>
|
||||||
|
<p class="text-white/40 text-xs">预计</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-white/60 text-xs mb-1">实际支出</p>
|
||||||
|
<p class="text-xl font-bold text-rose-400">18.2万</p>
|
||||||
|
<p class="text-white/40 text-xs">预计</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-white/60 text-xs mb-1">净利润</p>
|
||||||
|
<p class="text-xl font-bold text-blue-400">10.3万</p>
|
||||||
|
<p class="text-white/40 text-xs">预计</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 指标内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 营业数据 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">营业数据</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">32.8万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">总流水</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">268元</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">客单价</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1,226</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">开台数</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">892</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">场次</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">2.3h</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">停留时长</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">3.2</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">翻台率</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 收入构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">收入构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">12.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">桌费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">8.6万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">助教费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">4.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">酒水</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">2.8万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">餐饮</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">3.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">包房费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">其他</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 支出构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">支出构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">6.0万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">房租</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">水电</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">8.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">人工</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">0.8万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">耗材</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">推广</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">0.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">其他</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 利润构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">利润构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">14.6万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">毛利</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">10.3万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">净利</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-success">44.5%</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">毛利率</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-success">31.4%</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">净利率</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<!-- 通用底部导航 -->
|
||||||
|
<script src="../js/bottom-nav.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentFilter = null;
|
||||||
|
|
||||||
|
function positionDropdown(dropdownEl) {
|
||||||
|
const bar = document.getElementById('filterBar');
|
||||||
|
if (!bar || !dropdownEl) return;
|
||||||
|
const rect = bar.getBoundingClientRect();
|
||||||
|
dropdownEl.style.top = `${rect.bottom}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFilter(type) {
|
||||||
|
const overlay = document.getElementById('filterOverlay');
|
||||||
|
const timeDropdown = document.getElementById('timeDropdown');
|
||||||
|
const areaDropdown = document.getElementById('areaDropdown');
|
||||||
|
const modeDropdown = document.getElementById('modeDropdown');
|
||||||
|
|
||||||
|
if (currentFilter === type) {
|
||||||
|
closeAllFilters();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeAllFilters();
|
||||||
|
currentFilter = type;
|
||||||
|
overlay.classList.add('show');
|
||||||
|
|
||||||
|
if (type === 'time') {
|
||||||
|
positionDropdown(timeDropdown);
|
||||||
|
timeDropdown.classList.add('show');
|
||||||
|
} else if (type === 'area') {
|
||||||
|
positionDropdown(areaDropdown);
|
||||||
|
areaDropdown.classList.add('show');
|
||||||
|
} else if (type === 'mode') {
|
||||||
|
positionDropdown(modeDropdown);
|
||||||
|
modeDropdown.classList.add('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllFilters() {
|
||||||
|
currentFilter = null;
|
||||||
|
document.getElementById('filterOverlay').classList.remove('show');
|
||||||
|
document.getElementById('timeDropdown').classList.remove('show');
|
||||||
|
document.getElementById('areaDropdown').classList.remove('show');
|
||||||
|
document.getElementById('modeDropdown').classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectTime(value) {
|
||||||
|
document.getElementById('timeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectArea(value) {
|
||||||
|
document.getElementById('areaLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectMode(value) {
|
||||||
|
document.getElementById('modeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动时：下滑隐藏筛选栏，上滑显示（单次滚动手势结束后判断一次，避免抖动）
|
||||||
|
(function initFilterBarScrollBehavior() {
|
||||||
|
const bar = document.getElementById('filterBar');
|
||||||
|
if (!bar) return;
|
||||||
|
|
||||||
|
const TRIGGER_DISTANCE_DOWN = 24;
|
||||||
|
const TRIGGER_DISTANCE_UP = 12;
|
||||||
|
const JITTER_THRESHOLD = 2;
|
||||||
|
|
||||||
|
let lastY = window.scrollY || 0;
|
||||||
|
let lastDir = null; // 'down' | 'up'
|
||||||
|
let ticking = false;
|
||||||
|
let acc = 0;
|
||||||
|
let lockedDir = null;
|
||||||
|
|
||||||
|
// 首次进入：用 transition 做一次从上到下出现
|
||||||
|
bar.classList.add('filter-bar-enter');
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
bar.classList.remove('filter-bar-enter');
|
||||||
|
});
|
||||||
|
|
||||||
|
function setVisible(visible) {
|
||||||
|
if (visible) {
|
||||||
|
bar.classList.remove('filter-bar-hidden');
|
||||||
|
} else {
|
||||||
|
if (!bar.classList.contains('filter-bar-hidden')) closeAllFilters();
|
||||||
|
bar.classList.add('filter-bar-hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetGesture(y) {
|
||||||
|
lastY = y;
|
||||||
|
lastDir = null;
|
||||||
|
acc = 0;
|
||||||
|
lockedDir = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onScrollFrame() {
|
||||||
|
const y = window.scrollY || 0;
|
||||||
|
|
||||||
|
// 顶部时始终显示，并重置手势
|
||||||
|
if (y <= 8) {
|
||||||
|
setVisible(true);
|
||||||
|
resetGesture(y);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const delta = y - lastY;
|
||||||
|
if (Math.abs(delta) <= JITTER_THRESHOLD) {
|
||||||
|
lastY = y;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dir = delta > 0 ? 'down' : 'up';
|
||||||
|
if (delta !== 0) {
|
||||||
|
if (lastDir === null) {
|
||||||
|
lastDir = dir;
|
||||||
|
acc = 0;
|
||||||
|
lockedDir = null;
|
||||||
|
} else if (dir !== lastDir) {
|
||||||
|
// 手势中途反向：以反向前一刻为新起点，避免来回小幅抖动
|
||||||
|
lastDir = dir;
|
||||||
|
acc = 0;
|
||||||
|
lockedDir = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lastY = y;
|
||||||
|
|
||||||
|
if (lockedDir === dir) return;
|
||||||
|
acc += Math.abs(delta);
|
||||||
|
const threshold = dir === 'up' ? TRIGGER_DISTANCE_UP : TRIGGER_DISTANCE_DOWN;
|
||||||
|
if (acc < threshold) return;
|
||||||
|
|
||||||
|
setVisible(dir === 'up');
|
||||||
|
lockedDir = dir;
|
||||||
|
acc = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (ticking) return;
|
||||||
|
ticking = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
onScrollFrame();
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
}, { passive: true });
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
197
Prototype/pages/chat-history.html
Normal file
197
Prototype/pages/chat-history.html
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>助手对话记录 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.chat-item {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.chat-item:active {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">助手对话记录</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话列表 -->
|
||||||
|
<div class="divide-y divide-gray-100">
|
||||||
|
<!-- 对话记录 1 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">如何提升王先生的到店频率？</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">10分钟前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 8 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 2 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">帮我分析本月财务数据</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2小时前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 15 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 3 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">李女士的消费习惯分析</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 12 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 4 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">如何提高客户满意度？</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 20 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 5 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-error to-red-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">小燕本月业绩如何？</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2天前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 6 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 6 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">推荐一些促销活动方案</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">3天前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 25 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 7 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">分析高流失客户群体</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">1周前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 18 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
185
Prototype/pages/chat.html
Normal file
185
Prototype/pages/chat.html
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>助手对话 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.chat-container {
|
||||||
|
height: calc(100vh - 44px - 70px - env(safe-area-inset-top, 44px));
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.message-bubble {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.voice-btn:active {
|
||||||
|
background: #0052d9;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">智能助手</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话内容区域 -->
|
||||||
|
<div class="chat-container flex-1 p-4 space-y-4">
|
||||||
|
<!-- 引用内容卡片 -->
|
||||||
|
<div class="bg-gray-2 rounded-lg p-3 text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-7 mb-1">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||||
|
</svg>
|
||||||
|
<span>来源：任务 - 高优先召回</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-9">王先生 · 最近到店15天前 · VIP客户</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||||
|
<p class="text-sm">如何提升这位客户的到店频率？</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手消息 -->
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 text-white" 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-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed">
|
||||||
|
根据王先生的消费数据分析，我有以下建议：
|
||||||
|
</p>
|
||||||
|
<ol class="text-sm text-gray-13 leading-relaxed mt-2 list-decimal list-inside space-y-2">
|
||||||
|
<li><strong>个性化邀约</strong>：王先生偏好晚间21:00后到店，建议在这个时间段前发送邀约消息。</li>
|
||||||
|
<li><strong>活动推荐</strong>：他对斯诺克感兴趣，可以推荐即将举办的斯诺克比赛活动。</li>
|
||||||
|
<li><strong>储值提醒</strong>：他的储值余额还有8600元，可以提醒他来消费，避免余额长期闲置。</li>
|
||||||
|
<li><strong>专属服务</strong>：安排他熟悉的助教张三接待，提升服务体验。</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||||
|
<p class="text-sm">能帮我生成一条邀约话术吗？</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手消息 -->
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 text-white" 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-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed">
|
||||||
|
好的，根据王先生的特点，为您生成以下邀约话术：
|
||||||
|
</p>
|
||||||
|
<div class="mt-3 p-3 bg-primary-light rounded-lg">
|
||||||
|
<p class="text-sm text-primary leading-relaxed">
|
||||||
|
"王哥您好！好久不见了，最近工作顺利吧？😊 我们店里最近新到了几张英国进口的斯诺克球桌，球感特别好，知道您是斯诺克爱好者，第一时间想到邀请您来体验一下。这周末晚上有空吗？我提前给您预留好包厢～"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-7 mt-2">💡 提示：建议在晚间8点左右发送，这是王先生活跃的时间段。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||||
|
<p class="text-sm">太棒了，谢谢！</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手消息 -->
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 text-white" 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-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed">
|
||||||
|
不客气！祝您沟通顺利！如果需要更多帮助，随时问我。😊
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 输入区域 -->
|
||||||
|
<div class="bg-white border-t border-gray-2 p-3 pb-6">
|
||||||
|
<div class="flex items-end gap-2">
|
||||||
|
<div class="flex-1 bg-gray-1 rounded-2xl px-4 py-2.5 flex items-center">
|
||||||
|
<input type="text" placeholder="输入消息..." class="flex-1 bg-transparent text-sm text-gray-13 placeholder-gray-6 outline-none">
|
||||||
|
</div>
|
||||||
|
<button class="voice-btn w-10 h-10 bg-gray-1 rounded-full flex items-center justify-center text-gray-7 transition-colors">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
|
||||||
|
<path d="M19 10v2a7 7 0 01-14 0v-2"/>
|
||||||
|
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||||
|
<line x1="8" y1="23" x2="16" y2="23"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
213
Prototype/pages/coach-detail.html
Normal file
213
Prototype/pages/coach-detail.html
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>助教详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
/* 覆盖banner样式 */
|
||||||
|
.banner-bg.theme-coral .text-white {
|
||||||
|
color: #ffffff !important;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.banner-bg.theme-coral .text-emerald-300 {
|
||||||
|
color: #6ee7b7 !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 助教信息 -->
|
||||||
|
<div class="banner-bg theme-coral 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 mb-4">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</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-amber-400/30 text-amber-100 rounded-full text-xs">星级</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-white/70 text-sm">
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">中🎱</span>
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">🎯 斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">工龄</p>
|
||||||
|
<p class="font-medium text-sm">3年</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">客户数</p>
|
||||||
|
<p class="font-medium text-sm">68</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">本月课时</p>
|
||||||
|
<p class="font-medium text-sm">85h</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">满意度</p>
|
||||||
|
<p class="font-medium text-emerald-300 text-sm">4.9</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 专业技能 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">专业技能</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">中🎱 精通</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎯 斯诺克</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">🎳 花式</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
专攻中式八球和斯诺克教学，具有 3 年专业教学经验。擅长基础教学和进阶技巧指导，累计培训学员 200+，多名学员参加业余比赛获奖。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 擅长领域 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">擅长领域</h2>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">基础入门</p>
|
||||||
|
<p class="text-xs text-gray-6">零基础学员快速上手</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">技巧进阶</p>
|
||||||
|
<p class="text-xs text-gray-6">走位、翻袋、解球</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">心态训练</p>
|
||||||
|
<p class="text-xs text-gray-6">比赛心理素质培养</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">战术分析</p>
|
||||||
|
<p class="text-xs text-gray-6">局面判断与策略</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-green-500 to-emerald-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-green-400 to-emerald-500 rounded-full" style="width: 92%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-success">0.92</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
您是该助教的熟客，共接受过 25 次教学服务。该助教对您的技术水平和学习偏好非常了解，能够提供针对性指导。
|
||||||
|
</p>
|
||||||
|
</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="space-y-3">
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💖</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">张三</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-success font-medium">0.95</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">李四</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-warning font-medium">0.82</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">王五</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-7 font-medium">0.68</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
226
Prototype/pages/customer-detail.html
Normal file
226
Prototype/pages/customer-detail.html
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>客户详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-dark-gold 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 mb-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-gradient-to-r from-amber-500 to-yellow-400 text-black font-medium rounded-full text-xs">VIP</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||||
|
<span>138****5678</span>
|
||||||
|
<span>VIP20231215</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white/10 rounded-xl backdrop-blur-sm">
|
||||||
|
<div class="grid grid-cols-3">
|
||||||
|
<div class="text-center py-3 border-r border-white/10">
|
||||||
|
<p class="font-medium text-emerald-300 text-sm">¥8,600</p>
|
||||||
|
<p class="text-white/60 text-xs mt-1">储值余额</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-white/10">
|
||||||
|
<p class="font-medium text-sm">¥32,450</p>
|
||||||
|
<p class="text-white/60 text-xs mt-1">累计消费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||||
|
<p class="text-white/60 text-xs mt-1">门店</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 消费习惯 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 高客单价</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-error text-xs rounded-full border border-pink-100">🍷 爱点酒水</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。近 60 天到店 8 次，消费金额 2,800 元。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-green-500 to-emerald-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-green-400 to-emerald-500 rounded-full" style="width: 85%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-success">0.85</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。该客户与您的互动频率较高，是您的重点维护客户。
|
||||||
|
</p>
|
||||||
|
</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="space-y-3">
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💖</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-success font-medium">0.92</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">泡芙</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-warning font-medium">0.78</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-7 font-medium">0.65</span>
|
||||||
|
</div>
|
||||||
|
</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-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
Prototype/pages/feiqiu-ETL.code-workspace
Normal file
13
Prototype/pages/feiqiu-ETL.code-workspace
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "../../../../dev/LLTQ/ETL/feiqiu-ETL"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "../.."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {
|
||||||
|
"liveServer.settings.multiRootWorkspaceName": "LLZQ-1"
|
||||||
|
}
|
||||||
|
}
|
||||||
155
Prototype/pages/home-settings.html
Normal file
155
Prototype/pages/home-settings.html
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>首页设置 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.radio-checked {
|
||||||
|
border-color: #0052d9;
|
||||||
|
background: #0052d9;
|
||||||
|
}
|
||||||
|
.radio-checked::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.option-card {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.option-card.selected {
|
||||||
|
border-color: #0052d9;
|
||||||
|
background: linear-gradient(135deg, #ecf2fe 0%, #f8faff 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">首页设置</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 说明文字 -->
|
||||||
|
<div class="px-4 py-4">
|
||||||
|
<p class="text-sm text-gray-7">选择登录后默认显示的首页</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 选项列表 -->
|
||||||
|
<div class="px-4 space-y-3">
|
||||||
|
<div id="option-task" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer selected" onclick="selectHome('task')">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||||
|
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-base font-medium text-gray-13 mb-1">任务</p>
|
||||||
|
<p class="text-xs text-gray-6">查看待办任务和业绩概览</p>
|
||||||
|
</div>
|
||||||
|
<div id="radio-task" class="w-5 h-5 border-2 border-gray-4 rounded-full relative radio-checked"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="option-board" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer" onclick="selectHome('board')">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||||
|
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-base font-medium text-gray-13 mb-1">看板</p>
|
||||||
|
<p class="text-xs text-gray-6">查看财务、客户、助教数据</p>
|
||||||
|
</div>
|
||||||
|
<div id="radio-board" class="w-5 h-5 border-2 border-gray-4 rounded-full relative"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 提示信息 -->
|
||||||
|
<div class="px-4 py-6">
|
||||||
|
<div class="flex items-start gap-3 p-4 bg-primary/5 rounded-xl">
|
||||||
|
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||||
|
</svg>
|
||||||
|
<p class="text-xs text-gray-7 leading-relaxed">设置会自动保存，切换选项后即刻生效。退出登录后重新登录仍会保持您的设置。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function selectHome(type) {
|
||||||
|
const taskRadio = document.getElementById('radio-task');
|
||||||
|
const boardRadio = document.getElementById('radio-board');
|
||||||
|
const taskOption = document.getElementById('option-task');
|
||||||
|
const boardOption = document.getElementById('option-board');
|
||||||
|
|
||||||
|
if (type === 'task') {
|
||||||
|
taskRadio.classList.add('radio-checked');
|
||||||
|
boardRadio.classList.remove('radio-checked');
|
||||||
|
taskOption.classList.add('selected');
|
||||||
|
boardOption.classList.remove('selected');
|
||||||
|
} else {
|
||||||
|
boardRadio.classList.add('radio-checked');
|
||||||
|
taskRadio.classList.remove('radio-checked');
|
||||||
|
boardOption.classList.add('selected');
|
||||||
|
taskOption.classList.remove('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('已设置默认首页为:', type);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
198
Prototype/pages/login.html
Normal file
198
Prototype/pages/login.html
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>登录 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-gradient-main {
|
||||||
|
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||||
|
}
|
||||||
|
.checkbox-custom {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.checkbox-custom:checked {
|
||||||
|
background-color: #0052d9;
|
||||||
|
border-color: #0052d9;
|
||||||
|
}
|
||||||
|
.checkbox-custom:checked::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 1px;
|
||||||
|
width: 5px;
|
||||||
|
height: 9px;
|
||||||
|
border: solid white;
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.btn-disabled {
|
||||||
|
background-color: #dcdcdc !important;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-8px); }
|
||||||
|
}
|
||||||
|
.float-animation {
|
||||||
|
animation: float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-soft {
|
||||||
|
0%, 100% { opacity: 0.4; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
.pulse-soft {
|
||||||
|
animation: pulse-soft 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||||
|
<!-- 装饰元素 -->
|
||||||
|
<div class="absolute top-20 left-8 w-16 h-16 bg-primary/10 rounded-full blur-xl pulse-soft"></div>
|
||||||
|
<div class="absolute top-40 right-6 w-20 h-20 bg-cyan-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 1s;"></div>
|
||||||
|
<div class="absolute bottom-40 left-12 w-12 h-12 bg-blue-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||||
|
|
||||||
|
<!-- 顶部区域 - Logo 和名称 -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="relative mb-6 float-animation">
|
||||||
|
<div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-400 rounded-3xl flex items-center justify-center shadow-xl shadow-primary/30">
|
||||||
|
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.3"/>
|
||||||
|
<circle cx="12" cy="12" r="6" fill="currentColor"/>
|
||||||
|
<circle cx="12" cy="12" r="2" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<!-- 装饰点 -->
|
||||||
|
<div class="absolute -top-1 -right-1 w-4 h-4 bg-cyan-400 rounded-full shadow-lg"></div>
|
||||||
|
<div class="absolute -bottom-2 -left-2 w-3 h-3 bg-blue-300 rounded-full shadow-lg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应用名称 -->
|
||||||
|
<h1 class="text-2xl font-bold text-gray-13 mb-2">球房运营助手</h1>
|
||||||
|
|
||||||
|
<!-- 产品描述 -->
|
||||||
|
<p class="text-gray-7 text-sm text-center leading-relaxed mb-8">
|
||||||
|
为台球厅提升运营效率的内部管理工具
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 功能亮点 -->
|
||||||
|
<div class="w-full max-w-sm bg-white/60 backdrop-blur-sm rounded-2xl p-5 mb-6">
|
||||||
|
<div class="grid grid-cols-3 gap-4 text-center">
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-9 font-medium">任务管理</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-9 font-medium">数据看板</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<svg class="w-5 h-5 text-warning" 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>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-9 font-medium">智能助手</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部区域 - 登录按钮和协议 -->
|
||||||
|
<div class="px-8 pb-10 relative z-10">
|
||||||
|
<!-- 微信登录按钮 -->
|
||||||
|
<button id="loginBtn" class="btn-disabled w-full py-4 rounded-xl text-white font-medium text-base flex items-center justify-center gap-2 transition-all duration-200 shadow-lg">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
|
||||||
|
</svg>
|
||||||
|
使用微信登录
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 协议勾选 -->
|
||||||
|
<div class="flex items-start gap-3 mt-5">
|
||||||
|
<input type="checkbox" id="agreeCheckbox" class="checkbox-custom w-4 h-4 mt-0.5 border-2 border-gray-4 rounded appearance-none cursor-pointer transition-all duration-200 flex-shrink-0">
|
||||||
|
<label for="agreeCheckbox" class="text-xs text-gray-7 leading-relaxed cursor-pointer">
|
||||||
|
我已阅读并同意
|
||||||
|
<a href="#" class="text-primary font-medium">《用户协议》</a>
|
||||||
|
和
|
||||||
|
<a href="#" class="text-primary font-medium">《隐私政策》</a>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部说明 -->
|
||||||
|
<p class="text-xs text-gray-5 text-center mt-6">
|
||||||
|
仅限球房内部员工使用
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const checkbox = document.getElementById('agreeCheckbox');
|
||||||
|
const loginBtn = document.getElementById('loginBtn');
|
||||||
|
|
||||||
|
function updateButtonState() {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
loginBtn.classList.remove('btn-disabled');
|
||||||
|
loginBtn.classList.add('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
|
||||||
|
} else {
|
||||||
|
loginBtn.classList.add('btn-disabled');
|
||||||
|
loginBtn.classList.remove('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox.addEventListener('change', updateButtonState);
|
||||||
|
|
||||||
|
loginBtn.addEventListener('click', function() {
|
||||||
|
if (!checkbox.checked) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 模拟登录
|
||||||
|
alert('正在使用微信登录...');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
172
Prototype/pages/my-profile.html
Normal file
172
Prototype/pages/my-profile.html
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>我的 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">我的</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户信息区域 -->
|
||||||
|
<div class="bg-white p-6 flex items-center gap-4">
|
||||||
|
<div class="w-16 h-16 rounded-full overflow-hidden shadow-lg">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="text-lg font-semibold text-gray-13">小燕</span>
|
||||||
|
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded">助教</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 菜单列表 -->
|
||||||
|
<div class="mt-4">
|
||||||
|
<a href="notes.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-primary" 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>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">备注记录</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="chat-history.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-success/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-success" 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>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">助手对话记录</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="home-settings.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-warning/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">首页设置</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button onclick="showLogoutModal()" class="w-full flex items-center justify-between bg-white px-4 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-error/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||||
|
<polyline points="16 17 21 12 16 7"/>
|
||||||
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">退出账号</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 退出确认弹窗 -->
|
||||||
|
<div id="logoutModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
|
||||||
|
<div class="bg-white rounded-2xl w-72 overflow-hidden">
|
||||||
|
<div class="p-6 text-center">
|
||||||
|
<h3 class="text-base font-medium text-gray-13 mb-2">确认退出</h3>
|
||||||
|
<p class="text-sm text-gray-7">确认退出当前账号吗？</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex border-t border-gray-2">
|
||||||
|
<button onclick="hideLogoutModal()" class="flex-1 py-3 text-sm text-gray-7 border-r border-gray-2">取消</button>
|
||||||
|
<button onclick="logout()" class="flex-1 py-3 text-sm text-error font-medium">退出</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<!-- 通用底部导航 -->
|
||||||
|
<script src="../js/bottom-nav.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showLogoutModal() {
|
||||||
|
document.getElementById('logoutModal').classList.remove('hidden');
|
||||||
|
document.getElementById('logoutModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideLogoutModal() {
|
||||||
|
document.getElementById('logoutModal').classList.add('hidden');
|
||||||
|
document.getElementById('logoutModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
144
Prototype/pages/no-permission.html
Normal file
144
Prototype/pages/no-permission.html
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>无权限 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-pattern {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e34d59' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: rotate(0deg); }
|
||||||
|
25% { transform: rotate(-5deg); }
|
||||||
|
75% { transform: rotate(5deg); }
|
||||||
|
}
|
||||||
|
.shake-animation {
|
||||||
|
animation: shake 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-pattern min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部装饰 -->
|
||||||
|
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-error/10 to-transparent"></div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||||
|
<!-- 图标区域 -->
|
||||||
|
<div class="relative mb-8">
|
||||||
|
<!-- 背景光晕 -->
|
||||||
|
<div class="absolute inset-0 w-32 h-32 bg-error/20 rounded-full blur-xl"></div>
|
||||||
|
|
||||||
|
<!-- 主图标 -->
|
||||||
|
<div class="relative w-28 h-28 bg-gradient-to-br from-rose-400 to-red-500 rounded-3xl flex items-center justify-center shadow-xl shadow-error/30">
|
||||||
|
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 装饰点 -->
|
||||||
|
<div class="absolute -top-2 -right-2 w-4 h-4 bg-error rounded-full opacity-60"></div>
|
||||||
|
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-rose-300 rounded-full opacity-60"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文字区域 -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-gray-10 mb-3">无访问权限</h1>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||||
|
很抱歉，您的访问申请未通过审核，或当前账号无访问权限
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 原因说明卡片 -->
|
||||||
|
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||||
|
<div class="flex items-start gap-4 mb-4">
|
||||||
|
<div class="w-10 h-10 bg-error/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">可能的原因</p>
|
||||||
|
<ul class="text-xs text-gray-6 space-y-1">
|
||||||
|
<li>• 申请信息不完整或不符合要求</li>
|
||||||
|
<li>• 非本店授权员工账号</li>
|
||||||
|
<li>• 账号权限已被管理员收回</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-4 border-t border-gray-100">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-6">请联系管理员</span>
|
||||||
|
<span class="text-sm text-gray-13 font-medium">厉超</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 帮助提示 -->
|
||||||
|
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs">如有疑问，请联系管理员重新申请</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="px-8 pb-12">
|
||||||
|
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||||
|
<polyline points="16 17 21 12 16 7"/>
|
||||||
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
更换登录账号
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function switchAccount() {
|
||||||
|
// 清除登录凭证
|
||||||
|
localStorage.clear();
|
||||||
|
sessionStorage.clear();
|
||||||
|
// 返回登录页
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
142
Prototype/pages/notes.html
Normal file
142
Prototype/pages/notes.html
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>备注记录 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">备注记录</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注列表 -->
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<!-- 备注卡片 1 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
客户今天表示下周有朋友生日聚会，想预约包厢。已告知包厢需要提前3天预约，客户说会尽快确定时间再联系。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：王先生</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-27 15:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 2 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
完成高优先召回任务。客户反馈最近工作太忙，这周末会来店里。已提醒客户储值卡还有2000元余额，下月到期需要续费。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：高优先召回</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-26 18:45</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 3 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
泡芙本月表现优秀，课时完成率达到120%，客户评价全部5星。建议下月提升课时费标准。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：泡芙</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-25 10:20</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 4 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
客户对今天的服务非常满意，特别提到小燕的教学很专业。客户表示会推荐朋友来店里体验。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：李女士</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-24 21:15</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 5 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
关系构建任务完成。与客户进行了30分钟的深入交流，了解到客户是企业高管，经常需要商务宴请场地。已记录客户需求，后续可以推荐团建套餐。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：关系构建</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-23 19:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 6 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
客户今天充值了5000元，选择的是尊享套餐。客户提到喜欢安静的环境，以后尽量安排包厢。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：张先生</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-22 14:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 7 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
Amy最近工作状态很好，主动承担了培训新员工的任务。但需要注意她最近加班较多，避免过度疲劳。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：Amy</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-21 09:45</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
226
Prototype/pages/performance.html
Normal file
226
Prototype/pages/performance.html
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>业绩详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
/* 优化banner内元素对比度 */
|
||||||
|
.banner-bg .stat-value {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.banner-bg .stat-highlight {
|
||||||
|
color: #a7f3d0;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
.banner-bg .stat-label {
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
}
|
||||||
|
.banner-bg .info-card {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border: 1px solid rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen pb-8">
|
||||||
|
<!-- 通栏 Banner -->
|
||||||
|
<div class="banner-bg theme-blue-light 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 mb-5">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="text-xl font-semibold">小燕</span>
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 核心数据 -->
|
||||||
|
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||||
|
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||||||
|
<p class="stat-label text-xs mb-1">本月预计收入</p>
|
||||||
|
<p class="stat-value text-2xl font-bold">¥12,300</p>
|
||||||
|
</div>
|
||||||
|
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||||||
|
<p class="stat-label text-xs mb-1">综合完成率</p>
|
||||||
|
<p class="stat-highlight text-2xl font-bold">87%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 进度信息 -->
|
||||||
|
<div class="info-card rounded-xl p-4 backdrop-blur-sm">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="stat-label text-sm font-medium">本月目标进度</span>
|
||||||
|
<span class="stat-value text-xs font-medium">3万 / 5万</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2.5 bg-white/25 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-white rounded-full shadow-sm" style="width: 60%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 指标内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 收入构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">收入构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">4000</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">基本工资</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">5680</p>
|
||||||
|
<p class="text-xs text-success mt-1">课时 95%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1520</p>
|
||||||
|
<p class="text-xs text-warning mt-1">充值 76%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1100</p>
|
||||||
|
<p class="text-xs text-success mt-1">酒水 110%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 台球助教业绩 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">台球助教业绩</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">48</p>
|
||||||
|
<p class="text-xs text-warning mt-1">课程 目标60</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">72h</p>
|
||||||
|
<p class="text-xs text-warning mt-1">时长 目标90</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">32</p>
|
||||||
|
<p class="text-xs text-success mt-1">客户 107%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">4.8</p>
|
||||||
|
<p class="text-xs text-success mt-1">满意度 107%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 充值业绩 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">充值业绩</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.52万</p>
|
||||||
|
<p class="text-xs text-warning mt-1">金额 76%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">8</p>
|
||||||
|
<p class="text-xs text-warning mt-1">笔数 目标10</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">3</p>
|
||||||
|
<p class="text-xs text-success mt-1">新客 100%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">5</p>
|
||||||
|
<p class="text-xs text-warning mt-1">续费 71%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 酒水业绩 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">酒水业绩</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.1万</p>
|
||||||
|
<p class="text-xs text-success mt-1">销售 110%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">45</p>
|
||||||
|
<p class="text-xs text-success mt-1">笔数 113%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">244</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">客单价</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">68%</p>
|
||||||
|
<p class="text-xs text-success mt-1">转化 ↑5%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
164
Prototype/pages/reviewing.html
Normal file
164
Prototype/pages/reviewing.html
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>审核中 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-pattern {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230052d9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
.float-animation {
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-soft {
|
||||||
|
0%, 100% { opacity: 0.6; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
.pulse-soft {
|
||||||
|
animation: pulse-soft 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-pattern min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部装饰 -->
|
||||||
|
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-warning/10 to-transparent"></div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||||
|
<!-- 图标区域 -->
|
||||||
|
<div class="relative mb-8 float-animation">
|
||||||
|
<!-- 背景光晕 -->
|
||||||
|
<div class="absolute inset-0 w-32 h-32 bg-warning/20 rounded-full blur-xl"></div>
|
||||||
|
|
||||||
|
<!-- 主图标 -->
|
||||||
|
<div class="relative w-28 h-28 bg-gradient-to-br from-amber-400 to-orange-500 rounded-3xl flex items-center justify-center shadow-xl shadow-warning/30">
|
||||||
|
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 装饰点 -->
|
||||||
|
<div class="absolute -top-2 -right-2 w-4 h-4 bg-warning rounded-full pulse-soft"></div>
|
||||||
|
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-amber-300 rounded-full pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文字区域 -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-gray-10 mb-3">申请审核中</h1>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||||
|
您的访问申请已提交成功，正在等待管理员审核，请耐心等待
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 进度提示卡片 -->
|
||||||
|
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||||
|
<div class="flex items-center gap-4 mb-4">
|
||||||
|
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm font-medium text-gray-13">审核进度</p>
|
||||||
|
<p class="text-xs text-gray-6">通常需要 1-3 个工作日</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 bg-success rounded-full flex items-center justify-center">
|
||||||
|
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||||
|
<polyline points="20 6 9 17 4 12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-9">已提交</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200">
|
||||||
|
<div class="h-full w-1/2 bg-warning rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 bg-warning/20 rounded-full flex items-center justify-center">
|
||||||
|
<div class="w-2 h-2 bg-warning rounded-full pulse-soft"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-6">审核中</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 bg-gray-100 rounded-full"></div>
|
||||||
|
<span class="text-xs text-gray-5">通过</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 联系提示 -->
|
||||||
|
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||||
|
<svg class="w-4 h-4" 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>
|
||||||
|
<span class="text-xs">如有疑问，请联系管理员</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="px-8 pb-12">
|
||||||
|
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||||
|
<polyline points="16 17 21 12 16 7"/>
|
||||||
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
更换登录账号
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function switchAccount() {
|
||||||
|
// 清除登录凭证
|
||||||
|
localStorage.clear();
|
||||||
|
sessionStorage.clear();
|
||||||
|
// 返回登录页
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
205
Prototype/pages/task-detail-callback.html
Normal file
205
Prototype/pages/task-detail-callback.html
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 客户回访</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.purple::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-teal 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>135****6677</span>
|
||||||
|
<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">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🎱 斯诺克爱好者</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">⭐ 高满意度</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-600 text-xs rounded-full border border-purple-100">🍷 爱点酒水</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
忠实老客户，入会 1 年半。偏好周末下午时段，喜欢斯诺克。平均消费 420 元/次，月均到店 6-8 次，经常点酒水和小食。上次服务好评。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-pink-500 to-rose-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-pink-400 to-rose-500 rounded-full" style="width: 88%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-pink-500">0.88</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
长期合作关系良好，共有 45 次服务记录。客户多次指定您服务，评价均为 5 星。是您的核心客户之一，需要持续维护。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title purple text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||||
|
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||||
|
📞 常规回访要点
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||||
|
该客户上次到店是 3 天前，关系良好，进行常规关怀回访：
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"赵姐您好！上次打球感觉怎么样？新到的球杆手感还习惯吗？这周末您有空的话，可以提前帮您预留老位置~"
|
||||||
|
</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-teal-500 to-cyan-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-teal-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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-teal-500/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
205
Prototype/pages/task-detail-priority.html
Normal file
205
Prototype/pages/task-detail-priority.html
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 优先召回</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-orange 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>139****1234</span>
|
||||||
|
<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">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 偏好夜场</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 中式八球</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-600 text-xs rounded-full border border-purple-100">👥 爱组局</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
偏好晚间 20:00-23:00 时段，喜欢中式八球。平均消费 220 元/次，之前月均到店 3-4 次，近期明显减少。喜欢和朋友组局打球。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-amber-400 to-yellow-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-amber-300 to-yellow-500 rounded-full" style="width: 55%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-amber-500">0.55</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
最近 2 个月互动较少，仅有 3 次服务记录。客户对您的印象中等，有提升空间。建议增加互动频次，建立更好的服务关系。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||||
|
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-4 border border-orange-100">
|
||||||
|
<p class="text-sm text-warning leading-relaxed font-medium mb-3">
|
||||||
|
💡 建议执行
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||||
|
该客户消费频率从月均 4 次下降到近月仅 1 次，需要关注原因：
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"张哥，好久没见您来打球了，最近忙吗？店里这周六有个球友聚会活动，想邀请您来玩，顺便认识一些新球友~"
|
||||||
|
</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-orange-500 to-amber-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-orange-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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-orange-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-orange-500/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
205
Prototype/pages/task-detail-relationship.html
Normal file
205
Prototype/pages/task-detail-relationship.html
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 关系构建</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.pink::before { background: linear-gradient(180deg, #e91e63, #f48fb1); }
|
||||||
|
</style>
|
||||||
|
</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>
|
||||||
|
<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">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-amber-50 to-yellow-50 text-amber-600 text-xs rounded-full border border-amber-100">☀️ 偏好下午</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 初学者</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-pink-600 text-xs rounded-full border border-pink-100">💎 消费潜力大</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
新客户，入会 2 个月。偏好下午 14:00-18:00 时段，对台球感兴趣但技术一般。消费能力较强，单次消费 180 元，有提升空间。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<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">
|
||||||
|
💝 关系构建重点
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"陈哥您好，上次看您打球进步很快呀！我们这周有个初学者交流会，可以认识一些同水平的球友一起练习，您有兴趣参加吗？"
|
||||||
|
</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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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 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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
203
Prototype/pages/task-detail.html
Normal file
203
Prototype/pages/task-detail.html
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-red 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>138****5678</span>
|
||||||
|
<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">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 储值 高客单价</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-pink-500 to-rose-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-pink-400 to-rose-500 rounded-full" style="width: 85%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-pink-500">0.85</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||||
|
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||||
|
💡 建议执行
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||||
|
该客户已有 15 天未到店，存在流失风险。建议通过微信联系：
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"王哥您好，好久不见！最近店里新到了几张国际标准的斯诺克球桌，知道您是斯诺克爱好者，想邀请您有空来体验一下~"
|
||||||
|
</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-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
326
Prototype/pages/task-list.html
Normal file
326
Prototype/pages/task-list.html
Normal file
@@ -0,0 +1,326 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务列表 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
}
|
||||||
|
/* 任务卡片边框颜色 */
|
||||||
|
.task-card {
|
||||||
|
position: relative;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
}
|
||||||
|
.task-card.high-priority {
|
||||||
|
border-left-color: #f43f5e;
|
||||||
|
}
|
||||||
|
.task-card.priority {
|
||||||
|
border-left-color: #f97316;
|
||||||
|
}
|
||||||
|
.task-card.relationship {
|
||||||
|
border-left-color: #ec4899;
|
||||||
|
}
|
||||||
|
.task-card.callback {
|
||||||
|
border-left-color: #14b8a6;
|
||||||
|
}
|
||||||
|
/* 标签颜色 - 圆角矩形 */
|
||||||
|
.tag-high-priority {
|
||||||
|
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tag-priority {
|
||||||
|
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tag-relationship {
|
||||||
|
background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tag-callback {
|
||||||
|
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
/* 进度条动画 */
|
||||||
|
.progress-bar {
|
||||||
|
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
|
||||||
|
transition: width 0.6s ease-out;
|
||||||
|
}
|
||||||
|
/* 业绩卡片文字样式 */
|
||||||
|
.stat-value {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
.stat-highlight {
|
||||||
|
color: #6ee7b7;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.stat-label {
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
.stat-secondary {
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
}
|
||||||
|
.stat-accent {
|
||||||
|
color: #fcd34d;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部区域 - 用户信息和业绩卡片 -->
|
||||||
|
<div class="banner-bg theme-blue texture-aurora text-white pb-4">
|
||||||
|
<!-- 用户信息 -->
|
||||||
|
<div class="px-5 pt-10 pb-3">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="text-xl font-semibold">小燕</span>
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 业绩进度卡片 -->
|
||||||
|
<div class="mx-4">
|
||||||
|
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-2.5 border border-white/20">
|
||||||
|
<!-- 第一层：标题行 -->
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<span class="stat-label text-sm font-medium">本月业绩进度</span>
|
||||||
|
<span class="stat-accent text-xl font-bold">60%</span>
|
||||||
|
</div>
|
||||||
|
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
|
||||||
|
查看详情
|
||||||
|
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二层：进度条 -->
|
||||||
|
<div class="h-1.5 bg-white/20 rounded-full overflow-hidden mb-2.5">
|
||||||
|
<div class="progress-bar h-full rounded-full" style="width: 60%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第三层：核心数据 - 两列布局 -->
|
||||||
|
<div class="flex items-stretch mb-2.5">
|
||||||
|
<div class="flex-1 pr-3 border-r border-white/25 text-center">
|
||||||
|
<div>
|
||||||
|
<span class="stat-highlight text-xl font-bold">82.5</span>
|
||||||
|
<span class="stat-secondary text-sm font-medium"> / 120</span>
|
||||||
|
</div>
|
||||||
|
<p class="stat-label text-xs">已完成 / 目标课时</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 pl-3 text-center">
|
||||||
|
<div>
|
||||||
|
<span class="stat-highlight text-xl font-bold">3.5</span>
|
||||||
|
<span class="stat-secondary text-sm font-medium"> / 10</span>
|
||||||
|
<span class="stat-secondary text-xs">万</span>
|
||||||
|
</div>
|
||||||
|
<p class="stat-label text-xs">已完成 / 目标销售额</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第四层：预计收入 -->
|
||||||
|
<div class="flex items-center justify-between pt-2 border-t border-white/25">
|
||||||
|
<span class="stat-label text-xs">11月预计收入</span>
|
||||||
|
<a href="performance.html" class="flex items-center gap-1.5 group">
|
||||||
|
<span class="stat-value text-lg font-bold">¥12,345</span>
|
||||||
|
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 待办任务列表 -->
|
||||||
|
<div class="px-4 py-5">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h2 class="text-base font-semibold text-gray-13">待办任务</h2>
|
||||||
|
<span class="text-sm text-gray-6">共 7 项</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务卡片列表 -->
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- 高优先召回 - 王先生 -->
|
||||||
|
<a href="task-detail.html" class="task-card high-priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">王先生</span>
|
||||||
|
<span class="text-sm">💖</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：15天前 · 余额：非常多</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">高流失风险，建议尽快联系</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 高优先召回 - 李女士 -->
|
||||||
|
<a href="task-detail.html" class="task-card high-priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">李女士</span>
|
||||||
|
<span class="text-sm">🧡</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：20天前 · 余额：非常多</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">VIP客户，储值余额较多</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 优先召回 - 张先生 -->
|
||||||
|
<a href="task-detail-priority.html" class="task-card priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">张先生</span>
|
||||||
|
<span class="text-sm">💛</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：10天前 · 余额：一般</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">消费频率下降，需关注</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 优先召回 - 刘先生 -->
|
||||||
|
<a href="task-detail-priority.html" class="task-card priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">刘先生</span>
|
||||||
|
<span class="text-sm">💙</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：8天前 · 余额：一般</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">偏好晚间时段，可推荐夜场套餐</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 关系构建 - 陈先生 -->
|
||||||
|
<a href="task-detail-relationship.html" class="task-card relationship block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-relationship px-2 py-0.5 text-white text-xs font-medium">关系构建</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">陈先生</span>
|
||||||
|
<span class="text-sm">💙</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：5天前 · 余额：无</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">潜力客户，建议加强互动</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户回访 - 赵女士 -->
|
||||||
|
<a href="task-detail-callback.html" class="task-card callback block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">赵女士</span>
|
||||||
|
<span class="text-sm">🧡</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：3天前 · 余额：非常多</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">常规回访，保持联系</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户回访 - 周先生 -->
|
||||||
|
<a href="task-detail-callback.html" class="task-card callback block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">周先生</span>
|
||||||
|
<span class="text-sm">💛</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：5天前 · 余额：一般</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">新客户跟进，了解需求</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<!-- 通用底部导航 -->
|
||||||
|
<script src="../js/bottom-nav.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
180
Prototype/pages_BAKUP/apply.html
Normal file
180
Prototype/pages_BAKUP/apply.html
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>账号申请 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-gradient-main {
|
||||||
|
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white/80 backdrop-blur-lg sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-200/50">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="15 18 9 12 15 6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-base font-medium text-gray-13">申请访问权限</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="flex-1 p-4">
|
||||||
|
<!-- 欢迎卡片 -->
|
||||||
|
<div class="bg-gradient-to-br from-primary to-blue-400 rounded-2xl p-5 mb-4 text-white shadow-lg shadow-primary/20">
|
||||||
|
<div class="flex items-center gap-4 mb-3">
|
||||||
|
<div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold mb-1">欢迎加入球房运营助手</h2>
|
||||||
|
<p class="text-white/80 text-sm">请填写申请信息，等待管理员审核</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 说明文字 -->
|
||||||
|
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 mb-4">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-primary font-medium mb-1">申请说明</p>
|
||||||
|
<p class="text-xs text-gray-7 leading-relaxed">
|
||||||
|
请填写您的真实信息，包括姓名、岗位和所属门店等，以便管理员快速审核您的申请。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表单区域 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||||
|
<div class="mb-3 flex items-center gap-1">
|
||||||
|
<span class="text-error text-sm">*</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">申请说明</span>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="applyReason"
|
||||||
|
class="w-full h-36 p-4 bg-gray-50 rounded-xl border border-gray-100 resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
|
||||||
|
placeholder="点击填写申请信息： 1. 您的姓名 2. 您的岗位（如：助教、店长等） 3. 所属门店 4. 其他说明（可选）"
|
||||||
|
></textarea>
|
||||||
|
<p id="errorTip" class="text-error text-xs mt-2 hidden">申请说明不能为空</p>
|
||||||
|
<div class="flex items-center justify-between mt-3">
|
||||||
|
<span class="text-xs text-gray-5">请认真填写，信息不完整可能导致审核不通过</span>
|
||||||
|
<span class="text-xs text-gray-6"><span id="charCount">0</span>/200</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 审核流程说明 -->
|
||||||
|
<div class="mt-4 bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 mb-4">审核流程</h3>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-xs font-medium mb-2">1</div>
|
||||||
|
<span class="text-xs text-gray-7">提交申请</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">2</div>
|
||||||
|
<span class="text-xs text-gray-6">等待审核</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">3</div>
|
||||||
|
<span class="text-xs text-gray-6">审核通过</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">4</div>
|
||||||
|
<span class="text-xs text-gray-6">开始使用</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="p-4 pb-8 bg-white/80 backdrop-blur-lg border-t border-gray-100">
|
||||||
|
<button id="submitBtn" class="w-full py-4 bg-gradient-to-r from-primary to-blue-500 rounded-xl text-white font-medium text-base shadow-lg shadow-primary/30 active:scale-[0.98] transition-transform">
|
||||||
|
提交申请
|
||||||
|
</button>
|
||||||
|
<p class="text-xs text-gray-5 text-center mt-3">
|
||||||
|
审核通常需要 1-3 个工作日
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const textarea = document.getElementById('applyReason');
|
||||||
|
const charCount = document.getElementById('charCount');
|
||||||
|
const errorTip = document.getElementById('errorTip');
|
||||||
|
const submitBtn = document.getElementById('submitBtn');
|
||||||
|
|
||||||
|
textarea.addEventListener('input', function() {
|
||||||
|
const len = this.value.length;
|
||||||
|
charCount.textContent = len;
|
||||||
|
if (len > 200) {
|
||||||
|
this.value = this.value.slice(0, 200);
|
||||||
|
charCount.textContent = 200;
|
||||||
|
}
|
||||||
|
if (this.value.trim()) {
|
||||||
|
errorTip.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
submitBtn.addEventListener('click', function() {
|
||||||
|
if (!textarea.value.trim()) {
|
||||||
|
errorTip.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
alert('申请已提交，请等待审核');
|
||||||
|
window.location.href = 'reviewing.html';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
429
Prototype/pages_BAKUP/board-coach.html
Normal file
429
Prototype/pages_BAKUP/board-coach.html
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板-助教 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #0052d9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.filter-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.filter-overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1001;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.filter-dropdown.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.coach-card {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.coach-card:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-20">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 一级 Tab -->
|
||||||
|
<div class="flex">
|
||||||
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||||
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||||
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">助教</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域 -->
|
||||||
|
<div class="bg-white sticky top-[88px] z-10 px-4 py-3 flex gap-2 border-b border-gray-2">
|
||||||
|
<button onclick="toggleFilter('sort')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="sortLabel">创收最多</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('skill')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="skillLabel">不限</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="timeLabel">本月</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||||
|
|
||||||
|
<!-- 排序筛选弹窗 -->
|
||||||
|
<div id="sortDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('创收最多')">创收最多</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('创收最低')">创收最低</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('业绩最高')">业绩最高</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('业绩最低')">业绩最低</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最高')">工资最高</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最低')">工资最低</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('潜在客源储值')">潜在客源储值</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 擅长项目筛选弹窗 -->
|
||||||
|
<div id="skillDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('不限')">不限</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('中🎱')">中🎱</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('斯诺克')">斯诺克</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('麻将')">麻将</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('团建')">团建</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 时间筛选弹窗 -->
|
||||||
|
<div id="timeDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本月')">本月</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上个月')">上个月</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('最近3个月')">最近3个月</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本季度')">本季度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助教列表 -->
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<!-- 助教卡片 1 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">小</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">8.6万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 王先生</span>
|
||||||
|
<span>💖 李女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课86小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 2 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">泡</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded">高级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">7.2万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 陈先生</span>
|
||||||
|
<span>💛 刘女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课72小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 3 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">A</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">6.8万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 张先生</span>
|
||||||
|
<span>💛 周女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课68小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 4 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">麻将</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">5.5万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 赵先生</span>
|
||||||
|
<span>💛 吴女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课55小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 5 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">糖</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded">初级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">4.2万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 钱先生</span>
|
||||||
|
<span>💛 孙女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课42小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 助教卡片 6 -->
|
||||||
|
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">露</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">团建</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-success font-semibold">3.8万</p>
|
||||||
|
<p class="text-xs text-gray-6">本期流水</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 郑先生</span>
|
||||||
|
<span>💛 冯女士</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">上课38小时</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 TabBar -->
|
||||||
|
<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 justify-around px-4">
|
||||||
|
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">任务</span>
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||||
|
<!-- 三个柱子，有间隙，激活时填充 -->
|
||||||
|
<rect x="4" y="13" width="4" height="8" rx="1" fill="currentColor"/>
|
||||||
|
<rect x="10" y="8" width="4" height="13" rx="1" fill="currentColor"/>
|
||||||
|
<rect x="16" y="3" width="4" height="18" rx="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-primary font-medium">看板</span>
|
||||||
|
</div>
|
||||||
|
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">我的</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentFilter = null;
|
||||||
|
|
||||||
|
function toggleFilter(type) {
|
||||||
|
const overlay = document.getElementById('filterOverlay');
|
||||||
|
const sortDropdown = document.getElementById('sortDropdown');
|
||||||
|
const skillDropdown = document.getElementById('skillDropdown');
|
||||||
|
const timeDropdown = document.getElementById('timeDropdown');
|
||||||
|
|
||||||
|
if (currentFilter === type) {
|
||||||
|
closeAllFilters();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeAllFilters();
|
||||||
|
currentFilter = type;
|
||||||
|
overlay.classList.add('show');
|
||||||
|
|
||||||
|
if (type === 'sort') {
|
||||||
|
sortDropdown.classList.add('show');
|
||||||
|
} else if (type === 'skill') {
|
||||||
|
skillDropdown.classList.add('show');
|
||||||
|
} else if (type === 'time') {
|
||||||
|
timeDropdown.classList.add('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllFilters() {
|
||||||
|
currentFilter = null;
|
||||||
|
document.getElementById('filterOverlay').classList.remove('show');
|
||||||
|
document.getElementById('sortDropdown').classList.remove('show');
|
||||||
|
document.getElementById('skillDropdown').classList.remove('show');
|
||||||
|
document.getElementById('timeDropdown').classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectSort(value) {
|
||||||
|
document.getElementById('sortLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectSkill(value) {
|
||||||
|
document.getElementById('skillLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectTime(value) {
|
||||||
|
document.getElementById('timeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
427
Prototype/pages_BAKUP/board-customer.html
Normal file
427
Prototype/pages_BAKUP/board-customer.html
Normal file
@@ -0,0 +1,427 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板-客户 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #0052d9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.filter-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.filter-overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1001;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.filter-dropdown.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.customer-card {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.customer-card:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-20">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 一级 Tab -->
|
||||||
|
<div class="flex">
|
||||||
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||||
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">客户</a>
|
||||||
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域 -->
|
||||||
|
<div class="bg-white sticky top-[88px] z-10 px-4 py-3 flex gap-2 border-b border-gray-2">
|
||||||
|
<button onclick="toggleFilter('type')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="typeLabel">最应召回</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('project')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="projectLabel">不限</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||||
|
|
||||||
|
<!-- 类型筛选弹窗 -->
|
||||||
|
<div id="typeDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近到店')">最近到店</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最应召回')">最应召回</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近充值')">最近充值</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高消费')">最高消费</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高余额')">最高余额</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最频繁')">最频繁</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('潜力股')">潜力股</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最专一')">最专一</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目筛选弹窗 -->
|
||||||
|
<div id="projectDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('不限')">不限</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('中式/追分')">中式/追分</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('斯诺克')">斯诺克</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('麻将')">麻将</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('团建')">团建</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户列表 -->
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<!-- 客户卡片 1 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">王</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">王先生</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：15天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.92</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
<span>💛 泡芙</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">30天到店5次</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 2 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">李</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">李女士</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：20天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.88</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 Amy</span>
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">余额8000元</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 3 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">张</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">张先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：10天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.85</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">高频客户</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 4 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">刘</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">刘先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：8天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.78</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 泡芙</span>
|
||||||
|
<span>💛 Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">偏好斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 5 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">陈</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">陈先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：12天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.72</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">潜力客户</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 6 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">赵</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">赵女士</span>
|
||||||
|
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：5天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.68</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💖 泡芙</span>
|
||||||
|
<span>💖 小燕</span>
|
||||||
|
<span>💛 Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">余额12000元</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户卡片 7 -->
|
||||||
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||||
|
<span class="text-white font-semibold">周</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base font-semibold text-gray-13">周先生</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">最近：7天前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm text-primary font-semibold">0.65</p>
|
||||||
|
<p class="text-xs text-gray-6">召回因子</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-6">
|
||||||
|
<span>💛 Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-6">新客户</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 TabBar -->
|
||||||
|
<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 justify-around px-4">
|
||||||
|
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">任务</span>
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||||
|
<!-- 三个柱子，有间隙，激活时填充 -->
|
||||||
|
<rect x="4" y="13" width="4" height="8" rx="1" fill="currentColor"/>
|
||||||
|
<rect x="10" y="8" width="4" height="13" rx="1" fill="currentColor"/>
|
||||||
|
<rect x="16" y="3" width="4" height="18" rx="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-primary font-medium">看板</span>
|
||||||
|
</div>
|
||||||
|
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">我的</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentFilter = null;
|
||||||
|
|
||||||
|
function toggleFilter(type) {
|
||||||
|
const overlay = document.getElementById('filterOverlay');
|
||||||
|
const typeDropdown = document.getElementById('typeDropdown');
|
||||||
|
const projectDropdown = document.getElementById('projectDropdown');
|
||||||
|
|
||||||
|
if (currentFilter === type) {
|
||||||
|
closeAllFilters();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeAllFilters();
|
||||||
|
currentFilter = type;
|
||||||
|
overlay.classList.add('show');
|
||||||
|
|
||||||
|
if (type === 'type') {
|
||||||
|
typeDropdown.classList.add('show');
|
||||||
|
} else if (type === 'project') {
|
||||||
|
projectDropdown.classList.add('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllFilters() {
|
||||||
|
currentFilter = null;
|
||||||
|
document.getElementById('filterOverlay').classList.remove('show');
|
||||||
|
document.getElementById('typeDropdown').classList.remove('show');
|
||||||
|
document.getElementById('projectDropdown').classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectType(value) {
|
||||||
|
document.getElementById('typeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectProject(value) {
|
||||||
|
document.getElementById('projectLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
402
Prototype/pages_BAKUP/board-finance.html
Normal file
402
Prototype/pages_BAKUP/board-finance.html
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板-财务 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #0052d9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.filter-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.filter-overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1001;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.filter-dropdown.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.summary-gradient {
|
||||||
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-20">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 一级 Tab -->
|
||||||
|
<div class="flex">
|
||||||
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">财务</a>
|
||||||
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||||
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域 -->
|
||||||
|
<div class="bg-white sticky top-[88px] z-10 px-4 py-3 flex gap-2 border-b border-gray-2">
|
||||||
|
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="timeLabel">本月</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="toggleFilter('area')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||||
|
<span id="areaLabel">全部区域</span>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||||
|
|
||||||
|
<!-- 时间筛选弹窗 -->
|
||||||
|
<div id="timeDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本月')">
|
||||||
|
<span>本月</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-本月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上个月')">
|
||||||
|
<span>上个月</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-上个月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('最近3个月')">
|
||||||
|
<span>最近3个月</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-最近3个月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('最近半年')">
|
||||||
|
<span>最近半年</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-最近半年" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本季度')">
|
||||||
|
<span>本季度</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-本季度" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上个季度')">
|
||||||
|
<span>上个季度</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-上个季度" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本周')">
|
||||||
|
<span>本周</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-本周" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上周')">
|
||||||
|
<span>上周</span>
|
||||||
|
<svg class="w-4 h-4 text-primary hidden" id="time-check-上周" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 区域筛选弹窗 -->
|
||||||
|
<div id="areaDropdown" class="filter-dropdown" style="top: 132px;">
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectArea('全部区域')">全部区域</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('大厅')">大厅</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('A区')">A区</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('B区')">B区</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('C区')">C区</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('麻将房')">麻将房</div>
|
||||||
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('团建房')">团建房</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 财务汇总 -->
|
||||||
|
<div class="summary-gradient mx-4 mt-4 rounded-2xl p-5 text-white">
|
||||||
|
<div class="grid grid-cols-3 gap-4 text-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-white/60 text-xs mb-1">实际收入</p>
|
||||||
|
<p class="text-xl font-bold text-green-400">28.5万</p>
|
||||||
|
<p class="text-white/40 text-xs">预计</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-white/60 text-xs mb-1">实际支出</p>
|
||||||
|
<p class="text-xl font-bold text-rose-400">18.2万</p>
|
||||||
|
<p class="text-white/40 text-xs">预计</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-white/60 text-xs mb-1">净利润</p>
|
||||||
|
<p class="text-xl font-bold text-blue-400">10.3万</p>
|
||||||
|
<p class="text-white/40 text-xs">预计</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 指标内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 营业数据 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">营业数据</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">32.8万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">总流水</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">268元</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">客单价</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1,226</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">开台数</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">892</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">场次</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">2.3h</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">停留时长</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">3.2</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">翻台率</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 收入构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">收入构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">12.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">桌费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">8.6万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">助教费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">4.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">酒水</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">2.8万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">餐饮</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">3.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">包房费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">其他</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 支出构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">支出构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">6.0万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">房租</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">水电</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">8.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">人工</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">0.8万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">耗材</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.5万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">推广</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-t">
|
||||||
|
<p class="text-lg font-bold text-gray-13">0.2万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">其他</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 利润构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">利润构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">14.6万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">毛利</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">10.3万</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">净利</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-success">44.5%</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">毛利率</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-success">31.4%</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">净利率</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 TabBar -->
|
||||||
|
<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 justify-around px-4">
|
||||||
|
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">任务</span>
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||||
|
<!-- 三个柱子，有间隙，激活时填充 -->
|
||||||
|
<rect x="4" y="13" width="4" height="8" rx="1" fill="currentColor"/>
|
||||||
|
<rect x="10" y="8" width="4" height="13" rx="1" fill="currentColor"/>
|
||||||
|
<rect x="16" y="3" width="4" height="18" rx="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-primary font-medium">看板</span>
|
||||||
|
</div>
|
||||||
|
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">我的</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentFilter = null;
|
||||||
|
|
||||||
|
function toggleFilter(type) {
|
||||||
|
const overlay = document.getElementById('filterOverlay');
|
||||||
|
const timeDropdown = document.getElementById('timeDropdown');
|
||||||
|
const areaDropdown = document.getElementById('areaDropdown');
|
||||||
|
|
||||||
|
if (currentFilter === type) {
|
||||||
|
closeAllFilters();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeAllFilters();
|
||||||
|
currentFilter = type;
|
||||||
|
overlay.classList.add('show');
|
||||||
|
|
||||||
|
if (type === 'time') {
|
||||||
|
timeDropdown.classList.add('show');
|
||||||
|
} else if (type === 'area') {
|
||||||
|
areaDropdown.classList.add('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllFilters() {
|
||||||
|
currentFilter = null;
|
||||||
|
document.getElementById('filterOverlay').classList.remove('show');
|
||||||
|
document.getElementById('timeDropdown').classList.remove('show');
|
||||||
|
document.getElementById('areaDropdown').classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectTime(value) {
|
||||||
|
document.getElementById('timeLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectArea(value) {
|
||||||
|
document.getElementById('areaLabel').textContent = value;
|
||||||
|
closeAllFilters();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
197
Prototype/pages_BAKUP/chat-history.html
Normal file
197
Prototype/pages_BAKUP/chat-history.html
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>助手对话记录 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.chat-item {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.chat-item:active {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">助手对话记录</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话列表 -->
|
||||||
|
<div class="divide-y divide-gray-100">
|
||||||
|
<!-- 对话记录 1 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">如何提升王先生的到店频率？</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">10分钟前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 8 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 2 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">帮我分析本月财务数据</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2小时前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 15 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 3 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">李女士的消费习惯分析</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 12 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 4 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">如何提高客户满意度？</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 20 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 5 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-error to-red-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">小燕本月业绩如何？</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2天前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 6 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 6 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">推荐一些促销活动方案</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">3天前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 25 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 对话记录 7 -->
|
||||||
|
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 text-white" 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>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="text-sm font-medium text-gray-13 truncate">分析高流失客户群体</h3>
|
||||||
|
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">1周前</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-6">共 18 条消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
185
Prototype/pages_BAKUP/chat.html
Normal file
185
Prototype/pages_BAKUP/chat.html
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>助手对话 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.chat-container {
|
||||||
|
height: calc(100vh - 44px - 70px - env(safe-area-inset-top, 44px));
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.message-bubble {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.voice-btn:active {
|
||||||
|
background: #0052d9;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">智能助手</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话内容区域 -->
|
||||||
|
<div class="chat-container flex-1 p-4 space-y-4">
|
||||||
|
<!-- 引用内容卡片 -->
|
||||||
|
<div class="bg-gray-2 rounded-lg p-3 text-sm">
|
||||||
|
<div class="flex items-center gap-2 text-gray-7 mb-1">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||||
|
</svg>
|
||||||
|
<span>来源：任务 - 高优先召回</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-9">王先生 · 最近到店15天前 · VIP客户</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||||
|
<p class="text-sm">如何提升这位客户的到店频率？</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手消息 -->
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 text-white" 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-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed">
|
||||||
|
根据王先生的消费数据分析，我有以下建议：
|
||||||
|
</p>
|
||||||
|
<ol class="text-sm text-gray-13 leading-relaxed mt-2 list-decimal list-inside space-y-2">
|
||||||
|
<li><strong>个性化邀约</strong>：王先生偏好晚间21:00后到店，建议在这个时间段前发送邀约消息。</li>
|
||||||
|
<li><strong>活动推荐</strong>：他对斯诺克感兴趣，可以推荐即将举办的斯诺克比赛活动。</li>
|
||||||
|
<li><strong>储值提醒</strong>：他的储值余额还有8600元，可以提醒他来消费，避免余额长期闲置。</li>
|
||||||
|
<li><strong>专属服务</strong>：安排他熟悉的助教张三接待，提升服务体验。</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||||
|
<p class="text-sm">能帮我生成一条邀约话术吗？</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手消息 -->
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 text-white" 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-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed">
|
||||||
|
好的，根据王先生的特点，为您生成以下邀约话术：
|
||||||
|
</p>
|
||||||
|
<div class="mt-3 p-3 bg-primary-light rounded-lg">
|
||||||
|
<p class="text-sm text-primary leading-relaxed">
|
||||||
|
"王哥您好！好久不见了，最近工作顺利吧？😊 我们店里最近新到了几张英国进口的斯诺克球桌，球感特别好，知道您是斯诺克爱好者，第一时间想到邀请您来体验一下。这周末晚上有空吗？我提前给您预留好包厢～"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-7 mt-2">💡 提示：建议在晚间8点左右发送，这是王先生活跃的时间段。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||||
|
<p class="text-sm">太棒了，谢谢！</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 助手消息 -->
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 text-white" 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-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed">
|
||||||
|
不客气！祝您沟通顺利！如果需要更多帮助，随时问我。😊
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 输入区域 -->
|
||||||
|
<div class="bg-white border-t border-gray-2 p-3 pb-6">
|
||||||
|
<div class="flex items-end gap-2">
|
||||||
|
<div class="flex-1 bg-gray-1 rounded-2xl px-4 py-2.5 flex items-center">
|
||||||
|
<input type="text" placeholder="输入消息..." class="flex-1 bg-transparent text-sm text-gray-13 placeholder-gray-6 outline-none">
|
||||||
|
</div>
|
||||||
|
<button class="voice-btn w-10 h-10 bg-gray-1 rounded-full flex items-center justify-center text-gray-7 transition-colors">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
|
||||||
|
<path d="M19 10v2a7 7 0 01-14 0v-2"/>
|
||||||
|
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||||
|
<line x1="8" y1="23" x2="16" y2="23"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
213
Prototype/pages_BAKUP/coach-detail.html
Normal file
213
Prototype/pages_BAKUP/coach-detail.html
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>助教详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
/* 覆盖banner样式 */
|
||||||
|
.banner-bg.theme-coral .text-white {
|
||||||
|
color: #ffffff !important;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.banner-bg.theme-coral .text-emerald-300 {
|
||||||
|
color: #6ee7b7 !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 助教信息 -->
|
||||||
|
<div class="banner-bg theme-coral 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 mb-4">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</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-amber-400/30 text-amber-100 rounded-full text-xs">星级</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-white/70 text-sm">
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">中🎱</span>
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">🎯 斯诺克</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">工龄</p>
|
||||||
|
<p class="font-medium text-sm">3年</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">客户数</p>
|
||||||
|
<p class="font-medium text-sm">68</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">本月课时</p>
|
||||||
|
<p class="font-medium text-sm">85h</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">满意度</p>
|
||||||
|
<p class="font-medium text-emerald-300 text-sm">4.9</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 专业技能 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">专业技能</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">中🎱 精通</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎯 斯诺克</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">🎳 花式</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
专攻中式八球和斯诺克教学，具有 3 年专业教学经验。擅长基础教学和进阶技巧指导，累计培训学员 200+，多名学员参加业余比赛获奖。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 擅长领域 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">擅长领域</h2>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">基础入门</p>
|
||||||
|
<p class="text-xs text-gray-6">零基础学员快速上手</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">技巧进阶</p>
|
||||||
|
<p class="text-xs text-gray-6">走位、翻袋、解球</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">心态训练</p>
|
||||||
|
<p class="text-xs text-gray-6">比赛心理素质培养</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">战术分析</p>
|
||||||
|
<p class="text-xs text-gray-6">局面判断与策略</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-green-500 to-emerald-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-green-400 to-emerald-500 rounded-full" style="width: 92%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-success">0.92</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
您是该助教的熟客，共接受过 25 次教学服务。该助教对您的技术水平和学习偏好非常了解，能够提供针对性指导。
|
||||||
|
</p>
|
||||||
|
</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="space-y-3">
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💖</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">张三</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-success font-medium">0.95</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">李四</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-warning font-medium">0.82</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">王五</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-7 font-medium">0.68</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
226
Prototype/pages_BAKUP/customer-detail.html
Normal file
226
Prototype/pages_BAKUP/customer-detail.html
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>客户详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-dark-gold 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 mb-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-gradient-to-r from-amber-500 to-yellow-400 text-black font-medium rounded-full text-xs">VIP</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||||
|
<span>138****5678</span>
|
||||||
|
<span>VIP20231215</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white/10 rounded-xl backdrop-blur-sm">
|
||||||
|
<div class="grid grid-cols-3">
|
||||||
|
<div class="text-center py-3 border-r border-white/10">
|
||||||
|
<p class="font-medium text-emerald-300 text-sm">¥8,600</p>
|
||||||
|
<p class="text-white/60 text-xs mt-1">储值余额</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-white/10">
|
||||||
|
<p class="font-medium text-sm">¥32,450</p>
|
||||||
|
<p class="text-white/60 text-xs mt-1">累计消费</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||||
|
<p class="text-white/60 text-xs mt-1">门店</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 消费习惯 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 高客单价</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-error text-xs rounded-full border border-pink-100">🍷 爱点酒水</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。近 60 天到店 8 次，消费金额 2,800 元。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-green-500 to-emerald-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-green-400 to-emerald-500 rounded-full" style="width: 85%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-success">0.85</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。该客户与您的互动频率较高，是您的重点维护客户。
|
||||||
|
</p>
|
||||||
|
</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="space-y-3">
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💖</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-success font-medium">0.92</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">泡芙</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-warning font-medium">0.78</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-lg">💛</span>
|
||||||
|
<span class="text-sm font-medium text-gray-13">Amy</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-7 font-medium">0.65</span>
|
||||||
|
</div>
|
||||||
|
</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-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
155
Prototype/pages_BAKUP/home-settings.html
Normal file
155
Prototype/pages_BAKUP/home-settings.html
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>首页设置 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
.radio-checked {
|
||||||
|
border-color: #0052d9;
|
||||||
|
background: #0052d9;
|
||||||
|
}
|
||||||
|
.radio-checked::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.option-card {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.option-card.selected {
|
||||||
|
border-color: #0052d9;
|
||||||
|
background: linear-gradient(135deg, #ecf2fe 0%, #f8faff 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">首页设置</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 说明文字 -->
|
||||||
|
<div class="px-4 py-4">
|
||||||
|
<p class="text-sm text-gray-7">选择登录后默认显示的首页</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 选项列表 -->
|
||||||
|
<div class="px-4 space-y-3">
|
||||||
|
<div id="option-task" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer selected" onclick="selectHome('task')">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||||
|
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-base font-medium text-gray-13 mb-1">任务</p>
|
||||||
|
<p class="text-xs text-gray-6">查看待办任务和业绩概览</p>
|
||||||
|
</div>
|
||||||
|
<div id="radio-task" class="w-5 h-5 border-2 border-gray-4 rounded-full relative radio-checked"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="option-board" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer" onclick="selectHome('board')">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||||
|
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-base font-medium text-gray-13 mb-1">看板</p>
|
||||||
|
<p class="text-xs text-gray-6">查看财务、客户、助教数据</p>
|
||||||
|
</div>
|
||||||
|
<div id="radio-board" class="w-5 h-5 border-2 border-gray-4 rounded-full relative"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 提示信息 -->
|
||||||
|
<div class="px-4 py-6">
|
||||||
|
<div class="flex items-start gap-3 p-4 bg-primary/5 rounded-xl">
|
||||||
|
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||||
|
</svg>
|
||||||
|
<p class="text-xs text-gray-7 leading-relaxed">设置会自动保存，切换选项后即刻生效。退出登录后重新登录仍会保持您的设置。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function selectHome(type) {
|
||||||
|
const taskRadio = document.getElementById('radio-task');
|
||||||
|
const boardRadio = document.getElementById('radio-board');
|
||||||
|
const taskOption = document.getElementById('option-task');
|
||||||
|
const boardOption = document.getElementById('option-board');
|
||||||
|
|
||||||
|
if (type === 'task') {
|
||||||
|
taskRadio.classList.add('radio-checked');
|
||||||
|
boardRadio.classList.remove('radio-checked');
|
||||||
|
taskOption.classList.add('selected');
|
||||||
|
boardOption.classList.remove('selected');
|
||||||
|
} else {
|
||||||
|
boardRadio.classList.add('radio-checked');
|
||||||
|
taskRadio.classList.remove('radio-checked');
|
||||||
|
boardOption.classList.add('selected');
|
||||||
|
taskOption.classList.remove('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('已设置默认首页为:', type);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
198
Prototype/pages_BAKUP/login.html
Normal file
198
Prototype/pages_BAKUP/login.html
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>登录 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-gradient-main {
|
||||||
|
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||||
|
}
|
||||||
|
.checkbox-custom {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.checkbox-custom:checked {
|
||||||
|
background-color: #0052d9;
|
||||||
|
border-color: #0052d9;
|
||||||
|
}
|
||||||
|
.checkbox-custom:checked::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 1px;
|
||||||
|
width: 5px;
|
||||||
|
height: 9px;
|
||||||
|
border: solid white;
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.btn-disabled {
|
||||||
|
background-color: #dcdcdc !important;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-8px); }
|
||||||
|
}
|
||||||
|
.float-animation {
|
||||||
|
animation: float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-soft {
|
||||||
|
0%, 100% { opacity: 0.4; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
.pulse-soft {
|
||||||
|
animation: pulse-soft 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||||
|
<!-- 装饰元素 -->
|
||||||
|
<div class="absolute top-20 left-8 w-16 h-16 bg-primary/10 rounded-full blur-xl pulse-soft"></div>
|
||||||
|
<div class="absolute top-40 right-6 w-20 h-20 bg-cyan-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 1s;"></div>
|
||||||
|
<div class="absolute bottom-40 left-12 w-12 h-12 bg-blue-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||||
|
|
||||||
|
<!-- 顶部区域 - Logo 和名称 -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="relative mb-6 float-animation">
|
||||||
|
<div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-400 rounded-3xl flex items-center justify-center shadow-xl shadow-primary/30">
|
||||||
|
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.3"/>
|
||||||
|
<circle cx="12" cy="12" r="6" fill="currentColor"/>
|
||||||
|
<circle cx="12" cy="12" r="2" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<!-- 装饰点 -->
|
||||||
|
<div class="absolute -top-1 -right-1 w-4 h-4 bg-cyan-400 rounded-full shadow-lg"></div>
|
||||||
|
<div class="absolute -bottom-2 -left-2 w-3 h-3 bg-blue-300 rounded-full shadow-lg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应用名称 -->
|
||||||
|
<h1 class="text-2xl font-bold text-gray-13 mb-2">球房运营助手</h1>
|
||||||
|
|
||||||
|
<!-- 产品描述 -->
|
||||||
|
<p class="text-gray-7 text-sm text-center leading-relaxed mb-8">
|
||||||
|
为台球厅提升运营效率的内部管理工具
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 功能亮点 -->
|
||||||
|
<div class="w-full max-w-sm bg-white/60 backdrop-blur-sm rounded-2xl p-5 mb-6">
|
||||||
|
<div class="grid grid-cols-3 gap-4 text-center">
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-9 font-medium">任务管理</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-9 font-medium">数据看板</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<svg class="w-5 h-5 text-warning" 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>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-9 font-medium">智能助手</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部区域 - 登录按钮和协议 -->
|
||||||
|
<div class="px-8 pb-10 relative z-10">
|
||||||
|
<!-- 微信登录按钮 -->
|
||||||
|
<button id="loginBtn" class="btn-disabled w-full py-4 rounded-xl text-white font-medium text-base flex items-center justify-center gap-2 transition-all duration-200 shadow-lg">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
|
||||||
|
</svg>
|
||||||
|
使用微信登录
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 协议勾选 -->
|
||||||
|
<div class="flex items-start gap-3 mt-5">
|
||||||
|
<input type="checkbox" id="agreeCheckbox" class="checkbox-custom w-4 h-4 mt-0.5 border-2 border-gray-4 rounded appearance-none cursor-pointer transition-all duration-200 flex-shrink-0">
|
||||||
|
<label for="agreeCheckbox" class="text-xs text-gray-7 leading-relaxed cursor-pointer">
|
||||||
|
我已阅读并同意
|
||||||
|
<a href="#" class="text-primary font-medium">《用户协议》</a>
|
||||||
|
和
|
||||||
|
<a href="#" class="text-primary font-medium">《隐私政策》</a>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部说明 -->
|
||||||
|
<p class="text-xs text-gray-5 text-center mt-6">
|
||||||
|
仅限球房内部员工使用
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const checkbox = document.getElementById('agreeCheckbox');
|
||||||
|
const loginBtn = document.getElementById('loginBtn');
|
||||||
|
|
||||||
|
function updateButtonState() {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
loginBtn.classList.remove('btn-disabled');
|
||||||
|
loginBtn.classList.add('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
|
||||||
|
} else {
|
||||||
|
loginBtn.classList.add('btn-disabled');
|
||||||
|
loginBtn.classList.remove('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox.addEventListener('change', updateButtonState);
|
||||||
|
|
||||||
|
loginBtn.addEventListener('click', function() {
|
||||||
|
if (!checkbox.checked) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 模拟登录
|
||||||
|
alert('正在使用微信登录...');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
191
Prototype/pages_BAKUP/my-profile.html
Normal file
191
Prototype/pages_BAKUP/my-profile.html
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>我的 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white">
|
||||||
|
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||||
|
<h1 class="text-base font-medium text-gray-13">我的</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户信息区域 -->
|
||||||
|
<div class="bg-white p-6 flex items-center gap-4">
|
||||||
|
<div class="w-16 h-16 rounded-full overflow-hidden shadow-lg">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="text-lg font-semibold text-gray-13">小燕</span>
|
||||||
|
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded">助教</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 菜单列表 -->
|
||||||
|
<div class="mt-4">
|
||||||
|
<a href="notes.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-primary" 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>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">备注记录</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="chat-history.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-success/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-success" 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>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">助手对话记录</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="home-settings.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-warning/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">首页设置</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button onclick="showLogoutModal()" class="w-full flex items-center justify-between bg-white px-4 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-error/10 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||||
|
<polyline points="16 17 21 12 16 7"/>
|
||||||
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-gray-13">退出账号</span>
|
||||||
|
</div>
|
||||||
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 TabBar -->
|
||||||
|
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-2 flex items-center justify-around px-4">
|
||||||
|
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">任务</span>
|
||||||
|
</a>
|
||||||
|
<a href="board-finance.html" class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-gray-6">看板</span>
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col items-center gap-1">
|
||||||
|
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs text-primary font-medium">我的</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 退出确认弹窗 -->
|
||||||
|
<div id="logoutModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
|
||||||
|
<div class="bg-white rounded-2xl w-72 overflow-hidden">
|
||||||
|
<div class="p-6 text-center">
|
||||||
|
<h3 class="text-base font-medium text-gray-13 mb-2">确认退出</h3>
|
||||||
|
<p class="text-sm text-gray-7">确认退出当前账号吗？</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex border-t border-gray-2">
|
||||||
|
<button onclick="hideLogoutModal()" class="flex-1 py-3 text-sm text-gray-7 border-r border-gray-2">取消</button>
|
||||||
|
<button onclick="logout()" class="flex-1 py-3 text-sm text-error font-medium">退出</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showLogoutModal() {
|
||||||
|
document.getElementById('logoutModal').classList.remove('hidden');
|
||||||
|
document.getElementById('logoutModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideLogoutModal() {
|
||||||
|
document.getElementById('logoutModal').classList.add('hidden');
|
||||||
|
document.getElementById('logoutModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
144
Prototype/pages_BAKUP/no-permission.html
Normal file
144
Prototype/pages_BAKUP/no-permission.html
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>无权限 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-pattern {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e34d59' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: rotate(0deg); }
|
||||||
|
25% { transform: rotate(-5deg); }
|
||||||
|
75% { transform: rotate(5deg); }
|
||||||
|
}
|
||||||
|
.shake-animation {
|
||||||
|
animation: shake 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-pattern min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部装饰 -->
|
||||||
|
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-error/10 to-transparent"></div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||||
|
<!-- 图标区域 -->
|
||||||
|
<div class="relative mb-8">
|
||||||
|
<!-- 背景光晕 -->
|
||||||
|
<div class="absolute inset-0 w-32 h-32 bg-error/20 rounded-full blur-xl"></div>
|
||||||
|
|
||||||
|
<!-- 主图标 -->
|
||||||
|
<div class="relative w-28 h-28 bg-gradient-to-br from-rose-400 to-red-500 rounded-3xl flex items-center justify-center shadow-xl shadow-error/30">
|
||||||
|
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 装饰点 -->
|
||||||
|
<div class="absolute -top-2 -right-2 w-4 h-4 bg-error rounded-full opacity-60"></div>
|
||||||
|
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-rose-300 rounded-full opacity-60"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文字区域 -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-gray-10 mb-3">无访问权限</h1>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||||
|
很抱歉，您的访问申请未通过审核，或当前账号无访问权限
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 原因说明卡片 -->
|
||||||
|
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||||
|
<div class="flex items-start gap-4 mb-4">
|
||||||
|
<div class="w-10 h-10 bg-error/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm font-medium text-gray-13 mb-1">可能的原因</p>
|
||||||
|
<ul class="text-xs text-gray-6 space-y-1">
|
||||||
|
<li>• 申请信息不完整或不符合要求</li>
|
||||||
|
<li>• 非本店授权员工账号</li>
|
||||||
|
<li>• 账号权限已被管理员收回</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-4 border-t border-gray-100">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-6">管理员联系方式</span>
|
||||||
|
<span class="text-sm text-gray-13 font-medium">138****8888</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 帮助提示 -->
|
||||||
|
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs">如有疑问，请联系管理员重新申请</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="px-8 pb-12">
|
||||||
|
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||||
|
<polyline points="16 17 21 12 16 7"/>
|
||||||
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
更换登录账号
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function switchAccount() {
|
||||||
|
// 清除登录凭证
|
||||||
|
localStorage.clear();
|
||||||
|
sessionStorage.clear();
|
||||||
|
// 返回登录页
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
142
Prototype/pages_BAKUP/notes.html
Normal file
142
Prototype/pages_BAKUP/notes.html
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>备注记录 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.safe-area-top {
|
||||||
|
padding-top: env(safe-area-inset-top, 44px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||||
|
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||||
|
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||||
|
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">备注记录</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注列表 -->
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<!-- 备注卡片 1 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
客户今天表示下周有朋友生日聚会，想预约包厢。已告知包厢需要提前3天预约，客户说会尽快确定时间再联系。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：王先生</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-27 15:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 2 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
完成高优先召回任务。客户反馈最近工作太忙，这周末会来店里。已提醒客户储值卡还有2000元余额，下月到期需要续费。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：高优先召回</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-26 18:45</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 3 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
泡芙本月表现优秀，课时完成率达到120%，客户评价全部5星。建议下月提升课时费标准。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：泡芙</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-25 10:20</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 4 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
客户对今天的服务非常满意，特别提到小燕的教学很专业。客户表示会推荐朋友来店里体验。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：李女士</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-24 21:15</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 5 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
关系构建任务完成。与客户进行了30分钟的深入交流，了解到客户是企业高管，经常需要商务宴请场地。已记录客户需求，后续可以推荐团建套餐。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：关系构建</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-23 19:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 6 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
客户今天充值了5000元，选择的是尊享套餐。客户提到喜欢安静的环境，以后尽量安排包厢。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：张先生</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-22 14:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 备注卡片 7 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||||
|
Amy最近工作状态很好，主动承担了培训新员工的任务。但需要注意她最近加班较多，避免过度疲劳。
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：Amy</span>
|
||||||
|
<span class="text-xs text-gray-6">2024-11-21 09:45</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
226
Prototype/pages_BAKUP/performance.html
Normal file
226
Prototype/pages_BAKUP/performance.html
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>业绩详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
/* 优化banner内元素对比度 */
|
||||||
|
.banner-bg .stat-value {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.banner-bg .stat-highlight {
|
||||||
|
color: #a7f3d0;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
.banner-bg .stat-label {
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
}
|
||||||
|
.banner-bg .info-card {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border: 1px solid rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen pb-8">
|
||||||
|
<!-- 通栏 Banner -->
|
||||||
|
<div class="banner-bg theme-blue-light 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 mb-5">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="text-xl font-semibold">小燕</span>
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 核心数据 -->
|
||||||
|
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||||
|
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||||||
|
<p class="stat-label text-xs mb-1">本月预计收入</p>
|
||||||
|
<p class="stat-value text-2xl font-bold">¥12,300</p>
|
||||||
|
</div>
|
||||||
|
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||||||
|
<p class="stat-label text-xs mb-1">综合完成率</p>
|
||||||
|
<p class="stat-highlight text-2xl font-bold">87%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 进度信息 -->
|
||||||
|
<div class="info-card rounded-xl p-4 backdrop-blur-sm">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="stat-label text-sm font-medium">本月目标进度</span>
|
||||||
|
<span class="stat-value text-xs font-medium">3万 / 5万</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2.5 bg-white/25 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-white rounded-full shadow-sm" style="width: 60%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 指标内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 收入构成 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">收入构成</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">4000</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">基本工资</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">5680</p>
|
||||||
|
<p class="text-xs text-success mt-1">课时 95%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1520</p>
|
||||||
|
<p class="text-xs text-warning mt-1">充值 76%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1100</p>
|
||||||
|
<p class="text-xs text-success mt-1">酒水 110%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 台球助教业绩 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">台球助教业绩</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">48</p>
|
||||||
|
<p class="text-xs text-warning mt-1">课程 目标60</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">72h</p>
|
||||||
|
<p class="text-xs text-warning mt-1">时长 目标90</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">32</p>
|
||||||
|
<p class="text-xs text-success mt-1">客户 107%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">4.8</p>
|
||||||
|
<p class="text-xs text-success mt-1">满意度 107%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 充值业绩 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">充值业绩</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.52万</p>
|
||||||
|
<p class="text-xs text-warning mt-1">金额 76%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">8</p>
|
||||||
|
<p class="text-xs text-warning mt-1">笔数 目标10</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">3</p>
|
||||||
|
<p class="text-xs text-success mt-1">新客 100%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">5</p>
|
||||||
|
<p class="text-xs text-warning mt-1">续费 71%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 酒水业绩 -->
|
||||||
|
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-13">酒水业绩</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">1.1万</p>
|
||||||
|
<p class="text-xs text-success mt-1">销售 110%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">45</p>
|
||||||
|
<p class="text-xs text-success mt-1">笔数 113%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3 border-r border-gray-100">
|
||||||
|
<p class="text-lg font-bold text-gray-13">244</p>
|
||||||
|
<p class="text-xs text-gray-6 mt-1">客单价</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-3">
|
||||||
|
<p class="text-lg font-bold text-gray-13">68%</p>
|
||||||
|
<p class="text-xs text-success mt-1">转化 ↑5%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
164
Prototype/pages_BAKUP/reviewing.html
Normal file
164
Prototype/pages_BAKUP/reviewing.html
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>审核中 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
.bg-pattern {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230052d9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
.float-animation {
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-soft {
|
||||||
|
0%, 100% { opacity: 0.6; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
.pulse-soft {
|
||||||
|
animation: pulse-soft 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-pattern min-h-screen flex flex-col">
|
||||||
|
<!-- 顶部装饰 -->
|
||||||
|
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-warning/10 to-transparent"></div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||||
|
<!-- 图标区域 -->
|
||||||
|
<div class="relative mb-8 float-animation">
|
||||||
|
<!-- 背景光晕 -->
|
||||||
|
<div class="absolute inset-0 w-32 h-32 bg-warning/20 rounded-full blur-xl"></div>
|
||||||
|
|
||||||
|
<!-- 主图标 -->
|
||||||
|
<div class="relative w-28 h-28 bg-gradient-to-br from-amber-400 to-orange-500 rounded-3xl flex items-center justify-center shadow-xl shadow-warning/30">
|
||||||
|
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 装饰点 -->
|
||||||
|
<div class="absolute -top-2 -right-2 w-4 h-4 bg-warning rounded-full pulse-soft"></div>
|
||||||
|
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-amber-300 rounded-full pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文字区域 -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-gray-10 mb-3">申请审核中</h1>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||||
|
您的访问申请已提交成功，正在等待管理员审核，请耐心等待
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 进度提示卡片 -->
|
||||||
|
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||||
|
<div class="flex items-center gap-4 mb-4">
|
||||||
|
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm font-medium text-gray-13">审核进度</p>
|
||||||
|
<p class="text-xs text-gray-6">通常需要 1-3 个工作日</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 bg-success rounded-full flex items-center justify-center">
|
||||||
|
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||||
|
<polyline points="20 6 9 17 4 12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-9">已提交</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200">
|
||||||
|
<div class="h-full w-1/2 bg-warning rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 bg-warning/20 rounded-full flex items-center justify-center">
|
||||||
|
<div class="w-2 h-2 bg-warning rounded-full pulse-soft"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-6">审核中</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-0.5 bg-gray-200"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 bg-gray-100 rounded-full"></div>
|
||||||
|
<span class="text-xs text-gray-5">通过</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 联系提示 -->
|
||||||
|
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||||
|
<svg class="w-4 h-4" 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>
|
||||||
|
<span class="text-xs">如有疑问，请联系管理员</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="px-8 pb-12">
|
||||||
|
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||||
|
<polyline points="16 17 21 12 16 7"/>
|
||||||
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
更换登录账号
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function switchAccount() {
|
||||||
|
// 清除登录凭证
|
||||||
|
localStorage.clear();
|
||||||
|
sessionStorage.clear();
|
||||||
|
// 返回登录页
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
225
Prototype/pages_BAKUP/task-detail-callback.html
Normal file
225
Prototype/pages_BAKUP/task-detail-callback.html
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 客户回访</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.purple::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-teal 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-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">客户回访</span>
|
||||||
|
<span class="text-white/80 text-sm">常规回访，保持良好联系</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户信息 -->
|
||||||
|
<div class="px-5 pt-1 pb-6">
|
||||||
|
<div class="flex items-center gap-4 mb-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-amber-400/30 text-amber-100 rounded-full text-xs">VIP</span>
|
||||||
|
<span class="px-2 py-0.5 bg-emerald-400/30 text-emerald-100 rounded-full text-xs">忠实客</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||||
|
<span>135****6677</span>
|
||||||
|
<span>VIP20230815</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||||
|
<p class="font-medium">💰 储值 <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></p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||||
|
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 消费习惯 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🎱 斯诺克爱好者</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">⭐ 高满意度</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-600 text-xs rounded-full border border-purple-100">🍷 爱点酒水</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
忠实老客户，入会 1 年半。偏好周末下午时段，喜欢斯诺克。平均消费 420 元/次，月均到店 6-8 次，经常点酒水和小食。上次服务好评。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-green-500 to-emerald-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-green-400 to-emerald-500 rounded-full" style="width: 88%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-success">0.88</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
长期合作关系良好，共有 45 次服务记录。客户多次指定您服务，评价均为 5 星。是您的核心客户之一，需要持续维护。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title purple text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||||
|
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||||
|
📞 常规回访要点
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||||
|
该客户上次到店是 3 天前，关系良好，进行常规关怀回访：
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"赵姐您好！上次打球感觉怎么样？新到的球杆手感还习惯吗？这周末您有空的话，可以提前帮您预留老位置~"
|
||||||
|
</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-teal-500 to-cyan-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-teal-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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-teal-500/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
224
Prototype/pages_BAKUP/task-detail-priority.html
Normal file
224
Prototype/pages_BAKUP/task-detail-priority.html
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 优先召回</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-orange 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-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">优先召回</span>
|
||||||
|
<span class="text-white/80 text-sm">消费频率下降，需主动关注</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户信息 -->
|
||||||
|
<div class="px-5 pt-1 pb-6">
|
||||||
|
<div class="flex items-center gap-4 mb-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-blue-400/30 text-blue-100 rounded-full text-xs">偏好夜场</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||||
|
<span>139****1234</span>
|
||||||
|
<span>MEM20240318</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||||
|
<p class="font-medium">💰 储值 <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></p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||||
|
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 消费习惯 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 偏好夜场</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 中式八球</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-600 text-xs rounded-full border border-purple-100">👥 爱组局</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
偏好晚间 20:00-23:00 时段，喜欢中式八球。平均消费 220 元/次，之前月均到店 3-4 次，近期明显减少。喜欢和朋友组局打球。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-amber-500 to-orange-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-amber-400 to-orange-500 rounded-full" style="width: 55%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-warning">0.55</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
最近 2 个月互动较少，仅有 3 次服务记录。客户对您的印象中等，有提升空间。建议增加互动频次，建立更好的服务关系。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||||
|
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-4 border border-orange-100">
|
||||||
|
<p class="text-sm text-warning leading-relaxed font-medium mb-3">
|
||||||
|
💡 建议执行
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||||
|
该客户消费频率从月均 4 次下降到近月仅 1 次，需要关注原因：
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"张哥，好久没见您来打球了，最近忙吗？店里这周六有个球友聚会活动，想邀请您来玩，顺便认识一些新球友~"
|
||||||
|
</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-orange-500 to-amber-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-orange-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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-orange-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-orange-500/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
224
Prototype/pages_BAKUP/task-detail-relationship.html
Normal file
224
Prototype/pages_BAKUP/task-detail-relationship.html
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 关系构建</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.pink::before { background: linear-gradient(180deg, #e91e63, #f48fb1); }
|
||||||
|
</style>
|
||||||
|
</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-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">关系构建</span>
|
||||||
|
<span class="text-white/80 text-sm">潜力客户，建议加强互动</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户信息 -->
|
||||||
|
<div class="px-5 pt-1 pb-6">
|
||||||
|
<div class="flex items-center gap-4 mb-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-cyan-400/30 text-cyan-100 rounded-full text-xs">潜力股</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||||
|
<span>137****8899</span>
|
||||||
|
<span>NEW20240501</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||||
|
<p class="font-medium">💰 储值 <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></p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||||
|
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 消费习惯 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-amber-50 to-yellow-50 text-amber-600 text-xs rounded-full border border-amber-100">☀️ 偏好下午</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 初学者</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-pink-600 text-xs rounded-full border border-pink-100">💎 消费潜力大</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
新客户，入会 2 个月。偏好下午 14:00-18:00 时段，对台球感兴趣但技术一般。消费能力较强，单次消费 180 元，有提升空间。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-pink-500 to-rose-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-pink-400 to-rose-500 rounded-full" style="width: 45%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-pink-500">0.45</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
接触次数较少，仅有 2 次服务记录。客户对您还不太熟悉，但反馈良好。建议通过专业服务和关心，逐步建立信任关系。
|
||||||
|
</p>
|
||||||
|
</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">
|
||||||
|
💝 关系构建重点
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"陈哥您好，上次看您打球进步很快呀！我们这周有个初学者交流会，可以认识一些同水平的球友一起练习，您有兴趣参加吗？"
|
||||||
|
</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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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 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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
222
Prototype/pages_BAKUP/task-detail.html
Normal file
222
Prototype/pages_BAKUP/task-detail.html
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务详情 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||||
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||||
|
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 通栏 Banner - 客户信息 -->
|
||||||
|
<div class="banner-bg theme-red 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-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">高优先召回</span>
|
||||||
|
<span class="text-white/80 text-sm">客户流失风险较高，建议尽快联系</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 客户信息 -->
|
||||||
|
<div class="px-5 pt-1 pb-6">
|
||||||
|
<div class="flex items-center gap-4 mb-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-emerald-400/30 text-emerald-100 rounded-full text-xs">常客</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||||
|
<span>138****5678</span>
|
||||||
|
<span>VIP20231215</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||||
|
<p class="font-medium">💰 储值 <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></p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||||
|
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||||
|
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<!-- 消费习惯 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||||
|
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 高客单价</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 与我的关系 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||||
|
<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-green-500 to-emerald-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-green-400 to-emerald-500 rounded-full" style="width: 85%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-success">0.85</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">
|
||||||
|
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务建议 -->
|
||||||
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||||
|
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||||
|
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||||
|
💡 建议执行
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||||
|
该客户已有 15 天未到店，存在流失风险。建议通过微信联系：
|
||||||
|
</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">
|
||||||
|
<p class="text-sm text-gray-9 leading-relaxed">
|
||||||
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||||
|
"王哥您好，好久不见！最近店里新到了几张国际标准的斯诺克球桌，知道您是斯诺克爱好者，想邀请您有空来体验一下~"
|
||||||
|
</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-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/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">
|
||||||
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||||
|
<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>
|
||||||
|
<textarea 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-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||||
|
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.remove('hidden');
|
||||||
|
document.getElementById('noteModal').classList.add('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNoteModal() {
|
||||||
|
document.getElementById('noteModal').classList.add('hidden');
|
||||||
|
document.getElementById('noteModal').classList.remove('flex');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
362
Prototype/pages_BAKUP/task-list.html
Normal file
362
Prototype/pages_BAKUP/task-list.html
Normal file
@@ -0,0 +1,362 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务列表 - 球房运营助手</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<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">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#0052d9',
|
||||||
|
'primary-light': '#ecf2fe',
|
||||||
|
success: '#00a870',
|
||||||
|
warning: '#ed7b2f',
|
||||||
|
error: '#e34d59',
|
||||||
|
'gray-1': '#f3f3f3',
|
||||||
|
'gray-2': '#eeeeee',
|
||||||
|
'gray-3': '#e7e7e7',
|
||||||
|
'gray-4': '#dcdcdc',
|
||||||
|
'gray-5': '#c5c5c5',
|
||||||
|
'gray-6': '#a6a6a6',
|
||||||
|
'gray-7': '#8b8b8b',
|
||||||
|
'gray-8': '#777777',
|
||||||
|
'gray-9': '#5e5e5e',
|
||||||
|
'gray-10': '#4b4b4b',
|
||||||
|
'gray-11': '#393939',
|
||||||
|
'gray-12': '#2c2c2c',
|
||||||
|
'gray-13': '#242424',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Noto Sans SC', 'sans-serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
}
|
||||||
|
/* 任务卡片边框颜色 */
|
||||||
|
.task-card {
|
||||||
|
position: relative;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
}
|
||||||
|
.task-card.high-priority {
|
||||||
|
border-left-color: #f43f5e;
|
||||||
|
}
|
||||||
|
.task-card.priority {
|
||||||
|
border-left-color: #f97316;
|
||||||
|
}
|
||||||
|
.task-card.relationship {
|
||||||
|
border-left-color: #ec4899;
|
||||||
|
}
|
||||||
|
.task-card.callback {
|
||||||
|
border-left-color: #14b8a6;
|
||||||
|
}
|
||||||
|
/* 标签颜色 - 圆角矩形 */
|
||||||
|
.tag-high-priority {
|
||||||
|
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tag-priority {
|
||||||
|
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tag-relationship {
|
||||||
|
background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tag-callback {
|
||||||
|
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
/* 底部导航 */
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 0;
|
||||||
|
color: #8b8b8b;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.nav-item.active {
|
||||||
|
color: #0052d9;
|
||||||
|
}
|
||||||
|
.nav-item.active svg {
|
||||||
|
fill: #0052d9;
|
||||||
|
}
|
||||||
|
/* 进度条动画 */
|
||||||
|
.progress-bar {
|
||||||
|
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
|
||||||
|
transition: width 0.6s ease-out;
|
||||||
|
}
|
||||||
|
/* 业绩卡片文字样式 */
|
||||||
|
.stat-value {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
.stat-highlight {
|
||||||
|
color: #6ee7b7;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.stat-label {
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
.stat-secondary {
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
}
|
||||||
|
.stat-accent {
|
||||||
|
color: #fcd34d;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-1 min-h-screen">
|
||||||
|
<!-- 顶部区域 - 用户信息和业绩卡片 -->
|
||||||
|
<div class="banner-bg theme-blue texture-aurora text-white pb-4">
|
||||||
|
<!-- 用户信息 -->
|
||||||
|
<div class="px-5 pt-10 pb-3">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||||
|
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="text-xl font-semibold">小燕</span>
|
||||||
|
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 业绩进度卡片 -->
|
||||||
|
<div class="mx-4">
|
||||||
|
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-2.5 border border-white/20">
|
||||||
|
<!-- 第一层：标题行 -->
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<span class="stat-label text-sm font-medium">本月业绩进度</span>
|
||||||
|
<span class="stat-accent text-xl font-bold">60%</span>
|
||||||
|
</div>
|
||||||
|
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
|
||||||
|
查看详情
|
||||||
|
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二层：进度条 -->
|
||||||
|
<div class="h-1.5 bg-white/20 rounded-full overflow-hidden mb-2.5">
|
||||||
|
<div class="progress-bar h-full rounded-full" style="width: 60%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第三层：核心数据 - 两列布局 -->
|
||||||
|
<div class="flex items-stretch mb-2.5">
|
||||||
|
<div class="flex-1 pr-3 border-r border-white/25 text-center">
|
||||||
|
<div>
|
||||||
|
<span class="stat-highlight text-xl font-bold">82.5</span>
|
||||||
|
<span class="stat-secondary text-sm font-medium"> / 120</span>
|
||||||
|
</div>
|
||||||
|
<p class="stat-label text-xs">已完成 / 目标课时</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 pl-3 text-center">
|
||||||
|
<div>
|
||||||
|
<span class="stat-highlight text-xl font-bold">3.5</span>
|
||||||
|
<span class="stat-secondary text-sm font-medium"> / 10</span>
|
||||||
|
<span class="stat-secondary text-xs">万</span>
|
||||||
|
</div>
|
||||||
|
<p class="stat-label text-xs">已完成 / 目标销售额</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第四层：预计收入 -->
|
||||||
|
<div class="flex items-center justify-between pt-2 border-t border-white/25">
|
||||||
|
<span class="stat-label text-xs">11月预计收入</span>
|
||||||
|
<a href="performance.html" class="flex items-center gap-1.5 group">
|
||||||
|
<span class="stat-value text-lg font-bold">¥12,345</span>
|
||||||
|
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 待办任务列表 -->
|
||||||
|
<div class="px-4 py-5">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h2 class="text-base font-semibold text-gray-13">待办任务</h2>
|
||||||
|
<span class="text-sm text-gray-6">共 7 项</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 任务卡片列表 -->
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- 高优先召回 - 王先生 -->
|
||||||
|
<a href="task-detail.html" class="task-card high-priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">王先生</span>
|
||||||
|
<span class="text-sm">💖</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：15天前 · 余额：非常多</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">高流失风险，建议尽快联系</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 高优先召回 - 李女士 -->
|
||||||
|
<a href="task-detail.html" class="task-card high-priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">李女士</span>
|
||||||
|
<span class="text-sm">🧡</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：20天前 · 余额：非常多</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">VIP客户，储值余额较多</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 优先召回 - 张先生 -->
|
||||||
|
<a href="task-detail-priority.html" class="task-card priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">张先生</span>
|
||||||
|
<span class="text-sm">💛</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：10天前 · 余额：一般</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">消费频率下降，需关注</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 优先召回 - 刘先生 -->
|
||||||
|
<a href="task-detail-priority.html" class="task-card priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">刘先生</span>
|
||||||
|
<span class="text-sm">💙</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：8天前 · 余额：一般</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">偏好晚间时段，可推荐夜场套餐</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 关系构建 - 陈先生 -->
|
||||||
|
<a href="task-detail-relationship.html" class="task-card relationship block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-relationship px-2 py-0.5 text-white text-xs font-medium">关系构建</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">陈先生</span>
|
||||||
|
<span class="text-sm">💙</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：5天前 · 余额：无</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">潜力客户，建议加强互动</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户回访 - 赵女士 -->
|
||||||
|
<a href="task-detail-callback.html" class="task-card callback block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">赵女士</span>
|
||||||
|
<span class="text-sm">🧡</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：3天前 · 余额：非常多</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">常规回访，保持联系</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 客户回访 - 周先生 -->
|
||||||
|
<a href="task-detail-callback.html" class="task-card callback block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||||
|
<span class="text-base font-semibold text-gray-13">周先生</span>
|
||||||
|
<span class="text-sm">💛</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-7 leading-relaxed">最近到店：5天前 · 余额：一般</p>
|
||||||
|
<p class="text-sm text-gray-6 leading-relaxed">新客户跟进，了解需求</p>
|
||||||
|
</div>
|
||||||
|
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 悬浮助手按钮 -->
|
||||||
|
<script src="../js/ai-float-btn.js"></script>
|
||||||
|
|
||||||
|
<!-- 底部导航栏 -->
|
||||||
|
<nav class="fixed bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-2 flex items-center px-4 z-50">
|
||||||
|
<a href="task-list.html" class="nav-item active">
|
||||||
|
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs font-medium">任务</span>
|
||||||
|
</a>
|
||||||
|
<a href="board-coach.html" class="nav-item">
|
||||||
|
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs">看板</span>
|
||||||
|
</a>
|
||||||
|
<a href="my-profile.html" class="nav-item">
|
||||||
|
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs">我的</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
997
doc/prd.md
Normal file
997
doc/prd.md
Normal file
@@ -0,0 +1,997 @@
|
|||||||
|
|
||||||
|
|
||||||
|
# 一、文档信息
|
||||||
|
|
||||||
|
* 产品名称：球房运营助手（微信小程序）
|
||||||
|
* 版本：V1.0（原型版，全权限视角）
|
||||||
|
* 撰写日期：YYYY-MM-DD
|
||||||
|
* 适用平台：微信小程序（iOS / Android 手机竖屏）
|
||||||
|
* 文档范围：仅描述小程序前端界面与交互行为，不包含后端服务和接口字段定义。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 二、背景与目标
|
||||||
|
|
||||||
|
本小程序用于提升台球厅经营管理效率，为店长、助教管理、助教等内部人员提供任务管理、业绩查看、运营看板和智能助手对话能力。
|
||||||
|
|
||||||
|
当前阶段目标：
|
||||||
|
|
||||||
|
* 交付一套基于“全功能、全权限角色视角”的微信小程序前端原型。
|
||||||
|
* 明确各页面布局、组件及交互行为，便于前端和原型工具直接实现。
|
||||||
|
* 角色权限控制、数据口径、字段来源均由后端与后续迭代处理，原型仅展示有权限时的页面样式。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 三、范围与约束说明
|
||||||
|
|
||||||
|
1. **设备与环境**
|
||||||
|
|
||||||
|
* 仅面向手机端微信小程序（iOS / Android），竖屏使用。
|
||||||
|
* 暂不考虑 iPad 等大屏适配。
|
||||||
|
|
||||||
|
2. **门店范围**
|
||||||
|
|
||||||
|
* 当前仅支持一个店铺场景，后端如扩展多门店，在后续版本处理。
|
||||||
|
|
||||||
|
3. **权限与角色**
|
||||||
|
|
||||||
|
* 原型以“全功能视角”展示所有模块与入口。
|
||||||
|
* 实际上线时，不同角色（店长/管理层/助教管理/助教）的权限由后端接口控制，对无权限功能采取“入口隐藏”的方式。
|
||||||
|
* 原型中不绘制模块级“无权限访问”占位状态。
|
||||||
|
|
||||||
|
4. **接口与数据**
|
||||||
|
|
||||||
|
* 本文不描述具体接口、字段名、数据结构。
|
||||||
|
* 各类展示字段以接口实际返回为准，本文若举例字段，仅为示意，不代表完整字段列表。
|
||||||
|
|
||||||
|
5. **登录/申请流程的权限提示**
|
||||||
|
|
||||||
|
* 登录后如账号未通过审核或无访问权限，将展示对应状态页（审核中、无权限），这属于整体访问控制，不属于“模块权限占位”，在原型中需要体现。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 四、角色说明（仅用于理解，不做权限逻辑）
|
||||||
|
|
||||||
|
* 店长 / 公司管理层：实际场景中拥有全功能权限。
|
||||||
|
* 助教管理：看板中财务板块不可见（上线时通过隐藏入口实现）。
|
||||||
|
* 助教：看板中财务板块和助教板块不可见（上线时通过隐藏入口实现）。
|
||||||
|
|
||||||
|
原型中统一以“全功能视角”展示，不做差异。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 五、全局设计规范
|
||||||
|
|
||||||
|
## 5.1 语言与格式
|
||||||
|
|
||||||
|
* 语言：简体中文。
|
||||||
|
* 金额单位：
|
||||||
|
|
||||||
|
* 元：取整，不显示小数。
|
||||||
|
* 万元：保留两位小数。
|
||||||
|
* 时间显示格式：
|
||||||
|
|
||||||
|
* 标准格式：`YYYY-MM-DD HH:mm:ss`
|
||||||
|
* 在不影响理解情况下，可根据页面需要简化为 `YYYY-MM-DD` 或 `MM-DD HH:mm` 等，具体由设计与前端协商。
|
||||||
|
|
||||||
|
## 5.2 导航与返回规则
|
||||||
|
|
||||||
|
* 底部一级导航（TabBar）：
|
||||||
|
|
||||||
|
* Tab 顺序：任务 / 看板 / 我的
|
||||||
|
* 文字：`任务`、`看板`、`我的`
|
||||||
|
* 每个 Tab 对应一个一级页面，点击 Tab 时：
|
||||||
|
|
||||||
|
* 若当前已在该 Tab 内的子页面，点击 Tab 返回该 Tab 的根页面，并滚动至顶部。
|
||||||
|
* 顶部导航：
|
||||||
|
|
||||||
|
* 除特别说明外，二级/详情页隐藏微信原生导航栏，使用自定义头部，左上角为返回图标，行为为返回上一页面。
|
||||||
|
* 弹窗与浮层：
|
||||||
|
|
||||||
|
* 使用标准底部弹出或中部弹窗，与微信交互习惯一致。
|
||||||
|
|
||||||
|
## 5.3 悬浮助手按钮
|
||||||
|
|
||||||
|
* 悬浮按钮在所有业务页面（任务、看板、我的及其子页面）显示，不在“登录/申请/审核中/无权限”页面显示。
|
||||||
|
* 默认位置：页面右下角（不遮挡底部 TabBar），随页面滚动悬浮。
|
||||||
|
* 点击行为：进入“助手对话页面”，默认打开最近一次会话（若有）。
|
||||||
|
|
||||||
|
## 5.4 提示、错误与加载状态
|
||||||
|
|
||||||
|
* **网络异常 / 接口错误（列表/卡片区域）**
|
||||||
|
|
||||||
|
* 在对应数据区域显示文字：`加载失败，请点击重试`
|
||||||
|
* 下方提供“重试”按钮，点击重新请求该区域数据。
|
||||||
|
* 作为所有列表/卡片区域的统一错误样式。
|
||||||
|
|
||||||
|
* **空数据状态**
|
||||||
|
|
||||||
|
* 统一使用简单文字：
|
||||||
|
|
||||||
|
* 列表类统一为：`暂无数据` 或根据场景显示 `暂无任务` 等。
|
||||||
|
* 不使用插画或占位图。
|
||||||
|
|
||||||
|
* **加载状态**
|
||||||
|
|
||||||
|
* 使用区域加载：在列表或卡片区域显示文字：`加载中...`
|
||||||
|
* 不做骨架屏和复杂动画。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 六、信息架构与页面列表
|
||||||
|
|
||||||
|
## 6.1 顶层结构
|
||||||
|
|
||||||
|
* 登录相关
|
||||||
|
|
||||||
|
* 登录页
|
||||||
|
* 账号申请页
|
||||||
|
* 审核中页
|
||||||
|
* 无权限页
|
||||||
|
* Tab 1：任务
|
||||||
|
|
||||||
|
* 任务列表页（默认首页）
|
||||||
|
* 任务详情页
|
||||||
|
* 业绩详情页
|
||||||
|
* Tab 2：看板
|
||||||
|
|
||||||
|
* 看板首页（含：财务 / 客户 / 助教 三级视图）
|
||||||
|
* 客户详情页
|
||||||
|
* 助教详情页
|
||||||
|
* Tab 3：我的
|
||||||
|
|
||||||
|
* 我的首页
|
||||||
|
* 备注记录页
|
||||||
|
* 助手对话记录页
|
||||||
|
* 首页设置页
|
||||||
|
* 退出账号（确认弹窗）
|
||||||
|
* 全局
|
||||||
|
|
||||||
|
* 助手对话页
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 七、关键流程说明
|
||||||
|
|
||||||
|
## 7.1 登录与申请流程
|
||||||
|
|
||||||
|
1. 用户打开小程序 → 登录页。
|
||||||
|
2. 点击“使用微信登录”，完成微信授权。
|
||||||
|
3. 登录后：
|
||||||
|
|
||||||
|
* 若查无此用户，也无此用户提交过申请 → 进入账号申请页。
|
||||||
|
* 若查到该用户提交过申请，状态为“审核中” → 进入“审核中”状态页。
|
||||||
|
* 若查到该用户提交过申请，状态为“拒绝/未通过” → 进入“无权限”状态页。
|
||||||
|
* 若查到该用户申请已通过 → 跳转至用户设置的默认首页（初始为“任务”页）。
|
||||||
|
|
||||||
|
## 7.2 默认首页配置流程
|
||||||
|
|
||||||
|
* 初始默认首页为“任务”。
|
||||||
|
* 用户可在“我的 → 首页设置”中将首页设置为：任务 / 看板。
|
||||||
|
* 设置为“切换即保存”，与账号绑定（不因退出登录而重置）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 八、页面级需求
|
||||||
|
|
||||||
|
以下各页面按【页面名称 / 入口 / 布局结构 / 功能与交互 / 状态】描述。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8.1 登录与访问控制相关
|
||||||
|
|
||||||
|
### 8.1.1 登录页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 小程序启动未登录状态。
|
||||||
|
|
||||||
|
**布局结构**
|
||||||
|
|
||||||
|
* 顶部：App Logo 占位 + 应用名称（球房运营助手）。
|
||||||
|
* 中部：一句产品描述文案，例如：
|
||||||
|
|
||||||
|
* `为台球厅提升运营效率的内部管理工具`
|
||||||
|
* 底部区域：
|
||||||
|
|
||||||
|
* 主按钮：`使用微信登录`（微信授权登录入口）。
|
||||||
|
* 下方文案 + 勾选框：
|
||||||
|
|
||||||
|
* 复选框 + 文案：`我已阅读并同意《用户协议》和《隐私政策》`
|
||||||
|
* 协议名称为可点击文本（具体跳转页面可后续补充）。
|
||||||
|
|
||||||
|
**功能与交互**
|
||||||
|
|
||||||
|
* 用户必须勾选协议复选框才能点击“使用微信登录”，否则按钮为禁用态。
|
||||||
|
* 点击“使用微信登录”调用微信授权流程，登录成功后进入流程 7.1 所述分支。
|
||||||
|
* 登录失败时，在底部弹出错误提示（Toast），重试留在本页。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.1.2 账号申请页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 登录成功后，系统查无该用户及其申请记录时。
|
||||||
|
|
||||||
|
**布局结构**
|
||||||
|
|
||||||
|
* 顶部：标题 `申请访问权限`。
|
||||||
|
* 主体：
|
||||||
|
|
||||||
|
* 文本说明：简单说明需要申请原因，例如：
|
||||||
|
|
||||||
|
* `请填写申请说明，审核通过后即可使用小程序功能。`
|
||||||
|
* 表单区：
|
||||||
|
|
||||||
|
* 字段 1：
|
||||||
|
|
||||||
|
* 标签：`申请说明`，带红色星号（必填）。
|
||||||
|
* 多行文本输入框，用于填写自我介绍、岗位、所属门店等说明（具体内容由用户自由填写）。
|
||||||
|
* 底部：
|
||||||
|
|
||||||
|
* 主按钮：`提交申请`
|
||||||
|
|
||||||
|
**功能与交互**
|
||||||
|
|
||||||
|
* “申请说明”为必填，如为空则点击“提交申请”时在输入框下方显示错误提示：`申请说明不能为空`。
|
||||||
|
* 提交成功后，进入“审核中”页。
|
||||||
|
* 接口错误时，弹出错误提示，停留在本页。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.1.3 审核中页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 登录后发现该用户有申请记录，状态为“审核中”。
|
||||||
|
|
||||||
|
**布局结构**
|
||||||
|
|
||||||
|
* 居中展示：
|
||||||
|
|
||||||
|
* 图标（等待/审核中占位图标）。
|
||||||
|
* 标题文案：`申请审核中`
|
||||||
|
* 说明文案：例如：`您的访问申请正在审核中，请稍后再试或联系管理员。`
|
||||||
|
* 不提供其他操作按钮，保持不可操作状态。
|
||||||
|
|
||||||
|
**功能与交互**
|
||||||
|
|
||||||
|
* 用户可关闭小程序或退出；再次进入时仍按登录逻辑判断状态。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.1.4 无权限页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 登录后发现该用户申请状态为“拒绝/未通过”，或无访问权限。
|
||||||
|
|
||||||
|
**布局结构**
|
||||||
|
|
||||||
|
* 居中展示：
|
||||||
|
|
||||||
|
* 图标（禁止/无权限占位图标）。
|
||||||
|
* 标题文案：`无访问权限`
|
||||||
|
* 说明文案：例如：`您的访问申请未通过，或当前账号无访问权限。如需使用，请联系管理员。`
|
||||||
|
* 不提供操作按钮，不可操作状态。
|
||||||
|
|
||||||
|
**功能与交互**
|
||||||
|
|
||||||
|
* 用户可关闭小程序或退出；如后续权限变更，再次登录时可进入首页。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8.2 Tab：任务
|
||||||
|
|
||||||
|
### 8.2.1 任务列表页（默认首页）
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 底部 TabBar 点击“任务”。
|
||||||
|
* 登录通过后，如未设置其他默认首页，则默认进入本页。
|
||||||
|
|
||||||
|
**整体布局**
|
||||||
|
|
||||||
|
* 顶部：自定义导航栏（标题：`任务`），左侧无返回按钮。
|
||||||
|
* Banner 区：当前用户信息与业绩概览。
|
||||||
|
* 任务列表：按紧急程度排序的任务列表。
|
||||||
|
* 悬浮助手按钮：右下角。
|
||||||
|
|
||||||
|
**Banner 区内容**
|
||||||
|
|
||||||
|
* 展示内容示例：
|
||||||
|
|
||||||
|
* 第一行：`用户名` + `身份`（例如：张三 / 助教）
|
||||||
|
* 第二行：一句聚合文案，例如：
|
||||||
|
`本月目标 5 万，已完成 3 万，任务 50 个，完成进度 60%`
|
||||||
|
* 第三行：`X 月预计收入：12345 元`（单位为元，取整）
|
||||||
|
* Banner 整块区域可点击，跳转至“业绩详情页”。
|
||||||
|
|
||||||
|
**任务列表结构**
|
||||||
|
|
||||||
|
* 列表为单列列表，不按任务类型分组，仅通过排序和颜色区分。
|
||||||
|
* 排序规则：按紧急程度从高到低排序，类型依次为：
|
||||||
|
|
||||||
|
* 高优先召回（红）
|
||||||
|
* 优先召回（橙）
|
||||||
|
* 关系构建（粉）
|
||||||
|
* 客户回访（蓝）
|
||||||
|
|
||||||
|
**单条任务卡片布局**
|
||||||
|
|
||||||
|
* 第一行（标题行）：
|
||||||
|
|
||||||
|
* 左侧：任务类型标签（带背景色的颜色块或 icon），颜色按类型区分（红/橙/粉/蓝）。
|
||||||
|
* 紧随其后：客户姓名。
|
||||||
|
* 右侧：`>` 箭头图标，提示可点击进入详情。
|
||||||
|
* 第二行（补充行）：
|
||||||
|
|
||||||
|
* 核心信息 + 召回说明，具体字段根据当前任务类型与接口返回内容展示，例如：最近到店时间、召回原因、优先级说明等。
|
||||||
|
* 其他：
|
||||||
|
|
||||||
|
* 不提供搜索框和筛选组件，任务集合由接口控制。
|
||||||
|
|
||||||
|
**交互说明**
|
||||||
|
|
||||||
|
* 点击整条任务卡片：进入“任务详情页”。
|
||||||
|
* 长按任务卡片：在长按位置上方弹出黑底浮层菜单，样式类似微信对话长按菜单，菜单项：
|
||||||
|
|
||||||
|
* `任务置底`
|
||||||
|
* `问问助手`
|
||||||
|
* `备注`
|
||||||
|
* “任务置底”：前端仅调用接口，排序规则由后端控制；前端不单独维护生命周期状态。
|
||||||
|
* “问问助手”：跳转至“助手对话页”，以该任务信息为引用，开启新对话主题。
|
||||||
|
* “备注”：弹出底部浮层，输入备注内容并保存，备注按时间排序纳入“备注记录”。
|
||||||
|
|
||||||
|
**空状态**
|
||||||
|
|
||||||
|
* 当列表为空时，在列表区域居中显示文案：`暂无任务`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.2.2 任务详情页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 任务列表页点击某条任务。
|
||||||
|
|
||||||
|
**布局结构**
|
||||||
|
|
||||||
|
* 顶部：自定义导航栏
|
||||||
|
|
||||||
|
* 左：返回按钮 `<`
|
||||||
|
* 中：标题，例如 `任务详情`
|
||||||
|
* 主体内容区：
|
||||||
|
|
||||||
|
* 模块一：客户基本信息
|
||||||
|
|
||||||
|
* 示例字段：姓名、手机号、会员编号、性别、标签（如 VIP/新客）、所属门店等（以接口为准）。
|
||||||
|
* 模块二：消费习惯
|
||||||
|
|
||||||
|
* 文本描述形式，例如：“偏好晚间 21:00 后到店，喜欢中式台球，平均消费 300 元/月”等。
|
||||||
|
* 模块三：与我的关系
|
||||||
|
|
||||||
|
* 等级：很好 / 好 / 一般 / 较陌生
|
||||||
|
* 每个等级附带一段文字说明（例如“最近 3 个月每周均有1次课程”等）。
|
||||||
|
* 模块四：任务建议
|
||||||
|
|
||||||
|
* 纯文本内容，给出执行建议、沟通话术提示等。
|
||||||
|
* 底部固定操作栏：
|
||||||
|
|
||||||
|
* 左按钮：`问问助手`
|
||||||
|
* 右按钮：`备注`
|
||||||
|
|
||||||
|
**交互说明**
|
||||||
|
|
||||||
|
* `问问助手`：
|
||||||
|
|
||||||
|
* 跳转至助手对话页。
|
||||||
|
* 以当前任务的关键信息（任务类型、客户名、任务说明等）作为引用内容，显示为灰底卡片，用户在其下输入文本发送。
|
||||||
|
* 通过此入口固定新建一个新对话主题。
|
||||||
|
* `备注`：
|
||||||
|
|
||||||
|
* 底部弹出浮层，包含备注输入框和“保存”按钮。
|
||||||
|
* 保存后生成一条备注记录，类型标记为“任务备注”，记入“备注记录”，按照创建时间倒序展示。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.2.3 业绩详情页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 任务列表页 Banner 区点击。
|
||||||
|
|
||||||
|
**布局结构**
|
||||||
|
|
||||||
|
* 顶部 Banner：
|
||||||
|
|
||||||
|
* 展示：用户名 + 身份 + 本月业绩进度 + 本月预计收入。
|
||||||
|
* 示例：
|
||||||
|
|
||||||
|
* 第一行：`张三（助教）`
|
||||||
|
* 第二行：`本月目标：5 万，已完成：3 万，任务：50 个，完成进度：60%`
|
||||||
|
* 第三行：`本月预计收入：1.23 万元`
|
||||||
|
* 下方内容区：多组指标，以两列卡片布局展示。
|
||||||
|
|
||||||
|
**指标分组示意**
|
||||||
|
|
||||||
|
* 分组一：`收入构成`
|
||||||
|
* 分组二：`台球助教业绩`
|
||||||
|
* 分组三：`充值业绩`
|
||||||
|
* 分组四：`酒水业绩`
|
||||||
|
|
||||||
|
每组都有组标题一行，下面为两列卡片网格。
|
||||||
|
|
||||||
|
**单个指标卡片内容**
|
||||||
|
|
||||||
|
* 布局：
|
||||||
|
|
||||||
|
* 卡片内上下两行，可视为“名称行 + 数据行”。
|
||||||
|
* 字段：
|
||||||
|
|
||||||
|
* 指标名称
|
||||||
|
* 当前值
|
||||||
|
* 目标值
|
||||||
|
* 完成度（百分比）
|
||||||
|
* 对齐与单位：
|
||||||
|
|
||||||
|
* 数值区居中对齐。
|
||||||
|
* 单位规则：
|
||||||
|
|
||||||
|
* 元：整数，无小数。
|
||||||
|
* 万元：保留 2 位小数。
|
||||||
|
* 完成度：使用 `%`。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 页面整体可滚动。
|
||||||
|
* 卡片本身无需额外交互（本期不跳转、不长按）。
|
||||||
|
|
||||||
|
**时间范围**
|
||||||
|
|
||||||
|
* 本页仅展示当前“本月”的业绩数据，不提供时间周期切换。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8.3 Tab：看板
|
||||||
|
|
||||||
|
### 8.3.1 看板首页（含财务/客户/助教）
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 底部 TabBar 点击“看板”。
|
||||||
|
|
||||||
|
**顶部区域**
|
||||||
|
|
||||||
|
* 一级标签（顶部 Tab）：
|
||||||
|
|
||||||
|
* `财务` / `客户` / `助教`
|
||||||
|
* 默认选中：`财务`（原型中展示全功能视角）
|
||||||
|
|
||||||
|
**筛选区域**
|
||||||
|
|
||||||
|
* 位置：一级标签下方。
|
||||||
|
* 展示方式：多标签筛选按钮，每个按钮点击后展开下拉菜单，交互类似外卖/点评类应用。
|
||||||
|
* 联动规则：
|
||||||
|
|
||||||
|
* 更改任一筛选条件后，立即刷新当前视图数据（无需额外“确定”按钮）。
|
||||||
|
* 不提供“重置筛选”按钮。
|
||||||
|
|
||||||
|
**滚动行为**
|
||||||
|
|
||||||
|
* 当用户向上滚动列表内容时，筛选区域保持吸顶显示。
|
||||||
|
* 当用户向下快速滚动时，可自动收起/隐藏筛选区域，仅保留一级 Tab，增强可视区域。
|
||||||
|
* 向上滚动时再次展示筛选区域。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.3.2 看板 – 财务视图
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 看板顶部 Tab 选择“财务”（默认）。
|
||||||
|
|
||||||
|
**筛选条件**
|
||||||
|
|
||||||
|
* 条件 1：时间月份
|
||||||
|
|
||||||
|
* 选项：
|
||||||
|
|
||||||
|
1. 本月（默认）
|
||||||
|
2. 上个月
|
||||||
|
3. 最近 3 个月
|
||||||
|
4. 最近半年
|
||||||
|
5. 本季度
|
||||||
|
6. 上个季度
|
||||||
|
7. 本周
|
||||||
|
8. 上周
|
||||||
|
9. 指定时间周期
|
||||||
|
* 选择“指定时间周期”时：
|
||||||
|
|
||||||
|
* 打开日期区间选择组件，可选择开始日期与结束日期。
|
||||||
|
* 最大跨度：366 天。
|
||||||
|
* 当用户选择的时间跨度超过 366 天时，非模态提示：例如 `时间跨度不可超过 366 天`，并阻止该选择生效。
|
||||||
|
|
||||||
|
* 条件 2：区域
|
||||||
|
|
||||||
|
* 选项：
|
||||||
|
|
||||||
|
1. 全部（默认）
|
||||||
|
2. 大厅（子级：A 区、B 区、C 区）
|
||||||
|
3. 麻将房
|
||||||
|
4. 团建房
|
||||||
|
5. 具体房间台桌
|
||||||
|
* 选择“具体房间台桌”时：
|
||||||
|
|
||||||
|
* 弹出选择弹窗，列表单选。
|
||||||
|
* 列表按“大厅 / 麻将房 / 团建房”分组展示具体房间或台桌。
|
||||||
|
* 如接口获取失败或为空，在弹窗中显示：`网络错误，请重试`，并提供“重试”入口。
|
||||||
|
|
||||||
|
**财务汇总行**
|
||||||
|
|
||||||
|
* 展示位置：筛选区域下方第一行。
|
||||||
|
* 分为三列：
|
||||||
|
|
||||||
|
* 当前筛选条件下实际收入
|
||||||
|
* 当前筛选条件下实际支出
|
||||||
|
* 当前筛选条件下净利润
|
||||||
|
* 显隐与“预计”字样：
|
||||||
|
|
||||||
|
* 某些筛选条件下不显示支出与净利润，由接口控制。
|
||||||
|
* 某些时间维度（例如本月、本周等）可显示“预计”字样：`12345 元（预计）`，由接口在数据中标记。
|
||||||
|
|
||||||
|
**内容分区**
|
||||||
|
|
||||||
|
分为四个部分，依次：
|
||||||
|
|
||||||
|
1. 营业数据
|
||||||
|
2. 收入构成
|
||||||
|
3. 支出构成
|
||||||
|
4. 利润构成
|
||||||
|
|
||||||
|
每一部分包含：
|
||||||
|
|
||||||
|
* 标题行：如 `营业数据`
|
||||||
|
* 指标卡片区：每行 3 个卡片，自动换行。
|
||||||
|
|
||||||
|
**指标卡片结构**
|
||||||
|
|
||||||
|
* 每个卡片：
|
||||||
|
|
||||||
|
* 第一行（标题行）：左侧图标（简单占位）、右侧为指标名称（例如“总流水”、“客单价”等）。
|
||||||
|
* 第二行（详情行）：文字 + 数值，或文字 / 数值单独展示：
|
||||||
|
|
||||||
|
* 例如：`本期：12345 元`，或 `毛利率：35%`。
|
||||||
|
* 指标列表（示意，实际由接口控制）：
|
||||||
|
|
||||||
|
* 营业数据：总流水、客单价、开台数、场次、平均停留时长等。
|
||||||
|
* 收入构成：桌费、助教费、酒水、餐饮、包房费、其他。
|
||||||
|
* 支出构成：房租、水电、人工、耗材、推广等。
|
||||||
|
* 利润构成：毛利、净利、毛利率、净利率等。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 长按任意指标卡片：
|
||||||
|
|
||||||
|
* 启动助手对话，跳转至“助手对话页”，以该指标为引用内容（来源：财务看板 + 指标名 + 当前数值等），开启新对话主题。
|
||||||
|
* 列表下拉刷新，重新拉取数据。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.3.3 看板 – 客户视图
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 看板顶部 Tab 选择“客户”。
|
||||||
|
|
||||||
|
**筛选条件**
|
||||||
|
|
||||||
|
* 条件 1：客户类型
|
||||||
|
|
||||||
|
* 最近到店：按最近到店时间由近到远。
|
||||||
|
* 最应召回：按当天召回因子由高到低（默认）。
|
||||||
|
* 最近充值：按充值时间由近到远。
|
||||||
|
* 最高消费：最近 60 天到店消费金额由高到低（不含充值）。
|
||||||
|
* 最高余额：按单个客户所有会员卡金额总计由高到低。
|
||||||
|
* 最频繁：最近 60 天到店次数由多到少。
|
||||||
|
* 潜力股：最近 60 天到店间隔有缩短趋势的客户。
|
||||||
|
* 最专一：最近 60 天使用助教服务 ≥10 次，且 ≥8 次为同一助教，最近 2 次均为该助教。
|
||||||
|
|
||||||
|
* 条件 2：偏爱项目
|
||||||
|
|
||||||
|
* 不限（默认）
|
||||||
|
* 中式/追分
|
||||||
|
* 斯诺克
|
||||||
|
* 麻将
|
||||||
|
* 团建
|
||||||
|
|
||||||
|
**助教身份默认筛选（后台行为，前端不显式展示）**
|
||||||
|
|
||||||
|
* 当登录用户身份为“助教”时，后台默认增加过滤条件：仅显示最近 14 天内该助教提供过课程服务的客户。
|
||||||
|
* 前端不提供取消或修改该条件的开关，也不在 UI 中单独标识。
|
||||||
|
|
||||||
|
**客户列表卡片布局**
|
||||||
|
|
||||||
|
* 第一行：
|
||||||
|
|
||||||
|
* 左侧：
|
||||||
|
|
||||||
|
* 客户名称
|
||||||
|
* 等级标（如等级图标或字母 A/B/C）
|
||||||
|
* VIP 标识（如“VIP”标签），有则显示。
|
||||||
|
* 右侧：最喜欢的助教列表，文字形式展示，例如：
|
||||||
|
|
||||||
|
* `💖 助教A、💖 助教B、💛 助教C...`
|
||||||
|
* 最多展示前三，超过则以省略号表示。
|
||||||
|
|
||||||
|
* 第二行：
|
||||||
|
|
||||||
|
* 当前排序条件对应的核心指标（如召回因子、储值金额、累计消费等）。
|
||||||
|
* 最近到店时间（副文案）。
|
||||||
|
* 可在末尾增加一句简短说明，例如：`最近 30 天到店 5 次` 等。
|
||||||
|
|
||||||
|
**其他字段**
|
||||||
|
|
||||||
|
* 在“最高余额”等维度时，应显示该客户当前余额字段（由接口提供），格式按金额规则显示。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 点击客户卡片：进入“客户详情页”。
|
||||||
|
* 长按客户卡片（可选）：可考虑后续扩展为快速备注或助手入口，本期可不实现。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.3.4 客户详情页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 看板 – 客户视图列表点击某客户。
|
||||||
|
|
||||||
|
**布局**
|
||||||
|
|
||||||
|
* 顶部导航：标题 `客户详情`，左侧返回按钮。
|
||||||
|
* 模块一：客户基本信息
|
||||||
|
|
||||||
|
* 示例字段：姓名、手机号、会员编号、性别、等级、VIP 标识、所属门店等。
|
||||||
|
* 手机号可支持点击拨号（后续实现时决定）。
|
||||||
|
* 模块二：消费习惯
|
||||||
|
|
||||||
|
* 标签 + 文本说明的形式：
|
||||||
|
|
||||||
|
* 标签示例：`常来夜场`、`偏爱中式`、`高客单价` 等。
|
||||||
|
* 文本说明：简要描述消费偏好、时段、频率等。
|
||||||
|
* 模块三：与我的关系
|
||||||
|
|
||||||
|
* 等级：很好 / 好 / 一般 / 较陌生。
|
||||||
|
* 等级下附文字说明，描述互动频率、最近服务情况等。
|
||||||
|
* 底部固定操作栏：
|
||||||
|
|
||||||
|
* `问问助手`
|
||||||
|
* `备注`
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* `问问助手`：
|
||||||
|
|
||||||
|
* 跳转到助手对话页。
|
||||||
|
* 引用当前客户的关键信息（客户名、ID、最近消费等）作为灰底引用卡片。
|
||||||
|
* 开启新对话主题。
|
||||||
|
* `备注`：
|
||||||
|
|
||||||
|
* 底部弹出备注输入浮层，类型标记为“客户备注”，保存后进入“备注记录”。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.3.5 看板 – 助教学视图
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 看板顶部 Tab 选择“助教”。
|
||||||
|
|
||||||
|
**筛选条件**
|
||||||
|
|
||||||
|
* 条件 1：排序维度
|
||||||
|
|
||||||
|
* 创收最多（默认）：按该助教带来的球房流水由高到低。
|
||||||
|
* 创收最低：按球房流水由低到高。
|
||||||
|
* 业绩最高：按业绩完成百分比由高到低。
|
||||||
|
* 业绩最低：按业绩完成百分比由低到高.
|
||||||
|
* 工资最高：按工资由高到低。
|
||||||
|
* 工资最低：按工资由低到高。
|
||||||
|
* 潜在客源储值：按该助教客户关系 >0.7 的所有客户储值金额总和由高到低。
|
||||||
|
|
||||||
|
* 条件 2：擅长项目
|
||||||
|
|
||||||
|
* 不限（默认）
|
||||||
|
* 中式/追分
|
||||||
|
* 斯诺克
|
||||||
|
* 麻将
|
||||||
|
* 团建
|
||||||
|
|
||||||
|
* 条件 3：时间月份
|
||||||
|
|
||||||
|
* 同财务视图：本月（默认）、上月、最近 3 个月、最近半年、本季度、上个季度、本周、上周、指定时间周期。
|
||||||
|
* “指定时间周期”同样使用日期区间选择组件，并限制最大跨度 366 天，超出时非模态提示。
|
||||||
|
|
||||||
|
**助教列表卡片布局**
|
||||||
|
|
||||||
|
* 第一行：
|
||||||
|
|
||||||
|
* 左侧：
|
||||||
|
|
||||||
|
* 助教姓名
|
||||||
|
* 等级标（如星级/等级）
|
||||||
|
* 擅长项目（标签形式，展示主擅长方向）。
|
||||||
|
* 右侧：
|
||||||
|
|
||||||
|
* 关系最好的客户列表，展示客户名称和关系指数（例如：`客户A 0.98、客户B 0.92、客户C 0.89...`），最多展示前三，超过以省略号表示。
|
||||||
|
|
||||||
|
* 第二行：
|
||||||
|
|
||||||
|
* 当前排序维度对应的数值信息，附单位/说明：
|
||||||
|
|
||||||
|
* 如创收最多：`本期流水：12345 元`
|
||||||
|
* 业绩最高：`完成度：87%`
|
||||||
|
* 工资：`本期工资：8000 元`
|
||||||
|
* 上课时长等（小时）。
|
||||||
|
|
||||||
|
* 不显示头像。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 点击助教卡片：进入“助教详情页”。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.3.6 助教详情页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 看板 – 助教视图列表点击某助教。
|
||||||
|
|
||||||
|
**布局**
|
||||||
|
|
||||||
|
* 顶部导航：标题 `助教详情`，左侧返回按钮。
|
||||||
|
|
||||||
|
* 模块一：助教基本信息
|
||||||
|
|
||||||
|
* 字段示例：姓名、工号、所属门店、擅长项目、等级等。
|
||||||
|
|
||||||
|
* 模块二：流水与业绩
|
||||||
|
|
||||||
|
* 本月带来的球房流水（数值，单位元或万元）。
|
||||||
|
* 最近 3 个月带来的球房流水（数值）。
|
||||||
|
* 综合业绩完成度（一个总进度百分比）。
|
||||||
|
|
||||||
|
* 模块三：工资与上课时长
|
||||||
|
|
||||||
|
* 本月工资总额。
|
||||||
|
* 对应时间段的上课总时长（小时）。
|
||||||
|
|
||||||
|
* 模块四：前 10 个客户指数最高的客户列表
|
||||||
|
|
||||||
|
* 列表项字段：客户名 + 指数数值（0～1 或百分比展示）。
|
||||||
|
|
||||||
|
* 底部固定操作栏：
|
||||||
|
|
||||||
|
* `问问助手`
|
||||||
|
* `备注`
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* `问问助手`：以助教信息和主要指标为引用，开启新对话主题。
|
||||||
|
* `备注`：对该助教添加备注记录，类型为“助教备注”。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8.4 Tab：我的
|
||||||
|
|
||||||
|
### 8.4.1 我的首页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* 底部 TabBar 点击“我的”。
|
||||||
|
|
||||||
|
**布局**
|
||||||
|
|
||||||
|
* 顶部：用户信息区域
|
||||||
|
|
||||||
|
* 用户名、身份（店长/助教等）、所属门店等信息。
|
||||||
|
* 列表菜单项：
|
||||||
|
|
||||||
|
* `备注记录`
|
||||||
|
* `助手对话记录`
|
||||||
|
* `首页设置`
|
||||||
|
* `退出账号`
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 点击各行进入对应子页面或触发弹窗。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.4.2 备注记录页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* “我的”首页点击 `备注记录`。
|
||||||
|
|
||||||
|
**布局**
|
||||||
|
|
||||||
|
* 标题：`备注记录`
|
||||||
|
* 列表按时间倒序（由近到远）平铺，不按日期分组。
|
||||||
|
* 每条记录显示：
|
||||||
|
|
||||||
|
* 备注全文（不做截断或只做必要的单行/多行控制）。
|
||||||
|
* 关联对象：例如 `客户：张三` / `任务：XXX` / `助教：李四`。
|
||||||
|
* 创建时间。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 点击备注记录：不进入详情页（即本页即为详情展示），不支持编辑/删除。
|
||||||
|
* 列表为空时：显示 `暂无数据`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.4.3 助手对话记录页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* “我的”首页点击 `助手对话记录`。
|
||||||
|
|
||||||
|
**布局**
|
||||||
|
|
||||||
|
* 标题：`助手对话记录`
|
||||||
|
* 列表项字段：
|
||||||
|
|
||||||
|
* 对话标题：由接口返回（一般为首条消息摘要）。
|
||||||
|
* 最近一次对话时间。
|
||||||
|
* 消息条数概览（例如：`共 25 条消息`）。
|
||||||
|
* 列表按最近更新时间倒序。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 点击某条记录：
|
||||||
|
|
||||||
|
* 进入“助手对话页”，直接打开该会话。
|
||||||
|
* 默认滚动到该对话的最后一条消息位置。
|
||||||
|
* 不提供删除对话能力。
|
||||||
|
* 列表为空时：显示 `暂无数据`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.4.4 首页设置页
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* “我的”首页点击 `首页设置`。
|
||||||
|
|
||||||
|
**布局**
|
||||||
|
|
||||||
|
* 标题：`首页设置`
|
||||||
|
* 内容：
|
||||||
|
|
||||||
|
* 单选列表：
|
||||||
|
|
||||||
|
* `任务`
|
||||||
|
* `看板`
|
||||||
|
* 每项前有单选圆点，当前选中项高亮。
|
||||||
|
* 底部：返回按钮。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 用户点击某一选项后立即生效，作为新的默认首页设置（切换即保存，不需要额外保存按钮）。
|
||||||
|
* 退出账号不会清除该设置，再次登录仍使用该默认首页。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8.4.5 退出账号（确认弹窗）
|
||||||
|
|
||||||
|
**入口**
|
||||||
|
|
||||||
|
* “我的”首页点击 `退出账号`。
|
||||||
|
|
||||||
|
**交互**
|
||||||
|
|
||||||
|
* 弹出确认弹窗：
|
||||||
|
|
||||||
|
* 标题：`确认退出`
|
||||||
|
* 文案：`确认退出当前账号吗？`
|
||||||
|
* 按钮：
|
||||||
|
|
||||||
|
* 取消
|
||||||
|
* 退出
|
||||||
|
* 点击“退出”：
|
||||||
|
|
||||||
|
* 清除登录态。
|
||||||
|
* 不清理由于当前账号相关的本地配置（如首页设置、筛选条件等）。
|
||||||
|
* 跳转回“登录页”。
|
||||||
|
* 点击“取消”：关闭弹窗，留在“我的”页。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8.5 全局：助手对话页
|
||||||
|
|
||||||
|
### 8.5.1 入口
|
||||||
|
|
||||||
|
* 悬浮助手按钮。
|
||||||
|
* 任务详情页底部按钮“问问助手”。
|
||||||
|
* 客户详情页底部按钮“问问助手”。
|
||||||
|
* 助教详情页底部按钮“问问助手”。
|
||||||
|
* 看板各视图中长按指标启动助手。
|
||||||
|
* “助手对话记录”页点击某一条历史记录。
|
||||||
|
|
||||||
|
### 8.5.2 聊天形式
|
||||||
|
|
||||||
|
* 对话双方：用户（“我”）与“助手”。
|
||||||
|
* UI 全面仿微信对话界面：
|
||||||
|
|
||||||
|
* 左侧：助手气泡，显示助手头像（固定）和名称。
|
||||||
|
* 右侧：用户气泡，显示用户头像和名称。
|
||||||
|
* 对话记录：
|
||||||
|
|
||||||
|
* 最近 50 条消息默认加载。
|
||||||
|
* 上拉加载更早记录。
|
||||||
|
|
||||||
|
### 8.5.3 引用内容展示
|
||||||
|
|
||||||
|
* 从任务/客户/助教/看板等入口进入助手时，将引用上下文：
|
||||||
|
|
||||||
|
* 引用内容显示为一块灰底小卡片，位于即将发送的消息气泡上方。
|
||||||
|
* 卡片内容包括：
|
||||||
|
|
||||||
|
* 来源类型：任务 / 客户 / 助教 / 看板（具体子模块如财务/客户看板等）。
|
||||||
|
* 标题或名称（例如客户名、任务标题、指标名）。
|
||||||
|
* 部分摘要文案或关键数据。
|
||||||
|
* 引用内容不可编辑，用户只能在下方输入框中补充自己的提问文本后发送。
|
||||||
|
|
||||||
|
### 8.5.4 会话管理
|
||||||
|
|
||||||
|
* 每个“新对话主题”形成一个独立会话，出现在“助手对话记录”列表中。
|
||||||
|
* 来源：
|
||||||
|
|
||||||
|
* 从“助手对话记录”进入：
|
||||||
|
|
||||||
|
* 直接打开对应会话，加载历史记录，滚动到最后一条消息。
|
||||||
|
* 如距最后一条消息超过 1 小时，在输入框区域上方显示横条提示，提供两个按钮：
|
||||||
|
|
||||||
|
* `新对话主题`
|
||||||
|
* `继续对话`
|
||||||
|
* 选择“新对话主题”：清空当前对话展示区域，开始新的对话会话，该会话作为新条目记录在“助手对话记录”中，历史对话仍保留在原会话条目中。
|
||||||
|
* 选择“继续对话”：在当前会话中继续发送消息，对话标题不变。
|
||||||
|
* 从任务/客户/助教/看板入口的“问问助手”或长按启动：
|
||||||
|
|
||||||
|
* 固定开启“新对话主题”，不受 1 小时规则影响，始终新建会话，并带入引用内容。
|
||||||
|
|
||||||
|
### 8.5.5 输入与发送
|
||||||
|
|
||||||
|
* 输入区包含：
|
||||||
|
|
||||||
|
* 文本输入框。
|
||||||
|
* “按住说话”按钮（语音转文字）。
|
||||||
|
* 发送按钮。
|
||||||
|
|
||||||
|
**语音转文字交互**
|
||||||
|
|
||||||
|
* 点击“按住说话”按钮并按住：
|
||||||
|
|
||||||
|
* 显示录音状态动画，松开后结束录音并开始识别。
|
||||||
|
* 识别结果展示在输入框中，用户可编辑后再点击“发送”。
|
||||||
|
* 识别失败时，弹出提示：`识别失败，请重试`，不发送消息。
|
||||||
|
|
||||||
|
**键盘与滚动行为**
|
||||||
|
|
||||||
|
* 键盘弹出时，列表自动滚动到底部，确保最新消息和输入框可见。
|
||||||
|
* 发送消息后，自动滚动到底部。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 九、非功能性要求
|
||||||
|
|
||||||
|
* 关键页面（任务列表、看板页、助手对话页）首次可接受加载时间：≤ 10 秒（在普通网络环境下）。
|
||||||
|
* 看板页面数据：
|
||||||
|
|
||||||
|
* 各数据块采用懒加载策略，优先加载当前视图及首屏必要数据，其他部分可在滚动时或后台加载，避免一次性加载过多影响首屏体验。
|
||||||
|
* 本阶段不做埋点与统计需求设计。
|
||||||
|
|
||||||
11
i18n/base.json
Normal file
11
i18n/base.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"ios": {
|
||||||
|
"name": "桌球运营助手"
|
||||||
|
},
|
||||||
|
"android": {
|
||||||
|
"name": "桌球运营助手"
|
||||||
|
},
|
||||||
|
"common": {
|
||||||
|
"name": "桌球运营助手"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
miniprogram/app.json
Normal file
13
miniprogram/app.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"pages": [
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/logs/logs"
|
||||||
|
],
|
||||||
|
"window": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "Weixin",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
|
},
|
||||||
|
"componentFramework": "glass-easel",
|
||||||
|
"lazyCodeLoading": "requiredComponents"
|
||||||
|
}
|
||||||
5
miniprogram/app.miniapp.json
Normal file
5
miniprogram/app.miniapp.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"adapteByMiniprogram": {
|
||||||
|
"userName": "gh_521029c3a9c7"
|
||||||
|
}
|
||||||
|
}
|
||||||
18
miniprogram/app.ts
Normal file
18
miniprogram/app.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
// app.ts
|
||||||
|
App<IAppOption>({
|
||||||
|
globalData: {},
|
||||||
|
onLaunch() {
|
||||||
|
// 展示本地存储能力
|
||||||
|
const logs = wx.getStorageSync('logs') || []
|
||||||
|
logs.unshift(Date.now())
|
||||||
|
wx.setStorageSync('logs', logs)
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
wx.login({
|
||||||
|
success: res => {
|
||||||
|
console.log(res.code)
|
||||||
|
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
10
miniprogram/app.wxss
Normal file
10
miniprogram/app.wxss
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/**app.wxss**/
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 200rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
5
miniprogram/pages/index/index.json
Normal file
5
miniprogram/pages/index/index.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {
|
||||||
|
"t-button": "tdesign-miniprogram/button/button"
|
||||||
|
}
|
||||||
|
}
|
||||||
54
miniprogram/pages/index/index.ts
Normal file
54
miniprogram/pages/index/index.ts
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
// index.ts
|
||||||
|
// 获取应用实例
|
||||||
|
const app = getApp<IAppOption>()
|
||||||
|
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||||
|
|
||||||
|
Component({
|
||||||
|
data: {
|
||||||
|
motto: 'Hello World',
|
||||||
|
userInfo: {
|
||||||
|
avatarUrl: defaultAvatarUrl,
|
||||||
|
nickName: '',
|
||||||
|
},
|
||||||
|
hasUserInfo: false,
|
||||||
|
canIUseGetUserProfile: wx.canIUse('getUserProfile'),
|
||||||
|
canIUseNicknameComp: wx.canIUse('input.type.nickname'),
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 事件处理函数
|
||||||
|
bindViewTap() {
|
||||||
|
wx.navigateTo({
|
||||||
|
url: '../logs/logs',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChooseAvatar(e: any) {
|
||||||
|
const { avatarUrl } = e.detail
|
||||||
|
const { nickName } = this.data.userInfo
|
||||||
|
this.setData({
|
||||||
|
"userInfo.avatarUrl": avatarUrl,
|
||||||
|
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onInputChange(e: any) {
|
||||||
|
const nickName = e.detail.value
|
||||||
|
const { avatarUrl } = this.data.userInfo
|
||||||
|
this.setData({
|
||||||
|
"userInfo.nickName": nickName,
|
||||||
|
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getUserProfile() {
|
||||||
|
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
|
||||||
|
wx.getUserProfile({
|
||||||
|
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
this.setData({
|
||||||
|
userInfo: res.userInfo,
|
||||||
|
hasUserInfo: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
28
miniprogram/pages/index/index.wxml
Normal file
28
miniprogram/pages/index/index.wxml
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<!--index.wxml-->
|
||||||
|
<scroll-view class="scrollarea" scroll-y type="list">
|
||||||
|
<view class="container">
|
||||||
|
<view class="userinfo">
|
||||||
|
<block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
|
||||||
|
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
||||||
|
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
|
||||||
|
</button>
|
||||||
|
<view class="nickname-wrapper">
|
||||||
|
<text class="nickname-label">昵称</text>
|
||||||
|
<input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block wx:elif="{{!hasUserInfo}}">
|
||||||
|
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
|
||||||
|
<view wx:else> 请使用2.10.4及以上版本基础库 </view>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
|
||||||
|
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="usermotto">
|
||||||
|
<text class="user-motto">{{motto}}</text>
|
||||||
|
</view>
|
||||||
|
<t-button theme="primary">按钮</t-button>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
62
miniprogram/pages/index/index.wxss
Normal file
62
miniprogram/pages/index/index.wxss
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
/**index.wxss**/
|
||||||
|
page {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.scrollarea {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #aaa;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo-avatar {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 128rpx;
|
||||||
|
height: 128rpx;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usermotto {
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
width: 56px !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
display: block;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nickname-wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: .5px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-bottom: .5px solid rgba(0, 0, 0, 0.1);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nickname-label {
|
||||||
|
width: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nickname-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
4
miniprogram/pages/logs/logs.json
Normal file
4
miniprogram/pages/logs/logs.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {
|
||||||
|
}
|
||||||
|
}
|
||||||
21
miniprogram/pages/logs/logs.ts
Normal file
21
miniprogram/pages/logs/logs.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
// logs.ts
|
||||||
|
// const util = require('../../utils/util.js')
|
||||||
|
import { formatTime } from '../../utils/util'
|
||||||
|
|
||||||
|
Component({
|
||||||
|
data: {
|
||||||
|
logs: [],
|
||||||
|
},
|
||||||
|
lifetimes: {
|
||||||
|
attached() {
|
||||||
|
this.setData({
|
||||||
|
logs: (wx.getStorageSync('logs') || []).map((log: string) => {
|
||||||
|
return {
|
||||||
|
date: formatTime(new Date(log)),
|
||||||
|
timeStamp: log
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
6
miniprogram/pages/logs/logs.wxml
Normal file
6
miniprogram/pages/logs/logs.wxml
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<!--logs.wxml-->
|
||||||
|
<scroll-view class="scrollarea" scroll-y type="list">
|
||||||
|
<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
|
||||||
|
<view class="log-item">{{index + 1}}. {{log.date}}</view>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
16
miniprogram/pages/logs/logs.wxss
Normal file
16
miniprogram/pages/logs/logs.wxss
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
page {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.scrollarea {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
.log-item {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.log-item:last-child {
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
19
miniprogram/utils/util.ts
Normal file
19
miniprogram/utils/util.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
export const formatTime = (date: Date) => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
const hour = date.getHours()
|
||||||
|
const minute = date.getMinutes()
|
||||||
|
const second = date.getSeconds()
|
||||||
|
|
||||||
|
return (
|
||||||
|
[year, month, day].map(formatNumber).join('/') +
|
||||||
|
' ' +
|
||||||
|
[hour, minute, second].map(formatNumber).join(':')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatNumber = (n: number) => {
|
||||||
|
const s = n.toString()
|
||||||
|
return s[1] ? s : '0' + s
|
||||||
|
}
|
||||||
31
package-lock.json
generated
Normal file
31
package-lock.json
generated
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "miniprogram-ts-quickstart",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "miniprogram-ts-quickstart",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"tdesign-miniprogram": "^1.12.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"miniprogram-api-typings": "^2.8.3-1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/miniprogram-api-typings": {
|
||||||
|
"version": "2.12.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/miniprogram-api-typings/-/miniprogram-api-typings-2.12.0.tgz",
|
||||||
|
"integrity": "sha512-ibvbqeslVFur0IAvTxLMvsbtvVcMo6gwvOnj0YZHV7aeDLu091VQRrETT2QuiG9P6aZWRcxeNGJChRKVPCp9VQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/tdesign-miniprogram": {
|
||||||
|
"version": "1.12.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/tdesign-miniprogram/-/tdesign-miniprogram-1.12.2.tgz",
|
||||||
|
"integrity": "sha512-ZpOdwonT26RRCK/FWbg9tR2lAJ54Hb4PAdyTWu8URWkbKOmSQhn0JCwCtWWRofKbyWCPsCn5NqljobaGh5VCMg==",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15
package.json
Normal file
15
package.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"name": "miniprogram-ts-quickstart",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"scripts": {},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "",
|
||||||
|
"dependencies": {
|
||||||
|
"tdesign-miniprogram": "^1.12.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"miniprogram-api-typings": "^2.8.3-1"
|
||||||
|
}
|
||||||
|
}
|
||||||
58
project.config.json
Normal file
58
project.config.json
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"miniprogramRoot": "miniprogram/",
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"setting": {
|
||||||
|
"useCompilerPlugins": [
|
||||||
|
"typescript"
|
||||||
|
],
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
},
|
||||||
|
"coverView": false,
|
||||||
|
"postcss": false,
|
||||||
|
"minified": false,
|
||||||
|
"enhance": true,
|
||||||
|
"showShadowRootInWxmlPanel": false,
|
||||||
|
"packNpmManually": true,
|
||||||
|
"packNpmRelationList": [
|
||||||
|
{
|
||||||
|
"packageJsonPath": "./package.json",
|
||||||
|
"miniprogramNpmDistDir": "./miniprogram/"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ignoreUploadUnusedFiles": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"skylineRenderEnable": true,
|
||||||
|
"condition": true,
|
||||||
|
"es6": true,
|
||||||
|
"compileWorklet": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"localPlugins": false,
|
||||||
|
"swc": false,
|
||||||
|
"disableSWC": true,
|
||||||
|
"disableUseStrict": false
|
||||||
|
},
|
||||||
|
"simulatorType": "wechat",
|
||||||
|
"simulatorPluginLibVersion": {
|
||||||
|
"wxext14566970e7e9f62": "3.6.5-41"
|
||||||
|
},
|
||||||
|
"condition": {},
|
||||||
|
"srcMiniprogramRoot": "miniprogram/",
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
},
|
||||||
|
"libVersion": "trial",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"appid": "wx7c07793d82732921",
|
||||||
|
"projectArchitecture": "multiPlatform"
|
||||||
|
}
|
||||||
68
project.miniapp.json
Normal file
68
project.miniapp.json
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
{
|
||||||
|
"miniVersion": "v2",
|
||||||
|
"name": "%name%",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"versionCode": 100,
|
||||||
|
"i18nFilePath": "i18n",
|
||||||
|
"mini-ohos": {
|
||||||
|
"sdkVersion": ""
|
||||||
|
},
|
||||||
|
"mini-android": {
|
||||||
|
"resourcePath": "miniapp/android/nativeResources",
|
||||||
|
"sdkVersion": "1.6.23",
|
||||||
|
"toolkitVersion": "0.11.0",
|
||||||
|
"useExtendedSdk": {
|
||||||
|
"media": false,
|
||||||
|
"bluetooth": false,
|
||||||
|
"network": false,
|
||||||
|
"scanner": false,
|
||||||
|
"xweb": false
|
||||||
|
},
|
||||||
|
"icons": {
|
||||||
|
"hdpi": "",
|
||||||
|
"xhdpi": "",
|
||||||
|
"xxhdpi": "",
|
||||||
|
"xxxhdpi": ""
|
||||||
|
},
|
||||||
|
"splashscreen": {
|
||||||
|
"hdpi": "",
|
||||||
|
"xhdpi": "",
|
||||||
|
"xxhdpi": ""
|
||||||
|
},
|
||||||
|
"enableVConsole": "open",
|
||||||
|
"privacy": {
|
||||||
|
"enable": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mini-ios": {
|
||||||
|
"sdkVersion": "1.6.27",
|
||||||
|
"toolkitVersion": "0.0.9",
|
||||||
|
"useExtendedSdk": {
|
||||||
|
"WeAppOpenFuns": true,
|
||||||
|
"WeAppNetwork": false,
|
||||||
|
"WeAppBluetooth": false,
|
||||||
|
"WeAppMedia": false,
|
||||||
|
"WeAppLBS": false,
|
||||||
|
"WeAppOthers": false
|
||||||
|
},
|
||||||
|
"enableVConsole": "open",
|
||||||
|
"icons": {
|
||||||
|
"mainIcon120": "",
|
||||||
|
"mainIcon180": "",
|
||||||
|
"spotlightIcon80": "",
|
||||||
|
"spotlightIcon120": "",
|
||||||
|
"settingsIcon58": "",
|
||||||
|
"settingsIcon87": "",
|
||||||
|
"notificationIcon40": "",
|
||||||
|
"notificationIcon60": "",
|
||||||
|
"appStore1024": ""
|
||||||
|
},
|
||||||
|
"splashScreen": {
|
||||||
|
"customImage": ""
|
||||||
|
},
|
||||||
|
"privacy": {
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"enableOpenUrlNavigate": true
|
||||||
|
}
|
||||||
|
}
|
||||||
23
project.private.config.json
Normal file
23
project.private.config.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "LLZQ-1",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true,
|
||||||
|
"urlCheck": true,
|
||||||
|
"coverView": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"skylineRenderEnable": true,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"autoAudits": false,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": false,
|
||||||
|
"useStaticServer": false,
|
||||||
|
"useLanDebug": false,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"bigPackageSizeSupport": false,
|
||||||
|
"checkInvalidKey": true,
|
||||||
|
"ignoreDevUnusedFiles": true
|
||||||
|
},
|
||||||
|
"libVersion": "3.11.2"
|
||||||
|
}
|
||||||
1
reports/assistant_orders_13811638071_2026-01-01.csv
Normal file
1
reports/assistant_orders_13811638071_2026-01-01.csv
Normal file
@@ -0,0 +1 @@
|
|||||||
|
????,?????,??(??)??,????,????,??????,????
|
||||||
|
34
tsconfig.json
Normal file
34
tsconfig.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"module": "CommonJS",
|
||||||
|
"target": "ES2020",
|
||||||
|
"allowJs": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"alwaysStrict": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"strict": true,
|
||||||
|
"strictPropertyInitialization": true,
|
||||||
|
"lib": ["ES2020"],
|
||||||
|
"typeRoots": [
|
||||||
|
"./typings"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
],
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
8
typings/index.d.ts
vendored
Normal file
8
typings/index.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/// <reference path="./types/index.d.ts" />
|
||||||
|
|
||||||
|
interface IAppOption {
|
||||||
|
globalData: {
|
||||||
|
userInfo?: WechatMiniprogram.UserInfo,
|
||||||
|
}
|
||||||
|
userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback,
|
||||||
|
}
|
||||||
1
typings/types/index.d.ts
vendored
Normal file
1
typings/types/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference path="./wx/index.d.ts" />
|
||||||
74
typings/types/wx/index.d.ts
vendored
Normal file
74
typings/types/wx/index.d.ts
vendored
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) 2021 Tencent, Inc. All rights reserved.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
/// <reference path="./lib.wx.app.d.ts" />
|
||||||
|
/// <reference path="./lib.wx.page.d.ts" />
|
||||||
|
/// <reference path="./lib.wx.api.d.ts" />
|
||||||
|
/// <reference path="./lib.wx.cloud.d.ts" />
|
||||||
|
/// <reference path="./lib.wx.component.d.ts" />
|
||||||
|
/// <reference path="./lib.wx.behavior.d.ts" />
|
||||||
|
/// <reference path="./lib.wx.event.d.ts" />
|
||||||
|
|
||||||
|
declare namespace WechatMiniprogram {
|
||||||
|
type IAnyObject = Record<string, any>
|
||||||
|
type Optional<F> = F extends (arg: infer P) => infer R ? (arg?: P) => R : F
|
||||||
|
type OptionalInterface<T> = { [K in keyof T]: Optional<T[K]> }
|
||||||
|
interface AsyncMethodOptionLike {
|
||||||
|
success?: (...args: any[]) => void
|
||||||
|
}
|
||||||
|
type PromisifySuccessResult<
|
||||||
|
P,
|
||||||
|
T extends AsyncMethodOptionLike
|
||||||
|
> = P extends { success: any }
|
||||||
|
? void
|
||||||
|
: P extends { fail: any }
|
||||||
|
? void
|
||||||
|
: P extends { complete: any }
|
||||||
|
? void
|
||||||
|
: Promise<Parameters<Exclude<T['success'], undefined>>[0]>
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const console: WechatMiniprogram.Console
|
||||||
|
declare const wx: WechatMiniprogram.Wx
|
||||||
|
/** 引入模块。返回模块通过 `module.exports` 或 `exports` 暴露的接口。 */
|
||||||
|
declare function require(
|
||||||
|
/** 需要引入模块文件相对于当前文件的相对路径，或 npm 模块名，或 npm 模块路径。不支持绝对路径 */
|
||||||
|
module: string
|
||||||
|
): any
|
||||||
|
/** 引入插件。返回插件通过 `main` 暴露的接口。 */
|
||||||
|
declare function requirePlugin(
|
||||||
|
/** 需要引入的插件的 alias */
|
||||||
|
module: string
|
||||||
|
): any
|
||||||
|
/** 插件引入当前使用者小程序。返回使用者小程序通过 [插件配置中 `export` 暴露的接口](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html#%E5%AF%BC%E5%87%BA%E5%88%B0%E6%8F%92%E4%BB%B6)。
|
||||||
|
*
|
||||||
|
* 该接口只在插件中存在
|
||||||
|
*
|
||||||
|
* 最低基础库： `2.11.1` */
|
||||||
|
declare function requireMiniProgram(): any
|
||||||
|
/** 当前模块对象 */
|
||||||
|
declare let module: {
|
||||||
|
/** 模块向外暴露的对象，使用 `require` 引用该模块时可以获取 */
|
||||||
|
exports: any
|
||||||
|
}
|
||||||
|
/** `module.exports` 的引用 */
|
||||||
|
declare let exports: any
|
||||||
19671
typings/types/wx/lib.wx.api.d.ts
vendored
Normal file
19671
typings/types/wx/lib.wx.api.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load Diff
270
typings/types/wx/lib.wx.app.d.ts
vendored
Normal file
270
typings/types/wx/lib.wx.app.d.ts
vendored
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) 2021 Tencent, Inc. All rights reserved.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
declare namespace WechatMiniprogram.App {
|
||||||
|
interface ReferrerInfo {
|
||||||
|
/** 来源小程序或公众号或App的 appId
|
||||||
|
*
|
||||||
|
* 以下场景支持返回 referrerInfo.appId：
|
||||||
|
* - 1020（公众号 profile 页相关小程序列表）： appId
|
||||||
|
* - 1035（公众号自定义菜单）：来源公众号 appId
|
||||||
|
* - 1036（App 分享消息卡片）：来源应用 appId
|
||||||
|
* - 1037（小程序打开小程序）：来源小程序 appId
|
||||||
|
* - 1038（从另一个小程序返回）：来源小程序 appId
|
||||||
|
* - 1043（公众号模板消息）：来源公众号 appId
|
||||||
|
*/
|
||||||
|
appId: string
|
||||||
|
/** 来源小程序传过来的数据，scene=1037或1038时支持 */
|
||||||
|
extraData?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
type SceneValues =
|
||||||
|
| 1001
|
||||||
|
| 1005
|
||||||
|
| 1006
|
||||||
|
| 1007
|
||||||
|
| 1008
|
||||||
|
| 1011
|
||||||
|
| 1012
|
||||||
|
| 1013
|
||||||
|
| 1014
|
||||||
|
| 1017
|
||||||
|
| 1019
|
||||||
|
| 1020
|
||||||
|
| 1023
|
||||||
|
| 1024
|
||||||
|
| 1025
|
||||||
|
| 1026
|
||||||
|
| 1027
|
||||||
|
| 1028
|
||||||
|
| 1029
|
||||||
|
| 1030
|
||||||
|
| 1031
|
||||||
|
| 1032
|
||||||
|
| 1034
|
||||||
|
| 1035
|
||||||
|
| 1036
|
||||||
|
| 1037
|
||||||
|
| 1038
|
||||||
|
| 1039
|
||||||
|
| 1042
|
||||||
|
| 1043
|
||||||
|
| 1044
|
||||||
|
| 1045
|
||||||
|
| 1046
|
||||||
|
| 1047
|
||||||
|
| 1048
|
||||||
|
| 1049
|
||||||
|
| 1052
|
||||||
|
| 1053
|
||||||
|
| 1056
|
||||||
|
| 1057
|
||||||
|
| 1058
|
||||||
|
| 1059
|
||||||
|
| 1064
|
||||||
|
| 1067
|
||||||
|
| 1069
|
||||||
|
| 1071
|
||||||
|
| 1072
|
||||||
|
| 1073
|
||||||
|
| 1074
|
||||||
|
| 1077
|
||||||
|
| 1078
|
||||||
|
| 1079
|
||||||
|
| 1081
|
||||||
|
| 1082
|
||||||
|
| 1084
|
||||||
|
| 1089
|
||||||
|
| 1090
|
||||||
|
| 1091
|
||||||
|
| 1092
|
||||||
|
| 1095
|
||||||
|
| 1096
|
||||||
|
| 1097
|
||||||
|
| 1099
|
||||||
|
| 1102
|
||||||
|
| 1124
|
||||||
|
| 1125
|
||||||
|
| 1126
|
||||||
|
| 1129
|
||||||
|
|
||||||
|
interface LaunchShowOption {
|
||||||
|
/** 打开小程序的路径 */
|
||||||
|
path: string
|
||||||
|
/** 打开小程序的query */
|
||||||
|
query: IAnyObject
|
||||||
|
/** 打开小程序的场景值
|
||||||
|
* - 1001：发现栏小程序主入口，「最近使用」列表（基础库2.2.4版本起包含「我的小程序」列表）
|
||||||
|
* - 1005：微信首页顶部搜索框的搜索结果页
|
||||||
|
* - 1006：发现栏小程序主入口搜索框的搜索结果页
|
||||||
|
* - 1007：单人聊天会话中的小程序消息卡片
|
||||||
|
* - 1008：群聊会话中的小程序消息卡片
|
||||||
|
* - 1011：扫描二维码
|
||||||
|
* - 1012：长按图片识别二维码
|
||||||
|
* - 1013：扫描手机相册中选取的二维码
|
||||||
|
* - 1014：小程序模板消息
|
||||||
|
* - 1017：前往小程序体验版的入口页
|
||||||
|
* - 1019：微信钱包（微信客户端7.0.0版本改为支付入口）
|
||||||
|
* - 1020：公众号 profile 页相关小程序列表
|
||||||
|
* - 1023：安卓系统桌面图标
|
||||||
|
* - 1024：小程序 profile 页
|
||||||
|
* - 1025：扫描一维码
|
||||||
|
* - 1026：发现栏小程序主入口，「附近的小程序」列表
|
||||||
|
* - 1027：微信首页顶部搜索框搜索结果页「使用过的小程序」列表
|
||||||
|
* - 1028：我的卡包
|
||||||
|
* - 1029：小程序中的卡券详情页
|
||||||
|
* - 1030：自动化测试下打开小程序
|
||||||
|
* - 1031：长按图片识别一维码
|
||||||
|
* - 1032：扫描手机相册中选取的一维码
|
||||||
|
* - 1034：微信支付完成页
|
||||||
|
* - 1035：公众号自定义菜单
|
||||||
|
* - 1036：App 分享消息卡片
|
||||||
|
* - 1037：小程序打开小程序
|
||||||
|
* - 1038：从另一个小程序返回
|
||||||
|
* - 1039：摇电视
|
||||||
|
* - 1042：添加好友搜索框的搜索结果页
|
||||||
|
* - 1043：公众号模板消息
|
||||||
|
* - 1044：带 shareTicket 的小程序消息卡片 [详情](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html)
|
||||||
|
* - 1045：朋友圈广告
|
||||||
|
* - 1046：朋友圈广告详情页
|
||||||
|
* - 1047：扫描小程序码
|
||||||
|
* - 1048：长按图片识别小程序码
|
||||||
|
* - 1049：扫描手机相册中选取的小程序码
|
||||||
|
* - 1052：卡券的适用门店列表
|
||||||
|
* - 1053：搜一搜的结果页
|
||||||
|
* - 1056：聊天顶部音乐播放器右上角菜单
|
||||||
|
* - 1057：钱包中的银行卡详情页
|
||||||
|
* - 1058：公众号文章
|
||||||
|
* - 1059：体验版小程序绑定邀请页
|
||||||
|
* - 1064：微信首页连Wi-Fi状态栏
|
||||||
|
* - 1067：公众号文章广告
|
||||||
|
* - 1069：移动应用
|
||||||
|
* - 1071：钱包中的银行卡列表页
|
||||||
|
* - 1072：二维码收款页面
|
||||||
|
* - 1073：客服消息列表下发的小程序消息卡片
|
||||||
|
* - 1074：公众号会话下发的小程序消息卡片
|
||||||
|
* - 1077：摇周边
|
||||||
|
* - 1078：微信连Wi-Fi成功提示页
|
||||||
|
* - 1079：微信游戏中心
|
||||||
|
* - 1081：客服消息下发的文字链
|
||||||
|
* - 1082：公众号会话下发的文字链
|
||||||
|
* - 1084：朋友圈广告原生页
|
||||||
|
* - 1089：微信聊天主界面下拉，「最近使用」栏（基础库2.2.4版本起包含「我的小程序」栏）
|
||||||
|
* - 1090：长按小程序右上角菜单唤出最近使用历史
|
||||||
|
* - 1091：公众号文章商品卡片
|
||||||
|
* - 1092：城市服务入口
|
||||||
|
* - 1095：小程序广告组件
|
||||||
|
* - 1096：聊天记录
|
||||||
|
* - 1097：微信支付签约页
|
||||||
|
* - 1099：页面内嵌插件
|
||||||
|
* - 1102：公众号 profile 页服务预览
|
||||||
|
* - 1124：扫“一物一码”打开小程序
|
||||||
|
* - 1125：长按图片识别“一物一码”
|
||||||
|
* - 1126：扫描手机相册中选取的“一物一码”
|
||||||
|
* - 1129：微信爬虫访问 [详情](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html)
|
||||||
|
*/
|
||||||
|
scene: SceneValues
|
||||||
|
/** shareTicket，详见 [获取更多转发信息]((转发#获取更多转发信息)) */
|
||||||
|
shareTicket: string
|
||||||
|
/** 当场景为由从另一个小程序或公众号或App打开时，返回此字段 */
|
||||||
|
referrerInfo?: ReferrerInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PageNotFoundOption {
|
||||||
|
/** 不存在页面的路径 */
|
||||||
|
path: string
|
||||||
|
/** 打开不存在页面的 query */
|
||||||
|
query: IAnyObject
|
||||||
|
/** 是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面） */
|
||||||
|
isEntryPage: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Option {
|
||||||
|
/** 生命周期回调—监听小程序初始化
|
||||||
|
*
|
||||||
|
* 小程序初始化完成时触发，全局只触发一次。
|
||||||
|
*/
|
||||||
|
onLaunch(options: LaunchShowOption): void
|
||||||
|
/** 生命周期回调—监听小程序显示
|
||||||
|
*
|
||||||
|
* 小程序启动，或从后台进入前台显示时
|
||||||
|
*/
|
||||||
|
onShow(options: LaunchShowOption): void
|
||||||
|
/** 生命周期回调—监听小程序隐藏
|
||||||
|
*
|
||||||
|
* 小程序从前台进入后台时
|
||||||
|
*/
|
||||||
|
onHide(): void
|
||||||
|
/** 错误监听函数
|
||||||
|
*
|
||||||
|
* 小程序发生脚本错误，或者 api
|
||||||
|
*/
|
||||||
|
onError(/** 错误信息，包含堆栈 */ error: string): void
|
||||||
|
/** 页面不存在监听函数
|
||||||
|
*
|
||||||
|
* 小程序要打开的页面不存在时触发，会带上页面信息回调该函数
|
||||||
|
*
|
||||||
|
* **注意：**
|
||||||
|
* 1. 如果开发者没有添加 `onPageNotFound` 监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面。
|
||||||
|
* 2. 如果 `onPageNotFound` 回调中又重定向到另一个不存在的页面，将推入微信客户端原生的页面不存在提示页面，并且不再回调 `onPageNotFound`。
|
||||||
|
*
|
||||||
|
* 最低基础库： 1.9.90
|
||||||
|
*/
|
||||||
|
onPageNotFound(options: PageNotFoundOption): void
|
||||||
|
/**
|
||||||
|
* 小程序有未处理的 Promise 拒绝时触发。也可以使用 [wx.onUnhandledRejection](https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.onUnhandledRejection.html) 绑定监听。注意事项请参考 [wx.onUnhandledRejection](https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.onUnhandledRejection.html)。
|
||||||
|
* **参数**：与 [wx.onUnhandledRejection](https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.onUnhandledRejection.html) 一致
|
||||||
|
*/
|
||||||
|
onUnhandledRejection: OnUnhandledRejectionCallback
|
||||||
|
/**
|
||||||
|
* 系统切换主题时触发。也可以使用 wx.onThemeChange 绑定监听。
|
||||||
|
*
|
||||||
|
* 最低基础库： 2.11.0
|
||||||
|
*/
|
||||||
|
onThemeChange: OnThemeChangeCallback
|
||||||
|
}
|
||||||
|
|
||||||
|
type Instance<T extends IAnyObject> = Option & T
|
||||||
|
type Options<T extends IAnyObject> = Partial<Option> &
|
||||||
|
T &
|
||||||
|
ThisType<Instance<T>>
|
||||||
|
type TrivialInstance = Instance<IAnyObject>
|
||||||
|
|
||||||
|
interface Constructor {
|
||||||
|
<T extends IAnyObject>(options: Options<T>): void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GetAppOption {
|
||||||
|
/** 在 `App` 未定义时返回默认实现。当App被调用时，默认实现中定义的属性会被覆盖合并到App中。一般用于独立分包
|
||||||
|
*
|
||||||
|
* 最低基础库： 2.2.4
|
||||||
|
*/
|
||||||
|
allowDefault?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GetApp {
|
||||||
|
<T = IAnyObject>(opts?: GetAppOption): Instance<T>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare let App: WechatMiniprogram.App.Constructor
|
||||||
|
declare let getApp: WechatMiniprogram.App.GetApp
|
||||||
68
typings/types/wx/lib.wx.behavior.d.ts
vendored
Normal file
68
typings/types/wx/lib.wx.behavior.d.ts
vendored
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) 2021 Tencent, Inc. All rights reserved.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
declare namespace WechatMiniprogram.Behavior {
|
||||||
|
type BehaviorIdentifier = string
|
||||||
|
type Instance<
|
||||||
|
TData extends DataOption,
|
||||||
|
TProperty extends PropertyOption,
|
||||||
|
TMethod extends MethodOption,
|
||||||
|
TCustomInstanceProperty extends IAnyObject = Record<string, never>
|
||||||
|
> = Component.Instance<TData, TProperty, TMethod, TCustomInstanceProperty>
|
||||||
|
type TrivialInstance = Instance<IAnyObject, IAnyObject, IAnyObject>
|
||||||
|
type TrivialOption = Options<IAnyObject, IAnyObject, IAnyObject>
|
||||||
|
type Options<
|
||||||
|
TData extends DataOption,
|
||||||
|
TProperty extends PropertyOption,
|
||||||
|
TMethod extends MethodOption,
|
||||||
|
TCustomInstanceProperty extends IAnyObject = Record<string, never>
|
||||||
|
> = Partial<Data<TData>> &
|
||||||
|
Partial<Property<TProperty>> &
|
||||||
|
Partial<Method<TMethod>> &
|
||||||
|
Partial<OtherOption> &
|
||||||
|
Partial<Lifetimes> &
|
||||||
|
ThisType<Instance<TData, TProperty, TMethod, TCustomInstanceProperty>>
|
||||||
|
interface Constructor {
|
||||||
|
<
|
||||||
|
TData extends DataOption,
|
||||||
|
TProperty extends PropertyOption,
|
||||||
|
TMethod extends MethodOption,
|
||||||
|
TCustomInstanceProperty extends IAnyObject = Record<string, never>
|
||||||
|
>(
|
||||||
|
options: Options<TData, TProperty, TMethod, TCustomInstanceProperty>
|
||||||
|
): BehaviorIdentifier
|
||||||
|
}
|
||||||
|
|
||||||
|
type DataOption = Component.DataOption
|
||||||
|
type PropertyOption = Component.PropertyOption
|
||||||
|
type MethodOption = Component.MethodOption
|
||||||
|
type Data<D extends DataOption> = Component.Data<D>
|
||||||
|
type Property<P extends PropertyOption> = Component.Property<P>
|
||||||
|
type Method<M extends MethodOption> = Component.Method<M>
|
||||||
|
|
||||||
|
type DefinitionFilter = Component.DefinitionFilter
|
||||||
|
type Lifetimes = Component.Lifetimes
|
||||||
|
|
||||||
|
type OtherOption = Omit<Component.OtherOption, 'options'>
|
||||||
|
}
|
||||||
|
/** 注册一个 `behavior`，接受一个 `Object` 类型的参数。*/
|
||||||
|
declare let Behavior: WechatMiniprogram.Behavior.Constructor
|
||||||
924
typings/types/wx/lib.wx.cloud.d.ts
vendored
Normal file
924
typings/types/wx/lib.wx.cloud.d.ts
vendored
Normal file
@@ -0,0 +1,924 @@
|
|||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) 2021 Tencent, Inc. All rights reserved.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
interface IAPIError {
|
||||||
|
errMsg: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAPIParam<T = any> {
|
||||||
|
config?: ICloudConfig
|
||||||
|
success?: (res: T) => void
|
||||||
|
fail?: (err: IAPIError) => void
|
||||||
|
complete?: (val: T | IAPIError) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAPISuccessParam {
|
||||||
|
errMsg: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type IAPICompleteParam = IAPISuccessParam | IAPIError
|
||||||
|
|
||||||
|
type IAPIFunction<T, P extends IAPIParam<T>> = (param?: P) => Promise<T>
|
||||||
|
|
||||||
|
interface IInitCloudConfig {
|
||||||
|
env?:
|
||||||
|
| string
|
||||||
|
| {
|
||||||
|
database?: string
|
||||||
|
functions?: string
|
||||||
|
storage?: string
|
||||||
|
}
|
||||||
|
traceUser?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICloudConfig {
|
||||||
|
env?: string
|
||||||
|
traceUser?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IICloudAPI {
|
||||||
|
init: (config?: IInitCloudConfig) => void
|
||||||
|
[api: string]: AnyFunction | IAPIFunction<any, any>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICloudService {
|
||||||
|
name: string
|
||||||
|
|
||||||
|
getAPIs: () => { [name: string]: IAPIFunction<any, any> }
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICloudServices {
|
||||||
|
[serviceName: string]: ICloudService
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICloudMetaData {
|
||||||
|
session_id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
declare class InternalSymbol {}
|
||||||
|
|
||||||
|
interface AnyObject {
|
||||||
|
[x: string]: any
|
||||||
|
}
|
||||||
|
|
||||||
|
type AnyArray = any[]
|
||||||
|
|
||||||
|
type AnyFunction = (...args: any[]) => any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* extend wx with cloud
|
||||||
|
*/
|
||||||
|
interface WxCloud {
|
||||||
|
init: (config?: ICloudConfig) => void
|
||||||
|
|
||||||
|
callFunction(param: OQ<ICloud.CallFunctionParam>): void
|
||||||
|
callFunction(
|
||||||
|
param: RQ<ICloud.CallFunctionParam>
|
||||||
|
): Promise<ICloud.CallFunctionResult>
|
||||||
|
|
||||||
|
uploadFile(param: OQ<ICloud.UploadFileParam>): WechatMiniprogram.UploadTask
|
||||||
|
uploadFile(
|
||||||
|
param: RQ<ICloud.UploadFileParam>
|
||||||
|
): Promise<ICloud.UploadFileResult>
|
||||||
|
|
||||||
|
downloadFile(
|
||||||
|
param: OQ<ICloud.DownloadFileParam>
|
||||||
|
): WechatMiniprogram.DownloadTask
|
||||||
|
downloadFile(
|
||||||
|
param: RQ<ICloud.DownloadFileParam>
|
||||||
|
): Promise<ICloud.DownloadFileResult>
|
||||||
|
|
||||||
|
getTempFileURL(param: OQ<ICloud.GetTempFileURLParam>): void
|
||||||
|
getTempFileURL(
|
||||||
|
param: RQ<ICloud.GetTempFileURLParam>
|
||||||
|
): Promise<ICloud.GetTempFileURLResult>
|
||||||
|
|
||||||
|
deleteFile(param: OQ<ICloud.DeleteFileParam>): void
|
||||||
|
deleteFile(
|
||||||
|
param: RQ<ICloud.DeleteFileParam>
|
||||||
|
): Promise<ICloud.DeleteFileResult>
|
||||||
|
|
||||||
|
database: (config?: ICloudConfig) => DB.Database
|
||||||
|
|
||||||
|
CloudID: ICloud.ICloudIDConstructor
|
||||||
|
CDN: ICloud.ICDNConstructor
|
||||||
|
}
|
||||||
|
|
||||||
|
declare namespace ICloud {
|
||||||
|
interface ICloudAPIParam<T = any> extends IAPIParam<T> {
|
||||||
|
config?: ICloudConfig
|
||||||
|
}
|
||||||
|
|
||||||
|
// === API: callFunction ===
|
||||||
|
type CallFunctionData = AnyObject
|
||||||
|
|
||||||
|
interface CallFunctionResult extends IAPISuccessParam {
|
||||||
|
result: AnyObject | string | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CallFunctionParam extends ICloudAPIParam<CallFunctionResult> {
|
||||||
|
name: string
|
||||||
|
data?: CallFunctionData
|
||||||
|
slow?: boolean
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
|
||||||
|
// === API: uploadFile ===
|
||||||
|
interface UploadFileResult extends IAPISuccessParam {
|
||||||
|
fileID: string
|
||||||
|
statusCode: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UploadFileParam extends ICloudAPIParam<UploadFileResult> {
|
||||||
|
cloudPath: string
|
||||||
|
filePath: string
|
||||||
|
header?: AnyObject
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
|
||||||
|
// === API: downloadFile ===
|
||||||
|
interface DownloadFileResult extends IAPISuccessParam {
|
||||||
|
tempFilePath: string
|
||||||
|
statusCode: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DownloadFileParam extends ICloudAPIParam<DownloadFileResult> {
|
||||||
|
fileID: string
|
||||||
|
cloudPath?: string
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
|
||||||
|
// === API: getTempFileURL ===
|
||||||
|
interface GetTempFileURLResult extends IAPISuccessParam {
|
||||||
|
fileList: GetTempFileURLResultItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GetTempFileURLResultItem {
|
||||||
|
fileID: string
|
||||||
|
tempFileURL: string
|
||||||
|
maxAge: number
|
||||||
|
status: number
|
||||||
|
errMsg: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GetTempFileURLParam extends ICloudAPIParam<GetTempFileURLResult> {
|
||||||
|
fileList: string[]
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
|
||||||
|
// === API: deleteFile ===
|
||||||
|
interface DeleteFileResult extends IAPISuccessParam {
|
||||||
|
fileList: DeleteFileResultItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DeleteFileResultItem {
|
||||||
|
fileID: string
|
||||||
|
status: number
|
||||||
|
errMsg: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DeleteFileParam extends ICloudAPIParam<DeleteFileResult> {
|
||||||
|
fileList: string[]
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
|
||||||
|
// === API: CloudID ===
|
||||||
|
abstract class CloudID {
|
||||||
|
constructor(cloudID: string)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICloudIDConstructor {
|
||||||
|
new (cloudId: string): CloudID
|
||||||
|
(cloudId: string): CloudID
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
|
||||||
|
// === API: CDN ===
|
||||||
|
abstract class CDN {
|
||||||
|
target: string | ArrayBuffer | ICDNFilePathSpec
|
||||||
|
constructor(target: string | ArrayBuffer | ICDNFilePathSpec)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICDNFilePathSpec {
|
||||||
|
type: 'filePath'
|
||||||
|
filePath: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICDNConstructor {
|
||||||
|
new (options: string | ArrayBuffer | ICDNFilePathSpec): CDN
|
||||||
|
(options: string | ArrayBuffer | ICDNFilePathSpec): CDN
|
||||||
|
}
|
||||||
|
// === end ===
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Database ===
|
||||||
|
declare namespace DB {
|
||||||
|
/**
|
||||||
|
* The class of all exposed cloud database instances
|
||||||
|
*/
|
||||||
|
class Database {
|
||||||
|
readonly config: ICloudConfig
|
||||||
|
readonly command: DatabaseCommand
|
||||||
|
readonly Geo: IGeo
|
||||||
|
readonly serverDate: () => ServerDate
|
||||||
|
readonly RegExp: IRegExpConstructor
|
||||||
|
|
||||||
|
private constructor()
|
||||||
|
|
||||||
|
collection(collectionName: string): CollectionReference
|
||||||
|
}
|
||||||
|
|
||||||
|
class CollectionReference extends Query {
|
||||||
|
readonly collectionName: string
|
||||||
|
|
||||||
|
private constructor(name: string, database: Database)
|
||||||
|
|
||||||
|
doc(docId: string | number): DocumentReference
|
||||||
|
|
||||||
|
add(options: OQ<IAddDocumentOptions>): void
|
||||||
|
add(options: RQ<IAddDocumentOptions>): Promise<IAddResult>
|
||||||
|
}
|
||||||
|
|
||||||
|
class DocumentReference {
|
||||||
|
private constructor(docId: string | number, database: Database)
|
||||||
|
|
||||||
|
field(object: Record<string, any>): this
|
||||||
|
|
||||||
|
get(options: OQ<IGetDocumentOptions>): void
|
||||||
|
get(options?: RQ<IGetDocumentOptions>): Promise<IQuerySingleResult>
|
||||||
|
|
||||||
|
set(options: OQ<ISetSingleDocumentOptions>): void
|
||||||
|
set(options?: RQ<ISetSingleDocumentOptions>): Promise<ISetResult>
|
||||||
|
|
||||||
|
update(options: OQ<IUpdateSingleDocumentOptions>): void
|
||||||
|
update(
|
||||||
|
options?: RQ<IUpdateSingleDocumentOptions>
|
||||||
|
): Promise<IUpdateResult>
|
||||||
|
|
||||||
|
remove(options: OQ<IRemoveSingleDocumentOptions>): void
|
||||||
|
remove(
|
||||||
|
options?: RQ<IRemoveSingleDocumentOptions>
|
||||||
|
): Promise<IRemoveResult>
|
||||||
|
|
||||||
|
watch(options: IWatchOptions): RealtimeListener
|
||||||
|
}
|
||||||
|
|
||||||
|
class RealtimeListener {
|
||||||
|
// "And Now His Watch Is Ended"
|
||||||
|
close: () => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
class Query {
|
||||||
|
where(condition: IQueryCondition): Query
|
||||||
|
|
||||||
|
orderBy(fieldPath: string, order: string): Query
|
||||||
|
|
||||||
|
limit(max: number): Query
|
||||||
|
|
||||||
|
skip(offset: number): Query
|
||||||
|
|
||||||
|
field(object: Record<string, any>): Query
|
||||||
|
|
||||||
|
get(options: OQ<IGetDocumentOptions>): void
|
||||||
|
get(options?: RQ<IGetDocumentOptions>): Promise<IQueryResult>
|
||||||
|
|
||||||
|
count(options: OQ<ICountDocumentOptions>): void
|
||||||
|
count(options?: RQ<ICountDocumentOptions>): Promise<ICountResult>
|
||||||
|
|
||||||
|
watch(options: IWatchOptions): RealtimeListener
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DatabaseCommand {
|
||||||
|
eq(val: any): DatabaseQueryCommand
|
||||||
|
neq(val: any): DatabaseQueryCommand
|
||||||
|
gt(val: any): DatabaseQueryCommand
|
||||||
|
gte(val: any): DatabaseQueryCommand
|
||||||
|
lt(val: any): DatabaseQueryCommand
|
||||||
|
lte(val: any): DatabaseQueryCommand
|
||||||
|
in(val: any[]): DatabaseQueryCommand
|
||||||
|
nin(val: any[]): DatabaseQueryCommand
|
||||||
|
|
||||||
|
geoNear(options: IGeoNearCommandOptions): DatabaseQueryCommand
|
||||||
|
geoWithin(options: IGeoWithinCommandOptions): DatabaseQueryCommand
|
||||||
|
geoIntersects(
|
||||||
|
options: IGeoIntersectsCommandOptions
|
||||||
|
): DatabaseQueryCommand
|
||||||
|
|
||||||
|
and(
|
||||||
|
...expressions: Array<DatabaseLogicCommand | IQueryCondition>
|
||||||
|
): DatabaseLogicCommand
|
||||||
|
or(
|
||||||
|
...expressions: Array<DatabaseLogicCommand | IQueryCondition>
|
||||||
|
): DatabaseLogicCommand
|
||||||
|
nor(
|
||||||
|
...expressions: Array<DatabaseLogicCommand | IQueryCondition>
|
||||||
|
): DatabaseLogicCommand
|
||||||
|
not(expression: DatabaseLogicCommand): DatabaseLogicCommand
|
||||||
|
|
||||||
|
exists(val: boolean): DatabaseQueryCommand
|
||||||
|
|
||||||
|
mod(divisor: number, remainder: number): DatabaseQueryCommand
|
||||||
|
|
||||||
|
all(val: any[]): DatabaseQueryCommand
|
||||||
|
elemMatch(val: any): DatabaseQueryCommand
|
||||||
|
size(val: number): DatabaseQueryCommand
|
||||||
|
|
||||||
|
set(val: any): DatabaseUpdateCommand
|
||||||
|
remove(): DatabaseUpdateCommand
|
||||||
|
inc(val: number): DatabaseUpdateCommand
|
||||||
|
mul(val: number): DatabaseUpdateCommand
|
||||||
|
min(val: number): DatabaseUpdateCommand
|
||||||
|
max(val: number): DatabaseUpdateCommand
|
||||||
|
rename(val: string): DatabaseUpdateCommand
|
||||||
|
bit(val: number): DatabaseUpdateCommand
|
||||||
|
|
||||||
|
push(...values: any[]): DatabaseUpdateCommand
|
||||||
|
pop(): DatabaseUpdateCommand
|
||||||
|
shift(): DatabaseUpdateCommand
|
||||||
|
unshift(...values: any[]): DatabaseUpdateCommand
|
||||||
|
addToSet(val: any): DatabaseUpdateCommand
|
||||||
|
pull(val: any): DatabaseUpdateCommand
|
||||||
|
pullAll(val: any): DatabaseUpdateCommand
|
||||||
|
|
||||||
|
project: {
|
||||||
|
slice(val: number | [number, number]): DatabaseProjectionCommand
|
||||||
|
}
|
||||||
|
|
||||||
|
aggregate: {
|
||||||
|
__safe_props__?: Set<string>
|
||||||
|
|
||||||
|
abs(val: any): DatabaseAggregateCommand
|
||||||
|
add(val: any): DatabaseAggregateCommand
|
||||||
|
addToSet(val: any): DatabaseAggregateCommand
|
||||||
|
allElementsTrue(val: any): DatabaseAggregateCommand
|
||||||
|
and(val: any): DatabaseAggregateCommand
|
||||||
|
anyElementTrue(val: any): DatabaseAggregateCommand
|
||||||
|
arrayElemAt(val: any): DatabaseAggregateCommand
|
||||||
|
arrayToObject(val: any): DatabaseAggregateCommand
|
||||||
|
avg(val: any): DatabaseAggregateCommand
|
||||||
|
ceil(val: any): DatabaseAggregateCommand
|
||||||
|
cmp(val: any): DatabaseAggregateCommand
|
||||||
|
concat(val: any): DatabaseAggregateCommand
|
||||||
|
concatArrays(val: any): DatabaseAggregateCommand
|
||||||
|
cond(val: any): DatabaseAggregateCommand
|
||||||
|
convert(val: any): DatabaseAggregateCommand
|
||||||
|
dateFromParts(val: any): DatabaseAggregateCommand
|
||||||
|
dateToParts(val: any): DatabaseAggregateCommand
|
||||||
|
dateFromString(val: any): DatabaseAggregateCommand
|
||||||
|
dateToString(val: any): DatabaseAggregateCommand
|
||||||
|
dayOfMonth(val: any): DatabaseAggregateCommand
|
||||||
|
dayOfWeek(val: any): DatabaseAggregateCommand
|
||||||
|
dayOfYear(val: any): DatabaseAggregateCommand
|
||||||
|
divide(val: any): DatabaseAggregateCommand
|
||||||
|
eq(val: any): DatabaseAggregateCommand
|
||||||
|
exp(val: any): DatabaseAggregateCommand
|
||||||
|
filter(val: any): DatabaseAggregateCommand
|
||||||
|
first(val: any): DatabaseAggregateCommand
|
||||||
|
floor(val: any): DatabaseAggregateCommand
|
||||||
|
gt(val: any): DatabaseAggregateCommand
|
||||||
|
gte(val: any): DatabaseAggregateCommand
|
||||||
|
hour(val: any): DatabaseAggregateCommand
|
||||||
|
ifNull(val: any): DatabaseAggregateCommand
|
||||||
|
in(val: any): DatabaseAggregateCommand
|
||||||
|
indexOfArray(val: any): DatabaseAggregateCommand
|
||||||
|
indexOfBytes(val: any): DatabaseAggregateCommand
|
||||||
|
indexOfCP(val: any): DatabaseAggregateCommand
|
||||||
|
isArray(val: any): DatabaseAggregateCommand
|
||||||
|
isoDayOfWeek(val: any): DatabaseAggregateCommand
|
||||||
|
isoWeek(val: any): DatabaseAggregateCommand
|
||||||
|
isoWeekYear(val: any): DatabaseAggregateCommand
|
||||||
|
last(val: any): DatabaseAggregateCommand
|
||||||
|
let(val: any): DatabaseAggregateCommand
|
||||||
|
literal(val: any): DatabaseAggregateCommand
|
||||||
|
ln(val: any): DatabaseAggregateCommand
|
||||||
|
log(val: any): DatabaseAggregateCommand
|
||||||
|
log10(val: any): DatabaseAggregateCommand
|
||||||
|
lt(val: any): DatabaseAggregateCommand
|
||||||
|
lte(val: any): DatabaseAggregateCommand
|
||||||
|
ltrim(val: any): DatabaseAggregateCommand
|
||||||
|
map(val: any): DatabaseAggregateCommand
|
||||||
|
max(val: any): DatabaseAggregateCommand
|
||||||
|
mergeObjects(val: any): DatabaseAggregateCommand
|
||||||
|
meta(val: any): DatabaseAggregateCommand
|
||||||
|
min(val: any): DatabaseAggregateCommand
|
||||||
|
millisecond(val: any): DatabaseAggregateCommand
|
||||||
|
minute(val: any): DatabaseAggregateCommand
|
||||||
|
mod(val: any): DatabaseAggregateCommand
|
||||||
|
month(val: any): DatabaseAggregateCommand
|
||||||
|
multiply(val: any): DatabaseAggregateCommand
|
||||||
|
neq(val: any): DatabaseAggregateCommand
|
||||||
|
not(val: any): DatabaseAggregateCommand
|
||||||
|
objectToArray(val: any): DatabaseAggregateCommand
|
||||||
|
or(val: any): DatabaseAggregateCommand
|
||||||
|
pow(val: any): DatabaseAggregateCommand
|
||||||
|
push(val: any): DatabaseAggregateCommand
|
||||||
|
range(val: any): DatabaseAggregateCommand
|
||||||
|
reduce(val: any): DatabaseAggregateCommand
|
||||||
|
reverseArray(val: any): DatabaseAggregateCommand
|
||||||
|
rtrim(val: any): DatabaseAggregateCommand
|
||||||
|
second(val: any): DatabaseAggregateCommand
|
||||||
|
setDifference(val: any): DatabaseAggregateCommand
|
||||||
|
setEquals(val: any): DatabaseAggregateCommand
|
||||||
|
setIntersection(val: any): DatabaseAggregateCommand
|
||||||
|
setIsSubset(val: any): DatabaseAggregateCommand
|
||||||
|
setUnion(val: any): DatabaseAggregateCommand
|
||||||
|
size(val: any): DatabaseAggregateCommand
|
||||||
|
slice(val: any): DatabaseAggregateCommand
|
||||||
|
split(val: any): DatabaseAggregateCommand
|
||||||
|
sqrt(val: any): DatabaseAggregateCommand
|
||||||
|
stdDevPop(val: any): DatabaseAggregateCommand
|
||||||
|
stdDevSamp(val: any): DatabaseAggregateCommand
|
||||||
|
strcasecmp(val: any): DatabaseAggregateCommand
|
||||||
|
strLenBytes(val: any): DatabaseAggregateCommand
|
||||||
|
strLenCP(val: any): DatabaseAggregateCommand
|
||||||
|
substr(val: any): DatabaseAggregateCommand
|
||||||
|
substrBytes(val: any): DatabaseAggregateCommand
|
||||||
|
substrCP(val: any): DatabaseAggregateCommand
|
||||||
|
subtract(val: any): DatabaseAggregateCommand
|
||||||
|
sum(val: any): DatabaseAggregateCommand
|
||||||
|
switch(val: any): DatabaseAggregateCommand
|
||||||
|
toBool(val: any): DatabaseAggregateCommand
|
||||||
|
toDate(val: any): DatabaseAggregateCommand
|
||||||
|
toDecimal(val: any): DatabaseAggregateCommand
|
||||||
|
toDouble(val: any): DatabaseAggregateCommand
|
||||||
|
toInt(val: any): DatabaseAggregateCommand
|
||||||
|
toLong(val: any): DatabaseAggregateCommand
|
||||||
|
toObjectId(val: any): DatabaseAggregateCommand
|
||||||
|
toString(val: any): DatabaseAggregateCommand
|
||||||
|
toLower(val: any): DatabaseAggregateCommand
|
||||||
|
toUpper(val: any): DatabaseAggregateCommand
|
||||||
|
trim(val: any): DatabaseAggregateCommand
|
||||||
|
trunc(val: any): DatabaseAggregateCommand
|
||||||
|
type(val: any): DatabaseAggregateCommand
|
||||||
|
week(val: any): DatabaseAggregateCommand
|
||||||
|
year(val: any): DatabaseAggregateCommand
|
||||||
|
zip(val: any): DatabaseAggregateCommand
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class DatabaseAggregateCommand {}
|
||||||
|
|
||||||
|
enum LOGIC_COMMANDS_LITERAL {
|
||||||
|
AND = 'and',
|
||||||
|
OR = 'or',
|
||||||
|
NOT = 'not',
|
||||||
|
NOR = 'nor'
|
||||||
|
}
|
||||||
|
|
||||||
|
class DatabaseLogicCommand {
|
||||||
|
and(...expressions: DatabaseLogicCommand[]): DatabaseLogicCommand
|
||||||
|
or(...expressions: DatabaseLogicCommand[]): DatabaseLogicCommand
|
||||||
|
nor(...expressions: DatabaseLogicCommand[]): DatabaseLogicCommand
|
||||||
|
not(expression: DatabaseLogicCommand): DatabaseLogicCommand
|
||||||
|
}
|
||||||
|
|
||||||
|
enum QUERY_COMMANDS_LITERAL {
|
||||||
|
// comparison
|
||||||
|
EQ = 'eq',
|
||||||
|
NEQ = 'neq',
|
||||||
|
GT = 'gt',
|
||||||
|
GTE = 'gte',
|
||||||
|
LT = 'lt',
|
||||||
|
LTE = 'lte',
|
||||||
|
IN = 'in',
|
||||||
|
NIN = 'nin',
|
||||||
|
// geo
|
||||||
|
GEO_NEAR = 'geoNear',
|
||||||
|
GEO_WITHIN = 'geoWithin',
|
||||||
|
GEO_INTERSECTS = 'geoIntersects',
|
||||||
|
// element
|
||||||
|
EXISTS = 'exists',
|
||||||
|
// evaluation
|
||||||
|
MOD = 'mod',
|
||||||
|
// array
|
||||||
|
ALL = 'all',
|
||||||
|
ELEM_MATCH = 'elemMatch',
|
||||||
|
SIZE = 'size'
|
||||||
|
}
|
||||||
|
|
||||||
|
class DatabaseQueryCommand extends DatabaseLogicCommand {
|
||||||
|
eq(val: any): DatabaseLogicCommand
|
||||||
|
neq(val: any): DatabaseLogicCommand
|
||||||
|
gt(val: any): DatabaseLogicCommand
|
||||||
|
gte(val: any): DatabaseLogicCommand
|
||||||
|
lt(val: any): DatabaseLogicCommand
|
||||||
|
lte(val: any): DatabaseLogicCommand
|
||||||
|
in(val: any[]): DatabaseLogicCommand
|
||||||
|
nin(val: any[]): DatabaseLogicCommand
|
||||||
|
|
||||||
|
exists(val: boolean): DatabaseLogicCommand
|
||||||
|
|
||||||
|
mod(divisor: number, remainder: number): DatabaseLogicCommand
|
||||||
|
|
||||||
|
all(val: any[]): DatabaseLogicCommand
|
||||||
|
elemMatch(val: any): DatabaseLogicCommand
|
||||||
|
size(val: number): DatabaseLogicCommand
|
||||||
|
|
||||||
|
geoNear(options: IGeoNearCommandOptions): DatabaseLogicCommand
|
||||||
|
geoWithin(options: IGeoWithinCommandOptions): DatabaseLogicCommand
|
||||||
|
geoIntersects(
|
||||||
|
options: IGeoIntersectsCommandOptions
|
||||||
|
): DatabaseLogicCommand
|
||||||
|
}
|
||||||
|
|
||||||
|
enum PROJECTION_COMMANDS_LITERAL {
|
||||||
|
SLICE = 'slice'
|
||||||
|
}
|
||||||
|
|
||||||
|
class DatabaseProjectionCommand {}
|
||||||
|
|
||||||
|
enum UPDATE_COMMANDS_LITERAL {
|
||||||
|
// field
|
||||||
|
SET = 'set',
|
||||||
|
REMOVE = 'remove',
|
||||||
|
INC = 'inc',
|
||||||
|
MUL = 'mul',
|
||||||
|
MIN = 'min',
|
||||||
|
MAX = 'max',
|
||||||
|
RENAME = 'rename',
|
||||||
|
// bitwise
|
||||||
|
BIT = 'bit',
|
||||||
|
// array
|
||||||
|
PUSH = 'push',
|
||||||
|
POP = 'pop',
|
||||||
|
SHIFT = 'shift',
|
||||||
|
UNSHIFT = 'unshift',
|
||||||
|
ADD_TO_SET = 'addToSet',
|
||||||
|
PULL = 'pull',
|
||||||
|
PULL_ALL = 'pullAll'
|
||||||
|
}
|
||||||
|
|
||||||
|
class DatabaseUpdateCommand {}
|
||||||
|
|
||||||
|
class Batch {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A contract that all API provider must adhere to
|
||||||
|
*/
|
||||||
|
class APIBaseContract<
|
||||||
|
PromiseReturn,
|
||||||
|
CallbackReturn,
|
||||||
|
Param extends IAPIParam,
|
||||||
|
Context = any
|
||||||
|
> {
|
||||||
|
getContext(param: Param): Context
|
||||||
|
|
||||||
|
/**
|
||||||
|
* In case of callback-style invocation, this function will be called
|
||||||
|
*/
|
||||||
|
getCallbackReturn(param: Param, context: Context): CallbackReturn
|
||||||
|
|
||||||
|
getFinalParam<T extends Param>(param: Param, context: Context): T
|
||||||
|
|
||||||
|
run<T extends Param>(param: T): Promise<PromiseReturn>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoPointConstructor {
|
||||||
|
new (longitude: number, latitide: number): GeoPoint
|
||||||
|
new (geojson: IGeoJSONPoint): GeoPoint
|
||||||
|
(longitude: number, latitide: number): GeoPoint
|
||||||
|
(geojson: IGeoJSONPoint): GeoPoint
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoMultiPointConstructor {
|
||||||
|
new (points: GeoPoint[] | IGeoJSONMultiPoint): GeoMultiPoint
|
||||||
|
(points: GeoPoint[] | IGeoJSONMultiPoint): GeoMultiPoint
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoLineStringConstructor {
|
||||||
|
new (points: GeoPoint[] | IGeoJSONLineString): GeoLineString
|
||||||
|
(points: GeoPoint[] | IGeoJSONLineString): GeoLineString
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoMultiLineStringConstructor {
|
||||||
|
new (
|
||||||
|
lineStrings: GeoLineString[] | IGeoJSONMultiLineString
|
||||||
|
): GeoMultiLineString
|
||||||
|
(
|
||||||
|
lineStrings: GeoLineString[] | IGeoJSONMultiLineString
|
||||||
|
): GeoMultiLineString
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoPolygonConstructor {
|
||||||
|
new (lineStrings: GeoLineString[] | IGeoJSONPolygon): GeoPolygon
|
||||||
|
(lineStrings: GeoLineString[] | IGeoJSONPolygon): GeoPolygon
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoMultiPolygonConstructor {
|
||||||
|
new (polygons: GeoPolygon[] | IGeoJSONMultiPolygon): GeoMultiPolygon
|
||||||
|
(polygons: GeoPolygon[] | IGeoJSONMultiPolygon): GeoMultiPolygon
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeo {
|
||||||
|
Point: IGeoPointConstructor
|
||||||
|
MultiPoint: IGeoMultiPointConstructor
|
||||||
|
LineString: IGeoLineStringConstructor
|
||||||
|
MultiLineString: IGeoMultiLineStringConstructor
|
||||||
|
Polygon: IGeoPolygonConstructor
|
||||||
|
MultiPolygon: IGeoMultiPolygonConstructor
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoJSONPoint {
|
||||||
|
type: 'Point'
|
||||||
|
coordinates: [number, number]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoJSONMultiPoint {
|
||||||
|
type: 'MultiPoint'
|
||||||
|
coordinates: Array<[number, number]>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoJSONLineString {
|
||||||
|
type: 'LineString'
|
||||||
|
coordinates: Array<[number, number]>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoJSONMultiLineString {
|
||||||
|
type: 'MultiLineString'
|
||||||
|
coordinates: Array<Array<[number, number]>>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoJSONPolygon {
|
||||||
|
type: 'Polygon'
|
||||||
|
coordinates: Array<Array<[number, number]>>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoJSONMultiPolygon {
|
||||||
|
type: 'MultiPolygon'
|
||||||
|
coordinates: Array<Array<Array<[number, number]>>>
|
||||||
|
}
|
||||||
|
|
||||||
|
type IGeoJSONObject =
|
||||||
|
| IGeoJSONPoint
|
||||||
|
| IGeoJSONMultiPoint
|
||||||
|
| IGeoJSONLineString
|
||||||
|
| IGeoJSONMultiLineString
|
||||||
|
| IGeoJSONPolygon
|
||||||
|
| IGeoJSONMultiPolygon
|
||||||
|
|
||||||
|
abstract class GeoPoint {
|
||||||
|
longitude: number
|
||||||
|
latitude: number
|
||||||
|
|
||||||
|
constructor(longitude: number, latitude: number)
|
||||||
|
|
||||||
|
toJSON(): Record<string, any>
|
||||||
|
toString(): string
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class GeoMultiPoint {
|
||||||
|
points: GeoPoint[]
|
||||||
|
|
||||||
|
constructor(points: GeoPoint[])
|
||||||
|
|
||||||
|
toJSON(): IGeoJSONMultiPoint
|
||||||
|
toString(): string
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class GeoLineString {
|
||||||
|
points: GeoPoint[]
|
||||||
|
|
||||||
|
constructor(points: GeoPoint[])
|
||||||
|
|
||||||
|
toJSON(): IGeoJSONLineString
|
||||||
|
toString(): string
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class GeoMultiLineString {
|
||||||
|
lines: GeoLineString[]
|
||||||
|
|
||||||
|
constructor(lines: GeoLineString[])
|
||||||
|
|
||||||
|
toJSON(): IGeoJSONMultiLineString
|
||||||
|
toString(): string
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class GeoPolygon {
|
||||||
|
lines: GeoLineString[]
|
||||||
|
|
||||||
|
constructor(lines: GeoLineString[])
|
||||||
|
|
||||||
|
toJSON(): IGeoJSONPolygon
|
||||||
|
toString(): string
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class GeoMultiPolygon {
|
||||||
|
polygons: GeoPolygon[]
|
||||||
|
|
||||||
|
constructor(polygons: GeoPolygon[])
|
||||||
|
|
||||||
|
toJSON(): IGeoJSONMultiPolygon
|
||||||
|
toString(): string
|
||||||
|
}
|
||||||
|
|
||||||
|
type GeoInstance =
|
||||||
|
| GeoPoint
|
||||||
|
| GeoMultiPoint
|
||||||
|
| GeoLineString
|
||||||
|
| GeoMultiLineString
|
||||||
|
| GeoPolygon
|
||||||
|
| GeoMultiPolygon
|
||||||
|
|
||||||
|
interface IGeoNearCommandOptions {
|
||||||
|
geometry: GeoPoint
|
||||||
|
maxDistance?: number
|
||||||
|
minDistance?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoWithinCommandOptions {
|
||||||
|
geometry: GeoPolygon | GeoMultiPolygon
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGeoIntersectsCommandOptions {
|
||||||
|
geometry:
|
||||||
|
| GeoPoint
|
||||||
|
| GeoMultiPoint
|
||||||
|
| GeoLineString
|
||||||
|
| GeoMultiLineString
|
||||||
|
| GeoPolygon
|
||||||
|
| GeoMultiPolygon
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IServerDateOptions {
|
||||||
|
offset: number
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class ServerDate {
|
||||||
|
readonly options: IServerDateOptions
|
||||||
|
constructor(options?: IServerDateOptions)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IRegExpOptions {
|
||||||
|
regexp: string
|
||||||
|
options?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IRegExpConstructor {
|
||||||
|
new (options: IRegExpOptions): RegExp
|
||||||
|
(options: IRegExpOptions): RegExp
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract class RegExp {
|
||||||
|
readonly regexp: string
|
||||||
|
readonly options: string
|
||||||
|
constructor(options: IRegExpOptions)
|
||||||
|
}
|
||||||
|
|
||||||
|
type DocumentId = string | number
|
||||||
|
|
||||||
|
interface IDocumentData {
|
||||||
|
_id?: DocumentId
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
|
||||||
|
type IDBAPIParam = IAPIParam
|
||||||
|
|
||||||
|
interface IAddDocumentOptions extends IDBAPIParam {
|
||||||
|
data: IDocumentData
|
||||||
|
}
|
||||||
|
|
||||||
|
type IGetDocumentOptions = IDBAPIParam
|
||||||
|
|
||||||
|
type ICountDocumentOptions = IDBAPIParam
|
||||||
|
|
||||||
|
interface IUpdateDocumentOptions extends IDBAPIParam {
|
||||||
|
data: IUpdateCondition
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IUpdateSingleDocumentOptions extends IDBAPIParam {
|
||||||
|
data: IUpdateCondition
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ISetDocumentOptions extends IDBAPIParam {
|
||||||
|
data: IUpdateCondition
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ISetSingleDocumentOptions extends IDBAPIParam {
|
||||||
|
data: IUpdateCondition
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IRemoveDocumentOptions extends IDBAPIParam {
|
||||||
|
query: IQueryCondition
|
||||||
|
}
|
||||||
|
|
||||||
|
type IRemoveSingleDocumentOptions = IDBAPIParam
|
||||||
|
|
||||||
|
interface IWatchOptions {
|
||||||
|
// server realtime data init & change event
|
||||||
|
onChange: (snapshot: ISnapshot) => void
|
||||||
|
// error while connecting / listening
|
||||||
|
onError: (error: any) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ISnapshot {
|
||||||
|
id: number
|
||||||
|
docChanges: ISingleDBEvent[]
|
||||||
|
docs: Record<string, any>
|
||||||
|
type?: SnapshotType
|
||||||
|
}
|
||||||
|
|
||||||
|
type SnapshotType = 'init'
|
||||||
|
|
||||||
|
interface ISingleDBEvent {
|
||||||
|
id: number
|
||||||
|
dataType: DataType
|
||||||
|
queueType: QueueType
|
||||||
|
docId: string
|
||||||
|
doc: Record<string, any>
|
||||||
|
updatedFields?: Record<string, any>
|
||||||
|
removedFields?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type DataType = 'init' | 'update' | 'replace' | 'add' | 'remove' | 'limit'
|
||||||
|
|
||||||
|
type QueueType = 'init' | 'enqueue' | 'dequeue' | 'update'
|
||||||
|
|
||||||
|
interface IQueryCondition {
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
|
||||||
|
type IStringQueryCondition = string
|
||||||
|
|
||||||
|
interface IQueryResult extends IAPISuccessParam {
|
||||||
|
data: IDocumentData[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IQuerySingleResult extends IAPISuccessParam {
|
||||||
|
data: IDocumentData
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IUpdateCondition {
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
|
||||||
|
type IStringUpdateCondition = string
|
||||||
|
|
||||||
|
interface IAddResult extends IAPISuccessParam {
|
||||||
|
_id: DocumentId
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IUpdateResult extends IAPISuccessParam {
|
||||||
|
stats: {
|
||||||
|
updated: number
|
||||||
|
// created: number,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ISetResult extends IAPISuccessParam {
|
||||||
|
_id: DocumentId
|
||||||
|
stats: {
|
||||||
|
updated: number
|
||||||
|
created: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IRemoveResult extends IAPISuccessParam {
|
||||||
|
stats: {
|
||||||
|
removed: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICountResult extends IAPISuccessParam {
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type Optional<T> = { [K in keyof T]+?: T[K] }
|
||||||
|
|
||||||
|
type OQ<
|
||||||
|
T extends Optional<
|
||||||
|
Record<'complete' | 'success' | 'fail', (...args: any[]) => any>
|
||||||
|
>
|
||||||
|
> =
|
||||||
|
| (RQ<T> & Required<Pick<T, 'success'>>)
|
||||||
|
| (RQ<T> & Required<Pick<T, 'fail'>>)
|
||||||
|
| (RQ<T> & Required<Pick<T, 'complete'>>)
|
||||||
|
| (RQ<T> & Required<Pick<T, 'success' | 'fail'>>)
|
||||||
|
| (RQ<T> & Required<Pick<T, 'success' | 'complete'>>)
|
||||||
|
| (RQ<T> & Required<Pick<T, 'fail' | 'complete'>>)
|
||||||
|
| (RQ<T> & Required<Pick<T, 'fail' | 'complete' | 'success'>>)
|
||||||
|
|
||||||
|
type RQ<
|
||||||
|
T extends Optional<
|
||||||
|
Record<'complete' | 'success' | 'fail', (...args: any[]) => any>
|
||||||
|
>
|
||||||
|
> = Pick<T, Exclude<keyof T, 'complete' | 'success' | 'fail'>>
|
||||||
636
typings/types/wx/lib.wx.component.d.ts
vendored
Normal file
636
typings/types/wx/lib.wx.component.d.ts
vendored
Normal file
@@ -0,0 +1,636 @@
|
|||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) 2021 Tencent, Inc. All rights reserved.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
declare namespace WechatMiniprogram.Component {
|
||||||
|
type Instance<
|
||||||
|
TData extends DataOption,
|
||||||
|
TProperty extends PropertyOption,
|
||||||
|
TMethod extends Partial<MethodOption>,
|
||||||
|
TCustomInstanceProperty extends IAnyObject = {},
|
||||||
|
TIsPage extends boolean = false
|
||||||
|
> = InstanceProperties &
|
||||||
|
InstanceMethods<TData> &
|
||||||
|
TMethod &
|
||||||
|
(TIsPage extends true ? Page.ILifetime : {}) &
|
||||||
|
TCustomInstanceProperty & {
|
||||||
|
/** 组件数据，**包括内部数据和属性值** */
|
||||||
|
data: TData & PropertyOptionToData<TProperty>
|
||||||
|
/** 组件数据，**包括内部数据和属性值**（与 `data` 一致） */
|
||||||
|
properties: TData & PropertyOptionToData<TProperty>
|
||||||
|
}
|
||||||
|
type TrivialInstance = Instance<
|
||||||
|
IAnyObject,
|
||||||
|
IAnyObject,
|
||||||
|
IAnyObject,
|
||||||
|
IAnyObject
|
||||||
|
>
|
||||||
|
type TrivialOption = Options<IAnyObject, IAnyObject, IAnyObject, IAnyObject>
|
||||||
|
type Options<
|
||||||
|
TData extends DataOption,
|
||||||
|
TProperty extends PropertyOption,
|
||||||
|
TMethod extends MethodOption,
|
||||||
|
TCustomInstanceProperty extends IAnyObject = {},
|
||||||
|
TIsPage extends boolean = false
|
||||||
|
> = Partial<Data<TData>> &
|
||||||
|
Partial<Property<TProperty>> &
|
||||||
|
Partial<Method<TMethod, TIsPage>> &
|
||||||
|
Partial<OtherOption> &
|
||||||
|
Partial<Lifetimes> &
|
||||||
|
ThisType<
|
||||||
|
Instance<
|
||||||
|
TData,
|
||||||
|
TProperty,
|
||||||
|
TMethod,
|
||||||
|
TCustomInstanceProperty,
|
||||||
|
TIsPage
|
||||||
|
>
|
||||||
|
>
|
||||||
|
interface Constructor {
|
||||||
|
<
|
||||||
|
TData extends DataOption,
|
||||||
|
TProperty extends PropertyOption,
|
||||||
|
TMethod extends MethodOption,
|
||||||
|
TCustomInstanceProperty extends IAnyObject = {},
|
||||||
|
TIsPage extends boolean = false
|
||||||
|
>(
|
||||||
|
options: Options<
|
||||||
|
TData,
|
||||||
|
TProperty,
|
||||||
|
TMethod,
|
||||||
|
TCustomInstanceProperty,
|
||||||
|
TIsPage
|
||||||
|
>
|
||||||
|
): string
|
||||||
|
}
|
||||||
|
type DataOption = Record<string, any>
|
||||||
|
type PropertyOption = Record<string, AllProperty>
|
||||||
|
type MethodOption = Record<string, Function>
|
||||||
|
|
||||||
|
interface Data<D extends DataOption> {
|
||||||
|
/** 组件的内部数据，和 `properties` 一同用于组件的模板渲染 */
|
||||||
|
data?: D
|
||||||
|
}
|
||||||
|
interface Property<P extends PropertyOption> {
|
||||||
|
/** 组件的对外属性，是属性名到属性设置的映射表 */
|
||||||
|
properties: P
|
||||||
|
}
|
||||||
|
interface Method<M extends MethodOption, TIsPage extends boolean = false> {
|
||||||
|
/** 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 [组件间通信与事件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html) */
|
||||||
|
methods: M & (TIsPage extends true ? Partial<Page.ILifetime> : {})
|
||||||
|
}
|
||||||
|
type PropertyType =
|
||||||
|
| StringConstructor
|
||||||
|
| NumberConstructor
|
||||||
|
| BooleanConstructor
|
||||||
|
| ArrayConstructor
|
||||||
|
| ObjectConstructor
|
||||||
|
| null
|
||||||
|
type ValueType<T extends PropertyType> = T extends null
|
||||||
|
? any
|
||||||
|
: T extends StringConstructor
|
||||||
|
? string
|
||||||
|
: T extends NumberConstructor
|
||||||
|
? number
|
||||||
|
: T extends BooleanConstructor
|
||||||
|
? boolean
|
||||||
|
: T extends ArrayConstructor
|
||||||
|
? any[]
|
||||||
|
: T extends ObjectConstructor
|
||||||
|
? IAnyObject
|
||||||
|
: never
|
||||||
|
type FullProperty<T extends PropertyType> = {
|
||||||
|
/** 属性类型 */
|
||||||
|
type: T
|
||||||
|
/** 属性初始值 */
|
||||||
|
value?: ValueType<T>
|
||||||
|
/** 属性值被更改时的响应函数 */
|
||||||
|
observer?:
|
||||||
|
| string
|
||||||
|
| ((
|
||||||
|
newVal: ValueType<T>,
|
||||||
|
oldVal: ValueType<T>,
|
||||||
|
changedPath: Array<string | number>
|
||||||
|
) => void)
|
||||||
|
/** 属性的类型（可以指定多个） */
|
||||||
|
optionalTypes?: ShortProperty[]
|
||||||
|
}
|
||||||
|
type AllFullProperty =
|
||||||
|
| FullProperty<StringConstructor>
|
||||||
|
| FullProperty<NumberConstructor>
|
||||||
|
| FullProperty<BooleanConstructor>
|
||||||
|
| FullProperty<ArrayConstructor>
|
||||||
|
| FullProperty<ObjectConstructor>
|
||||||
|
| FullProperty<null>
|
||||||
|
type ShortProperty =
|
||||||
|
| StringConstructor
|
||||||
|
| NumberConstructor
|
||||||
|
| BooleanConstructor
|
||||||
|
| ArrayConstructor
|
||||||
|
| ObjectConstructor
|
||||||
|
| null
|
||||||
|
type AllProperty = AllFullProperty | ShortProperty
|
||||||
|
type PropertyToData<T extends AllProperty> = T extends ShortProperty
|
||||||
|
? ValueType<T>
|
||||||
|
: FullPropertyToData<Exclude<T, ShortProperty>>
|
||||||
|
type FullPropertyToData<T extends AllFullProperty> = ValueType<T['type']>
|
||||||
|
type PropertyOptionToData<P extends PropertyOption> = {
|
||||||
|
[name in keyof P]: PropertyToData<P[name]>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InstanceProperties {
|
||||||
|
/** 组件的文件路径 */
|
||||||
|
is: string
|
||||||
|
/** 节点id */
|
||||||
|
id: string
|
||||||
|
/** 节点dataset */
|
||||||
|
dataset: Record<string, string>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InstanceMethods<D extends DataOption> {
|
||||||
|
/** `setData` 函数用于将数据从逻辑层发送到视图层
|
||||||
|
*（异步），同时改变对应的 `this.data` 的值（同步）。
|
||||||
|
*
|
||||||
|
* **注意：**
|
||||||
|
*
|
||||||
|
* 1. **直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致**。
|
||||||
|
* 1. 仅支持设置可 JSON 化的数据。
|
||||||
|
* 1. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
|
||||||
|
* 1. 请不要把 data 中任何一项的 value 设为 `undefined` ，否则这一项将不被设置并可能遗留一些潜在问题。
|
||||||
|
*/
|
||||||
|
setData(
|
||||||
|
/** 这次要改变的数据
|
||||||
|
*
|
||||||
|
* 以 `key: value` 的形式表示，将 `this.data` 中的 `key` 对应的值改变成 `value`。
|
||||||
|
*
|
||||||
|
* 其中 `key` 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 `array[2].message`，`a.b.c.d`，并且不需要在 this.data 中预先定义。
|
||||||
|
*/
|
||||||
|
data: Partial<D> & IAnyObject,
|
||||||
|
/** setData引起的界面更新渲染完毕后的回调函数，最低基础库： `1.5.0` */
|
||||||
|
callback?: () => void
|
||||||
|
): void
|
||||||
|
|
||||||
|
/** 检查组件是否具有 `behavior` （检查时会递归检查被直接或间接引入的所有behavior） */
|
||||||
|
hasBehavior(behavior: Behavior.BehaviorIdentifier): void
|
||||||
|
/** 触发事件，参见组件事件 */
|
||||||
|
triggerEvent<DetailType = any>(
|
||||||
|
name: string,
|
||||||
|
detail?: DetailType,
|
||||||
|
options?: TriggerEventOption
|
||||||
|
): void
|
||||||
|
/** 创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内 */
|
||||||
|
createSelectorQuery(): SelectorQuery
|
||||||
|
/** 创建一个 IntersectionObserver 对象，选择器选取范围为这个组件实例内 */
|
||||||
|
createIntersectionObserver(
|
||||||
|
options: CreateIntersectionObserverOption
|
||||||
|
): IntersectionObserver
|
||||||
|
/** 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 `wx://component-export` 影响） */
|
||||||
|
selectComponent(selector: string): TrivialInstance
|
||||||
|
/** 使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组 */
|
||||||
|
selectAllComponents(selector: string): TrivialInstance[]
|
||||||
|
/**
|
||||||
|
* 选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被 `wx://component-export` 影响）
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.8.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
selectOwnerComponent(): TrivialInstance
|
||||||
|
/** 获取这个关系所对应的所有关联节点，参见 组件间关系 */
|
||||||
|
getRelationNodes(relationKey: string): TrivialInstance[]
|
||||||
|
/**
|
||||||
|
* 立刻执行 callback ，其中的多个 setData 之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时 setData 时进行界面绘制同步）
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.4.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
groupSetData(callback?: () => void): void
|
||||||
|
/**
|
||||||
|
* 返回当前页面的 custom-tab-bar 的组件实例
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
getTabBar(): TrivialInstance
|
||||||
|
/**
|
||||||
|
* 返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.7.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
getPageId(): string
|
||||||
|
/**
|
||||||
|
* 执行关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
animate(
|
||||||
|
selector: string,
|
||||||
|
keyFrames: KeyFrame[],
|
||||||
|
duration: number,
|
||||||
|
callback?: () => void
|
||||||
|
): void
|
||||||
|
/**
|
||||||
|
* 执行关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
animate(
|
||||||
|
selector: string,
|
||||||
|
keyFrames: ScrollTimelineKeyframe[],
|
||||||
|
duration: number,
|
||||||
|
scrollTimeline: ScrollTimelineOption
|
||||||
|
): void
|
||||||
|
/**
|
||||||
|
* 清除关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
clearAnimation(selector: string, callback: () => void): void
|
||||||
|
/**
|
||||||
|
* 清除关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
**/
|
||||||
|
clearAnimation(
|
||||||
|
selector: string,
|
||||||
|
options?: ClearAnimationOptions,
|
||||||
|
callback?: () => void
|
||||||
|
): void
|
||||||
|
getOpenerEventChannel(): EventChannel
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ComponentOptions {
|
||||||
|
/**
|
||||||
|
* [启用多slot支持](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件wxml的slot)
|
||||||
|
*/
|
||||||
|
multipleSlots?: boolean
|
||||||
|
/**
|
||||||
|
* [组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件样式隔离)
|
||||||
|
*/
|
||||||
|
addGlobalClass?: boolean
|
||||||
|
/**
|
||||||
|
* [组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件样式隔离)
|
||||||
|
*/
|
||||||
|
styleIsolation?:
|
||||||
|
| 'isolated'
|
||||||
|
| 'apply-shared'
|
||||||
|
| 'shared'
|
||||||
|
| 'page-isolated'
|
||||||
|
| 'page-apply-shared'
|
||||||
|
| 'page-shared'
|
||||||
|
/**
|
||||||
|
* [纯数据字段](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/pure-data.html) 是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。从小程序基础库版本 2.8.2 开始支持。
|
||||||
|
*/
|
||||||
|
pureDataPattern?: RegExp
|
||||||
|
/**
|
||||||
|
* [虚拟化组件节点](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E8%99%9A%E6%8B%9F%E5%8C%96%E7%BB%84%E4%BB%B6%E8%8A%82%E7%82%B9) 使自定义组件内部的第一层节点由自定义组件本身完全决定。从小程序基础库版本 [`2.11.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 开始支持 */
|
||||||
|
virtualHost?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TriggerEventOption {
|
||||||
|
/** 事件是否冒泡
|
||||||
|
*
|
||||||
|
* 默认值： `false`
|
||||||
|
*/
|
||||||
|
bubbles?: boolean
|
||||||
|
/** 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
|
||||||
|
*
|
||||||
|
* 默认值： `false`
|
||||||
|
*/
|
||||||
|
composed?: boolean
|
||||||
|
/** 事件是否拥有捕获阶段
|
||||||
|
*
|
||||||
|
* 默认值： `false`
|
||||||
|
*/
|
||||||
|
capturePhase?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RelationOption {
|
||||||
|
/** 目标组件的相对关系 */
|
||||||
|
type: 'parent' | 'child' | 'ancestor' | 'descendant'
|
||||||
|
/** 关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后 */
|
||||||
|
linked?(target: TrivialInstance): void
|
||||||
|
/** 关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后 */
|
||||||
|
linkChanged?(target: TrivialInstance): void
|
||||||
|
/** 关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后 */
|
||||||
|
unlinked?(target: TrivialInstance): void
|
||||||
|
/** 如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联 */
|
||||||
|
target?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PageLifetimes {
|
||||||
|
/** 页面生命周期回调—监听页面显示
|
||||||
|
*
|
||||||
|
* 页面显示/切入前台时触发。
|
||||||
|
*/
|
||||||
|
show(): void
|
||||||
|
/** 页面生命周期回调—监听页面隐藏
|
||||||
|
*
|
||||||
|
* 页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，小程序切入后台等。
|
||||||
|
*/
|
||||||
|
hide(): void
|
||||||
|
/** 页面生命周期回调—监听页面尺寸变化
|
||||||
|
*
|
||||||
|
* 所在页面尺寸变化时执行
|
||||||
|
*/
|
||||||
|
resize(size: Page.IResizeOption): void
|
||||||
|
}
|
||||||
|
|
||||||
|
type DefinitionFilter = <T extends TrivialOption>(
|
||||||
|
/** 使用该 behavior 的 component/behavior 的定义对象 */
|
||||||
|
defFields: T,
|
||||||
|
/** 该 behavior 所使用的 behavior 的 definitionFilter 函数列表 */
|
||||||
|
definitionFilterArr?: DefinitionFilter[]
|
||||||
|
) => void
|
||||||
|
|
||||||
|
interface Lifetimes {
|
||||||
|
/** 组件生命周期声明对象，组件的生命周期：`created`、`attached`、`ready`、`moved`、`detached` 将收归到 `lifetimes` 字段内进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则 `lifetimes` 字段内声明方式优先级最高
|
||||||
|
*
|
||||||
|
* 最低基础库： `2.2.3` */
|
||||||
|
lifetimes: Partial<{
|
||||||
|
/**
|
||||||
|
* 在组件实例刚刚被创建时执行，注意此时不能调用 `setData`
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
created(): void
|
||||||
|
/**
|
||||||
|
* 在组件实例进入页面节点树时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
attached(): void
|
||||||
|
/**
|
||||||
|
* 在组件在视图层布局完成后执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
ready(): void
|
||||||
|
/**
|
||||||
|
* 在组件实例被移动到节点树另一个位置时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
moved(): void
|
||||||
|
/**
|
||||||
|
* 在组件实例被从页面节点树移除时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
detached(): void
|
||||||
|
/**
|
||||||
|
* 每当组件方法抛出错误时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.4.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
error(err: Error): void
|
||||||
|
}>
|
||||||
|
/**
|
||||||
|
* @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
|
||||||
|
*
|
||||||
|
* 在组件实例刚刚被创建时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
created(): void
|
||||||
|
/**
|
||||||
|
* @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
|
||||||
|
*
|
||||||
|
* 在组件实例进入页面节点树时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
attached(): void
|
||||||
|
/**
|
||||||
|
* @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
|
||||||
|
*
|
||||||
|
* 在组件在视图层布局完成后执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
ready(): void
|
||||||
|
/**
|
||||||
|
* @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
|
||||||
|
*
|
||||||
|
* 在组件实例被移动到节点树另一个位置时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
moved(): void
|
||||||
|
/**
|
||||||
|
* @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
|
||||||
|
*
|
||||||
|
* 在组件实例被从页面节点树移除时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
detached(): void
|
||||||
|
/**
|
||||||
|
* @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
|
||||||
|
*
|
||||||
|
* 每当组件方法抛出错误时执行
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.4.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
error(err: Error): void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OtherOption {
|
||||||
|
/** 类似于mixins和traits的组件间代码复用机制，参见 [behaviors](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) */
|
||||||
|
behaviors: Behavior.BehaviorIdentifier[]
|
||||||
|
/**
|
||||||
|
* 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 [数据监听器](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本：[`2.6.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
|
||||||
|
*/
|
||||||
|
observers: Record<string, (...args: any[]) => any>
|
||||||
|
/** 组件间关系定义，参见 [组件间关系](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html) */
|
||||||
|
relations: {
|
||||||
|
[componentName: string]: RelationOption
|
||||||
|
}
|
||||||
|
/** 组件接受的外部样式类，参见 [外部样式类](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html) */
|
||||||
|
externalClasses?: string[]
|
||||||
|
/** 组件所在页面的生命周期声明对象，参见 [组件生命周期](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本： [`2.2.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) */
|
||||||
|
pageLifetimes?: Partial<PageLifetimes>
|
||||||
|
/** 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举） */
|
||||||
|
options: ComponentOptions
|
||||||
|
|
||||||
|
/** 定义段过滤器，用于自定义组件扩展，参见 [自定义组件扩展](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/extend.html)
|
||||||
|
*
|
||||||
|
* 最低基础库版本： [`2.2.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) */
|
||||||
|
definitionFilter?: DefinitionFilter
|
||||||
|
/**
|
||||||
|
* 组件自定义导出，当使用 `behavior: wx://component-export` 时，这个定义段可以用于指定组件被 selectComponent 调用时的返回值，参见 [组件间通信与事件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html)
|
||||||
|
* 最低基础库版本： [`2.2.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) */
|
||||||
|
export: () => IAnyObject
|
||||||
|
}
|
||||||
|
|
||||||
|
interface KeyFrame {
|
||||||
|
/** 关键帧的偏移，范围[0-1] */
|
||||||
|
offset?: number
|
||||||
|
/** 动画缓动函数 */
|
||||||
|
ease?: string
|
||||||
|
/** 基点位置，即 CSS transform-origin */
|
||||||
|
transformOrigin?: string
|
||||||
|
/** 背景颜色，即 CSS background-color */
|
||||||
|
backgroundColor?: string
|
||||||
|
/** 底边位置，即 CSS bottom */
|
||||||
|
bottom?: number | string
|
||||||
|
/** 高度，即 CSS height */
|
||||||
|
height?: number | string
|
||||||
|
/** 左边位置，即 CSS left */
|
||||||
|
left?: number | string
|
||||||
|
/** 宽度，即 CSS width */
|
||||||
|
width?: number | string
|
||||||
|
/** 不透明度，即 CSS opacity */
|
||||||
|
opacity?: number | string
|
||||||
|
/** 右边位置，即 CSS right */
|
||||||
|
right?: number | string
|
||||||
|
/** 顶边位置，即 CSS top */
|
||||||
|
top?: number | string
|
||||||
|
/** 变换矩阵，即 CSS transform matrix */
|
||||||
|
matrix?: number[]
|
||||||
|
/** 三维变换矩阵，即 CSS transform matrix3d */
|
||||||
|
matrix3d?: number[]
|
||||||
|
/** 旋转，即 CSS transform rotate */
|
||||||
|
rotate?: number
|
||||||
|
/** 三维旋转，即 CSS transform rotate3d */
|
||||||
|
rotate3d?: number[]
|
||||||
|
/** X 方向旋转，即 CSS transform rotateX */
|
||||||
|
rotateX?: number
|
||||||
|
/** Y 方向旋转，即 CSS transform rotateY */
|
||||||
|
rotateY?: number
|
||||||
|
/** Z 方向旋转，即 CSS transform rotateZ */
|
||||||
|
rotateZ?: number
|
||||||
|
/** 缩放，即 CSS transform scale */
|
||||||
|
scale?: number[]
|
||||||
|
/** 三维缩放，即 CSS transform scale3d */
|
||||||
|
scale3d?: number[]
|
||||||
|
/** X 方向缩放，即 CSS transform scaleX */
|
||||||
|
scaleX?: number
|
||||||
|
/** Y 方向缩放，即 CSS transform scaleY */
|
||||||
|
scaleY?: number
|
||||||
|
/** Z 方向缩放，即 CSS transform scaleZ */
|
||||||
|
scaleZ?: number
|
||||||
|
/** 倾斜，即 CSS transform skew */
|
||||||
|
skew?: number[]
|
||||||
|
/** X 方向倾斜，即 CSS transform skewX */
|
||||||
|
skewX?: number
|
||||||
|
/** Y 方向倾斜，即 CSS transform skewY */
|
||||||
|
skewY?: number
|
||||||
|
/** 位移，即 CSS transform translate */
|
||||||
|
translate?: Array<number | string>
|
||||||
|
/** 三维位移，即 CSS transform translate3d */
|
||||||
|
translate3d?: Array<number | string>
|
||||||
|
/** X 方向位移，即 CSS transform translateX */
|
||||||
|
translateX?: number | string
|
||||||
|
/** Y 方向位移，即 CSS transform translateY */
|
||||||
|
translateY?: number | string
|
||||||
|
/** Z 方向位移，即 CSS transform translateZ */
|
||||||
|
translateZ?: number | string
|
||||||
|
}
|
||||||
|
interface ClearAnimationOptions {
|
||||||
|
/** 基点位置，即 CSS transform-origin */
|
||||||
|
transformOrigin?: boolean
|
||||||
|
/** 背景颜色，即 CSS background-color */
|
||||||
|
backgroundColor?: boolean
|
||||||
|
/** 底边位置，即 CSS bottom */
|
||||||
|
bottom?: boolean
|
||||||
|
/** 高度，即 CSS height */
|
||||||
|
height?: boolean
|
||||||
|
/** 左边位置，即 CSS left */
|
||||||
|
left?: boolean
|
||||||
|
/** 宽度，即 CSS width */
|
||||||
|
width?: boolean
|
||||||
|
/** 不透明度，即 CSS opacity */
|
||||||
|
opacity?: boolean
|
||||||
|
/** 右边位置，即 CSS right */
|
||||||
|
right?: boolean
|
||||||
|
/** 顶边位置，即 CSS top */
|
||||||
|
top?: boolean
|
||||||
|
/** 变换矩阵，即 CSS transform matrix */
|
||||||
|
matrix?: boolean
|
||||||
|
/** 三维变换矩阵，即 CSS transform matrix3d */
|
||||||
|
matrix3d?: boolean
|
||||||
|
/** 旋转，即 CSS transform rotate */
|
||||||
|
rotate?: boolean
|
||||||
|
/** 三维旋转，即 CSS transform rotate3d */
|
||||||
|
rotate3d?: boolean
|
||||||
|
/** X 方向旋转，即 CSS transform rotateX */
|
||||||
|
rotateX?: boolean
|
||||||
|
/** Y 方向旋转，即 CSS transform rotateY */
|
||||||
|
rotateY?: boolean
|
||||||
|
/** Z 方向旋转，即 CSS transform rotateZ */
|
||||||
|
rotateZ?: boolean
|
||||||
|
/** 缩放，即 CSS transform scale */
|
||||||
|
scale?: boolean
|
||||||
|
/** 三维缩放，即 CSS transform scale3d */
|
||||||
|
scale3d?: boolean
|
||||||
|
/** X 方向缩放，即 CSS transform scaleX */
|
||||||
|
scaleX?: boolean
|
||||||
|
/** Y 方向缩放，即 CSS transform scaleY */
|
||||||
|
scaleY?: boolean
|
||||||
|
/** Z 方向缩放，即 CSS transform scaleZ */
|
||||||
|
scaleZ?: boolean
|
||||||
|
/** 倾斜，即 CSS transform skew */
|
||||||
|
skew?: boolean
|
||||||
|
/** X 方向倾斜，即 CSS transform skewX */
|
||||||
|
skewX?: boolean
|
||||||
|
/** Y 方向倾斜，即 CSS transform skewY */
|
||||||
|
skewY?: boolean
|
||||||
|
/** 位移，即 CSS transform translate */
|
||||||
|
translate?: boolean
|
||||||
|
/** 三维位移，即 CSS transform translate3d */
|
||||||
|
translate3d?: boolean
|
||||||
|
/** X 方向位移，即 CSS transform translateX */
|
||||||
|
translateX?: boolean
|
||||||
|
/** Y 方向位移，即 CSS transform translateY */
|
||||||
|
translateY?: boolean
|
||||||
|
/** Z 方向位移，即 CSS transform translateZ */
|
||||||
|
translateZ?: boolean
|
||||||
|
}
|
||||||
|
interface ScrollTimelineKeyframe {
|
||||||
|
composite?: 'replace' | 'add' | 'accumulate' | 'auto'
|
||||||
|
easing?: string
|
||||||
|
offset?: number | null
|
||||||
|
[property: string]: string | number | null | undefined
|
||||||
|
}
|
||||||
|
interface ScrollTimelineOption {
|
||||||
|
/** 指定滚动元素的选择器（只支持 scroll-view），该元素滚动时会驱动动画的进度 */
|
||||||
|
scrollSource: string
|
||||||
|
/** 指定滚动的方向。有效值为 horizontal 或 vertical */
|
||||||
|
orientation?: string
|
||||||
|
/** 指定开始驱动动画进度的滚动偏移量，单位 px */
|
||||||
|
startScrollOffset: number
|
||||||
|
/** 指定停止驱动动画进度的滚动偏移量，单位 px */
|
||||||
|
endScrollOffset: number
|
||||||
|
/** 起始和结束的滚动范围映射的时间长度，该时间可用于与关键帧动画里的时间 (duration) 相匹配，单位 ms */
|
||||||
|
timeRange: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
|
||||||
|
*
|
||||||
|
* * 使用 `this.data` 可以获取内部数据和属性值，但不要直接修改它们，应使用 `setData` 修改。
|
||||||
|
* * 生命周期函数无法在组件方法中通过 `this` 访问到。
|
||||||
|
* * 属性名应避免以 data 开头，即不要命名成 `dataXyz` 这样的形式，因为在 WXML 中， `data-xyz=""` 会被作为节点 dataset 来处理，而不是组件属性。
|
||||||
|
* * 在一个组件的定义和使用时，组件的属性名和 data 字段相互间都不能冲突（尽管它们位于不同的定义段中）。
|
||||||
|
* * 从基础库 `2.0.9` 开始，对象类型的属性和 data 字段中可以包含函数类型的子字段，即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。
|
||||||
|
* * `bug` : 对于 type 为 Object 或 Array 的属性，如果通过该组件自身的 `this.setData` 来改变属性值的一个子字段，则依旧会触发属性 observer ，且 observer 接收到的 `newVal` 是变化的那个子字段的值， `oldVal` 为空， `changedPath` 包含子字段的字段名相关信息。
|
||||||
|
*/
|
||||||
|
declare let Component: WechatMiniprogram.Component.Constructor
|
||||||
1435
typings/types/wx/lib.wx.event.d.ts
vendored
Normal file
1435
typings/types/wx/lib.wx.event.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load Diff
259
typings/types/wx/lib.wx.page.d.ts
vendored
Normal file
259
typings/types/wx/lib.wx.page.d.ts
vendored
Normal file
@@ -0,0 +1,259 @@
|
|||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) 2021 Tencent, Inc. All rights reserved.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
declare namespace WechatMiniprogram.Page {
|
||||||
|
type Instance<
|
||||||
|
TData extends DataOption,
|
||||||
|
TCustom extends CustomOption
|
||||||
|
> = OptionalInterface<ILifetime> &
|
||||||
|
InstanceProperties &
|
||||||
|
InstanceMethods<TData> &
|
||||||
|
Data<TData> &
|
||||||
|
TCustom
|
||||||
|
type Options<
|
||||||
|
TData extends DataOption,
|
||||||
|
TCustom extends CustomOption
|
||||||
|
> = (TCustom & Partial<Data<TData>> & Partial<ILifetime>) &
|
||||||
|
ThisType<Instance<TData, TCustom>>
|
||||||
|
type TrivialInstance = Instance<IAnyObject, IAnyObject>
|
||||||
|
interface Constructor {
|
||||||
|
<TData extends DataOption, TCustom extends CustomOption>(
|
||||||
|
options: Options<TData, TCustom>
|
||||||
|
): void
|
||||||
|
}
|
||||||
|
interface ILifetime {
|
||||||
|
/** 生命周期回调—监听页面加载
|
||||||
|
*
|
||||||
|
* 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
|
||||||
|
*/
|
||||||
|
onLoad(
|
||||||
|
/** 打开当前页面路径中的参数 */
|
||||||
|
query: Record<string, string | undefined>
|
||||||
|
): void | Promise<void>
|
||||||
|
/** 生命周期回调—监听页面显示
|
||||||
|
*
|
||||||
|
* 页面显示/切入前台时触发。
|
||||||
|
*/
|
||||||
|
onShow(): void | Promise<void>
|
||||||
|
/** 生命周期回调—监听页面初次渲染完成
|
||||||
|
*
|
||||||
|
* 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
|
||||||
|
*
|
||||||
|
|
||||||
|
* 注意：对界面内容进行设置的 API 如`wx.setNavigationBarTitle`，请在`onReady`之后进行。
|
||||||
|
*/
|
||||||
|
onReady(): void | Promise<void>
|
||||||
|
/** 生命周期回调—监听页面隐藏
|
||||||
|
*
|
||||||
|
* 页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，小程序切入后台等。
|
||||||
|
*/
|
||||||
|
onHide(): void | Promise<void>
|
||||||
|
/** 生命周期回调—监听页面卸载
|
||||||
|
*
|
||||||
|
* 页面卸载时触发。如`redirectTo`或`navigateBack`到其他页面时。
|
||||||
|
*/
|
||||||
|
onUnload(): void | Promise<void>
|
||||||
|
/** 监听用户下拉动作
|
||||||
|
*
|
||||||
|
* 监听用户下拉刷新事件。
|
||||||
|
* - 需要在`app.json`的`window`选项中或页面配置中开启`enablePullDownRefresh`。
|
||||||
|
* - 可以通过`wx.startPullDownRefresh`触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
|
||||||
|
* - 当处理完数据刷新后，`wx.stopPullDownRefresh`可以停止当前页面的下拉刷新。
|
||||||
|
*/
|
||||||
|
onPullDownRefresh(): void | Promise<void>
|
||||||
|
/** 页面上拉触底事件的处理函数
|
||||||
|
*
|
||||||
|
* 监听用户上拉触底事件。
|
||||||
|
* - 可以在`app.json`的`window`选项中或页面配置中设置触发距离`onReachBottomDistance`。
|
||||||
|
* - 在触发距离内滑动期间，本事件只会被触发一次。
|
||||||
|
*/
|
||||||
|
onReachBottom(): void | Promise<void>
|
||||||
|
/** 用户点击右上角转发
|
||||||
|
*
|
||||||
|
* 监听用户点击页面内转发按钮（`<button>` 组件 `open-type="share"`）或右上角菜单“转发”按钮的行为，并自定义转发内容。
|
||||||
|
*
|
||||||
|
* **注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮**
|
||||||
|
*
|
||||||
|
* 此事件需要 return 一个 Object，用于自定义转发内容
|
||||||
|
*/
|
||||||
|
onShareAppMessage(
|
||||||
|
/** 分享发起来源参数 */
|
||||||
|
options: IShareAppMessageOption
|
||||||
|
): ICustomShareContent | void
|
||||||
|
/**
|
||||||
|
* 监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容
|
||||||
|
*
|
||||||
|
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见 [分享到朋友圈 (Beta)](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html)
|
||||||
|
*
|
||||||
|
* 基础库 2.11.3 开始支持，低版本需做兼容处理。
|
||||||
|
*/
|
||||||
|
onShareTimeline(): ICustomTimelineContent | void
|
||||||
|
|
||||||
|
/** 页面滚动触发事件的处理函数
|
||||||
|
*
|
||||||
|
* 监听用户滑动页面事件。
|
||||||
|
*/
|
||||||
|
onPageScroll(
|
||||||
|
/** 页面滚动参数 */
|
||||||
|
options: IPageScrollOption
|
||||||
|
): void | Promise<void>
|
||||||
|
|
||||||
|
/** 当前是 tab 页时，点击 tab 时触发，最低基础库： `1.9.0` */
|
||||||
|
onTabItemTap(
|
||||||
|
/** tab 点击参数 */
|
||||||
|
options: ITabItemTapOption
|
||||||
|
): void | Promise<void>
|
||||||
|
|
||||||
|
/** 窗口尺寸改变时触发，最低基础库：`2.4.0` */
|
||||||
|
onResize(
|
||||||
|
/** 窗口尺寸参数 */
|
||||||
|
options: IResizeOption
|
||||||
|
): void | Promise<void>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
|
||||||
|
* 基础库 2.10.3，安卓 7.0.15 版本起支持，iOS 暂不支持
|
||||||
|
*/
|
||||||
|
onAddToFavorites(options: IAddToFavoritesOption): IAddToFavoritesContent
|
||||||
|
}
|
||||||
|
interface InstanceProperties {
|
||||||
|
/** 页面的文件路径 */
|
||||||
|
is: string
|
||||||
|
|
||||||
|
/** 到当前页面的路径 */
|
||||||
|
route: string
|
||||||
|
|
||||||
|
/** 打开当前页面路径中的参数 */
|
||||||
|
options: Record<string, string | undefined>
|
||||||
|
}
|
||||||
|
|
||||||
|
type DataOption = Record<string, any>
|
||||||
|
type CustomOption = Record<string, any>
|
||||||
|
|
||||||
|
type InstanceMethods<D extends DataOption> = Component.InstanceMethods<D>
|
||||||
|
|
||||||
|
interface Data<D extends DataOption> {
|
||||||
|
/** 页面的初始数据
|
||||||
|
*
|
||||||
|
* `data` 是页面第一次渲染使用的**初始数据**。
|
||||||
|
*
|
||||||
|
* 页面加载时，`data` 将会以`JSON`字符串的形式由逻辑层传至渲染层，因此`data`中的数据必须是可以转成`JSON`的类型：字符串，数字，布尔值，对象，数组。
|
||||||
|
*
|
||||||
|
* 渲染层可以通过 `WXML` 对数据进行绑定。
|
||||||
|
*/
|
||||||
|
data: D
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICustomShareContent {
|
||||||
|
/** 转发标题。默认值：当前小程序名称 */
|
||||||
|
title?: string
|
||||||
|
/** 转发路径，必须是以 / 开头的完整路径。默认值：当前页面 path */
|
||||||
|
path?: string
|
||||||
|
/** 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4，最低基础库： `1.5.0`。默认值：使用默认截图 */
|
||||||
|
imageUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICustomTimelineContent {
|
||||||
|
/** 自定义标题，即朋友圈列表页上显示的标题。默认值：当前小程序名称 */
|
||||||
|
title?: string
|
||||||
|
/** 自定义页面路径中携带的参数，如 `path?a=1&b=2` 的 “?” 后面部分 默认值：当前页面路径携带的参数 */
|
||||||
|
query?: string
|
||||||
|
/** 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及 JPG。显示图片长宽比是 1:1。默认值：默认使用小程序 Logo*/
|
||||||
|
imageUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IPageScrollOption {
|
||||||
|
/** 页面在垂直方向已滚动的距离（单位px） */
|
||||||
|
scrollTop: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IShareAppMessageOption {
|
||||||
|
/** 转发事件来源。
|
||||||
|
*
|
||||||
|
* 可选值：
|
||||||
|
* - `button`：页面内转发按钮；
|
||||||
|
* - `menu`：右上角转发菜单。
|
||||||
|
*
|
||||||
|
* 最低基础库： `1.2.4`
|
||||||
|
*/
|
||||||
|
from: 'button' | 'menu' | string
|
||||||
|
/** 如果 `from` 值是 `button`，则 `target` 是触发这次转发事件的 `button`，否则为 `undefined`
|
||||||
|
*
|
||||||
|
* 最低基础库： `1.2.4` */
|
||||||
|
target: any
|
||||||
|
/** 页面中包含`<web-view>`组件时，返回当前`<web-view>`的url
|
||||||
|
*
|
||||||
|
* 最低基础库： `1.6.4`
|
||||||
|
*/
|
||||||
|
webViewUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ITabItemTapOption {
|
||||||
|
/** 被点击tabItem的序号，从0开始，最低基础库： `1.9.0` */
|
||||||
|
index: string
|
||||||
|
/** 被点击tabItem的页面路径，最低基础库： `1.9.0` */
|
||||||
|
pagePath: string
|
||||||
|
/** 被点击tabItem的按钮文字，最低基础库： `1.9.0` */
|
||||||
|
text: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IResizeOption {
|
||||||
|
size: {
|
||||||
|
/** 变化后的窗口宽度，单位 px */
|
||||||
|
windowWidth: number
|
||||||
|
/** 变化后的窗口高度，单位 px */
|
||||||
|
windowHeight: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAddToFavoritesOption {
|
||||||
|
/** 页面中包含web-view组件时，返回当前web-view的url */
|
||||||
|
webviewUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAddToFavoritesContent {
|
||||||
|
/** 自定义标题，默认值：页面标题或账号名称 */
|
||||||
|
title?: string
|
||||||
|
/** 自定义图片，显示图片长宽比为 1：1，默认值：页面截图 */
|
||||||
|
imageUrl?: string
|
||||||
|
/** 自定义query字段，默认值：当前页面的query */
|
||||||
|
query?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GetCurrentPages {
|
||||||
|
(): Array<Instance<IAnyObject, IAnyObject>>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注册小程序中的一个页面。接受一个 `Object` 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
|
||||||
|
*/
|
||||||
|
declare let Page: WechatMiniprogram.Page.Constructor
|
||||||
|
/**
|
||||||
|
* 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
|
||||||
|
|
||||||
|
* __注意：__
|
||||||
|
|
||||||
|
* - __不要尝试修改页面栈，会导致路由以及页面状态错误。__
|
||||||
|
* - 不要在 `App.onLaunch` 的时候调用 `getCurrentPages()`，此时 `page` 还没有生成。
|
||||||
|
*/
|
||||||
|
declare let getCurrentPages: WechatMiniprogram.Page.GetCurrentPages
|
||||||
Reference in New Issue
Block a user