431 lines
20 KiB
HTML
431 lines
20 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>
|
||
<style>
|
||
.task-card {
|
||
margin: 15px;
|
||
border: 1px solid #e6e6e6;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
transition: all 0.3s;
|
||
}
|
||
.task-card:hover {
|
||
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
.task-card .layui-card-header {
|
||
font-weight: bold;
|
||
padding: 10px 15px;
|
||
}
|
||
.task-card .layui-card-body {
|
||
padding: 15px;
|
||
}
|
||
.task-img {
|
||
width: 100%;
|
||
height: 180px;
|
||
object-fit: cover;
|
||
margin-bottom: 15px;
|
||
}
|
||
.task-desc {
|
||
margin-bottom: 10px;
|
||
color: #666;
|
||
height: 60px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.task-info {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
.task-info span {
|
||
margin-right: 15px;
|
||
display: inline-block;
|
||
margin-bottom: 5px;
|
||
}
|
||
.task-reward {
|
||
color: #FF5722;
|
||
font-weight: bold;
|
||
}
|
||
.task-status {
|
||
float: right;
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
.task-actions {
|
||
text-align: right;
|
||
margin-top: 15px;
|
||
}
|
||
.task-actions .layui-btn {
|
||
margin-left: 10px;
|
||
}
|
||
.task-lock {
|
||
color: #1E9FFF;
|
||
}
|
||
.task-filter {
|
||
margin: 15px;
|
||
padding: 10px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
.task-filter .layui-form-item {
|
||
margin-bottom: 0;
|
||
}
|
||
.task-filter .layui-input-block {
|
||
margin-left: 80px;
|
||
}
|
||
.task-empty {
|
||
text-align: center;
|
||
padding: 50px 0;
|
||
color: #999;
|
||
}
|
||
</style>
|
||
<!--[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]-->
|
||
</head>
|
||
<body>
|
||
<div class="x-nav">
|
||
<span class="layui-breadcrumb">
|
||
<a>首页</a>
|
||
<a>工作室-工作组</a>
|
||
<a><cite>任务市场</cite></a>
|
||
</span>
|
||
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
|
||
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 任务筛选 -->
|
||
<div class="task-filter">
|
||
<form class="layui-form" action="" id="taskFilterForm">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">任务状态</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="status" value="" title="全部" checked>
|
||
<input type="radio" name="status" value="open" title="可接单">
|
||
<input type="radio" name="status" value="locked" title="已接单">
|
||
<input type="radio" name="status" value="completed" title="已完成">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">关键词</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="keyword" placeholder="请输入关键词" autocomplete="off" class="layui-input" id="keywordInput">
|
||
</div>
|
||
<button class="layui-btn" lay-submit lay-filter="taskFilter" id="searchButton">搜索</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 任务列表 -->
|
||
<div class="layui-row layui-col-space15" id="taskList">
|
||
<!-- 任务卡片将通过JavaScript动态生成 -->
|
||
</div>
|
||
|
||
<!-- 查看任务详情的弹窗内容 -->
|
||
<div id="taskDetailModal" style="display: none;">
|
||
<div class="layui-form" lay-filter="taskDetailForm">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">任务标题</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="title" readonly class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">任务描述</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="description" readonly class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">发起者</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="creator" readonly class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">截止时间</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="deadline" readonly class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">奖励</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="reward" readonly class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">接单人</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="locker" readonly class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">任务状态</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="statusText" readonly class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
layui.use(['form', 'layer', 'jquery'], function(){
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var $ = layui.jquery;
|
||
|
||
// 模拟任务数据
|
||
var tasks = [
|
||
{
|
||
id: 1,
|
||
title: "设计APP图标",
|
||
description: "为我们的新应用设计一套简洁现代的图标，包括启动图标和主要功能图标。要求风格统一，有创意，符合当代设计趋势。",
|
||
image: "https://picsum.photos/400/200?random=1",
|
||
creator: "张三",
|
||
deadline: "2025-07-15",
|
||
reward: "¥2000",
|
||
locker: "",
|
||
status: "open",
|
||
createTime: "2025-07-01"
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "开发微信小程序",
|
||
description: "开发一个简单的微信小程序，实现商品展示、购物车和下单功能。需要与现有后端API对接，要求代码规范，界面美观。",
|
||
image: "https://picsum.photos/400/200?random=2",
|
||
creator: "李四",
|
||
deadline: "2025-07-30",
|
||
reward: "¥5000",
|
||
locker: "王五",
|
||
status: "locked",
|
||
createTime: "2025-06-28"
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "撰写产品说明书",
|
||
description: "为我们的新产品撰写详细的使用说明书，包括功能介绍、操作指南、故障排除等内容。要求语言简洁明了，图文并茂。",
|
||
image: "https://picsum.photos/400/200?random=3",
|
||
creator: "赵六",
|
||
deadline: "2025-07-10",
|
||
reward: "¥800",
|
||
locker: "孙七",
|
||
status: "completed",
|
||
createTime: "2025-06-30"
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "制作产品宣传视频",
|
||
description: "制作一个1-2分钟的产品宣传视频，展示产品特点和使用场景。要求画面精美，剪辑流畅，有吸引力。",
|
||
image: "https://picsum.photos/400/200?random=4",
|
||
creator: "周八",
|
||
deadline: "2025-08-05",
|
||
reward: "¥3500",
|
||
locker: "",
|
||
status: "open",
|
||
createTime: "2025-07-02"
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "优化网站SEO",
|
||
description: "对我们的企业网站进行全面的SEO优化，包括关键词研究、页面优化、链接建设等。要求提高网站在搜索引擎中的排名。",
|
||
image: "https://picsum.photos/400/200?random=5",
|
||
creator: "吴九",
|
||
deadline: "2025-07-25",
|
||
reward: "¥4000",
|
||
locker: "郑十",
|
||
status: "locked",
|
||
createTime: "2025-06-25"
|
||
}
|
||
];
|
||
|
||
// 渲染任务列表
|
||
function renderTasks(filteredTasks) {
|
||
var taskList = $('#taskList');
|
||
taskList.empty();
|
||
|
||
if (filteredTasks.length === 0) {
|
||
taskList.append('<div class="task-empty">暂无符合条件的任务</div>');
|
||
return;
|
||
}
|
||
|
||
filteredTasks.forEach(function(task) {
|
||
var statusText = '';
|
||
var statusClass = '';
|
||
var canTake = false;
|
||
|
||
switch(task.status) {
|
||
case 'open':
|
||
statusText = '可接单';
|
||
statusClass = 'layui-bg-green';
|
||
canTake = true;
|
||
break;
|
||
case 'locked':
|
||
statusText = '已接单';
|
||
statusClass = 'layui-bg-blue';
|
||
break;
|
||
case 'completed':
|
||
statusText = '已完成';
|
||
statusClass = 'layui-bg-gray';
|
||
break;
|
||
}
|
||
|
||
var taskHtml = `
|
||
<div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
|
||
<div class="task-card layui-card">
|
||
<div class="layui-card-header">
|
||
${task.title}
|
||
<span class="layui-badge ${statusClass} task-status">${statusText}</span>
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<img src="${task.image}" alt="${task.title}配图" class="task-img">
|
||
<div class="task-desc">${task.description}</div>
|
||
<div class="task-info">
|
||
<span><i class="layui-icon layui-icon-user"></i> 发起者：${task.creator}</span>
|
||
<span><i class="layui-icon layui-icon-time"></i> 截止：${task.deadline}</span>
|
||
</div>
|
||
<div class="task-info">
|
||
<span class="task-reward"><i class="layui-icon layui-icon-money"></i> 奖励：${task.reward}</span>
|
||
${task.locker ? `<span class="task-lock"><i class="layui-icon layui-icon-username"></i> 接单人：${task.locker}</span>` : ''}
|
||
</div>
|
||
<div class="task-actions">
|
||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${task.id}" onclick="viewTask(${task.id})">
|
||
<i class="layui-icon layui-icon-eye"></i> 查看
|
||
</button>
|
||
${canTake ? `
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm" data-id="${task.id}" onclick="takeTask(${task.id})">
|
||
<i class="layui-icon layui-icon-add-circle"></i> 我来做
|
||
</button>` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
|
||
taskList.append(taskHtml);
|
||
});
|
||
}
|
||
|
||
// 任务筛选函数
|
||
function filterTasks() {
|
||
var status = $('input[name="status"]:checked').val();
|
||
var keyword = $('#keywordInput').val().toLowerCase();
|
||
|
||
var filtered = tasks.filter(function(task) {
|
||
var matchStatus = !status || task.status === status;
|
||
var matchKeyword = !keyword ||
|
||
task.title.toLowerCase().includes(keyword) ||
|
||
task.description.toLowerCase().includes(keyword) ||
|
||
task.creator.toLowerCase().includes(keyword);
|
||
|
||
return matchStatus && matchKeyword;
|
||
});
|
||
|
||
renderTasks(filtered);
|
||
}
|
||
|
||
// 初始渲染任务
|
||
renderTasks(tasks);
|
||
|
||
// 查看任务详情
|
||
window.viewTask = function(id) {
|
||
var task = tasks.find(function(t) {
|
||
return t.id === id;
|
||
});
|
||
|
||
if (task) {
|
||
var statusText = '';
|
||
switch(task.status) {
|
||
case 'open':
|
||
statusText = '可接单';
|
||
break;
|
||
case 'locked':
|
||
statusText = '已接单（' + task.locker + '）';
|
||
break;
|
||
case 'completed':
|
||
statusText = '已完成（' + task.locker + '）';
|
||
break;
|
||
}
|
||
|
||
form.val('taskDetailForm', {
|
||
"title": task.title,
|
||
"description": task.description,
|
||
"creator": task.creator,
|
||
"deadline": task.deadline,
|
||
"reward": task.reward,
|
||
"locker": task.locker || "无",
|
||
"statusText": statusText
|
||
});
|
||
|
||
layer.open({
|
||
type: 1,
|
||
title: '任务详情',
|
||
content: $('#taskDetailModal'),
|
||
area: ['600px', '500px'],
|
||
btn: ['关闭'],
|
||
btn1: function(index) {
|
||
layer.close(index);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
// 接单操作
|
||
window.takeTask = function(id) {
|
||
var task = tasks.find(function(t) {
|
||
return t.id === id;
|
||
});
|
||
|
||
if (task && task.status === 'open') {
|
||
layer.confirm('确定要接下这个任务吗？', {
|
||
title: '接单确认',
|
||
btn: ['确认', '取消']
|
||
}, function() {
|
||
// 模拟接单成功
|
||
task.status = 'locked';
|
||
task.locker = '当前用户'; // 实际应用中应替换为当前登录用户
|
||
|
||
// 更新任务列表
|
||
renderTasks(tasks);
|
||
|
||
layer.msg('接单成功！', {icon: 1});
|
||
});
|
||
}
|
||
};
|
||
|
||
// 根据任务数量决定搜索方式
|
||
if (tasks.length < 50) {
|
||
// 任务数少于50，启用实时搜索
|
||
$('#keywordInput').on('input', filterTasks);
|
||
|
||
// 监听状态单选按钮变化
|
||
form.on('radio(status)', filterTasks);
|
||
|
||
// 隐藏搜索按钮
|
||
$('#searchButton').hide();
|
||
} else {
|
||
// 任务数大于等于50，使用传统搜索
|
||
form.on('submit(taskFilter)', function(data){
|
||
filterTasks();
|
||
return false;
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |