208 lines
8.9 KiB
HTML
208 lines
8.9 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>
|
|
<link rel="stylesheet" href="main.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="auth-body">
|
|
|
|
<!-- 简化版导航 -->
|
|
<nav class="auth-navbar">
|
|
<div class="auth-navbar-container">
|
|
<a href="index.html" class="auth-back-link">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
|
|
返回首页
|
|
</a>
|
|
<span class="auth-title">商家中心</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="auth-main">
|
|
<div class="auth-card fade-in-up">
|
|
|
|
<!-- Tab 切换 -->
|
|
<div class="auth-tabs">
|
|
<button id="tab-login" onclick="switchMode('login')" class="auth-tab active">
|
|
商家登录
|
|
</button>
|
|
<button id="tab-register" onclick="switchMode('register')" class="auth-tab">
|
|
商家入驻
|
|
</button>
|
|
</div>
|
|
|
|
<div class="auth-form-container">
|
|
<!-- 登录表单 -->
|
|
<form id="login-form" class="auth-form" onsubmit="handleLogin(event)">
|
|
<div class="form-group">
|
|
<label class="form-label">账号/手机号</label>
|
|
<input type="text" class="form-input" placeholder="请输入您的账号" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">密码</label>
|
|
<input type="password" class="form-input" placeholder="请输入密码" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label class="form-checkbox">
|
|
<input type="checkbox">
|
|
记住我
|
|
</label>
|
|
<a href="#" class="form-link">忘记密码？</a>
|
|
</div>
|
|
<button type="submit" class="btn-submit">
|
|
立即登录
|
|
</button>
|
|
</form>
|
|
|
|
<!-- 注册表单 -->
|
|
<form id="register-form" class="auth-form hidden" onsubmit="handleRegister(event)">
|
|
<div class="form-group">
|
|
<label class="form-label">公司全称 <span class="required">*</span></label>
|
|
<input type="text" class="form-input" placeholder="请填写营业执照上的公司名称" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">联系人姓名</label>
|
|
<input type="text" class="form-input" placeholder="请输入联系人姓名" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">手机号码</label>
|
|
<input type="tel" class="form-input" placeholder="请输入手机号码" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">营业执照 <span class="required">*</span></label>
|
|
<div id="drop-zone" class="upload-zone">
|
|
<input type="file" accept="image/*" required onchange="handleFileSelect(this)">
|
|
<div class="upload-placeholder" id="upload-placeholder">
|
|
<svg stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<div class="upload-text">
|
|
<span class="highlight">点击上传</span> 或拖拽文件
|
|
</div>
|
|
<p class="upload-hint">支持 JPG, PNG, PDF</p>
|
|
</div>
|
|
<div id="file-name" class="upload-filename"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit">
|
|
提交入驻申请
|
|
</button>
|
|
<p class="form-hint">
|
|
提交即代表同意 <a href="#" class="form-link">《商家入驻协议》</a>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function switchMode(mode) {
|
|
const loginForm = document.getElementById('login-form');
|
|
const registerForm = document.getElementById('register-form');
|
|
const tabLogin = document.getElementById('tab-login');
|
|
const tabRegister = document.getElementById('tab-register');
|
|
|
|
if (mode === 'login') {
|
|
loginForm.classList.remove('hidden');
|
|
registerForm.classList.add('hidden');
|
|
tabLogin.classList.add('active');
|
|
tabRegister.classList.remove('active');
|
|
} else {
|
|
loginForm.classList.add('hidden');
|
|
registerForm.classList.remove('hidden');
|
|
tabRegister.classList.add('active');
|
|
tabLogin.classList.remove('active');
|
|
}
|
|
|
|
// Update URL without reloading
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('mode', mode);
|
|
window.history.pushState({}, '', url);
|
|
}
|
|
|
|
// 拖拽效果处理
|
|
const dropZone = document.getElementById('drop-zone');
|
|
if(dropZone) {
|
|
const input = dropZone.querySelector('input');
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
function preventDefaults(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, highlight, false);
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, unhighlight, false);
|
|
});
|
|
|
|
function highlight(e) {
|
|
dropZone.style.borderColor = 'var(--brand-500)';
|
|
dropZone.style.background = 'var(--brand-50)';
|
|
}
|
|
|
|
function unhighlight(e) {
|
|
dropZone.style.borderColor = '#cbd5e1';
|
|
dropZone.style.background = 'var(--slate-50)';
|
|
}
|
|
|
|
dropZone.addEventListener('drop', handleDrop, false);
|
|
|
|
function handleDrop(e) {
|
|
const dt = e.dataTransfer;
|
|
const files = dt.files;
|
|
|
|
if (files && files.length > 0) {
|
|
input.files = files;
|
|
handleFileSelect(input);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleLogin(e) {
|
|
e.preventDefault();
|
|
// 跳转到后台管理系统登录页
|
|
window.location.href = '/index.html#/login';
|
|
}
|
|
|
|
function handleFileSelect(input) {
|
|
const placeholder = document.getElementById('upload-placeholder');
|
|
const fileNameDisplay = document.getElementById('file-name');
|
|
|
|
if (input.files && input.files[0]) {
|
|
placeholder.classList.add('hidden');
|
|
fileNameDisplay.classList.add('show');
|
|
fileNameDisplay.textContent = '已选择: ' + input.files[0].name;
|
|
} else {
|
|
placeholder.classList.remove('hidden');
|
|
fileNameDisplay.classList.remove('show');
|
|
}
|
|
}
|
|
|
|
function handleRegister(e) {
|
|
e.preventDefault();
|
|
const company = e.target.querySelector('input[placeholder*="公司"]').value;
|
|
alert(`入驻申请提交成功！\n\n欢迎 ${company} 加入我们。\n我们将尽快审核您的资料。`);
|
|
window.location.href = 'index.html';
|
|
}
|
|
|
|
// Initialize based on URL parameter
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const mode = params.get('mode') || 'login';
|
|
switchMode(mode);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|