1006 lines
49 KiB
HTML
1006 lines
49 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">
|
||
<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> |