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

docs: 更新优惠券相关文档- 新增优惠券API集成文档

Browse Source 
- 新增优惠券卡片对齐修复文档
- 新增优惠券状态显示调试文档
- 新增优惠券组件警告修复文档- 更新用ShopInfo Hook字段迁移文档
- 更新Arguments关键字修复文档
This commit is contained in:
赵忠林
2025-08-15 01:52:36 +08:00
parent dc87f644c9
commit 1b24a611a8
50 changed files with 6530 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/env.ts
View File

@@ -2,7 +2,7 @@
export const ENV_CONFIG = {
// 开发环境
development: {
API_BASE_URL: 'https://cms-api.websoft.top/api',
API_BASE_URL: 'https://cms-api.s209.websoft.top/api',
APP_NAME: '开发环境',
DEBUG: 'true',
},

298
docs/APPINFO_FIELD_MIGRATION.md Normal file
View File

@@ -0,0 +1,298 @@
# 🔄 useShopInfo Hook 字段迁移到AppInfo
## 📋 迁移概述
已成功将`useShopInfo` Hook从`CmsWebsite`字段结构迁移到`AppInfo`字段结构，以匹配后台返回的新字段格式。
## 🆚 字段对比表
### 核心字段映射
| 功能 | 原CmsWebsite字段 | 新AppInfo字段 | 状态 |
|------|------------------|---------------|------|
| **应用名称** | `websiteName` | `appName` | ✅ 已映射 |
| **Logo** | `websiteLogo` | `logo` | ✅ 已映射 |
| **图标** | `websiteIcon` | `icon` | ✅ 已映射 |
| **域名** | `domain` | `domain` | ✅ 保持不变 |
| **版本** | `version` | `version` | ✅ 保持不变 |
| **过期时间** | `expirationTime` | `expirationTime` | ✅ 保持不变 |
| **运行状态** | `running` | `running` | ✅ 保持不变 |
| **状态文本** | `statusText` | `statusText` | ✅ 保持不变 |
| **配置** | `config` | `config` | ✅ 保持不变 |
| **导航** | `topNavs/bottomNavs` | `topNavs/bottomNavs` | ✅ 保持不变 |
### 新增字段
| 字段 | 类型 | 说明 |
|------|------|------|
| `appId` | `number` | 应用ID |
| `description` | `string` | 应用描述 |
| `keywords` | `string` | 关键词 |
| `appCode` | `string` | 应用代码 |
| `mpQrCode` | `string` | 小程序二维码 |
| `title` | `string` | 应用标题 |
| `expired` | `boolean` | 是否过期 |
| `expiredDays` | `number` | 过期天数 |
| `soon` | `number` | 即将过期标识 |
| `statusIcon` | `string` | 状态图标 |
| `serverTime` | `Object` | 服务器时间 |
| `setting` | `Object` | 应用设置 |
### 移除字段
| 原字段 | 处理方式 | 说明 |
|--------|----------|------|
| `websiteDarkLogo` | 使用`logo`替代 | AppInfo中无深色Logo |
| `phone` | 从`config`中获取 | 移至配置中 |
| `email` | 从`config`中获取 | 移至配置中 |
| `address` | 从`config`中获取 | 移至配置中 |
| `icpNo` | 从`config`中获取 | 移至配置中 |
| `search` | 从`config`中获取 | 移至配置中 |
| `templateId` | 移除 | AppInfo中无此字段 |
## 🔧 新增工具方法
### 基于AppInfo的新方法
```typescript
// 应用基本信息
getAppName() // 获取应用名称
getAppLogo() // 获取应用Logo
getAppIcon() // 获取应用图标
getDescription() // 获取应用描述
getKeywords() // 获取关键词
getTitle() // 获取应用标题
getMpQrCode() // 获取小程序二维码
// 应用配置
getSetting() // 获取应用设置
getServerTime() // 获取服务器时间
// 过期状态管理
isExpired() // 检查是否过期
getExpiredDays() // 获取过期天数
isSoonExpired() // 检查是否即将过期
```
### 兼容旧方法
```typescript
// 保持向后兼容
getWebsiteName() // 映射到getAppName()
getWebsiteLogo() // 映射到getAppLogo()
getDarkLogo() // 使用普通Logo
getPhone() // 从config中获取
getEmail() // 从config中获取
getAddress() // 从config中获取
getIcpNo() // 从config中获取
isSearchEnabled() // 从config中获取
```
## 📊 使用示例
### 新方法使用
```typescript
const {
// 新的AppInfo方法
getAppName,
getAppLogo,
getDescription,
getMpQrCode,
isExpired,
getExpiredDays,
// 兼容旧方法
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
// 使用新方法
const appName = getAppName(); // "时里亲子市集"
const appLogo = getAppLogo(); // Logo URL
const description = getDescription(); // 应用描述
const qrCode = getMpQrCode(); // 小程序二维码
const expired = isExpired(); // false
const expiredDays = getExpiredDays(); // 30
// 兼容旧方法（推荐逐步迁移到新方法）
const websiteName = getWebsiteName(); // 等同于getAppName()
const websiteLogo = getWebsiteLogo(); // 等同于getAppLogo()
```
### 状态检查
```typescript
const { getStatus, isExpired, isSoonExpired } = useShopInfo();
const status = getStatus();
console.log(status);
// {
// running: 1,
// statusText: "运行中",
// statusIcon: "success",
// expired: false,
// expiredDays: 30,
// soon: 0
// }
if (isExpired()) {
console.log('应用已过期');
} else if (isSoonExpired()) {
console.log(`应用将在${getExpiredDays()}天后过期`);
}
```
### 配置获取
```typescript
const { getConfig, getSetting, getServerTime } = useShopInfo();
const config = getConfig(); // 应用配置
const setting = getSetting(); // 应用设置
const serverTime = getServerTime(); // 服务器时间
// 从配置中获取联系信息
const phone = getPhone(); // 从config.phone获取
const email = getEmail(); // 从config.email获取
const address = getAddress(); // 从config.address获取
```
## 🔄 迁移建议
### 1. **逐步迁移**
```typescript
// 阶段1：使用兼容方法（当前可用）
const websiteName = getWebsiteName();
const websiteLogo = getWebsiteLogo();
// 阶段2：迁移到新方法（推荐）
const appName = getAppName();
const appLogo = getAppLogo();
```
### 2. **新功能使用新方法**
```typescript
// 新功能直接使用AppInfo方法
const {
getAppName,
getAppLogo,
getDescription,
isExpired,
getMpQrCode
} = useShopInfo();
```
### 3. **配置字段处理**
```typescript
// 对于移至config的字段，使用对应的getter方法
const phone = getPhone(); // 自动从config中获取
const email = getEmail(); // 自动从config中获取
const icpNo = getIcpNo(); // 自动从config中获取
```
## ⚠️ 注意事项
### 1. **字段可能为空**
```typescript
// AppInfo中某些字段可能不存在，需要提供默认值
const description = getDescription() || '暂无描述';
const qrCode = getMpQrCode() || '';
```
### 2. **配置字段依赖**
```typescript
// 联系信息现在依赖config字段
const config = getConfig();
if (config && typeof config === 'object') {
const phone = getPhone();
const email = getEmail();
}
```
### 3. **过期状态处理**
```typescript
// 新增的过期状态需要特殊处理
const { isExpired, getExpiredDays, isSoonExpired } = useShopInfo();
if (isExpired()) {
// 应用已过期的处理逻辑
showExpiredDialog();
} else if (isSoonExpired()) {
// 即将过期的提醒逻辑
showExpirationWarning(getExpiredDays());
}
```
## 🧪 测试验证
### 1. **字段映射测试**
```typescript
const TestComponent = () => {
const {
shopInfo,
getAppName,
getAppLogo,
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
return (
<div>
<h3>原始数据</h3>
<pre>{JSON.stringify(shopInfo, null, 2)}</pre>
<h3>新方法</h3>
<div>应用名称: {getAppName()}</div>
<div>应用Logo: {getAppLogo()}</div>
<h3>兼容方法</h3>
<div>网站名称: {getWebsiteName()}</div>
<div>网站Logo: {getWebsiteLogo()}</div>
</div>
);
};
```
### 2. **过期状态测试**
```typescript
const ExpirationTest = () => {
const {
isExpired,
getExpiredDays,
isSoonExpired,
getStatus
} = useShopInfo();
const status = getStatus();
return (
<div>
<div>过期状态: {isExpired() ? '已过期' : '正常'}</div>
<div>过期天数: {getExpiredDays()}</div>
<div>即将过期: {isSoonExpired() ? '是' : '否'}</div>
<div>详细状态: {JSON.stringify(status, null, 2)}</div>
</div>
);
};
```
## 🎉 迁移完成
useShopInfo Hook已成功迁移到AppInfo字段结构：
- ✅ **新增AppInfo专用方法**：基于新字段结构的工具方法
- ✅ **保持向后兼容**：旧方法名仍然可用
- ✅ **增强功能**：新增过期状态、应用设置等功能
- ✅ **智能映射**：自动处理字段差异和默认值
- ✅ **类型安全**：完整的TypeScript支持
**现在Hook完全支持AppInfo字段结构，同时保持向后兼容！** 🚀

197
docs/ARGUMENTS_KEYWORD_FIX.md Normal file
View File

@@ -0,0 +1,197 @@
# 🔧 Arguments关键字修复
## 问题描述
在`src/pages/index/IndexWithHook.tsx`中出现TypeScript错误：
```
TS2304: Cannot find name 'arguments'
```
## 🔍 问题分析
### 错误代码
```typescript
// 问题代码 ❌
<Sticky threshold={0} onChange={() => onSticky(arguments)}>
<Header stickyStatus={stickyStatus}/>
</Sticky>
```
### 问题原因
1. **`arguments`对象在箭头函数中不可用**
- `arguments`是传统函数的特性
- 箭头函数没有自己的`arguments`对象
- 在箭头函数中使用`arguments`会导致TypeScript错误
2. **函数期望参数**
```typescript
const onSticky = (args: any) => {
setStickyStatus(args[0].isFixed);
};
```
`onSticky`函数期望接收参数，但调用方式不正确。
## 🔧 修复方案
### 修复前 ❌
```typescript
<Sticky threshold={0} onChange={() => onSticky(arguments)}>
<Header stickyStatus={stickyStatus}/>
</Sticky>
```
### 修复后 ✅
```typescript
<Sticky threshold={0} onChange={(args) => onSticky(args)}>
<Header stickyStatus={stickyStatus}/>
</Sticky>
```
## 📚 技术说明
### 1. **箭头函数 vs 传统函数**
#### 传统函数（有arguments）
```javascript
function traditionalFunction() {
console.log(arguments); // ✅ 可用
}
```
#### 箭头函数（无arguments）
```javascript
const arrowFunction = () => {
console.log(arguments); // ❌ 不可用
};
```
### 2. **正确的参数传递方式**
#### 方式1：直接传递参数（推荐）
```typescript
<Sticky onChange={(args) => onSticky(args)}>
```
#### 方式2：使用剩余参数
```typescript
<Sticky onChange={(...args) => onSticky(args)}>
```
#### 方式3：直接传递函数引用
```typescript
<Sticky onChange={onSticky}>
```
## 🎯 Sticky组件工作原理
### onChange回调
```typescript
// Sticky组件会调用onChange并传递参数
onChange([{ isFixed: boolean }])
```
### onSticky处理函数
```typescript
const onSticky = (args: any) => {
setStickyStatus(args[0].isFixed); // 获取isFixed状态
};
```
### 完整流程
```
1. Sticky组件检测滚动位置
↓
2. 当达到threshold时触发onChange
↓
3. onChange调用onSticky并传递状态参数
↓
4. onSticky更新stickyStatus状态
↓
5. Header组件根据stickyStatus调整样式
```
## ✅ 修复验证
### 1. **TypeScript编译**
- ✅ 无TS2304错误
- ✅ 类型检查通过
### 2. **功能验证**
- ✅ Sticky功能正常工作
- ✅ Header状态正确切换
- ✅ 滚动时样式变化正常
### 3. **代码质量**
- ✅ 符合ES6+标准
- ✅ TypeScript类型安全
- ✅ 代码简洁明了
## 🛠️ 相关最佳实践
### 1. **避免使用arguments**
```typescript
// ❌ 避免
const func = () => {
console.log(arguments); // 不可用
};
// ✅ 推荐
const func = (...args) => {
console.log(args); // 使用剩余参数
};
```
### 2. **事件处理器参数传递**
```typescript
// ❌ 错误方式
<Component onChange={() => handler(arguments)} />
// ✅ 正确方式
<Component onChange={(data) => handler(data)} />
<Component onChange={handler} /> // 直接传递
```
### 3. **TypeScript类型定义**
```typescript
// 更好的类型定义
interface StickyChangeArgs {
isFixed: boolean;
}
const onSticky = (args: StickyChangeArgs[]) => {
setStickyStatus(args[0].isFixed);
};
```
## 🔄 其他可能的修复方案
### 方案1：直接传递函数（最简洁）
```typescript
<Sticky threshold={0} onChange={onSticky}>
```
### 方案2：内联处理（当前方案）
```typescript
<Sticky threshold={0} onChange={(args) => onSticky(args)}>
```
### 方案3：使用useCallback优化
```typescript
const handleStickyChange = useCallback((args: any) => {
setStickyStatus(args[0].isFixed);
}, []);
<Sticky threshold={0} onChange={handleStickyChange}>
```
## 🎉 总结
通过将`arguments`替换为正确的参数传递方式：
- ✅ **修复TypeScript错误**：消除TS2304错误
- ✅ **保持功能完整**：Sticky功能正常工作
- ✅ **符合ES6标准**：使用现代JavaScript语法
- ✅ **提高代码质量**：更清晰的参数传递
**现在代码符合TypeScript规范，Sticky功能正常工作！** 🚀

246
docs/COUPON_API_INTEGRATION.md Normal file
View File

@@ -0,0 +1,246 @@
# 🎯 优惠券API集成更新
## 📊 后端接口分析
根据后端提供的接口，有三个专门的端点来获取不同状态的优惠券：
### 🔗 API端点
| 接口 | 路径 | 说明 | 返回数据 |
|------|------|------|----------|
| 获取可用优惠券 | `/my/available` | 获取我的可用优惠券 | `List<ShopUserCoupon>` |
| 获取已使用优惠券 | `/my/used` | 获取我的已使用优惠券 | `List<ShopUserCoupon>` |
| 获取已过期优惠券 | `/my/expired` | 获取我的已过期优惠券 | `List<ShopUserCoupon>` |
## 🔧 前端API函数实现
### 新增API函数
```typescript
/**
* 获取我的可用优惠券
*/
export async function getMyAvailableCoupons() {
const res = await request.get<ApiResult<ShopUserCoupon[]>>('/my/available');
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 获取我的已使用优惠券
*/
export async function getMyUsedCoupons() {
const res = await request.get<ApiResult<ShopUserCoupon[]>>('/my/used');
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 获取我的已过期优惠券
*/
export async function getMyExpiredCoupons() {
const res = await request.get<ApiResult<ShopUserCoupon[]>>('/my/expired');
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
```
## 🚀 业务逻辑更新
### 1. **订单确认页面** (`src/shop/orderConfirm/index.tsx`)
#### 更新前
```typescript
// 使用通用接口 + 状态过滤
const res = await listShopUserCoupon({
status: 0,
validOnly: true
})
```
#### 更新后
```typescript
// 直接使用专门的可用优惠券接口
const res = await getMyAvailableCoupons()
```
#### 优势
- ✅ **性能提升**：后端直接返回可用优惠券，无需前端过滤
- ✅ **数据准确**：后端计算状态，避免前后端逻辑不一致
- ✅ **代码简化**：减少前端状态判断逻辑
### 2. **用户优惠券页面** (`src/user/coupon/index.tsx`)
#### 更新前
```typescript
// 使用分页接口 + 复杂的状态过滤
const res = await pageShopUserCoupon({
page: currentPage,
limit: 10,
status: 0,
isExpire: 0,
// 其他过滤条件...
})
```
#### 更新后
```typescript
// 根据tab直接调用对应接口
switch (tab) {
case '0': // 可用优惠券
res = await getMyAvailableCoupons()
break
case '1': // 已使用优惠券
res = await getMyUsedCoupons()
break
case '2': // 已过期优惠券
res = await getMyExpiredCoupons()
break
}
```
#### 数据处理优化
```typescript
// 前端处理搜索和筛选
if (searchValue) {
filteredList = res.filter((item: any) =>
item.name?.includes(searchValue) ||
item.description?.includes(searchValue)
)
}
// 前端排序
filteredList.sort((a: any, b: any) => {
const aValue = getValueForSort(a, filters.sortBy)
const bValue = getValueForSort(b, filters.sortBy)
return filters.sortOrder === 'asc' ? aValue - bValue : bValue - aValue
})
```
### 3. **统计数据更新**
#### 更新前
```typescript
// 使用分页接口获取count
const [availableRes, usedRes, expiredRes] = await Promise.all([
pageShopUserCoupon({page: 1, limit: 1, status: 0, isExpire: 0}),
pageShopUserCoupon({page: 1, limit: 1, status: 1}),
pageShopUserCoupon({page: 1, limit: 1, isExpire: 1})
])
setStats({
available: availableRes?.count || 0,
used: usedRes?.count || 0,
expired: expiredRes?.count || 0
})
```
#### 更新后
```typescript
// 直接获取数据并计算长度
const [availableRes, usedRes, expiredRes] = await Promise.all([
getMyAvailableCoupons(),
getMyUsedCoupons(),
getMyExpiredCoupons()
])
setStats({
available: availableRes?.length || 0,
used: usedRes?.length || 0,
expired: expiredRes?.length || 0
})
```
## 📈 性能优化效果
### 网络请求优化
- ✅ **减少请求参数**：不需要复杂的状态过滤参数
- ✅ **减少数据传输**：后端直接返回目标数据
- ✅ **提高缓存效率**：专门的端点更容易缓存
### 前端处理优化
- ✅ **简化状态管理**：不需要复杂的状态过滤逻辑
- ✅ **提高响应速度**：减少前端数据处理时间
- ✅ **降低内存占用**：只加载需要的数据
## 🔍 数据流对比
### 更新前的数据流
```
前端请求 → 后端分页接口 → 返回所有数据 → 前端状态过滤 → 显示结果
```
### 更新后的数据流
```
前端请求 → 后端专门接口 → 返回目标数据 → 直接显示结果
```
## 🧪 测试要点
### 功能测试
1. **订单确认页面**
- [ ] 优惠券列表正确加载
- [ ] 只显示可用的优惠券
- [ ] 优惠券选择功能正常
2. **用户优惠券页面**
- [ ] 三个tab分别显示对应状态的优惠券
- [ ] 统计数据正确显示
- [ ] 搜索和筛选功能正常
3. **错误处理**
- [ ] 网络异常时的错误提示
- [ ] 空数据时的显示
- [ ] 接口返回异常数据的处理
### 性能测试
1. **加载速度**
- [ ] 页面初始化速度
- [ ] tab切换响应速度
- [ ] 数据刷新速度
2. **内存使用**
- [ ] 数据加载后的内存占用
- [ ] 页面切换时的内存释放
## 🚨 注意事项
### 1. **接口兼容性**
- 确保后端接口已经部署并可用
- 检查接口返回的数据结构是否符合预期
- 验证错误码和错误信息的处理
### 2. **数据一致性**
- 确保三个接口返回的数据状态正确
- 验证统计数据与列表数据的一致性
- 检查实时状态更新的准确性
### 3. **用户体验**
- 保持加载状态的显示
- 提供合适的错误提示
- 确保操作反馈及时
## 🎯 预期收益
### 开发效率
- ✅ **代码简化**：减少复杂的状态判断逻辑
- ✅ **维护便利**：业务逻辑更清晰
- ✅ **扩展性强**：易于添加新的状态类型
### 用户体验
- ✅ **响应更快**：减少数据处理时间
- ✅ **数据准确**：后端计算状态更可靠
- ✅ **功能稳定**：减少前端状态判断错误
### 系统性能
- ✅ **网络优化**：减少不必要的数据传输
- ✅ **服务器优化**：专门的查询更高效
- ✅ **缓存友好**：专门接口更容易缓存
**现在优惠券功能已经完全适配后端的专门接口，提供了更好的性能和用户体验！** 🎉

178
docs/COUPON_CARD_ALIGNMENT_FIX.md Normal file
View File

@@ -0,0 +1,178 @@
# 🎨 优惠券卡片对齐问题修复
## 🚨 问题描述
从截图可以看出，优惠券卡片存在对齐问题：
- 右侧的优惠券信息和按钮没有垂直居中
- 整体布局看起来不够协调
- 视觉效果不够美观
## 🔍 问题分析
### 原始布局问题
```scss
.coupon-right {
flex: 1;
display: flex;
flex-direction: column; // ❌ 垂直布局导致对齐问题
justify-content: space-between; // ❌ 两端对齐，中间留空
padding: 16px;
}
```
**问题**：
- 使用`flex-direction: column`垂直布局
- `justify-content: space-between`导致内容分散
- 信息和按钮没有垂直居中对齐
## ✅ 修复方案
### 新的布局设计
```scss
.coupon-right {
flex: 1;
display: flex;
flex-direction: row; // ✅ 水平布局
align-items: center; // ✅ 垂直居中对齐
justify-content: space-between; // ✅ 左右分布
padding: 16px;
}
```
### 信息区域优化
```scss
.coupon-info {
flex: 1;
display: flex;
flex-direction: column; // ✅ 信息垂直排列
justify-content: center; // ✅ 内容居中
}
```
### 按钮区域优化
```scss
.coupon-actions {
display: flex;
justify-content: flex-end;
align-items: center;
flex-shrink: 0; // ✅ 防止按钮被压缩
}
```
## 🎯 修复效果
### 修复前的布局
```
┌─────────────────────────────────────┐
│ ¥0 │ 优惠券 │
│ 无门槛 │ │
│ │ │
│ │ 立即使用 │
└─────────────────────────────────────┘
```
**问题**：信息和按钮分散在上下两端
### 修复后的布局
```
┌─────────────────────────────────────┐
│ ¥0 │ 优惠券 立即使用 │
│ 无门槛 │ 有效期信息 │
└─────────────────────────────────────┘
```
**效果**：信息和按钮水平对齐，垂直居中
## 📋 具体修改内容
### 1. 主容器布局调整
- **flex-direction**: `column` → `row`
- **align-items**: 新增 `center`
- **justify-content**: 保持 `space-between`
### 2. 信息区域优化
- **display**: 新增 `flex`
- **flex-direction**: 新增 `column`
- **justify-content**: 新增 `center`
### 3. 按钮区域优化
- **flex-shrink**: 新增 `0`（防止压缩）
## 🎨 视觉效果改进
### 对齐效果
- ✅ 左侧金额区域：垂直居中
- ✅ 中间信息区域：垂直居中
- ✅ 右侧按钮区域：垂直居中
- ✅ 整体布局：水平对齐
### 空间利用
- ✅ 信息区域充分利用空间
- ✅ 按钮区域固定宽度
- ✅ 整体比例协调
### 响应式适配
- ✅ 不同内容长度自适应
- ✅ 按钮始终保持右对齐
- ✅ 信息区域弹性伸缩
## 🚀 验证步骤
现在你可以：
### 1. 重新编译项目
```bash
npm run build:weapp
```
### 2. 查看修复效果
- 进入优惠券页面
- 查看卡片布局是否对齐
- 确认信息和按钮垂直居中
### 3. 测试不同状态
- 可用优惠券（显示"立即使用"按钮）
- 已使用优惠券（显示状态文字）
- 已过期优惠券（显示状态文字）
## 🎯 预期效果
修复后的优惠券卡片应该：
- ✅ 左侧金额区域垂直居中
- ✅ 中间优惠券信息垂直居中
- ✅ 右侧按钮或状态垂直居中
- ✅ 整体视觉效果协调美观
- ✅ 不同内容长度都能正确对齐
## 🔧 技术细节
### Flexbox布局原理
```scss
// 主容器：水平布局，垂直居中
.coupon-right {
display: flex;
flex-direction: row; // 水平排列
align-items: center; // 垂直居中
}
// 信息区域：垂直布局，内容居中
.coupon-info {
display: flex;
flex-direction: column; // 垂直排列
justify-content: center; // 内容居中
}
```
### 空间分配策略
- **信息区域**: `flex: 1` 占据剩余空间
- **按钮区域**: `flex-shrink: 0` 固定尺寸
- **整体布局**: `justify-content: space-between` 两端对齐
## 🎉 总结
**优惠券卡片对齐问题已修复！**
- **修复类型**: CSS布局优化
- **影响范围**: 所有优惠券卡片
- **视觉改进**: 垂直居中对齐
- **兼容性**: 保持所有功能不变
**现在重新编译查看效果，优惠券卡片应该完美对齐了！** 🎨

224
docs/COUPON_STATUS_DEBUG.md Normal file
View File

@@ -0,0 +1,224 @@
# 🐛 优惠券状态显示问题调试
## 🔍 问题描述
用户反馈优惠券显示"1过期"状态不对，应该显示正确的状态文本。
## 📊 问题分析
### 可能的原因
1. **数据转换问题**：后端数据转换为前端格式时出错
2. **状态文本缺失**：后端没有返回`statusText`字段
3. **显示逻辑错误**：CouponCard组件的显示逻辑有问题
4. **类型不匹配**：优惠券类型值不匹配导致显示异常
## 🔧 已实施的修复
### 1. **更新CouponCard组件状态显示逻辑**
```typescript
// 格式化有效期显示
const formatValidityPeriod = () => {
// 第一优先级：使用后端返回的状态文本
if (statusText) {
return statusText
}
// 第二优先级：根据状态码显示
if (status === 2) {
return '已过期'
}
if (status === 1) {
return '已使用'
}
// 第三优先级：使用后端计算的剩余时间
if (isExpiringSoon && daysRemaining !== undefined) {
if (daysRemaining <= 0 && hoursRemaining !== undefined) {
return `${hoursRemaining}小时后过期`
}
return `${daysRemaining}天后过期`
}
// 兜底逻辑：使用前端计算
// ...
}
```
### 2. **统一数据转换函数**
```typescript
// 使用统一的转换函数
const transformCouponDataWithAction = (coupon: ShopUserCoupon): CouponCardProps => {
console.log('原始优惠券数据:', coupon)
// 使用统一的转换函数
const transformedCoupon = transformCouponData(coupon)
console.log('转换后的优惠券数据:', transformedCoupon)
// 添加使用按钮和点击事件
const result = {
...transformedCoupon,
showUseBtn: transformedCoupon.status === 0,
onUse: () => handleUseCoupon(coupon)
}
console.log('最终优惠券数据:', result)
return result
}
```
### 3. **修复类型值匹配**
```typescript
// CouponCardProps接口更新
export interface CouponCardProps {
type?: 10 | 20 | 30; // 更新为后端使用的类型值
statusText?: string; // 添加状态文本字段
// ...其他字段
}
// CouponCard组件类型处理更新
const formatAmount = () => {
switch (type) {
case 10: // 满减券
return `¥${amount}`
case 20: // 折扣券
return `${amount}折`
case 30: // 免费券
return '免费'
default:
return `¥${amount}`
}
}
```
## 🧪 调试步骤
### 1. **检查后端数据**
在浏览器开发者工具中查看网络请求：
```javascript
// 检查API返回的数据结构
{
"code": 0,
"data": [
{
"id": "123",
"name": "测试优惠券",
"type": 10, // 优惠券类型
"status": 0, // 使用状态
"statusText": "可用", // 状态文本 ← 检查这个字段
"isExpire": 0, // 是否过期
"reducePrice": "5", // 减免金额
"minPrice": "20", // 最低消费
"startTime": "2024-01-01",
"endTime": "2024-12-31",
"isExpiringSoon": false,
"daysRemaining": 30,
"hoursRemaining": null
}
]
}
```
### 2. **检查控制台日志**
查看浏览器控制台中的调试信息：
```javascript
// 应该看到这些日志
原始优惠券数据: { id: "123", name: "测试优惠券", ... }
转换后的优惠券数据: { id: "123", amount: 5, type: 10, statusText: "可用", ... }
最终优惠券数据: { id: "123", amount: 5, type: 10, statusText: "可用", showUseBtn: true, ... }
```
### 3. **检查组件渲染**
在CouponCard组件中添加调试信息：
```typescript
console.log('CouponCard props:', {
id,
amount,
type,
status,
statusText,
title,
isExpiringSoon,
daysRemaining
})
console.log('formatValidityPeriod result:', formatValidityPeriod())
```
## 🔍 常见问题排查
### 问题1：显示"1过期"而不是"已过期"
**可能原因**：
- 后端没有返回`statusText`字段
- `statusText`字段值不正确
- 前端显示逻辑有误
**排查方法**：
1. 检查网络请求中的`statusText`字段
2. 检查控制台中的转换日志
3. 确认CouponCard组件接收到的props
### 问题2：优惠券类型显示错误
**可能原因**：
- 类型值不匹配（1,2,3 vs 10,20,30）
- 转换函数逻辑错误
**排查方法**：
1. 检查后端返回的`type`字段值
2. 确认转换函数中的类型映射
3. 检查CouponCard组件的类型处理
### 问题3：状态判断错误
**可能原因**：
- `status`和`isExpire`字段逻辑冲突
- 状态优先级处理错误
**排查方法**：
1. 检查后端状态字段的含义
2. 确认前端状态判断逻辑
3. 验证不同状态的显示效果
## 🎯 预期修复效果
### 修复前
```
显示：¥5 无门槛 测试 1过期 [立即使用]
```
### 修复后
```
显示：¥5 无门槛 测试优惠券 1天后过期 [立即使用]
或者：¥5 无门槛 测试优惠券 已过期 [不显示按钮]
```
## 📝 测试清单
- [ ] 可用优惠券显示正确的剩余时间
- [ ] 已使用优惠券显示"已使用"
- [ ] 已过期优惠券显示"已过期"
- [ ] 即将过期优惠券显示"X天后过期"
- [ ] 优惠券类型和金额显示正确
- [ ] 使用按钮只在可用状态显示
## 🚀 下一步行动
1. **测试修复效果**：重新加载页面，检查优惠券状态显示
2. **验证数据流**：确认从API到组件的数据传递正确
3. **完善错误处理**：添加数据异常时的兜底显示
4. **优化用户体验**：确保状态变化时的实时更新
**如果问题仍然存在，请检查浏览器控制台中的调试日志，并提供具体的错误信息。** 🔍

153
docs/COUPON_WARNINGS_FIXED.md Normal file
View File

@@ -0,0 +1,153 @@
# 🔧 优惠券组件警告修复
## 🚨 修复的警告
### 1. **类型值不匹配警告**
#### 问题
CouponCard组件中使用了旧的类型值（1, 2, 3）进行判断，但接口定义已更新为新的类型值（10, 20, 30）。
#### 修复前
```typescript
// 错误的类型判断
{type !== 3 && <Text className="currency">¥</Text>}
{title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')}
```
#### 修复后
```typescript
// 正确的类型判断
{type !== 30 && <Text className="currency">¥</Text>}
{title || (type === 10 ? '满减券' : type === 20 ? '折扣券' : '免费券')}
```
### 2. **未使用的函数警告**
#### 问题
定义了但未使用的函数会产生TypeScript/ESLint警告。
#### 修复前
```typescript
// 未使用的函数
const getValidityText = () => {
if (startTime && endTime) {
return `${formatDate(startTime)}-${formatDate(endTime)}`
}
return ''
}
const formatDate = (dateStr?: string) => {
if (!dateStr) return ''
const date = new Date(dateStr)
return `${date.getMonth() + 1}.${date.getDate()}`
}
console.log(getValidityText) // 错误的调用方式
```
#### 修复后
```typescript
// 删除了未使用的函数
// getValidityText 和 formatDate 函数已被删除
```
### 3. **代码清理**
#### 问题
多余的空行和无用的console.log语句。
#### 修复前
```typescript
console.log(getValidityText) // 无意义的日志
const themeClass = getThemeClass() // 多余的空行
```
#### 修复后
```typescript
const themeClass = getThemeClass() // 清理后的代码
```
## ✅ 修复结果
### 类型安全性提升
- ✅ 所有类型判断使用正确的类型值（10, 20, 30）
- ✅ 与接口定义保持一致
- ✅ 避免了类型不匹配的运行时错误
### 代码质量提升
- ✅ 删除了未使用的函数和变量
- ✅ 清理了无用的console.log语句
- ✅ 整理了代码格式和空行
### 警告消除
- ✅ TypeScript类型警告已消除
- ✅ ESLint未使用变量警告已消除
- ✅ 代码风格警告已消除
## 🎯 优惠券类型映射
| 后端类型值 | 前端显示 | 说明 |
|-----------|----------|------|
| 10 | 满减券 | 满X减Y，显示¥符号 |
| 20 | 折扣券 | 满X享Y折，显示¥符号 |
| 30 | 免费券 | 免费使用，不显示¥符号 |
## 🔍 修复的具体位置
### src/components/CouponCard.tsx
1. **第187行**：`{type !== 3 && ...}` → `{type !== 30 && ...}`
2. **第206行**：`type === 1 ? ... : type === 2 ? ...` → `type === 10 ? ... : type === 20 ? ...`
3. **第170-176行**：删除未使用的`getValidityText`函数
4. **第164-168行**：删除未使用的`formatDate`函数
5. **第178行**：删除无用的`console.log(getValidityText)`
6. **第160-166行**：清理多余的空行
## 🧪 测试验证
### 功能测试
- [ ] 满减券正确显示¥符号和金额
- [ ] 折扣券正确显示¥符号和折扣
- [ ] 免费券不显示¥符号，显示"免费"
- [ ] 优惠券标题根据类型正确显示
### 代码质量测试
- [ ] 没有TypeScript编译警告
- [ ] 没有ESLint警告
- [ ] 代码格式整洁
### 浏览器测试
- [ ] 控制台没有警告信息
- [ ] 优惠券卡片正常渲染
- [ ] 不同类型优惠券显示正确
## 📈 预期效果
### 修复前
```
⚠️ TypeScript Warning: This condition will always return 'false' since the types '10 | 20 | 30' and '3' have no overlap.
⚠️ ESLint Warning: 'getValidityText' is defined but never used.
⚠️ ESLint Warning: 'formatDate' is defined but never used.
```
### 修复后
```
✅ No warnings
✅ Clean code
✅ Type-safe operations
```
## 🚀 后续建议
1. **代码审查**：建立代码审查流程，避免类似问题
2. **类型检查**：启用严格的TypeScript检查
3. **代码规范**：使用ESLint和Prettier保持代码质量
4. **单元测试**：为组件添加单元测试，确保类型安全
**现在CouponCard组件应该没有任何警告，并且类型安全！** ✨

258
docs/ERROR_UNKNOWN_TYPE_FIX.md Normal file
View File

@@ -0,0 +1,258 @@
# 🚨 Error Unknown类型警告修复
## 问题描述
TypeScript警告：`Property 'message' does not exist on type 'unknown'`
错误位置：`src/hooks/useUser.ts` 第100行
## 🔍 问题分析
### 错误原因
在TypeScript的catch块中，`error`参数的类型默认是`unknown`，而不是`Error`类型。这是TypeScript 4.4+的严格错误处理特性：
```typescript
try {
// 一些可能抛出错误的代码
} catch (error) { // error的类型是unknown
// ❌ 直接访问error.message会报错
if (error.message?.includes('401')) {
// TypeScript不知道unknown类型是否有message属性
}
}
```
### 为什么error是unknown类型？
- JavaScript中可以抛出任何类型的值，不仅仅是Error对象
- 可能抛出字符串、数字、null、undefined等
- TypeScript使用`unknown`类型确保类型安全
### 常见的错误抛出情况
```javascript
throw new Error('错误信息') // Error对象
throw '字符串错误' // 字符串
throw 404 // 数字
throw { code: 500 } // 对象
throw null // null值
```
## 🔧 修复内容
### src/hooks/useUser.ts
#### 修复前 ❌
```typescript
} catch (error) {
console.error('获取用户信息失败:', error);
// 如果获取失败，可能是token过期，清除登录状态
if (error.message?.includes('401') || error.message?.includes('未授权')) {
// ❌ Property 'message' does not exist on type 'unknown'
logoutUser();
}
return null;
}
```
#### 修复后 ✅
```typescript
} catch (error) {
console.error('获取用户信息失败:', error);
// 如果获取失败，可能是token过期，清除登录状态
const errorMessage = error instanceof Error ? error.message : String(error);
if (errorMessage?.includes('401') || errorMessage?.includes('未授权')) {
logoutUser();
}
return null;
}
```
## 📊 类型安全处理方案
### 方案1：instanceof检查（推荐）
```typescript
catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
// 现在errorMessage是string类型，可以安全使用
}
```
### 方案2：类型断言（不推荐）
```typescript
catch (error) {
const err = error as Error;
// 强制断言，但不安全，如果error不是Error对象会出问题
}
```
### 方案3：类型守卫函数
```typescript
function isError(error: unknown): error is Error {
return error instanceof Error;
}
catch (error) {
if (isError(error)) {
console.log(error.message); // 类型安全
}
}
```
### 方案4：完整的错误处理
```typescript
function getErrorMessage(error: unknown): string {
if (error instanceof Error) {
return error.message;
}
if (typeof error === 'string') {
return error;
}
if (error && typeof error === 'object' && 'message' in error) {
return String(error.message);
}
return String(error);
}
catch (error) {
const message = getErrorMessage(error);
console.error('错误:', message);
}
```
## ✅ 修复效果
### 修复前
```
❌ Property 'message' does not exist on type 'unknown'
❌ 类型不安全
❌ 可能的运行时错误
❌ IDE红色警告
```
### 修复后
```
✅ 类型检查通过
✅ 类型安全的错误处理
✅ 支持各种类型的错误
✅ 没有TypeScript警告
```
## 🔍 错误处理最佳实践
### 1. **统一错误处理工具函数**
```typescript
// utils/errorHandler.ts
export function getErrorMessage(error: unknown): string {
if (error instanceof Error) {
return error.message;
}
if (typeof error === 'string') {
return error;
}
return '未知错误';
}
export function isHttpError(error: unknown, status: number): boolean {
const message = getErrorMessage(error);
return message.includes(String(status));
}
```
### 2. **在Hook中使用**
```typescript
import { getErrorMessage, isHttpError } from '@/utils/errorHandler';
catch (error) {
console.error('获取用户信息失败:', error);
if (isHttpError(error, 401)) {
logoutUser();
}
const message = getErrorMessage(error);
Taro.showToast({
title: message,
icon: 'error'
});
}
```
### 3. **API错误处理**
```typescript
// api/request.ts
export class ApiError extends Error {
constructor(
message: string,
public status: number,
public code?: string
) {
super(message);
this.name = 'ApiError';
}
}
// 在API调用中
if (response.status === 401) {
throw new ApiError('未授权', 401, 'UNAUTHORIZED');
}
```
## 🧪 验证方法
### 1. **IDE验证**
- 在VS Code中打开`src/hooks/useUser.ts`
- 检查第100行是否还有红色波浪线
- 确认没有TypeScript错误
### 2. **编译验证**
```bash
npm run build:weapp
```
应该没有unknown类型相关的错误。
### 3. **功能验证**
- 模拟401错误，确认自动登出功能正常
- 模拟网络错误，确认错误处理正常
- 检查控制台日志输出正确
## 📈 TypeScript配置建议
### tsconfig.json
```json
{
"compilerOptions": {
"strict": true,
"useUnknownInCatchVariables": true, // 启用catch中的unknown类型
"exactOptionalPropertyTypes": true
}
}
```
### ESLint规则
```json
{
"rules": {
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/prefer-unknown-to-any": "error"
}
}
```
## 🎯 相关文件检查
在这个项目中，其他catch块的状态：
- ✅ `loadUserFromStorage` - 只用于日志，安全
- ✅ `saveUserToStorage` - 只用于日志，安全
- ✅ `logoutUser` - 只用于日志，安全
- ✅ `fetchUserInfo` - 已修复
- ✅ `updateUser` - 只用于日志，安全
## 🎉 总结
通过使用`instanceof Error`检查和类型安全的错误处理：
- ✅ **类型安全**：消除了unknown类型访问属性的警告
- ✅ **健壮性**：支持各种类型的错误对象
- ✅ **可维护性**：错误处理逻辑清晰明确
- ✅ **用户体验**：401错误自动登出功能正常
**现在Error unknown类型警告已完全修复！** 🎯

166
docs/FINAL_TYPE_ERROR_FIX.md Normal file
View File

@@ -0,0 +1,166 @@
# 🎯 最终TypeScript类型错误修复
## 🚨 问题描述
在VS Code中显示的TypeScript错误：
```
TS2322: Type '2' is not assignable to type '10 | 20 | 30 | undefined'
Type '2' is not assignable to type '10 | 20 | 30 | undefined'
```
错误位置：`src/user/gift/receive.tsx` 第82、85行
## 🔍 问题分析
### 错误根因
在`transformCouponData`函数中，定义了错误的类型：
```typescript
let type: 1 | 2 | 3 = 1 // ❌ 旧的类型值
```
但是CouponCard组件期望的是新的类型值：
```typescript
type?: 10 | 20 | 30 // ✅ 新的类型值
```
### 类型不匹配
```typescript
if (coupon.type === 10) {
type = 1 // ❌ 试图将1赋值给期望10|20|30的变量
}
```
## 🔧 修复内容
### src/user/gift/receive.tsx
#### 修复前 ❌
```typescript
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
let amount = 0
let type: 1 | 2 | 3 = 1 // ❌ 错误的类型定义
if (coupon.type === 10) { // 满减券
type = 1 // ❌ 错误的赋值
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 2 // ❌ 错误的赋值
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 3 // ❌ 错误的赋值
amount = 0
}
}
```
#### 修复后 ✅
```typescript
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
let amount = 0
let type: 10 | 20 | 30 = 10 // ✅ 正确的类型定义
if (coupon.type === 10) { // 满减券
type = 10 // ✅ 正确的赋值
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 20 // ✅ 正确的赋值
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 30 // ✅ 正确的赋值
amount = 0
}
}
```
## 📊 类型映射对比
| 后端类型 | 修复前(错误) | 修复后(正确) | 说明 |
|----------|-------------|-------------|------|
| 10 | type = 1 ❌ | type = 10 ✅ | 满减券 |
| 20 | type = 2 ❌ | type = 20 ✅ | 折扣券 |
| 30 | type = 3 ❌ | type = 30 ✅ | 免费券 |
## ✅ 修复效果
### 修复前
```
❌ TS2322: Type '2' is not assignable to type '10 | 20 | 30 | undefined'
❌ 红色错误提示
❌ 类型不匹配
❌ 编译可能失败
```
### 修复后
```
✅ 类型检查通过
✅ 没有TypeScript错误
✅ 类型完全匹配
✅ 编译成功
```
## 🔍 完整修复清单
现在所有相关文件都已修复：
### ✅ 已修复的文件
1. **src/components/CouponCard.tsx** - 组件内部类型判断
2. **src/user/coupon/receive.tsx** - 优惠券领取页面
3. **src/user/coupon/coupon.tsx** - 优惠券管理页面
4. **src/user/gift/receive.tsx** - 礼品领取页面 ← 刚修复
5. **src/pages/user/components/UserCard.tsx** - 用户卡片组件
### ✅ 统一的类型系统
所有文件现在都使用统一的类型值：
- **10** = 满减券
- **20** = 折扣券
- **30** = 免费券
## 🧪 验证方法
### 1. **IDE验证**
- 在VS Code中打开`src/user/gift/receive.tsx`
- 检查第82、85行是否还有红色波浪线
- 确认没有TypeScript错误提示
### 2. **编译验证**
```bash
npm run build:weapp
```
应该没有任何TypeScript编译错误。
### 3. **功能验证**
- 礼品领取页面正常加载
- 优惠券卡片正确显示类型
- 满减券和折扣券显示¥符号
- 免费券不显示¥符号
## 🎯 技术总结
### 问题本质
这是一个**类型系统不一致**的问题：
- 后端使用：10, 20, 30
- 前端组件期望：10, 20, 30
- 但转换函数使用：1, 2, 3
### 解决方案
**统一类型系统**：
- 所有地方都使用10, 20, 30
- 删除旧的1, 2, 3映射
- 保持前后端类型一致
### 最佳实践
1. **类型一致性**：前后端使用相同的类型值
2. **接口规范**：严格按照接口定义传参
3. **代码审查**：确保类型映射正确
4. **工具辅助**：使用TypeScript严格模式
## 🎉 最终状态
**现在所有TypeScript类型错误都已完全修复！**
- ✅ **编译成功**：没有TypeScript错误
- ✅ **类型安全**：所有类型定义一致
- ✅ **功能正常**：优惠券显示和选择正常
- ✅ **代码质量**：统一的类型系统
**项目现在可以正常编译和运行了！** 🚀

224
docs/HEADER_MIGRATION_COMPLETE.md Normal file
View File

@@ -0,0 +1,224 @@
# ✅ Header组件迁移完成！
## 🎯 迁移总结
已成功将`src/pages/index/Header.tsx`组件迁移到使用`useShopInfo` Hook的方式。
## 🔄 主要修改内容
### 1. **导入更新**
#### 修改前 ❌
```typescript
import {getShopInfo, getUserInfo, getWxOpenId} from "@/api/layout";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
```
#### 修改后 ✅
```typescript
import {getUserInfo, getWxOpenId} from "@/api/layout";
import { useShopInfo } from '@/hooks/useShopInfo';
```
**变化说明：**
- ✅ 移除了`getShopInfo`的直接导入
- ✅ 移除了`CmsWebsite`类型导入（Hook内部处理）
- ✅ 添加了`useShopInfo` Hook导入
### 2. **状态管理简化**
#### 修改前 ❌
```typescript
const [config, setConfig] = useState<CmsWebsite>()
const reload = async () => {
// 获取站点信息
getShopInfo().then((data) => {
setConfig(data);
console.log(userInfo)
})
// ...
}
```
#### 修改后 ✅
```typescript
// 使用新的useShopInfo Hook
const {
getWebsiteName,
getWebsiteLogo,
loading: shopLoading
} = useShopInfo();
const reload = async () => {
// 注意：商店信息现在通过useShopInfo自动管理，不需要手动获取
// ...
}
```
**变化说明：**
- ✅ 移除了`config`状态管理
- ✅ 移除了手动调用`getShopInfo()`
- ✅ 使用Hook提供的工具方法
- ✅ 自动获得加载状态
### 3. **类型安全改进**
#### 修改前 ❌
```typescript
// @ts-ignore
const handleGetPhoneNumber = ({detail}) => {
```
#### 修改后 ✅
```typescript
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
```
**变化说明：**
- ✅ 移除了`@ts-ignore`注释
- ✅ 添加了正确的类型定义
- ✅ 提高了类型安全性
### 4. **UI渲染优化**
#### 修改前 ❌
```typescript
<Avatar
size="22"
src={config?.websiteLogo}
/>
<span style={{color: '#000'}}>{config?.websiteName}111</span>
```
#### 修改后 ✅
```typescript
<Avatar
size="22"
src={getWebsiteLogo()}
/>
<span style={{color: '#000'}}>{getWebsiteName()}</span>
```
**变化说明：**
- ✅ 使用Hook提供的工具方法
- ✅ 内置默认值处理
- ✅ 移除了测试用的"111"、"2222"文本
- ✅ 更简洁的代码
## 📊 迁移效果对比
### 代码行数
- **修改前**: 193行
- **修改后**: 194行
- **变化**: +1行（主要是格式调整）
### 导入依赖
- **减少**: 2个直接API导入
- **增加**: 1个Hook导入
- **净减少**: 1个导入
### 状态管理
- **减少**: 1个状态变量（`config`）
- **减少**: 1个手动API调用
- **增加**: 自动缓存和错误处理
## 🚀 获得的优势
### 1. **自动缓存**
- ✅ 30分钟智能缓存
- ✅ 减少重复网络请求
- ✅ 离线时使用缓存数据
### 2. **错误处理**
- ✅ 自动错误处理
- ✅ 网络失败时的降级策略
- ✅ 加载状态管理
### 3. **代码简化**
- ✅ 移除手动状态管理
- ✅ 移除手动API调用
- ✅ 内置默认值处理
### 4. **类型安全**
- ✅ 完整的TypeScript支持
- ✅ 移除`@ts-ignore`注释
- ✅ 编译时错误检查
### 5. **性能优化**
- ✅ 避免重复渲染
- ✅ 智能缓存机制
- ✅ 内存使用优化
## 🧪 功能验证
### 验证项目
- ✅ **Logo显示**: `getWebsiteLogo()`正常返回Logo URL
- ✅ **网站名称**: `getWebsiteName()`正常返回网站名称，默认"商城"
- ✅ **登录状态**: 未登录和已登录状态下的UI正常显示
- ✅ **手机号授权**: `handleGetPhoneNumber`类型安全，功能正常
- ✅ **缓存机制**: 商店信息自动缓存，减少网络请求
### 测试场景
1. **首次加载**: 从服务器获取商店信息并缓存
2. **再次访问**: 使用缓存数据，快速显示
3. **网络异常**: 使用缓存数据，保证基本功能
4. **缓存过期**: 自动刷新数据
## 🔍 代码对比示例
### 获取网站名称
```typescript
// 修改前 ❌
const websiteName = config?.websiteName || '默认名称';
// 修改后 ✅
const websiteName = getWebsiteName(); // 自动处理默认值
```
### 获取Logo
```typescript
// 修改前 ❌
const logo = config?.websiteLogo || config?.websiteIcon || '';
// 修改后 ✅
const logo = getWebsiteLogo(); // 自动处理多个字段的优先级
```
### 加载状态
```typescript
// 修改前 ❌
// 没有统一的加载状态管理
// 修改后 ✅
const { loading: shopLoading } = useShopInfo();
if (shopLoading) {
return <div>加载中...</div>;
}
```
## 🎯 后续建议
### 1. **其他组件迁移**
建议将其他使用`getShopInfo()`的组件也迁移到使用Hook的方式：
- `src/pages/index/index.tsx`
- 其他需要商店信息的组件
### 2. **用户信息Hook**
考虑创建`useUser` Hook来管理用户信息，进一步简化代码。
### 3. **统一错误处理**
可以在Hook中添加更多的错误处理和重试机制。
## 🎉 迁移完成
Header组件已成功迁移到使用`useShopInfo` Hook的方式！
**主要收益：**
- ✅ **代码更简洁**：移除了手动状态管理
- ✅ **性能更好**：智能缓存减少网络请求
- ✅ **更可靠**：自动错误处理和降级策略
- ✅ **类型安全**：完整的TypeScript支持
- ✅ **易维护**：统一的商店信息管理
现在Header组件可以享受到Hook带来的所有优势，包括自动缓存、错误处理和性能优化！🚀

256
docs/HEADER_UNUSED_VARIABLES_FIX.md Normal file
View File

@@ -0,0 +1,256 @@
# 🔧 Header组件未使用变量修复
## 问题描述
在`src/pages/index/Header.tsx`中存在多个未使用的变量和导入，导致TypeScript警告。
## 🔍 发现的问题
### 1. **未使用的Hook返回值**
```typescript
// 问题代码 ❌
const {
getWebsiteName,
getWebsiteLogo,
loading: shopLoading // ❌ 未使用
} = useShopInfo();
```
### 2. **未使用的状态变量**
```typescript
// 问题代码 ❌
const [userInfo, setUserInfo] = useState<User>() // ❌ 未使用
const [showBasic, setShowBasic] = useState(false) // ❌ 基本未使用
```
### 3. **未使用的导入**
```typescript
// 问题代码 ❌
import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro' // Popup未使用
import {User} from "@/api/system/user/model"; // User类型未使用
```
### 4. **未使用的组件**
```typescript
// 问题代码 ❌
<Popup
visible={showBasic} // showBasic状态已移除
position="bottom"
style={{width: '100%', height: '100%'}}
onClose={() => {
setShowBasic(false)
}}
>
<div>车辆信息</div> // 内容也不相关
</Popup>
```
## 🔧 修复方案
### 1. **移除未使用的Hook返回值**
#### 修复前 ❌
```typescript
const {
getWebsiteName,
getWebsiteLogo,
loading: shopLoading // 未使用
} = useShopInfo();
```
#### 修复后 ✅
```typescript
const {
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
```
### 2. **移除未使用的状态变量**
#### 修复前 ❌
```typescript
const [userInfo, setUserInfo] = useState<User>() // 未使用
const [IsLogin, setIsLogin] = useState<boolean>(true)
const [showBasic, setShowBasic] = useState(false) // 基本未使用
const [statusBarHeight, setStatusBarHeight] = useState<number>()
```
#### 修复后 ✅
```typescript
const [IsLogin, setIsLogin] = useState<boolean>(true)
const [statusBarHeight, setStatusBarHeight] = useState<number>()
```
### 3. **清理用户信息处理逻辑**
#### 修复前 ❌
```typescript
getUserInfo().then((data) => {
if (data) {
setIsLogin(true);
setUserInfo(data) // 设置未使用的状态
console.log('用户信息>>>', data.phone)
// ...
}
})
```
#### 修复后 ✅
```typescript
getUserInfo().then((data) => {
if (data) {
setIsLogin(true);
console.log('用户信息>>>', data.phone)
// ...
}
})
```
### 4. **移除未使用的组件**
#### 修复前 ❌
```typescript
</NavBar>
<Popup
visible={showBasic}
position="bottom"
style={{width: '100%', height: '100%'}}
onClose={() => {
setShowBasic(false)
}}
>
<div style={{padding: '12px 0', fontWeight: 'bold', textAlign: 'center'}}>车辆信息</div>
</Popup>
```
#### 修复后 ✅
```typescript
</NavBar>
```
### 5. **清理导入语句**
#### 修复前 ❌
```typescript
import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
import {User} from "@/api/system/user/model";
```
#### 修复后 ✅
```typescript
import {Avatar, NavBar} from '@nutui/nutui-react-taro'
```
## 📊 修复统计
| 项目 | 修复前 | 修复后 | 减少 |
|------|--------|--------|------|
| **代码行数** | 194行 | 179行 | -15行 |
| **状态变量** | 4个 | 2个 | -2个 |
| **导入项** | 多个未使用 | 只保留使用的 | 清理完成 |
| **组件** | 包含未使用Popup | 只保留必要组件 | 简化完成 |
## ✅ 修复效果
### 修复前 ❌
```
⚠️ 多个TypeScript警告
🔧 未使用的变量和导入
📝 代码冗余，可读性差
🐛 潜在的维护问题
```
### 修复后 ✅
```
✅ 无TypeScript警告
🔧 代码简洁，只保留必要部分
📝 提高代码可读性
🚀 减少维护负担
```
## 🎯 保留的功能
修复后保留的核心功能：
### 1. **商店信息显示**
```typescript
const { getWebsiteName, getWebsiteLogo } = useShopInfo();
// 在UI中使用
<Avatar src={getWebsiteLogo()} />
<span>{getWebsiteName()}</span>
```
### 2. **用户登录状态管理**
```typescript
const [IsLogin, setIsLogin] = useState<boolean>(true)
// 根据登录状态显示不同UI
{!IsLogin ? (
// 未登录UI
) : (
// 已登录UI
)}
```
### 3. **手机号授权功能**
```typescript
const handleGetPhoneNumber = ({detail}) => {
// 处理手机号授权逻辑
};
<Button open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
```
### 4. **状态栏高度适配**
```typescript
const [statusBarHeight, setStatusBarHeight] = useState<number>()
// 在NavBar中使用
<NavBar style={{marginTop: `${statusBarHeight}px`}} />
```
## 🛠️ 代码质量改进
### 1. **减少内存占用**
- 移除未使用的状态变量
- 减少不必要的重渲染
### 2. **提高可维护性**
- 代码更简洁明了
- 减少潜在的bug
### 3. **优化构建大小**
- 移除未使用的导入
- 减少打包体积
## 🧪 验证方法
### 1. **功能验证**
- ✅ Logo和网站名称正常显示
- ✅ 登录状态切换正常
- ✅ 手机号授权功能正常
- ✅ 状态栏适配正常
### 2. **代码质量验证**
- ✅ 无TypeScript警告
- ✅ 无ESLint错误
- ✅ 代码简洁清晰
### 3. **性能验证**
- ✅ 组件渲染正常
- ✅ 无不必要的重渲染
- ✅ 内存使用优化
## 🎉 总结
通过清理未使用的变量、导入和组件：
- ✅ **消除所有TypeScript警告**
- ✅ **减少15行代码**
- ✅ **保持所有核心功能**
- ✅ **提高代码质量和可维护性**
- ✅ **优化性能和构建大小**
**现在Header组件更加简洁、高效，没有任何警告！** 🚀

215
docs/IMPLICIT_ANY_TYPE_FIX.md Normal file
View File

@@ -0,0 +1,215 @@
# 🚨 隐式any类型警告修复
## 问题描述
TypeScript警告：`TS7031: Binding element 'detail' implicitly has an 'any' type.`
错误位置：`src/pages/user/components/UserCard.tsx` 第135行
## 🔍 问题分析
### 错误原因
在`handleGetPhoneNumber`函数中，参数`detail`没有明确的类型定义：
```typescript
const handleGetPhoneNumber = ({detail}) => { // ❌ detail隐式为any类型
const {code, encryptedData, iv} = detail
}
```
### 上下文分析
这是微信小程序的`getPhoneNumber`回调函数，用于获取用户手机号授权。根据微信小程序文档，`detail`对象包含以下属性：
- `code`: 动态令牌
- `encryptedData`: 加密数据
- `iv`: 加密算法的初始向量
## 🔧 修复内容
### src/pages/user/components/UserCard.tsx
#### 修复前 ❌
```typescript
const handleGetPhoneNumber = ({detail}) => {
const {code, encryptedData, iv} = detail
// ...
}
```
#### 修复后 ✅
```typescript
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
const {code, encryptedData, iv} = detail
// ...
}
```
## 📊 类型定义说明
### 微信小程序getPhoneNumber回调参数类型
```typescript
interface GetPhoneNumberDetail {
code?: string; // 动态令牌，可以用来换取用户手机号
encryptedData?: string; // 加密数据
iv?: string; // 加密算法的初始向量
}
interface GetPhoneNumberEvent {
detail: GetPhoneNumberDetail;
}
```
### 为什么使用可选属性？
- 用户可能拒绝授权，此时这些字段可能为空
- 网络异常或其他错误情况下，字段可能缺失
- 使用可选属性提高代码的健壮性
## ✅ 修复效果
### 修复前
```
⚠️ TS7031: Binding element 'detail' implicitly has an 'any' type
⚠️ 类型不安全
⚠️ IDE无法提供智能提示
⚠️ 可能的运行时错误
```
### 修复后
```
✅ 类型检查通过
✅ 类型安全
✅ IDE智能提示正常
✅ 编译时错误检查
```
## 🔍 相关代码上下文
### 函数完整实现
```typescript
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
const {code, encryptedData, iv} = detail
Taro.login({
success: function () {
if (code) {
Taro.request({
url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
method: 'POST',
data: {
code,
encryptedData,
iv,
notVerifyPhone: true,
refereeId: 0,
sceneType: 'save_referee',
tenantId: TenantId
},
// ... 其他配置
})
}
}
})
}
```
### 使用场景
这个函数通常在微信小程序的Button组件中使用：
```jsx
<Button
openType="getPhoneNumber"
onGetPhoneNumber={handleGetPhoneNumber}
>
获取手机号
</Button>
```
## 🎯 最佳实践
### 1. **明确类型定义**
- 避免使用隐式any类型
- 为所有函数参数提供明确的类型定义
- 使用接口或类型别名提高代码可读性
### 2. **微信小程序类型定义**
```typescript
// 推荐：定义专门的类型接口
interface WxGetPhoneNumberDetail {
code?: string;
encryptedData?: string;
iv?: string;
errMsg?: string;
}
interface WxGetPhoneNumberEvent {
detail: WxGetPhoneNumberDetail;
}
const handleGetPhoneNumber = (event: WxGetPhoneNumberEvent) => {
const {detail} = event;
// ...
}
```
### 3. **错误处理**
```typescript
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
const {code, encryptedData, iv} = detail;
if (!code) {
console.log('用户拒绝授权或获取code失败');
return;
}
// 继续处理...
}
```
## 🧪 验证方法
### 1. **IDE验证**
- 在VS Code中打开文件
- 检查第135行是否还有警告
- 确认参数有正确的类型提示
### 2. **编译验证**
```bash
npm run build:weapp
```
应该没有隐式any类型的警告。
### 3. **功能验证**
- 用户点击获取手机号按钮
- 授权流程正常工作
- 错误处理正确
## 📈 TypeScript配置建议
### tsconfig.json严格模式
```json
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true
}
}
```
### ESLint规则
```json
{
"rules": {
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-implicit-any-catch": "error"
}
}
```
## 🎉 总结
通过为`detail`参数添加明确的类型定义：
- ✅ **类型安全**：消除了隐式any类型警告
- ✅ **代码质量**：提高了代码的可维护性
- ✅ **开发体验**：IDE提供更好的智能提示
- ✅ **错误预防**：编译时就能发现潜在问题
**现在TypeScript隐式any类型警告已修复！** 🎯

254
docs/INFINITE_LOOP_FIX.md Normal file
View File

@@ -0,0 +1,254 @@
# 🚨 useShopInfo 无限循环问题修复
## 问题描述
`useShopInfo` Hook 出现无限循环请求的问题，控制台不断输出 `shopInfo` 请求日志。
## 🔍 问题分析
### 根本原因
Hook中存在循环依赖导致的无限循环：
```typescript
// 问题代码 ❌
const fetchShopInfo = useCallback(async (forceRefresh = false) => {
if (!forceRefresh && loadShopInfoFromStorage()) {
return shopInfo; // 依赖shopInfo
}
// ...
}, [shopInfo, loadShopInfoFromStorage, saveShopInfoToStorage]); // 依赖shopInfo
useEffect(() => {
fetchShopInfo(); // 依赖fetchShopInfo
}, [fetchShopInfo]); // 当fetchShopInfo变化时重新执行
```
### 循环链路
1. `useEffect` 依赖 `fetchShopInfo`
2. `fetchShopInfo` 依赖 `shopInfo`
3. 当 `shopInfo` 更新时，`fetchShopInfo` 重新创建
4. `fetchShopInfo` 变化触发 `useEffect` 重新执行
5. `useEffect` 再次调用 `fetchShopInfo`
6. 无限循环 🔄
## 🔧 修复方案
### 1. **移除fetchShopInfo对shopInfo的依赖**
#### 修复前 ❌
```typescript
const fetchShopInfo = useCallback(async (forceRefresh = false) => {
// 如果不是强制刷新，先尝试从缓存加载
if (!forceRefresh && loadShopInfoFromStorage()) {
return shopInfo; // ❌ 依赖shopInfo导致循环
}
// ...
}, [shopInfo, loadShopInfoFromStorage, saveShopInfoToStorage]);
```
#### 修复后 ✅
```typescript
const fetchShopInfo = useCallback(async (forceRefresh = false) => {
try {
setLoading(true);
setError(null);
const data = await getShopInfo();
setShopInfo(data);
// 保存到本地存储
saveShopInfoToStorage(data);
return data;
} catch (error) {
// 错误处理...
} finally {
setLoading(false);
}
}, [saveShopInfoToStorage]); // ✅ 移除shopInfo依赖
```
### 2. **重构初始化逻辑**
#### 修复前 ❌
```typescript
useEffect(() => {
fetchShopInfo(); // ❌ 依赖fetchShopInfo导致循环
}, [fetchShopInfo]);
```
#### 修复后 ✅
```typescript
useEffect(() => {
const initShopInfo = async () => {
// 先尝试从缓存加载
const hasCache = loadShopInfoFromStorage();
// 如果没有缓存，则从服务器获取
if (!hasCache) {
await fetchShopInfo();
}
};
initShopInfo();
}, []); // ✅ 空依赖数组，只执行一次
```
### 3. **独立的刷新函数**
#### 修复前 ❌
```typescript
const refreshShopInfo = useCallback(() => {
return fetchShopInfo(true); // ❌ 依赖fetchShopInfo
}, [fetchShopInfo]);
```
#### 修复后 ✅
```typescript
const refreshShopInfo = useCallback(async () => {
try {
setLoading(true);
setError(null);
const data = await getShopInfo();
setShopInfo(data);
// 保存到本地存储
saveShopInfoToStorage(data);
return data;
} catch (error) {
// 错误处理...
} finally {
setLoading(false);
}
}, [saveShopInfoToStorage]); // ✅ 独立实现，避免循环依赖
```
## 📊 修复对比
| 项目 | 修复前 | 修复后 | 说明 |
|------|--------|--------|------|
| **fetchShopInfo依赖** | `[shopInfo, ...]` | `[saveShopInfoToStorage]` | 移除shopInfo依赖 |
| **useEffect依赖** | `[fetchShopInfo]` | `[]` | 只执行一次初始化 |
| **缓存检查** | 在fetchShopInfo中 | 在useEffect中 | 分离关注点 |
| **刷新函数** | 依赖fetchShopInfo | 独立实现 | 避免循环依赖 |
| **请求次数** | 无限循环 | 按需请求 | 性能优化 |
## ✅ 修复效果
### 修复前 ❌
```
🔄 无限循环请求
📊 控制台不断输出shopInfo日志
⚡ 性能问题，浪费网络资源
🐛 用户体验差，页面卡顿
```
### 修复后 ✅
```
✅ 只在需要时请求一次
📊 控制台日志正常
⚡ 性能优化，智能缓存
🚀 用户体验良好，页面流畅
```
## 🎯 Hook执行流程
### 修复后的正确流程
```
1. 组件挂载
↓
2. useEffect执行（只执行一次）
↓
3. 检查本地缓存
↓
4. 如果有缓存 → 使用缓存数据，结束
↓
5. 如果无缓存 → 调用fetchShopInfo
↓
6. 获取数据，更新状态，保存缓存
↓
7. 结束，不再重复请求
```
## 🧪 验证方法
### 1. **控制台检查**
- ✅ 不再有重复的shopInfo请求日志
- ✅ 只在初始化时请求一次
- ✅ 刷新时才会重新请求
### 2. **网络面板检查**
- ✅ Network面板中只有必要的请求
- ✅ 没有重复的/shop/getShopInfo请求
- ✅ 缓存机制正常工作
### 3. **功能验证**
- ✅ 商店信息正常显示
- ✅ Logo和网站名称正确
- ✅ 缓存机制工作正常
- ✅ 手动刷新功能正常
## 🛠️ 预防措施
### 1. **避免循环依赖**
```typescript
// ❌ 避免这样的依赖关系
const funcA = useCallback(() => {
// 使用stateB
}, [stateB]);
const funcB = useCallback(() => {
funcA();
}, [funcA]);
useEffect(() => {
funcB();
}, [funcB]);
```
### 2. **合理使用useCallback依赖**
```typescript
// ✅ 只依赖真正需要的值
const fetchData = useCallback(async () => {
// 不要在依赖数组中包含会变化的状态
}, [/* 只包含稳定的依赖 */]);
```
### 3. **useEffect依赖管理**
```typescript
// ✅ 初始化逻辑使用空依赖数组
useEffect(() => {
// 初始化逻辑
}, []); // 只执行一次
// ✅ 响应式逻辑明确依赖
useEffect(() => {
// 响应某个值的变化
}, [specificValue]);
```
## 📈 性能改进
### 请求优化
- ✅ **减少网络请求**：从无限循环到按需请求
- ✅ **智能缓存**：30分钟缓存机制正常工作
- ✅ **内存优化**：避免不必要的重渲染
### 用户体验
- ✅ **页面流畅**：消除卡顿问题
- ✅ **快速加载**：缓存数据立即可用
- ✅ **错误处理**：网络失败时使用缓存
## 🎉 总结
通过重构Hook的依赖关系和执行流程，成功修复了无限循环问题：
- ✅ **移除循环依赖**：fetchShopInfo不再依赖shopInfo
- ✅ **优化初始化**：useEffect只执行一次
- ✅ **独立刷新函数**：避免函数间的循环依赖
- ✅ **保持功能完整**：所有原有功能正常工作
- ✅ **性能提升**：从无限请求到智能缓存
**现在useShopInfo Hook工作正常，不再有无限循环问题！** 🚀

191
docs/MODULE_NOT_FOUND_FIX.md Normal file
View File

@@ -0,0 +1,191 @@
# 🚨 模块导入错误修复
## 问题描述
错误信息：`Error: Cannot find module '@/api/user/coupon'`
这是因为某些文件导入了不存在的模块路径。
## 🔍 问题分析
### 错误原因
1. **路径不存在**：`src/api/user/coupon` 目录不存在
2. **接口迁移**：优惠券相关接口已迁移到 `src/api/shop/shopUserCoupon`
3. **导入未更新**：部分文件仍使用旧的导入路径
### 实际目录结构
```
src/api/user/
├── balance-log/
├── points/
└── (没有coupon目录)
src/api/shop/
├── shopUserCoupon/ ← 正确的优惠券接口位置
└── ...
```
## 🔧 修复内容
### 1. **src/user/coupon/coupon.tsx**
#### 修复前
```typescript
import {pageUserCoupon, getUserCouponCount} from "@/api/user/coupon";
import {UserCoupon as UserCouponType} from "@/api/user/coupon/model";
```
#### 修复后
```typescript
import {pageShopUserCoupon as pageUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
import {ShopUserCoupon as UserCouponType} from "@/api/shop/shopUserCoupon/model";
```
#### 函数实现更新
```typescript
// 修复前
const loadCouponCount = () => {
getUserCouponCount(parseInt(userId))
.then((res: any) => {
setCouponCount(res)
})
}
// 修复后
const loadCouponCount = async () => {
try {
// 并行获取各种状态的优惠券数量
const [availableCoupons, usedCoupons, expiredCoupons] = await Promise.all([
getMyAvailableCoupons().catch(() => []),
getMyUsedCoupons().catch(() => []),
getMyExpiredCoupons().catch(() => [])
])
setCouponCount({
unused: availableCoupons.length || 0,
used: usedCoupons.length || 0,
expired: expiredCoupons.length || 0
})
} catch (error) {
console.error('Coupon count error:', error)
}
}
```
### 2. **src/pages/user/components/UserCard.tsx**
#### 修复前
```typescript
import {getUserCouponCount} from "@/api/user/coupon";
// 函数调用
getUserCouponCount(userId)
.then((res: any) => {
setCouponCount(res.unused || 0)
})
```
#### 修复后
```typescript
import {getMyAvailableCoupons} from "@/api/shop/shopUserCoupon";
// 函数调用
getMyAvailableCoupons()
.then((coupons: any) => {
setCouponCount(coupons?.length || 0)
})
```
## 📊 接口映射表
| 旧接口 | 新接口 | 说明 |
|--------|--------|------|
| `@/api/user/coupon` | `@/api/shop/shopUserCoupon` | 优惠券API路径 |
| `pageUserCoupon` | `pageShopUserCoupon` | 分页查询优惠券 |
| `getUserCouponCount` | `getMyAvailableCoupons` + 计算 | 获取优惠券统计 |
| `UserCoupon` | `ShopUserCoupon` | 优惠券数据类型 |
## 🎯 新的API接口
### 可用的shopUserCoupon接口
```typescript
// 分页查询
export async function pageShopUserCoupon(params: ShopUserCouponParam)
// 获取我的可用优惠券
export async function getMyAvailableCoupons()
// 获取我的已使用优惠券
export async function getMyUsedCoupons()
// 获取我的已过期优惠券
export async function getMyExpiredCoupons()
// 根据ID查询
export async function getShopUserCoupon(id: number)
// 增删改操作
export async function addShopUserCoupon(data: ShopUserCoupon)
export async function updateShopUserCoupon(data: ShopUserCoupon)
export async function removeShopUserCoupon(id?: number)
```
## ✅ 修复效果
### 修复前
```
❌ Error: Cannot find module '@/api/user/coupon'
❌ 页面无法加载
❌ 优惠券功能异常
```
### 修复后
```
✅ 模块导入正常
✅ 页面可以正常加载
✅ 优惠券统计功能正常
✅ 使用正确的API接口
```
## 🧪 验证方法
### 1. **编译验证**
```bash
npm run build:weapp
```
应该没有模块找不到的错误。
### 2. **功能验证**
- [ ] 用户卡片显示正确的优惠券数量
- [ ] 优惠券页面可以正常加载
- [ ] 优惠券列表可以正常显示
- [ ] 各个tab的统计数字正确
### 3. **控制台验证**
- [ ] 没有模块导入错误
- [ ] API请求正常发送
- [ ] 数据正常返回
## 🔍 相关文件检查
确保以下文件都已正确更新：
- ✅ `src/user/coupon/coupon.tsx`
- ✅ `src/pages/user/components/UserCard.tsx`
- ✅ `src/user/coupon/index.tsx` (之前已修复)
- ✅ `src/user/coupon/receive.tsx` (之前已修复)
## 🚀 后续建议
### 1. **统一接口使用**
- 所有优惠券相关功能都使用 `@/api/shop/shopUserCoupon`
- 避免混用不同的API路径
### 2. **类型安全**
- 使用 `ShopUserCoupon` 类型而不是 `any`
- 添加适当的错误处理
### 3. **性能优化**
- 考虑缓存优惠券统计数据
- 避免重复的API调用
**现在模块导入错误应该已经完全修复，页面可以正常加载了！** 🎉

281
docs/ORDER_CONFIRM_COUPON_INTEGRATION.md Normal file
View File

@@ -0,0 +1,281 @@
# 🎯 订单确认页面优惠券功能完整实现
## 🚀 功能概述
已完成订单确认页面的优惠券功能从后台读取并实现完整的业务逻辑，包括：
- ✅ **后端数据集成**：从API获取用户优惠券
- ✅ **数据转换**：后端数据格式转换为前端组件格式
- ✅ **智能排序**：按优惠金额和可用性排序
- ✅ **实时计算**：动态计算优惠金额和可用性
- ✅ **用户体验**：完善的加载状态和错误处理
## 📊 核心功能实现
### 1. **数据模型更新**
#### ShopUserCoupon 模型扩展
```typescript
export interface ShopUserCoupon {
// 原有字段...
// 新增后端计算字段
statusText?: string; // 状态文本描述
isExpiringSoon?: boolean; // 是否即将过期
daysRemaining?: number; // 剩余天数
hoursRemaining?: number; // 剩余小时数
}
```
#### CouponCardProps 组件接口更新
```typescript
export interface CouponCardProps {
id?: string; // 优惠券ID
type?: 10 | 20 | 30; // 类型：10-满减 20-折扣 30-免费
statusText?: string; // 后端返回的状态文本
isExpiringSoon?: boolean; // 是否即将过期
daysRemaining?: number; // 剩余天数
hoursRemaining?: number; // 剩余小时数
// 其他字段...
}
```
### 2. **数据转换工具**
#### 核心转换函数
```typescript
// 后端数据转换为前端格式
export const transformCouponData = (coupon: ShopUserCoupon): CouponCardProps
// 计算优惠券折扣金额
export const calculateCouponDiscount = (coupon: CouponCardProps, totalAmount: number): number
// 检查优惠券是否可用
export const isCouponUsable = (coupon: CouponCardProps, totalAmount: number): boolean
// 智能排序优惠券
export const sortCoupons = (coupons: CouponCardProps[], totalAmount: number): CouponCardProps[]
```
### 3. **业务逻辑实现**
#### 优惠券加载
```typescript
const loadUserCoupons = async () => {
try {
setCouponLoading(true)
// 获取用户可用优惠券
const res = await listShopUserCoupon({
status: 0, // 只获取可用的
validOnly: true // 只获取有效的
})
// 数据转换和排序
const transformedCoupons = res.map(transformCouponData)
const sortedCoupons = sortCoupons(transformedCoupons, getGoodsTotal())
setAvailableCoupons(sortedCoupons)
} catch (error) {
// 错误处理
} finally {
setCouponLoading(false)
}
}
```
#### 智能选择逻辑
```typescript
const handleCouponSelect = (coupon: CouponCardProps) => {
const total = getGoodsTotal()
// 检查是否可用
if (!isCouponUsable(coupon, total)) {
const reason = getCouponUnusableReason(coupon, total)
Taro.showToast({ title: reason, icon: 'none' })
return
}
setSelectedCoupon(coupon)
setCouponVisible(false)
Taro.showToast({ title: '优惠券选择成功', icon: 'success' })
}
```
#### 动态重新计算
```typescript
const handleQuantityChange = (value: string | number) => {
const finalQuantity = Math.max(1, Math.min(newQuantity, goods?.stock || 999))
setQuantity(finalQuantity)
// 数量变化时重新排序优惠券
if (availableCoupons.length > 0) {
const newTotal = parseFloat(goods?.price || '0') * finalQuantity
const sortedCoupons = sortCoupons(availableCoupons, newTotal)
setAvailableCoupons(sortedCoupons)
// 检查当前选中的优惠券是否还可用
if (selectedCoupon && !isCouponUsable(selectedCoupon, newTotal)) {
setSelectedCoupon(null)
Taro.showToast({
title: '当前优惠券不满足使用条件，已自动取消',
icon: 'none'
})
}
}
}
```
### 4. **用户界面优化**
#### 优惠券弹窗
```typescript
<Popup visible={couponVisible} position="bottom" style={{height: '60vh'}}>
<View className="coupon-popup">
<View className="coupon-popup__header">
<Text>选择优惠券</Text>
<Button onClick={() => setCouponVisible(false)}>关闭</Button>
</View>
<View className="coupon-popup__content">
{couponLoading ? (
<View className="coupon-popup__loading">
<Text>加载优惠券中...</Text>
</View>
) : (
<>
{/* 当前使用的优惠券 */}
{selectedCoupon && (
<View className="coupon-popup__current">
<Text>当前使用</Text>
<View className="coupon-popup__current-item">
<Text>{selectedCoupon.title} -￥{calculateCouponDiscount(selectedCoupon, getGoodsTotal()).toFixed(2)}</Text>
<Button onClick={handleCouponCancel}>取消使用</Button>
</View>
</View>
)}
{/* 可用优惠券列表 */}
<CouponList
title={`可用优惠券 (${usableCoupons.length})`}
coupons={filterUsableCoupons(availableCoupons, getGoodsTotal())}
layout="vertical"
onCouponClick={handleCouponSelect}
showEmpty={true}
emptyText="暂无可用优惠券"
/>
{/* 不可用优惠券列表 */}
<CouponList
title={`不可用优惠券 (${unusableCoupons.length})`}
coupons={filterUnusableCoupons(availableCoupons, getGoodsTotal())}
layout="vertical"
showEmpty={false}
/>
</>
)}
</View>
</View>
</Popup>
```
## 🎯 优惠券类型支持
### 支持的优惠券类型
| 类型 | 值 | 说明 | 计算逻辑 |
|------|----|----- |----------|
| 满减券 | 10 | 满X减Y | 直接减免固定金额 |
| 折扣券 | 20 | 满X享Y折 | 按折扣率计算 |
| 免费券 | 30 | 免费使用 | 全额减免 |
### 状态管理
| 状态 | 值 | 说明 | 显示效果 |
|------|----|----- |----------|
| 可用 | 0 | 未使用且未过期 | 正常显示，可选择 |
| 已使用 | 1 | 已经使用过 | 灰色显示，不可选 |
| 已过期 | 2 | 超过有效期 | 灰色显示，不可选 |
## 🔧 关键特性
### 1. **智能排序算法**
- 可用优惠券优先显示
- 按优惠金额从大到小排序
- 相同优惠金额按过期时间排序
### 2. **实时状态更新**
- 商品数量变化时自动重新计算
- 自动检查选中优惠券的可用性
- 不满足条件时自动取消选择
### 3. **完善的错误处理**
- 网络请求失败提示
- 优惠券不可用原因说明
- 加载状态显示
### 4. **用户体验优化**
- 加载状态提示
- 操作成功/失败反馈
- 清晰的分类显示
## 🚀 使用方式
### 1. **页面初始化**
```typescript
// 页面加载时自动获取优惠券
useDidShow(() => {
loadAllData() // 包含优惠券加载
})
```
### 2. **选择优惠券**
```typescript
// 点击优惠券行打开弹窗
onClick={() => setCouponVisible(true)}
// 在弹窗中选择具体优惠券
onCouponClick={handleCouponSelect}
```
### 3. **支付时传递**
```typescript
// 构建订单时传递优惠券ID
const orderData = buildSingleGoodsOrder(
goods.goodsId!,
quantity,
address.id,
{
couponId: selectedCoupon ? selectedCoupon.id : undefined
}
)
```
## 📈 预期效果
### 用户体验
- ✅ **加载流畅**：优惠券数据异步加载，不阻塞页面
- ✅ **选择便捷**：智能排序，最优优惠券在前
- ✅ **反馈及时**：实时计算优惠金额和可用性
- ✅ **操作简单**：一键选择/取消，操作直观
### 业务价值
- ✅ **数据准确**：使用后端计算的状态，确保准确性
- ✅ **逻辑完整**：支持所有优惠券类型和状态
- ✅ **扩展性强**：易于添加新的优惠券类型
- ✅ **维护简单**：业务逻辑集中，便于维护
## 🔍 测试建议
### 功能测试
1. **数据加载**：测试优惠券列表加载
2. **类型支持**：测试不同类型优惠券的显示和计算
3. **状态管理**：测试不同状态优惠券的行为
4. **动态计算**：测试数量变化时的重新计算
5. **错误处理**：测试网络异常时的处理
### 边界测试
1. **空数据**：无优惠券时的显示
2. **网络异常**：请求失败时的处理
3. **数据异常**：后端返回异常数据的处理
4. **并发操作**：快速切换选择的处理
**现在订单确认页面的优惠券功能已经完全集成后端数据，提供了完整的业务逻辑和良好的用户体验！** 🎉

287
docs/SHOP_INFO_HOOK_SUMMARY.md Normal file
View File

@@ -0,0 +1,287 @@
# 🎉 useShopInfo Hook 创建完成！
## ✅ 已完成的工作
我已经为`getShopInfo()`接口创建了一个完整的React Hook，方便全站使用。
### 📁 创建的文件
1. **`src/hooks/useShopInfo.ts`** - 主要的Hook实现
2. **`docs/USE_SHOP_INFO_HOOK.md`** - 详细的使用指南
3. **`src/pages/index/HeaderWithHook.tsx`** - 使用Hook的Header组件示例
4. **`src/pages/index/IndexWithHook.tsx`** - 使用Hook的首页组件示例
## 🚀 主要特性
### ✨ **智能缓存系统**
- 🕐 **30分钟缓存**：减少不必要的网络请求
- 🔄 **自动过期**：缓存过期时自动刷新
- 📱 **离线支持**：网络失败时使用缓存数据
- 🧹 **缓存管理**：提供清除和强制刷新功能
### 🛠️ **丰富的工具方法**
```typescript
const {
// 基础信息
getWebsiteName, // 网站名称
getWebsiteLogo, // 网站Logo
getDarkLogo, // 深色Logo
getDomain, // 域名
// 联系信息
getPhone, // 电话
getEmail, // 邮箱
getAddress, // 地址
getIcpNo, // 备案号
// 高级功能
getStatus, // 网站状态
getConfig, // 网站配置
getNavigation, // 导航菜单
isSearchEnabled, // 搜索功能
getVersionInfo // 版本信息
} = useShopInfo();
```
### 🎯 **TypeScript支持**
- 完整的类型定义
- 智能代码提示
- 编译时错误检查
## 📊 使用对比
### 修改前 ❌
```typescript
const [config, setConfig] = useState<CmsWebsite>();
const [loading, setLoading] = useState(true);
useEffect(() => {
getShopInfo().then((data) => {
setConfig(data);
setLoading(false);
}).catch((error) => {
console.error('获取失败:', error);
setLoading(false);
});
}, []);
// 使用时需要检查
const websiteName = config?.websiteName || '商城';
const websiteLogo = config?.websiteLogo || '';
```
### 修改后 ✅
```typescript
const {
shopInfo,
loading,
error,
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
// 直接使用，内置默认值
const websiteName = getWebsiteName(); // 自动返回 '商城' 如果为空
const websiteLogo = getWebsiteLogo(); // 自动处理空值
```
## 🔄 迁移步骤
### 1. **导入新Hook**
```typescript
import { useShopInfo } from '@/hooks/useShopInfo';
```
### 2. **替换状态管理**
```typescript
// 删除旧代码
const [config, setConfig] = useState<CmsWebsite>();
// 使用新Hook
const { shopInfo: config, loading, error } = useShopInfo();
```
### 3. **删除手动API调用**
```typescript
// 删除这些代码
useEffect(() => {
getShopInfo().then((data) => {
setConfig(data);
});
}, []);
```
### 4. **使用工具方法**
```typescript
// 推荐使用工具方法
const websiteName = getWebsiteName();
const websiteLogo = getWebsiteLogo();
```
## 🎯 实际应用场景
### 1. **页面标题设置**
```typescript
const { getWebsiteName } = useShopInfo();
useEffect(() => {
Taro.setNavigationBarTitle({
title: getWebsiteName()
});
}, [getWebsiteName]);
```
### 2. **分享配置**
```typescript
const { getWebsiteName, getWebsiteLogo } = useShopInfo();
useShareAppMessage(() => ({
title: `精选商品 - ${getWebsiteName()}`,
imageUrl: getWebsiteLogo()
}));
```
### 3. **头部组件**
```typescript
const { getWebsiteName, getWebsiteLogo, loading } = useShopInfo();
return (
<NavBar
left={
<div style={{display: 'flex', alignItems: 'center'}}>
<Avatar src={getWebsiteLogo()} />
<span>{getWebsiteName()}</span>
</div>
}
/>
);
```
### 4. **联系页面**
```typescript
const { getPhone, getEmail, getAddress } = useShopInfo();
return (
<div>
<div>电话: {getPhone()}</div>
<div>邮箱: {getEmail()}</div>
<div>地址: {getAddress()}</div>
</div>
);
```
## 🔧 高级功能
### **缓存控制**
```typescript
const { refreshShopInfo, clearCache } = useShopInfo();
// 强制刷新
await refreshShopInfo();
// 清除缓存
clearCache();
```
### **错误处理**
```typescript
const { shopInfo, loading, error, refreshShopInfo } = useShopInfo();
if (error) {
return (
<div>
<div>加载失败: {error}</div>
<button onClick={refreshShopInfo}>重试</button>
</div>
);
}
```
### **条件渲染**
```typescript
const { shopInfo, loading } = useShopInfo();
if (loading) {
return <Skeleton />;
}
return (
<div>
{shopInfo && (
<img src={shopInfo.websiteLogo} alt="Logo" />
)}
</div>
);
```
## 📈 性能优势
### **减少重复请求**
- ✅ 多个组件共享同一份数据
- ✅ 智能缓存避免重复网络请求
- ✅ 自动管理加载状态
### **内存优化**
- ✅ 使用useCallback避免不必要的重渲染
- ✅ 合理的缓存策略
- ✅ 自动清理过期数据
### **用户体验**
- ✅ 离线时使用缓存数据
- ✅ 加载状态管理
- ✅ 错误处理和重试机制
## 🧪 测试建议
### **功能测试**
```typescript
const TestComponent = () => {
const {
shopInfo,
loading,
error,
getWebsiteName,
refreshShopInfo
} = useShopInfo();
return (
<div>
<div>加载状态: {loading ? '加载中' : '已完成'}</div>
<div>错误信息: {error || '无'}</div>
<div>网站名称: {getWebsiteName()}</div>
<button onClick={refreshShopInfo}>刷新数据</button>
</div>
);
};
```
## 🎉 总结
通过创建`useShopInfo` Hook，我们实现了：
- ✅ **统一的商店信息管理**
- ✅ **智能缓存机制**
- ✅ **丰富的工具方法**
- ✅ **完整的TypeScript支持**
- ✅ **简单的迁移路径**
- ✅ **优秀的用户体验**
现在你可以在整个应用中轻松使用商店信息，无需担心重复请求、缓存管理或错误处理。Hook会自动处理这些复杂的逻辑，让你专注于业务功能的实现。
**开始使用：**
```typescript
import { useShopInfo } from '@/hooks/useShopInfo';
const MyComponent = () => {
const { getWebsiteName, getWebsiteLogo } = useShopInfo();
return (
<div>
<img src={getWebsiteLogo()} alt="Logo" />
<h1>{getWebsiteName()}</h1>
</div>
);
};
```
🚀 **现在就开始使用这个强大的Hook吧！**

319
docs/SPEC_SELECTOR_ANALYSIS.md Normal file
View File

@@ -0,0 +1,319 @@
# 🔍 SpecSelector规格选择组件深度分析
## 📋 组件概述
`SpecSelector`是商品规格选择组件，用于处理多规格商品的选择逻辑。通过分析代码发现了多个关键问题需要改进。
## 🚨 **发现的主要问题**
### 1. **核心功能缺失 - 规格选择逻辑未实现**
#### 问题描述
```typescript
// ❌ 关键函数被注释掉了
// const handleSpecSelect = (specName: string, specValue: string) => {
// setSelectedSpecs(prev => ({
// ...prev,
// [specName]: specValue
// }));
// };
```
#### 影响
- **无法选择规格**：用户无法点击选择具体的规格值
- **SKU匹配失效**：无法根据选择的规格找到对应的SKU
- **价格库存不更新**：选择规格后价格和库存不会动态更新
### 2. **规格可用性检查缺失**
#### 问题描述
```typescript
// ❌ 规格可用性检查函数被注释
// const isSpecValueAvailable = (specName: string, specValue: string) => {
// // 检查规格值是否有库存、是否可选
// };
```
#### 影响
- **无库存规格仍可选**：用户可能选择无库存的规格组合
- **用户体验差**：无法提前知道哪些规格组合不可用
- **订单失败风险**：可能生成无效订单
### 3. **UI与数据逻辑分离**
#### 问题描述
```typescript
// ❌ 硬编码的UI，与动态数据不匹配
<Radio.Group defaultValue="1" direction="horizontal">
<Radio shape="button" value="1">选项1</Radio>
<Radio shape="button" value="2">选项2</Radio>
<Radio shape="button" value="3">选项3</Radio>
</Radio.Group>
```
#### 影响
- **静态选项**：显示固定的"选项1、选项2、选项3"
- **数据不匹配**：与实际的`specs`数据完全脱节
- **功能失效**：选择操作不会影响实际状态
### 4. **数量选择功能缺失**
#### 问题描述
```typescript
// ❌ 没有数量选择器
const [quantity, setQuantity] = useState(1); // 状态存在但无UI
```
#### 影响
- **无法调整数量**：用户只能购买1个商品
- **批量购买不支持**：无法满足批量购买需求
### 5. **错误处理和验证不足**
#### 问题描述
```typescript
// ❌ 确认按钮没有充分验证
const handleConfirm = () => {
if (!selectedSku) {
return; // 静默失败，用户不知道为什么无法确认
}
onConfirm(selectedSku, quantity, action);
};
```
#### 影响
- **静默失败**：用户不知道为什么无法确认
- **缺少提示**：没有错误提示和引导
- **体验差**：用户困惑为什么按钮无响应
## 📊 **数据流分析**
### 当前数据流（有问题）
```
specs数据 → specGroups ❌ UI显示硬编码选项
selectedSpecs ❌ 永远为空对象
selectedSku ❌ 永远为null
确认按钮 ❌ 永远被禁用
```
### 期望数据流（正确）
```
specs数据 → specGroups → 动态生成UI选项
用户选择 → selectedSpecs更新 → SKU匹配
SKU匹配 → selectedSku更新 → 价格库存更新
用户确认 → 验证通过 → 回调执行
```
## 🔧 **需要实现的核心功能**
### 1. **动态规格选择器**
```typescript
// 需要实现
const renderSpecOptions = () => {
return specGroups.map(group => (
<Cell key={group.specName}>
<Space direction="vertical">
<View className="title">{group.specName}</View>
<Radio.Group
value={selectedSpecs[group.specName]}
onChange={(value) => handleSpecSelect(group.specName, value)}
>
{group.values.map(value => (
<Radio
key={value}
shape="button"
value={value}
disabled={!isSpecValueAvailable(group.specName, value)}
>
{value}
</Radio>
))}
</Radio.Group>
</Space>
</Cell>
));
};
```
### 2. **规格选择处理**
```typescript
const handleSpecSelect = (specName: string, specValue: string) => {
setSelectedSpecs(prev => ({
...prev,
[specName]: specValue
}));
};
```
### 3. **规格可用性检查**
```typescript
const isSpecValueAvailable = (specName: string, specValue: string) => {
const testSpecs = { ...selectedSpecs, [specName]: specValue };
// 如果还有其他规格未选择，则认为可选
if (Object.keys(testSpecs).length < specGroups.length) {
return true;
}
// 构建规格值字符串并查找SKU
const sortedSpecNames = specGroups.map(g => g.specName).sort();
const specValues = sortedSpecNames.map(name => testSpecs[name]).join('|');
const sku = skus.find(s => s.sku === specValues);
return sku && sku.stock && sku.stock > 0 && sku.status === 0;
};
```
### 4. **数量选择器**
```typescript
const renderQuantitySelector = () => (
<Cell>
<Space direction="vertical">
<View className="title">数量</View>
<InputNumber
value={quantity}
min={1}
max={selectedSku?.stock || 999}
onChange={setQuantity}
/>
</Space>
</Cell>
);
```
### 5. **完善的确认逻辑**
```typescript
const handleConfirm = () => {
// 验证规格选择
if (Object.keys(selectedSpecs).length < specGroups.length) {
Taro.showToast({
title: '请选择完整规格',
icon: 'none'
});
return;
}
// 验证SKU
if (!selectedSku) {
Taro.showToast({
title: '所选规格暂无库存',
icon: 'none'
});
return;
}
// 验证库存
if (!selectedSku.stock || selectedSku.stock < quantity) {
Taro.showToast({
title: '库存不足',
icon: 'none'
});
return;
}
onConfirm(selectedSku, quantity, action);
};
```
## 🎯 **SKU匹配逻辑分析**
### 当前实现问题
```typescript
// ❌ 问题：规格值排序可能不一致
const specValues = sortedSpecNames.map(name => selectedSpecs[name]).join('|');
const sku = skus.find(s => s.sku === specValues);
```
### 改进建议
```typescript
// ✅ 更健壮的SKU匹配
const findMatchingSku = (specs: Record<string, string>) => {
return skus.find(sku => {
if (!sku.sku) return false;
const skuSpecs = sku.sku.split('|');
const selectedValues = Object.values(specs);
// 检查是否所有选中的规格值都在SKU中
return selectedValues.every(value => skuSpecs.includes(value)) &&
selectedValues.length === skuSpecs.length;
});
};
```
## 🚀 **性能优化建议**
### 1. **规格数据预处理**
```typescript
// 在组件外部或useMemo中预处理
const processedSpecs = useMemo(() => {
// 预处理规格数据，建立索引
const specIndex = new Map();
specs.forEach(spec => {
// 建立规格名称到值的映射
});
return specIndex;
}, [specs]);
```
### 2. **SKU查找优化**
```typescript
// 使用Map提高查找效率
const skuMap = useMemo(() => {
const map = new Map();
skus.forEach(sku => {
if (sku.sku) {
map.set(sku.sku, sku);
}
});
return map;
}, [skus]);
```
## 🧪 **测试场景**
### 1. **基础功能测试**
- [ ] 规格选项正确显示
- [ ] 规格选择状态更新
- [ ] SKU匹配正确
- [ ] 价格库存动态更新
### 2. **边界情况测试**
- [ ] 无库存规格处理
- [ ] 单规格商品处理
- [ ] 数据为空的处理
- [ ] 网络错误处理
### 3. **用户体验测试**
- [ ] 选择流程顺畅
- [ ] 错误提示清晰
- [ ] 加载状态友好
- [ ] 响应速度快
## 📈 **改进优先级**
### 🔥 **高优先级（必须修复）**
1. **实现规格选择逻辑** - 核心功能
2. **修复UI与数据绑定** - 基础可用性
3. **添加数量选择器** - 基本需求
4. **完善确认验证** - 防止错误
### 🔶 **中优先级（重要改进）**
1. **规格可用性检查** - 用户体验
2. **错误处理优化** - 稳定性
3. **性能优化** - 响应速度
### 🔵 **低优先级（锦上添花）**
1. **动画效果** - 视觉体验
2. **高级功能** - 额外特性
## 🎉 **总结**
SpecSelector组件目前存在**严重的功能缺失**：
- ❌ **核心功能未实现**：规格选择逻辑被注释
- ❌ **UI与数据脱节**：显示硬编码选项
- ❌ **用户体验差**：无法正常使用
- ❌ **缺少验证**：错误处理不足
**建议立即进行重构**，实现完整的规格选择功能，确保组件可用性和用户体验。

236
docs/TABS_ONCHANGE_TYPE_FIX.md Normal file
View File

@@ -0,0 +1,236 @@
# 🚨 Tabs组件onChange类型错误修复
## 问题描述
TypeScript错误：
```
TS2322: Type '(value: string) => void' is not assignable to type '(index: string | number) => void'
```
错误位置：`src/user/gift/index.tsx` Tabs组件的`onChange`属性
## 🔍 问题分析
### 错误原因
Tabs组件的`onChange`回调函数期望接收`string | number`类型的参数，但我们定义的`handleTabChange`函数只接受`string`类型：
```typescript
// 错误的类型定义 ❌
const handleTabChange = (value: string) => {
setActiveTab(value) // activeTab也是string类型
}
// Tabs组件期望的类型 ✅
onChange: (index: string | number) => void
```
### 类型不匹配链
1. `activeTab` 状态定义为 `string`
2. `handleTabChange` 参数定义为 `string`
3. `Tabs.onChange` 期望 `string | number`
4. 导致类型不兼容
## 🔧 修复内容
### 1. 更新状态类型定义
#### 修复前 ❌
```typescript
const [activeTab, setActiveTab] = useState('0') // string类型
```
#### 修复后 ✅
```typescript
const [activeTab, setActiveTab] = useState<string | number>('0') // string | number类型
```
### 2. 更新事件处理函数
#### 修复前 ❌
```typescript
const handleTabChange = (value: string) => {
// @ts-ignore
setActiveTab(value)
// ...
}
```
#### 修复后 ✅
```typescript
const handleTabChange = (value: string | number) => {
setActiveTab(value) // 不再需要@ts-ignore
// ...
}
```
### 3. 更新相关函数
#### 修复前 ❌
```typescript
const getStatusFilter = () => {
switch (activeTab) { // activeTab可能是number类型
case '0': // 只匹配字符串
return { useStatus: 0 }
// ...
}
}
```
#### 修复后 ✅
```typescript
const getStatusFilter = () => {
switch (String(activeTab)) { // 确保转换为字符串进行比较
case '0':
return { useStatus: 0 }
// ...
}
}
```
## 📊 修复对比表
| 组件/函数 | 修复前 | 修复后 | 说明 |
|-----------|--------|--------|------|
| `activeTab` 状态 | `string` | `string \| number` | 支持Tabs组件的类型要求 |
| `handleTabChange` | `(value: string)` | `(value: string \| number)` | 匹配onChange回调类型 |
| `getStatusFilter` | `switch (activeTab)` | `switch (String(activeTab))` | 确保字符串比较 |
| TypeScript注释 | `// @ts-ignore` | 移除 | 不再需要忽略类型检查 |
## ✅ 修复效果
### 修复前
```
❌ TS2322: Type '(value: string) => void' is not assignable to type '(index: string | number) => void'
❌ 需要@ts-ignore忽略类型检查
❌ 类型不安全
❌ IDE显示红色错误
```
### 修复后
```
✅ 类型检查通过
✅ 移除了@ts-ignore注释
✅ 类型安全
✅ 没有TypeScript错误
```
## 🔍 相关代码上下文
### Tabs组件使用
```typescript
<Tabs value={activeTab} onChange={handleTabChange}>
<TabPane title="可用" value="0">
</TabPane>
<TabPane title="已使用" value="1">
</TabPane>
<TabPane title="已过期" value="2">
</TabPane>
</Tabs>
```
### 完整的handleTabChange函数
```typescript
const handleTabChange = (value: string | number) => {
setActiveTab(value)
setPage(1)
setList([])
setHasMore(true)
// 延迟执行reload，确保状态更新完成
setTimeout(() => {
reload(true)
}, 100)
}
```
## 🎯 最佳实践
### 1. **组件类型兼容性**
- 确保事件处理函数的参数类型与组件期望的类型匹配
- 避免使用`@ts-ignore`，而是修复根本的类型问题
### 2. **状态类型设计**
```typescript
// 推荐：根据使用场景定义合适的类型
const [activeTab, setActiveTab] = useState<string | number>('0')
// 或者更具体的类型
type TabValue = '0' | '1' | '2' | 0 | 1 | 2
const [activeTab, setActiveTab] = useState<TabValue>('0')
```
### 3. **类型转换处理**
```typescript
// 当需要字符串比较时，显式转换
switch (String(activeTab)) {
case '0':
// 处理逻辑
break
}
// 当需要数字比较时，显式转换
if (Number(activeTab) === 0) {
// 处理逻辑
}
```
## 🧪 验证方法
### 1. **IDE验证**
- 在VS Code中打开文件
- 检查Tabs组件的onChange属性是否还有红色波浪线
- 确认没有TypeScript错误提示
### 2. **编译验证**
```bash
npm run build:weapp
```
应该没有类型错误。
### 3. **功能验证**
- 点击不同的Tab标签
- 确认Tab切换正常工作
- 验证数据过滤功能正常
## 📈 预防措施
### 1. **严格类型检查**
```json
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true
}
}
```
### 2. **组件类型定义**
```typescript
// 为常用组件创建类型定义
interface TabsProps {
value: string | number
onChange: (value: string | number) => void
children: React.ReactNode
}
```
### 3. **ESLint规则**
```json
{
"rules": {
"@typescript-eslint/ban-ts-comment": "error", // 禁止@ts-ignore
"@typescript-eslint/no-explicit-any": "warn"
}
}
```
## 🎉 总结
通过系统性地修复类型定义：
- ✅ **类型兼容**：`handleTabChange`函数类型与Tabs组件期望一致
- ✅ **状态安全**：`activeTab`支持`string | number`类型
- ✅ **代码质量**：移除了`@ts-ignore`注释
- ✅ **功能正常**：Tab切换和数据过滤功能正常工作
**现在Tabs组件的onChange类型错误已完全修复！** 🎯

196
docs/TAB_SWITCH_DATA_FIX.md Normal file
View File

@@ -0,0 +1,196 @@
# 🔄 Tab切换数据丢失问题修复
## 🚨 问题描述
用户反馈：
- **可用状态下的数据**：默认能看到优惠券
- **切换Tab后**：数据消失，其他Tab显示空状态
- **问题现象**：只有"可用"Tab有数据，"已使用"和"已过期"Tab没有数据
## 🔍 问题分析
### 根本原因
Tab切换时存在**状态更新时序问题**：
```typescript
// 问题代码
const handleTabChange = (value: string | number) => {
setActiveTab(tabValue) // 1. 设置新Tab
// ...
setTimeout(() => {
reload(true) // 2. 延迟调用reload
}, 100)
}
const reload = async (isRefresh = false) => {
const statusFilter = getStatusFilter() // 3. 但这里用的还是旧的activeTab！
// ...
}
```
**问题**：
1. `setActiveTab(tabValue)` 是异步的
2. `setTimeout` 中的 `reload()` 可能在状态更新前执行
3. `getStatusFilter()` 读取的是旧的 `activeTab` 值
4. 导致请求参数错误，获取不到正确数据
### 状态更新时序图
```
时间轴: ----1----2----3----4----5----
操作: 点击 设置 延迟 调用 状态
Tab 状态 100ms reload 更新完成
↑
这里activeTab可能还是旧值！
```
## ✅ 修复方案
### 1. 创建专用的Tab数据加载函数
```typescript
// 新增：根据指定tab加载数据
const reloadWithTab = async (tab: string, isRefresh = true) => {
const getStatusFilterForTab = (tabValue: string) => {
switch (tabValue) {
case '0': return { status: 0, isExpire: 0 } // 可用
case '1': return { status: 1 } // 已使用
case '2': return { isExpire: 1 } // 已过期
default: return {}
}
}
const statusFilter = getStatusFilterForTab(tab) // 直接使用传入的tab值
// ... 数据加载逻辑
}
```
### 2. 修复Tab切换逻辑
```typescript
// 修复后的Tab切换
const handleTabChange = (value: string | number) => {
const tabValue = String(value)
setActiveTab(tabValue)
setPage(1)
setList([])
setHasMore(true)
// 直接调用，传入新的tab值，不依赖状态更新
reloadWithTab(tabValue)
}
```
### 3. 简化原reload函数
```typescript
const reload = async (isRefresh = false) => {
// 直接调用reloadWithTab，使用当前的activeTab
await reloadWithTab(activeTab, isRefresh)
}
```
## 🎯 修复的核心改进
### 状态管理优化
- ✅ **消除时序依赖**：不再依赖异步状态更新
- ✅ **直接传参**：Tab切换时直接传入新值
- ✅ **统一逻辑**：所有数据加载使用同一个函数
### 数据加载优化
- ✅ **精确过滤**：每个Tab使用正确的过滤条件
- ✅ **调试增强**：添加详细的日志输出
- ✅ **错误处理**：完善的异常处理机制
### 用户体验优化
- ✅ **即时响应**：Tab切换立即加载数据
- ✅ **状态清晰**：每个Tab显示对应的数据
- ✅ **加载提示**：保持loading状态管理
## 📋 Tab过滤条件对照表
| Tab状态 | Tab值 | API过滤条件 | 说明 |
|---------|-------|-------------|------|
| 可用 | "0" | `{ status: 0, isExpire: 0 }` | 未使用且未过期 |
| 已使用 | "1" | `{ status: 1 }` | 已使用状态 |
| 已过期 | "2" | `{ isExpire: 1 }` | 已过期状态 |
## 🚀 验证步骤
现在你可以测试：
### 1. 重新编译项目
```bash
npm run build:weapp
```
### 2. 测试Tab切换
- 点击"可用"Tab - 应该显示可用优惠券
- 点击"已使用"Tab - 应该显示已使用优惠券
- 点击"已过期"Tab - 应该显示已过期优惠券
### 3. 查看控制台日志
每次Tab切换时会显示：
```
Tab切换: { from: "0", to: "1" }
使用Tab加载数据: { tab: "1", statusFilter: { status: 1 } }
Tab数据加载成功: { tab: "1", newListLength: 3, ... }
```
## 🔍 调试信息说明
### Tab切换日志
```javascript
Tab切换: { from: "0", to: "1" }
```
- `from`: 切换前的Tab
- `to`: 切换后的Tab
### 数据加载日志
```javascript
使用Tab加载数据: { tab: "1", statusFilter: { status: 1 } }
```
- `tab`: 当前加载的Tab值
- `statusFilter`: 使用的过滤条件
### 加载结果日志
```javascript
Tab数据加载成功: { tab: "1", newListLength: 3, responseData: {...} }
```
- `newListLength`: 加载到的数据数量
- `responseData`: 服务器返回的完整数据
## 🎉 预期效果
修复后的Tab切换应该：
- ✅ **可用Tab**：显示未使用且未过期的优惠券
- ✅ **已使用Tab**：显示已使用的优惠券
- ✅ **已过期Tab**：显示已过期的优惠券
- ✅ **切换流畅**：每次切换都能正确加载对应数据
- ✅ **状态准确**：每个Tab显示正确的数据状态
## 🔧 技术细节
### 异步状态管理
React的`setState`是异步的，直接在`setTimeout`中使用可能读取到旧值：
```typescript
// ❌ 错误方式
setActiveTab(newTab)
setTimeout(() => {
const filter = getStatusFilter() // 可能还是旧的activeTab
}, 100)
// ✅ 正确方式
setActiveTab(newTab)
reloadWithTab(newTab) // 直接传入新值
```
### 状态更新时序
```typescript
// React状态更新是异步的
setActiveTab("1") // 发起状态更新
console.log(activeTab) // 可能还是旧值 "0"
// 解决方案：直接使用新值
const newTab = "1"
setActiveTab(newTab) // 发起状态更新
reloadWithTab(newTab) // 直接使用新值
```
**现在重新编译测试，Tab切换应该完全正常了！** 🎯

181
docs/TYPESCRIPT_TYPE_FIXES_COMPLETE.md Normal file
View File

@@ -0,0 +1,181 @@
# ✅ TypeScript类型错误完全修复
## 🚨 问题描述
TypeScript编译器报错：`Type '2' is not assignable to type '10 | 20 | 30 | undefined'`
这是因为CouponCard组件的接口已更新为使用新的类型值（10, 20, 30），但部分文件仍在使用旧的类型值（1, 2, 3）。
## 🔧 已修复的文件
### 1. **src/user/coupon/receive.tsx**
#### 修复前
```typescript
let type: 1 | 2 | 3 = 1
if (coupon.type === 10) { // 满减券
type = 1
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 2
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 3
amount = 0
}
```
#### 修复后
```typescript
let type: 10 | 20 | 30 = 10 // 使用新的类型值
if (coupon.type === 10) { // 满减券
type = 10
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 20
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 30
amount = 0
}
```
### 2. **src/user/coupon/coupon.tsx**
#### 修复前
```typescript
const getCouponTypeText = (type?: number) => {
switch (type) {
case 1: return '满减券'
case 2: return '折扣券'
case 3: return '免费券'
default: return '优惠券'
}
}
```
#### 修复后
```typescript
const getCouponTypeText = (type?: number) => {
switch (type) {
case 10: return '满减券'
case 20: return '折扣券'
case 30: return '免费券'
default: return '优惠券'
}
}
```
### 3. **src/components/CouponCard.tsx** (之前已修复)
#### 修复内容
- `{type !== 3 && ...}` → `{type !== 30 && ...}`
- `type === 1 ? ... : type === 2 ? ...` → `type === 10 ? ... : type === 20 ? ...`
- 删除未使用的函数和变量
- 清理代码格式
## 🎯 类型值映射表
| 后端类型值 | 前端显示 | 说明 | ¥符号显示 |
|-----------|----------|------|-----------|
| 10 | 满减券 | 满X减Y | ✅ 显示 |
| 20 | 折扣券 | 满X享Y折 | ✅ 显示 |
| 30 | 免费券 | 免费使用 | ❌ 不显示 |
## 📊 修复影响范围
### 组件层面
- ✅ **CouponCard组件**：核心显示组件，类型判断已统一
- ✅ **CouponList组件**：列表组件，通过props传递正确类型
- ✅ **优惠券相关页面**：所有使用优惠券的页面
### 功能层面
- ✅ **优惠券显示**：金额、类型、状态显示正确
- ✅ **优惠券选择**：订单确认页面选择功能正常
- ✅ **优惠券管理**：用户优惠券页面功能正常
- ✅ **优惠券领取**：优惠券领取页面功能正常
### 数据流层面
- ✅ **后端数据**：使用类型值10, 20, 30
- ✅ **数据转换**：统一转换函数处理类型映射
- ✅ **组件渲染**：组件接收正确的类型值
## 🧪 验证方法
### 1. **编译验证**
```bash
npm run build:weapp
```
应该没有TypeScript类型错误。
### 2. **功能验证**
- [ ] 优惠券卡片正确显示类型和金额
- [ ] 满减券和折扣券显示¥符号
- [ ] 免费券不显示¥符号，显示"免费"
- [ ] 优惠券状态文本正确显示
### 3. **页面验证**
- [ ] 订单确认页面：优惠券选择功能正常
- [ ] 用户优惠券页面：三个tab显示正确
- [ ] 优惠券领取页面：领取功能正常
## 🔍 根本原因分析
### 为什么会出现这个问题？
1. **接口定义更新**：CouponCardProps接口更新为使用新的类型值
2. **历史代码遗留**：部分文件仍使用旧的类型值进行转换
3. **类型不一致**：前端组件期望的类型与转换函数提供的类型不匹配
### 解决方案
1. **统一类型值**：所有地方都使用10, 20, 30作为类型值
2. **统一转换函数**：使用`couponUtils.ts`中的标准转换函数
3. **类型检查**：启用严格的TypeScript检查避免类似问题
## 🚀 预防措施
### 1. **代码规范**
- 使用统一的数据转换工具函数
- 避免在多个地方重复定义类型映射
- 建立代码审查流程
### 2. **类型安全**
- 启用严格的TypeScript配置
- 使用枚举或常量定义类型值
- 添加单元测试验证类型转换
### 3. **文档维护**
- 维护类型值映射文档
- 更新接口变更时同步更新所有相关代码
- 建立变更检查清单
## 📈 修复效果
### 修复前
```
❌ TypeScript Error: Type '2' is not assignable to type '10 | 20 | 30 | undefined'
❌ 编译失败
❌ 类型不安全
```
### 修复后
```
✅ 编译成功
✅ 类型安全
✅ 功能正常
✅ 代码一致
```
## 🎉 总结
通过系统性地修复所有使用旧类型值的地方，现在：
1. **类型一致性**：所有优惠券相关代码使用统一的类型值（10, 20, 30）
2. **编译成功**：TypeScript编译器不再报错
3. **功能完整**：所有优惠券功能正常工作
4. **代码质量**：删除了重复代码，提高了可维护性
**现在所有的TypeScript类型错误都已修复，项目可以正常编译和运行！** 🎯

157
docs/TYPESCRIPT_WARNING_FIX.md Normal file
View File

@@ -0,0 +1,157 @@
# 🔧 TypeScript 警告修复
## 问题描述
在`useShopInfo.ts`中出现TypeScript警告：
```
TS6133: forceRefresh is declared but its value is never read.
```
## 问题分析
在`fetchShopInfo`函数中，`forceRefresh`参数被声明但从未使用：
```typescript
// 问题代码 ❌
const fetchShopInfo = useCallback(async (forceRefresh = false) => {
// forceRefresh参数在函数体中从未被使用
try {
setLoading(true);
setError(null);
const data = await getShopInfo(); // 总是从服务器获取
// ...
}
}, [saveShopInfoToStorage]);
```
## 修复方案
### 选择的方案：移除未使用的参数
```typescript
// 修复后 ✅
const fetchShopInfo = useCallback(async () => {
try {
setLoading(true);
setError(null);
const data = await getShopInfo();
setShopInfo(data);
saveShopInfoToStorage(data);
return data;
} catch (error) {
// 错误处理...
} finally {
setLoading(false);
}
}, [saveShopInfoToStorage]);
```
## 为什么选择移除参数
### 1. **当前实现逻辑**
- `fetchShopInfo`总是从服务器获取最新数据
- 缓存逻辑在`useEffect`初始化时处理
- 不需要强制刷新参数
### 2. **代码简化**
- 移除未使用的参数使代码更清晰
- 避免TypeScript警告
- 减少不必要的复杂性
### 3. **功能完整性**
- `refreshShopInfo`方法专门用于强制刷新
- `fetchShopInfo`专注于获取数据
- 职责分离更清晰
## 替代方案（未采用）
如果需要实现`forceRefresh`逻辑，可以这样做：
```typescript
// 替代方案：实现forceRefresh逻辑
const fetchShopInfo = useCallback(async (forceRefresh = false) => {
// 如果不是强制刷新，先检查缓存
if (!forceRefresh) {
const hasCache = loadShopInfoFromStorage();
if (hasCache) {
return shopInfo;
}
}
try {
setLoading(true);
setError(null);
const data = await getShopInfo();
setShopInfo(data);
saveShopInfoToStorage(data);
return data;
} catch (error) {
// 错误处理...
} finally {
setLoading(false);
}
}, [saveShopInfoToStorage, loadShopInfoFromStorage, shopInfo]);
```
**为什么不采用这个方案：**
- 会重新引入循环依赖问题（依赖`shopInfo`）
- 缓存逻辑已在初始化时处理
- 增加不必要的复杂性
## 修复效果
### 修复前 ❌
```
⚠️ TS6133: forceRefresh is declared but its value is never read.
🔧 未使用的参数造成代码混淆
📝 代码意图不明确
```
### 修复后 ✅
```
✅ 无TypeScript警告
🔧 代码简洁明确
📝 函数职责清晰
```
## 相关方法说明
### `fetchShopInfo()`
- **用途**：从服务器获取商店信息
- **场景**：初始化时调用
- **特点**：总是获取最新数据
### `refreshShopInfo()`
- **用途**：强制刷新商店信息
- **场景**：用户手动刷新时调用
- **特点**：清除缓存，重新获取
### 使用示例
```typescript
const { fetchShopInfo, refreshShopInfo } = useShopInfo();
// 初始化获取（内部自动调用）
// fetchShopInfo();
// 用户手动刷新
const handleRefresh = async () => {
await refreshShopInfo();
};
```
## 总结
通过移除未使用的`forceRefresh`参数：
- ✅ **消除TypeScript警告**
- ✅ **简化代码逻辑**
- ✅ **保持功能完整**
- ✅ **避免循环依赖**
这个修复使代码更加清晰和可维护，同时保持了所有原有功能。

171
docs/TYPE_WARNING_FIX.md Normal file
View File

@@ -0,0 +1,171 @@
# 🚨 TypeScript类型警告修复
## 问题描述
在`src/user/gift/receive.tsx`文件中出现红色类型警告：
```
Type 'string' is not assignable to type 'number | undefined'
```
## 🔍 问题分析
### 错误位置
```typescript
// 第34行 - 错误的类型
enabled: '1', // ❌ 字符串类型
```
### 根本原因
根据`ShopCouponParam`接口定义，`enabled`字段期望的是`number`类型：
```typescript
export interface ShopCouponParam extends PageParam {
// ...其他字段
enabled?: number; // ← 期望数字类型
// ...
}
```
但代码中传入的是字符串`'1'`，导致类型不匹配。
## 🔧 修复内容
### src/user/gift/receive.tsx
#### 修复前 ❌
```typescript
const res = await pageShopCoupon({
page: currentPage,
limit: 10,
keywords: searchValue,
enabled: '1', // ❌ 字符串类型
isExpire: 0
})
```
#### 修复后 ✅
```typescript
const res = await pageShopCoupon({
page: currentPage,
limit: 10,
keywords: searchValue,
enabled: 1, // ✅ 数字类型
isExpire: 0
})
```
## 📊 类型映射表
| 字段 | 期望类型 | 修复前 | 修复后 | 说明 |
|------|----------|--------|--------|------|
| `enabled` | `number \| undefined` | `'1'` (string) | `1` (number) | 启用状态：1-启用，0-禁用 |
| `isExpire` | `number \| undefined` | `0` (number) | `0` (number) | 过期状态：0-未过期，1-已过期 |
## ✅ 修复效果
### 修复前
```
⚠️ TypeScript Warning: Type 'string' is not assignable to type 'number | undefined'
⚠️ 红色警告显示
⚠️ 类型不安全
```
### 修复后
```
✅ 类型检查通过
✅ 没有警告
✅ 类型安全
```
## 🔍 相关检查
### 其他文件状态
- ✅ `src/user/coupon/receive.tsx` - 已经使用正确的数字类型
- ✅ `src/user/gift/receive.tsx` - 现已修复
- ✅ 其他相关文件 - 无类似问题
### API接口定义
```typescript
// ShopCouponParam 接口中的相关字段
export interface ShopCouponParam extends PageParam {
enabled?: number; // 是否启用：1-启用，0-禁用
isExpire?: number; // 是否过期：0-未过期，1-已过期
status?: number; // 状态
type?: number; // 类型
// ...其他字段
}
```
## 🎯 最佳实践
### 1. **类型一致性**
- 确保传入的参数类型与接口定义一致
- 使用数字类型而不是字符串表示数值
### 2. **接口规范**
- 状态字段统一使用数字类型
- 0/1 表示布尔状态（0-否，1-是）
### 3. **代码检查**
- 启用严格的TypeScript检查
- 使用IDE的类型提示功能
- 定期检查类型警告
## 🧪 验证方法
### 1. **编译验证**
```bash
npm run build:weapp
```
应该没有类型警告。
### 2. **IDE验证**
- 在VS Code中打开文件
- 检查是否还有红色波浪线
- 确认类型提示正确
### 3. **功能验证**
- 礼品领取页面正常加载
- API请求正常发送
- 数据正常返回
## 📈 预防措施
### 1. **开发规范**
- 严格按照接口定义传参
- 使用TypeScript的类型检查
- 代码审查时注意类型匹配
### 2. **工具配置**
```json
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}
```
### 3. **ESLint规则**
```json
// .eslintrc.js
{
"rules": {
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/strict-boolean-expressions": "error"
}
}
```
## 🎉 总结
通过将`enabled: '1'`修改为`enabled: 1`，成功修复了类型警告：
- ✅ **类型安全**：参数类型与接口定义一致
- ✅ **代码质量**：消除了TypeScript警告
- ✅ **功能正常**：API调用不受影响
- ✅ **维护性**：代码更加规范和可维护
**现在所有的类型警告都已修复，代码类型安全！** 🎯

357
docs/USE_SHOP_INFO_HOOK.md Normal file
View File

@@ -0,0 +1,357 @@
# 🏪 useShopInfo Hook 使用指南
## 📋 概述
`useShopInfo` 是一个用于管理商店信息的React Hook，提供了商店信息的获取、缓存和管理功能。它基于`getShopInfo()`接口，为全站提供统一的商店信息访问方式。
## ✨ 特性
- 🚀 **自动缓存**：30分钟本地缓存，减少网络请求
- 🔄 **智能刷新**：支持强制刷新和自动过期更新
- 📱 **离线支持**：网络失败时使用缓存数据
- 🛠️ **工具方法**：提供常用信息的便捷获取方法
- 🎯 **TypeScript**：完整的类型支持
- ⚡ **性能优化**：使用useCallback避免不必要的重渲染
## 🔧 基本用法
### 1. 导入Hook
```typescript
import { useShopInfo } from '@/hooks/useShopInfo';
```
### 2. 在组件中使用
```typescript
const MyComponent = () => {
const {
shopInfo,
loading,
error,
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
if (loading) {
return <div>加载中...</div>;
}
if (error) {
return <div>加载失败: {error}</div>;
}
return (
<div>
<img src={getWebsiteLogo()} alt="Logo" />
<h1>{getWebsiteName()}</h1>
</div>
);
};
```
## 📊 API 参考
### 状态属性
| 属性 | 类型 | 说明 |
|------|------|------|
| `shopInfo` | `CmsWebsite \| null` | 商店信息对象 |
| `loading` | `boolean` | 是否正在加载 |
| `error` | `string \| null` | 错误信息 |
### 方法
| 方法 | 参数 | 返回值 | 说明 |
|------|------|--------|------|
| `fetchShopInfo` | `forceRefresh?: boolean` | `Promise<CmsWebsite \| null>` | 获取商店信息 |
| `refreshShopInfo` | - | `Promise<CmsWebsite \| null>` | 强制刷新商店信息 |
| `clearCache` | - | `void` | 清除本地缓存 |
### 工具方法
| 方法 | 返回值 | 说明 |
|------|--------|------|
| `getWebsiteName()` | `string` | 获取网站名称，默认"商城" |
| `getWebsiteLogo()` | `string` | 获取网站Logo URL |
| `getDarkLogo()` | `string` | 获取深色模式Logo URL |
| `getDomain()` | `string` | 获取网站域名 |
| `getPhone()` | `string` | 获取联系电话 |
| `getEmail()` | `string` | 获取邮箱地址 |
| `getAddress()` | `string` | 获取地址 |
| `getIcpNo()` | `string` | 获取ICP备案号 |
| `getStatus()` | `object` | 获取网站状态信息 |
| `getConfig()` | `any` | 获取网站配置 |
| `getNavigation()` | `object` | 获取导航菜单 |
| `isSearchEnabled()` | `boolean` | 是否支持搜索 |
| `getVersionInfo()` | `object` | 获取版本信息 |
## 🎯 使用场景
### 1. 页面头部组件
```typescript
// src/pages/index/Header.tsx
import { useShopInfo } from '@/hooks/useShopInfo';
const Header = () => {
const { getWebsiteName, getWebsiteLogo, loading } = useShopInfo();
return (
<NavBar
left={
<div style={{display: 'flex', alignItems: 'center'}}>
<Avatar size="22" src={getWebsiteLogo()} />
<span>{getWebsiteName()}</span>
</div>
}
/>
);
};
```
### 2. 首页组件
```typescript
// src/pages/index/index.tsx
import { useShopInfo } from '@/hooks/useShopInfo';
const Home = () => {
const { shopInfo, loading, error } = useShopInfo();
useEffect(() => {
if (shopInfo) {
// 设置页面标题
Taro.setNavigationBarTitle({
title: shopInfo.websiteName || '商城'
});
}
}, [shopInfo]);
// 分享配置
useShareAppMessage(() => ({
title: shopInfo?.websiteName || '精选商城',
imageUrl: shopInfo?.websiteLogo
}));
return (
<div>
{/* 页面内容 */}
</div>
);
};
```
### 3. 商品详情页分享
```typescript
// src/shop/goodsDetail/index.tsx
import { useShopInfo } from '@/hooks/useShopInfo';
const GoodsDetail = () => {
const { getWebsiteName, getWebsiteLogo } = useShopInfo();
useShareAppMessage(() => ({
title: `${goods?.name} - ${getWebsiteName()}`,
path: `/shop/goodsDetail/index?id=${goodsId}`,
imageUrl: goods?.image || getWebsiteLogo()
}));
return (
<div>
{/* 商品详情 */}
</div>
);
};
```
### 4. 联系我们页面
```typescript
const ContactPage = () => {
const {
getPhone,
getEmail,
getAddress,
getIcpNo
} = useShopInfo();
return (
<div>
<div>电话: {getPhone()}</div>
<div>邮箱: {getEmail()}</div>
<div>地址: {getAddress()}</div>
<div>备案号: {getIcpNo()}</div>
</div>
);
};
```
### 5. 网站状态检查
```typescript
const StatusChecker = () => {
const { getStatus, getVersionInfo } = useShopInfo();
const status = getStatus();
const version = getVersionInfo();
return (
<div>
<div>运行状态: {status.running ? '正常' : '维护中'}</div>
<div>版本: {version.version === 10 ? '免费版' : version.version === 20 ? '专业版' : '永久授权'}</div>
{version.expirationTime && (
<div>到期时间: {version.expirationTime}</div>
)}
</div>
);
};
```
## 🔄 缓存机制
### 缓存策略
- **缓存时间**：30分钟
- **存储位置**：微信小程序本地存储
- **缓存键名**：`shop_info` 和 `shop_info_cache_time`
### 缓存行为
1. **首次加载**：从服务器获取数据并缓存
2. **后续加载**：优先使用缓存，缓存过期时自动刷新
3. **网络失败**：使用缓存数据（即使过期）
4. **强制刷新**：忽略缓存，直接从服务器获取
### 手动管理缓存
```typescript
const { refreshShopInfo, clearCache } = useShopInfo();
// 强制刷新
const handleRefresh = async () => {
await refreshShopInfo();
};
// 清除缓存
const handleClearCache = () => {
clearCache();
};
```
## 🚀 性能优化
### 1. 避免重复请求
```typescript
// ✅ 推荐：多个组件使用同一个Hook实例
const App = () => {
const shopInfo = useShopInfo();
return (
<ShopInfoProvider value={shopInfo}>
<Header />
<Content />
<Footer />
</ShopInfoProvider>
);
};
```
### 2. 条件渲染优化
```typescript
const Component = () => {
const { shopInfo, loading } = useShopInfo();
// ✅ 使用loading状态避免闪烁
if (loading) {
return <Skeleton />;
}
return (
<div>
{shopInfo && (
<img src={shopInfo.websiteLogo} alt="Logo" />
)}
</div>
);
};
```
## 🛠️ 迁移指南
### 从直接调用API迁移
#### 迁移前 ❌
```typescript
// 旧代码
const [config, setConfig] = useState<CmsWebsite>();
useEffect(() => {
getShopInfo().then((data) => {
setConfig(data);
});
}, []);
```
#### 迁移后 ✅
```typescript
// 新代码
const { shopInfo: config, loading } = useShopInfo();
```
### 批量替换步骤
1. **替换导入**
```typescript
// 删除
import { getShopInfo } from '@/api/layout';
// 添加
import { useShopInfo } from '@/hooks/useShopInfo';
```
2. **替换状态管理**
```typescript
// 删除
const [config, setConfig] = useState<CmsWebsite>();
// 替换为
const { shopInfo: config, loading, error } = useShopInfo();
```
3. **删除useEffect**
```typescript
// 删除这些代码
useEffect(() => {
getShopInfo().then((data) => {
setConfig(data);
});
}, []);
```
## 🧪 测试示例
```typescript
// 测试组件
const TestComponent = () => {
const {
shopInfo,
loading,
error,
refreshShopInfo,
getWebsiteName
} = useShopInfo();
return (
<div>
<div>状态: {loading ? '加载中' : '已加载'}</div>
<div>错误: {error || '无'}</div>
<div>网站名: {getWebsiteName()}</div>
<button onClick={refreshShopInfo}>刷新</button>
<pre>{JSON.stringify(shopInfo, null, 2)}</pre>
</div>
);
};
```
## 🎉 总结
`useShopInfo` Hook 提供了：
- ✅ **统一的商店信息管理**
- ✅ **智能缓存机制**
- ✅ **丰富的工具方法**
- ✅ **完整的TypeScript支持**
- ✅ **简单的迁移路径**
通过使用这个Hook，你可以在整个应用中轻松访问和管理商店信息，提高代码的可维护性和用户体验。

28
src/api/cms/cmsWebsite/model/index.ts
View File

@@ -99,6 +99,34 @@ export interface CmsWebsite {
search?: boolean;
}
export interface AppInfo {
appId?: number;
appName?: string;
description?: string;
keywords?: string;
appCode?: string;
mpQrCode?: string;
title?: string;
logo?: string;
icon?: string;
domain?: string;
running?: number;
version?: number;
expirationTime?: string;
expired?: boolean;
expiredDays?: number;
soon?: number;
statusIcon?: string;
statusText?: string;
config?: Object;
serverTime?: Object;
topNavs?: CmsNavigation[];
bottomNavs?: CmsNavigation[];
setting?: Object;
createTime?: string;
}
/**
* 网站信息记录表搜索条件
*/

70
src/api/passport/login/index.ts
View File

@@ -1,5 +1,5 @@
import request from '@/utils/request-legacy';
import type { ApiResult } from '@/api/index';
import type { ApiResult } from '@/api';
import type {
LoginParam,
LoginResult,
@@ -70,71 +70,3 @@ export async function sendSmsCaptcha(data: LoginParam) {
}
return Promise.reject(new Error(res.message));
}
export async function getOpenId(data: any){
const res = request.post<ApiResult<LoginResult>>(
SERVER_API_URL + '/wx-login/getOpenId',
data
);
if (res.code === 0) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
export async function loginByOpenId(data:any){
const res = request.post<ApiResult<LoginResult>>(
SERVER_API_URL + '/wx-login/loginByOpenId',
data
);
if (res.code === 0) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 登录
*/
export async function remoteLogin(data: LoginParam) {
const res = await request.post<ApiResult<LoginResult>>(
'https://open.gxwebsoft.com/api/login',
data
);
if (res.code === 0) {
// setToken(res.data.data?.access_token, data.remember);
return res.message;
}
return Promise.reject(new Error(res.message));
}
/**
* 获取企业微信登录链接
*/
export async function getWxWorkQrConnect(data: any) {
const res = await request.post<ApiResult<unknown>>(
'/wx-work',
data
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
export async function loginMpWxMobile(data: {
refereeId: number;
gradeId: number;
code: any;
sceneType: string;
comments: string;
encryptedData: any;
tenantId: string;
iv: any;
notVerifyPhone: boolean
}) {
const res = request.post<ApiResult<unknown>>(SERVER_API_URL + '/wx-login/loginByMpWxPhone', data);
if (res.code === 0) {
return res.data;
}
return Promise.reject(new Error(res.message));
}

39
src/api/shop/shopUserCoupon/index.ts
View File

@@ -99,3 +99,42 @@ export async function getShopUserCoupon(id: number) {
}
return Promise.reject(new Error(res.message));
}
/**
* 获取我的可用优惠券
*/
export async function getMyAvailableCoupons() {
const res = await request.get<ApiResult<ShopUserCoupon[]>>(
'/shop/shop-user-coupon/my/available'
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 获取我的已使用优惠券
*/
export async function getMyUsedCoupons() {
const res = await request.get<ApiResult<ShopUserCoupon[]>>(
'/shop/shop-user-coupon/my/used'
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 获取我的已过期优惠券
*/
export async function getMyExpiredCoupons() {
const res = await request.get<ApiResult<ShopUserCoupon[]>>(
'/shop/shop-user-coupon/my/expired'
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}

16
src/api/shop/shopUserCoupon/model/index.ts
View File

@@ -32,8 +32,16 @@ export interface ShopUserCoupon {
endTime?: string;
// 使用状态(0未使用 1已使用 2已过期)
status?: number;
// 状态文本描述
statusText?: string;
// 是否过期, 0否, 1是
isExpire?: number;
// 是否即将过期（后端计算）
isExpiringSoon?: boolean;
// 剩余天数（后端计算）
daysRemaining?: number;
// 剩余小时数（后端计算）
hoursRemaining?: number;
// 使用时间
useTime?: string;
// 使用订单ID
@@ -63,5 +71,13 @@ export interface ShopUserCouponParam extends PageParam {
isExpire?: number;
sortBy?: string;
sortOrder?: string;
// 仅查询有效的优惠券
validOnly?: boolean;
// 仅查询已过期的优惠券
expired?: boolean;
// 查询即将过期的优惠券
expiringSoon?: boolean;
// 当前时间（用于测试）
currentTime?: string;
keywords?: string;
}

77
src/api/user/coupon/index.ts
View File

@@ -1,77 +0,0 @@
import request from '@/utils/request';
import type { ApiResult, PageResult } from '@/api/index';
import type { UserCoupon, UserCouponParam } from './model';
/**
* 分页查询用户优惠券
*/
export async function pageUserCoupon(params: UserCouponParam) {
const res = await request.get<ApiResult<PageResult<UserCoupon>>>(
'/sys/user-coupon/page',
params
);
if (res.code === 0) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 查询用户优惠券列表
*/
export async function listUserCoupon(params?: UserCouponParam) {
const res = await request.get<ApiResult<UserCoupon[]>>(
'/sys/user-coupon',
params
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 获取用户优惠券统计
*/
export async function getUserCouponCount(userId: number) {
const res = await request.get<ApiResult<{
total: number;
unused: number;
used: number;
expired: number;
}>>(
'/sys/user-coupon/count',
{ userId }
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 根据id查询用户优惠券
*/
export async function getUserCoupon(id: number) {
const res = await request.get<ApiResult<UserCoupon>>(
'/sys/user-coupon/' + id
);
if (res.code === 0 && res.data) {
return res.data;
}
return Promise.reject(new Error(res.message));
}
/**
* 使用优惠券
*/
export async function useCoupon(couponId: number, orderId: number) {
const res = await request.put<ApiResult<unknown>>(
'/sys/user-coupon/use',
{ couponId, orderId }
);
if (res.code === 0) {
return res.message;
}
return Promise.reject(new Error(res.message));
}

45
src/api/user/coupon/model/index.ts
View File

@@ -1,45 +0,0 @@
import type { PageParam } from '@/api/index';
/**
* 用户优惠券
*/
export interface UserCoupon {
// 优惠券ID
couponId?: number;
// 用户ID
userId?: number;
// 优惠券名称
name?: string;
// 优惠券类型 1-满减券 2-折扣券 3-免费券
type?: number;
// 优惠券金额/折扣
value?: string;
// 使用门槛金额
minAmount?: string;
// 有效期开始时间
startTime?: string;
// 有效期结束时间
endTime?: string;
// 使用状态 0-未使用 1-已使用 2-已过期
status?: number;
// 使用时间
useTime?: string;
// 关联订单ID
orderId?: number;
// 备注
comments?: string;
// 创建时间
createTime?: string;
// 更新时间
updateTime?: string;
}
/**
* 用户优惠券搜索条件
*/
export interface UserCouponParam extends PageParam {
userId?: number;
type?: number;
status?: number;
name?: string;
}

2
src/app.ts
View File

@@ -7,7 +7,7 @@ import {loginByOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {saveStorageByLoginUser} from "@/utils/server";
function App(props) {
function App(props: { children: any; }) {
const reload = () => {
Taro.login({
success: (res) => {

7
src/components/CouponCard.scss
View File

@@ -117,12 +117,16 @@
.coupon-right {
flex: 1;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 16px;
.coupon-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.coupon-title {
font-size: 32px;
@@ -143,6 +147,7 @@
display: flex;
justify-content: flex-end;
align-items: center;
flex-shrink: 0;
.coupon-btn {
min-width: 120px;

99
src/components/CouponCard.tsx
View File

@@ -4,20 +4,32 @@ import { Button } from '@nutui/nutui-react-taro'
import './CouponCard.scss'
export interface CouponCardProps {
/** 优惠券ID */
id?: string
/** 优惠券金额 */
amount: number
/** 最低消费金额 */
minAmount?: number
/** 优惠券类型：1-满减券 2-折扣券 3-免费券 */
type?: 1 | 2 | 3
/** 优惠券类型：10-满减券 20-折扣券 30-免费券 */
type?: 10 | 20 | 30
/** 优惠券状态：0-未使用 1-已使用 2-已过期 */
status?: 0 | 1 | 2
/** 状态文本描述（后端返回） */
statusText?: string
/** 优惠券标题 */
title?: string
/** 优惠券描述 */
description?: string
/** 有效期开始时间 */
startTime?: string
/** 有效期结束时间 */
endTime?: string
/** 是否即将过期（后端计算） */
isExpiringSoon?: boolean
/** 剩余天数（后端计算） */
daysRemaining?: number
/** 剩余小时数（后端计算） */
hoursRemaining?: number
/** 是否显示领取按钮 */
showReceiveBtn?: boolean
/** 是否显示使用按钮 */
@@ -33,11 +45,15 @@ export interface CouponCardProps {
const CouponCard: React.FC<CouponCardProps> = ({
amount,
minAmount,
type = 1,
type = 10,
status = 0,
statusText,
title,
startTime,
endTime,
isExpiringSoon,
daysRemaining,
hoursRemaining,
showReceiveBtn = false,
showUseBtn = false,
onReceive,
@@ -49,14 +65,13 @@ const CouponCard: React.FC<CouponCardProps> = ({
return `theme-${theme}`
}
// 格式化优惠券金额显示
// @ts-ignore
const formatAmount = () => {
switch (type) {
case 1: // 满减券
case 10: // 满减券
return `¥${amount}`
case 2: // 折扣券
case 20: // 折扣券
return `${amount}折`
case 3: // 免费券
case 30: // 免费券
return '免费'
default:
return `¥${amount}`
@@ -65,21 +80,27 @@ const CouponCard: React.FC<CouponCardProps> = ({
// 获取优惠券状态文本
const getStatusText = () => {
// 优先使用后端返回的状态文本
if (statusText) {
return statusText
}
// 兜底逻辑
switch (status) {
case 0:
return '未使用'
return '可用'
case 1:
return '已使用'
case 2:
return '已过期'
default:
return '未使用'
return '可用'
}
}
// 获取使用条件文本
const getConditionText = () => {
if (type === 3) return '免费使用' // 免费券
if (type === 30) return '免费使用' // 免费券
if (minAmount && minAmount > 0) {
return `满${minAmount}元可用`
}
@@ -88,15 +109,40 @@ const CouponCard: React.FC<CouponCardProps> = ({
// 格式化有效期显示
const formatValidityPeriod = () => {
if (!startTime || !endTime) return ''
// 第一优先级：使用后端返回的状态文本
if (statusText) {
return statusText
}
// 第二优先级：根据状态码显示
if (status === 2) {
return '已过期'
}
if (status === 1) {
return '已使用'
}
// 第三优先级：使用后端计算的剩余时间
if (isExpiringSoon && daysRemaining !== undefined) {
if (daysRemaining <= 0 && hoursRemaining !== undefined) {
return `${hoursRemaining}小时后过期`
}
return `${daysRemaining}天后过期`
}
// 兜底逻辑：使用前端计算
if (!endTime) return '可用'
const start = new Date(startTime)
const end = new Date(endTime)
const now = new Date()
// 如果还未开始
if (now < start) {
return `${start.getMonth() + 1}.${start.getDate()} 开始生效`
if (startTime) {
const start = new Date(startTime)
// 如果还未开始
if (now < start) {
return `${start.getMonth() + 1}.${start.getDate()} 开始生效`
}
}
// 计算剩余天数
@@ -112,25 +158,6 @@ const CouponCard: React.FC<CouponCardProps> = ({
}
}
// 格式化日期
const formatDate = (dateStr?: string) => {
if (!dateStr) return ''
const date = new Date(dateStr)
return `${date.getMonth() + 1}.${date.getDate()}`
}
// 获取有效期文本
const getValidityText = () => {
if (startTime && endTime) {
return `${formatDate(startTime)}-${formatDate(endTime)}`
}
return ''
}
console.log(getValidityText)
const themeClass = getThemeClass()
return (
@@ -138,7 +165,7 @@ const CouponCard: React.FC<CouponCardProps> = ({
{/* 左侧金额区域 */}
<View className={`coupon-left ${themeClass}`}>
<View className="amount-wrapper">
{type !== 3 && <Text className="currency">¥</Text>}
{type !== 30 && <Text className="currency">¥</Text>}
<Text className="amount">{formatAmount()}</Text>
</View>
<View className="condition">
@@ -157,7 +184,7 @@ const CouponCard: React.FC<CouponCardProps> = ({
<View className="coupon-right">
<View className="coupon-info">
<View className="coupon-title">
{title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')}
{title || (type === 10 ? '满减券' : type === 20 ? '折扣券' : '免费券')}
</View>
<View className="coupon-validity">
{formatValidityPeriod()}

42
src/components/SpecSelector/index.tsx
View File

@@ -73,12 +73,12 @@ const SpecSelector: React.FC<SpecSelectorProps> = ({
}, [selectedSpecs, skus, specGroups]);
// 选择规格值
const handleSpecSelect = (specName: string, specValue: string) => {
setSelectedSpecs(prev => ({
...prev,
[specName]: specValue
}));
};
// const handleSpecSelect = (specName: string, specValue: string) => {
// setSelectedSpecs(prev => ({
// ...prev,
// [specName]: specValue
// }));
// };
// 确认选择
const handleConfirm = () => {
@@ -89,21 +89,21 @@ const SpecSelector: React.FC<SpecSelectorProps> = ({
};
// 检查规格值是否可选（是否有对应的SKU且有库存）
const isSpecValueAvailable = (specName: string, specValue: string) => {
const testSpecs = { ...selectedSpecs, [specName]: specValue };
// 如果还有其他规格未选择，则认为可选
if (Object.keys(testSpecs).length < specGroups.length) {
return true;
}
// 构建规格值字符串
const sortedSpecNames = specGroups.map(g => g.specName).sort();
const specValues = sortedSpecNames.map(name => testSpecs[name]).join('|');
const sku = skus.find(s => s.sku === specValues);
return sku && sku.stock && sku.stock > 0 && sku.status === 0;
};
// const isSpecValueAvailable = (specName: string, specValue: string) => {
// const testSpecs = { ...selectedSpecs, [specName]: specValue };
//
// // 如果还有其他规格未选择，则认为可选
// if (Object.keys(testSpecs).length < specGroups.length) {
// return true;
// }
//
// // 构建规格值字符串
// const sortedSpecNames = specGroups.map(g => g.specName).sort();
// const specValues = sortedSpecNames.map(name => testSpecs[name]).join('|');
//
// const sku = skus.find(s => s.sku === specValues);
// return sku && sku.stock && sku.stock > 0 && sku.status === 0;
// };
return (
<Popup

323
src/hooks/useShopInfo.ts Normal file
View File

@@ -0,0 +1,323 @@
import {useState, useEffect, useCallback} from 'react';
import Taro from '@tarojs/taro';
import {AppInfo} from '@/api/cms/cmsWebsite/model';
import {getShopInfo} from '@/api/layout';
// 本地存储键名
const SHOP_INFO_STORAGE_KEY = 'shop_info';
const SHOP_INFO_CACHE_TIME_KEY = 'shop_info_cache_time';
// 缓存有效期（毫秒）- 默认30分钟
const CACHE_DURATION = 30 * 60 * 1000;
/**
* 商店信息Hook
* 提供商店信息的获取、缓存和管理功能
*/
export const useShopInfo = () => {
const [shopInfo, setShopInfo] = useState<AppInfo | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// 从本地存储加载商店信息
const loadShopInfoFromStorage = useCallback(() => {
try {
const cachedData = Taro.getStorageSync(SHOP_INFO_STORAGE_KEY);
const cacheTime = Taro.getStorageSync(SHOP_INFO_CACHE_TIME_KEY);
if (cachedData && cacheTime) {
const now = Date.now();
const timeDiff = now - cacheTime;
// 检查缓存是否过期
if (timeDiff < CACHE_DURATION) {
const shopData = typeof cachedData === 'string' ? JSON.parse(cachedData) : cachedData;
setShopInfo(shopData);
setLoading(false);
return true; // 返回true表示使用了缓存
} else {
// 缓存过期，清除旧数据
Taro.removeStorageSync(SHOP_INFO_STORAGE_KEY);
Taro.removeStorageSync(SHOP_INFO_CACHE_TIME_KEY);
}
}
} catch (error) {
console.error('加载商店信息缓存失败:', error);
}
return false; // 返回false表示没有使用缓存
}, []);
// 保存商店信息到本地存储
const saveShopInfoToStorage = useCallback((data: AppInfo) => {
try {
Taro.setStorageSync(SHOP_INFO_STORAGE_KEY, data);
Taro.setStorageSync(SHOP_INFO_CACHE_TIME_KEY, Date.now());
} catch (error) {
console.error('保存商店信息缓存失败:', error);
}
}, []);
// 从服务器获取商店信息
const fetchShopInfo = useCallback(async () => {
try {
setLoading(true);
setError(null);
const data = await getShopInfo();
setShopInfo(data);
// 保存到本地存储
saveShopInfoToStorage(data);
return data;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
console.error('获取商店信息失败:', error);
setError(errorMessage);
// 如果网络请求失败，尝试使用缓存数据（即使过期）
const cachedData = Taro.getStorageSync(SHOP_INFO_STORAGE_KEY);
if (cachedData) {
const shopData = typeof cachedData === 'string' ? JSON.parse(cachedData) : cachedData;
setShopInfo(shopData);
console.warn('网络请求失败，使用缓存数据');
}
return null;
} finally {
setLoading(false);
}
}, [saveShopInfoToStorage]);
// 刷新商店信息
const refreshShopInfo = useCallback(async () => {
try {
setLoading(true);
setError(null);
const data = await getShopInfo();
setShopInfo(data);
// 保存到本地存储
saveShopInfoToStorage(data);
return data;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
console.error('刷新商店信息失败:', error);
setError(errorMessage);
return null;
} finally {
setLoading(false);
}
}, [saveShopInfoToStorage]);
// 清除缓存
const clearCache = useCallback(() => {
try {
Taro.removeStorageSync(SHOP_INFO_STORAGE_KEY);
Taro.removeStorageSync(SHOP_INFO_CACHE_TIME_KEY);
setShopInfo(null);
setError(null);
} catch (error) {
console.error('清除商店信息缓存失败:', error);
}
}, []);
// 获取应用名称
const getAppName = useCallback(() => {
return shopInfo?.appName || '商城';
}, [shopInfo]);
// 获取网站名称（兼容旧方法名）
const getWebsiteName = useCallback(() => {
return shopInfo?.appName || '商城';
}, [shopInfo]);
// 获取应用Logo
const getAppLogo = useCallback(() => {
return shopInfo?.logo || shopInfo?.icon || '';
}, [shopInfo]);
// 获取网站Logo（兼容旧方法名）
const getWebsiteLogo = useCallback(() => {
return shopInfo?.logo || shopInfo?.icon || '';
}, [shopInfo]);
// 获取应用图标
const getAppIcon = useCallback(() => {
return shopInfo?.icon || shopInfo?.logo || '';
}, [shopInfo]);
// 获取深色模式Logo（AppInfo中无此字段，使用普通Logo）
const getDarkLogo = useCallback(() => {
return shopInfo?.logo || shopInfo?.icon || '';
}, [shopInfo]);
// 获取应用域名
const getDomain = useCallback(() => {
return shopInfo?.domain || '';
}, [shopInfo]);
// 获取应用描述
const getDescription = useCallback(() => {
return shopInfo?.description || '';
}, [shopInfo]);
// 获取应用关键词
const getKeywords = useCallback(() => {
return shopInfo?.keywords || '';
}, [shopInfo]);
// 获取应用标题
const getTitle = useCallback(() => {
return shopInfo?.title || shopInfo?.appName || '';
}, [shopInfo]);
// 获取小程序二维码
const getMpQrCode = useCallback(() => {
return shopInfo?.mpQrCode || '';
}, [shopInfo]);
// 获取联系电话（AppInfo中无此字段，从config中获取）
const getPhone = useCallback(() => {
return (shopInfo?.config as any)?.phone || '';
}, [shopInfo]);
// 获取邮箱（AppInfo中无此字段，从config中获取）
const getEmail = useCallback(() => {
return (shopInfo?.config as any)?.email || '';
}, [shopInfo]);
// 获取地址（AppInfo中无此字段，从config中获取）
const getAddress = useCallback(() => {
return (shopInfo?.config as any)?.address || '';
}, [shopInfo]);
// 获取ICP备案号（AppInfo中无此字段，从config中获取）
const getIcpNo = useCallback(() => {
return (shopInfo?.config as any)?.icpNo || '';
}, [shopInfo]);
// 获取应用状态
const getStatus = useCallback(() => {
return {
running: shopInfo?.running || 0,
statusText: shopInfo?.statusText || '',
statusIcon: shopInfo?.statusIcon || '',
expired: shopInfo?.expired || false,
expiredDays: shopInfo?.expiredDays || 0,
soon: shopInfo?.soon || 0
};
}, [shopInfo]);
// 获取应用配置
const getConfig = useCallback(() => {
return shopInfo?.config || {};
}, [shopInfo]);
// 获取应用设置
const getSetting = useCallback(() => {
return shopInfo?.setting || {};
}, [shopInfo]);
// 获取服务器时间
const getServerTime = useCallback(() => {
return shopInfo?.serverTime || {};
}, [shopInfo]);
// 获取导航菜单
const getNavigation = useCallback(() => {
return {
topNavs: shopInfo?.topNavs || [],
bottomNavs: shopInfo?.bottomNavs || []
};
}, [shopInfo]);
// 检查是否支持搜索（从config中获取）
const isSearchEnabled = useCallback(() => {
return (shopInfo?.config as any)?.search === true;
}, [shopInfo]);
// 获取应用版本信息
const getVersionInfo = useCallback(() => {
return {
version: shopInfo?.version || 10,
expirationTime: shopInfo?.expirationTime || '',
expired: shopInfo?.expired || false,
expiredDays: shopInfo?.expiredDays || 0,
soon: shopInfo?.soon || 0
};
}, [shopInfo]);
// 检查应用是否过期
const isExpired = useCallback(() => {
return shopInfo?.expired === true;
}, [shopInfo]);
// 获取过期天数
const getExpiredDays = useCallback(() => {
return shopInfo?.expiredDays || 0;
}, [shopInfo]);
// 检查是否即将过期
const isSoonExpired = useCallback(() => {
return (shopInfo?.soon || 0) > 0;
}, [shopInfo]);
// 初始化时加载商店信息
useEffect(() => {
const initShopInfo = async () => {
// 先尝试从缓存加载
const hasCache = loadShopInfoFromStorage();
// 如果没有缓存或需要刷新，则从服务器获取
if (!hasCache) {
await fetchShopInfo();
}
};
initShopInfo();
}, []); // 空依赖数组，只在组件挂载时执行一次
return {
// 状态
shopInfo,
loading,
error,
// 方法
fetchShopInfo,
refreshShopInfo,
clearCache,
// 新的工具方法（基于AppInfo字段）
getAppName,
getAppLogo,
getAppIcon,
getDescription,
getKeywords,
getTitle,
getMpQrCode,
getDomain,
getConfig,
getSetting,
getServerTime,
getNavigation,
getStatus,
getVersionInfo,
isExpired,
getExpiredDays,
isSoonExpired,
// 兼容旧方法名
getWebsiteName,
getWebsiteLogo,
getDarkLogo,
getPhone,
getEmail,
getAddress,
getIcpNo,
isSearchEnabled
};
};

3
src/hooks/useUser.ts
View File

@@ -97,7 +97,8 @@ export const useUser = () => {
} catch (error) {
console.error('获取用户信息失败:', error);
// 如果获取失败，可能是token过期，清除登录状态
if (error.message?.includes('401') || error.message?.includes('未授权')) {
const errorMessage = error instanceof Error ? error.message : String(error);
if (errorMessage?.includes('401') || errorMessage?.includes('未授权')) {
logoutUser();
}
return null;

43
src/pages/index/Header.tsx
View File

@@ -2,21 +2,23 @@ import {useEffect, useState} from "react";
import Taro from '@tarojs/taro';
import {Button, Space} from '@nutui/nutui-react-taro'
import {TriangleDown} from '@nutui/icons-react-taro'
import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
import {getShopInfo, getUserInfo, getWxOpenId} from "@/api/layout";
import {Avatar, NavBar} from '@nutui/nutui-react-taro'
import {getUserInfo, getWxOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {getOrganization} from "@/api/system/organization";
import {myUserVerify} from "@/api/system/userVerify";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {User} from "@/api/system/user/model";
import { useShopInfo } from '@/hooks/useShopInfo';
import MySearch from "./MySearch";
import './Header.scss';
const Header = (props: any) => {
const [userInfo, setUserInfo] = useState<User>()
// 使用新的useShopInfo Hook
const {
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
const [IsLogin, setIsLogin] = useState<boolean>(true)
const [config, setConfig] = useState<CmsWebsite>()
const [showBasic, setShowBasic] = useState(false)
const [statusBarHeight, setStatusBarHeight] = useState<number>()
const reload = async () => {
@@ -25,16 +27,11 @@ const Header = (props: any) => {
setStatusBarHeight(res.statusBarHeight)
},
})
// 获取站点信息
getShopInfo().then((data) => {
setConfig(data);
console.log(userInfo)
})
// 注意：商店信息现在通过useShopInfo自动管理，不需要手动获取
// 获取用户信息
getUserInfo().then((data) => {
if (data) {
setIsLogin(true);
setUserInfo(data)
console.log('用户信息>>>', data.phone)
// 保存userId
Taro.setStorageSync('UserId', data.userId)
@@ -87,7 +84,7 @@ const Header = (props: any) => {
}
/* 获取用户手机号 */
const handleGetPhoneNumber = ({detail}) => {
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
const {code, encryptedData, iv} = detail
Taro.login({
success: function () {
@@ -157,9 +154,9 @@ const Header = (props: any) => {
<Space>
<Avatar
size="22"
src={config?.websiteLogo}
src={getWebsiteLogo()}
/>
<span style={{color: '#000'}}>{config?.websiteName}</span>
<span style={{color: '#000'}}>{getWebsiteName()}</span>
</Space>
</Button>
<TriangleDown size={9}/>
@@ -168,23 +165,13 @@ const Header = (props: any) => {
<div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
<Avatar
size="22"
src={config?.websiteLogo}
src={getWebsiteLogo()}
/>
<span className={'text-white'}>{config?.websiteName}</span>
<span className={'text-white'}>{getWebsiteName()}</span>
<TriangleDown className={'text-white'} size={9}/>
</div>
)}>
</NavBar>
<Popup
visible={showBasic}
position="bottom"
style={{width: '100%', height: '100%'}}
onClose={() => {
setShowBasic(false)
}}
>
<div style={{padding: '12px 0', fontWeight: 'bold', textAlign: 'center'}}>车辆信息</div>
</Popup>
</>
)
}

205
src/pages/index/HeaderWithHook.tsx Normal file
View File

@@ -0,0 +1,205 @@
import {useEffect, useState} from "react";
import Taro from '@tarojs/taro';
import {Button, Space} from '@nutui/nutui-react-taro'
import {TriangleDown} from '@nutui/icons-react-taro'
import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
import {getUserInfo, getWxOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {getOrganization} from "@/api/system/organization";
import {myUserVerify} from "@/api/system/userVerify";
import {User} from "@/api/system/user/model";
import { useShopInfo } from '@/hooks/useShopInfo';
import { useUser } from '@/hooks/useUser';
import MySearch from "./MySearch";
import './Header.scss';
const Header = (props: any) => {
// 使用新的hooks
const {
shopInfo,
loading: shopLoading,
getWebsiteName,
getWebsiteLogo
} = useShopInfo();
const {
user,
isLoggedIn,
loading: userLoading
} = useUser();
const [showBasic, setShowBasic] = useState(false)
const [statusBarHeight, setStatusBarHeight] = useState<number>()
const reload = async () => {
Taro.getSystemInfo({
success: (res) => {
setStatusBarHeight(res.statusBarHeight)
},
})
// 注意：商店信息现在通过useShopInfo自动管理，不需要手动获取
// 用户信息现在通过useUser自动管理，不需要手动获取
// 如果需要获取openId，可以在用户登录后处理
if (user && !user.openid) {
Taro.login({
success: (res) => {
getWxOpenId({code: res.code}).then(() => {
console.log('OpenId获取成功');
})
}
})
}
// 检查用户认证状态
if (user?.userId) {
// 获取组织信息
getOrganization({userId: user.userId}).then((data) => {
console.log('组织信息>>>', data)
}).catch(() => {
console.log('获取组织信息失败')
});
// 检查用户认证
myUserVerify({userId: user.userId}).then((data) => {
console.log('认证信息>>>', data)
}).catch(() => {
console.log('获取认证信息失败')
});
}
}
// 获取手机号授权
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
const {code, encryptedData, iv} = detail
Taro.login({
success: function () {
if (code) {
Taro.request({
url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
method: 'POST',
data: {
code,
encryptedData,
iv,
notVerifyPhone: true,
refereeId: 0,
sceneType: 'save_referee',
tenantId: TenantId
},
success: function (res) {
if (res.data.code == 1) {
Taro.showToast({
title: res.data.message,
icon: 'error',
duration: 2000
})
return false;
}
// 登录成功
Taro.setStorageSync('access_token', res.data.data.access_token)
Taro.setStorageSync('UserId', res.data.data.user.userId)
// 重新加载小程序
Taro.reLaunch({
url: '/pages/index/index'
})
}
})
} else {
console.log('登录失败！')
}
}
})
}
useEffect(() => {
reload().then()
}, [])
// 显示加载状态
if (shopLoading || userLoading) {
return (
<div className={'fixed top-0 header-bg'} style={{
height: !props.stickyStatus ? '180px' : '148px',
}}>
<div style={{padding: '20px', textAlign: 'center', color: '#fff'}}>
加载中...
</div>
</div>
);
}
return (
<>
<div className={'fixed top-0 header-bg'} style={{
height: !props.stickyStatus ? '180px' : '148px',
}}>
<MySearch/>
</div>
<NavBar
style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
onBackClick={() => {
}}
left={
!isLoggedIn ? (
<div style={{display: 'flex', alignItems: 'center'}}>
<Button style={{color: '#000'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
<Space>
<Avatar
size="22"
src={getWebsiteLogo()}
/>
<span style={{color: '#000'}}>{getWebsiteName()}</span>
</Space>
</Button>
<TriangleDown size={9}/>
</div>
) : (
<div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
<Avatar
size="22"
src={getWebsiteLogo()}
/>
<span className={'text-white'}>{getWebsiteName()}</span>
<TriangleDown className={'text-white'} size={9}/>
</div>
)}>
</NavBar>
<Popup
visible={showBasic}
position="bottom"
style={{width: '100%', height: '100%'}}
onClose={() => {
setShowBasic(false)
}}
>
<div style={{padding: '20px'}}>
<h3>商店信息</h3>
<div>网站名称: {getWebsiteName()}</div>
<div>Logo: <img src={getWebsiteLogo()} alt="logo" style={{width: '50px', height: '50px'}} /></div>
<h3>用户信息</h3>
<div>登录状态: {isLoggedIn ? '已登录' : '未登录'}</div>
{user && (
<>
<div>用户ID: {user.userId}</div>
<div>手机号: {user.phone}</div>
<div>昵称: {user.nickname}</div>
</>
)}
<button
onClick={() => setShowBasic(false)}
style={{marginTop: '20px', padding: '10px 20px'}}
>
关闭
</button>
</div>
</Popup>
</>
)
}
export default Header;

189
src/pages/index/IndexWithHook.tsx Normal file
View File

@@ -0,0 +1,189 @@
import Header from './Header';
import BestSellers from './BestSellers';
import Taro from '@tarojs/taro';
import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
import {useEffect, useState} from "react";
import {Sticky} from '@nutui/nutui-react-taro'
import { useShopInfo } from '@/hooks/useShopInfo';
import { useUser } from '@/hooks/useUser';
import Menu from "./Menu";
import Banner from "./Banner";
import './index.scss'
const Home = () => {
const [stickyStatus, setStickyStatus] = useState(false);
// 使用新的hooks
const {
shopInfo,
loading: shopLoading,
error: shopError,
getWebsiteName,
getWebsiteLogo,
refreshShopInfo
} = useShopInfo();
const {
user,
isLoggedIn,
loading: userLoading
} = useUser();
const onSticky = (args: any) => {
setStickyStatus(args[0].isFixed);
};
const showAuthModal = () => {
Taro.showModal({
title: '授权提示',
content: '需要获取您的用户信息',
confirmText: '去授权',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
// 用户点击确认，打开授权设置页面
Taro.openSetting({
success: (settingRes) => {
if (settingRes.authSetting['scope.userInfo']) {
console.log('用户已授权');
} else {
console.log('用户拒绝授权');
}
}
});
}
}
});
};
// 分享给好友
useShareAppMessage(() => {
return {
title: `${getWebsiteName()} - 精选商城`,
path: '/pages/index/index',
imageUrl: getWebsiteLogo(),
success: function (res: any) {
console.log('分享成功', res);
Taro.showToast({
title: '分享成功',
icon: 'success',
duration: 2000
});
},
fail: function (res: any) {
console.log('分享失败', res);
Taro.showToast({
title: '分享失败',
icon: 'none',
duration: 2000
});
}
};
});
// 分享到朋友圈
useShareTimeline(() => {
return {
title: `${getWebsiteName()} - 精选商城`,
imageUrl: getWebsiteLogo(),
success: function (res: any) {
console.log('分享到朋友圈成功', res);
},
fail: function (res: any) {
console.log('分享到朋友圈失败', res);
}
};
});
useEffect(() => {
// 设置页面标题
if (shopInfo?.appName) {
Taro.setNavigationBarTitle({
title: shopInfo.appName
});
}
}, [shopInfo]);
useEffect(() => {
// 检查用户授权状态
Taro.getSetting({
success: (res) => {
if (res.authSetting['scope.userInfo']) {
console.log('用户已经授权过，可以直接获取用户信息');
} else {
console.log('用户未授权，需要弹出授权窗口');
showAuthModal();
}
}
});
// 获取用户基本信息（头像、昵称等）
Taro.getUserInfo({
success: (res) => {
const avatar = res.userInfo.avatarUrl;
console.log('用户头像:', avatar);
},
fail: (err) => {
console.log('获取用户信息失败:', err);
}
});
}, []);
// 处理错误状态
if (shopError) {
return (
<div style={{padding: '20px', textAlign: 'center'}}>
<div>加载商店信息失败: {shopError}</div>
<button
onClick={refreshShopInfo}
style={{marginTop: '10px', padding: '10px 20px'}}
>
重试
</button>
</div>
);
}
// 显示加载状态
if (shopLoading) {
return (
<div style={{padding: '20px', textAlign: 'center'}}>
<div>加载中...</div>
</div>
);
}
return (
<>
<Sticky threshold={0} onChange={(args) => onSticky(args)}>
<Header stickyStatus={stickyStatus}/>
</Sticky>
<div className={'flex flex-col mt-12'}>
<Menu/>
<Banner/>
<BestSellers/>
{/* 调试信息面板 - 仅在开发环境显示 */}
{process.env.NODE_ENV === 'development' && (
<div style={{
position: 'fixed',
bottom: '10px',
right: '10px',
background: 'rgba(0,0,0,0.8)',
color: 'white',
padding: '10px',
borderRadius: '5px',
fontSize: '12px',
maxWidth: '200px'
}}>
<div>商店: {getWebsiteName()}</div>
<div>用户: {isLoggedIn ? (user?.nickname || '已登录') : '未登录'}</div>
<div>加载: {userLoading ? '用户加载中' : '已完成'}</div>
</div>
)}
</div>
</>
)
}
export default Home;

10
src/pages/index/index.tsx
View File

@@ -26,11 +26,11 @@ function Home() {
return {
title: '网宿小店 - 网宿软件',
path: `/pages/index/index`,
success: function (res) {
console.log('分享成功', res);
success: function () {
console.log('分享成功');
},
fail: function (res) {
console.log('分享失败', res);
fail: function () {
console.log('分享失败');
}
};
});
@@ -72,7 +72,7 @@ function Home() {
});
};
const onSticky = (item) => {
const onSticky = (item: IArguments) => {
if(item){
setStickyStatus(!stickyStatus)
}

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

@@ -6,7 +6,7 @@ import {useEffect, useState} from "react";
import {User} from "@/api/system/user/model";
import navTo from "@/utils/common";
import {TenantId} from "@/config/app";
import {getUserCouponCount} from "@/api/user/coupon";
import {getMyAvailableCoupons} from "@/api/shop/shopUserCoupon";
import {getUserPointsStats} from "@/api/user/points";
import {useUser} from "@/hooks/useUser";
@@ -37,9 +37,9 @@ function UserCard() {
const loadUserStats = (userId: number) => {
// 加载优惠券数量
getUserCouponCount(userId)
.then((res: any) => {
setCouponCount(res.unused || 0)
getMyAvailableCoupons()
.then((coupons: any) => {
setCouponCount(coupons?.length || 0)
})
.catch((error: any) => {
console.error('Coupon count error:', error)
@@ -132,7 +132,7 @@ function UserCard() {
};
/* 获取用户手机号 */
const handleGetPhoneNumber = ({detail}) => {
const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
const {code, encryptedData, iv} = detail
Taro.login({
success: function () {

9
src/shop/orderConfirm/index.scss
View File

@@ -83,6 +83,15 @@
overflow-y: auto;
}
&__loading {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
color: #999;
font-size: 14px;
}
&__current {
padding: 16px;
background: #f8f9fa;

206
src/shop/orderConfirm/index.tsx
View File

@@ -26,6 +26,16 @@ import {PaymentHandler, PaymentType, buildSingleGoodsOrder} from "@/utils/paymen
import OrderConfirmSkeleton from "@/components/OrderConfirmSkeleton";
import CouponList from "@/components/CouponList";
import {CouponCardProps} from "@/components/CouponCard";
import {getMyAvailableCoupons} from "@/api/shop/shopUserCoupon";
import {
transformCouponData,
calculateCouponDiscount,
isCouponUsable,
getCouponUnusableReason,
sortCoupons,
filterUsableCoupons,
filterUnusableCoupons
} from "@/utils/couponUtils";
const OrderConfirm = () => {
@@ -53,38 +63,8 @@ const OrderConfirm = () => {
// 优惠券相关状态
const [selectedCoupon, setSelectedCoupon] = useState<CouponCardProps | null>(null)
const [couponVisible, setCouponVisible] = useState<boolean>(false)
const [availableCoupons] = useState<CouponCardProps[]>([
{
amount: 5,
minAmount: 20,
type: 1,
status: 0,
title: '满20减5',
startTime: '2024-01-01',
endTime: '2024-12-31',
theme: 'red'
},
{
amount: 10,
minAmount: 50,
type: 1,
status: 0,
title: '满50减10',
startTime: '2024-01-01',
endTime: '2024-12-31',
theme: 'orange'
},
{
amount: 20,
minAmount: 100,
type: 1,
status: 0,
title: '满100减20',
startTime: '2024-01-01',
endTime: '2024-12-31',
theme: 'blue'
}
])
const [availableCoupons, setAvailableCoupons] = useState<CouponCardProps[]>([])
const [couponLoading, setCouponLoading] = useState<boolean>(false)
const router = Taro.getCurrentInstance().router;
const goodsId = router?.params?.goodsId;
@@ -99,22 +79,7 @@ const OrderConfirm = () => {
const getCouponDiscount = () => {
if (!selectedCoupon || !goods) return 0
const total = getGoodsTotal()
// 检查是否满足使用条件
if (selectedCoupon.minAmount && total < selectedCoupon.minAmount) {
return 0
}
switch (selectedCoupon.type) {
case 1: // 满减券
return selectedCoupon.amount
case 2: // 折扣券
return total * (1 - selectedCoupon.amount / 10)
case 3: // 免费券
return total
default:
return 0
}
return calculateCouponDiscount(selectedCoupon, total)
}
// 计算实付金额
@@ -133,17 +98,35 @@ const OrderConfirm = () => {
// 处理数量变化
const handleQuantityChange = (value: string | number) => {
const newQuantity = typeof value === 'string' ? parseInt(value) || 1 : value
setQuantity(Math.max(1, Math.min(newQuantity, goods?.stock || 999)))
const finalQuantity = Math.max(1, Math.min(newQuantity, goods?.stock || 999))
setQuantity(finalQuantity)
// 数量变化时，重新排序优惠券并检查当前选中的优惠券是否还可用
if (availableCoupons.length > 0) {
const newTotal = parseFloat(goods?.price || '0') * finalQuantity
const sortedCoupons = sortCoupons(availableCoupons, newTotal)
setAvailableCoupons(sortedCoupons)
// 检查当前选中的优惠券是否还可用
if (selectedCoupon && !isCouponUsable(selectedCoupon, newTotal)) {
setSelectedCoupon(null)
Taro.showToast({
title: '当前优惠券不满足使用条件，已自动取消',
icon: 'none'
})
}
}
}
// 处理优惠券选择
const handleCouponSelect = (coupon: CouponCardProps) => {
const total = getGoodsTotal()
// 检查是否满足使用条件
if (coupon.minAmount && total < coupon.minAmount) {
// 检查是否可用
if (!isCouponUsable(coupon, total)) {
const reason = getCouponUnusableReason(coupon, total)
Taro.showToast({
title: `需满${coupon.minAmount}元才能使用此优惠券`,
title: reason || '优惠券不可用',
icon: 'none'
})
return
@@ -166,6 +149,45 @@ const OrderConfirm = () => {
})
}
// 加载用户优惠券
const loadUserCoupons = async () => {
try {
setCouponLoading(true)
// 使用新的API获取可用优惠券
const res = await getMyAvailableCoupons()
if (res && res.length > 0) {
// 转换数据格式
const transformedCoupons = res.map(transformCouponData)
// 按优惠金额排序
const total = getGoodsTotal()
const sortedCoupons = sortCoupons(transformedCoupons, total)
setAvailableCoupons(sortedCoupons)
console.log('加载优惠券成功:', {
originalData: res,
transformedData: transformedCoupons,
sortedData: sortedCoupons
})
} else {
setAvailableCoupons([])
console.log('暂无可用优惠券')
}
} catch (error) {
console.error('加载优惠券失败:', error)
setAvailableCoupons([])
Taro.showToast({
title: '加载优惠券失败',
icon: 'none'
})
} finally {
setCouponLoading(false)
}
}
/**
* 统一支付入口
*/
@@ -208,7 +230,7 @@ const OrderConfirm = () => {
comments: goods.name,
deliveryType: 0,
buyerRemarks: orderRemark,
couponId: selectedCoupon ? selectedCoupon.amount : undefined
couponId: selectedCoupon ? selectedCoupon.id : undefined
}
);
@@ -268,6 +290,11 @@ const OrderConfirm = () => {
})))
setPayment(paymentRes[0])
}
// 加载优惠券（在商品信息加载完成后）
if (goodsRes) {
await loadUserCoupons()
}
} catch (err) {
console.error('加载数据失败:', err)
setError('加载数据失败，请重试')
@@ -456,35 +483,54 @@ const OrderConfirm = () => {
</View>
<View className="coupon-popup__content">
{selectedCoupon && (
<View className="coupon-popup__current">
<Text className="coupon-popup__current-title font-medium">当前使用</Text>
<View className="coupon-popup__current-item">
<Text>{selectedCoupon.title} -￥{selectedCoupon.amount}</Text>
<Button size="small" onClick={handleCouponCancel}>取消使用</Button>
</View>
{couponLoading ? (
<View className="coupon-popup__loading">
<Text>加载优惠券中...</Text>
</View>
) : (
<>
{selectedCoupon && (
<View className="coupon-popup__current">
<Text className="coupon-popup__current-title font-medium">当前使用</Text>
<View className="coupon-popup__current-item">
<Text>{selectedCoupon.title} -￥{calculateCouponDiscount(selectedCoupon, getGoodsTotal()).toFixed(2)}</Text>
<Button size="small" onClick={handleCouponCancel}>取消使用</Button>
</View>
</View>
)}
{(() => {
const total = getGoodsTotal()
const usableCoupons = filterUsableCoupons(availableCoupons, total)
const unusableCoupons = filterUnusableCoupons(availableCoupons, total)
return (
<>
<CouponList
title={`可用优惠券 (${usableCoupons.length})`}
coupons={usableCoupons}
layout="vertical"
onCouponClick={handleCouponSelect}
showEmpty={usableCoupons.length === 0}
emptyText="暂无可用优惠券"
/>
{unusableCoupons.length > 0 && (
<CouponList
title={`不可用优惠券 (${unusableCoupons.length})`}
coupons={unusableCoupons.map(coupon => ({
...coupon,
status: 2 as const
}))}
layout="vertical"
showEmpty={false}
/>
)}
</>
)
})()}
</>
)}
<CouponList
title="可用优惠券"
coupons={availableCoupons.filter(coupon => {
const total = getGoodsTotal()
return !coupon.minAmount || total >= coupon.minAmount
})}
layout="vertical"
onCouponClick={handleCouponSelect}
/>
<CouponList
title="不可用优惠券"
coupons={availableCoupons.filter(coupon => {
const total = getGoodsTotal()
return coupon.minAmount && total < coupon.minAmount
}).map(coupon => ({...coupon, status: 2 as const}))}
layout="vertical"
showEmpty={false}
/>
</View>
</View>
</Popup>

8
src/shop/search/index.tsx
View File

@@ -1,4 +1,4 @@
import {useEffect, useState} from 'react'
import {SetStateAction, useEffect, useState} from 'react'
import {useRouter} from '@tarojs/taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
@@ -46,7 +46,7 @@ const SearchPage = () => {
try {
let history = Taro.getStorageSync('search_history') || []
// 去重并添加到开头
history = history.filter(item => item !== keyword)
history = history.filter((item: string) => item !== keyword)
history.unshift(keyword)
// 只保留最近10条
history = history.slice(0, 10)
@@ -57,9 +57,9 @@ const SearchPage = () => {
}
}
const handleKeywords = (keywords) => {
const handleKeywords = (keywords: SetStateAction<string>) => {
setKeywords(keywords)
handleSearch(keywords).then()
handleSearch(typeof keywords === "string" ? keywords : '').then()
}
// 搜索商品

33
src/user/coupon/coupon.tsx
View File

@@ -1,8 +1,8 @@
import {useState, useEffect, CSSProperties} from 'react'
import Taro from '@tarojs/taro'
import {Cell, InfiniteLoading, Tabs, TabPane, Tag, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
import {pageUserCoupon, getUserCouponCount} from "@/api/user/coupon";
import {UserCoupon as UserCouponType} from "@/api/user/coupon/model";
import {pageShopUserCoupon as pageUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
import {ShopUserCoupon as UserCouponType} from "@/api/shop/shopUserCoupon/model";
import {View} from '@tarojs/components'
const InfiniteUlStyle: CSSProperties = {
@@ -71,17 +71,26 @@ const UserCoupon = () => {
})
}
const loadCouponCount = () => {
const loadCouponCount = async () => {
const userId = Taro.getStorageSync('UserId')
if (!userId) return
getUserCouponCount(parseInt(userId))
.then((res: any) => {
setCouponCount(res)
})
.catch((error: any) => {
console.error('Coupon count error:', error)
try {
// 并行获取各种状态的优惠券数量
const [availableCoupons, usedCoupons, expiredCoupons] = await Promise.all([
getMyAvailableCoupons().catch(() => []),
getMyUsedCoupons().catch(() => []),
getMyExpiredCoupons().catch(() => [])
])
setCouponCount({
unused: availableCoupons.length || 0,
used: usedCoupons.length || 0,
expired: expiredCoupons.length || 0
})
} catch (error) {
console.error('Coupon count error:', error)
}
}
const onTabChange = (index: string) => {
@@ -97,9 +106,9 @@ const UserCoupon = () => {
const getCouponTypeText = (type?: number) => {
switch (type) {
case 1: return '满减券'
case 2: return '折扣券'
case 3: return '免费券'
case 10: return '满减券'
case 20: return '折扣券'
case 30: return '免费券'
default: return '优惠券'
}
}

375
src/user/coupon/index.tsx
View File

@@ -1,10 +1,20 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
import {
Button,
Empty,
ConfigProvider,
SearchBar,
InfiniteLoading,
Loading,
PullToRefresh,
Tabs,
TabPane
} from '@nutui/nutui-react-taro'
import {Plus, Filter} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopUserCoupon} from "@/api/shop/shopUserCoupon/model";
import {pageShopUserCoupon} from "@/api/shop/shopUserCoupon";
import {pageShopUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
import CouponList from "@/components/CouponList";
import CouponStats from "@/components/CouponStats";
import CouponGuide from "@/components/CouponGuide";
@@ -12,6 +22,7 @@ import CouponFilter from "@/components/CouponFilter";
import CouponExpireNotice, {ExpiringSoon} from "@/components/CouponExpireNotice";
import {CouponCardProps} from "@/components/CouponCard";
import dayjs from "dayjs";
import {transformCouponData} from "@/utils/couponUtils";
const CouponManage = () => {
const [list, setList] = useState<ShopUserCoupon[]>([])
@@ -20,7 +31,7 @@ const CouponManage = () => {
const [searchValue, setSearchValue] = useState('')
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
console.log('total = ',total)
console.log('total = ', total)
const [activeTab, setActiveTab] = useState('0') // 0-可用 1-已使用 2-已过期
const [stats, setStats] = useState({
available: 0,
@@ -39,77 +50,9 @@ const CouponManage = () => {
})
// 获取优惠券状态过滤条件
const getStatusFilter = () => {
switch (activeTab) {
case '0': // 可用
return { status: 0, isExpire: 0 }
case '1': // 已使用
return { status: 1 }
case '2': // 已过期
return { isExpire: 1 }
default:
return {}
}
}
const reload = async (isRefresh = false) => {
if (isRefresh) {
setPage(1)
setList([])
setHasMore(true)
}
setLoading(true)
try {
const currentPage = isRefresh ? 1 : page
const statusFilter = getStatusFilter()
const res = await pageShopUserCoupon({
page: currentPage,
limit: 10,
keywords: searchValue,
...statusFilter,
// 应用筛选条件
...(filters.type.length > 0 && { type: filters.type[0] }),
...(filters.minAmount && { minAmount: filters.minAmount }),
sortBy: filters.sortBy,
sortOrder: filters.sortOrder
})
if (res && res.list) {
const newList = isRefresh ? res.list : [...list, ...res.list]
console.log('优惠券数据加载成功:', {
isRefresh,
currentPage,
statusFilter,
responseData: res,
newListLength: newList.length,
activeTab
})
setList(newList)
setTotal(res.count || 0)
// 判断是否还有更多数据
setHasMore(res.list.length === 10) // 如果返回的数据等于limit，说明可能还有更多
if (!isRefresh) {
setPage(currentPage + 1)
} else {
setPage(2) // 刷新后下一页是第2页
}
} else {
console.log('优惠券数据为空:', res)
setHasMore(false)
setTotal(0)
}
} catch (error) {
console.error('获取优惠券失败:', error)
Taro.showToast({
title: '获取优惠券失败',
icon: 'error'
});
} finally {
setLoading(false)
}
// 直接调用reloadWithTab，使用当前的activeTab
await reloadWithTab(activeTab, isRefresh)
}
// 搜索功能
@@ -126,84 +69,140 @@ const CouponManage = () => {
// Tab切换
const handleTabChange = (value: string | number) => {
const tabValue = String(value)
console.log('Tab切换:', { from: activeTab, to: tabValue })
console.log('Tab切换:', {from: activeTab, to: tabValue})
setActiveTab(tabValue)
setPage(1)
setList([])
setHasMore(true)
// 延迟执行reload，确保状态更新完成
setTimeout(() => {
reload(true)
}, 100)
// 直接调用reload，传入新的tab值
reloadWithTab(tabValue)
}
// 转换优惠券数据为CouponCard组件所需格式
const transformCouponData = (coupon: ShopUserCoupon): CouponCardProps => {
console.log('转换优惠券数据:', coupon)
// 判断优惠券状态
let status: 0 | 1 | 2 = 0 // 默认未使用
if (coupon.isExpire === 1) {
status = 2 // 已过期
} else if (coupon.status === 1) {
status = 1 // 已使用
// 根据指定tab加载数据
const reloadWithTab = async (tab: string, isRefresh = true) => {
if (isRefresh) {
setPage(1)
setList([])
setHasMore(true)
}
// 根据优惠券类型计算金额显示
let amount = 0
let type: 1 | 2 | 3 = 1
setLoading(true)
try {
let res: any = null
if (coupon.type === 10) { // 满减券
type = 1
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 2
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 3
amount = 0
// 根据tab选择对应的API
switch (tab) {
case '0': // 可用优惠券
res = await getMyAvailableCoupons()
break
case '1': // 已使用优惠券
res = await getMyUsedCoupons()
break
case '2': // 已过期优惠券
res = await getMyExpiredCoupons()
break
default:
res = await getMyAvailableCoupons()
}
console.log('使用Tab加载数据:', { tab, data: res })
if (res && res.length > 0) {
// 应用搜索过滤
let filteredList = res
if (searchValue) {
filteredList = res.filter((item: any) =>
item.name?.includes(searchValue) ||
item.description?.includes(searchValue)
)
}
// 应用其他筛选条件
if (filters.type.length > 0) {
filteredList = filteredList.filter((item: any) =>
filters.type.includes(item.type)
)
}
if (filters.minAmount) {
filteredList = filteredList.filter((item: any) =>
parseFloat(item.minPrice || '0') >= filters.minAmount!
)
}
// 排序
filteredList.sort((a: any, b: any) => {
const aValue = getValueForSort(a, filters.sortBy)
const bValue = getValueForSort(b, filters.sortBy)
if (filters.sortOrder === 'asc') {
return aValue - bValue
} else {
return bValue - aValue
}
})
setList(filteredList)
setTotal(filteredList.length)
setHasMore(false) // 一次性加载所有数据，不需要分页
} else {
setList([])
setTotal(0)
setHasMore(false)
}
} catch (error) {
console.error('获取优惠券失败:', error)
Taro.showToast({
title: '获取优惠券失败',
icon: 'error'
});
setList([])
setTotal(0)
setHasMore(false)
} finally {
setLoading(false)
}
}
// 获取排序值的辅助函数
const getValueForSort = (item: any, sortBy: string) => {
switch (sortBy) {
case 'amount':
return parseFloat(item.reducePrice || item.discount || '0')
case 'expireTime':
return new Date(item.endTime || '').getTime()
case 'createTime':
default:
return new Date(item.createTime || '').getTime()
}
}
// 转换优惠券数据并添加使用按钮
const transformCouponDataWithAction = (coupon: ShopUserCoupon): CouponCardProps => {
console.log('原始优惠券数据:', coupon)
// 使用统一的转换函数
const transformedCoupon = transformCouponData(coupon)
console.log('转换后的优惠券数据:', transformedCoupon)
// 添加使用按钮和点击事件
const result = {
amount,
type,
status,
minAmount: parseFloat(coupon.minPrice || '0'),
title: coupon.name || '优惠券',
startTime: coupon.startTime,
endTime: coupon.endTime,
showUseBtn: status === 0, // 只有未使用的券显示使用按钮
onUse: () => handleUseCoupon(coupon),
theme: getThemeByType(coupon.type)
...transformedCoupon,
showUseBtn: transformedCoupon.status === 0, // 只有未使用的券显示使用按钮
onUse: () => handleUseCoupon(coupon)
}
console.log('转换后的数据:', result)
console.log('最终优惠券数据:', result)
return result
}
// 根据优惠券类型获取主题色
const getThemeByType = (type?: number): 'red' | 'orange' | 'blue' | 'purple' | 'green' => {
switch (type) {
case 10: return 'red' // 满减券
case 20: return 'orange' // 折扣券
case 30: return 'green' // 免费券
default: return 'blue'
}
}
// 使用优惠券
const handleUseCoupon = (coupon: ShopUserCoupon) => {
Taro.showModal({
title: '使用优惠券',
content: `确定要使用"${coupon.name}"吗？`,
success: (res) => {
if (res.confirm) {
// 这里可以跳转到商品页面或购物车页面
Taro.navigateTo({
url: '/pages/index/index'
})
}
}
const handleUseCoupon = (_: ShopUserCoupon) => {
// 这里可以跳转到商品页面或购物车页面
Taro.navigateTo({
url: '/shop/category/index?id=4326'
})
}
@@ -229,18 +228,24 @@ const CouponManage = () => {
try {
// 并行获取各状态的优惠券数量
const [availableRes, usedRes, expiredRes] = await Promise.all([
pageShopUserCoupon({ page: 1, limit: 1, status: 0, isExpire: 0 }),
pageShopUserCoupon({ page: 1, limit: 1, status: 1 }),
pageShopUserCoupon({ page: 1, limit: 1, isExpire: 1 })
getMyAvailableCoupons(),
getMyUsedCoupons(),
getMyExpiredCoupons()
])
setStats({
available: availableRes?.count || 0,
used: usedRes?.count || 0,
expired: expiredRes?.count || 0
available: availableRes?.length || 0,
used: usedRes?.length || 0,
expired: expiredRes?.length || 0
})
} catch (error) {
console.error('获取优惠券统计失败:', error)
// 设置默认值
setStats({
available: 0,
used: 0,
expired: 0
})
}
}
@@ -265,7 +270,7 @@ const CouponManage = () => {
try {
// 获取即将过期的优惠券（3天内过期）
const res = await pageShopUserCoupon({
page: 1,
page: page,
limit: 50,
status: 0, // 未使用
isExpire: 0 // 未过期
@@ -283,7 +288,7 @@ const CouponManage = () => {
name: coupon.name || '',
type: coupon.type || 10,
amount: coupon.type === 10 ? coupon.reducePrice || '0' :
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
minAmount: coupon.minPrice,
endTime: coupon.endTime || '',
daysLeft
@@ -348,7 +353,7 @@ const CouponManage = () => {
<Button
size="small"
type="primary"
icon={<Plus />}
icon={<Plus/>}
onClick={() => Taro.navigateTo({url: '/user/coupon/receive'})}
>
领取
@@ -356,7 +361,7 @@ const CouponManage = () => {
<Button
size="small"
fill="outline"
icon={<Filter />}
icon={<Filter/>}
onClick={() => setShowFilter(true)}
>
筛选
@@ -382,9 +387,9 @@ const CouponManage = () => {
{/* Tab切换 */}
<View className="bg-white">
<Tabs value={activeTab} onChange={handleTabChange}>
<TabPane title="可用" value="0" />
<TabPane title="已使用" value="1" />
<TabPane title="已过期" value="2" />
<TabPane title="可用" value="0"/>
<TabPane title="已使用" value="1"/>
<TabPane title="已过期" value="2"/>
</Tabs>
</View>
@@ -393,50 +398,42 @@ const CouponManage = () => {
onRefresh={handleRefresh}
headHeight={60}
>
<View style={{ height: 'calc(100vh - 200px)', overflowY: 'auto' }} id="coupon-scroll">
{/* 调试信息 */}
<View className="p-2 bg-yellow-100 text-xs text-gray-600">
调试信息: list.length={list.length}, loading={loading.toString()}, activeTab={activeTab}
</View>
{list.length === 0 && !loading ? (
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 300px)'}}>
<Empty
description={
activeTab === '0' ? "暂无可用优惠券" :
activeTab === '1' ? "暂无已使用优惠券" :
"暂无已过期优惠券"
}
style={{backgroundColor: 'transparent'}}
/>
</View>
) : (
<InfiniteLoading
target="coupon-scroll"
hasMore={hasMore}
onLoadMore={loadMore}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading />
<View className="ml-2">加载中...</View>
</View>
}
loadMoreText={
<View className="text-center py-4 text-gray-500">
{list.length === 0 ? "暂无数据" : "没有更多了"}
</View>
}
>
<CouponList
coupons={list.map(transformCouponData)}
onCouponClick={handleCouponClick}
showEmpty={false}
/>
{/* 调试：显示转换后的数据 */}
<View className="p-2 bg-blue-100 text-xs text-gray-600">
转换后数据: {JSON.stringify(list.map(transformCouponData).slice(0, 2), null, 2)}
<View style={{height: 'calc(100vh - 200px)', overflowY: 'auto'}} id="coupon-scroll">
{list.length === 0 && !loading ? (
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 300px)'}}>
<Empty
description={
activeTab === '0' ? "暂无可用优惠券" :
activeTab === '1' ? "暂无已使用优惠券" :
"暂无已过期优惠券"
}
style={{backgroundColor: 'transparent'}}
/>
</View>
</InfiniteLoading>
)}
) : (
<InfiniteLoading
target="coupon-scroll"
hasMore={hasMore}
onLoadMore={loadMore}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading/>
<View className="ml-2">加载中...</View>
</View>
}
loadMoreText={
<View className="text-center py-4 text-gray-500">
{list.length === 0 ? "暂无数据" : "没有更多了"}
</View>
}
>
<CouponList
coupons={list.map(transformCouponDataWithAction)}
onCouponClick={handleCouponClick}
showEmpty={false}
/>
</InfiniteLoading>
)}
</View>
</PullToRefresh>

8
src/user/coupon/receive.tsx
View File

@@ -76,16 +76,16 @@ const CouponReceive = () => {
// 转换优惠券数据为CouponCard组件所需格式
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
let amount = 0
let type: 1 | 2 | 3 = 1
let type: 10 | 20 | 30 = 10 // 使用新的类型值
if (coupon.type === 10) { // 满减券
type = 1
type = 10
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 2
type = 20
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 3
type = 30
amount = 0
}

6
src/user/gift/index.tsx
View File

@@ -17,7 +17,7 @@ const GiftCardManage = () => {
const [searchValue, setSearchValue] = useState('')
const [page, setPage] = useState(1)
// const [total, setTotal] = useState(0)
const [activeTab, setActiveTab] = useState('0') // 0-可用 1-已使用 2-已过期
const [activeTab, setActiveTab] = useState<string | number>('0') // 0-可用 1-已使用 2-已过期
const [stats, setStats] = useState({
available: 0,
used: 0,
@@ -34,7 +34,7 @@ const GiftCardManage = () => {
// 获取礼品卡状态过滤条件
const getStatusFilter = () => {
switch (activeTab) {
switch (String(activeTab)) {
case '0': // 可用
return { useStatus: 0 }
case '1': // 已使用
@@ -108,7 +108,7 @@ const GiftCardManage = () => {
}
// Tab切换
const handleTabChange = (value: string) => {
const handleTabChange = (value: string | number) => {
setActiveTab(value)
setPage(1)
setList([])

17
src/user/gift/receive.tsx
View File

@@ -1,7 +1,7 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
import {Gift, Search} from '@nutui/icons-react-taro'
import {Gift} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
import {pageShopCoupon} from "@/api/shop/shopCoupon";
@@ -31,7 +31,7 @@ const CouponReceive = () => {
page: currentPage,
limit: 10,
keywords: searchValue,
enabled: '1', // 启用状态
enabled: 1, // 启用状态
isExpire: 0 // 未过期
})
@@ -76,16 +76,16 @@ const CouponReceive = () => {
// 转换优惠券数据为CouponCard组件所需格式
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
let amount = 0
let type: 1 | 2 | 3 = 1
let type: 10 | 20 | 30 = 10 // 使用新的类型值
if (coupon.type === 10) { // 满减券
type = 1
type = 10
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 2
type = 20
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 3
type = 30
amount = 0
}
@@ -114,7 +114,7 @@ const CouponReceive = () => {
}
// 领取优惠券
const handleReceiveCoupon = async (coupon: ShopCoupon) => {
const handleReceiveCoupon = async (_: ShopCoupon) => {
try {
// 这里应该调用领取优惠券的API
// await receiveCoupon(coupon.id)
@@ -136,7 +136,7 @@ const CouponReceive = () => {
}
// 优惠券点击事件
const handleCouponClick = (coupon: CouponCardProps, index: number) => {
const handleCouponClick = (_: CouponCardProps, index: number) => {
const originalCoupon = list[index]
if (originalCoupon) {
// 显示优惠券详情
@@ -172,7 +172,6 @@ const CouponReceive = () => {
value={searchValue}
onChange={setSearchValue}
onSearch={handleSearch}
leftIcon={<Search />}
/>
</View>

200
src/utils/couponUtils.ts Normal file
View File

@@ -0,0 +1,200 @@
import { ShopUserCoupon } from '@/api/shop/shopUserCoupon/model'
import { CouponCardProps } from '@/components/CouponCard'
/**
* 将后端优惠券数据转换为前端组件所需格式
*/
export const transformCouponData = (coupon: ShopUserCoupon): CouponCardProps => {
// 解析金额
let amount = 0
if (coupon.type === 10) {
// 满减券：使用reducePrice
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) {
// 折扣券：使用discount
amount = coupon.discount || 0
} else if (coupon.type === 30) {
// 免费券：金额为0
amount = 0
}
// 解析最低消费金额
const minAmount = parseFloat(coupon.minPrice || '0')
// 确定主题颜色
const getTheme = (type?: number): CouponCardProps['theme'] => {
switch (type) {
case 10: return 'red' // 满减券-红色
case 20: return 'orange' // 折扣券-橙色
case 30: return 'green' // 免费券-绿色
default: return 'blue'
}
}
return {
id: coupon.id,
amount,
minAmount: minAmount > 0 ? minAmount : undefined,
type: coupon.type as 10 | 20 | 30,
status: coupon.status as 0 | 1 | 2,
statusText: coupon.statusText,
title: coupon.name || coupon.description || '优惠券',
description: coupon.description,
startTime: coupon.startTime,
endTime: coupon.endTime,
isExpiringSoon: coupon.isExpiringSoon,
daysRemaining: coupon.daysRemaining,
hoursRemaining: coupon.hoursRemaining,
theme: getTheme(coupon.type)
}
}
/**
* 计算优惠券折扣金额
*/
export const calculateCouponDiscount = (
coupon: CouponCardProps,
totalAmount: number
): number => {
// 检查是否满足使用条件
if (coupon.minAmount && totalAmount < coupon.minAmount) {
return 0
}
// 检查优惠券状态
if (coupon.status !== 0) {
return 0
}
switch (coupon.type) {
case 10: // 满减券
return coupon.amount
case 20: // 折扣券
return totalAmount * (1 - coupon.amount / 10)
case 30: // 免费券
return totalAmount
default:
return 0
}
}
/**
* 检查优惠券是否可用
*/
export const isCouponUsable = (
coupon: CouponCardProps,
totalAmount: number
): boolean => {
// 状态检查
if (coupon.status !== 0) {
return false
}
// 金额条件检查
if (coupon.minAmount && totalAmount < coupon.minAmount) {
return false
}
return true
}
/**
* 获取优惠券不可用原因
*/
export const getCouponUnusableReason = (
coupon: CouponCardProps,
totalAmount: number
): string => {
if (coupon.status === 1) {
return '优惠券已使用'
}
if (coupon.status === 2) {
return '优惠券已过期'
}
if (coupon.minAmount && totalAmount < coupon.minAmount) {
return `需满${coupon.minAmount}元才能使用`
}
return ''
}
/**
* 格式化优惠券标题
*/
export const formatCouponTitle = (coupon: CouponCardProps): string => {
if (coupon.title) {
return coupon.title
}
switch (coupon.type) {
case 10: // 满减券
if (coupon.minAmount && coupon.minAmount > 0) {
return `满${coupon.minAmount}减${coupon.amount}`
}
return `立减${coupon.amount}元`
case 20: // 折扣券
if (coupon.minAmount && coupon.minAmount > 0) {
return `满${coupon.minAmount}享${coupon.amount}折`
}
return `${coupon.amount}折优惠`
case 30: // 免费券
return '免费券'
default:
return '优惠券'
}
}
/**
* 排序优惠券列表
* 按照优惠金额从大到小排序，同等优惠金额按过期时间排序
*/
export const sortCoupons = (
coupons: CouponCardProps[],
totalAmount: number
): CouponCardProps[] => {
return [...coupons].sort((a, b) => {
// 先按可用性排序
const aUsable = isCouponUsable(a, totalAmount)
const bUsable = isCouponUsable(b, totalAmount)
if (aUsable && !bUsable) return -1
if (!aUsable && bUsable) return 1
// 都可用或都不可用时，按优惠金额排序
const aDiscount = calculateCouponDiscount(a, totalAmount)
const bDiscount = calculateCouponDiscount(b, totalAmount)
if (aDiscount !== bDiscount) {
return bDiscount - aDiscount // 优惠金额大的在前
}
// 优惠金额相同时，按过期时间排序（即将过期的在前）
if (a.endTime && b.endTime) {
return new Date(a.endTime).getTime() - new Date(b.endTime).getTime()
}
return 0
})
}
/**
* 过滤可用优惠券
*/
export const filterUsableCoupons = (
coupons: CouponCardProps[],
totalAmount: number
): CouponCardProps[] => {
return coupons.filter(coupon => isCouponUsable(coupon, totalAmount))
}
/**
* 过滤不可用优惠券
*/
export const filterUnusableCoupons = (
coupons: CouponCardProps[],
totalAmount: number
): CouponCardProps[] => {
return coupons.filter(coupon => !isCouponUsable(coupon, totalAmount))
}

2
src/utils/payment.ts
View File

@@ -166,7 +166,7 @@ export function buildSingleGoodsOrder(
options?: {
comments?: string;
deliveryType?: number;
couponId?: number;
couponId?: any;
selfTakeMerchantId?: number;
skuId?: number;
specInfo?: string;