Files
SMANAGE/backup/GERP old/Tasks/Tasks.html
T

1006 lines
49 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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">
<link rel="stylesheet" href="/css/tasks.css">
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<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>
.layui-table-testcss .layui-table-header,
.layui-table-testcss thead tr{background-color: #F8FCF9; color: #16BAAA}
.layui-form-testcss > div{margin-bottom: 6px;}
/* 补充必要的样式 */
.container {max-width: 1200px; margin: 20px auto; padding: 0 20px;}
.page-header {margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee;}
.activity-card {background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.activity-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.activity-title {font-size: 18px; font-weight: bold;}
.activity-points {font-size: 20px; font-weight: bold; color: #ff6b6b;}
.progress-container {margin-bottom: 20px;}
.treasure-boxes {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;}
.treasure-box {text-align: center; width: 15%; min-width: 80px;}
.treasure-icon {width: 50px; height: 50px; line-height: 50px; border-radius: 50%; margin: 0 auto 5px; font-size: 20px;}
.treasure-icon.unlocked {background: #e8f5e9; color: #4caf50; cursor: pointer;}
.treasure-icon.locked {background: #f5f5f5; color: #9e9e9e;}
.treasure-icon.received {background: #fff3e0; color: #ff9800;}
.treasure-label {font-size: 12px; color: #666;}
.task-tabs {display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}
.task-tab {padding: 10px 20px; background: #f5f5f5; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 5px;}
.task-tab.active {background: #16BAAA; color: white;}
.badge {background: #ff6b6b; color: white; border-radius: 10px; padding: 2px 8px; font-size: 12px; margin-left: 5px;}
.task-list {display: flex; flex-direction: column; gap: 10px;}
.task-item {background: white; border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 15px; box-shadow: 0 1px 5px rgba(0,0,0,0.1); cursor: pointer;}
.task-item.completed {opacity: 0.8; background: #f8f8f8;}
.task-icon {width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px;}
.task-content {flex: 1;}
.task-title {font-weight: bold; margin-bottom: 5px;}
.task-desc {font-size: 12px; color: #666; margin-bottom: 8px;}
.task-progress {display: flex; align-items: center; gap: 10px;}
.task-progress-bar {flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden;}
.task-progress-fill {height: 100%; background: #16BAAA; border-radius: 4px;}
.task-progress-text {font-size: 12px; color: #666; min-width: 60px; text-align: right;}
.task-reward {display: flex; gap: 10px; margin-right: 15px;}
.reward-item {display: flex; align-items: center; gap: 3px; font-size: 12px;}
.reward-icon {color: #ffd700;}
.task-button {padding: 6px 15px; border-radius: 20px; border: none; cursor: pointer; font-size: 12px;}
.task-button.done {background: #eee; color: #666; cursor: not-allowed;}
.task-button.receive {background: #ff6b6b; color: white;}
.task-button.go {background: #16BAAA; color: white;}
/* 弹窗样式 */
.reward-popup, .task-detail-popup, .preview-popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999;}
.reward-content, .task-detail-content, .preview-content {background: white; border-radius: 10px; padding: 20px; width: 90%; max-width: 400px;}
.reward-header, .preview-header {text-align: center; margin-bottom: 20px;}
.reward-icon-large {font-size: 40px; color: #ff6b6b; margin-bottom: 10px;}
.reward-list, .preview-rewards {margin-bottom: 20px;}
.reward-item-detail {display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee;}
.reward-item-name {display: flex; align-items: center; gap: 8px;}
.reward-item-amount {font-weight: bold; color: #ff6b6b;}
.task-detail-header {display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee;}
.task-detail-icon {width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px;}
.task-detail-title h3 {margin: 0;}
.task-detail-title p {margin: 5px 0 0 0; font-size: 12px; color: #666;}
.task-detail-section {margin-bottom: 15px;}
.task-detail-section h4 {margin: 0 0 10px 0; display: flex; align-items: center; gap: 8px; font-size: 16px;}
.task-detail-description {line-height: 1.6; color: #666;}
.task-detail-progress {display: flex; align-items: center; gap: 10px;}
.task-detail-progress-bar {flex: 1; height: 10px; background: #eee; border-radius: 5px; overflow: hidden;}
.task-detail-progress-fill {height: 100%; background: #16BAAA; border-radius: 5px;}
.task-detail-rewards {display: flex; flex-direction: column; gap: 10px;}
.task-detail-reward-item {display: flex; align-items: center; gap: 10px; padding: 8px; background: #f5f5f5; border-radius: 6px;}
.task-detail-reward-icon {font-size: 18px;}
.task-detail-reward-name {flex: 1;}
.task-detail-reward-amount {font-weight: bold; color: #ff6b6b;}
.preview-requirement {text-align: center; margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 6px; color: #666;}
.reward-confirm {width: 100%; padding: 10px; background: #16BAAA; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;}
</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="container">
<!-- 页面标题 -->
<div class="page-header">
<h1><i class="fas fa-tasks"></i> 任务中心</h1>
<p>完成任务,赢取丰厚奖励</p>
</div>
<!-- 活跃度卡片 -->
<div class="activity-card">
<div class="activity-header">
<div class="activity-title">
<i class="fas fa-fire" style="color: #ff6b6b;"></i> 今日活跃度
</div>
<div class="activity-points">
<span id="currentPoints">125</span> / 300
</div>
</div>
<!-- 进度条 -->
<div class="progress-container">
<div class="layui-progress" lay-showpercent="true">
<div class="layui-progress-bar" lay-percent="42%"></div>
</div>
</div>
<!-- 宝箱 -->
<div class="treasure-boxes">
<div class="treasure-box" data-points="50">
<div class="treasure-icon unlocked">
<i class="fas fa-gift"></i>
</div>
<div class="treasure-label">50活跃度</div>
</div>
<div class="treasure-box" data-points="100">
<div class="treasure-icon unlocked">
<i class="fas fa-gift"></i>
</div>
<div class="treasure-label">100活跃度</div>
</div>
<div class="treasure-box" data-points="150">
<div class="treasure-icon locked">
<i class="fas fa-lock"></i>
</div>
<div class="treasure-label">150活跃度</div>
</div>
<div class="treasure-box" data-points="200">
<div class="treasure-icon locked">
<i class="fas fa-lock"></i>
</div>
<div class="treasure-label">200活跃度</div>
</div>
<div class="treasure-box" data-points="250">
<div class="treasure-icon locked">
<i class="fas fa-lock"></i>
</div>
<div class="treasure-label">250活跃度</div>
</div>
<div class="treasure-box" data-points="300">
<div class="treasure-icon locked">
<i class="fas fa-trophy"></i>
</div>
<div class="treasure-label">300活跃度</div>
</div>
</div>
</div>
<!-- 任务分类标签 -->
<div class="task-tabs">
<div class="task-tab active" data-category="required">
<i class="fas fa-star"></i> 必做任务
<span class="badge">3</span>
</div>
<div class="task-tab" data-category="daily">
<i class="fas fa-calendar-day"></i> 日常任务
<span class="badge">5</span>
</div>
<div class="task-tab" data-category="optional">
<i class="fas fa-check-square"></i> 选做任务
<span class="badge">4</span>
</div>
<div class="task-tab" data-category="other">
<i class="fas fa-ellipsis-h"></i> 其他任务
<span class="badge">2</span>
</div>
</div>
<!-- 任务列表 -->
<div class="task-list" id="taskList">
<!-- 任务项将通过JavaScript动态生成 -->
</div>
</div>
<!-- 奖励弹窗 -->
<div class="reward-popup" id="rewardPopup">
<div class="reward-content">
<div class="reward-header">
<div class="reward-icon-large">
<i class="fas fa-gift"></i>
</div>
<h2 id="rewardTitle">恭喜获得奖励!</h2>
</div>
<div class="reward-list" id="rewardList">
<!-- 奖励内容动态生成 -->
</div>
<button class="reward-confirm" onclick="closeRewardPopup()">确定</button>
</div>
</div>
<!-- 任务详情弹窗 -->
<div class="task-detail-popup" id="taskDetailPopup">
<div class="task-detail-content">
<div class="task-detail-header">
<div class="task-detail-icon" id="detailIcon">
<i class="fas fa-tasks"></i>
</div>
<div class="task-detail-title">
<h3 id="detailTitle">任务标题</h3>
<p id="detailCategory">任务分类</p>
</div>
</div>
<div class="task-detail-section">
<h4><i class="fas fa-info-circle"></i> 任务描述</h4>
<div class="task-detail-description" id="detailDescription">
任务详细描述内容
</div>
</div>
<div class="task-detail-section">
<h4><i class="fas fa-chart-line"></i> 任务进度</h4>
<div class="task-detail-progress">
<div id="detailProgressText">0/0</div>
<div class="task-detail-progress-bar">
<div class="task-detail-progress-fill" id="detailProgressBar"></div>
</div>
</div>
</div>
<div class="task-detail-section">
<h4><i class="fas fa-gift"></i> 任务奖励</h4>
<div class="task-detail-rewards" id="detailRewards">
<!-- 奖励内容动态生成 -->
</div>
</div>
<button class="reward-confirm" onclick="closeTaskDetailPopup()">关闭</button>
</div>
</div>
<!-- 宝箱预览弹窗 -->
<div class="preview-popup" id="previewPopup">
<div class="preview-content">
<div class="preview-header">
<div class="preview-icon">
<i class="fas fa-lock"></i>
</div>
<h2 id="previewTitle">宝箱预览</h2>
</div>
<div class="preview-requirement" id="previewRequirement">
需要 150 活跃度解锁
</div>
<div class="preview-rewards">
<h3>包含以下奖励</h3>
<div id="previewRewardList">
<!-- 奖励内容动态生成 -->
</div>
</div>
<button class="reward-confirm" onclick="closePreviewPopup()">知道了</button>
</div>
</div>
<script src="https://unpkg.com/layui@2.9.6/dist/layui.js"></script>
<script>
// 宝箱奖励数据
const treasureRewards = {
50: {
title: "50活跃度宝箱",
rewards: [
{ name: "金币", icon: "fa-coins", amount: 500, color: "#ffd700" },
{ name: "经验", icon: "fa-star", amount: 200, color: "#667eea" },
{ name: "体力药水", icon: "fa-flask", amount: 2, color: "#e74c3c" }
]
},
100: {
title: "100活跃度宝箱",
rewards: [
{ name: "金币", icon: "fa-coins", amount: 1000, color: "#ffd700" },
{ name: "经验", icon: "fa-star", amount: 500, color: "#667eea" },
{ name: "强化石", icon: "fa-gem", amount: 5, color: "#9b59b6" }
]
},
150: {
title: "150活跃度宝箱",
rewards: [
{ name: "金币", icon: "fa-coins", amount: 1500, color: "#ffd700" },
{ name: "钻石", icon: "fa-diamond", amount: 50, color: "#3498db" },
{ name: "稀有道具", icon: "fa-scroll", amount: 1, color: "#e67e22" }
]
},
200: {
title: "200活跃度宝箱",
rewards: [
{ name: "金币", icon: "fa-coins", amount: 2000, color: "#ffd700" },
{ name: "钻石", icon: "fa-diamond", amount: 100, color: "#3498db" },
{ name: "史诗装备箱", icon: "fa-treasure-chest", amount: 1, color: "#8e44ad" }
]
},
250: {
title: "250活跃度宝箱",
rewards: [
{ name: "金币", icon: "fa-coins", amount: 3000, color: "#ffd700" },
{ name: "钻石", icon: "fa-diamond", amount: 200, color: "#3498db" },
{ name: "传说碎片", icon: "fa-crown", amount: 5, color: "#f39c12" }
]
},
300: {
title: "300活跃度终极宝箱",
rewards: [
{ name: "金币", icon: "fa-coins", amount: 5000, color: "#ffd700" },
{ name: "钻石", icon: "fa-diamond", amount: 500, color: "#3498db" },
{ name: "SSR角色", icon: "fa-user-ninja", amount: 1, color: "#e74c3c" },
{ name: "限定皮肤", icon: "fa-palette", amount: 1, color: "#16a085" }
]
}
};
// 任务数据JSON - 修改后的结构
const tasksData = {
required: [
{
id: 1,
title: "每日签到",
description: "每日登录游戏即可完成签到,连续签到可获得额外奖励。签到是获取基础资源的重要途径,建议每天都要完成哦!",
icon: "fa-calendar-check",
iconColor: "#ff6b6b",
progress: 1,
maxProgress: 1,
points: 10,
coins: 100, // 单独存储金币
exp: 50, // 单独存储经验
rewards: [], // 道具列表(和宝箱格式一致)
status: "completed",
category: "必做任务"
},
{
id: 2,
title: "完成新手引导",
description: "跟随游戏指引完成新手教程,熟悉游戏的基本操作和玩法。新手引导将帮助你快速上手游戏,了解各种功能的使用方法。",
icon: "fa-graduation-cap",
iconColor: "#4ecdc4",
progress: 3,
maxProgress: 5,
points: 20,
coins: 200,
exp: 100,
rewards: [ // 道具列表
{ name: "新手礼包", icon: "fa-gift", amount: 1, color: "#ff6b6b" }
],
status: "progress",
category: "必做任务"
},
{
id: 3,
title: "首次充值",
description: "进行首次充值,任意金额即可完成。充值将获得钻石等珍贵资源,同时解锁更多游戏功能和特权。",
icon: "fa-coins",
iconColor: "#ffd700",
progress: 0,
maxProgress: 1,
points: 50,
coins: 500,
exp: 0,
rewards: [
{ name: "钻石", icon: "fa-diamond", amount: 100, color: "#3498db" },
{ name: "VIP体验卡", icon: "fa-id-card", amount: 1, color: "#9b59b6" }
],
status: "pending",
category: "必做任务"
}
],
daily: [
{
id: 4,
title: "登录游戏",
description: "每日登录游戏即可获得活跃度。保持活跃可以解锁更多宝箱奖励,不要忘记每天都来登录哦!",
icon: "fa-sign-in-alt",
iconColor: "#667eea",
progress: 1,
maxProgress: 1,
points: 5,
coins: 50,
exp: 20,
rewards: [],
status: "completed",
category: "日常任务"
},
{
id: 5,
title: "完成3场对战",
description: "参与任意模式的对战3次。对战是提升实力和获取经验的重要方式,通过对战可以检验你的战斗策略。",
icon: "fa-gamepad",
iconColor: "#f39c12",
progress: 2,
maxProgress: 3,
points: 15,
coins: 150,
exp: 80,
rewards: [
{ name: "竞技场门票", icon: "fa-ticket-alt", amount: 1, color: "#e74c3c" }
],
status: "progress",
category: "日常任务"
},
{
id: 6,
title: "分享游戏",
description: "将游戏分享给好友或社交媒体。分享可以让更多人了解这款游戏,同时你也能获得丰厚奖励。",
icon: "fa-share-alt",
iconColor: "#00b894",
progress: 0,
maxProgress: 1,
points: 10,
coins: 100,
exp: 50,
rewards: [
{ name: "钻石", icon: "fa-diamond", amount: 20, color: "#3498db" }
],
status: "pending",
category: "日常任务"
},
{
id: 7,
title: "观看广告",
description: "观看3个广告视频。观看广告可以获得额外奖励,也是支持游戏发展的重要方式。",
icon: "fa-tv",
iconColor: "#e74c3c",
progress: 1,
maxProgress: 3,
points: 10,
coins: 80,
exp: 40,
rewards: [],
status: "progress",
category: "日常任务"
},
{
id: 8,
title: "参与活动",
description: "完成今日的限时活动。活动任务通常奖励丰厚,是获取稀有道具的好机会。",
icon: "fa-calendar-alt",
iconColor: "#9b59b6",
progress: 0,
maxProgress: 1,
points: 25,
coins: 250,
exp: 120,
rewards: [
{ name: "活动纪念币", icon: "fa-coins", amount: 1, color: "#f39c12" }
],
status: "pending",
category: "日常任务"
}
],
optional: [
{
id: 9,
title: "升级装备",
description: "将任意装备强化到+5等级。装备强化可以大幅提升角色属性,是提升战斗力的关键途径。",
icon: "fa-hammer",
iconColor: "#34495e",
progress: 2,
maxProgress: 5,
points: 20,
coins: 200,
exp: 0,
rewards: [
{ name: "强化石", icon: "fa-gem", amount: 5, color: "#9b59b6" }
],
status: "progress",
category: "选做任务"
},
{
id: 10,
title: "加入公会",
description: "找到一个合适的公会并加入。公会可以提供额外的福利和社交功能,与好友一起游戏更有趣。",
icon: "fa-users",
iconColor: "#16a085",
progress: 0,
maxProgress: 1,
points: 15,
coins: 150,
exp: 80,
rewards: [
{ name: "公会礼包", icon: "fa-gift", amount: 1, color: "#2ecc71" }
],
status: "pending",
category: "选做任务"
},
{
id: 11,
title: "完成副本",
description: "通关普通难度副本3次。副本是获取装备和材料的主要途径,难度越高奖励越丰厚。",
icon: "fa-dungeon",
iconColor: "#c0392b",
progress: 1,
maxProgress: 3,
points: 30,
coins: 300,
exp: 150,
rewards: [
{ name: "副本钥匙", icon: "fa-key", amount: 1, color: "#3498db" }
],
status: "progress",
category: "选做任务"
},
{
id: 12,
title: "收集成就",
description: "解锁5个不同的成就。成就是记录你游戏历程的方式,完成成就还能获得特殊奖励。",
icon: "fa-medal",
iconColor: "#f39c12",
progress: 3,
maxProgress: 5,
points: 25,
coins: 250,
exp: 0,
rewards: [
{ name: "钻石", icon: "fa-diamond", amount: 50, color: "#3498db" },
{ name: "成就礼包", icon: "fa-gift", amount: 1, color: "#e74c3c" }
],
status: "progress",
category: "选做任务"
}
],
other: [
{
id: 13,
title: "绑定手机",
description: "绑定手机号以保障账户安全。绑定后可以找回密码,还能获得额外的安全奖励。",
icon: "fa-mobile-alt",
iconColor: "#2ecc71",
progress: 0,
maxProgress: 1,
points: 10,
coins: 100,
exp: 0,
rewards: [
{ name: "安全礼包", icon: "fa-shield-alt", amount: 1, color: "#16a085" }
],
status: "pending",
category: "其他任务"
},
{
id: 14,
title: "完善资料",
description: "填写个人资料信息,包括昵称、头像等。完善的资料让其他玩家更好地认识你。",
icon: "fa-user-edit",
iconColor: "#3498db",
progress: 1,
maxProgress: 1,
points: 5,
coins: 50,
exp: 30,
rewards: [],
status: "completed",
category: "其他任务"
}
]
};
// 当前活跃度
let currentActivity = 125;
let receivedTreasures = new Set(); // 记录已领取的宝箱
// 初始化layui
layui.use(['element', 'layer'], function(){
var element = layui.element;
// 初始化进度条
element.render('progress');
// 更新宝箱状态
updateTreasureBoxes();
// 渲染任务列表
renderTasks('required');
// 任务标签切换
document.querySelectorAll('.task-tab').forEach(tab => {
tab.addEventListener('click', function() {
// 更新激活状态
document.querySelectorAll('.task-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
// 渲染对应分类的任务
const category = this.dataset.category;
renderTasks(category);
});
});
// 宝箱点击事件
document.querySelectorAll('.treasure-box').forEach(box => {
box.addEventListener('click', function(e) {
e.stopPropagation();
const requiredPoints = parseInt(this.dataset.points);
const icon = this.querySelector('.treasure-icon');
if (icon.classList.contains('unlocked') && !icon.classList.contains('received')) {
// 显示奖励弹窗
showTreasureReward(requiredPoints);
} else if (icon.classList.contains('locked')) {
// 显示预览弹窗
showTreasurePreview(requiredPoints);
} else if (icon.classList.contains('received')) {
layui.layer.msg('已经领取过了', {icon: 3});
}
});
});
});
// 更新宝箱状态
function updateTreasureBoxes() {
document.querySelectorAll('.treasure-box').forEach(box => {
const requiredPoints = parseInt(box.dataset.points);
const icon = box.querySelector('.treasure-icon');
if (currentActivity >= requiredPoints) {
icon.classList.remove('locked');
icon.classList.add('unlocked');
icon.innerHTML = '<i class="fas fa-gift"></i>';
} else {
icon.classList.remove('unlocked', 'received');
icon.classList.add('locked');
icon.innerHTML = '<i class="fas fa-lock"></i>';
}
// 特殊处理300活跃度的宝箱
if (requiredPoints === 300 && currentActivity >= 300) {
icon.innerHTML = '<i class="fas fa-trophy"></i>';
}
// 检查是否已领取
if (receivedTreasures.has(requiredPoints)) {
icon.classList.remove('unlocked');
icon.classList.add('received');
}
});
}
// 渲染任务列表
function renderTasks(category) {
const taskList = document.getElementById('taskList');
const tasks = tasksData[category] || [];
taskList.innerHTML = '';
tasks.forEach(task => {
const taskItem = createTaskElement(task);
taskList.appendChild(taskItem);
});
}
// 创建任务元素 - 适配新的奖励结构
function createTaskElement(task) {
const div = document.createElement('div');
div.className = `task-item ${task.status === 'completed' ? 'completed' : ''}`;
div.onclick = function(e) {
if (!e.target.classList.contains('task-button')) {
showTaskDetail(task);
}
};
const progressPercent = Math.round((task.progress / task.maxProgress) * 100);
// 构建奖励HTML - 适配新结构
let rewardHtml = '';
// 金币
if (task.coins > 0) {
rewardHtml += `<div class="reward-item">
<i class="fas fa-coins reward-icon"></i>
<span>${task.coins}</span>
</div>`;
}
// 经验
if (task.exp > 0) {
rewardHtml += `<div class="reward-item">
<i class="fas fa-star reward-icon" style="color: #667eea;"></i>
<span>${task.exp}经验</span>
</div>`;
}
// 道具
task.rewards.forEach(item => {
rewardHtml += `<div class="reward-item">
<i class="fas ${item.icon} reward-icon" style="color: ${item.color || '#ff6b6b'};"></i>
<span>${item.amount}${item.name}</span>
</div>`;
});
// 确定按钮状态
let buttonHtml = '';
if (task.status === 'completed') {
buttonHtml = '<button class="task-button done">已完成</button>';
} else if (task.progress >= task.maxProgress) {
buttonHtml = '<button class="task-button receive" onclick="receiveTaskReward(event, ' + task.id + ')">领取奖励</button>';
} else {
buttonHtml = '<button class="task-button go" onclick="goToTask(event, ' + task.id + ')">前往</button>';
}
div.innerHTML = `
<div class="task-icon" style="background: ${task.iconColor}20; color: ${task.iconColor};">
<i class="fas ${task.icon}"></i>
</div>
<div class="task-content">
<div class="task-title">${task.title}</div>
<div class="task-desc">${task.description.substring(0, 30)}...</div>
<div class="task-progress">
<div class="task-progress-bar">
<div class="task-progress-fill" style="width: ${progressPercent}%"></div>
</div>
<div class="task-progress-text">${task.progress}/${task.maxProgress}</div>
</div>
</div>
<div class="task-reward">
${rewardHtml}
</div>
${buttonHtml}
`;
return div;
}
// 显示任务详情 - 适配新的奖励结构
function showTaskDetail(task) {
document.getElementById('detailIcon').style.background = task.iconColor + '20';
document.getElementById('detailIcon').style.color = task.iconColor;
document.getElementById('detailIcon').innerHTML = `<i class="fas ${task.icon}"></i>`;
document.getElementById('detailTitle').textContent = task.title;
document.getElementById('detailCategory').textContent = task.category;
document.getElementById('detailDescription').textContent = task.description;
const progressPercent = (task.progress / task.maxProgress) * 100;
document.getElementById('detailProgressText').textContent = `${task.progress}/${task.maxProgress}`;
document.getElementById('detailProgressBar').style.width = `${progressPercent}%`;
// 构建奖励HTML - 适配新结构
let rewardHtml = '';
// 金币
if (task.coins > 0) {
rewardHtml += `
<div class="task-detail-reward-item">
<div class="task-detail-reward-icon" style="color: #ffd700;">
<i class="fas fa-coins"></i>
</div>
<div class="task-detail-reward-name">金币</div>
<div class="task-detail-reward-amount">×${task.coins}</div>
</div>
`;
}
// 经验
if (task.exp > 0) {
rewardHtml += `
<div class="task-detail-reward-item">
<div class="task-detail-reward-icon" style="color: #667eea;">
<i class="fas fa-star"></i>
</div>
<div class="task-detail-reward-name">经验</div>
<div class="task-detail-reward-amount">×${task.exp}</div>
</div>
`;
}
// 道具
task.rewards.forEach(item => {
rewardHtml += `
<div class="task-detail-reward-item">
<div class="task-detail-reward-icon" style="color: ${item.color || '#ff6b6b'};">
<i class="fas ${item.icon}"></i>
</div>
<div class="task-detail-reward-name">${item.name}</div>
<div class="task-detail-reward-amount">×${item.amount}</div>
</div>
`;
});
document.getElementById('detailRewards').innerHTML = rewardHtml;
document.getElementById('taskDetailPopup').style.display = 'flex';
}
// 显示宝箱预览
function showTreasurePreview(points) {
const reward = treasureRewards[points];
if (!reward) return;
document.getElementById('previewTitle').textContent = reward.title;
document.getElementById('previewRequirement').textContent = `需要 ${points} 活跃度解锁(当前:${currentActivity})`;
let rewardHtml = '';
reward.rewards.forEach(item => {
rewardHtml += `
<div class="reward-item-detail">
<div class="reward-item-name">
<i class="fas ${item.icon}" style="color: ${item.color};"></i>
<span>${item.name}</span>
</div>
<div class="reward-item-amount">×${item.amount}</div>
</div>
`;
});
document.getElementById('previewRewardList').innerHTML = rewardHtml;
document.getElementById('previewPopup').style.display = 'flex';
}
// 前往任务
function goToTask(event, taskId) {
event.stopPropagation();
layui.layer.msg('正在前往任务...', {icon: 16, time: 1000});
// 模拟任务进度更新
setTimeout(() => {
const taskItem = event.target.closest('.task-item');
const progressText = taskItem.querySelector('.task-progress-text');
const progressBar = taskItem.querySelector('.task-progress-fill');
const [current, max] = progressText.textContent.split('/').map(Number);
if (current < max) {
const newProgress = Math.min(current + 1, max);
progressText.textContent = `${newProgress}/${max}`;
const progressPercent = Math.round((newProgress / max) * 100);
progressBar.style.width = `${progressPercent}%`;
// 更新活跃度
updateActivity(5);
if (newProgress >= max) {
event.target.className = 'task-button receive';
event.target.textContent = '领取奖励';
event.target.setAttribute('onclick', `receiveTaskReward(event, ${taskId})`);
}
}
}, 1500);
}
// 领取任务奖励
function receiveTaskReward(event, taskId) {
event.stopPropagation();
// 查找任务数据
let taskData = null;
for (let category in tasksData) {
const task = tasksData[category].find(t => t.id === taskId);
if (task) {
taskData = task;
break;
}
}
if (taskData) {
showTaskReward(taskData);
// 更新任务状态
const taskItem = event.target.closest('.task-item');
taskItem.classList.add('completed');
event.target.className = 'task-button done';
event.target.textContent = '已完成';
event.target.removeAttribute('onclick');
// 更新活跃度
updateActivity(taskData.points);
}
}
// 显示宝箱奖励
function showTreasureReward(points) {
const reward = treasureRewards[points];
if (!reward) return;
document.getElementById('rewardTitle').textContent = reward.title;
let rewardHtml = '';
reward.rewards.forEach(item => {
rewardHtml += `
<div class="reward-item-detail">
<div class="reward-item-name">
<i class="fas ${item.icon}" style="color: ${item.color};"></i>
<span>${item.name}</span>
</div>
<div class="reward-item-amount">×${item.amount}</div>
</div>
`;
});
document.getElementById('rewardList').innerHTML = rewardHtml;
document.getElementById('rewardPopup').style.display = 'flex';
// 标记为已领取
receivedTreasures.add(points);
updateTreasureBoxes();
}
// 显示任务奖励 - 适配新的奖励结构
function showTaskReward(task) {
document.getElementById('rewardTitle').textContent = `「${task.title}」完成奖励`;
let rewardHtml = '';
// 金币
if (task.coins > 0) {
rewardHtml += `
<div class="reward-item-detail">
<div class="reward-item-name">
<i class="fas fa-coins" style="color: #ffd700;"></i>
<span>金币</span>
</div>
<div class="reward-item-amount">×${task.coins}</div>
</div>
`;
}
// 经验
if (task.exp > 0) {
rewardHtml += `
<div class="reward-item-detail">
<div class="reward-item-name">
<i class="fas fa-star" style="color: #667eea;"></i>
<span>经验值</span>
</div>
<div class="reward-item-amount">×${task.exp}</div>
</div>
`;
}
// 道具
task.rewards.forEach(item => {
rewardHtml += `
<div class="reward-item-detail">
<div class="reward-item-name">
<i class="fas ${item.icon}" style="color: ${item.color || '#ff6b6b'};"></i>
<span>${item.name}</span>
</div>
<div class="reward-item-amount">×${item.amount}</div>
</div>
`;
});
document.getElementById('rewardList').innerHTML = rewardHtml;
document.getElementById('rewardPopup').style.display = 'flex';
}
// 关闭奖励弹窗
function closeRewardPopup() {
document.getElementById('rewardPopup').style.display = 'none';
}
// 关闭任务详情弹窗
function closeTaskDetailPopup() {
document.getElementById('taskDetailPopup').style.display = 'none';
}
// 关闭预览弹窗
function closePreviewPopup() {
document.getElementById('previewPopup').style.display = 'none';
}
// 更新活跃度
function updateActivity(points) {
currentActivity = Math.min(currentActivity + points, 300);
document.getElementById('currentPoints').textContent = currentActivity;
// 计算整数百分比
const percent = Math.round((currentActivity / 300) * 100);
document.querySelector('.layui-progress-bar').setAttribute('lay-percent', percent + '%');
layui.element.render('progress');
// 更新宝箱状态
updateTreasureBoxes();
}
// 点击弹窗外部关闭
document.getElementById('rewardPopup').addEventListener('click', function(e) {
if (e.target === this) {
closeRewardPopup();
}
});
document.getElementById('taskDetailPopup').addEventListener('click', function(e) {
if (e.target === this) {
closeTaskDetailPopup();
}
});
document.getElementById('previewPopup').addEventListener('click', function(e) {
if (e.target === this) {
closePreviewPopup();
}
});
</script>
</body>
</html>