优化Play.vue界面,新增已完成状态处理逻辑,更新状态显示和消息提示,提升用户体验。

This commit is contained in:
zyh
2025-08-27 19:06:57 +08:00
parent 2a2ea19f0f
commit 4060a1c6e9

View File

@@ -83,7 +83,7 @@
</div>
<!-- 二界面 -->
<div v-else-if="state.status === 'LOGGED_IN'" class="game-page">
<div v-else-if="state.status === 'LOGGED_IN' || state.status === 'COMPLETED'" class="game-page">
<!-- 顶部标签页 -->
<div class="tab-header">
<div class="tab-item active">代练大区</div>
@@ -93,14 +93,14 @@
<div class="tab-header">
<div class="tab-item active" v-if="state.region === 'Q'">QQ</div>
<div class="tab-item active" v-if="state.region === 'V'">微信</div>
<div class="tab-item status-tab">状态</div>
<div class="tab-item status-tab">{{ getDisplayStatus() }}</div>
<div class="tab-item target-tab">{{ state.totalPoints || 0 }}</div>
</div>
<div class="tab-content">
<!-- 状态提示 -->
<div class="status-message">
正在代练中期间请勿操号耐心等待代练完成......
<div class="status-message" :class="getStatusMessageClass()">
{{ getStatusMessage() }}
</div>
@@ -323,6 +323,45 @@ export default {
}
}
// 处理已完成状态
const handleCompletedStatus = async () => {
try {
const gameResponse = await getGameInterfaceAPI(state.code)
const gameData = gameResponse.data
console.log('已完成状态 - 游戏界面数据:', gameData)
// 更新状态为已完成
state.status = 'COMPLETED'
// 构建assets对象包含图片URL
state.assets = {
homepageUrl: gameData.homepageUrl,
firstRewardUrl: gameData.firstRewardUrl,
midRewardUrl: gameData.midRewardUrl,
endRewardUrl: gameData.endRewardUrl,
qrCodeUrl: gameData.qrCodeUrl
}
// 设置点数信息 - 已完成时当前点数等于目标点数
state.totalPoints = gameData.totalPoints || 50
state.currentPoints = state.totalPoints // 已完成,当前点数等于目标点数
console.log('已完成状态更新完成:', {
status: state.status,
totalPoints: state.totalPoints,
currentPoints: state.currentPoints,
assets: !!state.assets
})
} catch (error) {
console.error('获取已完成状态游戏数据失败:', error)
// 即使获取游戏数据失败,也要设置为已完成状态
state.status = 'COMPLETED'
ElMessage.error('获取游戏数据失败,但订单已完成')
}
}
// 更新状态
const updateStateFromResponse = async (data, skipQrProcessing = false) => {
// 如果状态是LOGGED_IN调用游戏接口获取详细数据
@@ -331,6 +370,12 @@ export default {
return
}
// 如果状态是COMPLETED也调用游戏接口获取最终数据
if (data.status === 'COMPLETED') {
await handleCompletedStatus()
return
}
state.status = data.status
state.needRefresh = data.needRefresh || false
state.region = data.region
@@ -515,9 +560,13 @@ export default {
console.log('poll-login 响应数据:', data)
// 处理登录成功的情况无论success是true还是false
// 处理登录成功和已完成的情况
if (data.status === 'LOGGED_IN') {
await handleLoggedInStatus()
} else if (data.status === 'COMPLETED') {
await handleCompletedStatus()
// 已完成时停止轮询
clearTimer('loginPoll')
}
} catch (error) {
@@ -633,6 +682,37 @@ export default {
}
}
// 获取显示的状态文字
const getDisplayStatus = () => {
if (state.status === 'COMPLETED') {
return '已完成'
} else if (state.status === 'LOGGED_IN') {
return '代练中'
} else {
return '状态'
}
}
// 获取状态提示消息
const getStatusMessage = () => {
if (state.status === 'COMPLETED') {
return '代练已完成!感谢您的使用,订单已结束。'
} else if (state.status === 'LOGGED_IN') {
return '正在代练中,期间请勿操号,耐心等待代练完成......'
} else {
return '正在代练中,期间请勿操号,耐心等待代练完成......'
}
}
// 获取状态消息的样式类
const getStatusMessageClass = () => {
if (state.status === 'COMPLETED') {
return 'status-message-completed'
} else {
return ''
}
}
const getProgressPercent = () => {
if (!state.totalPoints) return 0
return Math.min(100, (state.currentPoints / state.totalPoints) * 100)
@@ -690,6 +770,9 @@ export default {
getCurrentUrl,
getGameStatus,
getStatusClass,
getDisplayStatus,
getStatusMessage,
getStatusMessageClass,
getProgressPercent,
getCurrentGameImage,
getErrorTitle,
@@ -1046,6 +1129,13 @@ export default {
border-left: 4px solid #f44336;
}
/* 已完成状态的消息样式 */
.status-message-completed {
background: #d4edda !important;
color: #155724 !important;
border-left: 4px solid #28a745 !important;
}
/* 功能按钮网格 */
.function-grid {
display: grid;