优化API请求，移除时间戳参数以简化链接生成，更新二维码提示信息，调整区域选择按钮样式，提升用户交互体验

优化总点数显示逻辑，调整初始值为null并从API获取真实数据，改进游戏界面状态处理，提升用户体验
2025-11-06 22:50:44 +08:00 · 2025-11-06 18:56:26 +08:00
10 changed files with 140 additions and 42 deletions
--- a/src/api/play.js
+++ b/src/api/play.js
@@ -6,7 +6,7 @@ import http from '@/plugins/http'

 // 获取链接状态
 export function getLinkStatus(code) {
-  return http.get(`/api/link/status?t=${Date.now()}`, {
+  return http.get('/api/link/status', {
    params: { code }
  })
 }
@@ -34,12 +34,12 @@ export function pollLoginStatus(code) {

 // 获取游戏界面数据
 export function getGameInterface(code) {
-  return http.get(`/api/link/${code}/game-interface?t=${Date.now()}`)
+  return http.get(`/api/link/${code}/game-interface`)
 }

 // 获取二维码图片（可选，用于代理二维码避免混合内容问题）
 export function getQRCode(code) {
-  return http.get(`/api/link/qr.png?t=${Date.now()}`, {
+  return http.get('/api/link/qr.png', {
    params: { code },
    responseType: 'blob'
  })
--- a/src/components/play/ScanPage.vue
+++ b/src/components/play/ScanPage.vue
@@ -21,7 +21,7 @@
    <!-- 二维码区域 -->
    <div v-else-if="qrInfo && countdown > 0" class="qr-container">
      <div class="qr-section">
-        <div class="qr-title">回验证码扫码</div>
+        <div class="qr-title">请尽快完成扫码!</div>
        <div class="qr-wrapper">
          <img :src="qrInfo.url" class="qr-code" alt="扫码登录" @error="$emit('qrImageError', $event)" @load="$emit('qrImageLoad', $event)" />
        </div>
--- a/src/components/play/SelectRegion.vue
+++ b/src/components/play/SelectRegion.vue
@@ -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>

@@ -33,8 +33,10 @@
        @click="confirmSelection" 
        class="confirm-btn"
        :disabled="!selectedRegion || submitting"
+        :class="{ 'loading': submitting }"
      >
-        确认选择
+        <span v-if="submitting" class="loading-spinner"></span>
+        <span>{{ submitting ? '正在连接...' : '确认选择' }}</span>
      </button>
    </div>

@@ -44,6 +46,7 @@
        @click="selectRegionOption('Q')" 
        class="option-btn qq-option"
        :class="{ 'selected': selectedRegion === 'QQ区' }"
+        :disabled="submitting"
      >
        <div class="option-icon qq-icon">
          <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
@@ -57,6 +60,7 @@
        @click="selectRegionOption('V')" 
        class="option-btn wx-option"
        :class="{ 'selected': selectedRegion === '微信区' }"
+        :disabled="submitting"
      >
        <div class="option-icon wx-icon">
          <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
@@ -92,7 +96,7 @@ export default {
    },
    totalPoints: {
      type: Number,
-      default: 4000
+      default: null
    }
  },
  data() {
@@ -103,6 +107,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
@@ -231,6 +245,10 @@ export default {
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
 }

 .confirm-btn:hover:not(:disabled) {
@@ -243,6 +261,27 @@ export default {
  cursor: not-allowed;
 }

+.confirm-btn.loading {
+  opacity: 0.8;
+  cursor: wait;
+}
+
+/* Loading Spinner */
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* 选择区域按钮 */
 .region-options {
  flex: 1;
@@ -268,11 +307,16 @@ export default {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

-.option-btn:hover {
+.option-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

+.option-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .option-icon {
  width: 60px;
  height: 60px;
--- a/src/composables/usePlayState.js
+++ b/src/composables/usePlayState.js
@@ -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
    }
@@ -86,7 +112,7 @@ export function usePlayState() {
      state.status = 'LOGGED_IN'
      
      state.assets = {
-        qrCodeUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/二维码.png?t=${new Date().getTime()}` : null,
+        qrCodeUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/二维码.png?t=${Date.now()}` : null,
        ...(gameData.assets || {})
      }
      
@@ -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 
    })
--- a/src/composables/useTimers.js
+++ b/src/composables/useTimers.js
@@ -61,7 +61,7 @@ export function useTimers() {
      } catch (error) {
        console.error('轮询错误:', error)
      }
-    }, 1000)
+    }, 3000) // 修改：轮询间隔从1秒改为3秒
  }

  const startProgressPolling = (code, onProgressUpdate) => {
--- a/src/config/links.js
+++ b/src/config/links.js
@@ -5,19 +5,17 @@ export const LINK_CONFIG = {
  // 基础域名 - 生产环境需要修改为实际域名
  BASE_URL: import.meta.env.VITE_BASE_URL || 'http://localhost:5173',
  
-  // 游戏页面路径
-  GAME_PATH: '/play',
+  // 游戏页面路径（已缩短为空，新生成的链接使用短格式，旧链接 /play/:code 仍然兼容）
+  GAME_PATH: '',
  
  // 机器编号参数名
  CODE_PARAM: 'code',
  
  // 链接地址模板
  getLinkUrl: (codeNo) => {
-    // 生成随机参数：时间戳 + 随机字符串
-    const timestamp = Date.now()
-    const random = Math.random().toString(36).substring(2, 8)
-    const randomParam = `${timestamp}${random}`
-    return `${LINK_CONFIG.BASE_URL}${LINK_CONFIG.GAME_PATH}/${codeNo}?t=${randomParam}`
+    // 如果 GAME_PATH 为空，直接拼接；否则添加斜杠
+    const path = LINK_CONFIG.GAME_PATH ? `${LINK_CONFIG.GAME_PATH}/${codeNo}` : `/${codeNo}`
+    return `${LINK_CONFIG.BASE_URL}${path}`
  }
 }

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,8 +15,9 @@ const NotFound = () => import('@/views/NotFound.vue')

 export const routes = [
  { path: '/login', name: 'Login', component: Login, meta: { public: true, title: '登录' } },
-  { path: '/play/:code', name: 'Play', component: Play, meta: { public: true, title: '上号任务' } },
-  { path: '/play', name: 'PlayLegacy', component: Play, meta: { public: true, title: '上号任务' } },
+  // 保留旧的 /play/:code 路由用于兼容旧链接
+  { path: '/play/:code', name: 'PlayLegacy', component: Play, meta: { public: true, title: '上号任务' } },
+  { path: '/play', name: 'PlayLegacyNoCode', component: Play, meta: { public: true, title: '上号任务' } },
  {
    path: '/',
    component: AdminLayout,
@@ -41,6 +42,8 @@ export const routes = [
      { path: 'announcements', name: 'Announcements', component: AnnouncementList, meta: { title: '公告管理' } },
    ],
  },
+  // 新的短链接路由（放在最后，NotFound之前），用于新生成的链接
+  { path: '/:code', name: 'Play', component: Play, meta: { public: true, title: '上号任务' } },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: { public: true, title: '未找到' } },
 ]

--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -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>

--- a/src/views/oldplay.vue
+++ b/src/views/oldplay.vue
@@ -325,18 +325,18 @@ export default {
          midRewardUrl: gameData.midRewardUrl,
          endRewardUrl: gameData.endRewardUrl,
         
-          qrCodeUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/二维码.png?t=${new Date().getTime()}` : null,
+          qrCodeUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/二维码.png?t=${Date.now()}` : null,
          // 保留原有的assets数据（如果存在）
          ...(gameData.assets || {})
        }
        }else{
        state.assets = {
-            homepageUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/首次主页.png?t=${new Date().getTime()}` : null,
-            firstRewardUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/首次赏金.png?t=${new Date().getTime()}` : null,
-            midRewardUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/中途赏金.png?t=${new Date().getTime()}` : null,
-            endRewardUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/结束赏金.png?t=${new Date().getTime()}` : null,
+            homepageUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/首次主页.png?t=${Date.now()}` : null,
+            firstRewardUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/首次赏金.png?t=${Date.now()}` : null,
+            midRewardUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/中途赏金.png?t=${Date.now()}` : null,
+            endRewardUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/结束赏金.png?t=${Date.now()}` : null,
          
-          qrCodeUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/二维码.png?t=${new Date().getTime()}` : null,
+          qrCodeUrl: gameData.mecmachineId ? `https://uzi1.cn/image/${gameData.mecmachineId}/二维码.png?t=${Date.now()}` : null,
          // 保留原有的assets数据（如果存在）
          ...(gameData.assets || {})
        
@@ -791,7 +791,7 @@ export default {
        } catch (error) {
          console.error('轮询错误:', error)
        }
-      }, 1000)
+      }, 3000) // 修改：轮询间隔从1秒改为3秒
    }

    // 开始进度轮询
--- a/src/views/refund/RefundManagement.vue
+++ b/src/views/refund/RefundManagement.vue
@@ -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
    }

    // 查询
Author	SHA1	Message	Date
zyh	e8c9e80002	优化API请求，移除时间戳参数以简化链接生成，更新二维码提示信息，调整区域选择按钮样式，提升用户交互体验	2025-11-06 22:50:44 +08:00
zyh	e2a9fef1d0	优化总点数显示逻辑，调整初始值为null并从API获取真实数据，改进游戏界面状态处理，提升用户体验	2025-11-06 18:56:26 +08:00