216 lines
11 KiB
HTML
216 lines
11 KiB
HTML
<!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-4">
|
|
<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 class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-7 h-7 bg-white rounded-full flex items-center justify-center text-primary text-xs font-semibold mb-1.5">1</div>
|
|
<span class="text-xs text-white/90">提交申请</span>
|
|
</div>
|
|
<div class="flex-1 h-0.5 bg-white/30 mx-2"></div>
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-white/70 text-xs font-medium mb-1.5">2</div>
|
|
<span class="text-xs text-white/60">等待审核</span>
|
|
</div>
|
|
<div class="flex-1 h-0.5 bg-white/30 mx-2"></div>
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-white/70 text-xs font-medium mb-1.5">3</div>
|
|
<span class="text-xs text-white/60">审核通过</span>
|
|
</div>
|
|
<div class="flex-1 h-0.5 bg-white/30 mx-2"></div>
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-white/70 text-xs font-medium mb-1.5">4</div>
|
|
<span class="text-xs text-white/60">开始使用</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表单区域 -->
|
|
<div class="bg-white rounded-2xl shadow-lg shadow-gray-200/50 overflow-hidden">
|
|
<!-- 球房ID -->
|
|
<div class="px-5 py-4 border-b border-gray-100">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-error text-sm mr-1">*</span>
|
|
<span class="text-sm font-medium text-gray-13">球房ID</span>
|
|
</div>
|
|
<input type="text" id="siteId" placeholder="请输入球房ID"
|
|
class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
|
|
</div>
|
|
<!-- 申请身份 -->
|
|
<div class="px-5 py-4 border-b border-gray-100">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-error text-sm mr-1">*</span>
|
|
<span class="text-sm font-medium text-gray-13">申请身份</span>
|
|
</div>
|
|
<input type="text" id="role" placeholder="请输入申请身份（如：助教、店长等）"
|
|
class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
|
|
</div>
|
|
<!-- 手机号 -->
|
|
<div class="px-5 py-4 border-b border-gray-100">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-error text-sm mr-1">*</span>
|
|
<span class="text-sm font-medium text-gray-13">手机号</span>
|
|
</div>
|
|
<input type="text" id="phone" placeholder="请输入手机号"
|
|
class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
|
|
</div>
|
|
<!-- 编号（选填） -->
|
|
<div class="px-5 py-4 border-b border-gray-100">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-sm font-medium text-gray-13">编号</span>
|
|
<span class="text-xs text-gray-6 ml-2">选填</span>
|
|
</div>
|
|
<input type="text" id="staffNo" placeholder="请输入编号"
|
|
class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
|
|
</div>
|
|
<!-- 昵称 -->
|
|
<div class="px-5 py-4">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-error text-sm mr-1">*</span>
|
|
<span class="text-sm font-medium text-gray-13">昵称</span>
|
|
</div>
|
|
<input type="text" id="nickname" placeholder="请输入昵称"
|
|
class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提示 -->
|
|
<p class="text-xs text-gray-6 text-center mt-3">请认真填写，信息不完整可能导致审核不通过</p>
|
|
</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 submitBtn = document.getElementById('submitBtn');
|
|
// 必填字段
|
|
const requiredFields = [
|
|
{ id: 'siteId', label: '球房ID' },
|
|
{ id: 'role', label: '申请身份' },
|
|
{ id: 'phone', label: '手机号' },
|
|
{ id: 'nickname', label: '昵称' },
|
|
];
|
|
|
|
submitBtn.addEventListener('click', function() {
|
|
let firstEmpty = null;
|
|
// 清除之前的错误样式
|
|
document.querySelectorAll('.field-error').forEach(el => el.remove());
|
|
requiredFields.forEach(f => {
|
|
const input = document.getElementById(f.id);
|
|
input.classList.remove('ring-2', 'ring-error/30', 'border-error/40');
|
|
if (!input.value.trim()) {
|
|
input.classList.add('ring-2', 'ring-error/30', 'border-error/40');
|
|
const tip = document.createElement('p');
|
|
tip.className = 'field-error text-error text-xs mt-1';
|
|
tip.textContent = `请输入${f.label}`;
|
|
input.parentElement.appendChild(tip);
|
|
if (!firstEmpty) firstEmpty = input;
|
|
}
|
|
});
|
|
if (firstEmpty) {
|
|
firstEmpty.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
return;
|
|
}
|
|
alert('申请已提交，请等待审核');
|
|
window.location.href = 'reviewing.html';
|
|
});
|
|
|
|
// 输入时清除错误状态
|
|
requiredFields.forEach(f => {
|
|
document.getElementById(f.id).addEventListener('input', function() {
|
|
if (this.value.trim()) {
|
|
this.classList.remove('ring-2', 'ring-error/30', 'border-error/40');
|
|
const err = this.parentElement.querySelector('.field-error');
|
|
if (err) err.remove();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|