Files
zlqy/templates/apply_teacher.html
2026-02-27 10:37:11 +08:00

110 lines
5.8 KiB
HTML

{% extends "base.html" %}
{% block title %}申请成为杯赛老师 - 智联青云{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto py-8">
<!-- 邀请码激活区域 -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
<h2 class="text-lg font-semibold text-blue-800 mb-2">🎫 已有邀请码?在此激活</h2>
<p class="text-sm text-blue-600 mb-4">审核通过后,您会在私聊消息中收到邀请码。输入邀请码即可正式成为杯赛老师。</p>
<div class="flex gap-3">
<input type="text" id="invite_code" placeholder="请输入邀请码,如 TC-A3K9M2X7"
class="flex-1 px-3 py-2 border border-blue-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm uppercase"
maxlength="11">
<button type="button" id="activate_btn" onclick="activateInviteCode()"
class="px-5 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
激活
</button>
</div>
<p id="invite_result" class="text-sm mt-2 hidden"></p>
</div>
<div class="bg-white shadow-sm rounded-lg border border-slate-200 p-6">
<h1 class="text-2xl font-bold text-slate-900 mb-6">申请成为杯赛老师</h1>
<p class="text-sm text-slate-500 mb-6">请选择您希望担任老师的杯赛,并填写申请理由。</p>
<form method="POST" action="{{ url_for('apply_teacher') }}" class="space-y-6">
<div>
<label for="contest_id" class="block text-sm font-medium text-slate-700 mb-1">选择杯赛 <span class="text-red-500">*</span></label>
<select id="contest_id" name="contest_id" required
class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
<option value="">请选择杯赛</option>
{% for contest in contests %}
<option value="{{ contest.id }}" {% if selected_contest and selected_contest.id == contest.id %}selected{% endif %}>{{ contest.name }}</option>
{% endfor %}
</select>
</div>
<div>
<label for="name" class="block text-sm font-medium text-slate-700 mb-1">姓名 <span class="text-red-500">*</span></label>
<input type="text" id="name" name="name" required
class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
placeholder="您的真实姓名">
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
<input type="email" id="email" name="email" required
class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
placeholder="用于接收审核结果通知">
</div>
<div>
<label for="reason" class="block text-sm font-medium text-slate-700 mb-1">申请理由 <span class="text-red-500">*</span></label>
<textarea id="reason" name="reason" rows="5" required
class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
placeholder="请简要说明您的教学经历或申请原因"></textarea>
</div>
<div class="flex justify-end gap-3">
<a href="{{ url_for('home') }}" class="px-5 py-2.5 border border-slate-300 rounded-md text-sm font-medium text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
取消
</a>
<button type="submit"
class="px-5 py-2.5 bg-primary text-white rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
提交申请
</button>
</div>
</form>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
function activateInviteCode() {
const code = document.getElementById('invite_code').value.trim();
const resultEl = document.getElementById('invite_result');
const btn = document.getElementById('activate_btn');
if (!code) {
resultEl.textContent = '请输入邀请码';
resultEl.className = 'text-sm mt-2 text-red-600';
return;
}
btn.disabled = true;
btn.textContent = '激活中...';
fetch('/api/activate-invite-code', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({code: code})
})
.then(r => r.json())
.then(data => {
resultEl.classList.remove('hidden');
if (data.success) {
resultEl.textContent = data.message;
resultEl.className = 'text-sm mt-2 text-green-600 font-medium';
setTimeout(() => location.reload(), 1500);
} else {
resultEl.textContent = data.message;
resultEl.className = 'text-sm mt-2 text-red-600';
}
})
.catch(() => {
resultEl.classList.remove('hidden');
resultEl.textContent = '网络错误,请稍后重试';
resultEl.className = 'text-sm mt-2 text-red-600';
})
.finally(() => {
btn.disabled = false;
btn.textContent = '激活';
});
}
</script>
{% endblock %}