developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

feat(admin): 实现管理员模式切换和扫码登录功能

Browse Source 
- 新增管理员模式切换方案，统一管理所有管理员功能
- 实现扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录
- 添加管理员面板组件，集中展示所有管理员功能
- 开发扫码登录按钮和扫描器组件，方便集成到不同页面
- 优化用户界面设计，提高管理员用户的使用体验
This commit is contained in:
赵忠林
2025-09-01 14:26:00 +08:00
parent 7a7d8b4605
commit cbcf591f71
16 changed files with 1785 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
docs/ADMIN_MODE_SOLUTION.md Normal file
View File

@@ -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
<AdminPanel visible={showAdminPanel} onClose={handleCloseAdminPanel} />
```
**功能特性：**
- ✅ 底部弹出面板设计
- ✅ 网格布局展示功能
- ✅ 图标 + 描述的直观界面
- ✅ 点击遮罩关闭
#### 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() && (
<AdminModeToggle />
)}
```
## 🎯 **功能特性**
### ✅ **已实现功能**
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: <NewIcon className="text-blue-500" size="24" />,
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. **用户友好** - 直观的界面和流畅的交互
现在管理员用户可以享受更加统一和专业的管理体验！🚀

214
docs/QR_LOGIN_INTEGRATION.md Normal file
View File

@@ -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
<QRLoginScanner
onSuccess={(result) => console.log('登录成功', result)}
onError={(error) => console.log('登录失败', error)}
buttonText="扫码登录"
showStatus={true}
/>
```
#### QRLoginButton 简化按钮组件
文件：`src/components/QRLoginButton.tsx`
简化的按钮组件，支持两种模式：
```tsx
{/* 直接扫码模式 */}
<QRLoginButton
text="扫码登录"
onSuccess={handleSuccess}
onError={handleError}
/>
{/* 页面跳转模式 */}
<QRLoginButton
text="扫码登录"
usePageMode={true}
/>
```
### 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 (
<Button loading={isLoading} onClick={handleScan}>
扫码登录
</Button>
);
};
```
### 方式二：使用预制组件
```tsx
import QRLoginButton from '@/components/QRLoginButton';
const MyComponent = () => {
return (
<QRLoginButton
text="扫码登录"
usePageMode={true}
/>
);
};
```
### 方式三：跳转到专门页面
```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. 考虑网络异常和超时情况

248
src/api/qr-login/index.ts Normal file
View File

@@ -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<ApiResult<GenerateQRTokenResult>>(
'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<ApiResult<QRLoginStatusResult>>(
`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<ApiResult<ConfirmLoginResult>>(
'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<ApiResult<ConfirmLoginResult>>(
'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<any>((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<string>((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;
}
}

7
src/app.config.ts
View File

@@ -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": "你的位置信息将用于小程序位置接口的效果展示"
}
}
})
}

6
src/app.scss
View File

@@ -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;

89
src/components/AdminPanel.scss Normal file
View File

@@ -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;
}

151
src/components/AdminPanel.tsx Normal file
View File

@@ -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<AdminPanelProps> = ({
visible,
onClose,
className = ''
}) => {
if (!visible) return null;
// 管理员功能列表
const adminFeatures = [
{
id: 'store-verification',
title: '门店核销',
description: '扫码核销用户优惠券',
icon: <Scan className="text-blue-500" size="24" />,
color: 'bg-blue-50 border-blue-200',
onClick: () => {
navTo('/user/store/verification', true);
onClose?.();
}
},
{
id: 'qr-login',
title: '扫码登录',
description: '扫码快速登录网页端',
icon: <Scan className="text-green-500" size="24" />,
color: 'bg-green-50 border-green-200',
onClick: () => {
navTo('/pages/qr-login/index', true);
onClose?.();
}
},
{
id: 'user-management',
title: '用户管理',
description: '管理系统用户信息',
icon: <User className="text-purple-500" size="24" />,
color: 'bg-purple-50 border-purple-200',
onClick: () => {
// TODO: 跳转到用户管理页面
console.log('跳转到用户管理');
onClose?.();
}
},
{
id: 'store-management',
title: '门店管理',
description: '管理门店信息和设置',
icon: <Shop className="text-orange-500" size="24" />,
color: 'bg-orange-50 border-orange-200',
onClick: () => {
// TODO: 跳转到门店管理页面
console.log('跳转到门店管理');
onClose?.();
}
},
{
id: 'system-settings',
title: '系统设置',
description: '系统配置和参数管理',
icon: <Setting className="text-gray-500" size="24" />,
color: 'bg-gray-50 border-gray-200',
onClick: () => {
// TODO: 跳转到系统设置页面
console.log('跳转到系统设置');
onClose?.();
}
}
];
return (
<View className={`admin-panel ${className}`}>
{/* 遮罩层 */}
<View
className="fixed inset-0 bg-black bg-opacity-50 z-40"
onClick={onClose}
/>
{/* 面板内容 */}
<View className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 max-h-[70vh] overflow-hidden">
{/* 面板头部 */}
<View className="flex items-center justify-between p-4 border-b border-gray-100">
<View className="flex items-center">
<Setting className="text-blue-500 mr-2" size="20" />
<Text className="text-lg font-bold text-gray-800">管理员面板</Text>
</View>
<Button
size="small"
type="default"
onClick={onClose}
className="text-gray-500"
>
关闭
</Button>
</View>
{/* 功能网格 */}
<View className="p-4 pb-8">
<View className="grid grid-cols-2 gap-3">
{adminFeatures.map((feature) => (
<View
key={feature.id}
className={`${feature.color} border rounded-xl p-4 active:scale-95 transition-transform`}
onClick={feature.onClick}
>
<View className="flex items-center mb-2">
{feature.icon}
<Text className="ml-2 font-medium text-gray-800">
{feature.title}
</Text>
</View>
<Text className="text-xs text-gray-600 leading-relaxed">
{feature.description}
</Text>
</View>
))}
</View>
</View>
{/* 底部提示 */}
<View className="px-4 pb-4">
<View className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
<Text className="text-xs text-yellow-700 text-center">
💡 管理员功能仅对具有管理权限的用户开放
</Text>
</View>
</View>
</View>
</View>
);
};
export default AdminPanel;

48
src/components/CouponCard.scss
View File

@@ -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;

87
src/components/QRLoginButton.tsx Normal file
View File

@@ -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<QRLoginButtonProps> = ({
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 (
<Button
type={type}
size={size}
loading={isLoading}
disabled={disabled}
onClick={handleClick}
className={className}
>
{showIcon && !isLoading && (
<Scan className="mr-1" />
)}
{isLoading ? '扫码中...' : (disabled && !canScan() ? '请先登录' : text)}
</Button>
);
};
export default QRLoginButton;

182
src/components/QRLoginScanner.tsx Normal file
View File

@@ -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<QRLoginScannerProps> = ({
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 (
<View className="flex items-center justify-center text-blue-500">
<Loading className="mr-2" />
<Text>请扫描登录二维码...</Text>
</View>
);
case ScanLoginState.CONFIRMING:
return (
<View className="flex items-center justify-center text-orange-500">
<Loading className="mr-2" />
<Text>正在确认登录...</Text>
</View>
);
case ScanLoginState.SUCCESS:
return (
<View className="flex items-center justify-center text-green-500">
<Success className="mr-2" />
<Text>登录确认成功！</Text>
</View>
);
case ScanLoginState.ERROR:
return (
<View className="flex items-center justify-center text-red-500">
<Failure className="mr-2" />
<Text>{error || '扫码登录失败'}</Text>
</View>
);
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 (
<View className={`qr-login-scanner ${className}`}>
{/* 扫码按钮 */}
<Button
type="primary"
size="large"
loading={buttonProps.loading}
disabled={buttonProps.disabled}
onClick={buttonProps.onClick}
className="w-full"
>
{!buttonProps.loading && (
<Scan className="mr-2" />
)}
{buttonProps.text}
</Button>
{/* 状态显示 */}
{showStatus && (
<View className="mt-4 text-center">
{getStatusContent()}
</View>
)}
{/* 成功结果显示 */}
{state === ScanLoginState.SUCCESS && result && (
<View className="mt-4 p-4 bg-green-50 rounded-lg">
<Text className="text-sm text-green-700">
已为用户 {result.userInfo?.nickname || result.userInfo?.userId} 确认登录
</Text>
</View>
)}
{/* 使用说明 */}
{state === ScanLoginState.IDLE && (
<View className="mt-4 text-center">
<Text className="text-xs text-gray-500">
扫描网页端显示的登录二维码即可快速登录
</Text>
</View>
)}
</View>
);
};
export default QRLoginScanner;

66
src/hooks/useAdminMode.ts Normal file
View File

@@ -0,0 +1,66 @@
import { useState, useCallback, useEffect } from 'react';
import Taro from '@tarojs/taro';
/**
* 管理员模式Hook
* 用于管理管理员用户的模式切换（普通用户模式 vs 管理员模式）
*/
export function useAdminMode() {
const [isAdminMode, setIsAdminMode] = useState<boolean>(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
};
}

227
src/hooks/useQRLogin.ts Normal file
View File

@@ -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>(ScanLoginState.IDLE);
const [error, setError] = useState<string>('');
const [result, setResult] = useState<ConfirmLoginResult | null>(null);
const [isLoading, setIsLoading] = useState(false);
// 用于取消操作的引用
const cancelRef = useRef<boolean>(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<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;
}
// 解析二维码内容
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
};
}

5
src/pages/qr-login/index.config.ts Normal file
View File

@@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '扫码登录',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
}

193
src/pages/qr-login/index.tsx Normal file
View File

@@ -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<any[]>([]);
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 (
<View className="qr-login-page min-h-screen bg-gray-50">
{/* 导航栏 */}
<NavBar
title="扫码登录"
leftShow
onBackClick={handleBack}
leftText={<ArrowLeft />}
className="bg-white"
/>
{/* 主要内容 */}
<View className="p-4 space-y-4">
{/* 用户信息卡片 */}
<Card className="bg-white rounded-lg shadow-sm">
<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">
<Scan className="text-blue-500" size="24" />
</View>
<View>
<Text className="text-lg font-bold text-gray-800">
{getDisplayName()}
</Text>
<Text className="text-sm text-gray-500">
使用小程序扫码快速登录网页端
</Text>
</View>
</View>
{/* 扫码登录组件 */}
<QRLoginScanner
onSuccess={handleScanSuccess}
onError={handleScanError}
buttonText="开始扫码登录"
showStatus={true}
/>
</View>
</Card>
{/* 使用说明 */}
<Card className="bg-white rounded-lg shadow-sm">
<View className="p-4">
<View className="flex items-center mb-3">
<Tips className="text-orange-500 mr-2" />
<Text className="font-medium text-gray-800">使用说明</Text>
</View>
<View className="space-y-2 text-sm text-gray-600">
<Text className="block">1. 在电脑或其他设备上打开网页端登录页面</Text>
<Text className="block">2. 点击"扫码登录"按钮，显示登录二维码</Text>
<Text className="block">3. 使用此功能扫描二维码即可快速登录</Text>
<Text className="block">4. 扫码成功后，网页端将自动完成登录</Text>
</View>
</View>
</Card>
{/* 登录历史 */}
{loginHistory.length > 0 && (
<Card className="bg-white rounded-lg shadow-sm">
<View className="p-4">
<View className="flex items-center justify-between mb-3">
<Text className="font-medium text-gray-800">最近登录记录</Text>
<Button
size="small"
type="default"
onClick={clearHistory}
className="text-xs"
>
清除
</Button>
</View>
<View className="space-y-3">
{loginHistory.map((record, index) => (
<View key={record.id}>
<View className="flex items-center justify-between">
<View className="flex items-center">
{record.success ? (
<Success className="text-green-500 mr-2" size="16" />
) : (
<Failure className="text-red-500 mr-2" size="16" />
)}
<View>
<Text className="text-sm text-gray-800">
{record.success ? '登录成功' : '登录失败'}
</Text>
{record.error && (
<Text className="text-xs text-red-500">
{record.error}
</Text>
)}
</View>
</View>
<Text className="text-xs text-gray-500">
{record.time}
</Text>
</View>
{index < loginHistory.length - 1 && (
<Divider className="my-2" />
)}
</View>
))}
</View>
</View>
</Card>
)}
{/* 安全提示 */}
<Card className="bg-yellow-50 border border-yellow-200 rounded-lg">
<View className="p-4">
<View className="flex items-start">
<Tips className="text-yellow-600 mr-2 mt-1" size="16" />
<View>
<Text className="text-sm font-medium text-yellow-800 mb-1">
安全提示
</Text>
<Text className="text-xs text-yellow-700">
请确保只扫描来自官方网站的登录二维码，避免扫描来源不明的二维码，保护账户安全。
</Text>
</View>
</View>
</View>
</Card>
</View>
</View>
);
};
export default QRLoginPage;

65
src/pages/user/components/UserCard.tsx
View File

@@ -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<any, any>((_, ref) => {
const {
@@ -21,6 +24,15 @@ const UserCard = forwardRef<any, any>((_, ref) => {
const [IsLogin, setIsLogin] = useState<boolean>(false)
const [userInfo, setUserInfo] = useState<User>()
// 扫码登录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<any, any>((_, ref) => {
})
}
// 处理扫码登录
const handleQRLogin = async () => {
try {
await startScan();
} catch (error) {
console.error('扫码登录失败:', error);
}
};
// 打开管理员面板
const handleOpenAdminPanel = () => {
setShowAdminPanel(true);
};
// 关闭管理员面板
const handleCloseAdminPanel = () => {
setShowAdminPanel(false);
};
return (
<View className={'header-bg pt-20'}>
<View className={'p-4'}>
@@ -205,7 +236,31 @@ const UserCard = forwardRef<any, any>((_, ref) => {
) : ''}
</View>
</View>
{isAdmin() && <Scan onClick={() => navTo('/user/store/verification', true)} />}
{isAdmin() && (
<View className="flex items-center space-x-2">
{/* 管理员模式切换按钮 */}
<View
className={`px-3 py-1 rounded-full text-xs font-medium transition-all ${
isAdminMode
? 'bg-blue-500 text-white'
: 'bg-gray-100 text-gray-600 border border-gray-300'
}`}
onClick={toggleAdminMode}
>
{isAdminMode ? '管理员' : '普通用户'}
</View>
{/* 管理员功能入口 */}
{isAdminMode && (
<View
className="px-3 py-1 bg-blue-50 border border-blue-200 rounded-full text-xs text-blue-600 font-medium"
onClick={handleOpenAdminPanel}
>
管理面板
</View>
)}
</View>
)}
<View className={'mr-4 text-sm px-3 py-1 text-black border-gray-400 border-solid border-2 rounded-3xl'}
onClick={() => navTo('/user/profile/profile', true)}>
{'个人资料'}
@@ -234,6 +289,14 @@ const UserCard = forwardRef<any, any>((_, ref) => {
</View>
</View>
</View>
{/* 管理员面板 */}
{isAdmin() && (
<AdminPanel
visible={showAdminPanel}
onClose={handleCloseAdminPanel}
/>
)}
</View>
)

4
src/user/store/verification.config.ts
View File

@@ -1,4 +1,4 @@
export default definePageConfig({
export default {
navigationBarTitleText: '门店核销',
navigationBarTextStyle: 'black'
})
}