hanqin
2 weeks ago
14 changed files with 1232 additions and 95 deletions
@ -0,0 +1,78 @@ |
|||
using Build_God_Api.Services; |
|||
using Microsoft.AspNetCore.Authorization; |
|||
using Microsoft.AspNetCore.Mvc; |
|||
|
|||
namespace Build_God_Api.Controllers |
|||
{ |
|||
[ApiController] |
|||
[Route("api/god/[controller]")]
|
|||
public class DailyMissionController( |
|||
IDailyMissionService dailyMissionService, |
|||
ICharacterService characterService, |
|||
ICurrentUserService currentUserService |
|||
) : ControllerBase |
|||
{ |
|||
private readonly IDailyMissionService _dailyMissionService = dailyMissionService; |
|||
private readonly ICharacterService _characterService = characterService; |
|||
private readonly ICurrentUserService _currentUserService = currentUserService; |
|||
|
|||
/// <summary>
|
|||
/// 获取角色每日任务列表
|
|||
/// </summary>
|
|||
[HttpGet("list")] |
|||
[Authorize] |
|||
public async Task<ActionResult<List<DailyMissionDto>>> GetList() |
|||
{ |
|||
var character = await _characterService.GetCharacterByAccountId(_currentUserService.UserId); |
|||
if (character == null) |
|||
return BadRequest("角色不存在"); |
|||
|
|||
var missions = await _dailyMissionService.GetCharacterDailyMissions(character.Id); |
|||
return missions; |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// 接取任务
|
|||
/// </summary>
|
|||
[HttpPost("{dailyMissionId}/accept")] |
|||
[Authorize] |
|||
public async Task<ActionResult<bool>> Accept(int dailyMissionId) |
|||
{ |
|||
try |
|||
{ |
|||
var character = await _characterService.GetCharacterByAccountId(_currentUserService.UserId); |
|||
if (character == null) |
|||
return BadRequest("角色不存在"); |
|||
|
|||
var result = await _dailyMissionService.AcceptMission(character.Id, dailyMissionId); |
|||
return Ok(result); |
|||
} |
|||
catch (Exception ex) |
|||
{ |
|||
return BadRequest(ex.Message); |
|||
} |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// 领取奖励
|
|||
/// </summary>
|
|||
[HttpPost("{dailyMissionId}/claim")] |
|||
[Authorize] |
|||
public async Task<ActionResult<bool>> Claim(int dailyMissionId) |
|||
{ |
|||
try |
|||
{ |
|||
var character = await _characterService.GetCharacterByAccountId(_currentUserService.UserId); |
|||
if (character == null) |
|||
return BadRequest("角色不存在"); |
|||
|
|||
var result = await _dailyMissionService.ClaimReward(character.Id, dailyMissionId); |
|||
return Ok(result); |
|||
} |
|||
catch (Exception ex) |
|||
{ |
|||
return BadRequest(ex.Message); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
using SqlSugar; |
|||
|
|||
namespace Build_God_Api.DB |
|||
{ |
|||
/// <summary>
|
|||
/// 角色每日任务分配表
|
|||
/// </summary>
|
|||
public class CharacterDailyMission : BaseEntity |
|||
{ |
|||
/// <summary>
|
|||
/// 角色ID
|
|||
/// </summary>
|
|||
public int CharacterId { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// 任务ID
|
|||
/// </summary>
|
|||
public int MissionId { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// 分配日期（北京时间）
|
|||
/// </summary>
|
|||
public DateTime AssignedDate { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// 任务状态
|
|||
/// </summary>
|
|||
public DailyMissionStatus Status { get; set; } = DailyMissionStatus.Pending; |
|||
|
|||
/// <summary>
|
|||
/// 开始时间
|
|||
/// </summary>
|
|||
public DateTime? StartTime { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// 预计完成时间
|
|||
/// </summary>
|
|||
public DateTime? EndTime { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// 是否是昨天的任务（用于高亮显示）
|
|||
/// </summary>
|
|||
public bool IsFromYesterday { get; set; } |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// 每日任务状态枚举
|
|||
/// </summary>
|
|||
public enum DailyMissionStatus |
|||
{ |
|||
/// <summary>
|
|||
/// 待接取
|
|||
/// </summary>
|
|||
Pending = 0, |
|||
|
|||
/// <summary>
|
|||
/// 进行中
|
|||
/// </summary>
|
|||
InProgress = 1, |
|||
|
|||
/// <summary>
|
|||
/// 已完成（待领取奖励）
|
|||
/// </summary>
|
|||
Completed = 2, |
|||
|
|||
/// <summary>
|
|||
/// 已领取
|
|||
/// </summary>
|
|||
Claimed = 3 |
|||
} |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
using Build_God_Api.Services; |
|||
|
|||
namespace Build_God_Api.Services |
|||
{ |
|||
public class DailyMissionHostedService( |
|||
IServiceProvider serviceProvider, |
|||
ILogger<DailyMissionHostedService> logger |
|||
) : BackgroundService |
|||
{ |
|||
private readonly IServiceProvider _serviceProvider = serviceProvider; |
|||
private readonly ILogger<DailyMissionHostedService> _logger = logger; |
|||
|
|||
protected override async Task ExecuteAsync(CancellationToken stoppingToken) |
|||
{ |
|||
_logger.LogInformation("每日任务后台服务已启动"); |
|||
|
|||
while (!stoppingToken.IsCancellationRequested) |
|||
{ |
|||
try |
|||
{ |
|||
using var scope = _serviceProvider.CreateScope(); |
|||
var dailyMissionService = scope.ServiceProvider.GetRequiredService<IDailyMissionService>(); |
|||
|
|||
await dailyMissionService.CheckAndCompleteExpiredMissions(); |
|||
} |
|||
catch (Exception ex) |
|||
{ |
|||
_logger.LogError(ex, "检查每日任务时发生错误"); |
|||
} |
|||
|
|||
await Task.Delay(TimeSpan.FromSeconds(10), stoppingToken); |
|||
} |
|||
|
|||
_logger.LogInformation("每日任务后台服务已停止"); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,305 @@ |
|||
using Build_God_Api.DB; |
|||
using Build_God_Api.Dto; |
|||
using SqlSugar; |
|||
|
|||
namespace Build_God_Api.Services |
|||
{ |
|||
public interface IDailyMissionService |
|||
{ |
|||
/// <summary>
|
|||
/// 获取角色所有未领取的任务（包括昨日的）
|
|||
/// </summary>
|
|||
Task<List<DailyMissionDto>> GetCharacterDailyMissions(int characterId); |
|||
|
|||
/// <summary>
|
|||
/// 接取任务
|
|||
/// </summary>
|
|||
Task<bool> AcceptMission(int characterId, int dailyMissionId); |
|||
|
|||
/// <summary>
|
|||
/// 领取奖励
|
|||
/// </summary>
|
|||
Task<bool> ClaimReward(int characterId, int dailyMissionId); |
|||
|
|||
/// <summary>
|
|||
/// 检查并完成所有到期任务
|
|||
/// </summary>
|
|||
Task CheckAndCompleteExpiredMissions(); |
|||
|
|||
/// <summary>
|
|||
/// 为角色分配每日任务（登录时调用）
|
|||
/// </summary>
|
|||
Task AssignDailyMissionsIfNeeded(int characterId); |
|||
} |
|||
|
|||
public class DailyMissionDto |
|||
{ |
|||
public int Id { get; set; } |
|||
public int CharacterId { get; set; } |
|||
public int MissionId { get; set; } |
|||
public string MissionName { get; set; } = string.Empty; |
|||
public string MissionTitle { get; set; } = string.Empty; |
|||
public string MissionDescription { get; set; } = string.Empty; |
|||
public int SpendTimeMinutes { get; set; } |
|||
public DailyMissionStatus Status { get; set; } |
|||
public DateTime? StartTime { get; set; } |
|||
public DateTime? EndTime { get; set; } |
|||
public bool IsFromYesterday { get; set; } |
|||
public DateTime AssignedDate { get; set; } |
|||
public List<MissionRewardDto> Rewards { get; set; } = new(); |
|||
} |
|||
|
|||
public class MissionRewardDto |
|||
{ |
|||
public RewardType RewardType { get; set; } |
|||
public string RewardTypeName { get; set; } = string.Empty; |
|||
public int ItemId { get; set; } |
|||
public string ItemName { get; set; } = string.Empty; |
|||
public int Count { get; set; } |
|||
} |
|||
|
|||
public class DailyMissionService( |
|||
ISqlSugarClient db, |
|||
IBagService bagService, |
|||
ILogger<DailyMissionService> logger |
|||
) : IDailyMissionService |
|||
{ |
|||
private readonly ISqlSugarClient _db = db; |
|||
private readonly IBagService _bagService = bagService; |
|||
private readonly ILogger<DailyMissionService> _logger = logger; |
|||
|
|||
private const int DailyMissionCount = 5; |
|||
|
|||
private static readonly TimeZoneInfo BeijingTimeZone = TimeZoneInfo.FindSystemTimeZoneById("China Standard Time"); |
|||
|
|||
private DateTime GetBeijingTime() |
|||
{ |
|||
return TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, BeijingTimeZone); |
|||
} |
|||
|
|||
private DateTime GetBeijingDate() |
|||
{ |
|||
return GetBeijingTime().Date; |
|||
} |
|||
|
|||
public async Task<List<DailyMissionDto>> GetCharacterDailyMissions(int characterId) |
|||
{ |
|||
var today = GetBeijingDate(); |
|||
var yesterday = today.AddDays(-1); |
|||
|
|||
var dailyMissions = await _db.Queryable<CharacterDailyMission>() |
|||
.Where(x => x.CharacterId == characterId && x.Status != DailyMissionStatus.Claimed) |
|||
.Where(x => x.AssignedDate == today || x.AssignedDate == yesterday) |
|||
.OrderByDescending(x => x.AssignedDate) |
|||
.OrderByDescending(x => x.IsFromYesterday) |
|||
.ToListAsync(); |
|||
|
|||
var result = new List<DailyMissionDto>(); |
|||
|
|||
foreach (var dm in dailyMissions) |
|||
{ |
|||
var mission = await _db.Queryable<Mission>() |
|||
.Includes(x => x.Rewards) |
|||
.FirstAsync(x => x.Id == dm.MissionId); |
|||
|
|||
if (mission == null) continue; |
|||
|
|||
var dto = new DailyMissionDto |
|||
{ |
|||
Id = dm.Id, |
|||
CharacterId = dm.CharacterId, |
|||
MissionId = dm.MissionId, |
|||
MissionName = mission.Name, |
|||
MissionTitle = mission.Title, |
|||
MissionDescription = mission.Description, |
|||
SpendTimeMinutes = mission.SpendTimeMinutes, |
|||
Status = dm.Status, |
|||
StartTime = dm.StartTime, |
|||
EndTime = dm.EndTime, |
|||
IsFromYesterday = dm.IsFromYesterday, |
|||
AssignedDate = dm.AssignedDate |
|||
}; |
|||
|
|||
if (mission.Rewards != null) |
|||
{ |
|||
foreach (var reward in mission.Rewards) |
|||
{ |
|||
dto.Rewards.Add(new MissionRewardDto |
|||
{ |
|||
RewardType = reward.RewardType, |
|||
RewardTypeName = reward.RewardType.ToString(), |
|||
ItemId = reward.ItemId, |
|||
ItemName = reward.ItemName ?? string.Empty, |
|||
Count = reward.Count |
|||
}); |
|||
} |
|||
} |
|||
|
|||
result.Add(dto); |
|||
} |
|||
|
|||
return result; |
|||
} |
|||
|
|||
public async Task<bool> AcceptMission(int characterId, int dailyMissionId) |
|||
{ |
|||
var dailyMission = await _db.Queryable<CharacterDailyMission>() |
|||
.FirstAsync(x => x.Id == dailyMissionId && x.CharacterId == characterId) |
|||
?? throw new Exception("任务不存在"); |
|||
|
|||
if (dailyMission.Status != DailyMissionStatus.Pending) |
|||
throw new Exception("任务不是待接取状态"); |
|||
|
|||
var mission = await _db.Queryable<Mission>() |
|||
.FirstAsync(x => x.Id == dailyMission.MissionId) |
|||
?? throw new Exception("任务不存在"); |
|||
|
|||
var now = GetBeijingTime(); |
|||
dailyMission.Status = DailyMissionStatus.InProgress; |
|||
dailyMission.StartTime = now; |
|||
dailyMission.EndTime = now.AddMinutes(mission.SpendTimeMinutes); |
|||
|
|||
await _db.Updateable(dailyMission).ExecuteCommandAsync(); |
|||
|
|||
_logger.LogInformation("角色 {CharacterId} 接取了任务 {MissionId}", characterId, dailyMission.MissionId); |
|||
|
|||
return true; |
|||
} |
|||
|
|||
public async Task<bool> ClaimReward(int characterId, int dailyMissionId) |
|||
{ |
|||
var dailyMission = await _db.Queryable<CharacterDailyMission>() |
|||
.FirstAsync(x => x.Id == dailyMissionId && x.CharacterId == characterId) |
|||
?? throw new Exception("任务不存在"); |
|||
|
|||
if (dailyMission.Status != DailyMissionStatus.Completed) |
|||
throw new Exception("任务未完成，无法领取奖励"); |
|||
|
|||
var mission = await _db.Queryable<Mission>() |
|||
.Includes(x => x.Rewards) |
|||
.FirstAsync(x => x.Id == dailyMission.MissionId) |
|||
?? throw new Exception("任务不存在"); |
|||
|
|||
var character = await _db.Queryable<Character>() |
|||
.FirstAsync(x => x.Id == characterId) |
|||
?? throw new Exception("角色不存在"); |
|||
|
|||
if (mission.Rewards != null) |
|||
{ |
|||
foreach (var reward in mission.Rewards) |
|||
{ |
|||
switch (reward.RewardType) |
|||
{ |
|||
case RewardType.Exp: |
|||
character.CurrentExp += reward.Count; |
|||
_logger.LogInformation("角色 {CharacterId} 领取任务奖励：经验 +{Count}", characterId, reward.Count); |
|||
break; |
|||
|
|||
case RewardType.Money: |
|||
character.Money += reward.Count; |
|||
_logger.LogInformation("角色 {CharacterId} 领取任务奖励：灵石 +{Count}", characterId, reward.Count); |
|||
break; |
|||
|
|||
case RewardType.Pill: |
|||
case RewardType.Equipment: |
|||
var characterBag = await _db.Queryable<CharacterBag>() |
|||
.FirstAsync(x => x.CharacterId == characterId); |
|||
if (characterBag != null) |
|||
{ |
|||
await _bagService.AddItemToBag(characterBag.Id, (int)reward.RewardType, reward.ItemId, reward.Count); |
|||
_logger.LogInformation("角色 {CharacterId} 领取任务奖励：{ItemName} x{Count}", characterId, reward.ItemName, reward.Count); |
|||
} |
|||
break; |
|||
} |
|||
} |
|||
|
|||
await _db.Updateable(character).ExecuteCommandAsync(); |
|||
} |
|||
|
|||
dailyMission.Status = DailyMissionStatus.Claimed; |
|||
await _db.Updateable(dailyMission).ExecuteCommandAsync(); |
|||
|
|||
_logger.LogInformation("角色 {CharacterId} 领取了任务 {MissionId} 的奖励", characterId, mission.Id); |
|||
|
|||
return true; |
|||
} |
|||
|
|||
public async Task CheckAndCompleteExpiredMissions() |
|||
{ |
|||
var now = GetBeijingTime(); |
|||
|
|||
var expiredMissions = await _db.Queryable<CharacterDailyMission>() |
|||
.Where(x => x.Status == DailyMissionStatus.InProgress && x.EndTime <= now) |
|||
.ToListAsync(); |
|||
|
|||
foreach (var mission in expiredMissions) |
|||
{ |
|||
mission.Status = DailyMissionStatus.Completed; |
|||
await _db.Updateable(mission).ExecuteCommandAsync(); |
|||
|
|||
_logger.LogInformation("任务 {MissionId} 已自动完成，等待角色 {CharacterId} 领取", mission.MissionId, mission.CharacterId); |
|||
} |
|||
} |
|||
|
|||
public async Task AssignDailyMissionsIfNeeded(int characterId) |
|||
{ |
|||
var today = GetBeijingDate(); |
|||
|
|||
var character = await _db.Queryable<Character>() |
|||
.FirstAsync(x => x.Id == characterId) |
|||
?? throw new Exception("角色不存在"); |
|||
|
|||
var existingMissions = await _db.Queryable<CharacterDailyMission>() |
|||
.Where(x => x.CharacterId == characterId && x.AssignedDate == today) |
|||
.ToListAsync(); |
|||
|
|||
var hasInProgressOrPending = existingMissions.Any(x => |
|||
x.Status == DailyMissionStatus.InProgress || x.Status == DailyMissionStatus.Pending); |
|||
|
|||
if (hasInProgressOrPending) |
|||
{ |
|||
_logger.LogInformation("角色 {CharacterId} 今日已有任务，无需分配", characterId); |
|||
return; |
|||
} |
|||
|
|||
var availableMissions = await _db.Queryable<Mission>() |
|||
.Where(x => x.Type == MissionType.DailyTask) |
|||
.Where(x => x.IsAvailable == true) |
|||
.Where(x => x.RequiredLevelId <= character.LevelId) |
|||
.ToListAsync(); |
|||
|
|||
if (!availableMissions.Any()) |
|||
{ |
|||
_logger.LogWarning("没有可用的日常任务配置"); |
|||
return; |
|||
} |
|||
|
|||
var random = new Random(); |
|||
var filteredMissions = availableMissions |
|||
.Where(x => random.Next(100) < (int)x.ObtainPercentage) |
|||
.ToList(); |
|||
|
|||
var selectedMissions = filteredMissions |
|||
.OrderBy(x => random.Next()) |
|||
.Take(DailyMissionCount) |
|||
.ToList(); |
|||
|
|||
foreach (var mission in selectedMissions) |
|||
{ |
|||
var dailyMission = new CharacterDailyMission |
|||
{ |
|||
CharacterId = characterId, |
|||
MissionId = mission.Id, |
|||
AssignedDate = today, |
|||
Status = DailyMissionStatus.Pending, |
|||
IsFromYesterday = false, |
|||
CreatedOn = DateTime.UtcNow |
|||
}; |
|||
|
|||
await _db.Insertable(dailyMission).ExecuteCommandAsync(); |
|||
} |
|||
|
|||
_logger.LogInformation("为角色 {CharacterId} 分配了 {Count} 个每日任务", characterId, selectedMissions.Count); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
import axios from 'axios' |
|||
|
|||
const API_BASE_URL = '/api' |
|||
|
|||
const instance = axios.create({ |
|||
baseURL: API_BASE_URL, |
|||
timeout: 10000, |
|||
headers: { |
|||
'Content-Type': 'application/json' |
|||
} |
|||
}) |
|||
|
|||
instance.interceptors.request.use( |
|||
(config) => { |
|||
const token = localStorage.getItem('auth_token') |
|||
if (token) { |
|||
config.headers.Authorization = `Bearer ${token}` |
|||
} |
|||
return config |
|||
}, |
|||
(error) => Promise.reject(error) |
|||
) |
|||
|
|||
instance.interceptors.response.use( |
|||
(response) => response.data, |
|||
(error) => { |
|||
if (error.response?.status === 401) { |
|||
localStorage.removeItem('auth_token') |
|||
localStorage.removeItem('user') |
|||
window.location.href = '/login' |
|||
} |
|||
return Promise.reject(error.response?.data || error.message) |
|||
} |
|||
) |
|||
|
|||
export const DailyMissionStatus = { |
|||
Pending: 0, |
|||
InProgress: 1, |
|||
Completed: 2, |
|||
Claimed: 3 |
|||
} as const |
|||
|
|||
export type DailyMissionStatus = typeof DailyMissionStatus[keyof typeof DailyMissionStatus] |
|||
|
|||
export const RewardType = { |
|||
Pill: 1, |
|||
Equipment: 2, |
|||
Exp: 3, |
|||
Money: 4 |
|||
} as const |
|||
|
|||
export type RewardType = typeof RewardType[keyof typeof RewardType] |
|||
|
|||
export interface MissionReward { |
|||
rewardType: RewardType |
|||
rewardTypeName: string |
|||
itemId: number |
|||
itemName: string |
|||
count: number |
|||
} |
|||
|
|||
export interface DailyMission { |
|||
id: number |
|||
characterId: number |
|||
missionId: number |
|||
missionName: string |
|||
missionTitle: string |
|||
missionDescription: string |
|||
spendTimeMinutes: number |
|||
status: DailyMissionStatus |
|||
startTime?: string |
|||
endTime?: string |
|||
isFromYesterday: boolean |
|||
assignedDate: string |
|||
rewards: MissionReward[] |
|||
} |
|||
|
|||
export const dailyMissionApi = { |
|||
getList: (): Promise<DailyMission[]> => { |
|||
return instance.get('/god/daily-mission/list') |
|||
}, |
|||
|
|||
accept: (dailyMissionId: number): Promise<boolean> => { |
|||
return instance.post(`/god/daily-mission/${dailyMissionId}/accept`) |
|||
}, |
|||
|
|||
claim: (dailyMissionId: number): Promise<boolean> => { |
|||
return instance.post(`/god/daily-mission/${dailyMissionId}/claim`) |
|||
} |
|||
} |
|||
|
|||
export default instance |
|||
@ -0,0 +1,571 @@ |
|||
<script setup lang="ts"> |
|||
import { ref, computed, onMounted } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { dailyMissionApi, type DailyMission, DailyMissionStatus, RewardType } from '@/api/dailyMission' |
|||
|
|||
const router = useRouter() |
|||
|
|||
const missions = ref<DailyMission[]>([]) |
|||
const loading = ref(false) |
|||
const message = ref('') |
|||
const showMessage = ref(false) |
|||
|
|||
const showMsg = (text: string, type: 'success' | 'error' = 'success') => { |
|||
message.value = text |
|||
showMessage.value = true |
|||
setTimeout(() => { |
|||
showMessage.value = false |
|||
}, 2000) |
|||
} |
|||
|
|||
const getStatusText = (status: DailyMissionStatus) => { |
|||
switch (status) { |
|||
case DailyMissionStatus.Pending: |
|||
return '待接取' |
|||
case DailyMissionStatus.InProgress: |
|||
return '进行中' |
|||
case DailyMissionStatus.Completed: |
|||
return '待领取' |
|||
case DailyMissionStatus.Claimed: |
|||
return '已领取' |
|||
default: |
|||
return '未知' |
|||
} |
|||
} |
|||
|
|||
const getStatusClass = (status: DailyMissionStatus) => { |
|||
switch (status) { |
|||
case DailyMissionStatus.Pending: |
|||
return 'status-pending' |
|||
case DailyMissionStatus.InProgress: |
|||
return 'status-progress' |
|||
case DailyMissionStatus.Completed: |
|||
return 'status-completed' |
|||
case DailyMissionStatus.Claimed: |
|||
return 'status-claimed' |
|||
default: |
|||
return '' |
|||
} |
|||
} |
|||
|
|||
const getRewardIcon = (type: RewardType) => { |
|||
switch (type) { |
|||
case RewardType.Exp: |
|||
return '✨' |
|||
case RewardType.Money: |
|||
return '💰' |
|||
case RewardType.Pill: |
|||
return '💊' |
|||
case RewardType.Equipment: |
|||
return '⚔️' |
|||
default: |
|||
return '🎁' |
|||
} |
|||
} |
|||
|
|||
const formatTime = (dateStr?: string) => { |
|||
if (!dateStr) return '' |
|||
const date = new Date(dateStr) |
|||
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}` |
|||
} |
|||
|
|||
const formatRemainingTime = (endTime?: string) => { |
|||
if (!endTime) return '' |
|||
const end = new Date(endTime) |
|||
const now = new Date() |
|||
const diff = end.getTime() - now.getTime() |
|||
if (diff <= 0) return '已完成' |
|||
const minutes = Math.floor(diff / 60000) |
|||
const seconds = Math.floor((diff % 60000) / 1000) |
|||
return `${minutes}分${seconds}秒` |
|||
} |
|||
|
|||
const remainingTimes = ref<Record<number, string>>({}) |
|||
let timer: number | null = null |
|||
|
|||
const updateRemainingTimes = () => { |
|||
missions.value.forEach(mission => { |
|||
if (mission.status === DailyMissionStatus.InProgress) { |
|||
remainingTimes.value[mission.id] = formatRemainingTime(mission.endTime) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const canAccept = (mission: DailyMission) => mission.status === DailyMissionStatus.Pending |
|||
const canClaim = (mission: DailyMission) => mission.status === DailyMissionStatus.Completed |
|||
|
|||
const loadMissions = async () => { |
|||
loading.value = true |
|||
try { |
|||
const data = await dailyMissionApi.getList() |
|||
missions.value = data |
|||
updateRemainingTimes() |
|||
} catch (error: any) { |
|||
showMsg(error?.message || '加载任务失败', 'error') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
const handleAccept = async (mission: DailyMission) => { |
|||
try { |
|||
await dailyMissionApi.accept(mission.id) |
|||
showMsg('接取任务成功') |
|||
await loadMissions() |
|||
} catch (error: any) { |
|||
showMsg(error?.message || '接取任务失败', 'error') |
|||
} |
|||
} |
|||
|
|||
const handleClaim = async (mission: DailyMission) => { |
|||
try { |
|||
await dailyMissionApi.claim(mission.id) |
|||
showMsg('领取奖励成功！') |
|||
await loadMissions() |
|||
} catch (error: any) { |
|||
showMsg(error?.message || '领取奖励失败', 'error') |
|||
} |
|||
} |
|||
|
|||
const handleGoBack = () => { |
|||
router.push('/game') |
|||
} |
|||
|
|||
onMounted(() => { |
|||
loadMissions() |
|||
timer = window.setInterval(updateRemainingTimes, 1000) |
|||
}) |
|||
|
|||
const activeMissions = computed(() => missions.value.filter(m => m.status !== DailyMissionStatus.Claimed)) |
|||
const yesterdayMissions = computed(() => activeMissions.value.filter(m => m.isFromYesterday)) |
|||
const todayMissions = computed(() => activeMissions.value.filter(m => !m.isFromYesterday)) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="daily-mission-page"> |
|||
<div class="page-header"> |
|||
<span class="back-btn" @click="handleGoBack">← 返回</span> |
|||
<span class="title">每日任务</span> |
|||
<span class="placeholder"></span> |
|||
</div> |
|||
|
|||
<div v-if="showMessage" class="toast-message"> |
|||
{{ message }} |
|||
</div> |
|||
|
|||
<div v-if="loading" class="loading"> |
|||
加载中... |
|||
</div> |
|||
|
|||
<div v-else class="missions-content"> |
|||
<div v-if="yesterdayMissions.length > 0" class="mission-section yesterday-section"> |
|||
<div class="section-header"> |
|||
<span class="section-title">昨日任务</span> |
|||
<span class="section-badge highlight">待领取</span> |
|||
</div> |
|||
<div class="mission-list"> |
|||
<div |
|||
v-for="mission in yesterdayMissions" |
|||
:key="mission.id" |
|||
class="mission-card highlight" |
|||
> |
|||
<div class="mission-header"> |
|||
<span class="mission-name">{{ mission.missionTitle }}</span> |
|||
<span class="mission-status" :class="getStatusClass(mission.status)"> |
|||
{{ getStatusText(mission.status) }} |
|||
</span> |
|||
</div> |
|||
<div class="mission-desc">{{ mission.missionDescription }}</div> |
|||
<div class="mission-time"> |
|||
<span v-if="mission.status === DailyMissionStatus.InProgress"> |
|||
剩余时间: {{ remainingTimes[mission.id] || formatRemainingTime(mission.endTime) }} |
|||
</span> |
|||
<span v-else-if="mission.status === DailyMissionStatus.Completed"> |
|||
已完成，请领取奖励 |
|||
</span> |
|||
<span v-else> |
|||
挂机时间: {{ mission.spendTimeMinutes }}分钟 |
|||
</span> |
|||
</div> |
|||
<div class="mission-rewards"> |
|||
<span class="rewards-label">奖励:</span> |
|||
<span |
|||
v-for="(reward, idx) in mission.rewards" |
|||
:key="idx" |
|||
class="reward-item" |
|||
> |
|||
{{ getRewardIcon(reward.rewardType) }}{{ reward.itemName || reward.rewardTypeName }}×{{ reward.count }} |
|||
</span> |
|||
</div> |
|||
<div class="mission-actions"> |
|||
<button |
|||
v-if="canAccept(mission)" |
|||
class="action-btn accept-btn" |
|||
@click="handleAccept(mission)" |
|||
> |
|||
接取任务 |
|||
</button> |
|||
<button |
|||
v-if="canClaim(mission)" |
|||
class="action-btn claim-btn" |
|||
@click="handleClaim(mission)" |
|||
> |
|||
领取奖励 |
|||
</button> |
|||
<button |
|||
v-if="mission.status === DailyMissionStatus.InProgress" |
|||
class="action-btn disabled-btn" |
|||
disabled |
|||
> |
|||
挂机中... |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="todayMissions.length > 0" class="mission-section"> |
|||
<div class="section-header"> |
|||
<span class="section-title">今日任务</span> |
|||
<span class="section-badge">{{ todayMissions.filter(m => m.status === DailyMissionStatus.Claimed).length }}/{{ todayMissions.length }}</span> |
|||
</div> |
|||
<div class="mission-list"> |
|||
<div |
|||
v-for="mission in todayMissions" |
|||
:key="mission.id" |
|||
class="mission-card" |
|||
> |
|||
<div class="mission-header"> |
|||
<span class="mission-name">{{ mission.missionTitle }}</span> |
|||
<span class="mission-status" :class="getStatusClass(mission.status)"> |
|||
{{ getStatusText(mission.status) }} |
|||
</span> |
|||
</div> |
|||
<div class="mission-desc">{{ mission.missionDescription }}</div> |
|||
<div class="mission-time"> |
|||
<span v-if="mission.status === DailyMissionStatus.InProgress"> |
|||
剩余时间: {{ remainingTimes[mission.id] || formatRemainingTime(mission.endTime) }} |
|||
</span> |
|||
<span v-else-if="mission.status === DailyMissionStatus.Completed"> |
|||
已完成，请领取奖励 |
|||
</span> |
|||
<span v-else> |
|||
挂机时间: {{ mission.spendTimeMinutes }}分钟 |
|||
</span> |
|||
</div> |
|||
<div class="mission-rewards"> |
|||
<span class="rewards-label">奖励:</span> |
|||
<span |
|||
v-for="(reward, idx) in mission.rewards" |
|||
:key="idx" |
|||
class="reward-item" |
|||
> |
|||
{{ getRewardIcon(reward.rewardType) }}{{ reward.itemName || reward.rewardTypeName }}×{{ reward.count }} |
|||
</span> |
|||
</div> |
|||
<div class="mission-actions"> |
|||
<button |
|||
v-if="canAccept(mission)" |
|||
class="action-btn accept-btn" |
|||
@click="handleAccept(mission)" |
|||
> |
|||
接取任务 |
|||
</button> |
|||
<button |
|||
v-if="canClaim(mission)" |
|||
class="action-btn claim-btn" |
|||
@click="handleClaim(mission)" |
|||
> |
|||
领取奖励 |
|||
</button> |
|||
<button |
|||
v-if="mission.status === DailyMissionStatus.InProgress" |
|||
class="action-btn disabled-btn" |
|||
disabled |
|||
> |
|||
挂机中... |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="activeMissions.length === 0" class="empty-state"> |
|||
<div class="empty-icon">📋</div> |
|||
<div class="empty-text">今日暂无任务</div> |
|||
<div class="empty-hint">请明日再来</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.daily-mission-page { |
|||
min-height: 100vh; |
|||
background: #000000; |
|||
padding: 20px; |
|||
position: relative; |
|||
} |
|||
|
|||
.page-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 16px 0; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.back-btn { |
|||
color: #666666; |
|||
font-size: 0.9rem; |
|||
cursor: pointer; |
|||
padding: 8px; |
|||
} |
|||
|
|||
.back-btn:hover { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.title { |
|||
color: #ffffff; |
|||
font-size: 1.1rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.placeholder { |
|||
width: 60px; |
|||
} |
|||
|
|||
.toast-message { |
|||
position: fixed; |
|||
top: 80px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
background: rgba(255, 255, 255, 0.9); |
|||
color: #000000; |
|||
padding: 12px 24px; |
|||
border-radius: 8px; |
|||
font-size: 0.9rem; |
|||
z-index: 1000; |
|||
animation: fadeIn 0.3s ease; |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateX(-50%) translateY(-10px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(-50%) translateY(0); |
|||
} |
|||
} |
|||
|
|||
.loading { |
|||
text-align: center; |
|||
color: #666666; |
|||
padding: 40px; |
|||
} |
|||
|
|||
.missions-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24px; |
|||
} |
|||
|
|||
.mission-section { |
|||
background: rgba(255, 255, 255, 0.02); |
|||
border: 1px solid rgba(255, 255, 255, 0.08); |
|||
border-radius: 12px; |
|||
padding: 16px; |
|||
} |
|||
|
|||
.yesterday-section { |
|||
background: rgba(255, 68, 68, 0.05); |
|||
border-color: rgba(255, 68, 68, 0.2); |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16px; |
|||
padding-bottom: 12px; |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.08); |
|||
} |
|||
|
|||
.section-title { |
|||
color: #ffffff; |
|||
font-size: 1rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.section-badge { |
|||
background: rgba(255, 255, 255, 0.1); |
|||
color: #888888; |
|||
padding: 4px 12px; |
|||
border-radius: 12px; |
|||
font-size: 0.8rem; |
|||
} |
|||
|
|||
.section-badge.highlight { |
|||
background: rgba(255, 68, 68, 0.2); |
|||
color: #ff4444; |
|||
} |
|||
|
|||
.mission-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12px; |
|||
} |
|||
|
|||
.mission-card { |
|||
background: rgba(255, 255, 255, 0.03); |
|||
border: 1px solid rgba(255, 255, 255, 0.06); |
|||
border-radius: 10px; |
|||
padding: 14px; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.mission-card.highlight { |
|||
background: rgba(255, 68, 68, 0.08); |
|||
border-color: rgba(255, 68, 68, 0.3); |
|||
box-shadow: 0 0 20px rgba(255, 68, 68, 0.1); |
|||
} |
|||
|
|||
.mission-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.mission-name { |
|||
color: #ffffff; |
|||
font-size: 0.95rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.mission-status { |
|||
padding: 3px 10px; |
|||
border-radius: 10px; |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
.status-pending { |
|||
background: rgba(100, 100, 100, 0.3); |
|||
color: #888888; |
|||
} |
|||
|
|||
.status-progress { |
|||
background: rgba(59, 130, 246, 0.2); |
|||
color: #3b82f6; |
|||
} |
|||
|
|||
.status-completed { |
|||
background: rgba(34, 197, 94, 0.2); |
|||
color: #22c55e; |
|||
} |
|||
|
|||
.status-claimed { |
|||
background: rgba(255, 255, 255, 0.1); |
|||
color: #666666; |
|||
} |
|||
|
|||
.mission-desc { |
|||
color: #666666; |
|||
font-size: 0.85rem; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.mission-time { |
|||
color: #ff8844; |
|||
font-size: 0.8rem; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.mission-rewards { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 8px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.rewards-label { |
|||
color: #888888; |
|||
font-size: 0.8rem; |
|||
} |
|||
|
|||
.reward-item { |
|||
background: rgba(255, 136, 68, 0.1); |
|||
border: 1px solid rgba(255, 136, 68, 0.2); |
|||
color: #ff8844; |
|||
padding: 3px 8px; |
|||
border-radius: 6px; |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
.mission-actions { |
|||
display: flex; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.action-btn { |
|||
flex: 1; |
|||
padding: 10px 16px; |
|||
border-radius: 8px; |
|||
font-size: 0.85rem; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
border: none; |
|||
} |
|||
|
|||
.accept-btn { |
|||
background: linear-gradient(135deg, #ff8844 0%, #ff6644 100%); |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.accept-btn:hover { |
|||
transform: scale(1.02); |
|||
box-shadow: 0 4px 15px rgba(255, 136, 68, 0.3); |
|||
} |
|||
|
|||
.claim-btn { |
|||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.claim-btn:hover { |
|||
transform: scale(1.02); |
|||
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); |
|||
} |
|||
|
|||
.disabled-btn { |
|||
background: rgba(255, 255, 255, 0.05); |
|||
border: 1px solid rgba(255, 255, 255, 0.1); |
|||
color: #555555; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.empty-state { |
|||
text-align: center; |
|||
padding: 60px 20px; |
|||
} |
|||
|
|||
.empty-icon { |
|||
font-size: 3rem; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.empty-text { |
|||
color: #ffffff; |
|||
font-size: 1.1rem; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.empty-hint { |
|||
color: #666666; |
|||
font-size: 0.9rem; |
|||
} |
|||
</style> |
|||
Binary file not shown.
Loading…
Reference in new issue