Browse Source
feat(passport): 实现统一扫码功能并迁移二维码登录页面 将原有的扫码登录和扫码核销功能合并为统一扫码功能，支持智能识别二维码类型， 自动执行相应操作。同时将二维码登录相关页面迁移到 /passport 路径下，优化用户体验与代码结构。 主要变更： - 新增统一扫码 Hook (useUnifiedQRScan) 和按钮组件 (UnifiedQRButton)- 新增统一扫码页面 /passport/unified-qr/index - 迁移二维码登录页面路径：/pages/qr-login → /passport/qr-login - 更新管理员面板及用户卡片中的扫码入口为统一扫码- 移除旧的 QRLoginDemo 和 qr-test 测试页面- 补充统一扫码使用指南文档```master
20 changed files with 1036 additions and 302 deletions
@ -0,0 +1,212 @@ |
|||
# 统一扫码功能使用指南 |
|||
|
|||
## 🎯 功能概述 |
|||
|
|||
统一扫码功能将原有的**扫码登录**和**扫码核销**合并为一个入口，通过智能识别二维码内容自动执行相应操作。 |
|||
|
|||
## 📋 功能特性 |
|||
|
|||
### ✨ 智能识别 |
|||
- 自动识别登录二维码和核销二维码 |
|||
- 根据二维码内容自动执行相应操作 |
|||
- 支持多种二维码格式（JSON加密、纯文本等） |
|||
|
|||
### 🔄 统一体验 |
|||
- 一个按钮解决两种扫码需求 |
|||
- 统一的UI界面和交互逻辑 |
|||
- 一致的错误处理和状态提示 |
|||
|
|||
### 📱 多入口支持 |
|||
- 用户卡片中的统一扫码按钮 |
|||
- 管理员面板中的统一扫码功能 |
|||
- 独立的统一扫码页面 |
|||
|
|||
## 🛠️ 技术实现 |
|||
|
|||
### 核心文件 |
|||
``` |
|||
src/ |
|||
├── hooks/ |
|||
│ └── useUnifiedQRScan.ts # 统一扫码Hook |
|||
├── components/ |
|||
│ └── UnifiedQRButton.tsx # 统一扫码按钮组件 |
|||
└── pages/ |
|||
└── unified-qr/ |
|||
├── index.tsx # 统一扫码页面 |
|||
└── index.config.ts # 页面配置 |
|||
``` |
|||
|
|||
### Hook：useUnifiedQRScan |
|||
|
|||
```typescript |
|||
import { useUnifiedQRScan, ScanType } from '@/hooks/useUnifiedQRScan'; |
|||
|
|||
const { |
|||
startScan, // 开始扫码 |
|||
isLoading, // 加载状态 |
|||
canScan, // 是否可以扫码 |
|||
state, // 当前状态 |
|||
result, // 扫码结果 |
|||
scanType, // 识别的扫码类型 |
|||
reset // 重置状态 |
|||
} = useUnifiedQRScan(); |
|||
``` |
|||
|
|||
### 组件：UnifiedQRButton |
|||
|
|||
```jsx |
|||
<UnifiedQRButton |
|||
text="扫码" |
|||
size="small" |
|||
onSuccess={(result) => { |
|||
console.log('扫码成功:', result); |
|||
// result.type: 'login' | 'verification' |
|||
// result.data: 具体数据 |
|||
// result.message: 成功消息 |
|||
}} |
|||
onError={(error) => { |
|||
console.error('扫码失败:', error); |
|||
}} |
|||
/> |
|||
``` |
|||
|
|||
## 🎮 使用方式 |
|||
|
|||
### 1. 直接使用统一按钮 |
|||
```jsx |
|||
import UnifiedQRButton from '@/components/UnifiedQRButton'; |
|||
|
|||
// 在需要的地方使用 |
|||
<UnifiedQRButton |
|||
text="智能扫码" |
|||
onSuccess={(result) => { |
|||
if (result.type === 'login') { |
|||
// 处理登录成功 |
|||
} else if (result.type === 'verification') { |
|||
// 处理核销成功 |
|||
} |
|||
}} |
|||
/> |
|||
``` |
|||
|
|||
### 2. 跳转到统一扫码页面 |
|||
```jsx |
|||
// 跳转到统一扫码页面 |
|||
Taro.navigateTo({ |
|||
url: '/passport/unified-qr/index' |
|||
}); |
|||
``` |
|||
|
|||
### 3. 在管理员面板中使用 |
|||
管理员面板已更新，原来的"门店核销"和"扫码登录"合并为"统一扫码"。 |
|||
|
|||
## 🔍 二维码识别逻辑 |
|||
|
|||
### 登录二维码 |
|||
- **格式**: 包含登录token的URL或纯文本 |
|||
- **处理**: 自动解析token并确认登录 |
|||
- **示例**: `https://example.com/login?token=xxx` |
|||
|
|||
### 核销二维码 |
|||
- **JSON格式**: `{"businessType":"gift","token":"xxx","data":"encrypted_data"}` |
|||
- **纯文本格式**: 6位数字核销码 |
|||
- **处理**: 解密数据（如需要）-> 验证核销码 -> 执行核销 |
|||
|
|||
### 识别优先级 |
|||
1. 首先检查是否为JSON格式的核销二维码 |
|||
2. 然后检查是否为登录二维码 |
|||
3. 最后检查是否为纯数字核销码 |
|||
4. 如果都不匹配，提示"不支持的二维码类型" |
|||
|
|||
## 📊 用户体验优化 |
|||
|
|||
### 智能提示 |
|||
- 扫码过程中显示当前状态 |
|||
- 根据识别结果给出相应提示 |
|||
- 核销成功后询问是否继续扫码 |
|||
|
|||
### 历史记录 |
|||
- 保留最近5次扫码记录 |
|||
- 显示扫码类型、时间和结果 |
|||
- 方便用户查看操作历史 |
|||
|
|||
### 错误处理 |
|||
- 统一的错误提示机制 |
|||
- 具体的错误原因说明 |
|||
- 便捷的重试和重置功能 |
|||
|
|||
## 🔄 迁移指南 |
|||
|
|||
### 从原有功能迁移 |
|||
|
|||
#### 替换扫码登录按钮 |
|||
```jsx |
|||
// 原来 |
|||
<QRLoginButton /> |
|||
|
|||
// 现在 |
|||
<UnifiedQRButton text="扫码登录" /> |
|||
``` |
|||
|
|||
#### 替换核销按钮 |
|||
```jsx |
|||
// 原来 |
|||
<Button onClick={() => navTo('/user/store/verification')}> |
|||
扫码核销 |
|||
</Button> |
|||
|
|||
// 现在 |
|||
<UnifiedQRButton text="扫码核销" /> |
|||
``` |
|||
|
|||
#### 管理员面板更新 |
|||
管理员面板自动合并了原有的两个扫码功能，无需额外操作。 |
|||
|
|||
## 🚀 优势总结 |
|||
|
|||
### 用户体验 |
|||
- ✅ **简化操作**: 一个按钮处理所有扫码需求 |
|||
- ✅ **智能识别**: 无需用户手动选择扫码类型 |
|||
- ✅ **统一界面**: 一致的交互体验 |
|||
|
|||
### 开发维护 |
|||
- ✅ **代码复用**: 统一的扫码逻辑和错误处理 |
|||
- ✅ **易于扩展**: 新增扫码类型只需修改识别逻辑 |
|||
- ✅ **降低复杂度**: 减少重复代码和功能入口 |
|||
|
|||
### 功能完整性 |
|||
- ✅ **保留所有原功能**: 登录和核销功能完全保留 |
|||
- ✅ **增强用户体验**: 添加历史记录和智能提示 |
|||
- ✅ **向后兼容**: 原有的单独页面仍然可用 |
|||
|
|||
## 🔧 配置说明 |
|||
|
|||
### 页面路由配置 |
|||
需要在 `app.config.ts` 中添加新页面路由： |
|||
|
|||
```typescript |
|||
export default { |
|||
pages: [ |
|||
// ... 其他页面 |
|||
'passport/unified-qr/index' |
|||
] |
|||
} |
|||
``` |
|||
|
|||
### 权限要求 |
|||
- **扫码权限**: 所有用户都可以扫码 |
|||
- **登录功能**: 需要用户已登录小程序 |
|||
- **核销功能**: 需要管理员权限 |
|||
|
|||
## 🎯 未来规划 |
|||
|
|||
### 扩展可能性 |
|||
- 支持更多类型的二维码（商品码、活动码等） |
|||
- 增加扫码统计和分析功能 |
|||
- 支持批量扫码操作 |
|||
- 增加扫码记录的云端同步 |
|||
|
|||
### 性能优化 |
|||
- 扫码响应速度优化 |
|||
- 二维码识别准确率提升 |
|||
- 网络请求优化和缓存机制 |
|||
@ -1,184 +0,0 @@ |
|||
import React, { useState } from 'react'; |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Button, Card } from '@nutui/nutui-react-taro'; |
|||
import { Scan, User } from '@nutui/icons-react-taro'; |
|||
import Taro from '@tarojs/taro'; |
|||
import QRLoginButton from './QRLoginButton'; |
|||
import QRScanModal from './QRScanModal'; |
|||
import { useUser } from '@/hooks/useUser'; |
|||
|
|||
/** |
|||
* 扫码登录功能演示组件 |
|||
* 展示如何在页面中集成扫码登录功能 |
|||
*/ |
|||
const QRLoginDemo: React.FC = () => { |
|||
const { user, getDisplayName } = useUser(); |
|||
const [showScanModal, setShowScanModal] = useState(false); |
|||
const [loginHistory, setLoginHistory] = useState<any[]>([]); |
|||
|
|||
// 处理扫码成功
|
|||
const handleScanSuccess = (result: any) => { |
|||
console.log('扫码登录成功:', result); |
|||
|
|||
// 添加到历史记录
|
|||
const newRecord = { |
|||
id: Date.now(), |
|||
time: new Date().toLocaleString(), |
|||
success: true, |
|||
userInfo: result.userInfo |
|||
}; |
|||
setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); |
|||
}; |
|||
|
|||
// 处理扫码失败
|
|||
const handleScanError = (error: string) => { |
|||
console.error('扫码登录失败:', error); |
|||
|
|||
// 添加到历史记录
|
|||
const newRecord = { |
|||
id: Date.now(), |
|||
time: new Date().toLocaleString(), |
|||
success: false, |
|||
error |
|||
}; |
|||
setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); |
|||
}; |
|||
|
|||
// 跳转到专门的扫码页面
|
|||
const goToQRLoginPage = () => { |
|||
Taro.navigateTo({ |
|||
url: '/pages/qr-login/index' |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<View className="qr-login-demo p-4"> |
|||
{/* 用户信息 */} |
|||
<Card className="mb-4"> |
|||
<View className="p-4"> |
|||
<View className="flex items-center mb-4"> |
|||
<View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
|||
<User className="text-blue-500" size="24" /> |
|||
</View> |
|||
<View> |
|||
<Text className="text-lg font-bold text-gray-800 block"> |
|||
{getDisplayName()} |
|||
</Text> |
|||
<Text className="text-sm text-gray-500 block"> |
|||
当前登录用户 |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 扫码登录方式 */} |
|||
<Card className="mb-4"> |
|||
<View className="p-4"> |
|||
<Text className="text-lg font-bold mb-4 block">扫码登录方式</Text> |
|||
|
|||
<View className="space-y-3"> |
|||
{/* 方式1: 直接扫码按钮 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式1: 直接扫码登录 |
|||
</Text> |
|||
<QRLoginButton |
|||
text="立即扫码登录" |
|||
onSuccess={handleScanSuccess} |
|||
onError={handleScanError} |
|||
/> |
|||
</View> |
|||
|
|||
{/* 方式2: 弹窗扫码 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式2: 弹窗扫码 |
|||
</Text> |
|||
<Button |
|||
type="success" |
|||
size="normal" |
|||
onClick={() => setShowScanModal(true)} |
|||
> |
|||
<Scan className="mr-2" /> |
|||
弹窗扫码 |
|||
</Button> |
|||
</View> |
|||
|
|||
{/* 方式3: 跳转到专门页面 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式3: 专门页面 |
|||
</Text> |
|||
<QRLoginButton |
|||
text="进入扫码页面" |
|||
type="warning" |
|||
usePageMode={true} |
|||
/> |
|||
</View> |
|||
|
|||
{/* 方式4: 自定义按钮 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式4: 自定义跳转 |
|||
</Text> |
|||
<Button |
|||
type="default" |
|||
size="normal" |
|||
onClick={goToQRLoginPage} |
|||
> |
|||
自定义跳转 |
|||
</Button> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 登录历史 */} |
|||
{loginHistory.length > 0 && ( |
|||
<Card> |
|||
<View className="p-4"> |
|||
<Text className="text-lg font-bold mb-4 block">最近登录记录</Text> |
|||
|
|||
<View className="space-y-2"> |
|||
{loginHistory.map((record) => ( |
|||
<View |
|||
key={record.id} |
|||
className="p-3 bg-gray-50 rounded-lg" |
|||
> |
|||
<View className="flex items-center justify-between"> |
|||
<View> |
|||
<Text className={`text-sm font-medium ${ |
|||
record.success ? 'text-green-600' : 'text-red-600' |
|||
} block`}>
|
|||
{record.success ? '登录成功' : '登录失败'} |
|||
</Text> |
|||
{record.error && ( |
|||
<Text className="text-xs text-red-500 block"> |
|||
{record.error} |
|||
</Text> |
|||
)} |
|||
</View> |
|||
<Text className="text-xs text-gray-500"> |
|||
{record.time} |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
))} |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
)} |
|||
|
|||
{/* 扫码弹窗 */} |
|||
<QRScanModal |
|||
visible={showScanModal} |
|||
onClose={() => setShowScanModal(false)} |
|||
onSuccess={handleScanSuccess} |
|||
onError={handleScanError} |
|||
/> |
|||
</View> |
|||
); |
|||
}; |
|||
|
|||
export default QRLoginDemo; |
|||
@ -0,0 +1,126 @@ |
|||
import React from 'react'; |
|||
import { Button } from '@nutui/nutui-react-taro'; |
|||
import { View } from '@tarojs/components'; |
|||
import { Scan } from '@nutui/icons-react-taro'; |
|||
import Taro from '@tarojs/taro'; |
|||
import { useUnifiedQRScan, ScanType, type UnifiedScanResult } from '@/hooks/useUnifiedQRScan'; |
|||
|
|||
export interface UnifiedQRButtonProps { |
|||
/** 按钮类型 */ |
|||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'default'; |
|||
/** 按钮大小 */ |
|||
size?: 'large' | 'normal' | 'small'; |
|||
/** 按钮文本 */ |
|||
text?: string; |
|||
/** 是否显示图标 */ |
|||
showIcon?: boolean; |
|||
/** 自定义样式类名 */ |
|||
className?: string; |
|||
/** 扫码成功回调 */ |
|||
onSuccess?: (result: UnifiedScanResult) => void; |
|||
/** 扫码失败回调 */ |
|||
onError?: (error: string) => void; |
|||
/** 是否使用页面模式（跳转到专门页面） */ |
|||
usePageMode?: boolean; |
|||
} |
|||
|
|||
/** |
|||
* 统一扫码按钮组件 |
|||
* 支持登录和核销两种类型的二维码扫描 |
|||
*/ |
|||
const UnifiedQRButton: React.FC<UnifiedQRButtonProps> = ({ |
|||
type = 'default', |
|||
size = 'small', |
|||
text = '扫码', |
|||
showIcon = true, |
|||
onSuccess, |
|||
onError, |
|||
usePageMode = false |
|||
}) => { |
|||
const { startScan, isLoading, canScan, state, result } = useUnifiedQRScan(); |
|||
console.log(result,'useUnifiedQRScan>>result') |
|||
// 处理点击事件
|
|||
const handleClick = async () => { |
|||
if (usePageMode) { |
|||
// 跳转到专门的统一扫码页面
|
|||
if (canScan()) { |
|||
Taro.navigateTo({ |
|||
url: '/passport/unified-qr/index' |
|||
}); |
|||
} else { |
|||
Taro.showToast({ |
|||
title: '请先登录小程序', |
|||
icon: 'error' |
|||
}); |
|||
} |
|||
return; |
|||
} |
|||
|
|||
// 直接执行扫码
|
|||
try { |
|||
const scanResult = await startScan(); |
|||
if (scanResult) { |
|||
onSuccess?.(scanResult); |
|||
|
|||
// 根据扫码类型给出不同的后续提示
|
|||
if (scanResult.type === ScanType.VERIFICATION) { |
|||
// 核销成功后可以继续扫码
|
|||
setTimeout(() => { |
|||
Taro.showModal({ |
|||
title: '核销成功', |
|||
content: '是否继续扫码核销其他礼品卡？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
handleClick(); // 递归调用继续扫码
|
|||
} |
|||
} |
|||
}); |
|||
}, 2000); |
|||
} |
|||
} |
|||
} catch (error: any) { |
|||
onError?.(error.message || '扫码失败'); |
|||
} |
|||
}; |
|||
|
|||
const disabled = !canScan() || isLoading; |
|||
|
|||
// 根据当前状态动态显示文本
|
|||
const getButtonText = () => { |
|||
if (isLoading) { |
|||
switch (state) { |
|||
case 'scanning': |
|||
return '扫码中...'; |
|||
case 'processing': |
|||
return '处理中...'; |
|||
default: |
|||
return '扫码中...'; |
|||
} |
|||
} |
|||
|
|||
if (disabled && !canScan()) { |
|||
return '请先登录'; |
|||
} |
|||
|
|||
return text; |
|||
}; |
|||
|
|||
return ( |
|||
<Button |
|||
type={type} |
|||
size={size} |
|||
loading={isLoading} |
|||
disabled={disabled} |
|||
onClick={handleClick} |
|||
> |
|||
<View className="flex items-center justify-center"> |
|||
{showIcon && !isLoading && ( |
|||
<Scan className="mr-1" /> |
|||
)} |
|||
{getButtonText()} |
|||
</View> |
|||
</Button> |
|||
); |
|||
}; |
|||
|
|||
export default UnifiedQRButton; |
|||
@ -0,0 +1,332 @@ |
|||
import { useState, useCallback, useRef, useEffect } from 'react'; |
|||
import Taro from '@tarojs/taro'; |
|||
import { |
|||
confirmWechatQRLogin, |
|||
parseQRContent |
|||
} from '@/api/qr-login'; |
|||
import { getShopGiftByCode, updateShopGift, decryptQrData } from "@/api/shop/shopGift"; |
|||
import { useUser } from "@/hooks/useUser"; |
|||
import { isValidJSON } from "@/utils/jsonUtils"; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
/** |
|||
* 统一扫码状态 |
|||
*/ |
|||
export enum UnifiedScanState { |
|||
IDLE = 'idle', // 空闲状态
|
|||
SCANNING = 'scanning', // 正在扫码
|
|||
PROCESSING = 'processing', // 正在处理
|
|||
SUCCESS = 'success', // 处理成功
|
|||
ERROR = 'error' // 处理失败
|
|||
} |
|||
|
|||
/** |
|||
* 扫码类型 |
|||
*/ |
|||
export enum ScanType { |
|||
LOGIN = 'login', // 登录二维码
|
|||
VERIFICATION = 'verification', // 核销二维码
|
|||
UNKNOWN = 'unknown' // 未知类型
|
|||
} |
|||
|
|||
/** |
|||
* 统一扫码结果 |
|||
*/ |
|||
export interface UnifiedScanResult { |
|||
type: ScanType; |
|||
data: any; |
|||
message: string; |
|||
} |
|||
|
|||
/** |
|||
* 统一扫码Hook |
|||
* 可以处理登录和核销两种类型的二维码 |
|||
*/ |
|||
export function useUnifiedQRScan() { |
|||
const { isAdmin } = useUser(); |
|||
const [state, setState] = useState<UnifiedScanState>(UnifiedScanState.IDLE); |
|||
const [error, setError] = useState<string>(''); |
|||
const [result, setResult] = useState<UnifiedScanResult | null>(null); |
|||
const [isLoading, setIsLoading] = useState(false); |
|||
const [scanType, setScanType] = useState<ScanType>(ScanType.UNKNOWN); |
|||
|
|||
// 用于取消操作的引用
|
|||
const cancelRef = useRef<boolean>(false); |
|||
|
|||
/** |
|||
* 重置状态 |
|||
*/ |
|||
const reset = useCallback(() => { |
|||
setState(UnifiedScanState.IDLE); |
|||
setError(''); |
|||
setResult(null); |
|||
setIsLoading(false); |
|||
setScanType(ScanType.UNKNOWN); |
|||
cancelRef.current = false; |
|||
}, []); |
|||
|
|||
/** |
|||
* 检测二维码类型 |
|||
*/ |
|||
const detectScanType = useCallback((scanResult: string): ScanType => { |
|||
try { |
|||
// 1. 检查是否为JSON格式（核销二维码）
|
|||
if (isValidJSON(scanResult)) { |
|||
const json = JSON.parse(scanResult); |
|||
if (json.businessType === 'gift' && json.token && json.data) { |
|||
return ScanType.VERIFICATION; |
|||
} |
|||
} |
|||
|
|||
// 2. 检查是否为登录二维码
|
|||
const loginToken = parseQRContent(scanResult); |
|||
if (loginToken) { |
|||
return ScanType.LOGIN; |
|||
} |
|||
|
|||
// 3. 检查是否为纯文本核销码（6位数字）
|
|||
if (/^\d{6}$/.test(scanResult.trim())) { |
|||
return ScanType.VERIFICATION; |
|||
} |
|||
|
|||
return ScanType.UNKNOWN; |
|||
} catch (error) { |
|||
console.error('检测二维码类型失败:', error); |
|||
return ScanType.UNKNOWN; |
|||
} |
|||
}, []); |
|||
|
|||
/** |
|||
* 处理登录二维码 |
|||
*/ |
|||
const handleLoginQR = useCallback(async (scanResult: string): Promise<UnifiedScanResult> => { |
|||
const userId = Taro.getStorageSync('UserId'); |
|||
if (!userId) { |
|||
throw new Error('请先登录小程序'); |
|||
} |
|||
|
|||
const token = parseQRContent(scanResult); |
|||
if (!token) { |
|||
throw new Error('无效的登录二维码'); |
|||
} |
|||
|
|||
const confirmResult = await confirmWechatQRLogin(token, parseInt(userId)); |
|||
|
|||
if (confirmResult.success) { |
|||
return { |
|||
type: ScanType.LOGIN, |
|||
data: confirmResult, |
|||
message: '登录确认成功' |
|||
}; |
|||
} else { |
|||
throw new Error(confirmResult.message || '登录确认失败'); |
|||
} |
|||
}, []); |
|||
|
|||
/** |
|||
* 处理核销二维码 |
|||
*/ |
|||
const handleVerificationQR = useCallback(async (scanResult: string): Promise<UnifiedScanResult> => { |
|||
if (!isAdmin()) { |
|||
throw new Error('您没有核销权限'); |
|||
} |
|||
|
|||
let code = ''; |
|||
|
|||
// 判断是否为加密的JSON格式
|
|||
if (isValidJSON(scanResult)) { |
|||
const json = JSON.parse(scanResult); |
|||
if (json.businessType === 'gift' && json.token && json.data) { |
|||
// 解密获取核销码
|
|||
const decryptedData = await decryptQrData({ |
|||
token: json.token, |
|||
encryptedData: json.data |
|||
}); |
|||
|
|||
if (decryptedData) { |
|||
code = decryptedData.toString(); |
|||
} else { |
|||
throw new Error('解密失败'); |
|||
} |
|||
} |
|||
} else { |
|||
// 直接使用扫码结果作为核销码
|
|||
code = scanResult.trim(); |
|||
} |
|||
|
|||
if (!code) { |
|||
throw new Error('无法获取有效的核销码'); |
|||
} |
|||
|
|||
// 验证核销码
|
|||
const gift = await getShopGiftByCode(code); |
|||
|
|||
if (!gift) { |
|||
throw new Error('核销码无效'); |
|||
} |
|||
|
|||
if (gift.status === 1) { |
|||
throw new Error('此礼品码已使用'); |
|||
} |
|||
|
|||
if (gift.status === 2) { |
|||
throw new Error('此礼品码已失效'); |
|||
} |
|||
|
|||
if (gift.userId === 0) { |
|||
throw new Error('此礼品码未认领'); |
|||
} |
|||
|
|||
// 执行核销
|
|||
await updateShopGift({ |
|||
...gift, |
|||
status: 1, |
|||
operatorUserId: Number(Taro.getStorageSync('UserId')) || 0, |
|||
takeTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
|||
verificationTime: dayjs().format('YYYY-MM-DD HH:mm:ss') |
|||
}); |
|||
|
|||
return { |
|||
type: ScanType.VERIFICATION, |
|||
data: gift, |
|||
message: '核销成功' |
|||
}; |
|||
}, [isAdmin]); |
|||
|
|||
/** |
|||
* 开始扫码 |
|||
*/ |
|||
const startScan = useCallback(async (): Promise<UnifiedScanResult | null> => { |
|||
try { |
|||
reset(); |
|||
setState(UnifiedScanState.SCANNING); |
|||
|
|||
// 调用扫码API
|
|||
const scanResult = await new Promise<string>((resolve, reject) => { |
|||
Taro.scanCode({ |
|||
onlyFromCamera: true, |
|||
scanType: ['qrCode'], |
|||
success: (res) => { |
|||
if (res.result) { |
|||
resolve(res.result); |
|||
} else { |
|||
reject(new Error('扫码结果为空')); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
reject(new Error(err.errMsg || '扫码失败')); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
// 检查是否被取消
|
|||
if (cancelRef.current) { |
|||
return null; |
|||
} |
|||
|
|||
// 检测二维码类型
|
|||
const type = detectScanType(scanResult); |
|||
setScanType(type); |
|||
|
|||
if (type === ScanType.UNKNOWN) { |
|||
throw new Error('不支持的二维码类型'); |
|||
} |
|||
|
|||
// 开始处理
|
|||
setState(UnifiedScanState.PROCESSING); |
|||
setIsLoading(true); |
|||
|
|||
let result: UnifiedScanResult; |
|||
|
|||
switch (type) { |
|||
case ScanType.LOGIN: |
|||
result = await handleLoginQR(scanResult); |
|||
break; |
|||
case ScanType.VERIFICATION: |
|||
result = await handleVerificationQR(scanResult); |
|||
break; |
|||
default: |
|||
throw new Error('未知的扫码类型'); |
|||
} |
|||
|
|||
if (cancelRef.current) { |
|||
return null; |
|||
} |
|||
|
|||
setState(UnifiedScanState.SUCCESS); |
|||
setResult(result); |
|||
|
|||
// 显示成功提示
|
|||
Taro.showToast({ |
|||
title: result.message, |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}); |
|||
|
|||
return result; |
|||
|
|||
} catch (err: any) { |
|||
if (!cancelRef.current) { |
|||
setState(UnifiedScanState.ERROR); |
|||
const errorMessage = err.message || '处理失败'; |
|||
setError(errorMessage); |
|||
|
|||
// 显示错误提示
|
|||
Taro.showToast({ |
|||
title: errorMessage, |
|||
icon: 'error', |
|||
duration: 3000 |
|||
}); |
|||
} |
|||
return null; |
|||
} finally { |
|||
setIsLoading(false); |
|||
} |
|||
}, [reset, detectScanType, handleLoginQR, handleVerificationQR]); |
|||
|
|||
/** |
|||
* 取消扫码 |
|||
*/ |
|||
const cancel = useCallback(() => { |
|||
cancelRef.current = true; |
|||
reset(); |
|||
}, [reset]); |
|||
|
|||
/** |
|||
* 检查是否可以进行扫码 |
|||
*/ |
|||
const canScan = useCallback(() => { |
|||
const userId = Taro.getStorageSync('UserId'); |
|||
const accessToken = Taro.getStorageSync('access_token'); |
|||
return !!(userId && accessToken); |
|||
}, []); |
|||
|
|||
// 组件卸载时取消操作
|
|||
useEffect(() => { |
|||
return () => { |
|||
cancelRef.current = true; |
|||
}; |
|||
}, []); |
|||
|
|||
return { |
|||
// 状态
|
|||
state, |
|||
error, |
|||
result, |
|||
isLoading, |
|||
scanType, |
|||
|
|||
// 方法
|
|||
startScan, |
|||
cancel, |
|||
reset, |
|||
canScan, |
|||
|
|||
// 便捷状态判断
|
|||
isIdle: state === UnifiedScanState.IDLE, |
|||
isScanning: state === UnifiedScanState.SCANNING, |
|||
isProcessing: state === UnifiedScanState.PROCESSING, |
|||
isSuccess: state === UnifiedScanState.SUCCESS, |
|||
isError: state === UnifiedScanState.ERROR |
|||
}; |
|||
} |
|||
@ -1,5 +0,0 @@ |
|||
export default { |
|||
navigationBarTitleText: '扫码登录测试', |
|||
navigationBarTextStyle: 'black', |
|||
navigationBarBackgroundColor: '#ffffff' |
|||
} |
|||
@ -1,33 +0,0 @@ |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Card } from '@nutui/nutui-react-taro'; |
|||
import QRLoginDemo from '@/components/QRLoginDemo'; |
|||
import QRLoginButton from "@/components/QRLoginButton"; |
|||
|
|||
/** |
|||
* 扫码登录测试页面 |
|||
*/ |
|||
const QRTestPage = () => { |
|||
return ( |
|||
<View className="qr-test-page min-h-screen bg-gray-50"> |
|||
<QRLoginButton /> |
|||
<View className="p-4"> |
|||
{/* 页面标题 */} |
|||
<Card className="mb-4"> |
|||
<View className="p-4 text-center"> |
|||
<Text className="text-xl font-bold text-gray-800 mb-2 block"> |
|||
扫码登录功能测试 |
|||
</Text> |
|||
<Text className="text-sm text-gray-600 block"> |
|||
测试各种扫码登录集成方式 |
|||
</Text> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 演示组件 */} |
|||
<QRLoginDemo /> |
|||
</View> |
|||
</View> |
|||
); |
|||
}; |
|||
|
|||
export default QRTestPage; |
|||
@ -0,0 +1,4 @@ |
|||
export default { |
|||
navigationBarTitleText: '统一扫码', |
|||
navigationBarTextStyle: 'black' |
|||
} |
|||
@ -0,0 +1,320 @@ |
|||
import React, { useState } from 'react'; |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Card, Button, Tag } from '@nutui/nutui-react-taro'; |
|||
import { Scan, Success, Failure, Tips, ArrowLeft } from '@nutui/icons-react-taro'; |
|||
import Taro from '@tarojs/taro'; |
|||
import { useUnifiedQRScan, ScanType, type UnifiedScanResult } from '@/hooks/useUnifiedQRScan'; |
|||
|
|||
/** |
|||
* 统一扫码页面 |
|||
* 支持登录和核销两种类型的二维码扫描 |
|||
*/ |
|||
const UnifiedQRPage: React.FC = () => { |
|||
const [scanHistory, setScanHistory] = useState<any[]>([]); |
|||
const { |
|||
startScan, |
|||
isLoading, |
|||
canScan, |
|||
state, |
|||
result, |
|||
error, |
|||
scanType, |
|||
reset |
|||
} = useUnifiedQRScan(); |
|||
|
|||
// 处理扫码成功
|
|||
const handleScanSuccess = (result: UnifiedScanResult) => { |
|||
console.log('扫码成功:', result); |
|||
|
|||
// 添加到扫码历史
|
|||
const newRecord = { |
|||
id: Date.now(), |
|||
time: new Date().toLocaleString(), |
|||
type: result.type, |
|||
data: result.data, |
|||
message: result.message, |
|||
success: true |
|||
}; |
|||
setScanHistory(prev => [newRecord, ...prev.slice(0, 4)]); // 只保留最近5条记录
|
|||
|
|||
// 根据类型给出不同提示
|
|||
if (result.type === ScanType.VERIFICATION) { |
|||
// 核销成功后询问是否继续扫码
|
|||
setTimeout(() => { |
|||
Taro.showModal({ |
|||
title: '核销成功', |
|||
content: '是否继续扫码核销其他礼品卡？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
handleStartScan(); |
|||
} |
|||
} |
|||
}); |
|||
}, 2000); |
|||
} |
|||
}; |
|||
|
|||
// 处理扫码失败
|
|||
const handleScanError = (error: string) => { |
|||
console.error('扫码失败:', error); |
|||
|
|||
// 添加到扫码历史
|
|||
const newRecord = { |
|||
id: Date.now(), |
|||
time: new Date().toLocaleString(), |
|||
error, |
|||
success: false |
|||
}; |
|||
setScanHistory(prev => [newRecord, ...prev.slice(0, 4)]); // 只保留最近5条记录
|
|||
}; |
|||
|
|||
// 开始扫码
|
|||
const handleStartScan = async () => { |
|||
try { |
|||
const scanResult = await startScan(); |
|||
if (scanResult) { |
|||
handleScanSuccess(scanResult); |
|||
} |
|||
} catch (error: any) { |
|||
handleScanError(error.message || '扫码失败'); |
|||
} |
|||
}; |
|||
|
|||
// 返回上一页
|
|||
const handleGoBack = () => { |
|||
Taro.navigateBack(); |
|||
}; |
|||
|
|||
// 获取状态图标
|
|||
const getStatusIcon = (success: boolean, type?: ScanType) => { |
|||
console.log(type,'获取状态图标') |
|||
if (success) { |
|||
return <Success className="text-green-500" size="16" />; |
|||
} else { |
|||
return <Failure className="text-red-500" size="16" />; |
|||
} |
|||
}; |
|||
|
|||
// 获取类型标签
|
|||
const getTypeTag = (type: ScanType) => { |
|||
switch (type) { |
|||
case ScanType.LOGIN: |
|||
return <Tag type="success">登录</Tag>; |
|||
case ScanType.VERIFICATION: |
|||
return <Tag type="warning">核销</Tag>; |
|||
default: |
|||
return <Tag type="default">未知</Tag>; |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<View className="unified-qr-page min-h-screen bg-gray-50"> |
|||
{/* 页面头部 */} |
|||
<View className="bg-white px-4 py-3 border-b border-gray-100 flex items-center"> |
|||
<ArrowLeft |
|||
className="text-gray-600 mr-3" |
|||
size="20" |
|||
onClick={handleGoBack} |
|||
/> |
|||
<View className="flex-1"> |
|||
<Text className="text-lg font-bold">统一扫码</Text> |
|||
<Text className="text-sm text-gray-600 block"> |
|||
支持登录和核销功能 |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 主要扫码区域 */} |
|||
<Card className="m-4"> |
|||
<View className="text-center py-6"> |
|||
{/* 状态显示 */} |
|||
{state === 'idle' && ( |
|||
<> |
|||
<Scan className="text-blue-500 mx-auto mb-4" size="48" /> |
|||
<Text className="text-lg font-medium text-gray-800 mb-2 block"> |
|||
智能扫码 |
|||
</Text> |
|||
<Text className="text-gray-600 mb-6 block"> |
|||
自动识别登录和核销二维码 |
|||
</Text> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleStartScan} |
|||
disabled={!canScan() || isLoading} |
|||
className="w-full" |
|||
> |
|||
{canScan() ? '开始扫码' : '请先登录'} |
|||
</Button> |
|||
</> |
|||
)} |
|||
|
|||
{state === 'scanning' && ( |
|||
<> |
|||
<Scan className="text-blue-500 mx-auto mb-4" size="48" /> |
|||
<Text className="text-lg font-medium text-blue-600 mb-2 block"> |
|||
扫码中... |
|||
</Text> |
|||
<Text className="text-gray-600 mb-6 block"> |
|||
请对准二维码 |
|||
</Text> |
|||
<Button |
|||
type="default" |
|||
size="large" |
|||
onClick={reset} |
|||
className="w-full" |
|||
> |
|||
取消 |
|||
</Button> |
|||
</> |
|||
)} |
|||
|
|||
{state === 'processing' && ( |
|||
<> |
|||
<View className="text-orange-500 mx-auto mb-4"> |
|||
<Tips size="48" /> |
|||
</View> |
|||
<Text className="text-lg font-medium text-orange-600 mb-2 block"> |
|||
处理中... |
|||
</Text> |
|||
<Text className="text-gray-600 mb-6 block"> |
|||
{scanType === ScanType.LOGIN ? '正在确认登录' : |
|||
scanType === ScanType.VERIFICATION ? '正在核销礼品卡' : '正在处理'} |
|||
</Text> |
|||
</> |
|||
)} |
|||
|
|||
{state === 'success' && result && ( |
|||
<> |
|||
<Success className="text-green-500 mx-auto mb-4" size="48" /> |
|||
<Text className="text-lg font-medium text-green-600 mb-2 block"> |
|||
{result.message} |
|||
</Text> |
|||
{result.type === ScanType.VERIFICATION && result.data && ( |
|||
<View className="bg-green-50 rounded-lg p-3 mb-4"> |
|||
<Text className="text-sm text-green-800 block"> |
|||
礼品卡：{result.data.goodsName || '未知商品'} |
|||
</Text> |
|||
<Text className="text-sm text-green-800 block"> |
|||
面值：¥{result.data.faceValue} |
|||
</Text> |
|||
</View> |
|||
)} |
|||
<View className="mt-2"> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleStartScan} |
|||
className="w-full mb-2" |
|||
> |
|||
继续扫码 |
|||
</Button> |
|||
<Button |
|||
type="default" |
|||
size="normal" |
|||
onClick={reset} |
|||
className="w-full" |
|||
> |
|||
重置 |
|||
</Button> |
|||
</View> |
|||
</> |
|||
)} |
|||
|
|||
{state === 'error' && ( |
|||
<> |
|||
<Failure className="text-red-500 mx-auto mb-4" size="48" /> |
|||
<Text className="text-lg font-medium text-red-600 mb-2 block"> |
|||
操作失败 |
|||
</Text> |
|||
<Text className="text-gray-600 mb-6 block"> |
|||
{error || '未知错误'} |
|||
</Text> |
|||
<View className="mt-2"> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleStartScan} |
|||
className="w-full mb-2" |
|||
> |
|||
重试 |
|||
</Button> |
|||
<Button |
|||
type="default" |
|||
size="normal" |
|||
onClick={reset} |
|||
className="w-full" |
|||
> |
|||
重置 |
|||
</Button> |
|||
</View> |
|||
</> |
|||
)} |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 扫码历史 */} |
|||
{scanHistory.length > 0 && ( |
|||
<Card className="m-4"> |
|||
<View className="pb-4"> |
|||
<Text className="text-lg font-medium text-gray-800 mb-3 block"> |
|||
最近扫码记录 |
|||
</Text> |
|||
|
|||
{scanHistory.map((record, index) => ( |
|||
<View |
|||
key={record.id} |
|||
className={`flex items-center justify-between p-3 bg-gray-50 rounded-lg ${index < scanHistory.length - 1 ? 'mb-2' : ''}`} |
|||
> |
|||
<View className="flex items-center flex-1"> |
|||
{getStatusIcon(record.success, record.type)} |
|||
<View className="ml-3 flex-1"> |
|||
<View className="flex items-center mb-1"> |
|||
{record.type && getTypeTag(record.type)} |
|||
<Text className="text-sm text-gray-600 ml-2"> |
|||
{record.time} |
|||
</Text> |
|||
</View> |
|||
<Text className="text-sm text-gray-800"> |
|||
{record.success ? record.message : record.error} |
|||
</Text> |
|||
{record.success && record.type === ScanType.VERIFICATION && record.data && ( |
|||
<Text className="text-xs text-gray-500"> |
|||
{record.data.goodsName} - ¥{record.data.faceValue} |
|||
</Text> |
|||
)} |
|||
</View> |
|||
</View> |
|||
</View> |
|||
))} |
|||
</View> |
|||
</Card> |
|||
)} |
|||
|
|||
{/* 功能说明 */} |
|||
<Card className="m-4 bg-blue-50 border border-blue-200"> |
|||
<View className="p-4"> |
|||
<View className="flex items-start"> |
|||
<Tips className="text-blue-600 mr-2 mt-1" size="16" /> |
|||
<View> |
|||
<Text className="text-sm font-medium text-blue-800 mb-1 block"> |
|||
功能说明 |
|||
</Text> |
|||
<Text className="text-xs text-blue-700 block mb-1"> |
|||
• 登录二维码：自动确认网页端登录 |
|||
</Text> |
|||
<Text className="text-xs text-blue-700 block mb-1"> |
|||
• 核销二维码：门店核销用户礼品卡 |
|||
</Text> |
|||
<Text className="text-xs text-blue-700 block"> |
|||
• 系统会自动识别二维码类型并执行相应操作 |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
</View> |
|||
); |
|||
}; |
|||
|
|||
export default UnifiedQRPage; |
|||
Loading…
Reference in new issue