优化Play.vue界面,新增已完成状态处理逻辑,更新状态显示和消息提示,提升用户体验。
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user