337 lines
14 KiB
HTML
337 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html class="x-admin-sm">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>银河锋锐工作室账户后台系统</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<link rel="stylesheet" href="/css/win10ui.css">
|
|
<link rel="stylesheet" href="/css/theme.css">
|
|
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<script type="text/javascript" src="/js/tables.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script>window.breadcrumbs = [{name: "首页", url: ""},{name: "用户", url: ""},{name: "签到"}];</script>
|
|
<script src="/js/address.bar.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #f2f2f2;
|
|
}
|
|
.main-container {
|
|
padding: 15px;
|
|
}
|
|
.signin-title {
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
padding-left: 10px;
|
|
border-left: 4px solid #1e9fff;
|
|
color: #333;
|
|
}
|
|
.content-wrapper {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
.signin-card-container {
|
|
flex: 0 0 350px;
|
|
}
|
|
.signin-list-container {
|
|
flex: 1;
|
|
min-width: 320px;
|
|
}
|
|
.signin-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
padding: 20px;
|
|
transition: all 0.3s;
|
|
}
|
|
.signin-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.signin-card-header {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.signin-btn {
|
|
width: 150px !important;
|
|
height: 150px !important;
|
|
border-radius: 50%;
|
|
font-size: 20px !important;
|
|
margin: 20px auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.countdown {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
color: #666;
|
|
}
|
|
.signin-status {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
font-size: 16px;
|
|
}
|
|
.record-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 15px;
|
|
padding: 20px;
|
|
transition: all 0.3s;
|
|
}
|
|
.record-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.record-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.record-avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin-right: 15px;
|
|
object-fit: cover;
|
|
}
|
|
.record-name {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.record-time {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-top: 5px;
|
|
}
|
|
.record-status {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
margin-left: auto;
|
|
}
|
|
.status-normal {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
.record-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
color: #888;
|
|
}
|
|
.record-week {
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
.record-empty {
|
|
text-align: center;
|
|
padding: 50px 0;
|
|
color: #999;
|
|
font-size: 16px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.record-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="main-container">
|
|
<div class="content-wrapper">
|
|
<!-- 签到区域 -->
|
|
<div class="signin-card-container">
|
|
<h2 class="signin-title">签到管理</h2>
|
|
<div class="signin-card">
|
|
<div class="signin-card-header">每日签到</div>
|
|
<div class="layui-card-body">
|
|
<form id="checkinForm" method="POST" action="/API/CheckIn.api">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div class="signin-status" id="signinStatus">今日未签到</div>
|
|
<div class="countdown" id="countdown"></div>
|
|
<button class="layui-btn layui-btn-warm signin-btn" id="signinBtn">点击签到</button>
|
|
<div class="layui-progress layui-progress-big" lay-filter="progress">
|
|
<div class="layui-progress-bar" lay-percent="0%"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 签到记录列表区域 -->
|
|
<div class="signin-list-container">
|
|
<h3 class="signin-title">今日签到记录</h3>
|
|
<div id="signin-list" class="record-grid">
|
|
<!-- 签到卡片将通过JS动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['jquery', 'layer', 'element', 'util'], function(){
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
var element = layui.element;
|
|
var util = layui.util;
|
|
|
|
// 页面加载时获取签到记录和签到状态
|
|
$(function() {
|
|
loadSigninRecords();
|
|
initSigninStatus();
|
|
});
|
|
|
|
// 加载签到记录
|
|
function loadSigninRecords() {
|
|
// 模拟数据请求
|
|
$.get('/API/GetNewCheckIn.api', function(res){
|
|
renderSigninList(res.data);
|
|
}, 'json');
|
|
}
|
|
|
|
// 渲染签到列表
|
|
function renderSigninList(data) {
|
|
var $container = $('#signin-list');
|
|
|
|
if (!data || data.length === 0) {
|
|
$container.html('<div class="record-empty">暂无签到记录</div>');
|
|
return;
|
|
}
|
|
|
|
var html = '';
|
|
data.forEach(function(item) {
|
|
var statusClass = 'status-normal';
|
|
var statusText = '准时签到';
|
|
html += `
|
|
<div class="record-card">
|
|
<div class="record-header">
|
|
<img src="${item.avatar}" class="record-avatar" onerror="this.src='https://randomuser.me/api/portraits/lego/1.jpg'">
|
|
<div>
|
|
<div class="record-name">${item.name}</div>
|
|
<div class="record-time">${formatFullTime(item.signin_time)}</div>
|
|
</div>
|
|
<span class="record-status ${statusClass}">${statusText}</span>
|
|
</div>
|
|
<div class="record-footer">
|
|
<span class="record-week">本周起始: ${item.firstweek_time}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
$container.html(html);
|
|
}
|
|
|
|
// 格式化完整时间显示（年月日时分秒）
|
|
function formatFullTime(timeStr) {
|
|
if (!timeStr) return '';
|
|
var time = new Date(timeStr);
|
|
|
|
var year = time.getFullYear();
|
|
var month = (time.getMonth() + 1).toString().padStart(2, '0');
|
|
var date = time.getDate().toString().padStart(2, '0');
|
|
var hours = time.getHours().toString().padStart(2, '0');
|
|
var minutes = time.getMinutes().toString().padStart(2, '0');
|
|
var seconds = time.getSeconds().toString().padStart(2, '0');
|
|
|
|
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
|
|
// 初始化签到状态
|
|
function initSigninStatus() {
|
|
$.ajax({
|
|
url: '/API/CheckInStatus.api',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: function(res) {
|
|
if(res.code === 0) {
|
|
if(res.checkin) {
|
|
$('#signinBtn').removeClass('layui-btn-warm').addClass('layui-btn-success')
|
|
.text('已签到');
|
|
$('#signinStatus').text('今日已签到').css('color', '#5FB878');
|
|
} else {
|
|
$('#signinStatus').text('今日未签到').css('color', '#FF5722');
|
|
}
|
|
updateCountdown();
|
|
}
|
|
},
|
|
error: function() {
|
|
layer.msg('获取签到状态失败', {icon: 5, time: 3000});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 倒计时更新
|
|
function updateCountdown() {
|
|
var now = new Date();
|
|
var tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
tomorrow.setHours(0, 0, 0, 0);
|
|
var diff = tomorrow - now;
|
|
var hours = Math.floor(diff / (1000 * 60 * 60));
|
|
var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
var seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
var percent = (1 - diff / 86400000) * 100;
|
|
element.progress('progress', percent + '%');
|
|
$('#countdown').html('下次签到: <span style="color:#FF5722">' + hours + '</span>小时<span style="color:#FF5722">' + minutes + '</span>分<span style="color:#FF5722">' + seconds + '</span>秒');
|
|
setTimeout(updateCountdown, 1000);
|
|
}
|
|
|
|
// 表单提交处理
|
|
$('#checkinForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
layer.msg('签到中...', {icon: 16, time: 3000, shade: 0.01});
|
|
|
|
$.ajax({
|
|
url: $(this).attr('action'),
|
|
type: 'POST',
|
|
data: $(this).serialize(),
|
|
dataType: 'json',
|
|
success: function(res) {
|
|
if(res.code === 0) {
|
|
var message = '签到成功';
|
|
if(res.GC) {
|
|
message += `，获得 ${res.GC} GC`;
|
|
}
|
|
layer.msg(message, {icon: 1, time: 3000});
|
|
$('#signinBtn').removeClass('layui-btn-warm').addClass('layui-btn-success')
|
|
.text('已签到');
|
|
$('#signinStatus').text('今日已签到').css('color', '#5FB878');
|
|
|
|
// 签到成功后刷新签到记录列表
|
|
loadSigninRecords();
|
|
} else {
|
|
layer.msg(res.msg || '签到失败', {icon: 5, time: 3000});
|
|
}
|
|
},
|
|
error: function() {
|
|
layer.msg('请求失败', {icon: 5, time: 3000});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|