feat: 完善代码,应该可以进行签到了,就差测试了
This commit is contained in:
@@ -3,72 +3,160 @@
|
||||
{% block title %}签到详情{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="p-4 max-w-xl mx-auto space-y-6">
|
||||
|
||||
<!-- 标题 -->
|
||||
<!-- 顶部 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold">签到详情</h1>
|
||||
<a href="/sign" class="text-sm text-blue-500 hover:underline">返回签到列表</a>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<hr>
|
||||
|
||||
<!-- 详情信息 -->
|
||||
<div class="space-y-4">
|
||||
<!-- 基本信息 -->
|
||||
<div class="space-y-3 text-sm">
|
||||
<div>
|
||||
<span class="text-zinc-500">签到名称</span>
|
||||
<div class="font-medium">{{ knowing_name }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="text-zinc-500">日期</span>
|
||||
<div class="font-medium">{{ start_date }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="text-zinc-500">时间</span>
|
||||
<div class="font-medium">{{ start_time }} - {{ end_time }}</div>
|
||||
<div class="font-medium">
|
||||
{{ start_date }} {{ start_time }} - {{ end_time }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="text-zinc-500">发起人</span>
|
||||
<div class="font-medium">{{ send_name }} ({{ send_role }})</div>
|
||||
<div class="font-medium">
|
||||
{{ send_name }}({{ send_role }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- <div>
|
||||
<span class="text-zinc-500">签到状态</span>
|
||||
<div class="font-medium">
|
||||
{% if is_finish_know == 1 %}
|
||||
<span class="text-green-600">已签到</span>
|
||||
{% elif is_check == 1 %}
|
||||
<span class="text-green-600">已签到</span>
|
||||
{% else %}
|
||||
<span class="text-red-600">未签到</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<span class="text-zinc-500">是否需要拍照</span>
|
||||
<div class="font-medium">
|
||||
{{ "是" if is_picture == 0 else "否" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 签到表单 -->
|
||||
{% if is_finish_know == 0 and is_check == 0 %}
|
||||
<form method="POST" action="/sign/{{ know_id }}/complete" enctype="multipart/form-data"
|
||||
class="space-y-4 border rounded-lg p-4 bg-zinc-50">
|
||||
|
||||
<!-- 地点选择 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-700 mb-1">
|
||||
签到地点
|
||||
</label>
|
||||
|
||||
<select id="location-select" class="w-full p-2 border rounded-md bg-white">
|
||||
<option value="">请选择预设地点</option>
|
||||
|
||||
{% for loc in locations %}
|
||||
<option value="{{ loc.longitude }}:{{ loc.latitude }}" data-address="{{ loc.location }}">
|
||||
{{ loc.alias }}({{ loc.radius }}m)
|
||||
</option>
|
||||
{% endfor %}
|
||||
|
||||
<option value="custom">📍 自定义地点</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 自定义地点 -->
|
||||
<div id="custom-location" class="hidden space-y-2">
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-600">
|
||||
经度:纬度
|
||||
</label>
|
||||
<input type="text" id="custom-location-value" class="w-full p-2 border rounded-md"
|
||||
placeholder="106.534597:29.341189">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-600">
|
||||
地址描述
|
||||
</label>
|
||||
<input type="text" id="custom-address" class="w-full p-2 border rounded-md" placeholder="请输入签到地址">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实际提交字段 -->
|
||||
<input type="hidden" name="location" id="location" required>
|
||||
<input type="hidden" name="address" id="address" required>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-700 mb-1">
|
||||
备注(必填)
|
||||
</label>
|
||||
<textarea name="remark" class="w-full p-2 border rounded-md" rows="3" placeholder="请输入备注"
|
||||
required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
{% if is_picture == 1 %}
|
||||
<div>
|
||||
<span class="text-zinc-500">签到需要拍照</span>
|
||||
<div class="font-medium">是</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div>
|
||||
<span class="text-zinc-500">签到需要拍照</span>
|
||||
<div class="font-medium">否</div>
|
||||
<label class="block text-sm font-medium text-zinc-700 mb-1">
|
||||
上传图片(可多张)
|
||||
</label>
|
||||
<input type="file" name="images" multiple accept="image/*" class="w-full p-2 border rounded-md bg-white">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 完成签到按钮 -->
|
||||
{% if is_finish_know == 0 and is_check == 0 %}
|
||||
<div class="mt-4">
|
||||
<form method="post" action="/sign/{{ know_id }}/complete">
|
||||
<button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-lg">完成签到</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- 提交 -->
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
|
||||
完成签到
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const select = document.getElementById("location-select")
|
||||
const customBox = document.getElementById("custom-location")
|
||||
|
||||
select?.addEventListener("change", function () {
|
||||
const value = this.value
|
||||
|
||||
if (value === "custom") {
|
||||
customBox.classList.remove("hidden")
|
||||
document.getElementById("location").value = ""
|
||||
document.getElementById("address").value = ""
|
||||
return
|
||||
}
|
||||
|
||||
customBox.classList.add("hidden")
|
||||
|
||||
if (!value) return
|
||||
|
||||
const opt = this.options[this.selectedIndex]
|
||||
document.getElementById("location").value = value
|
||||
document.getElementById("address").value = opt.dataset.address
|
||||
})
|
||||
|
||||
document.getElementById("custom-location-value")?.addEventListener("input", e => {
|
||||
document.getElementById("location").value = e.target.value
|
||||
})
|
||||
|
||||
document.getElementById("custom-address")?.addEventListener("input", e => {
|
||||
document.getElementById("address").value = e.target.value
|
||||
})
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user