85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
|
// 积分任务页面 - H5版本
|
||
|
|
|
||
|
|
let taskData = [];
|
||
|
|
|
||
|
|
// 页面初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
loadTaskData();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 加载积分任务数据
|
||
|
|
function loadTaskData() {
|
||
|
|
// 使用模拟数据
|
||
|
|
taskData = [
|
||
|
|
{ id: 1, name: '每日签到', points: 10, description: '每天签到获得积分', status: '启用' },
|
||
|
|
{ id: 2, name: '完善资料', points: 50, description: '完善个人资料获得积分', status: '启用' },
|
||
|
|
{ id: 3, name: '首次购买', points: 100, description: '首次购买商品获得积分', status: '启用' },
|
||
|
|
{ id: 4, name: '邀请好友', points: 200, description: '邀请好友注册获得积分', status: '停用' },
|
||
|
|
{ id: 5, name: '评价商品', points: 20, description: '评价购买的商品获得积分', status: '启用' },
|
||
|
|
{ id: 6, name: '分享商品', points: 15, description: '分享商品到社交媒体获得积分', status: '启用' }
|
||
|
|
];
|
||
|
|
|
||
|
|
renderTable();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 渲染表格
|
||
|
|
function renderTable() {
|
||
|
|
const tableBody = document.getElementById('task-table-body');
|
||
|
|
tableBody.innerHTML = taskData.map(task => `
|
||
|
|
<tr>
|
||
|
|
<td>${task.name}</td>
|
||
|
|
<td>${task.points}</td>
|
||
|
|
<td>${task.description}</td>
|
||
|
|
<td>
|
||
|
|
<span style="color: ${task.status === '启用' ? '#4CAF50' : '#f44336'};">
|
||
|
|
${task.status}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<button class="btn btn-small btn-primary" onclick="editTask(${task.id})">
|
||
|
|
编辑
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-small"
|
||
|
|
style="background: ${task.status === '启用' ? '#f44336' : '#4CAF50'}; color: white;"
|
||
|
|
onclick="toggleTaskStatus(${task.id})">
|
||
|
|
${task.status === '启用' ? '停用' : '启用'}
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加任务
|
||
|
|
function addTask() {
|
||
|
|
showNotification('打开添加任务界面', 'info');
|
||
|
|
// 这里可以跳转到添加任务页面或显示弹窗
|
||
|
|
console.log('添加新任务');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 编辑任务
|
||
|
|
function editTask(taskId) {
|
||
|
|
const task = taskData.find(t => t.id === taskId);
|
||
|
|
if (task) {
|
||
|
|
showNotification(`编辑任务：${task.name}`, 'info');
|
||
|
|
console.log('编辑任务:', task);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 切换任务状态
|
||
|
|
function toggleTaskStatus(taskId) {
|
||
|
|
const task = taskData.find(t => t.id === taskId);
|
||
|
|
if (task) {
|
||
|
|
const newStatus = task.status === '启用' ? '停用' : '启用';
|
||
|
|
|
||
|
|
confirmAction(`确定要${newStatus}任务"${task.name}"吗？`, () => {
|
||
|
|
task.status = newStatus;
|
||
|
|
renderTable();
|
||
|
|
showNotification(`任务"${task.name}"已${newStatus}`, 'success');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 导出函数到全局
|
||
|
|
window.addTask = addTask;
|
||
|
|
window.editTask = editTask;
|
||
|
|
window.toggleTaskStatus = toggleTaskStatus;
|