测试访客二维码一次性使用功能

修复内容

问题：文件查找失败：'@/utils/request.js' at pages\auth\phone-auth.vue:14

原因：phone-auth.vue中导入的request文件路径不正确

解决方案：

// 修改前（错误）
import request from '@/utils/request.js'// 修改后（正确）
import { request } from '@/config/api.js'

项目中的request文件说明

1. src/utils/request.js - Vue项目使用的axios工具（用于管理后台）

1. config/api.js - uni-app项目使用的request工具（用于小程序页面）

phone-auth.vue是uni-app页面，应该使用config/api.js中的request方法。

测试步骤

1. 准备测试数据

在数据库中创建测试二维码：

-- 创建未使用的测试二维码
INSERT INTO qr_code_usage (qr_id, butler_phone, butler_name, community, building, unit, floor, room,created_time, is_used, qr_type, expire_time
) VALUES ('TEST_QR_PHONE_001', '13800138000', '测试管家', '测试小区', '1号楼', '1单元', '1楼', '101',NOW(), 0, 'visitor_invitation', DATE_ADD(NOW(), INTERVAL 24 HOUR)
);-- 创建已使用的测试二维码
INSERT INTO qr_code_usage (qr_id, butler_phone, butler_name, community, building, unit, floor, room,created_time, is_used, used_time, visitor_openid, qr_type, expire_time
) VALUES ('TEST_QR_PHONE_002', '13800138000', '测试管家', '测试小区', '1号楼', '1单元', '2楼', '201',NOW(), 1, NOW(), 'test_visitor_123', 'visitor_invitation', DATE_ADD(NOW(), INTERVAL 24 HOUR)
);

2. 测试未使用的二维码

测试URL：

/pages/auth/phone-auth?qrId=TEST_QR_PHONE_001&community=测试小区&building=1号楼&unit=1单元&floor=1楼&room=101

预期结果：

1. 页面正常加载

1. 控制台显示：🔍 检查访客二维码使用状态: TEST_QR_PHONE_001

1. 控制台显示：✅ 访客二维码未使用，允许继续

1. 用户可以正常进行手机授权流程

3. 测试已使用的二维码

测试URL：

/pages/auth/phone-auth?qrId=TEST_QR_PHONE_002&community=测试小区&building=1号楼&unit=1单元&floor=2楼&room=201

预期结果：

1. 页面加载后立即显示错误弹窗

1. 控制台显示：🔒 访客二维码已被使用，拒绝访问

1. 弹窗内容：

标题：二维码已使用
内容：此访客二维码已被使用，无法重复使用。使用时间：[具体时间]
二维码ID：TEST_QR_PHONE_002每个访客二维码只能使用一次，请联系管家重新生成二维码。

1. 点击"知道了"后跳转回首页

4. 测试网络异常情况

操作：

1. 断开网络连接

1. 访问包含qrId的URL

预期结果：

1. 显示网络错误弹窗

1. 控制台显示：❌ 检查访客二维码使用状态时发生异常

1. 弹窗内容：

标题：二维码验证失败
内容：无法验证二维码状态：网络异常，无法验证二维码状态为了安全起见，请重新扫描二维码或联系管家。

5. 测试无效二维码

测试URL：

/pages/auth/phone-auth?qrId=INVALID_QR_ID

预期结果：

1. 显示验证失败弹窗

1. 控制台显示检查失败的相关信息

验证要点

1. 控制台日志检查

观察以下关键日志：

• 🔍 检查访客二维码使用状态: [qrId]

• 🔍 二维码使用状态检查响应: [response]

• ✅ 访客二维码未使用，允许继续 或 🔒 访客二维码已被使用，拒绝访问

2. 网络请求检查

在浏览器开发者工具的Network标签中检查：

• 请求URL：/parking/qrcode/checkUsed

• 请求方法：GET

• 请求参数：qrId, openid

• 响应状态：200

• 响应数据格式正确

3. 数据库状态检查

-- 检查二维码使用状态
SELECT qr_id, is_used, used_time, visitor_openid 
FROM qr_code_usage 
WHERE qr_id IN ('TEST_QR_PHONE_001', 'TEST_QR_PHONE_002');

常见问题排查

1. 导入错误

错误信息：文件查找失败：'@/utils/request.js'
解决方案：确认使用正确的导入路径 import { request } from '@/config/api.js'

2. 接口404错误

错误信息：GET /parking/qrcode/checkUsed 404
解决方案：确认后端服务已启动，且QrCodeController中已添加checkUsed方法

3. 参数传递错误

现象：接口调用成功但参数为空
解决方案：检查URL参数解析逻辑，确认qrId正确提取

4. 用户信息获取失败

现象：openid为空或默认值
解决方案：确认用户已完成微信授权，或使用临时openid进行测试

安全特性验证

1. 早期拦截：在phone-auth.vue阶段就拦截已使用的二维码

1. 双重保护：phone-auth.vue和form.vue都有检查机制

1. 用户友好：提供详细的错误信息和操作指引

1. 容错处理：网络异常时也会阻止访问，确保安全

完整流程测试

1. 正常流程：
   扫描新二维码 → phone-auth.vue检查通过 → 完成授权 → 跳转form.vue → 完成预约 → 二维码标记为已使用

1. 重复使用流程：
   扫描已使用二维码 → phone-auth.vue检查失败 → 显示错误提示 → 阻止继续

1. 异常处理流程：
   网络异常/无效二维码 → 显示相应错误提示 → 引导用户重新操作