zyh/login_task_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构Play.vue界面，优化标签页和状态显示，添加游戏截图展示区域，更新状态管理逻辑，提升用户体验。

Browse Source
This commit is contained in:
zyh
2025-08-27 17:29:17 +08:00
parent e3db781926
commit dbdea7aaa3
5 changed files with 1679 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

479
src/views/Play.vue
View File

@@ -84,61 +84,50 @@
<!-- 二界面 -->
<div v-else-if="state.status === 'LOGGED_IN'" class="game-page">
<div class="game-header">
<div class="browser-bar">
<span class="url">{{ getCurrentUrl() }}</span>
</div>
<!-- 顶部标签页 -->
<div class="tab-header">
<div class="tab-item active">代练大区</div>
<div class="tab-item status-tab">状态</div>
<div class="tab-item target-tab">目标点数</div>
</div>
<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 target-tab">{{ state.totalPoints || 0 }}</div>
</div>
<div class="tab-content">
<div class="game-content">
<!-- 大厅选择显示 -->
<div class="hall-info">
<span class="hall-label">选择大厅:</span>
<span class="hall-value">{{ getRegionName() }}</span>
<!-- 状态提示 -->
<div class="status-message">
正在代练中，期间请勿操号，耐心等待代练完成......
</div>
<!-- 状态显示 -->
<div class="status-info">
<span class="status-label">状态:</span>
<span class="status-value" :class="getStatusClass()">{{ getGameStatus() }}</span>
</div>
<!-- 目标点数进度 -->
<div class="progress-section">
<div class="progress-header">
<span class="progress-label">目标点数</span>
<span class="progress-value">{{ state.currentPoints || 0 }}/{{ state.totalPoints || 1000 }}</span>
<!-- 游戏截图展示区域 -->
<div class="image-gallery">
<div class="image-item">
<img src="http://36.138.184.60:12345/f1/首次主页.png" alt="首次主页" class="game-image" />
<div class="image-label">首次主页</div>
</div>
<div class="progress-bar">
<div class="progress-fill" :style="{ width: getProgressPercent() + '%' }"></div>
<div class="image-item">
<img src="http://36.138.184.60:12345/f1/首次赏金.png" alt="首次赏金" class="game-image" style="transform: rotate(-90deg);" />
<div class="image-label">首次赏金</div>
</div>
<div class="image-item">
<img src="http://36.138.184.60:12345/f1/中途赏金.png" alt="中途赏金" class="game-image" />
<div class="image-label">中途赏金</div>
</div>
<div class="image-item">
<img src="http://36.138.184.60:12345/f1/结束赏金.png" alt="结束赏金" class="game-image" />
<div class="image-label">结束赏金</div>
</div>
</div>
<!-- 游戏截图区域 -->
<div class="game-images" v-if="state.assets">
<div class="image-container">
<img
v-if="getCurrentGameImage()"
:src="getCurrentGameImage()"
class="game-screenshot"
alt="游戏截图"
/>
<div v-else class="placeholder-image">
<p>正在上号中，请稍等...</p>
</div>
</div>
</div>
<!-- 操作按钮区域 -->
<div class="game-actions">
<button class="action-btn completed-btn">已完成</button>
<button class="action-btn current-btn">进行中</button>
<button class="action-btn pending-btn">未开始</button>
</div>
<!-- 底部信息 -->
<div class="bottom-info">
<p class="safe-text">安全可靠的代练服务</p>
<!-- 底部状态显示 -->
<div class="bottom-status">
ss{{ state.currentPoints || 0 }}
</div>
</div>
</div>
@@ -299,10 +288,18 @@ export default {
state.status = 'LOGGED_IN'
state.assets = gameData.assets
// 从游戏接口数据中更新总点数和当前进度
if (gameData.assets && gameData.assets.totalPoints) {
// 更新区域信息
if (gameData.region) {
state.region = gameData.region
}
// 从游戏接口数据中更新总点数 - 优先使用根级别的totalPoints
if (gameData.totalPoints) {
state.totalPoints = gameData.totalPoints
} else if (gameData.assets && gameData.assets.totalPoints) {
state.totalPoints = gameData.assets.totalPoints
}
// 初始化当前点数为0（代表刚开始）
state.currentPoints = 0
@@ -329,7 +326,12 @@ export default {
state.region = data.region
state.assets = data.assets
// 如果有游戏数据，更新点数信息
// 更新点数信息 - totalPoints 在根级别
if (data.totalPoints) {
state.totalPoints = data.totalPoints
}
// 如果有游戏数据，也检查assets中的点数信息
if (data.assets && data.assets.totalPoints) {
state.totalPoints = data.assets.totalPoints
// 如果没有当前进度，初始化为0
@@ -939,178 +941,194 @@ export default {
background: white;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.game-header {
background: #f8f9fa;
padding: 12px;
border-bottom: 1px solid #e9ecef;
}
.browser-bar {
background: white;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
color: #666;
text-align: center;
}
.game-content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.hall-info, .status-info {
/* 标签页头部 */
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
font-size: 16px;
}
.hall-label, .status-label {
color: #666;
.tab-item {
flex: 1;
padding: 12px 16px;
text-align: center;
font-size: 14px;
font-weight: 500;
}
.hall-value {
color: #333;
font-weight: 600;
}
.status-value {
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
}
.status-completed {
background: #d4edda;
color: #155724;
}
.status-playing {
background: #fff3cd;
color: #856404;
}
.status-idle {
background: #d1ecf1;
color: #0c5460;
}
.progress-section {
margin: 20px 0;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.progress-label {
font-size: 16px;
font-weight: 600;
color: #333;
}
.progress-value {
font-size: 16px;
font-weight: 600;
color: #667eea;
}
.progress-bar {
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 4px;
transition: width 0.3s ease;
}
.game-images {
margin: 20px 0;
}
.image-container {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.game-screenshot {
max-width: 100%;
max-height: 300px;
object-fit: contain;
}
.placeholder-image {
color: #666;
text-align: center;
padding: 40px;
}
.game-actions {
display: flex;
gap: 12px;
margin: 20px 0;
}
.action-btn {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.completed-btn {
background: #28a745;
.tab-item.active {
background: #4CAF50;
color: white;
border-bottom-color: #4CAF50;
}
.tab-item.status-tab {
background: #2196F3;
color: white;
}
.current-btn {
background: #ffc107;
color: #212529;
.tab-item.target-tab {
color: #f44336;
font-weight: 600;
}
.pending-btn {
background: #6c757d;
color: white;
/* 标签内容区域 */
.tab-content {
flex: 1;
padding: 16px;
display: flex;
flex-direction: column;
}
.bottom-info {
text-align: center;
padding: 20px 0;
border-top: 1px solid #e9ecef;
margin-top: auto;
/* 标签按钮区域 */
.tab-buttons {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.safe-text {
color: #666;
.tab-btn {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
font-size: 14px;
margin: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-btn.qq-active {
background: #4CAF50;
color: white;
border-color: #4CAF50;
}
.tab-btn.ios-btn {
background: #2196F3;
color: white;
border-color: #2196F3;
}
.target-points {
margin-left: auto;
color: #f44336;
font-weight: 600;
font-size: 16px;
}
/* 状态消息 */
.status-message {
background: #fff3cd;
color: #856404;
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 20px;
text-align: center;
font-size: 14px;
border-left: 4px solid #f44336;
}
/* 功能按钮网格 */
.function-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
flex: 1;
}
.function-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 12px;
border: 1px solid #e9ecef;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
min-height: 100px;
}
.function-item:hover {
background: #f8f9fa;
border-color: #4CAF50;
}
.function-icon {
font-size: 32px;
margin-bottom: 8px;
line-height: 1;
}
.function-text {
font-size: 12px;
color: #333;
text-align: center;
line-height: 1.3;
font-weight: 500;
}
/* 游戏截图展示区域 */
.image-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.image-item {
display: flex;
flex-direction: column;
align-items: center;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.image-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.game-image {
width: 100%;
max-width: 150px;
height: auto;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 8px;
}
.image-label {
font-size: 12px;
color: #333;
font-weight: 500;
text-align: center;
}
/* 底部状态显示 */
.bottom-status {
text-align: center;
padding: 20px;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
margin: 0 -16px -16px -16px;
font-size: 18px;
font-weight: 600;
color: #333;
}
/* 刷新等待界面 */
@@ -1240,8 +1258,69 @@ export default {
height: 150px;
}
.game-actions {
/* 移动端二界面优化 */
.tab-item {
padding: 10px 8px;
font-size: 12px;
}
.tab-buttons {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.tab-btn {
padding: 12px;
text-align: center;
}
.target-points {
margin-left: 0;
text-align: center;
margin-top: 8px;
}
.function-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.function-item {
padding: 16px 8px;
min-height: 80px;
}
.function-icon {
font-size: 24px;
}
.function-text {
font-size: 11px;
}
.status-message {
font-size: 13px;
padding: 10px 12px;
}
/* 移动端图片画廊优化 */
.image-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.image-item {
padding: 8px;
}
.game-image {
max-width: 120px;
}
.image-label {
font-size: 11px;
}
}
</style>