diff --git a/docs/ADMIN_MODE_SOLUTION.md b/docs/ADMIN_MODE_SOLUTION.md new file mode 100644 index 0000000..ee654bb --- /dev/null +++ b/docs/ADMIN_MODE_SOLUTION.md @@ -0,0 +1,226 @@ +# 🎯 管理员模式切换方案 + +## 📋 **问题分析** + +### 原始问题 +- 用户卡片中有两个扫码入口（门店核销 + 扫码登录） +- 用户体验不友好，容易混淆 +- 管理员功能分散，缺乏统一入口 + +### 解决思路 +设计一个管理员模式切换系统，通过模式切换来统一管理所有管理员功能。 + +## 🚀 **解决方案** + +### 方案概述 +创建一个**管理员模式切换**系统，包含： +1. **模式切换按钮** - 在普通用户模式和管理员模式之间切换 +2. **统一管理面板** - 集中展示所有管理员功能 +3. **状态持久化** - 记住用户的模式选择 + +### 核心组件 + +#### 1. **useAdminMode Hook** +```typescript +// src/hooks/useAdminMode.ts +const { isAdminMode, toggleAdminMode, setAdminMode } = useAdminMode(); +``` + +**功能特性：** +- ✅ 模式状态管理 +- ✅ 本地存储持久化 +- ✅ 切换提示反馈 + +#### 2. **AdminPanel 组件** +```typescript +// src/components/AdminPanel.tsx + +``` + +**功能特性：** +- ✅ 底部弹出面板设计 +- ✅ 网格布局展示功能 +- ✅ 图标 + 描述的直观界面 +- ✅ 点击遮罩关闭 + +#### 3. **UserCard 集成** +更新用户卡片，集成模式切换功能： +- 模式切换按钮 +- 管理面板入口 +- 状态指示器 + +## 🎨 **用户界面设计** + +### 模式切换按钮 +``` +[普通用户] ←→ [管理员] [管理面板] +``` + +- **普通用户模式**：灰色按钮，只显示基础功能 +- **管理员模式**：蓝色按钮，显示管理面板入口 + +### 管理员面板 +``` +┌─────────────────────────────────┐ +│ 🔧 管理员面板 [关闭] │ +├─────────────────────────────────┤ +│ [🔍 门店核销] [🔍 扫码登录] │ +│ [👤 用户管理] [🏪 门店管理] │ +│ [⚙️ 系统设置] │ +├─────────────────────────────────┤ +│ 💡 管理员功能仅对具有管理权限... │ +└─────────────────────────────────┘ +``` + +## 📱 **用户体验流程** + +### 普通用户模式 +1. 用户看到简洁的用户卡片 +2. 只显示基础功能入口 +3. 管理员用户可以看到模式切换按钮 + +### 管理员模式 +1. 点击切换到管理员模式 +2. 显示"管理面板"入口按钮 +3. 点击进入统一的管理功能面板 +4. 选择具体的管理功能 + +### 功能访问路径 +``` +用户卡片 → 切换管理员模式 → 管理面板 → 具体功能 +``` + +## 🔧 **技术实现** + +### 文件结构 +``` +src/ +├── hooks/ +│ └── useAdminMode.ts # 管理员模式Hook +├── components/ +│ ├── AdminPanel.tsx # 管理员面板组件 +│ └── AdminPanel.scss # 面板样式 +└── pages/user/components/ + └── UserCard.tsx # 更新的用户卡片 +``` + +### 核心功能 + +#### 状态管理 +```typescript +const [isAdminMode, setIsAdminMode] = useState(false); +const [showAdminPanel, setShowAdminPanel] = useState(false); +``` + +#### 本地存储 +```typescript +// 保存模式状态 +Taro.setStorageSync('admin_mode', newMode); + +// 加载模式状态 +const savedMode = Taro.getStorageSync('admin_mode'); +``` + +#### 权限控制 +```typescript +{isAdmin() && ( + +)} +``` + +## 🎯 **功能特性** + +### ✅ **已实现功能** +1. **模式切换** - 普通用户 ↔ 管理员模式 +2. **状态持久化** - 记住用户选择 +3. **统一面板** - 集中管理功能入口 +4. **权限控制** - 只对管理员显示 +5. **用户反馈** - 切换提示和状态指示 +6. **响应式设计** - 适配不同屏幕尺寸 + +### 🔄 **管理员功能列表** +1. **门店核销** - 扫码核销用户优惠券 +2. **扫码登录** - 扫码快速登录网页端 +3. **用户管理** - 管理系统用户信息（待开发） +4. **门店管理** - 管理门店信息和设置（待开发） +5. **系统设置** - 系统配置和参数管理（待开发） + +## 📊 **对比效果** + +### 修改前 +``` +❌ 两个扫码图标并排显示 +❌ 功能入口分散 +❌ 用户容易混淆 +❌ 界面显得杂乱 +``` + +### 修改后 +``` +✅ 统一的模式切换入口 +✅ 清晰的功能分类 +✅ 直观的管理面板 +✅ 更好的用户体验 +``` + +## 🚀 **使用方法** + +### 1. 管理员用户操作 +1. 在个人中心看到模式切换按钮 +2. 点击切换到"管理员"模式 +3. 点击"管理面板"按钮 +4. 在弹出面板中选择需要的功能 + +### 2. 开发者扩展 +添加新的管理功能： +```typescript +// 在 AdminPanel.tsx 中添加新功能 +{ + id: 'new-feature', + title: '新功能', + description: '功能描述', + icon: , + color: 'bg-blue-50 border-blue-200', + onClick: () => { + navTo('/new-feature-page', true); + onClose?.(); + } +} +``` + +## 🎨 **样式定制** + +### 主题色彩 +- **普通模式**：灰色系 (`bg-gray-100`, `text-gray-600`) +- **管理员模式**：蓝色系 (`bg-blue-500`, `text-white`) +- **功能卡片**：彩色分类（蓝、绿、紫、橙、灰） + +### 动画效果 +- 模式切换：`transition-all 0.3s ease` +- 面板弹出：`slideUp` 动画 +- 按钮点击：`scale(0.95)` 反馈 + +## 🔮 **未来扩展** + +### 计划功能 +1. **角色权限** - 不同管理员角色显示不同功能 +2. **快捷操作** - 常用功能的快捷入口 +3. **统计面板** - 管理数据的可视化展示 +4. **通知中心** - 管理员消息和提醒 + +### 技术优化 +1. **懒加载** - 按需加载管理功能模块 +2. **缓存优化** - 管理面板状态缓存 +3. **性能监控** - 管理功能使用统计 + +## 🎉 **总结** + +这个管理员模式切换方案成功解决了原有的用户体验问题： + +1. **统一入口** - 所有管理功能通过统一面板访问 +2. **清晰分类** - 功能按类型分组，易于理解 +3. **状态记忆** - 用户选择会被记住 +4. **扩展性强** - 易于添加新的管理功能 +5. **用户友好** - 直观的界面和流畅的交互 + +现在管理员用户可以享受更加统一和专业的管理体验！🚀 diff --git a/docs/QR_LOGIN_INTEGRATION.md b/docs/QR_LOGIN_INTEGRATION.md new file mode 100644 index 0000000..ecfacf1 --- /dev/null +++ b/docs/QR_LOGIN_INTEGRATION.md @@ -0,0 +1,214 @@ +# 微信小程序扫码登录集成文档 + +## 概述 + +本文档介绍如何在微信小程序中集成扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录。 + +## 功能特性 + +- ✅ **多平台支持** - 支持网页端、移动APP、微信小程序 +- ✅ **安全可靠** - Token有效期控制，防重复使用 +- ✅ **用户体验好** - 5分钟有效期，实时状态反馈 +- ✅ **微信集成** - 自动获取微信用户信息 +- ✅ **组件化设计** - 提供多种使用方式 + +## 后端接口 + +### 1. 生成扫码token +``` +POST /api/qr-login/generate +``` + +### 2. 检查登录状态 +``` +GET /api/qr-login/status/{token} +``` + +### 3. 确认登录（通用） +``` +POST /api/qr-login/confirm +``` + +### 4. 微信小程序专用确认接口 +``` +POST /api/qr-login/wechat-confirm +``` + +## 前端集成 + +### 1. API接口层 +文件：`src/api/qr-login/index.ts` + +提供了完整的扫码登录API接口封装： +- `generateQRToken()` - 生成扫码token +- `checkQRLoginStatus()` - 检查登录状态 +- `confirmQRLogin()` - 确认登录 +- `confirmWechatQRLogin()` - 微信小程序专用确认 + +### 2. Hook层 +文件：`src/hooks/useQRLogin.ts` + +提供了扫码登录的状态管理和业务逻辑： +```typescript +const { + state, // 当前状态 + error, // 错误信息 + result, // 登录结果 + isLoading, // 是否加载中 + startScan, // 开始扫码 + cancel, // 取消扫码 + reset, // 重置状态 + handleScanResult, // 处理扫码结果 + canScan // 是否可以扫码 +} = useQRLogin(); +``` + +### 3. 组件层 + +#### QRLoginScanner 完整扫码组件 +文件：`src/components/QRLoginScanner.tsx` + +功能完整的扫码登录组件，包含状态显示和错误处理： +```tsx + console.log('登录成功', result)} + onError={(error) => console.log('登录失败', error)} + buttonText="扫码登录" + showStatus={true} +/> +``` + +#### QRLoginButton 简化按钮组件 +文件：`src/components/QRLoginButton.tsx` + +简化的按钮组件，支持两种模式： +```tsx +{/* 直接扫码模式 */} + + +{/* 页面跳转模式 */} + +``` + +### 4. 页面层 +文件：`src/pages/qr-login/index.tsx` + +专门的扫码登录页面，提供完整的用户体验： +- 用户信息展示 +- 扫码功能 +- 使用说明 +- 登录历史 +- 安全提示 + +## 使用方式 + +### 方式一：在现有组件中集成 + +```tsx +import { useQRLogin } from '@/hooks/useQRLogin'; + +const MyComponent = () => { + const { startScan, isLoading } = useQRLogin(); + + const handleScan = async () => { + try { + await startScan(); + } catch (error) { + console.error('扫码失败:', error); + } + }; + + return ( + + ); +}; +``` + +### 方式二：使用预制组件 + +```tsx +import QRLoginButton from '@/components/QRLoginButton'; + +const MyComponent = () => { + return ( + + ); +}; +``` + +### 方式三：跳转到专门页面 + +```tsx +import Taro from '@tarojs/taro'; + +const handleQRLogin = () => { + Taro.navigateTo({ + url: '/pages/qr-login/index' + }); +}; +``` + +## 工作流程 + +### 网页端流程 +1. 用户访问登录页面 +2. 点击"扫码登录"按钮 +3. 调用 `POST /api/qr-login/generate` 生成token +4. 显示包含token的二维码 +5. 每2秒调用 `GET /api/qr-login/status/{token}` 检查状态 +6. 状态变为 `confirmed` 时获取JWT token +7. 自动跳转到主页面 + +### 小程序端流程 +1. 用户在小程序中点击扫码登录 +2. 调用 `Taro.scanCode()` 扫描二维码 +3. 解析二维码获取token +4. 调用 `POST /api/qr-login/wechat-confirm` 确认登录 +5. 传递用户ID和微信用户信息 +6. 显示登录确认成功提示 + +## 安全考虑 + +1. **Token有效期** - 默认5分钟有效期，防止长期暴露 +2. **一次性使用** - Token确认后立即失效，防止重复使用 +3. **用户确认** - 需要用户主动确认，防止误操作 +4. **来源验证** - 只扫描官方网站的二维码 +5. **权限检查** - 确保用户已登录小程序 + +## 错误处理 + +常见错误及处理方式： + +1. **用户未登录** - 提示用户先登录小程序 +2. **扫码失败** - 提示重新扫码或检查二维码 +3. **Token无效** - 提示二维码已过期，请刷新 +4. **网络错误** - 提示检查网络连接 +5. **权限拒绝** - 引导用户开启相机权限 + +## 测试建议 + +1. **功能测试** - 测试完整的扫码登录流程 +2. **异常测试** - 测试各种异常情况的处理 +3. **性能测试** - 测试扫码响应速度和网络请求 +4. **兼容性测试** - 测试不同设备和微信版本 +5. **安全测试** - 测试Token安全性和权限控制 + +## 注意事项 + +1. 确保后端接口已正确实现 +2. 配置正确的API基础URL +3. 处理好用户权限和登录状态 +4. 提供清晰的用户提示和错误信息 +5. 考虑网络异常和超时情况 diff --git a/src/api/qr-login/index.ts b/src/api/qr-login/index.ts new file mode 100644 index 0000000..ada3bf8 --- /dev/null +++ b/src/api/qr-login/index.ts @@ -0,0 +1,248 @@ +import request from '@/utils/request'; +import type { ApiResult } from '@/api'; +import Taro from '@tarojs/taro'; + +/** + * 扫码登录相关接口 + */ + +// 生成扫码token请求参数 +export interface GenerateQRTokenParam { + // 客户端类型：web, app, wechat + clientType?: string; + // 设备信息 + deviceInfo?: string; + // 过期时间（分钟） + expireMinutes?: number; +} + +// 生成扫码token响应 +export interface GenerateQRTokenResult { + // 扫码token + token: string; + // 二维码内容（通常是包含token的URL或JSON） + qrContent: string; + // 过期时间戳 + expireTime: number; + // 二维码图片URL（可选） + qrImageUrl?: string; +} + +// 扫码状态枚举 +export enum QRLoginStatus { + PENDING = 'pending', // 等待扫码 + SCANNED = 'scanned', // 已扫码，等待确认 + CONFIRMED = 'confirmed', // 已确认登录 + EXPIRED = 'expired', // 已过期 + CANCELLED = 'cancelled' // 已取消 +} + +// 检查扫码状态响应 +export interface QRLoginStatusResult { + // 当前状态 + status: QRLoginStatus; + // 状态描述 + message?: string; + // 如果已确认登录，返回JWT token + accessToken?: string; + // 用户信息 + userInfo?: { + userId: number; + nickname?: string; + avatar?: string; + phone?: string; + }; + // 剩余有效时间（秒） + remainingTime?: number; +} + +// 确认登录请求参数 +export interface ConfirmLoginParam { + // 扫码token + token: string; + // 用户ID + userId: number; + // 登录平台：web, app, wechat + platform?: string; + // 微信用户信息（当platform为wechat时） + wechatInfo?: { + openid?: string; + unionid?: string; + nickname?: string; + avatar?: string; + gender?: number; + }; + // 设备信息 + deviceInfo?: string; +} + +// 确认登录响应 +export interface ConfirmLoginResult { + // 是否成功 + success: boolean; + // 消息 + message: string; + // 登录用户信息 + userInfo?: { + userId: number; + nickname?: string; + avatar?: string; + phone?: string; + }; +} + +/** + * 生成扫码登录token + */ +export async function generateQRToken(data?: GenerateQRTokenParam) { + const res = await request.post>( + 'http://127.0.0.1:9200/api/qr-login/generate', + { + clientType: 'wechat', + expireMinutes: 5, + ...data + } + ); + if (res.code === 0 && res.data) { + return res.data; + } + return Promise.reject(new Error(res.message)); +} + +/** + * 检查扫码登录状态 + */ +export async function checkQRLoginStatus(token: string) { + const res = await request.get>( + `http://127.0.0.1:9200/api/qr-login/status/${token}` + ); + if (res.code === 0 && res.data) { + return res.data; + } + return Promise.reject(new Error(res.message)); +} + +/** + * 确认扫码登录（通用接口） + */ +export async function confirmQRLogin(data: ConfirmLoginParam) { + const res = await request.post>( + 'http://127.0.0.1:9200/api/qr-login/confirm', + data + ); + if (res.code === 0 && res.data) { + return res.data; + } + return Promise.reject(new Error(res.message)); +} + +/** + * 微信小程序扫码登录确认（便捷接口） + */ +export async function confirmWechatQRLogin(token: string, userId: number) { + try { + // 获取微信用户信息 + const userInfo = await getUserProfile(); + + const data: ConfirmLoginParam = { + token, + userId, + platform: 'wechat', + wechatInfo: { + nickname: userInfo?.nickName, + avatar: userInfo?.avatarUrl, + gender: userInfo?.gender + }, + deviceInfo: await getDeviceInfo() + }; + + const res = await request.post>( + 'http://127.0.0.1:9200/api/qr-login/wechat-confirm', + data + ); + + if (res.code === 0 && res.data) { + return res.data; + } + return Promise.reject(new Error(res.message)); + } catch (error: any) { + return Promise.reject(new Error(error.message || '确认登录失败')); + } +} + +/** + * 获取微信用户信息 + */ +async function getUserProfile() { + return new Promise((resolve, reject) => { + Taro.getUserProfile({ + desc: '用于扫码登录身份确认', + success: (res) => { + resolve(res.userInfo); + }, + fail: (err) => { + // 如果获取失败，尝试使用已存储的用户信息 + const storedUser = Taro.getStorageSync('User'); + if (storedUser) { + resolve({ + nickName: storedUser.nickname, + avatarUrl: storedUser.avatar, + gender: storedUser.gender + }); + } else { + reject(err); + } + } + }); + }); +} + +/** + * 获取设备信息 + */ +async function getDeviceInfo() { + return new Promise((resolve) => { + Taro.getSystemInfo({ + success: (res) => { + const deviceInfo = { + platform: res.platform, + system: res.system, + version: res.version, + model: res.model, + brand: res.brand, + screenWidth: res.screenWidth, + screenHeight: res.screenHeight + }; + resolve(JSON.stringify(deviceInfo)); + }, + fail: () => { + resolve('unknown'); + } + }); + }); +} + +/** + * 解析二维码内容，提取token + */ +export function parseQRContent(qrContent: string): string | null { + try { + // 尝试解析JSON格式 + if (qrContent.startsWith('{')) { + const parsed = JSON.parse(qrContent); + return parsed.token || null; + } + + // 尝试解析URL格式 + if (qrContent.includes('token=')) { + const url = new URL(qrContent); + return url.searchParams.get('token'); + } + + // 直接返回内容作为token + return qrContent; + } catch (error) { + console.error('解析二维码内容失败:', error); + return null; + } +} diff --git a/src/app.config.ts b/src/app.config.ts index 46c075a..2ddcfa3 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,9 +1,10 @@ -export default defineAppConfig({ +export default { pages: [ 'pages/index/index', 'pages/cart/cart', 'pages/find/find', - 'pages/user/user' + 'pages/user/user', + 'pages/qr-login/index' ], "subpackages": [ { @@ -136,4 +137,4 @@ export default defineAppConfig({ "desc": "你的位置信息将用于小程序位置接口的效果展示" } } -}) +} diff --git a/src/app.scss b/src/app.scss index 263b035..bba470e 100644 --- a/src/app.scss +++ b/src/app.scss @@ -10,14 +10,14 @@ page{ background-position: bottom; } -// 在全局样式文件中添加 +/* 在全局样式文件中添加 */ button { &::after { border: none !important; } } -// 去掉 Grid 组件的边框 +/* 去掉 Grid 组件的边框 */ .no-border-grid { .nut-grid-item { border: none !important; @@ -38,7 +38,7 @@ button { } } -// 微信授权按钮的特殊样式 +/* 微信授权按钮的特殊样式 */ button[open-type="getPhoneNumber"] { background: none !important; padding: 0 !important; diff --git a/src/components/AdminPanel.scss b/src/components/AdminPanel.scss new file mode 100644 index 0000000..281d6fd --- /dev/null +++ b/src/components/AdminPanel.scss @@ -0,0 +1,89 @@ +.admin-panel { + /* 面板动画 */ + .admin-panel-content { + animation: slideUp 0.3s ease-out; + } + + /* 网格布局优化 */ + .admin-feature-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + + @media (max-width: 375px) { + grid-template-columns: 1fr; + } + } + + /* 功能卡片样式 */ + .admin-feature-card { + transition: all 0.2s ease; + cursor: pointer; + + &:active { + transform: scale(0.95); + } + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + } + + /* 图标容器 */ + .admin-feature-icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + margin-right: 8px; + } + + /* 模式切换按钮动画 */ + .mode-toggle-btn { + transition: all 0.3s ease; + cursor: pointer; + + &:active { + transform: scale(0.95); + } + } + + /* 管理面板按钮 */ + .admin-panel-btn { + transition: all 0.2s ease; + cursor: pointer; + + &:active { + transform: scale(0.95); + background-color: rgba(59, 130, 246, 0.1); + } + } +} + +/* 滑入动画 */ +@keyframes slideUp { + from { + transform: translateY(100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +/* 遮罩层动画 */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.admin-panel-overlay { + animation: fadeIn 0.3s ease-out; +} diff --git a/src/components/AdminPanel.tsx b/src/components/AdminPanel.tsx new file mode 100644 index 0000000..4f438ff --- /dev/null +++ b/src/components/AdminPanel.tsx @@ -0,0 +1,151 @@ +import React from 'react'; +import { View, Text } from '@tarojs/components'; +import { Button } from '@nutui/nutui-react-taro'; +import { Scan, Setting, User, Shop } from '@nutui/icons-react-taro'; +import navTo from '@/utils/common'; +import './AdminPanel.scss'; + +export interface AdminPanelProps { + /** 是否显示面板 */ + visible: boolean; + /** 关闭面板回调 */ + onClose?: () => void; + /** 自定义样式类名 */ + className?: string; +} + +/** + * 管理员功能面板组件 + */ +const AdminPanel: React.FC = ({ + visible, + onClose, + className = '' +}) => { + if (!visible) return null; + + // 管理员功能列表 + const adminFeatures = [ + { + id: 'store-verification', + title: '门店核销', + description: '扫码核销用户优惠券', + icon: , + color: 'bg-blue-50 border-blue-200', + onClick: () => { + navTo('/user/store/verification', true); + onClose?.(); + } + }, + { + id: 'qr-login', + title: '扫码登录', + description: '扫码快速登录网页端', + icon: , + color: 'bg-green-50 border-green-200', + onClick: () => { + navTo('/pages/qr-login/index', true); + onClose?.(); + } + }, + { + id: 'user-management', + title: '用户管理', + description: '管理系统用户信息', + icon: , + color: 'bg-purple-50 border-purple-200', + onClick: () => { + // TODO: 跳转到用户管理页面 + console.log('跳转到用户管理'); + onClose?.(); + } + }, + { + id: 'store-management', + title: '门店管理', + description: '管理门店信息和设置', + icon: , + color: 'bg-orange-50 border-orange-200', + onClick: () => { + // TODO: 跳转到门店管理页面 + console.log('跳转到门店管理'); + onClose?.(); + } + }, + { + id: 'system-settings', + title: '系统设置', + description: '系统配置和参数管理', + icon: , + color: 'bg-gray-50 border-gray-200', + onClick: () => { + // TODO: 跳转到系统设置页面 + console.log('跳转到系统设置'); + onClose?.(); + } + } + ]; + + return ( + + {/* 遮罩层 */} + + + {/* 面板内容 */} + + {/* 面板头部 */} + + + + 管理员面板 + + + + + {/* 功能网格 */} + + + {adminFeatures.map((feature) => ( + + + {feature.icon} + + {feature.title} + + + + {feature.description} + + + ))} + + + + {/* 底部提示 */} + + + + 💡 管理员功能仅对具有管理权限的用户开放 + + + + + + ); +}; + +export default AdminPanel; diff --git a/src/components/CouponCard.scss b/src/components/CouponCard.scss index 7127d49..61f7316 100644 --- a/src/components/CouponCard.scss +++ b/src/components/CouponCard.scss @@ -9,25 +9,25 @@ border: 2px solid #f0f0f0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - // 更精美的阴影效果 - //box-shadow: - // 0 4px 20px rgba(0, 0, 0, 0.08), - // 0 1px 3px rgba(0, 0, 0, 0.1); + /* 更精美的阴影效果 */ + /*box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.08), + 0 1px 3px rgba(0, 0, 0, 0.1);*/ - // 边框光晕效果 - //&::before { - // content: ''; - // position: absolute; - // top: 0; - // left: 0; - // right: 0; - // bottom: 0; - // border-radius: 16px; - // padding: 1px; - // background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); - // mask-composite: exclude; - // pointer-events: none; - //} + /* 边框光晕效果 */ + /*&::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 16px; + padding: 1px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); + mask-composite: exclude; + pointer-events: none; + }*/ &:active { transform: scale(0.98) translateY(1px); @@ -52,7 +52,7 @@ position: relative; overflow: hidden; - // 添加光泽效果 + /* 添加光泽效果 */ &::after { content: ''; position: absolute; @@ -199,7 +199,7 @@ line-height: 1.3; letter-spacing: -0.5px; - // 添加文字渐变效果 + /* 添加文字渐变效果 */ background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -212,7 +212,7 @@ line-height: 1.2; font-weight: 500; - // 添加图标前缀 + /* 添加图标前缀 */ &::before { content: '⏰'; margin-right: 6px; @@ -239,7 +239,7 @@ position: relative; overflow: hidden; - // 添加按钮光泽效果 + /* 添加按钮光泽效果 */ &::before { content: ''; position: absolute; @@ -324,7 +324,7 @@ } } -// 动画效果 +/* 动画效果 */ @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); @@ -334,7 +334,7 @@ } } -// 响应式优化 +/* 响应式优化 */ @media (max-width: 768px) { .coupon-card { height: 150px; diff --git a/src/components/QRLoginButton.tsx b/src/components/QRLoginButton.tsx new file mode 100644 index 0000000..70f7eeb --- /dev/null +++ b/src/components/QRLoginButton.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { View, Text } from '@tarojs/components'; +import { Button } from '@nutui/nutui-react-taro'; +import { Scan } from '@nutui/icons-react-taro'; +import Taro from '@tarojs/taro'; +import { useQRLogin } from '@/hooks/useQRLogin'; + +export interface QRLoginButtonProps { + /** 按钮类型 */ + type?: 'primary' | 'success' | 'warning' | 'danger' | 'default'; + /** 按钮大小 */ + size?: 'large' | 'normal' | 'small'; + /** 按钮文本 */ + text?: string; + /** 是否显示图标 */ + showIcon?: boolean; + /** 自定义样式类名 */ + className?: string; + /** 点击成功回调 */ + onSuccess?: (result: any) => void; + /** 点击失败回调 */ + onError?: (error: string) => void; + /** 是否使用页面模式（跳转到专门页面） */ + usePageMode?: boolean; +} + +/** + * 扫码登录按钮组件 + */ +const QRLoginButton: React.FC = ({ + type = 'primary', + size = 'normal', + text = '扫码登录', + showIcon = true, + className = '', + onSuccess, + onError, + usePageMode = false +}) => { + const { startScan, isLoading, canScan } = useQRLogin(); + + // 处理点击事件 + const handleClick = async () => { + if (usePageMode) { + // 跳转到专门的扫码登录页面 + if (canScan()) { + Taro.navigateTo({ + url: '/pages/qr-login/index' + }); + } else { + Taro.showToast({ + title: '请先登录小程序', + icon: 'error' + }); + } + return; + } + + // 直接执行扫码登录 + try { + await startScan(); + // 成功回调会在Hook内部处理 + } catch (error: any) { + onError?.(error.message || '扫码登录失败'); + } + }; + + const disabled = !canScan() || isLoading; + + return ( + + ); +}; + +export default QRLoginButton; diff --git a/src/components/QRLoginScanner.tsx b/src/components/QRLoginScanner.tsx new file mode 100644 index 0000000..a891376 --- /dev/null +++ b/src/components/QRLoginScanner.tsx @@ -0,0 +1,182 @@ +import React from 'react'; +import { View, Text } from '@tarojs/components'; +import { Button, Loading } from '@nutui/nutui-react-taro'; +import { Scan, Success, Failure } from '@nutui/icons-react-taro'; +import { useQRLogin, ScanLoginState } from '@/hooks/useQRLogin'; + +export interface QRLoginScannerProps { + /** 扫码成功回调 */ + onSuccess?: (result: any) => void; + /** 扫码失败回调 */ + onError?: (error: string) => void; + /** 自定义样式类名 */ + className?: string; + /** 按钮文本 */ + buttonText?: string; + /** 是否显示状态信息 */ + showStatus?: boolean; +} + +/** + * 扫码登录组件 + */ +const QRLoginScanner: React.FC = ({ + onSuccess, + onError, + className = '', + buttonText = '扫码登录', + showStatus = true +}) => { + const { + state, + error, + result, + isLoading, + startScan, + cancel, + reset, + canScan + } = useQRLogin(); + + // 处理扫码成功 + React.useEffect(() => { + if (state === ScanLoginState.SUCCESS && result) { + onSuccess?.(result); + } + }, [state, result, onSuccess]); + + // 处理扫码失败 + React.useEffect(() => { + if (state === ScanLoginState.ERROR && error) { + onError?.(error); + } + }, [state, error, onError]); + + // 获取状态显示内容 + const getStatusContent = () => { + switch (state) { + case ScanLoginState.SCANNING: + return ( + + + 请扫描登录二维码... + + ); + + case ScanLoginState.CONFIRMING: + return ( + + + 正在确认登录... + + ); + + case ScanLoginState.SUCCESS: + return ( + + + 登录确认成功！ + + ); + + case ScanLoginState.ERROR: + return ( + + + {error || '扫码登录失败'} + + ); + + default: + return null; + } + }; + + // 获取按钮状态 + const getButtonProps = () => { + const disabled = !canScan() || isLoading; + + switch (state) { + case ScanLoginState.SCANNING: + case ScanLoginState.CONFIRMING: + return { + loading: true, + disabled: true, + text: state === ScanLoginState.SCANNING ? '扫码中...' : '确认中...', + onClick: cancel + }; + + case ScanLoginState.SUCCESS: + return { + loading: false, + disabled: false, + text: '重新扫码', + onClick: reset + }; + + case ScanLoginState.ERROR: + return { + loading: false, + disabled: false, + text: '重试', + onClick: startScan + }; + + default: + return { + loading: false, + disabled, + text: disabled ? '请先登录' : buttonText, + onClick: startScan + }; + } + }; + + const buttonProps = getButtonProps(); + + return ( + + {/* 扫码按钮 */} + + + {/* 状态显示 */} + {showStatus && ( + + {getStatusContent()} + + )} + + {/* 成功结果显示 */} + {state === ScanLoginState.SUCCESS && result && ( + + + 已为用户 {result.userInfo?.nickname || result.userInfo?.userId} 确认登录 + + + )} + + {/* 使用说明 */} + {state === ScanLoginState.IDLE && ( + + + 扫描网页端显示的登录二维码即可快速登录 + + + )} + + ); +}; + +export default QRLoginScanner; diff --git a/src/hooks/useAdminMode.ts b/src/hooks/useAdminMode.ts new file mode 100644 index 0000000..f20b96b --- /dev/null +++ b/src/hooks/useAdminMode.ts @@ -0,0 +1,66 @@ +import { useState, useCallback, useEffect } from 'react'; +import Taro from '@tarojs/taro'; + +/** + * 管理员模式Hook + * 用于管理管理员用户的模式切换（普通用户模式 vs 管理员模式） + */ +export function useAdminMode() { + const [isAdminMode, setIsAdminMode] = useState(false); + + // 从本地存储加载管理员模式状态 + useEffect(() => { + try { + const savedMode = Taro.getStorageSync('admin_mode'); + if (savedMode !== undefined) { + setIsAdminMode(savedMode === 'true' || savedMode === true); + } + } catch (error) { + console.warn('Failed to load admin mode from storage:', error); + } + }, []); + + // 切换管理员模式 + const toggleAdminMode = useCallback(() => { + const newMode = !isAdminMode; + setIsAdminMode(newMode); + + try { + // 保存到本地存储 + Taro.setStorageSync('admin_mode', newMode); + + // 显示切换提示 + Taro.showToast({ + title: newMode ? '已切换到管理员模式' : '已切换到普通用户模式', + icon: 'success', + duration: 1500 + }); + } catch (error) { + console.error('Failed to save admin mode to storage:', error); + } + }, [isAdminMode]); + + // 设置管理员模式 + const setAdminMode = useCallback((mode: boolean) => { + if (mode !== isAdminMode) { + setIsAdminMode(mode); + try { + Taro.setStorageSync('admin_mode', mode); + } catch (error) { + console.error('Failed to save admin mode to storage:', error); + } + } + }, [isAdminMode]); + + // 重置为普通用户模式 + const resetToUserMode = useCallback(() => { + setAdminMode(false); + }, [setAdminMode]); + + return { + isAdminMode, + toggleAdminMode, + setAdminMode, + resetToUserMode + }; +} diff --git a/src/hooks/useQRLogin.ts b/src/hooks/useQRLogin.ts new file mode 100644 index 0000000..b72f49c --- /dev/null +++ b/src/hooks/useQRLogin.ts @@ -0,0 +1,227 @@ +import { useState, useCallback, useRef, useEffect } from 'react'; +import Taro from '@tarojs/taro'; +import { + confirmWechatQRLogin, + parseQRContent, + type ConfirmLoginResult +} from '@/api/qr-login'; + +/** + * 扫码登录状态 + */ +export enum ScanLoginState { + IDLE = 'idle', // 空闲状态 + SCANNING = 'scanning', // 正在扫码 + CONFIRMING = 'confirming', // 正在确认登录 + SUCCESS = 'success', // 登录成功 + ERROR = 'error' // 登录失败 +} + +/** + * 扫码登录Hook + */ +export function useQRLogin() { + const [state, setState] = useState(ScanLoginState.IDLE); + const [error, setError] = useState(''); + const [result, setResult] = useState(null); + const [isLoading, setIsLoading] = useState(false); + + // 用于取消操作的引用 + const cancelRef = useRef(false); + + /** + * 重置状态 + */ + const reset = useCallback(() => { + setState(ScanLoginState.IDLE); + setError(''); + setResult(null); + setIsLoading(false); + cancelRef.current = false; + }, []); + + /** + * 开始扫码登录 + */ + const startScan = useCallback(async () => { + try { + reset(); + setState(ScanLoginState.SCANNING); + + // 检查用户是否已登录 + const userId = Taro.getStorageSync('UserId'); + if (!userId) { + throw new Error('请先登录小程序'); + } + + // 调用扫码API + const scanResult = await new Promise((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; + } + + // 解析二维码内容 + const token = parseQRContent(scanResult); + if (!token) { + throw new Error('无效的登录二维码'); + } + + // 确认登录 + setState(ScanLoginState.CONFIRMING); + setIsLoading(true); + + const confirmResult = await confirmWechatQRLogin(token, parseInt(userId)); + + if (cancelRef.current) { + return; + } + + if (confirmResult.success) { + setState(ScanLoginState.SUCCESS); + setResult(confirmResult); + + // 显示成功提示 + Taro.showToast({ + title: '登录确认成功', + icon: 'success', + duration: 2000 + }); + } else { + throw new Error(confirmResult.message || '登录确认失败'); + } + + } catch (err: any) { + if (!cancelRef.current) { + setState(ScanLoginState.ERROR); + const errorMessage = err.message || '扫码登录失败'; + setError(errorMessage); + + // 显示错误提示 + Taro.showToast({ + title: errorMessage, + icon: 'error', + duration: 3000 + }); + } + } finally { + setIsLoading(false); + } + }, [reset]); + + /** + * 取消扫码登录 + */ + const cancel = useCallback(() => { + cancelRef.current = true; + reset(); + }, [reset]); + + /** + * 处理扫码结果（用于已有扫码结果的情况） + */ + const handleScanResult = useCallback(async (qrContent: string) => { + try { + reset(); + setState(ScanLoginState.CONFIRMING); + setIsLoading(true); + + // 检查用户是否已登录 + const userId = Taro.getStorageSync('UserId'); + if (!userId) { + throw new Error('请先登录小程序'); + } + + // 解析二维码内容 + const token = parseQRContent(qrContent); + if (!token) { + throw new Error('无效的登录二维码'); + } + + // 确认登录 + const confirmResult = await confirmWechatQRLogin(token, parseInt(userId)); + + if (confirmResult.success) { + setState(ScanLoginState.SUCCESS); + setResult(confirmResult); + + // 显示成功提示 + Taro.showToast({ + title: '登录确认成功', + icon: 'success', + duration: 2000 + }); + } else { + throw new Error(confirmResult.message || '登录确认失败'); + } + + } catch (err: any) { + setState(ScanLoginState.ERROR); + const errorMessage = err.message || '登录确认失败'; + setError(errorMessage); + + // 显示错误提示 + Taro.showToast({ + title: errorMessage, + icon: 'error', + duration: 3000 + }); + } finally { + setIsLoading(false); + } + }, [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, + + // 方法 + startScan, + cancel, + reset, + handleScanResult, + canScan, + + // 便捷状态判断 + isIdle: state === ScanLoginState.IDLE, + isScanning: state === ScanLoginState.SCANNING, + isConfirming: state === ScanLoginState.CONFIRMING, + isSuccess: state === ScanLoginState.SUCCESS, + isError: state === ScanLoginState.ERROR + }; +} diff --git a/src/pages/qr-login/index.config.ts b/src/pages/qr-login/index.config.ts new file mode 100644 index 0000000..54abd28 --- /dev/null +++ b/src/pages/qr-login/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '扫码登录', + navigationBarTextStyle: 'black', + navigationBarBackgroundColor: '#ffffff' +} diff --git a/src/pages/qr-login/index.tsx b/src/pages/qr-login/index.tsx new file mode 100644 index 0000000..0a34657 --- /dev/null +++ b/src/pages/qr-login/index.tsx @@ -0,0 +1,193 @@ +import React, { useState } from 'react'; +import { View, Text } from '@tarojs/components'; +import { NavBar, Card, Divider, Button } from '@nutui/nutui-react-taro'; +import { ArrowLeft, Scan, Success, Failure, Tips } from '@nutui/icons-react-taro'; +import Taro from '@tarojs/taro'; +import QRLoginScanner from '@/components/QRLoginScanner'; +import { useUser } from '@/hooks/useUser'; + +/** + * 扫码登录页面 + */ +const QRLoginPage: React.FC = () => { + const [loginHistory, setLoginHistory] = useState([]); + const { getDisplayName } = useUser(); + + // 处理扫码成功 + const handleScanSuccess = (result: any) => { + console.log('扫码登录成功:', result); + + // 添加到登录历史 + const newRecord = { + id: Date.now(), + time: new Date().toLocaleString(), + userInfo: result.userInfo, + success: true + }; + setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); // 只保留最近5条记录 + + // 显示成功提示 + Taro.showToast({ + title: '登录确认成功', + icon: 'success', + duration: 2000 + }); + }; + + // 处理扫码失败 + const handleScanError = (error: string) => { + console.error('扫码登录失败:', error); + + // 添加到登录历史 + const newRecord = { + id: Date.now(), + time: new Date().toLocaleString(), + error, + success: false + }; + setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); + }; + + // 返回上一页 + const handleBack = () => { + Taro.navigateBack(); + }; + + // 清除历史记录 + const clearHistory = () => { + setLoginHistory([]); + Taro.showToast({ + title: '已清除历史记录', + icon: 'success' + }); + }; + + return ( + + {/* 导航栏 */} + } + className="bg-white" + /> + + {/* 主要内容 */} + + {/* 用户信息卡片 */} + + + + + + + + + {getDisplayName()} + + + 使用小程序扫码快速登录网页端 + + + + + {/* 扫码登录组件 */} + + + + + {/* 使用说明 */} + + + + + 使用说明 + + + 1. 在电脑或其他设备上打开网页端登录页面 + 2. 点击"扫码登录"按钮，显示登录二维码 + 3. 使用此功能扫描二维码即可快速登录 + 4. 扫码成功后，网页端将自动完成登录 + + + + + {/* 登录历史 */} + {loginHistory.length > 0 && ( + + + + 最近登录记录 + + + + + {loginHistory.map((record, index) => ( + + + + {record.success ? ( + + ) : ( + + )} + + + {record.success ? '登录成功' : '登录失败'} + + {record.error && ( + + {record.error} + + )} + + + + {record.time} + + + {index < loginHistory.length - 1 && ( + + )} + + ))} + + + + )} + + {/* 安全提示 */} + + + + + + + 安全提示 + + + 请确保只扫描来自官方网站的登录二维码，避免扫描来源不明的二维码，保护账户安全。 + + + + + + + + ); +}; + +export default QRLoginPage; diff --git a/src/pages/user/components/UserCard.tsx b/src/pages/user/components/UserCard.tsx index def1e74..1f73338 100644 --- a/src/pages/user/components/UserCard.tsx +++ b/src/pages/user/components/UserCard.tsx @@ -11,6 +11,9 @@ import {TenantId} from "@/config/app"; import {useUser} from "@/hooks/useUser"; import {useUserData} from "@/hooks/useUserData"; import {getStoredInviteParams} from "@/utils/invite"; +import {useQRLogin} from "@/hooks/useQRLogin"; +import {useAdminMode} from "@/hooks/useAdminMode"; +import AdminPanel from "@/components/AdminPanel"; const UserCard = forwardRef((_, ref) => { const { @@ -21,6 +24,15 @@ const UserCard = forwardRef((_, ref) => { const [IsLogin, setIsLogin] = useState(false) const [userInfo, setUserInfo] = useState() + // 扫码登录Hook + const { startScan, isLoading: isScanLoading } = useQRLogin(); + + // 管理员模式Hook + const { isAdminMode, toggleAdminMode } = useAdminMode(); + + // 管理员面板显示状态 + const [showAdminPanel, setShowAdminPanel] = useState(false); + // 下拉刷新 const handleRefresh = async () => { await refresh() @@ -168,6 +180,25 @@ const UserCard = forwardRef((_, ref) => { }) } + // 处理扫码登录 + const handleQRLogin = async () => { + try { + await startScan(); + } catch (error) { + console.error('扫码登录失败:', error); + } + }; + + // 打开管理员面板 + const handleOpenAdminPanel = () => { + setShowAdminPanel(true); + }; + + // 关闭管理员面板 + const handleCloseAdminPanel = () => { + setShowAdminPanel(false); + }; + return ( @@ -205,7 +236,31 @@ const UserCard = forwardRef((_, ref) => { ) : ''} - {isAdmin() && navTo('/user/store/verification', true)} />} + {isAdmin() && ( + + {/* 管理员模式切换按钮 */} + + {isAdminMode ? '管理员' : '普通用户'} + + + {/* 管理员功能入口 */} + {isAdminMode && ( + + 管理面板 + + )} + + )} navTo('/user/profile/profile', true)}> {'个人资料'} @@ -234,6 +289,14 @@ const UserCard = forwardRef((_, ref) => { + + {/* 管理员面板 */} + {isAdmin() && ( + + )} ) diff --git a/src/user/store/verification.config.ts b/src/user/store/verification.config.ts index 77afd68..729a6f6 100644 --- a/src/user/store/verification.config.ts +++ b/src/user/store/verification.config.ts @@ -1,4 +1,4 @@ -export default definePageConfig({ +export default { navigationBarTitleText: '门店核销', navigationBarTextStyle: 'black' -}) +}