优化总点数显示逻辑,调整初始值为null并从API获取真实数据,改进游戏界面状态处理,提升用户体验

This commit is contained in:
zyh
2025-11-06 18:56:26 +08:00
parent 2e35f219e7
commit e2a9fef1d0
4 changed files with 81 additions and 18 deletions

View File

@@ -16,7 +16,7 @@
<div class="detail-value region-value">{{ selectedRegion || '未选择' }}</div>
<div class="detail-value">待选区</div>
<div class="detail-value">{{ mecmachineId || '待分配' }}</div>
<div class="detail-value points-value">{{ totalPoints || 4000 }}</div>
<div class="detail-value points-value">{{ displayTotalPoints }}</div>
</div>
</div>
@@ -92,7 +92,7 @@ export default {
},
totalPoints: {
type: Number,
default: 4000
default: null
}
},
data() {
@@ -103,6 +103,16 @@ export default {
}
},
emits: ['selectRegion'],
computed: {
displayTotalPoints() {
// 如果 totalPoints 为 null 或 undefined显示"待分配"
// 注意0 是有效值,应该显示
if (this.totalPoints === null || this.totalPoints === undefined) {
return '待分配'
}
return this.totalPoints
}
},
methods: {
selectRegionOption(code) {
this.regionCode = code

View File

@@ -23,7 +23,7 @@ export function usePlayState() {
qrInfo: null,
assets: null,
currentPoints: 0,
totalPoints: 1000,
totalPoints: null, // 修改初始值改为null等待从API获取真实数据
completedPoints: 0,
progressDisplayFormat: '1',
error: null,
@@ -57,6 +57,32 @@ export function usePlayState() {
const response = await getLinkStatus(state.code)
const data = response.data
await updateStateFromResponse(data)
// 如果是NEW状态尝试获取游戏界面数据以获取totalPoints
if (data.status === 'NEW') {
try {
const gameResponse = await getGameInterfaceAPI(state.code)
const gameData = gameResponse.data
console.log('NEW状态 - 游戏界面数据:', gameData)
// 更新totalPoints和其他可用数据
if (gameData.totalPoints !== undefined && gameData.totalPoints !== null) {
state.totalPoints = gameData.totalPoints
console.log('从游戏界面获取到totalPoints:', state.totalPoints)
}
if (gameData.completedPoints !== undefined) {
state.completedPoints = gameData.completedPoints
}
if (gameData.progressDisplayFormat) {
state.progressDisplayFormat = String(gameData.progressDisplayFormat)
}
} catch (gameError) {
// 游戏界面数据获取失败不影响主流程,只记录日志
console.log('NEW状态获取游戏界面数据失败这是正常的:', gameError.message)
}
}
} catch (error) {
throw error
}
@@ -239,7 +265,8 @@ export function usePlayState() {
state.qrExpireAt = data.qrExpireAt
}
if (data.totalPoints) {
// 优先使用 data.totalPoints确保在NEW状态也能获取到目标点数
if (data.totalPoints !== undefined && data.totalPoints !== null) {
state.totalPoints = data.totalPoints
}
@@ -251,7 +278,8 @@ export function usePlayState() {
state.progressDisplayFormat = String(data.progressDisplayFormat)
}
if (data.assets && data.assets.totalPoints) {
// 如果assets中有totalPoints,也更新
if (data.assets && data.assets.totalPoints !== undefined && data.assets.totalPoints !== null) {
state.totalPoints = data.assets.totalPoints
if (state.currentPoints === undefined) {
state.currentPoints = 0
@@ -263,7 +291,8 @@ export function usePlayState() {
dataRegion: data.region,
stateRegion: state.region,
mecmachineId: data.mecmachineId,
totalPoints: state.totalPoints,
dataTotalPoints: data.totalPoints,
stateTotalPoints: state.totalPoints,
completedPoints: state.completedPoints,
skipQrProcessing
})

View File

@@ -33,7 +33,7 @@
<!-- 游戏界面 -->
<GamePage
v-else-if="state.status === 'LOGGED_IN' || (state.status === 'COMPLETED' && !state.isCompletedExpired)"
v-else-if="state.status === 'LOGGED_IN'"
:region="state.region"
:region-desc="state.regionDesc"
:machine-id="state.machineId"
@@ -48,8 +48,8 @@
:code-no="state.code"
/>
<!-- 完成状态超过24小时 -->
<div v-else-if="state.status === 'COMPLETED' && state.isCompletedExpired" class="completed-page">
<!-- 完成状态 -->
<div v-else-if="state.status === 'COMPLETED'" class="completed-page">
<div class="completed-text">已打完</div>
</div>

View File

@@ -187,9 +187,8 @@
<el-collapse-item title="输入格式说明" name="5">
<ul class="help-list">
<li>支持直接输入链接编号<code class="mono">RUC74NCV</code></li>
<li>支持输入完整链接URL<code class="mono">http://localhost:5173/play?code=RUC74NCV</code></li>
<li>系统会自动从URL中提取链接编号</li>
<li>支持直接输入链接编号<code class="mono">6DJWZ4MA</code></li>
<li>支持粘贴完整链接URL系统会自动识别并提取编号</li>
<li>支持使用粘贴按钮或Ctrl+V快速粘贴</li>
</ul>
</el-collapse-item>
@@ -343,7 +342,7 @@ export default {
// 移除首尾空格
const trimmed = input.trim()
// 如果是URL尝试提取code参数
// 方式1: 尝试从旧格式URL提取 (play?code=xxx)
try {
if (trimmed.includes('play?code=')) {
const url = new URL(trimmed)
@@ -354,23 +353,48 @@ export default {
// 如果URL解析失败继续下面的处理
}
// 尝试从各种URL格式中提取代码
// 方式2: 尝试从查询参数中提取 code=
if (trimmed.includes('code=')) {
const match = trimmed.match(/code=([^&\s]+)/)
if (match) return match[1]
}
// 如果包含路径分隔符,取最后一个部分
// 方式3: 尝试从新格式URL提取 (play/CODE 或 play/CODE?t=xxx)
// 匹配 /play/CODE 格式CODE后面可能跟查询参数
const playPathMatch = trimmed.match(/\/play\/([A-Z0-9]+)(?:\?|$|\/)/i)
if (playPathMatch) {
return playPathMatch[1]
}
// 方式4: 如果包含路径分隔符,取最后一个部分(去除查询参数)
if (trimmed.includes('/')) {
const parts = trimmed.split('/')
const lastPart = parts[parts.length - 1]
let lastPart = parts[parts.length - 1]
// 去除查询参数部分
if (lastPart.includes('?')) {
lastPart = lastPart.split('?')[0]
}
// 去除hash部分
if (lastPart.includes('#')) {
lastPart = lastPart.split('#')[0]
}
if (lastPart && lastPart.length >= 6) {
return lastPart
}
}
// 直接返回输入(假设就是代码)
return trimmed
// 方式5: 直接返回输入(假设就是代码,去除可能的查询参数
let result = trimmed
if (result.includes('?')) {
result = result.split('?')[0]
}
if (result.includes('#')) {
result = result.split('#')[0]
}
return result
}
// 查询