清除数据

This commit is contained in:
2026-05-06 23:30:54 +08:00
parent 17a5734d67
commit d16fc36264
149 changed files with 6691 additions and 5575 deletions

View File

@@ -4,7 +4,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## 项目概述 ## 项目概述
FlashSaleSystem 是一个基于 Spring Boot 2.7.6 和 Redis 集群构建的社区生鲜团购系统。系统采用分布式架构设计,通过 Redis 集群实现高并发处理,使用 Lua 脚本保证原子性操作,采用分布式锁防止超卖。 CommunityFreshGroupBuySystem 是一个基于 Spring Boot 2.7.6 和 Redis 集群构建的社区生鲜团购系统。系统采用分布式架构设计,通过
Redis 集群实现高并发处理,使用 Lua 脚本保证原子性操作,采用分布式锁防止超卖。
## 核心架构 ## 核心架构
@@ -54,8 +55,8 @@ mvn spring-boot:run -Dspring.profiles.active=dev # 开发环境
mvn spring-boot:run -Dspring.profiles.active=cluster # 集群环境 mvn spring-boot:run -Dspring.profiles.active=cluster # 集群环境
# 运行JAR包 # 运行JAR包
java -jar target/FlashSaleSystem-0.0.1-SNAPSHOT.jar java -jar target/CommunityFreshGroupBuySystem-0.0.1-SNAPSHOT.jar
java -jar target/FlashSaleSystem-0.0.1-SNAPSHOT.jar --spring.profiles.active=cluster java -jar target/CommunityFreshGroupBuySystem-0.0.1-SNAPSHOT.jar --spring.profiles.active=cluster
``` ```
### 数据库初始化 ### 数据库初始化
@@ -84,13 +85,14 @@ mysql -u root -p flash_sale_db < src/main/resources/sql/test-data.sql
- **String**: 分布式锁、会话存储、库存计数 - **String**: 分布式锁、会话存储、库存计数
- **Hash**: 用户信息、商品信息、购物车数据 - **Hash**: 用户信息、商品信息、购物车数据
- **List**: 订单队列、消息队列 - **List**: 订单队列、消息队列
- **Set**: 秒杀成功用户集合 - **Set**: 限时活动成功用户集合
- **ZSet**: 商品排行榜、热门活动 - **ZSet**: 商品排行榜、热门活动
### Key前缀规范 ### Key前缀规范
- `flashsale:` - 秒杀活动数据
- `flashsale:` - 限时活动数据
- `flashsale_stock:` - 实时库存信息 - `flashsale_stock:` - 实时库存信息
- `flashsale_lock:` - 秒杀分布式锁 - `flashsale_lock:` - 限时活动分布式锁
- `flashsale_success:` - 成功用户集合 - `flashsale_success:` - 成功用户集合
- `user:` - 用户信息缓存 - `user:` - 用户信息缓存
- `product:` - 商品信息缓存 - `product:` - 商品信息缓存
@@ -106,16 +108,17 @@ mysql -u root -p flash_sale_db < src/main/resources/sql/test-data.sql
## 核心业务流程 ## 核心业务流程
### 秒杀流程 ### 限时活动流程
1. **库存预热**: 活动前30分钟通过 `FlashSaleService.preloadStock()` 预加载库存到Redis 1. **库存预热**: 活动前30分钟通过 `FlashSaleService.preloadStock()` 预加载库存到Redis
2. **限流检查**: `RateLimitService.checkFlashSaleRateLimit()` 检查用户请求频率10次/分钟) 2. **限流检查**: `RateLimitService.checkFlashSaleRateLimit()` 检查用户请求频率10次/分钟)
3. **分布式锁**: `RedissonLockService.tryLock()` 获取分布式锁,防止并发超卖 3. **分布式锁**: `RedissonLockService.tryLock()` 获取分布式锁,防止并发超卖
4. **库存扣减**: 执行 `flashsale.lua` 脚本原子性扣减库存 4. **库存扣减**: 执行 `flashsale.lua` 脚本原子性扣减库存
5. **订单创建**: 数据库创建订单Redis记录成功用户 5. **订单创建**: 数据库创建订单Redis记录成功用户
6. **消息发布**: 通过Pub/Sub发布秒杀结果通知 6. **消息发布**: 通过Pub/Sub发布限时活动结果通知
### 关键服务类 ### 关键服务类
- **FlashSaleService**: 秒杀核心逻辑包含库存预热、分布式锁、Lua脚本执行
- **FlashSaleService**: 限时活动核心逻辑包含库存预热、分布式锁、Lua脚本执行
- **RedisService**: Redis基础操作封装支持各种数据类型和TTL设置 - **RedisService**: Redis基础操作封装支持各种数据类型和TTL设置
- **RedissonLockService**: Redisson分布式锁实现支持自动续期 - **RedissonLockService**: Redisson分布式锁实现支持自动续期
- **RateLimitService**: 基于Redis的滑动窗口限流 - **RateLimitService**: 基于Redis的滑动窗口限流
@@ -135,7 +138,7 @@ mysql -u root -p flash_sale_db < src/main/resources/sql/test-data.sql
spring.redis.host: localhost # 单节点配置 spring.redis.host: localhost # 单节点配置
spring.redis.cluster.nodes: ... # 集群配置(取消注释启用) spring.redis.cluster.nodes: ... # 集群配置(取消注释启用)
# 秒杀业务配置 # 限时活动业务配置
flashsale.seckill.rate-limit.max-requests-per-minute: 10 # 限流 flashsale.seckill.rate-limit.max-requests-per-minute: 10 # 限流
flashsale.seckill.max-quantity-per-user: 1 # 每人限购 flashsale.seckill.max-quantity-per-user: 1 # 每人限购
flashsale.seckill.stock-preload.advance-minutes: 30 # 预热时间 flashsale.seckill.stock-preload.advance-minutes: 30 # 预热时间
@@ -143,7 +146,7 @@ flashsale.seckill.stock-preload.advance-minutes: 30 # 预热时间
# 缓存过期时间 # 缓存过期时间
flashsale.cache.user-expire-minutes: 30 # 用户信息 flashsale.cache.user-expire-minutes: 30 # 用户信息
flashsale.cache.product-expire-minutes: 60 # 商品信息 flashsale.cache.product-expire-minutes: 60 # 商品信息
flashsale.cache.flashsale-expire-minutes: 10 # 秒杀活动 flashsale.cache.flashsale-expire-minutes: 10 # 限时活动
``` ```
## 性能优化策略 ## 性能优化策略
@@ -163,7 +166,8 @@ flashsale.cache.flashsale-expire-minutes: 10 # 秒杀活动
- **Prometheus监控**: http://localhost:8080/actuator/prometheus - **Prometheus监控**: http://localhost:8080/actuator/prometheus
### 日志配置 ### 日志配置
- **日志文件**: logs/flash-sale-system.log
- **日志文件**: logs/community-fresh-group-buy-system.log
- **日志级别**: DEBUG (com.org.flashsalesystem, Redis, SQL) - **日志级别**: DEBUG (com.org.flashsalesystem, Redis, SQL)
## 测试策略 ## 测试策略
@@ -175,7 +179,7 @@ flashsale.cache.flashsale-expire-minutes: 10 # 秒杀活动
### 性能测试 ### 性能测试
- 推荐工具: JMeter, Gatling - 推荐工具: JMeter, Gatling
- 测试场景: 高并发秒杀、库存扣减准确性、分布式锁效果 - 测试场景: 高并发限时活动、库存扣减准确性、分布式锁效果
## 安全考虑 ## 安全考虑

View File

@@ -1,14 +1,11 @@
# 社区生鲜团购系统 (FlashSaleSystem) # 社区生鲜团购系统 (CommunityFreshGroupBuySystem)
退货
评价
基于 Spring Boot + Redis 构建的社区生鲜团购系统 基于 Spring Boot + Redis 构建的社区生鲜团购系统
## 📖 项目概述 ## 📖 项目概述
本项目是一个完整的社区生鲜团购系统,采用分布式架构设计,通过 Redis 本项目是一个完整的社区生鲜团购系统,采用分布式架构设计,通过 Redis
集群实现高并发处理能力。系统支持用户管理、商品管理、购物车功能和秒杀活动,具备防超卖、限流控制、分布式锁等核心技术特性。 集群实现高并发处理能力。系统支持用户管理、商品管理、购物车、拼团活动和订单管理,具备防超卖、限流控制、分布式锁等核心技术特性。
**项目完成度**: 90% **项目完成度**: 90%
@@ -34,9 +31,9 @@
## 🏗️ 项目结构 ## 🏗️ 项目结构
``` ```
FlashSaleSystem/ CommunityFreshGroupBuySystem/
├── src/main/java/com/org/flashsalesystem/ ├── src/main/java/com/org/flashsalesystem/
│ ├── FlashSaleSystemApplication.java # 启动类 │ ├── CommunityFreshGroupBuySystemApplication.java # 启动类
│ ├── config/ # 配置类 │ ├── config/ # 配置类
│ │ ├── RedissonConfig.java # Redis集群配置 │ │ ├── RedissonConfig.java # Redis集群配置
│ │ ├── SwaggerConfig.java # API文档配置 │ │ ├── SwaggerConfig.java # API文档配置
@@ -44,7 +41,7 @@ FlashSaleSystem/
│ ├── controller/ # 控制器层 │ ├── controller/ # 控制器层
│ │ ├── AdminController.java # 管理员控制器 │ │ ├── AdminController.java # 管理员控制器
│ │ ├── CartController.java # 购物车控制器 │ │ ├── CartController.java # 购物车控制器
│ │ ├── FlashSaleController.java # 秒杀控制器 │ │ ├── FlashSaleController.java # 限时活动控制器
│ │ ├── OrderController.java # 订单控制器 │ │ ├── OrderController.java # 订单控制器
│ │ ├── PageController.java # 页面控制器 │ │ ├── PageController.java # 页面控制器
│ │ ├── ProductController.java # 商品控制器 │ │ ├── ProductController.java # 商品控制器
@@ -52,17 +49,17 @@ FlashSaleSystem/
│ │ └── UserController.java # 用户控制器 │ │ └── UserController.java # 用户控制器
│ ├── dto/ # 数据传输对象 │ ├── dto/ # 数据传输对象
│ │ ├── CartDTO.java # 购物车DTO │ │ ├── CartDTO.java # 购物车DTO
│ │ ├── FlashSaleDTO.java # 秒杀DTO │ │ ├── FlashSaleDTO.java # 限时活动DTO
│ │ ├── OrderDTO.java # 订单DTO │ │ ├── OrderDTO.java # 订单DTO
│ │ ├── ProductDTO.java # 商品DTO │ │ ├── ProductDTO.java # 商品DTO
│ │ └── UserDTO.java # 用户DTO │ │ └── UserDTO.java # 用户DTO
│ ├── entity/ # 实体类 │ ├── entity/ # 实体类
│ │ ├── FlashSale.java # 秒杀实体 │ │ ├── FlashSale.java # 限时活动实体
│ │ ├── Order.java # 订单实体 │ │ ├── Order.java # 订单实体
│ │ ├── Product.java # 商品实体 │ │ ├── Product.java # 商品实体
│ │ └── User.java # 用户实体 │ │ └── User.java # 用户实体
│ ├── repository/ # 数据访问层 │ ├── repository/ # 数据访问层
│ │ ├── FlashSaleRepository.java # 秒杀数据访问 │ │ ├── FlashSaleRepository.java # 限时活动数据访问
│ │ ├── OrderRepository.java # 订单数据访问 │ │ ├── OrderRepository.java # 订单数据访问
│ │ ├── ProductRepository.java # 商品数据访问 │ │ ├── ProductRepository.java # 商品数据访问
│ │ └── UserRepository.java # 用户数据访问 │ │ └── UserRepository.java # 用户数据访问
@@ -70,7 +67,7 @@ FlashSaleSystem/
│ │ ├── AdminService.java # 管理员服务 │ │ ├── AdminService.java # 管理员服务
│ │ ├── CartService.java # 购物车服务 │ │ ├── CartService.java # 购物车服务
│ │ ├── DistributedLockService.java # 分布式锁服务 │ │ ├── DistributedLockService.java # 分布式锁服务
│ │ ├── FlashSaleService.java # 秒杀服务 │ │ ├── FlashSaleService.java # 限时活动服务
│ │ ├── MessageListenerService.java # 消息监听服务 │ │ ├── MessageListenerService.java # 消息监听服务
│ │ ├── OrderService.java # 订单服务 │ │ ├── OrderService.java # 订单服务
│ │ ├── ProductService.java # 商品服务 │ │ ├── ProductService.java # 商品服务
@@ -88,7 +85,7 @@ FlashSaleSystem/
│ ├── lua/ # Lua脚本 │ ├── lua/ # Lua脚本
│ │ ├── cart_operation.lua # 购物车操作脚本 │ │ ├── cart_operation.lua # 购物车操作脚本
│ │ ├── distributed_lock.lua # 分布式锁脚本 │ │ ├── distributed_lock.lua # 分布式锁脚本
│ │ ├── flashsale.lua # 秒杀脚本 │ │ ├── flashsale.lua # 活动脚本
│ │ ├── rate_limit.lua # 限流脚本 │ │ ├── rate_limit.lua # 限流脚本
│ │ └── unlock.lua # 解锁脚本 │ │ └── unlock.lua # 解锁脚本
│ ├── sql/ # SQL脚本 │ ├── sql/ # SQL脚本
@@ -128,7 +125,7 @@ FlashSaleSystem/
- 批量操作支持 - 批量操作支持
- 持久化策略 - 持久化策略
### 4. 秒杀核心模块 ### 4. 限时活动核心模块
- 分布式锁防超卖 - 分布式锁防超卖
- Lua 脚本原子操作 - Lua 脚本原子操作
@@ -154,7 +151,7 @@ FlashSaleSystem/
### Lua 脚本实现 ### Lua 脚本实现
- **秒杀脚本**: 原子性库存扣减,防止超卖 - **活动脚本**: 原子性库存扣减,防止超卖
- **分布式锁脚本**: 原子性设置锁和过期时间 - **分布式锁脚本**: 原子性设置锁和过期时间
- **限流脚本**: 滑动窗口精确限流 - **限流脚本**: 滑动窗口精确限流
- **购物车脚本**: 原子性购物车操作 - **购物车脚本**: 原子性购物车操作
@@ -164,7 +161,7 @@ FlashSaleSystem/
- 订单状态变更通知 - 订单状态变更通知
- 库存变化通知 - 库存变化通知
- 秒杀结果通知 - 限时活动结果通知
- 用户行为监听 - 用户行为监听
### 性能优化技术 ### 性能优化技术
@@ -174,19 +171,19 @@ FlashSaleSystem/
- 数据预热机制 - 数据预热机制
- 连接池优化 - 连接池优化
## 🚀 秒杀流程 ## 🚀 限时活动流程
1. **库存预热**: 将商品库存加载到 Redis 1. **库存预热**: 将商品库存加载到 Redis
2. **用户请求**: 前端发起秒杀请求 2. **用户请求**: 前端发起限时活动请求
3. **限流检查**: 检查用户请求频率 3. **限流检查**: 检查用户请求频率
4. **分布式锁**: 获取商品锁防止并发 4. **分布式锁**: 获取商品锁防止并发
5. **库存扣减**: Lua 脚本原子性扣减 5. **库存扣减**: Lua 脚本原子性扣减
6. **订单创建**: 创建秒杀订单 6. **订单创建**: 创建限时订单
7. **消息通知**: 发布秒杀结果消息 7. **消息通知**: 发布限时活动结果消息
## 🛡️ 防超卖机制 ## 🛡️ 防超卖机制
- **分布式锁**: 串行化处理秒杀请求 - **分布式锁**: 串行化处理限时活动请求
- **Lua 脚本**: 原子性检查和扣减库存 - **Lua 脚本**: 原子性检查和扣减库存
- **重复检查**: 防止用户重复参与 - **重复检查**: 防止用户重复参与
- **数据一致性**: Redis 和数据库双重保障 - **数据一致性**: Redis 和数据库双重保障
@@ -221,7 +218,7 @@ FlashSaleSystem/
```bash ```bash
git clone <repository-url> git clone <repository-url>
cd FlashSaleSystem cd CommunityFreshGroupBuySystem
``` ```
2. **配置数据库** 2. **配置数据库**
@@ -275,7 +272,7 @@ mvn test -Dtest=RedisServiceTest
### 压力测试 ### 压力测试
- 使用 JMeter 或其他工具进行压力测试 - 使用 JMeter 或其他工具进行压力测试
- 测试并发秒杀场景 - 测试并发限时活动场景
- 验证系统性能指标 - 验证系统性能指标
## 📈 项目亮点 ## 📈 项目亮点

View File

@@ -1,4 +1,4 @@
# 社区生鲜团购系统前端 (Flash Sale Frontend) # 社区生鲜团购系统前端 (Group Buy Frontend)
基于 Vue 3 + Vite + TypeScript 构建的现代化社区生鲜团购系统前端应用。 基于 Vue 3 + Vite + TypeScript 构建的现代化社区生鲜团购系统前端应用。
@@ -18,19 +18,22 @@
## ✨ 功能特性 ## ✨ 功能特性
### 用户端功能 ### 用户端功能
- 🏠 **首页展示**: 轮播图、秒杀活动、热门商品推荐
- 🏠 **首页展示**: 轮播图、限时活动、热门商品推荐
- 🔐 **用户认证**: 登录、注册、个人中心管理 - 🔐 **用户认证**: 登录、注册、个人中心管理
- ⚡ **秒杀抢购**: 实时倒计时、库存显示、防重复提交 - ⚡ **限时活动抢购**: 实时倒计时、库存显示、防重复提交
- 🛍️ **商品浏览**: 分类筛选、价格排序、关键词搜索 - 🛍️ **商品浏览**: 分类筛选、价格排序、关键词搜索
- 🛒 **购物车**: 商品管理、批量操作、结算功能 - 🛒 **购物车**: 商品管理、批量操作、结算功能
- 📦 **订单管理**: 订单列表、详情查看、状态跟踪 - 📦 **订单管理**: 订单列表、详情查看、状态跟踪
### 管理后台 ### 管理后台
- 📊 **数据仪表盘**: 实时统计、图表展示 - 📊 **数据仪表盘**: 实时统计、图表展示
- 📝 **内容管理**: 商品、秒杀、订单、用户管理 - 📝 **内容管理**: 商品、限时活动、订单、用户管理
- 📈 **数据分析**: 销售趋势、用户行为分析 - 📈 **数据分析**: 销售趋势、用户行为分析
### 高级特性 ### 高级特性
- 🔔 **实时通知**: WebSocket消息推送、消息中心 - 🔔 **实时通知**: WebSocket消息推送、消息中心
- 🔍 **智能搜索**: 搜索历史、热门推荐、实时建议 - 🔍 **智能搜索**: 搜索历史、热门推荐、实时建议
- 📸 **图片上传**: 拖拽上传、预览下载、进度显示 - 📸 **图片上传**: 拖拽上传、预览下载、进度显示
@@ -40,7 +43,7 @@
## 📁 项目结构 ## 📁 项目结构
``` ```
flash-sale-frontend/ community-fresh-group-buy-frontend/
├── src/ ├── src/
│ ├── api/ # API接口封装 │ ├── api/ # API接口封装
│ ├── assets/ # 静态资源 │ ├── assets/ # 静态资源
@@ -65,10 +68,12 @@ flash-sale-frontend/
## 🔧 安装使用 ## 🔧 安装使用
### 环境要求 ### 环境要求
- Node.js >= 16.0 - Node.js >= 16.0
- npm >= 8.0 或 yarn >= 1.22 - npm >= 8.0 或 yarn >= 1.22
### 安装依赖 ### 安装依赖
```bash ```bash
npm install npm install
# 或 # 或
@@ -76,14 +81,17 @@ yarn install
``` ```
### 开发环境 ### 开发环境
```bash ```bash
npm run dev npm run dev
# 或 # 或
yarn dev yarn dev
``` ```
访问 http://localhost:3000 访问 http://localhost:3000
### 生产构建 ### 生产构建
```bash ```bash
npm run build npm run build
# 或 # 或
@@ -91,6 +99,7 @@ yarn build
``` ```
### 预览构建结果 ### 预览构建结果
```bash ```bash
npm run preview npm run preview
# 或 # 或
@@ -105,6 +114,7 @@ yarn preview
## 📝 配置说明 ## 📝 配置说明
### 环境变量 ### 环境变量
修改 `.env.development``.env.production` 文件: 修改 `.env.development``.env.production` 文件:
```env ```env
@@ -119,6 +129,7 @@ VITE_UPLOAD_URL=http://localhost:8080/upload
``` ```
### 代理配置 ### 代理配置
`vite.config.ts` 中配置开发环境代理: `vite.config.ts` 中配置开发环境代理:
```typescript ```typescript
@@ -135,6 +146,7 @@ server: {
## 🚢 部署 ## 🚢 部署
### Nginx配置示例 ### Nginx配置示例
```nginx ```nginx
server { server {
listen 80; listen 80;
@@ -154,6 +166,7 @@ server {
``` ```
### Docker部署 ### Docker部署
```dockerfile ```dockerfile
FROM nginx:alpine FROM nginx:alpine
COPY dist /usr/share/nginx/html COPY dist /usr/share/nginx/html
@@ -181,9 +194,9 @@ MIT License
## 📧 联系我们 ## 📧 联系我们
- 邮箱: contact@flashsale.com - 邮箱: contact@community-fresh-groupbuy.example
- 官网: https://flashsale.com - 官网: https://community-fresh-groupbuy.example
--- ---
Made with ❤️ by Flash Sale Team Made with ❤️ by Group Buy Team

View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/favicon.ico" rel="icon">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>社区生鲜团购系统</title>
<meta content="社区生鲜团购系统,提供商品浏览、拼团下单、订单管理和后台运营能力" name="description">
<meta content="拼团,团购,社区生鲜,community fresh group buying" name="keywords">
</head>
<body>
<div id="app"></div>
<script src="/src/main.ts" type="module"></script>
</body>
</html>

View File

@@ -1,11 +1,11 @@
{ {
"name": "flash-sale-frontend", "name": "community-fresh-group-buy-frontend",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "flash-sale-frontend", "name": "community-fresh-group-buy-frontend",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",

View File

@@ -1,5 +1,5 @@
{ {
"name": "flash-sale-frontend", "name": "community-fresh-group-buy-frontend",
"private": true, "private": true,
"version": "1.0.0", "version": "1.0.0",
"type": "module", "type": "module",

View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@@ -4,7 +4,7 @@
</el-config-provider> </el-config-provider>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {onMounted} from 'vue' import {onMounted} from 'vue'
import {ElConfigProvider} from 'element-plus' import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

View File

@@ -0,0 +1,34 @@
import request from './request'
import type {FlashSale, FlashSaleParams} from '@/types/flashsale'
export const flashSaleApi = {
// 获取限时活动列表
getList(params?: FlashSaleParams) {
return request.get<any, { list: FlashSale[], total: number }>('/api/flashsales', {params})
},
// 获取限时活动详情
getDetail(id: number) {
return request.get<any, FlashSale>(`/api/flashsales/${id}`)
},
// 参与限时
participate(flashSaleId: number, quantity: number = 1) {
return request.post('/api/flashsales/participate', {
flashSaleId,
quantity
})
},
// 获取正在进行的限时活动
getActive() {
return request.get<any, FlashSale[]>('/api/flashsales/active')
},
// 获取即将开始的限时活动
getUpcoming() {
return request.get<any, FlashSale[]>('/api/flashsales/upcoming')
}
}
export default flashSaleApi

View File

@@ -0,0 +1,52 @@
import {request} from '../request'
import type {ApiResponse} from '@/types/api'
export interface AddressItem {
id: number
userId?: number
name: string
phone: string
province: string
city: string
district: string
address: string
isDefault: boolean
createdAt?: string
updatedAt?: string
}
export interface SaveAddressParams {
name: string
phone: string
province: string
city: string
district: string
address: string
isDefault?: boolean
}
export const addressApi = {
getList(): Promise<ApiResponse<AddressItem[]>> {
return request.get('/api/address')
},
getDefault(): Promise<ApiResponse<AddressItem>> {
return request.get('/api/address/default')
},
create(data: SaveAddressParams): Promise<ApiResponse<AddressItem>> {
return request.post('/api/address', data)
},
update(id: number, data: SaveAddressParams): Promise<ApiResponse<AddressItem>> {
return request.put(`/api/address/${id}`, data)
},
setDefault(id: number): Promise<ApiResponse<AddressItem>> {
return request.post(`/api/address/${id}/default`)
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/address/${id}`)
},
}

View File

@@ -0,0 +1,220 @@
import {request} from '../request'
import type {ApiResponse} from '@/types/api'
import type {
AdminDashboardStats,
AdminFavoriteRow,
AdminFavoriteStats,
AdminFlashSaleStats,
AdminHotProductRow,
AdminOrderRow,
AdminOrderStats,
AdminProductRow,
AdminProductStats,
AdminRecentOrderRow,
AdminReviewRow,
AdminReviewStats,
AdminUserRow,
AdminUserStats,
MonitorSystemStatus,
RedisNodeStatus,
} from '@/types/admin'
import {
normalizeAdminHotProduct,
normalizeAdminOrder,
normalizeAdminProduct,
normalizeAdminRecentOrder,
normalizeAdminUser,
} from '@/utils/normalizers'
export const adminApi = {
getDashboardStats(): Promise<ApiResponse<AdminDashboardStats>> {
return request.get('/api/admin/dashboard/stats')
},
getUserStats(): Promise<ApiResponse<AdminUserStats>> {
return request.get('/api/admin/users/stats')
},
getOrderStats(): Promise<ApiResponse<AdminOrderStats>> {
return request.get('/api/admin/orders/stats')
},
getProductStats(): Promise<ApiResponse<AdminProductStats>> {
return request.get('/api/admin/products/stats')
},
getFlashSaleStats(): Promise<ApiResponse<AdminFlashSaleStats>> {
return request.get('/api/admin/flashsales/stats')
},
getRecentOrders(limit = 10): Promise<ApiResponse<AdminRecentOrderRow[]>> {
return request.get<ApiResponse<any[]>>('/api/admin/orders/recent', {limit}).then((res) => ({
...res,
data: Array.isArray(res.data) ? res.data.map((item) => normalizeAdminRecentOrder(item)) : [],
}))
},
getHotProducts(limit = 5): Promise<ApiResponse<AdminHotProductRow[]>> {
return request.get<ApiResponse<any[]>>('/api/admin/products/hot', {limit}).then((res) => ({
...res,
data: Array.isArray(res.data) ? res.data.map((item) => normalizeAdminHotProduct(item)) : [],
}))
},
getUsers(params: { page: number; size: number; keyword?: string; status?: number | '' }): Promise<ApiResponse<{
users: AdminUserRow[];
total: number;
totalPages: number;
currentPage: number;
size: number
}>> {
const query = {
page: params.page,
size: params.size,
keyword: params.keyword,
status: params.status === '' ? undefined : params.status
}
return request.get<ApiResponse<Record<string, any>>>('/api/admin/users', query).then((res) => ({
...res,
data: {
users: Array.isArray(res.data.users) ? res.data.users.map((item) => normalizeAdminUser(item)) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
deleteUser(id: number): Promise<ApiResponse> {
return request.delete(`/api/admin/users/${id}`)
},
getOrders(params: { page: number; size: number; keyword?: string; status?: string | '' }): Promise<ApiResponse<{
orders: AdminOrderRow[];
total: number;
totalPages: number;
currentPage: number;
size: number
}>> {
const query = {
page: params.page,
size: params.size,
keyword: params.keyword,
status: params.status === '' ? undefined : params.status
}
return request.get<ApiResponse<Record<string, any>>>('/api/admin/orders', query).then((res) => ({
...res,
data: {
orders: Array.isArray(res.data.orders) ? res.data.orders.map((item) => normalizeAdminOrder(item)) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
getProducts(params: {
page: number;
size: number;
keyword?: string;
category?: string;
status?: number | ''
}): Promise<ApiResponse<{
products: AdminProductRow[];
total: number;
totalPages: number;
currentPage: number;
size: number
}>> {
const query = {
page: params.page,
size: params.size,
keyword: params.keyword,
category: params.category,
status: params.status === '' ? undefined : params.status
}
return request.get<ApiResponse<Record<string, any>>>('/api/admin/products', query).then((res) => ({
...res,
data: {
products: Array.isArray(res.data.products) ? res.data.products.map((item) => normalizeAdminProduct(item)) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
getSystemStatus(): Promise<ApiResponse<MonitorSystemStatus>> {
return request.get('/api/admin/monitor/system')
},
getRedisStatus(): Promise<ApiResponse<RedisNodeStatus[]>> {
return request.get('/api/admin/monitor/redis')
},
getProduct(id: number): Promise<ApiResponse<AdminProductRow>> {
return request.get<ApiResponse<any>>(`/api/admin/products/${id}`).then((res) => ({
...res,
data: normalizeAdminProduct(res.data)
}))
},
createProduct(data: Record<string, unknown>): Promise<ApiResponse<AdminProductRow>> {
return request.post<ApiResponse<any>>('/api/admin/products', data).then((res) => ({
...res,
data: normalizeAdminProduct(res.data)
}))
},
updateProduct(id: number, data: Record<string, unknown>): Promise<ApiResponse<AdminProductRow>> {
return request.put<ApiResponse<any>>(`/api/admin/products/${id}`, data).then((res) => ({
...res,
data: res.data ? normalizeAdminProduct(res.data) : undefined,
}))
},
deleteProduct(id: number): Promise<ApiResponse> {
return request.delete(`/api/admin/products/${id}`)
},
getReviewStats(): Promise<ApiResponse<AdminReviewStats>> {
return request.get('/api/admin/reviews/stats')
},
getFavoriteStats(): Promise<ApiResponse<AdminFavoriteStats>> {
return request.get('/api/admin/favorites/stats')
},
getReviews(params: { page: number; size: number; keyword?: string }): Promise<ApiResponse<{
reviews: AdminReviewRow[];
total: number;
totalPages: number;
currentPage: number;
size: number
}>> {
return request.get<ApiResponse<Record<string, any>>>('/api/admin/reviews', params).then((res) => ({
...res,
data: {
reviews: Array.isArray(res.data.reviews) ? (res.data.reviews as AdminReviewRow[]) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
updateReview(id: number, data: { status?: number; adminReply?: string }): Promise<ApiResponse> {
return request.put(`/api/admin/reviews/${id}`, data)
},
deleteReview(id: number): Promise<ApiResponse> {
return request.delete(`/api/admin/reviews/${id}`)
},
getFavorites(params: { page: number; size: number; keyword?: string }): Promise<ApiResponse<{
favorites: AdminFavoriteRow[];
total: number;
totalPages: number;
currentPage: number;
size: number
}>> {
return request.get<ApiResponse<Record<string, any>>>('/api/admin/favorites', params).then((res) => ({
...res,
data: {
favorites: Array.isArray(res.data.favorites) ? (res.data.favorites as AdminFavoriteRow[]) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
deleteFavorite(id: number): Promise<ApiResponse> {
return request.delete(`/api/admin/favorites/${id}`)
},
migrateLegacyOrderItems(): Promise<ApiResponse<{ totalOrders: number; migrated: number; skipped: number }>> {
return request.post('/api/admin/orders/migrate-items')
},
}

View File

@@ -0,0 +1,55 @@
import {request} from '../request'
import type {ApiResponse, CartItem} from '@/types/api'
import {normalizeCartItems, normalizeOrder} from '@/utils/normalizers'
export const cartApi = {
// 获取购物车
getCart(): Promise<ApiResponse<CartItem[]>> {
return request.get<ApiResponse<any>>('/api/cart').then((res) => ({
...res,
data: normalizeCartItems(res.data),
}))
},
// 添加到购物车
addToCart(data: {
productId: number;
quantity: number
}): Promise<ApiResponse> {
return request.post('/api/cart/add', data)
},
// 更新数量
updateQuantity(itemId: string, quantity: number): Promise<ApiResponse> {
return request.put('/api/cart/update', {productId: Number(itemId), quantity})
},
// 删除商品
removeItem(itemId: string): Promise<ApiResponse> {
return request.delete('/api/cart/remove', {productId: Number(itemId)})
},
// 批量删除
batchRemove(ids: string[]): Promise<ApiResponse> {
return request.delete('/api/cart/batch-remove', {productIds: ids.map(Number)})
},
// 清空购物车
clearCart(): Promise<ApiResponse> {
return request.delete('/api/cart/clear')
},
// 获取购物车数量
getCount(): Promise<ApiResponse<{ count: number }>> {
return request.get('/api/cart/count')
},
checkout(ids?: string[]): Promise<ApiResponse<any>> {
return request.post<ApiResponse<any>>('/api/cart/checkout', {
productIds: ids?.map(Number),
}).then((res) => ({
...res,
data: normalizeOrder(res.data),
}))
},
}

View File

@@ -0,0 +1,31 @@
import {request} from '../request'
import type {ApiResponse} from '@/types/api'
export interface FavoriteItem {
id: number
userId: number
productId: number
productName: string
productImageUrl: string
productPrice: number
productCategory: string
createdAt: string
}
export const favoriteApi = {
getList(): Promise<ApiResponse<FavoriteItem[]>> {
return request.get('/api/favorite')
},
getCount(): Promise<ApiResponse<{ count: number }>> {
return request.get('/api/favorite/count')
},
check(productId: number): Promise<ApiResponse<{ favorited: boolean }>> {
return request.get('/api/favorite/check', {productId})
},
toggle(productId: number): Promise<ApiResponse<{ favorited: boolean }>> {
return request.post('/api/favorite/toggle', {productId})
},
}

View File

@@ -0,0 +1,164 @@
import {request} from '../request'
import type {ApiResponse, FlashSale, PageParams, PageResponse} from '@/types/api'
import {mapOrderStatus, normalizeFlashSale, normalizePage} from '@/utils/normalizers'
const flashSaleStatusToCode = (status?: string) => {
if (status === 'UPCOMING') return 1
if (status === 'ACTIVE') return 2
if (status === 'ENDED') return 3
if (status === 'PAUSED') return 4
return undefined
}
const flashSaleSortField = (sort?: string) => {
if (sort === 'flashPrice') return 'flashPrice'
if (sort === 'endTime') return 'endTime'
return 'startTime'
}
export const flashsaleApi = {
// 获取限时活动统计信息(即将开始/正在进行/我的参与/抢购成功)
getStatistics(): Promise<ApiResponse<{ upcoming: number; active: number; participated: number; success: number }>> {
return request.get('/api/flashsale/statistics')
},
// 获取限时活动列表
getList(params?: PageParams & { status?: string }): Promise<ApiResponse<PageResponse<FlashSale>>> {
return request.post<ApiResponse<Record<string, any>>>('/api/flashsale/list', {
status: flashSaleStatusToCode(params?.status),
page: params?.page ?? 0,
size: params?.size ?? 10,
sortBy: flashSaleSortField(params?.sort),
sortDirection: params?.order || 'asc',
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeFlashSale),
}))
},
// 获取正在进行的限时活动
getActive(limit?: number): Promise<ApiResponse<FlashSale[]>> {
return request.get<ApiResponse<any[]>>('/api/flashsale/active').then((res) => ({
...res,
data: (Array.isArray(res.data) ? res.data : [])
.map((item) => normalizeFlashSale(item))
.slice(0, limit ?? Number.MAX_SAFE_INTEGER),
}))
},
// 获取限时活动详情
getDetail(id: number): Promise<ApiResponse<FlashSale>> {
return request.get<ApiResponse<any>>(`/api/flashsale/${id}`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
// 参与限时
participate(data: {
flashSaleId: number;
quantity: number;
timestamp?: number;
}): Promise<ApiResponse<{ orderId: number }>> {
return request.post<ApiResponse<any>>('/api/flashsale/participate', data).then((res) => ({
...res,
data: {
orderId: Number(res.data?.orderId || res.data?.id || 0),
},
}))
},
// 获取用户参与记录
getUserRecords(): Promise<ApiResponse<any[]>> {
return request.post<ApiResponse<Record<string, any>>>('/api/order/my-orders', {
orderType: 2,
page: 0,
size: 100,
sortBy: 'createdAt',
sortDirection: 'desc',
}).then((res) => {
const content = Array.isArray(res.data?.content) ? res.data.content : []
return {
...res,
data: content.map((item: Record<string, any>) => ({
id: item.id,
success: mapOrderStatus(item.status) !== 'CANCELLED',
status: item.status,
})),
}
})
},
// 检查用户是否可以参与
checkEligibility(flashSaleId: number): Promise<ApiResponse<{
eligible: boolean;
reason?: string;
remainingQuota?: number;
}>> {
return this.getDetail(flashSaleId).then((res) => {
const eligible = res.data.status === 'ACTIVE' && res.data.remainingStock > 0
return {
code: 0,
success: true,
message: '检查成功',
data: {
eligible,
reason: eligible ? '' : '活动未开始、已结束或库存不足',
remainingQuota: res.data.limitPerUser,
},
}
})
},
create(data: {
productId: number
flashPrice: number
flashStock: number
startTime: string
endTime: string
}): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>('/api/flashsale/create', data).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
update(id: number, data: Record<string, unknown>): Promise<ApiResponse<FlashSale>> {
return request.put<ApiResponse<any>>(`/api/flashsale/${id}`, data).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/flashsale/${id}`)
},
publish(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/publish`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
pause(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/pause`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
resume(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/resume`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
end(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/end`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
}

View File

@@ -0,0 +1,115 @@
import {request} from '../request'
import type {
ApiResponse,
GroupBuying,
GroupBuyingGroup,
GroupBuyingStatistics,
PageParams,
PageResponse
} from '@/types/api'
import {normalizeGroupBuying, normalizeGroupBuyingGroup, normalizePage} from '@/utils/normalizers'
const groupBuyingStatusToCode = (status?: string) => {
if (status === 'DRAFT') return 0
if (status === 'UPCOMING') return 1
if (status === 'ACTIVE') return 2
if (status === 'ENDED') return 3
return undefined
}
export const groupbuyingApi = {
getStatistics(): Promise<ApiResponse<GroupBuyingStatistics>> {
return request.get('/api/groupbuying/statistics')
},
getList(params?: PageParams & { status?: string }): Promise<ApiResponse<PageResponse<GroupBuying>>> {
return request.get<ApiResponse<Record<string, any>>>('/api/groupbuying/list', {
status: groupBuyingStatusToCode(params?.status),
page: params?.page ?? 0,
size: params?.size ?? 10,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeGroupBuying),
}))
},
getDetail(id: number): Promise<ApiResponse<GroupBuying>> {
return request.get<ApiResponse<any>>(`/api/groupbuying/${id}`).then((res) => ({
...res,
data: normalizeGroupBuying(res.data),
}))
},
getGroups(id: number, params?: PageParams): Promise<ApiResponse<PageResponse<GroupBuyingGroup>>> {
return request.get<ApiResponse<Record<string, any>>>(`/api/groupbuying/${id}/groups`, {
page: params?.page ?? 0,
size: params?.size ?? 10,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeGroupBuyingGroup),
}))
},
joinGroup(data: { groupBuyingId: number; groupId?: number }): Promise<ApiResponse<{
success: boolean
message: string
groupId: number
groupNo: string
orderId: number
}>> {
return request.post('/api/groupbuying/join', data)
},
getGroupDetail(groupId: number): Promise<ApiResponse<GroupBuyingGroup>> {
return request.get<ApiResponse<any>>(`/api/groupbuying/group/${groupId}`).then((res) => ({
...res,
data: normalizeGroupBuyingGroup(res.data),
}))
},
cancelMembership(groupId: number): Promise<ApiResponse> {
return request.post(`/api/groupbuying/group/${groupId}/cancel`)
},
getMyGroups(params?: PageParams): Promise<ApiResponse<PageResponse<GroupBuyingGroup>>> {
return request.get<ApiResponse<Record<string, any>>>('/api/groupbuying/my-groups', {
page: params?.page ?? 0,
size: params?.size ?? 10,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeGroupBuyingGroup),
}))
},
// Admin
create(data: {
productId: number
groupPrice: number
requiredMembers: number
durationMinutes: number
totalStock: number
maxPerUser: number
startTime: string
endTime: string
}): Promise<ApiResponse<GroupBuying>> {
return request.post<ApiResponse<any>>('/api/groupbuying/admin/create', data).then((res) => ({
...res,
data: normalizeGroupBuying(res.data),
}))
},
update(id: number, data: Record<string, unknown>): Promise<ApiResponse<GroupBuying>> {
return request.put<ApiResponse<any>>(`/api/groupbuying/admin/${id}`, data).then((res) => ({
...res,
data: normalizeGroupBuying(res.data),
}))
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/groupbuying/admin/${id}`)
},
preloadAll(): Promise<ApiResponse> {
return request.post('/api/groupbuying/admin/preload-all')
},
}

View File

@@ -0,0 +1,45 @@
import {request} from '../request'
export interface NotificationItem {
id: number
userId: number
type: 'flashsale' | 'order' | 'system'
title: string
message: string
link?: string
read: boolean
createdAt: string
}
interface ApiRes<T = any> {
success: boolean
message?: string
data: T
}
export const notificationApi = {
/** 获取通知列表 */
getList(type?: string): Promise<ApiRes<NotificationItem[]>> {
return request.get('/api/notification/list', type ? {type} : undefined)
},
/** 获取未读数量 */
getUnreadCount(): Promise<ApiRes<number>> {
return request.get('/api/notification/unread-count')
},
/** 标记单条已读 */
markAsRead(id: number): Promise<ApiRes> {
return request.put(`/api/notification/${id}/read`)
},
/** 全部标记已读 */
markAllAsRead(): Promise<ApiRes> {
return request.put('/api/notification/read-all')
},
/** 清空所有通知 */
clearAll(): Promise<ApiRes> {
return request.delete('/api/notification/clear')
}
}

View File

@@ -0,0 +1,145 @@
import {request} from '../request'
import type {ApiResponse, Order, PageParams, PageResponse} from '@/types/api'
import {normalizeOrder} from '@/utils/normalizers'
const orderStatusToCode = (status?: string) => {
if (status === 'PENDING') return 1
if (status === 'PAID') return 2
if (status === 'SHIPPED') return 3
if (status === 'COMPLETED') return 4
if (status === 'CANCELLED') return 5
return undefined
}
const aggregateOrders = (rawOrders: Array<Record<string, any>>): Order[] => {
const groups = new Map<string, Array<Record<string, any>>>()
rawOrders.forEach((item) => {
const key = item.groupNo || item.orderNo || String(item.id)
if (!groups.has(key)) {
groups.set(key, [])
}
groups.get(key)!.push(item)
})
return Array.from(groups.values()).map((group) => {
const [anchor] = group
const normalizedAnchor = normalizeOrder(anchor)
const items = group.flatMap((item) => normalizeOrder(item).items)
const totalAmount = items.reduce((sum, item) => sum + item.subtotal, 0)
return {
...normalizedAnchor,
orderNo: anchor.groupNo || normalizedAnchor.orderNo,
totalAmount,
paymentAmount: totalAmount,
items,
}
})
}
export const orderApi = {
create(data: {
items: Array<{ productId: number; quantity: number }>
addressId?: number
remark?: string
}): Promise<ApiResponse<Order>> {
const [firstItem] = data.items
return request.post<ApiResponse<any>>('/api/order/create', {
productId: firstItem.productId,
quantity: firstItem.quantity,
remark: data.remark,
}).then((res) => ({
...res,
data: normalizeOrder(res.data),
}))
},
getList(params?: PageParams & { status?: string }): Promise<ApiResponse<PageResponse<Order>>> {
return request.post<ApiResponse<Record<string, any>>>('/api/order/my-orders', {
status: orderStatusToCode(params?.status),
page: params?.page ?? 0,
size: params?.size ?? 10,
sortBy: params?.sort || 'createdAt',
sortDirection: params?.order || 'desc',
}).then((res) => {
const rawContent = Array.isArray(res.data.content) ? res.data.content : []
const content = aggregateOrders(rawContent)
return {
...res,
data: {
content,
totalElements: Number(res.data.totalElements || content.length),
totalPages: Number(res.data.totalPages || 1),
size: res.data.size || content.length,
number: res.data.currentPage || 0,
first: true,
last: true,
},
}
})
},
getDetail(id: number): Promise<ApiResponse<Order>> {
return request.get<ApiResponse<any>>(`/api/order/${id}`).then(async (res) => {
if (res.data.groupNo) {
const groupRes = await request.get<ApiResponse<any[]>>(`/api/order/group/${res.data.groupNo}`)
return {
...res,
data: aggregateOrders(groupRes.data)[0],
}
}
return {
...res,
data: normalizeOrder(res.data),
}
})
},
cancel(id: number): Promise<ApiResponse> {
return request.post(`/api/order/${id}/cancel`)
},
pay(id: number, paymentMethod: string): Promise<ApiResponse> {
return request.post(`/api/order/${id}/pay`, {paymentMethod})
},
ship(id: number): Promise<ApiResponse> {
return request.post(`/api/order/${id}/ship`)
},
updateStatus(id: number, status: number, remark?: string): Promise<ApiResponse> {
return request.put('/api/order/status', {orderId: id, status, remark})
},
confirm(id: number): Promise<ApiResponse> {
return request.post(`/api/order/${id}/confirm`)
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/order/${id}`)
},
getStatistics(): Promise<ApiResponse<{
total: number;
pending: number;
paid: number;
shipped: number;
completed: number;
cancelled: number
}>> {
return request.get<ApiResponse<any>>('/api/order/statistics').then((res) => ({
...res,
data: {
total: Number(res.data.totalOrders || 0),
pending: Number(res.data.pendingPaymentOrders || 0),
paid: Number(res.data.paidOrders || 0),
shipped: Number(res.data.shippedOrders || 0),
completed: Number(res.data.completedOrders || 0),
cancelled: Number(res.data.cancelledOrders || 0),
},
}))
},
}

View File

@@ -0,0 +1,57 @@
import {request} from '../request'
import type {ApiResponse, Product, PageParams, PageResponse} from '@/types/api'
import {normalizePage, normalizeProduct} from '@/utils/normalizers'
export const productApi = {
// 获取商品列表
getList(params?: PageParams & {
keyword?: string;
category?: string;
minPrice?: number;
maxPrice?: number;
}): Promise<ApiResponse<PageResponse<Product>>> {
return request.get<ApiResponse<Record<string, any>>>('/api/product/list', {
page: params?.page ?? 0,
size: params?.size ?? 10,
keyword: params?.keyword,
category: params?.category,
minPrice: params?.minPrice,
maxPrice: params?.maxPrice,
sortBy: params?.sort || 'id',
sortDirection: params?.order || 'desc',
status: 1,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeProduct),
}))
},
// 获取热门商品
getHot(limit = 8): Promise<ApiResponse<Product[]>> {
return request.get<ApiResponse<any[]>>('/api/product/hot', {limit}).then((res) => ({
...res,
data: Array.isArray(res.data) ? res.data.map((item) => normalizeProduct(item)) : [],
}))
},
// 获取商品详情
getDetail(id: number): Promise<ApiResponse<Product>> {
return request.get<ApiResponse<any>>(`/api/product/${id}`).then((res) => ({
...res,
data: normalizeProduct(res.data),
}))
},
// 搜索商品
search(keyword: string): Promise<ApiResponse<Product[]>> {
return this.getList({keyword, page: 0, size: 50}).then((res) => ({
...res,
data: res.data.content,
}))
},
// 获取商品分类
getCategories(): Promise<ApiResponse<string[]>> {
return request.get('/api/product/categories')
},
}

View File

@@ -0,0 +1,61 @@
import {request} from '../request'
import type {ApiResponse, OrderReturn} from '@/types/api'
import {normalizeOrderReturn} from '@/utils/normalizers'
export const returnApi = {
create(data: {
orderId: number;
reason: string;
description?: string;
images?: string
}): Promise<ApiResponse<OrderReturn>> {
return request.post('/api/return/create', data).then(normalizeResponse)
},
getByOrderId(orderId: number): Promise<ApiResponse<OrderReturn | null>> {
return request.get(`/api/return/order/${orderId}`)
.then((res: any) => ({
...res,
data: res.data ? normalizeOrderReturn(res.data) : null,
}))
},
getMyReturns(params?: { status?: number; page?: number; size?: number }): Promise<ApiResponse<any>> {
return request.get('/api/return/my', params)
},
ship(id: number, returnTracking: string): Promise<ApiResponse<OrderReturn>> {
return request.post(`/api/return/${id}/ship`, {returnTracking}).then(normalizeResponse)
},
cancel(id: number): Promise<ApiResponse<OrderReturn>> {
return request.post(`/api/return/${id}/cancel`).then(normalizeResponse)
},
adminReview(id: number, data: {
status: number;
rejectReason?: string;
adminRemark?: string
}): Promise<ApiResponse<OrderReturn>> {
return request.post(`/api/return/${id}/review`, data).then(normalizeResponse)
},
adminComplete(id: number, remark?: string): Promise<ApiResponse<OrderReturn>> {
return request.post(`/api/return/${id}/complete`, {remark}).then(normalizeResponse)
},
getAll(params?: { status?: number; page?: number; size?: number }): Promise<ApiResponse<any>> {
return request.get('/api/return/all', params)
},
getStatistics(): Promise<ApiResponse<any>> {
return request.get('/api/return/statistics')
},
}
function normalizeResponse(res: any): any {
return {
...res,
data: res.data ? normalizeOrderReturn(res.data) : res.data,
}
}

View File

@@ -0,0 +1,55 @@
import {request} from '../request'
import type {ApiResponse} from '@/types/api'
export interface ReviewItem {
id: number
productId: number
userId: number
orderId: number
username: string
productName?: string
productImage?: string
rating: number
content: string
adminReply?: string
createdAt: string
updatedAt?: string
}
export interface ReviewSummary {
averageRating: number
totalReviews: number
reviews: ReviewItem[]
}
export interface ReviewCheckResult {
reviewed: boolean
review?: ReviewItem
}
export const reviewApi = {
getProductReviews(productId: number): Promise<ApiResponse<ReviewSummary>> {
return request.get(`/api/review/product/${productId}`)
},
create(data: {
orderId: number;
productId: number;
rating: number;
content: string
}): Promise<ApiResponse<ReviewItem>> {
return request.post('/api/review', data)
},
checkReview(orderId: number, productId: number): Promise<ApiResponse<ReviewCheckResult>> {
return request.get('/api/review/check', {orderId, productId})
},
getMyReviews(): Promise<ApiResponse<ReviewItem[]>> {
return request.get('/api/review/my')
},
getOrderReviews(orderId: number): Promise<ApiResponse<ReviewItem[]>> {
return request.get(`/api/review/order/${orderId}`)
},
}

View File

@@ -0,0 +1,69 @@
import {request} from '../request'
import type {ApiResponse, User, LoginParams, RegisterParams} from '@/types/api'
import {normalizeUser} from '@/utils/normalizers'
export const userApi = {
// 登录
login(params: LoginParams): Promise<ApiResponse<{ token: string; user: User }>> {
return request.post<ApiResponse<{ token: string; user: any }>>('/api/user/login', params).then((res) => ({
...res,
data: {
token: res.data.token,
user: normalizeUser(res.data.user),
},
}))
},
// 注册
register(params: RegisterParams): Promise<ApiResponse<User>> {
return request.post<ApiResponse<any>>('/api/user/register', {
...params,
confirmPassword: params.password,
}).then((res) => ({
...res,
data: normalizeUser(res.data),
}))
},
// 退出登录
logout(): Promise<ApiResponse> {
return request.post('/api/user/logout')
},
// 获取用户信息
getInfo(): Promise<ApiResponse<User>> {
return request.get<ApiResponse<any>>('/api/user/current').then((res) => ({
...res,
data: normalizeUser(res.data),
}))
},
// 更新用户信息
updateInfo(data: Partial<User>): Promise<ApiResponse<User>> {
return request.put<ApiResponse<any>>('/api/user/update', {
email: data.email,
phone: data.phone,
avatar: data.avatar,
}).then((res) => ({
...res,
data: normalizeUser(res.data),
}))
},
// 修改密码
changePassword(data: { oldPassword: string; newPassword: string; confirmPassword?: string }): Promise<ApiResponse> {
return request.post('/api/user/change-password', {
...data,
confirmPassword: data.confirmPassword || data.newPassword,
})
},
getProfileStats(): Promise<ApiResponse<{
totalOrders: number;
totalAmount: number;
flashSaleSuccess: number;
favoriteCount: number
}>> {
return request.get('/api/user/profile-stats')
},
}

View File

@@ -0,0 +1,154 @@
import axios, {
AxiosInstance,
AxiosRequestConfig,
AxiosResponse,
InternalAxiosRequestConfig,
} from 'axios'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useUserStore} from '@/stores/user'
import router from '@/router'
// 创建axios实例
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL || '',
withCredentials: true,
timeout: Number(import.meta.env.VITE_TIMEOUT) || 10000,
headers: {
'Content-Type': 'application/json',
},
})
// 请求拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
const userStore = useUserStore()
// 添加token
if (userStore.token) {
config.headers = config.headers || {}
config.headers['Authorization'] = `Bearer ${userStore.token}`
}
return config
},
(error) => {
console.error('请求错误:', error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
const res = response.data
if (typeof res?.success === 'boolean') {
if (!res.success) {
if (response.status === 401) {
ElMessage.error(res.message || '登录状态已失效')
} else {
ElMessage.error(res.message || '请求失败')
}
return Promise.reject(new Error(res.message || '请求失败'))
}
return res
}
// 自定义状态码处理
if (res.code !== 200 && res.code !== 0) {
// 业务错误
if (res.code === 401) {
// 未登录或token失效
ElMessageBox.confirm('登录已过期,请重新登录', '提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const userStore = useUserStore()
userStore.logout()
router.push('/login')
})
} else if (res.code === 403) {
// 无权限
ElMessage.error('无权限访问')
} else {
// 其他业务错误
ElMessage.error(res.message || '请求失败')
}
return Promise.reject(new Error(res.message || '请求失败'))
}
return res
},
(error) => {
console.error('响应错误:', error)
// 提取后端返回的业务错误消息
const bizMessage = error.response?.data?.message
let displayMessage = ''
if (error.response) {
switch (error.response.status) {
case 400:
// 业务错误(如"该团组已满员"),只显示后端返回的消息
displayMessage = bizMessage || '请求参数错误'
break
case 401:
displayMessage = '未授权,请登录'
break
case 403:
displayMessage = '拒绝访问'
break
case 404:
displayMessage = '请求地址不存在'
break
case 429:
displayMessage = '请求过于频繁,请稍后再试'
break
case 500:
displayMessage = '服务器内部错误'
break
default:
displayMessage = bizMessage || '请求失败'
}
} else if (error.request) {
displayMessage = '网络错误,请检查网络连接'
} else {
displayMessage = '请求配置错误'
}
ElMessage.error(displayMessage)
// 用业务消息替换原始 axios error message避免组件 catch 显示 "Request failed with status code 400"
const rejectError = new Error(displayMessage)
;(rejectError as any)._handled = true
return Promise.reject(rejectError)
}
)
// 通用请求方法
export const request = {
get<T = any>(url: string, params?: any): Promise<T> {
return service.get(url, {params})
},
post<T = any>(url: string, data?: any): Promise<T> {
return service.post(url, data)
},
put<T = any>(url: string, data?: any): Promise<T> {
return service.put(url, data)
},
delete<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return service.delete(url, {
...config,
data,
})
},
}
export default service

View File

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 533 B

View File

@@ -1,7 +1,9 @@
<template> <template>
<div class="countdown-timer"> <div class="countdown-timer">
<template v-if="timeLeft > 0"> <template v-if="timeLeft > 0">
<el-icon class="countdown-icon mr-1"><Clock /></el-icon> <el-icon class="countdown-icon mr-1">
<Clock/>
</el-icon>
<span class="time-block">{{ hours.toString().padStart(2, '0') }}</span> <span class="time-block">{{ hours.toString().padStart(2, '0') }}</span>
<span class="separator">:</span> <span class="separator">:</span>
<span class="time-block">{{ minutes.toString().padStart(2, '0') }}</span> <span class="time-block">{{ minutes.toString().padStart(2, '0') }}</span>
@@ -12,7 +14,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted, onUnmounted} from 'vue' import {ref, computed, onMounted, onUnmounted} from 'vue'
const props = defineProps<{ const props = defineProps<{
@@ -56,7 +58,7 @@ onUnmounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.countdown-timer { .countdown-timer {
@apply flex items-center justify-center text-lg font-mono; @apply flex items-center justify-center text-lg font-mono;

View File

@@ -1,16 +1,18 @@
<template> <template>
<div class="flash-sale-card card-shadow"> <div class="activity-card card-shadow">
<div class="relative"> <div class="relative">
<SafeImage <SafeImage
:src="data.productImageUrl"
:alt="data.productName" :alt="data.productName"
wrapper-class="w-full h-48" :src="data.productImageUrl"
img-class="w-full h-48 object-cover" img-class="w-full h-48 object-cover"
wrapper-class="w-full h-48"
/> />
<div class="absolute top-2 left-2"> <div class="absolute top-2 left-2">
<el-tag :type="statusType" effect="dark" size="small"> <el-tag :type="statusType" effect="dark" size="small">
<el-icon class="mr-1"><Lightning /></el-icon> <el-icon class="mr-1">
<Lightning/>
</el-icon>
{{ statusText }} {{ statusText }}
</el-tag> </el-tag>
</div> </div>
@@ -31,22 +33,25 @@
<span>剩余: {{ data.remainingStock }}</span> <span>剩余: {{ data.remainingStock }}</span>
<span>{{ stockPercent }}%</span> <span>{{ stockPercent }}%</span>
</div> </div>
<el-progress :percentage="stockPercent" :stroke-width="6" :show-text="false" :color="progressColor" /> <el-progress :color="progressColor" :percentage="stockPercent" :show-text="false" :stroke-width="6"/>
</div> </div>
<div class="text-center mb-3"> <div class="text-center mb-3">
<CountDown v-if="data.status === 'ACTIVE'" :end-time="endTime" @finish="$emit('refresh')"/> <CountDown v-if="data.status === 'ACTIVE'" :end-time="endTime" @finish="$emit('refresh')"/>
<span v-else-if="data.status === 'UPCOMING'" class="text-sm text-gray-500">即将开始</span> <span v-else-if="data.status === 'UPCOMING'" class="text-sm text-gray-500">即将开始</span>
<span v-else class="text-sm text-gray-400">已结束</span> <span v-else class="text-sm text-gray-400">已结束</span>
</div> </div>
<el-button type="primary" class="w-full" :disabled="!canParticipate" :loading="loading" @click="handleParticipate"> <el-button :disabled="!canParticipate" :loading="loading" class="w-full" type="primary"
<el-icon class="mr-1"><Lightning /></el-icon> @click="handleParticipate">
<el-icon class="mr-1">
<Lightning/>
</el-icon>
{{ buttonText }} {{ buttonText }}
</el-button> </el-button>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed} from 'vue' import {ref, computed} from 'vue'
import type {FlashSale} from '@/types/api' import type {FlashSale} from '@/types/api'
import CountDown from './CountDown.vue' import CountDown from './CountDown.vue'
@@ -58,22 +63,31 @@ const loading = ref(false)
const statusType = computed(() => { const statusType = computed(() => {
switch (props.data.status) { switch (props.data.status) {
case 'UPCOMING': return 'warning' case 'UPCOMING':
case 'ACTIVE': return 'danger' return 'warning'
case 'ENDED': return 'info' case 'ACTIVE':
case 'PAUSED': return 'warning' return 'danger'
default: return 'info' case 'ENDED':
return 'info'
case 'PAUSED':
return 'warning'
default:
return 'info'
} }
}) })
const statusText = computed(() => { const statusText = computed(() => {
switch (props.data.status) { switch (props.data.status) {
case 'UPCOMING': return '即将开始' case 'UPCOMING':
return '即将开始'
case 'ACTIVE': case 'ACTIVE':
return '进行中' return '进行中'
case 'ENDED': return '已结束' case 'ENDED':
case 'PAUSED': return '已暂停' return '已结束'
default: return '未知' case 'PAUSED':
return '已暂停'
default:
return '未知'
} }
}) })
@@ -93,12 +107,14 @@ const handleParticipate = async () => {
if (!canParticipate.value) return if (!canParticipate.value) return
loading.value = true loading.value = true
emit('participate', props.data.id) emit('participate', props.data.id)
setTimeout(() => { loading.value = false }, 1000) setTimeout(() => {
loading.value = false
}, 1000)
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.flash-sale-card { .activity-card {
@apply bg-white rounded-2xl overflow-hidden; @apply bg-white rounded-2xl overflow-hidden;
background: #fffaf2; background: #fffaf2;
transition: all 0.3s; transition: all 0.3s;

View File

@@ -2,15 +2,17 @@
<div class="group-buying-card card-shadow" @click="$router.push(`/groupbuying/${data.id}`)"> <div class="group-buying-card card-shadow" @click="$router.push(`/groupbuying/${data.id}`)">
<div class="relative cursor-pointer"> <div class="relative cursor-pointer">
<SafeImage <SafeImage
:src="data.productImageUrl"
:alt="data.productName" :alt="data.productName"
wrapper-class="w-full h-48" :src="data.productImageUrl"
img-class="w-full h-48 object-cover" img-class="w-full h-48 object-cover"
wrapper-class="w-full h-48"
/> />
<div class="absolute top-2 left-2"> <div class="absolute top-2 left-2">
<el-tag :type="statusType" effect="dark" size="small"> <el-tag :type="statusType" effect="dark" size="small">
<el-icon class="mr-1"><Connection /></el-icon> <el-icon class="mr-1">
<Connection/>
</el-icon>
{{ statusText }} {{ statusText }}
</el-tag> </el-tag>
</div> </div>
@@ -27,28 +29,32 @@
<span class="ml-2 text-sm text-gray-400 line-through">¥{{ data.productPrice }}</span> <span class="ml-2 text-sm text-gray-400 line-through">¥{{ data.productPrice }}</span>
</div> </div>
<div class="flex items-center text-sm text-gray-500 mb-2"> <div class="flex items-center text-sm text-gray-500 mb-2">
<el-icon class="mr-1"><User /></el-icon> <el-icon class="mr-1">
<User/>
</el-icon>
<span>{{ data.requiredMembers }}人团</span> <span>{{ data.requiredMembers }}人团</span>
<span class="mx-2">|</span> <span class="mx-2">|</span>
<span>剩余 {{ data.remainingStock }} </span> <span>剩余 {{ data.remainingStock }} </span>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<el-progress :percentage="stockPercent" :stroke-width="6" :show-text="false" :color="progressColor" /> <el-progress :color="progressColor" :percentage="stockPercent" :show-text="false" :stroke-width="6"/>
</div> </div>
<div class="flex items-center justify-between text-sm text-gray-500 mb-3"> <div class="flex items-center justify-between text-sm text-gray-500 mb-3">
<span v-if="data.activeGroupCount > 0">{{ data.activeGroupCount }} 个团进行中</span> <span v-if="data.activeGroupCount > 0">{{ data.activeGroupCount }} 个团进行中</span>
<span v-else>暂无进行中的团</span> <span v-else>暂无进行中的团</span>
<CountDown v-if="data.status === 'ACTIVE'" :end-time="endTime" @finish="$emit('refresh')"/> <CountDown v-if="data.status === 'ACTIVE'" :end-time="endTime" @finish="$emit('refresh')"/>
</div> </div>
<el-button type="primary" class="w-full" :disabled="!canJoin" @click.stop="handleJoin"> <el-button :disabled="!canJoin" class="w-full" type="primary" @click.stop="handleJoin">
<el-icon class="mr-1"><Connection /></el-icon> <el-icon class="mr-1">
<Connection/>
</el-icon>
{{ buttonText }} {{ buttonText }}
</el-button> </el-button>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {computed} from 'vue' import {computed} from 'vue'
import type {GroupBuying} from '@/types/api' import type {GroupBuying} from '@/types/api'
import CountDown from './CountDown.vue' import CountDown from './CountDown.vue'
@@ -59,20 +65,29 @@ const emit = defineEmits<{ join: [id: number]; refresh: [] }>()
const statusType = computed(() => { const statusType = computed(() => {
switch (props.data.status) { switch (props.data.status) {
case 'UPCOMING': return 'warning' case 'UPCOMING':
case 'ACTIVE': return 'success' return 'warning'
case 'ENDED': return 'info' case 'ACTIVE':
default: return 'info' return 'success'
case 'ENDED':
return 'info'
default:
return 'info'
} }
}) })
const statusText = computed(() => { const statusText = computed(() => {
switch (props.data.status) { switch (props.data.status) {
case 'DRAFT': return '草稿' case 'DRAFT':
case 'UPCOMING': return '即将开始' return '草稿'
case 'ACTIVE': return '拼团中' case 'UPCOMING':
case 'ENDED': return '已结束' return '即将开始'
default: return '未知' case 'ACTIVE':
return '拼团中'
case 'ENDED':
return '已结束'
default:
return '未知'
} }
}) })
@@ -93,7 +108,7 @@ const handleJoin = () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.group-buying-card { .group-buying-card {
@apply bg-white rounded-2xl overflow-hidden; @apply bg-white rounded-2xl overflow-hidden;
background: #fffaf2; background: #fffaf2;

View File

@@ -1,16 +1,18 @@
<template> <template>
<div class="group-member-list"> <div class="group-member-list">
<div class="flex items-center gap-3 flex-wrap"> <div class="flex items-center gap-3 flex-wrap">
<div v-for="member in members" :key="member.userId" class="member-avatar" :title="member.username"> <div v-for="member in members" :key="member.userId" :title="member.username" class="member-avatar">
<el-avatar :size="40" :src="member.avatar"> <el-avatar :size="40" :src="member.avatar">
{{ member.username ? member.username[0] : '?' }} {{ member.username ? member.username[0] : '?' }}
</el-avatar> </el-avatar>
<span class="member-name">{{ member.username }}</span> <span class="member-name">{{ member.username }}</span>
<el-tag v-if="member.userId === leaderUserId" size="small" type="warning" class="leader-tag">团长</el-tag> <el-tag v-if="member.userId === leaderUserId" class="leader-tag" size="small" type="warning">团长</el-tag>
</div> </div>
<div v-for="i in emptySlots" :key="'empty-' + i" class="member-avatar empty"> <div v-for="i in emptySlots" :key="'empty-' + i" class="member-avatar empty">
<div class="empty-slot"> <div class="empty-slot">
<el-icon :size="20"><Plus /></el-icon> <el-icon :size="20">
<Plus/>
</el-icon>
</div> </div>
<span class="member-name text-gray-400">等待加入</span> <span class="member-name text-gray-400">等待加入</span>
</div> </div>
@@ -18,7 +20,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {computed} from 'vue' import {computed} from 'vue'
import type {GroupBuyingMember} from '@/types/api' import type {GroupBuyingMember} from '@/types/api'
@@ -31,7 +33,7 @@ const props = defineProps<{
const emptySlots = computed(() => Math.max(0, props.requiredMembers - props.members.length)) const emptySlots = computed(() => Math.max(0, props.requiredMembers - props.members.length))
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.member-avatar { .member-avatar {
@apply flex flex-col items-center gap-1; @apply flex flex-col items-center gap-1;

View File

@@ -2,14 +2,14 @@
<div class="product-card card-shadow"> <div class="product-card card-shadow">
<div class="relative overflow-hidden h-48"> <div class="relative overflow-hidden h-48">
<SafeImage <SafeImage
:src="data.imageUrl"
:alt="data.name" :alt="data.name"
wrapper-class="w-full h-full" :src="data.imageUrl"
img-class="w-full h-full object-cover hover:scale-110 transition-transform duration-300" img-class="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
wrapper-class="w-full h-full"
/> />
<div v-if="data.stock <= 10" class="absolute top-2 right-2"> <div v-if="data.stock <= 10" class="absolute top-2 right-2">
<el-tag type="warning" size="small"> <el-tag size="small" type="warning">
仅剩 {{ data.stock }} 仅剩 {{ data.stock }}
</el-tag> </el-tag>
</div> </div>
@@ -25,19 +25,23 @@
<span class="text-sm text-gray-400">库存: {{ data.stock }}</span> <span class="text-sm text-gray-400">库存: {{ data.stock }}</span>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<el-button type="primary" size="small" class="flex-1" :disabled="data.stock === 0" @click="handleAddToCart"> <el-button :disabled="data.stock === 0" class="flex-1" size="small" type="primary" @click="handleAddToCart">
<el-icon class="mr-1"><ShoppingCart /></el-icon> <el-icon class="mr-1">
<ShoppingCart/>
</el-icon>
加入购物车 加入购物车
</el-button> </el-button>
<el-button size="small" @click="handleViewDetail"> <el-button size="small" @click="handleViewDetail">
<el-icon><View /></el-icon> <el-icon>
<View/>
</el-icon>
</el-button> </el-button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import type {Product} from '@/types/api' import type {Product} from '@/types/api'
import SafeImage from '@/components/common/SafeImage.vue' import SafeImage from '@/components/common/SafeImage.vue'
@@ -57,7 +61,7 @@ const handleViewDetail = () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.product-card { .product-card {
@apply bg-white rounded-2xl overflow-hidden; @apply bg-white rounded-2xl overflow-hidden;
background: #fffaf2; background: #fffaf2;

View File

@@ -23,11 +23,11 @@
<el-form-item label="详细描述"> <el-form-item label="详细描述">
<el-input <el-input
v-model="form.description" v-model="form.description"
type="textarea"
:rows="4" :rows="4"
placeholder="请描述退货原因(选填)"
maxlength="500" maxlength="500"
placeholder="请描述退货原因(选填)"
show-word-limit show-word-limit
type="textarea"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -35,9 +35,9 @@
<template #footer> <template #footer>
<el-button @click="$emit('update:visible', false)">取消</el-button> <el-button @click="$emit('update:visible', false)">取消</el-button>
<el-button <el-button
type="primary"
:loading="submitting"
:disabled="!form.reason" :disabled="!form.reason"
:loading="submitting"
type="primary"
@click="handleSubmit" @click="handleSubmit"
> >
提交申请 提交申请
@@ -46,7 +46,7 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, watch} from 'vue' import {ref, reactive, watch} from 'vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import {returnApi} from '@/api/modules/return' import {returnApi} from '@/api/modules/return'

View File

@@ -9,9 +9,9 @@
<el-form-item label="物流单号" required> <el-form-item label="物流单号" required>
<el-input <el-input
v-model="form.returnTracking" v-model="form.returnTracking"
placeholder="请输入退货物流单号"
maxlength="100"
clearable clearable
maxlength="100"
placeholder="请输入退货物流单号"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -19,9 +19,9 @@
<template #footer> <template #footer>
<el-button @click="$emit('update:visible', false)">取消</el-button> <el-button @click="$emit('update:visible', false)">取消</el-button>
<el-button <el-button
type="primary"
:loading="submitting"
:disabled="!form.returnTracking.trim()" :disabled="!form.returnTracking.trim()"
:loading="submitting"
type="primary"
@click="handleSubmit" @click="handleSubmit"
> >
提交 提交
@@ -30,7 +30,7 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, watch} from 'vue' import {ref, reactive, watch} from 'vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import {returnApi} from '@/api/modules/return' import {returnApi} from '@/api/modules/return'

View File

@@ -6,7 +6,9 @@
@update:model-value="$emit('update:visible', $event)" @update:model-value="$emit('update:visible', $event)"
> >
<div v-if="checkLoading" class="text-center py-8"> <div v-if="checkLoading" class="text-center py-8">
<el-icon :size="32" class="animate-spin"><Loading /></el-icon> <el-icon :size="32" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载评价状态...</p> <p class="mt-2 text-gray-500">加载评价状态...</p>
</div> </div>
@@ -18,7 +20,8 @@
<!-- 待评价商品 --> <!-- 待评价商品 -->
<div v-for="item in reviewableItems" :key="item.productId" class="border rounded-lg p-4"> <div v-for="item in reviewableItems" :key="item.productId" class="border rounded-lg p-4">
<div class="flex gap-4 mb-4"> <div class="flex gap-4 mb-4">
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-16 h-16 rounded" img-class="w-16 h-16 object-cover rounded" /> <SafeImage :alt="item.productName" :src="item.productImage" img-class="w-16 h-16 object-cover rounded"
wrapper-class="w-16 h-16 rounded"/>
<div class="flex-1"> <div class="flex-1">
<h4 class="font-semibold">{{ item.productName }}</h4> <h4 class="font-semibold">{{ item.productName }}</h4>
<div class="text-sm text-gray-500">¥{{ item.price }} × {{ item.quantity }}</div> <div class="text-sm text-gray-500">¥{{ item.price }} × {{ item.quantity }}</div>
@@ -26,17 +29,17 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="block text-sm text-gray-600 mb-1">评分</label> <label class="block text-sm text-gray-600 mb-1">评分</label>
<el-rate v-model="item.rating" show-text :texts="['很差', '较差', '一般', '满意', '非常满意']" /> <el-rate v-model="item.rating" :texts="['很差', '较差', '一般', '满意', '非常满意']" show-text/>
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">评价内容</label> <label class="block text-sm text-gray-600 mb-1">评价内容</label>
<el-input <el-input
v-model="item.content" v-model="item.content"
type="textarea"
:rows="3" :rows="3"
placeholder="分享一下你的使用感受吧"
maxlength="500" maxlength="500"
placeholder="分享一下你的使用感受吧"
show-word-limit show-word-limit
type="textarea"
/> />
</div> </div>
</div> </div>
@@ -44,11 +47,12 @@
<!-- 已评价商品 --> <!-- 已评价商品 -->
<div v-for="item in reviewedItems" :key="'reviewed-' + item.productId" class="border rounded-lg p-4 bg-gray-50"> <div v-for="item in reviewedItems" :key="'reviewed-' + item.productId" class="border rounded-lg p-4 bg-gray-50">
<div class="flex gap-4"> <div class="flex gap-4">
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-16 h-16 rounded" img-class="w-16 h-16 object-cover rounded" /> <SafeImage :alt="item.productName" :src="item.productImage" img-class="w-16 h-16 object-cover rounded"
wrapper-class="w-16 h-16 rounded"/>
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<h4 class="font-semibold">{{ item.productName }}</h4> <h4 class="font-semibold">{{ item.productName }}</h4>
<el-tag type="success" size="small">已评价</el-tag> <el-tag size="small" type="success">已评价</el-tag>
</div> </div>
<el-rate :model-value="item.existingReview!.rating" disabled/> <el-rate :model-value="item.existingReview!.rating" disabled/>
<p class="text-sm text-gray-600 mt-1">{{ item.existingReview!.content }}</p> <p class="text-sm text-gray-600 mt-1">{{ item.existingReview!.content }}</p>
@@ -61,9 +65,9 @@
<el-button @click="$emit('update:visible', false)">关闭</el-button> <el-button @click="$emit('update:visible', false)">关闭</el-button>
<el-button <el-button
v-if="reviewableItems.length > 0" v-if="reviewableItems.length > 0"
type="primary"
:loading="submitting"
:disabled="!canSubmit" :disabled="!canSubmit"
:loading="submitting"
type="primary"
@click="handleSubmit" @click="handleSubmit"
> >
提交评价 提交评价
@@ -72,7 +76,7 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, watch} from 'vue' import {ref, computed, watch} from 'vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import {reviewApi} from '@/api/modules/review' import {reviewApi} from '@/api/modules/review'

View File

@@ -15,7 +15,7 @@
<h3 class="text-lg font-semibold mb-4">快速链接</h3> <h3 class="text-lg font-semibold mb-4">快速链接</h3>
<ul class="space-y-2"> <ul class="space-y-2">
<li> <li>
<router-link to="/" class="footer-link"> <router-link class="footer-link" to="/">
首页 首页
</router-link> </router-link>
</li> </li>
@@ -25,7 +25,7 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link to="/products" class="footer-link"> <router-link class="footer-link" to="/products">
商品列表 商品列表
</router-link> </router-link>
</li> </li>
@@ -50,11 +50,15 @@
<h3 class="text-lg font-semibold mb-4">联系我们</h3> <h3 class="text-lg font-semibold mb-4">联系我们</h3>
<div class="space-y-2 text-gray-600"> <div class="space-y-2 text-gray-600">
<p class="flex items-center"> <p class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <el-icon class="mr-2">
<Message/>
</el-icon>
service@freshgroup.com service@freshgroup.com
</p> </p>
<p class="flex items-center"> <p class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon> <el-icon class="mr-2">
<Phone/>
</el-icon>
400-123-4567 400-123-4567
</p> </p>
</div> </div>
@@ -68,10 +72,10 @@
</footer> </footer>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.app-footer { .app-footer {
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
border-top: 1px solid #d8cebf; border-top: 1px solid #d8cebf;

View File

@@ -3,7 +3,7 @@
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<nav class="header-nav"> <nav class="header-nav">
<div class="header-brand"> <div class="header-brand">
<router-link to="/" class="brand-link"> <router-link class="brand-link" to="/">
<el-icon :size="24" class="brand-icon"> <el-icon :size="24" class="brand-icon">
<Lightning/> <Lightning/>
</el-icon> </el-icon>
@@ -12,15 +12,21 @@
</div> </div>
<div class="header-links hidden xl:flex items-center"> <div class="header-links hidden xl:flex items-center">
<router-link to="/" class="nav-link"> <router-link class="nav-link" to="/">
<el-icon><HomeFilled /></el-icon> <el-icon>
<HomeFilled/>
</el-icon>
首页 首页
</router-link> </router-link>
<el-dropdown trigger="hover" @command="handleCategoryCommand"> <el-dropdown trigger="hover" @command="handleCategoryCommand">
<router-link to="/products" class="nav-link"> <router-link class="nav-link" to="/products">
<el-icon><ShoppingBag /></el-icon> <el-icon>
<ShoppingBag/>
</el-icon>
商品列表 商品列表
<el-icon class="ml-1" :size="12"><ArrowDown /></el-icon> <el-icon :size="12" class="ml-1">
<ArrowDown/>
</el-icon>
</router-link> </router-link>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@@ -35,16 +41,20 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<router-link to="/groupbuying" class="nav-link"> <router-link class="nav-link" to="/groupbuying">
<el-icon><Connection /></el-icon> <el-icon>
<Connection/>
</el-icon>
拼团 拼团
</router-link> </router-link>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<el-dropdown class="header-menu xl:hidden" trigger="click" @command="handleMainNavCommand"> <el-dropdown class="header-menu xl:hidden" trigger="click" @command="handleMainNavCommand">
<button type="button" class="menu-trigger" aria-label="打开导航菜单"> <button aria-label="打开导航菜单" class="menu-trigger" type="button">
<el-icon :size="18"><Menu /></el-icon> <el-icon :size="18">
<Menu/>
</el-icon>
<span class="hidden sm:inline">菜单</span> <span class="hidden sm:inline">菜单</span>
</button> </button>
<template #dropdown> <template #dropdown>
@@ -63,8 +73,10 @@
<NotificationCenter v-if="userStore.isLoggedIn && !userStore.isAdmin"/> <NotificationCenter v-if="userStore.isLoggedIn && !userStore.isAdmin"/>
<router-link v-if="!userStore.isAdmin" class="cart-link relative" to="/cart"> <router-link v-if="!userStore.isAdmin" class="cart-link relative" to="/cart">
<el-badge :value="cartCount" :hidden="cartCount === 0" class="cart-badge"> <el-badge :hidden="cartCount === 0" :value="cartCount" class="cart-badge">
<el-icon :size="20"><ShoppingCart /></el-icon> <el-icon :size="20">
<ShoppingCart/>
</el-icon>
</el-badge> </el-badge>
</router-link> </router-link>
@@ -79,31 +91,45 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/profile')"> <el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/profile')">
<el-icon><User /></el-icon> <el-icon>
<User/>
</el-icon>
个人中心 个人中心
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/orders')"> <el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/orders')">
<el-icon><List /></el-icon> <el-icon>
<List/>
</el-icon>
我的订单 我的订单
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/favorites')"> <el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/favorites')">
<el-icon><Star /></el-icon> <el-icon>
<Star/>
</el-icon>
我的收藏 我的收藏
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/reviews')"> <el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/reviews')">
<el-icon><ChatDotRound /></el-icon> <el-icon>
<ChatDotRound/>
</el-icon>
我的评价 我的评价
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/notifications')"> <el-dropdown-item v-if="!userStore.isAdmin" @click="router.push('/notifications')">
<el-icon><Bell /></el-icon> <el-icon>
<Bell/>
</el-icon>
消息通知 消息通知
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="userStore.isAdmin" @click="router.push('/admin')"> <el-dropdown-item v-if="userStore.isAdmin" @click="router.push('/admin')">
<el-icon><Setting /></el-icon> <el-icon>
<Setting/>
</el-icon>
管理后台 管理后台
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided @click="handleLogout"> <el-dropdown-item divided @click="handleLogout">
<el-icon><SwitchButton /></el-icon> <el-icon>
<SwitchButton/>
</el-icon>
退出登录 退出登录
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
@@ -121,7 +147,7 @@
</header> </header>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, onMounted} from 'vue' import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {useUserStore} from '@/stores/user' import {useUserStore} from '@/stores/user'
@@ -189,7 +215,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.app-header { .app-header {
position: fixed; position: fixed;
top: 0; top: 0;

View File

@@ -1,28 +1,30 @@
<template> <template>
<div class="image-upload"> <div class="image-upload">
<el-upload <el-upload
:class="{ 'hide-upload': fileList.length >= limit }" :accept="accept"
:action="uploadUrl" :action="uploadUrl"
:headers="headers" :before-upload="beforeUpload"
:with-credentials="true" :class="{ 'hide-upload': fileList.length >= limit }"
:file-list="fileList" :file-list="fileList"
:headers="headers"
:limit="limit" :limit="limit"
:multiple="multiple" :multiple="multiple"
:accept="accept" :on-error="handleError"
:before-upload="beforeUpload" :on-exceed="handleExceed"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:on-success="handleSuccess" :on-success="handleSuccess"
:on-error="handleError" :with-credentials="true"
:on-exceed="handleExceed"
list-type="picture-card" list-type="picture-card"
> >
<template #default> <template #default>
<el-icon class="upload-icon"><Plus /></el-icon> <el-icon class="upload-icon">
<Plus/>
</el-icon>
</template> </template>
<template #file="{ file }"> <template #file="{ file }">
<div class="upload-file-item"> <div class="upload-file-item">
<img class="upload-image" :src="file.url" :alt="file.name" /> <img :alt="file.name" :src="file.url" class="upload-image"/>
<span class="upload-actions"> <span class="upload-actions">
<span class="upload-action" @click="handlePreview(file)"> <span class="upload-action" @click="handlePreview(file)">
<el-icon><ZoomIn/></el-icon> <el-icon><ZoomIn/></el-icon>
@@ -37,9 +39,9 @@
<!-- 上传进度 --> <!-- 上传进度 -->
<el-progress <el-progress
v-if="file.status === 'uploading'" v-if="file.status === 'uploading'"
type="circle"
:percentage="file.percentage" :percentage="file.percentage"
class="upload-progress" class="upload-progress"
type="circle"
/> />
</div> </div>
</template> </template>
@@ -48,12 +50,12 @@
<!-- 图片预览 --> <!-- 图片预览 -->
<el-dialog <el-dialog
v-model="previewVisible" v-model="previewVisible"
append-to-body
title="图片预览" title="图片预览"
width="800px" width="800px"
append-to-body
> >
<div class="preview-container"> <div class="preview-container">
<img :src="previewUrl" :alt="previewName" class="preview-image" /> <img :alt="previewName" :src="previewUrl" class="preview-image"/>
<div class="preview-info"> <div class="preview-info">
<p><strong>文件名</strong>{{ previewName }}</p> <p><strong>文件名</strong>{{ previewName }}</p>
<p><strong>文件大小</strong>{{ formatFileSize(previewSize) }}</p> <p><strong>文件大小</strong>{{ formatFileSize(previewSize) }}</p>
@@ -63,7 +65,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, watch} from 'vue' import {ref, computed, watch} from 'vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import {resolveImageUrl} from '@/utils/image' import {resolveImageUrl} from '@/utils/image'
@@ -281,7 +283,7 @@ const updateValue = () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.image-upload { .image-upload {
:deep(.el-upload-list--picture-card) { :deep(.el-upload-list--picture-card) {
.el-upload-list__item { .el-upload-list__item {

View File

@@ -1,16 +1,18 @@
<template> <template>
<div class="notification-center"> <div class="notification-center">
<el-popover <el-popover
placement="bottom-end"
:width="380"
trigger="click"
:visible="visible" :visible="visible"
:width="380"
placement="bottom-end"
trigger="click"
@update:visible="val => visible = val" @update:visible="val => visible = val"
> >
<template #reference> <template #reference>
<div class="notification-trigger"> <div class="notification-trigger">
<el-badge :value="unreadCount" :hidden="unreadCount === 0"> <el-badge :hidden="unreadCount === 0" :value="unreadCount">
<el-icon :size="20"><Bell /></el-icon> <el-icon :size="20">
<Bell/>
</el-icon>
</el-badge> </el-badge>
</div> </div>
</template> </template>
@@ -20,10 +22,10 @@
<div class="notification-header"> <div class="notification-header">
<span class="title">消息通知</span> <span class="title">消息通知</span>
<div class="actions"> <div class="actions">
<el-button text size="small" @click="markAllAsRead"> <el-button size="small" text @click="markAllAsRead">
全部已读 全部已读
</el-button> </el-button>
<el-button text size="small" @click="clearAll"> <el-button size="small" text @click="clearAll">
清空 清空
</el-button> </el-button>
</div> </div>
@@ -36,11 +38,11 @@
<div <div
v-for="item in allNotifications" v-for="item in allNotifications"
:key="item.id" :key="item.id"
class="notification-item"
:class="{ unread: !item.read }" :class="{ unread: !item.read }"
class="notification-item"
@click="handleClick(item)" @click="handleClick(item)"
> >
<el-icon :size="16" :class="getIconClass(item.type)"> <el-icon :class="getIconClass(item.type)" :size="16">
<component :is="getIcon(item.type)"/> <component :is="getIcon(item.type)"/>
</el-icon> </el-icon>
<div class="content"> <div class="content">
@@ -50,8 +52,8 @@
</div> </div>
<el-button <el-button
v-if="!item.read" v-if="!item.read"
text
size="small" size="small"
text
@click.stop="markAsRead(item.id)" @click.stop="markAsRead(item.id)"
> >
标记已读 标记已读
@@ -67,8 +69,8 @@
<div <div
v-for="item in flashsaleNotifications" v-for="item in flashsaleNotifications"
:key="item.id" :key="item.id"
class="notification-item"
:class="{ unread: !item.read }" :class="{ unread: !item.read }"
class="notification-item"
@click="handleClick(item)" @click="handleClick(item)"
> >
<el-icon :size="16" class="notification-icon"> <el-icon :size="16" class="notification-icon">
@@ -90,8 +92,8 @@
<div <div
v-for="item in orderNotifications" v-for="item in orderNotifications"
:key="item.id" :key="item.id"
class="notification-item"
:class="{ unread: !item.read }" :class="{ unread: !item.read }"
class="notification-item"
@click="handleClick(item)" @click="handleClick(item)"
> >
<el-icon :size="16" class="notification-icon"> <el-icon :size="16" class="notification-icon">
@@ -113,8 +115,8 @@
<div <div
v-for="item in systemNotifications" v-for="item in systemNotifications"
:key="item.id" :key="item.id"
class="notification-item"
:class="{ unread: !item.read }" :class="{ unread: !item.read }"
class="notification-item"
@click="handleClick(item)" @click="handleClick(item)"
> >
<el-icon :size="16" class="text-gray-500"> <el-icon :size="16" class="text-gray-500">
@@ -134,7 +136,7 @@
<!-- 底部 --> <!-- 底部 -->
<div class="notification-footer"> <div class="notification-footer">
<router-link to="/notifications" class="view-all"> <router-link class="view-all" to="/notifications">
查看全部消息 查看全部消息
</router-link> </router-link>
</div> </div>
@@ -143,7 +145,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted, onUnmounted} from 'vue' import {ref, computed, onMounted, onUnmounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -279,7 +281,7 @@ onUnmounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.notification-center { .notification-center {
.notification-trigger { .notification-trigger {
cursor: pointer; cursor: pointer;

View File

@@ -4,17 +4,17 @@
<div class="safe-image__shimmer"></div> <div class="safe-image__shimmer"></div>
</div> </div>
<img <img
:src="currentSrc"
:alt="alt" :alt="alt"
:class="['safe-image__img', imgClass, { 'is-loaded': loaded }]" :class="['safe-image__img', imgClass, { 'is-loaded': loaded }]"
:loading="lazy ? 'lazy' : 'eager'" :loading="lazy ? 'lazy' : 'eager'"
@load="handleLoad" :src="currentSrc"
@error="handleError" @error="handleError"
@load="handleLoad"
> >
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, watch} from 'vue' import {ref, watch} from 'vue'
import {DEFAULT_PRODUCT_IMAGE, resolveImageUrl} from '@/utils/image' import {DEFAULT_PRODUCT_IMAGE, resolveImageUrl} from '@/utils/image'
@@ -72,7 +72,7 @@ const handleClick = () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.safe-image { .safe-image {
position: relative; position: relative;
overflow: hidden; overflow: hidden;

View File

@@ -1,32 +1,36 @@
<template> <template>
<div class="search-component"> <div class="search-component">
<el-popover <el-popover
placement="bottom"
:width="600"
trigger="click"
:visible="visible" :visible="visible"
:width="600"
placement="bottom"
trigger="click"
@update:visible="val => visible = val" @update:visible="val => visible = val"
> >
<template #reference> <template #reference>
<el-input <el-input
v-model="searchQuery" v-model="searchQuery"
placeholder="搜索商品、限时活动..."
class="search-input" class="search-input"
@keyup.enter="handleQuickSearch" placeholder="搜索商品、限时活动..."
@focus="handleFocus" @focus="handleFocus"
@keyup.enter="handleQuickSearch"
> >
<template #prefix> <template #prefix>
<el-icon><Search /></el-icon> <el-icon>
<Search/>
</el-icon>
</template> </template>
<template #suffix> <template #suffix>
<el-button <el-button
v-if="searchQuery" v-if="searchQuery"
text
circle circle
size="small" size="small"
text
@click.stop="clearSearch" @click.stop="clearSearch"
> >
<el-icon><Close /></el-icon> <el-icon>
<Close/>
</el-icon>
</el-button> </el-button>
</template> </template>
</el-input> </el-input>
@@ -37,7 +41,7 @@
<div v-if="!searchQuery && searchHistory.length > 0" class="search-section"> <div v-if="!searchQuery && searchHistory.length > 0" class="search-section">
<div class="section-header"> <div class="section-header">
<span class="title">搜索历史</span> <span class="title">搜索历史</span>
<el-button text size="small" @click="clearHistory"> <el-button size="small" text @click="clearHistory">
清空 清空
</el-button> </el-button>
</div> </div>
@@ -152,7 +156,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, watch, onMounted} from 'vue' import {ref, reactive, watch, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {debounce} from 'lodash-es' import {debounce} from 'lodash-es'
@@ -354,7 +358,7 @@ onMounted(async () => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.search-component { .search-component {
.search-input { .search-input {
width: 300px; width: 300px;

View File

@@ -0,0 +1,219 @@
import {ref, onUnmounted} from 'vue'
import {ElNotification} from 'element-plus'
import {useUserStore} from '@/stores/user'
export interface WebSocketMessage {
type: 'FLASH_SALE_START' | 'FLASH_SALE_END' | 'ORDER_STATUS' | 'STOCK_UPDATE' | 'SYSTEM_NOTICE'
data: any
timestamp: number
}
class WebSocketService {
private ws: WebSocket | null = null
private reconnectTimer: number | null = null
private heartbeatTimer: number | null = null
private reconnectAttempts = 0
private maxReconnectAttempts = 5
private listeners: Map<string, Set<Function>> = new Map()
constructor() {
this.connect()
}
private connect() {
const userStore = useUserStore()
if (!userStore.token) {
console.log('WebSocket: 用户未登录,跳过连接')
return
}
const wsUrl = `${import.meta.env.VITE_WS_URL}?token=${userStore.token}`
try {
this.ws = new WebSocket(wsUrl)
this.ws.onopen = () => {
console.log('WebSocket 连接成功')
this.reconnectAttempts = 0
this.startHeartbeat()
// 发送认证信息
this.send({
type: 'AUTH',
token: userStore.token
})
}
this.ws.onmessage = (event) => {
try {
const message: WebSocketMessage = JSON.parse(event.data)
this.handleMessage(message)
} catch (error) {
console.error('WebSocket 消息解析失败:', error)
}
}
this.ws.onerror = (error) => {
console.error('WebSocket 错误:', error)
}
this.ws.onclose = () => {
console.log('WebSocket 连接关闭')
this.stopHeartbeat()
this.attemptReconnect()
}
} catch (error) {
console.error('WebSocket 连接失败:', error)
this.attemptReconnect()
}
}
private handleMessage(message: WebSocketMessage) {
// 触发消息监听器
const listeners = this.listeners.get(message.type)
if (listeners) {
listeners.forEach(listener => listener(message.data))
}
// 显示通知
switch (message.type) {
case 'FLASH_SALE_START':
ElNotification({
title: '限时开始',
message: `${message.data.productName} 限时活动已开始!`,
type: 'success',
duration: 5000
})
break
case 'FLASH_SALE_END':
ElNotification({
title: '限时结束',
message: `${message.data.productName} 限时活动已结束`,
type: 'info',
duration: 3000
})
break
case 'ORDER_STATUS':
ElNotification({
title: '订单状态更新',
message: message.data.message,
type: 'info',
duration: 3000
})
break
case 'STOCK_UPDATE':
// 库存更新,不显示通知,只触发监听器
break
case 'SYSTEM_NOTICE':
ElNotification({
title: '系统通知',
message: message.data.content,
type: message.data.level || 'info',
duration: 5000
})
break
}
}
private startHeartbeat() {
this.stopHeartbeat()
this.heartbeatTimer = window.setInterval(() => {
if (this.ws?.readyState === WebSocket.OPEN) {
this.ws.send(JSON.stringify({type: 'PING'}))
}
}, 30000) // 30秒心跳
}
private stopHeartbeat() {
if (this.heartbeatTimer) {
clearInterval(this.heartbeatTimer)
this.heartbeatTimer = null
}
}
private attemptReconnect() {
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
console.error('WebSocket 重连失败,已达最大重试次数')
return
}
this.reconnectAttempts++
const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000)
console.log(`WebSocket 将在 ${delay}ms 后重连 (第 ${this.reconnectAttempts} 次)`)
this.reconnectTimer = window.setTimeout(() => {
this.connect()
}, delay)
}
public send(data: any) {
if (this.ws?.readyState === WebSocket.OPEN) {
this.ws.send(JSON.stringify(data))
} else {
console.warn('WebSocket 未连接,无法发送消息')
}
}
public on(type: string, callback: Function) {
if (!this.listeners.has(type)) {
this.listeners.set(type, new Set())
}
this.listeners.get(type)!.add(callback)
}
public off(type: string, callback: Function) {
const listeners = this.listeners.get(type)
if (listeners) {
listeners.delete(callback)
}
}
public disconnect() {
this.stopHeartbeat()
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer)
this.reconnectTimer = null
}
if (this.ws) {
this.ws.close()
this.ws = null
}
}
}
// 单例实例
let wsService: WebSocketService | null = null
export function useWebSocket() {
if (!wsService) {
wsService = new WebSocketService()
}
const subscribe = (type: string, callback: Function) => {
wsService?.on(type, callback)
}
const unsubscribe = (type: string, callback: Function) => {
wsService?.off(type, callback)
}
const send = (data: any) => {
wsService?.send(data)
}
onUnmounted(() => {
// 组件卸载时不断开连接,保持全局连接
})
return {
subscribe,
unsubscribe,
send
}
}

View File

@@ -13,53 +13,71 @@
</div> </div>
<el-menu <el-menu
:default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:collapse-transition="false" :collapse-transition="false"
:default-active="activeMenu"
router router
> >
<el-menu-item index="/admin"> <el-menu-item index="/admin">
<el-icon><DataLine /></el-icon> <el-icon>
<DataLine/>
</el-icon>
<template #title>仪表盘</template> <template #title>仪表盘</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/products"> <el-menu-item index="/admin/products">
<el-icon><ShoppingBag /></el-icon> <el-icon>
<ShoppingBag/>
</el-icon>
<template #title>商品管理</template> <template #title>商品管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/groupbuying"> <el-menu-item index="/admin/groupbuying">
<el-icon><Connection /></el-icon> <el-icon>
<Connection/>
</el-icon>
<template #title>拼团管理</template> <template #title>拼团管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/orders"> <el-menu-item index="/admin/orders">
<el-icon><List /></el-icon> <el-icon>
<List/>
</el-icon>
<template #title>订单管理</template> <template #title>订单管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/users"> <el-menu-item index="/admin/users">
<el-icon><User /></el-icon> <el-icon>
<User/>
</el-icon>
<template #title>用户管理</template> <template #title>用户管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/returns"> <el-menu-item index="/admin/returns">
<el-icon><RefreshLeft /></el-icon> <el-icon>
<RefreshLeft/>
</el-icon>
<template #title>退货管理</template> <template #title>退货管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/reviews"> <el-menu-item index="/admin/reviews">
<el-icon><ChatDotRound /></el-icon> <el-icon>
<ChatDotRound/>
</el-icon>
<template #title>评价管理</template> <template #title>评价管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/favorites"> <el-menu-item index="/admin/favorites">
<el-icon><Star /></el-icon> <el-icon>
<Star/>
</el-icon>
<template #title>收藏管理</template> <template #title>收藏管理</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/admin/monitor"> <el-menu-item index="/admin/monitor">
<el-icon><Monitor /></el-icon> <el-icon>
<Monitor/>
</el-icon>
<template #title>系统监控</template> <template #title>系统监控</template>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
@@ -70,8 +88,8 @@
<el-header class="admin-header"> <el-header class="admin-header">
<div class="header-left"> <div class="header-left">
<el-icon <el-icon
class="collapse-btn"
:size="20" :size="20"
class="collapse-btn"
@click="isCollapse = !isCollapse" @click="isCollapse = !isCollapse"
> >
<component :is="isCollapse ? 'Expand' : 'Fold'"/> <component :is="isCollapse ? 'Expand' : 'Fold'"/>
@@ -109,7 +127,9 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item @click="handleLogout"> <el-dropdown-item @click="handleLogout">
<el-icon><SwitchButton /></el-icon> <el-icon>
<SwitchButton/>
</el-icon>
退出登录 退出登录
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
@@ -121,7 +141,7 @@
<!-- 主内容区 --> <!-- 主内容区 -->
<el-main class="admin-main"> <el-main class="admin-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in"> <transition mode="out-in" name="fade-transform">
<component :is="Component"/> <component :is="Component"/>
</transition> </transition>
</router-view> </router-view>
@@ -131,7 +151,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed} from 'vue' import {ref, computed} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessageBox} from 'element-plus' import {ElMessageBox} from 'element-plus'
@@ -186,7 +206,7 @@ const handleLogout = async () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.admin-layout { .admin-layout {
height: 100vh; height: 100vh;
background: transparent; background: transparent;

View File

@@ -3,7 +3,7 @@
<AppHeader/> <AppHeader/>
<main class="main-content"> <main class="main-content">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in"> <transition mode="out-in" name="fade-transform">
<component :is="Component"/> <component :is="Component"/>
</transition> </transition>
</router-view> </router-view>
@@ -12,12 +12,12 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import AppHeader from '@/components/common/AppHeader.vue' import AppHeader from '@/components/common/AppHeader.vue'
import AppFooter from '@/components/common/AppFooter.vue' import AppFooter from '@/components/common/AppFooter.vue'
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.main-layout { .main-layout {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;

View File

@@ -3,7 +3,9 @@
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
<div class="stat-card"> <div class="stat-card">
<div class="stat-icon tone-1"> <div class="stat-icon tone-1">
<el-icon><User /></el-icon> <el-icon>
<User/>
</el-icon>
</div> </div>
<div> <div>
<div class="stat-value">{{ statistics.totalUsers }}</div> <div class="stat-value">{{ statistics.totalUsers }}</div>
@@ -13,7 +15,9 @@
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-icon tone-2"> <div class="stat-icon tone-2">
<el-icon><ShoppingBag /></el-icon> <el-icon>
<ShoppingBag/>
</el-icon>
</div> </div>
<div> <div>
<div class="stat-value">{{ statistics.totalProducts }}</div> <div class="stat-value">{{ statistics.totalProducts }}</div>
@@ -23,7 +27,9 @@
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-icon tone-3"> <div class="stat-icon tone-3">
<el-icon><List /></el-icon> <el-icon>
<List/>
</el-icon>
</div> </div>
<div> <div>
<div class="stat-value">{{ statistics.totalOrders }}</div> <div class="stat-value">{{ statistics.totalOrders }}</div>
@@ -33,7 +39,9 @@
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-icon tone-4"> <div class="stat-icon tone-4">
<el-icon><Coin /></el-icon> <el-icon>
<Coin/>
</el-icon>
</div> </div>
<div> <div>
<div class="stat-value">¥{{ formatCurrency(statistics.totalAmount) }}</div> <div class="stat-value">¥{{ formatCurrency(statistics.totalAmount) }}</div>
@@ -76,13 +84,13 @@
<el-button text type="primary" @click="router.push('/admin/orders')">查看全部</el-button> <el-button text type="primary" @click="router.push('/admin/orders')">查看全部</el-button>
</div> </div>
<el-table v-loading="loading" :data="recentOrders" stripe> <el-table v-loading="loading" :data="recentOrders" stripe>
<el-table-column prop="orderNo" label="订单号" min-width="120" /> <el-table-column label="订单号" min-width="120" prop="orderNo"/>
<el-table-column prop="username" label="用户" min-width="100" /> <el-table-column label="用户" min-width="100" prop="username"/>
<el-table-column prop="productName" label="商品" min-width="140" show-overflow-tooltip /> <el-table-column label="商品" min-width="140" prop="productName" show-overflow-tooltip/>
<el-table-column prop="totalAmount" label="金额" min-width="100"> <el-table-column label="金额" min-width="100" prop="totalAmount">
<template #default="{ row }">¥{{ formatCurrency(row.totalAmount) }}</template> <template #default="{ row }">¥{{ formatCurrency(row.totalAmount) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" min-width="100"> <el-table-column label="状态" min-width="100" prop="status">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="getOrderStatusType(row.status)">{{ getOrderStatusText(row.status) }}</el-tag> <el-tag :type="getOrderStatusType(row.status)">{{ getOrderStatusText(row.status) }}</el-tag>
</template> </template>
@@ -99,12 +107,12 @@
<el-button text type="primary" @click="router.push('/admin/products')">查看全部</el-button> <el-button text type="primary" @click="router.push('/admin/products')">查看全部</el-button>
</div> </div>
<el-table v-loading="loading" :data="hotProducts" stripe> <el-table v-loading="loading" :data="hotProducts" stripe>
<el-table-column prop="name" label="商品名称" min-width="160" show-overflow-tooltip /> <el-table-column label="商品名称" min-width="160" prop="name" show-overflow-tooltip/>
<el-table-column prop="price" label="价格" min-width="100"> <el-table-column label="价格" min-width="100" prop="price">
<template #default="{ row }">¥{{ formatCurrency(row.price) }}</template> <template #default="{ row }">¥{{ formatCurrency(row.price) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="sales" label="销量" min-width="80" /> <el-table-column label="销量" min-width="80" prop="sales"/>
<el-table-column prop="stock" label="库存" min-width="100"> <el-table-column label="库存" min-width="100" prop="stock">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.stock > 10 ? 'success' : 'warning'">{{ row.stock }}</el-tag> <el-tag :type="row.stock > 10 ? 'success' : 'warning'">{{ row.stock }}</el-tag>
</template> </template>
@@ -115,7 +123,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {nextTick, onMounted, onUnmounted, reactive, ref} from 'vue' import {nextTick, onMounted, onUnmounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import * as echarts from 'echarts' import * as echarts from 'echarts'
@@ -286,7 +294,7 @@ onUnmounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.admin-dashboard { .admin-dashboard {
.stat-card { .stat-card {
@apply bg-white rounded-xl p-5 flex items-center gap-4; @apply bg-white rounded-xl p-5 flex items-center gap-4;

View File

@@ -0,0 +1,184 @@
<template>
<div class="page-shell">
<div class="page-header">
<div>
<h2 class="page-title">收藏管理</h2>
<p class="page-subtitle">查看用户收藏关系并支持后台删除</p>
</div>
<div class="actions">
<el-button @click="reloadData">
<el-icon>
<Refresh/>
</el-icon>
刷新
</el-button>
<el-button type="primary" @click="migrateItems">迁移旧订单明细</el-button>
</div>
</div>
<div class="stats-grid">
<div class="mini-stat blue">
<div class="mini-stat__value">{{ stats.totalFavorites }}</div>
<div class="mini-stat__label">收藏总数</div>
</div>
<div class="mini-stat green">
<div class="mini-stat__value">{{ stats.favoriteUsers }}</div>
<div class="mini-stat__label">收藏用户数</div>
</div>
<div class="mini-stat orange">
<div class="mini-stat__value">{{ stats.favoriteProducts }}</div>
<div class="mini-stat__label">被收藏商品数</div>
</div>
<div class="mini-stat purple">
<div class="mini-stat__value">{{ stats.todayFavorites }}</div>
<div class="mini-stat__label">今日新增收藏</div>
</div>
</div>
<div class="panel-card filter-card">
<el-input v-model="keyword" clearable placeholder="搜索用户 / 商品" @keyup.enter="loadFavorites"/>
<el-button type="primary" @click="loadFavorites">搜索</el-button>
</div>
<div class="panel-card">
<el-table v-loading="loading" :data="favorites" stripe>
<el-table-column label="商品" min-width="180" prop="productName" show-overflow-tooltip/>
<el-table-column label="分类" prop="productCategory" width="120"/>
<el-table-column label="用户" prop="username" width="120"/>
<el-table-column label="收藏时间" min-width="170" prop="createdAt"/>
<el-table-column label="操作" width="100">
<template #default="{ row }">
<el-button text type="danger" @click="removeFavorite(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10,20,50]" :total="total"
layout="total, sizes, prev, pager, next, jumper" @current-change="loadFavorites"
@size-change="loadFavorites"/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {adminApi} from '@/api/modules/admin'
import type {AdminFavoriteRow, AdminFavoriteStats} from '@/types/admin'
const loading = ref(false)
const keyword = ref('')
const page = ref(1)
const size = ref(10)
const total = ref(0)
const favorites = ref<AdminFavoriteRow[]>([])
const stats = reactive<AdminFavoriteStats>({
totalFavorites: 0,
favoriteUsers: 0,
favoriteProducts: 0,
todayFavorites: 0
})
const loadStats = async () => {
const res = await adminApi.getFavoriteStats()
Object.assign(stats, res.data)
}
const loadFavorites = async () => {
loading.value = true
try {
const res = await adminApi.getFavorites({page: page.value, size: size.value, keyword: keyword.value || undefined})
favorites.value = res.data.favorites
total.value = res.data.total
} finally {
loading.value = false
}
}
const removeFavorite = async (id: number) => {
await ElMessageBox.confirm('确定删除该收藏记录吗?', '提示', {type: 'warning'})
await adminApi.deleteFavorite(id)
ElMessage.success('删除成功')
loadStats();
loadFavorites()
}
const migrateItems = async () => {
const res = await adminApi.migrateLegacyOrderItems()
ElMessage.success(`迁移完成:迁移 ${res.data.migrated} 条,跳过 ${res.data.skipped}`)
}
const reloadData = async () => {
await Promise.all([loadStats(), loadFavorites()])
}
onMounted(() => {
reloadData()
})
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
gap: 20px;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.page-title {
@apply text-2xl font-bold text-slate-900;
}
.page-subtitle {
@apply text-sm text-slate-500 mt-1;
}
.actions {
display: flex;
gap: 12px;
}
.stats-grid {
display: grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap: 16px;
}
.mini-stat {
@apply rounded-xl p-5 shadow-sm;
background: #fffaf2;
color: #171715;
border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
}
.mini-stat__value {
@apply text-3xl font-bold;
}
.mini-stat__label {
@apply text-sm opacity-90 mt-2;
}
.panel-card {
@apply bg-white rounded-xl p-5;
border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
}
.filter-card {
display: grid;
grid-template-columns:1fr 100px;
gap: 12px;
}
.table-footer {
@apply flex justify-end mt-4;
}
</style>

View File

@@ -7,11 +7,15 @@
</div> </div>
<div class="page-actions"> <div class="page-actions">
<el-button @click="reloadData"> <el-button @click="reloadData">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh/>
</el-icon>
刷新 刷新
</el-button> </el-button>
<el-button type="primary" @click="openCreateDialog"> <el-button type="primary" @click="openCreateDialog">
<el-icon><Plus /></el-icon> <el-icon>
<Plus/>
</el-icon>
创建限时 创建限时
</el-button> </el-button>
</div> </div>
@@ -38,7 +42,11 @@
<div class="panel-card filter-card"> <div class="panel-card filter-card">
<el-input v-model="query.keyword" clearable placeholder="搜索商品名称" @keyup.enter="loadFlashSales"> <el-input v-model="query.keyword" clearable placeholder="搜索商品名称" @keyup.enter="loadFlashSales">
<template #prefix><el-icon><Search /></el-icon></template> <template #prefix>
<el-icon>
<Search/>
</el-icon>
</template>
</el-input> </el-input>
<el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch"> <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
<el-option label="即将开始" value="UPCOMING"/> <el-option label="即将开始" value="UPCOMING"/>
@@ -52,11 +60,12 @@
<div class="panel-card"> <div class="panel-card">
<el-table v-loading="loading" :data="displayFlashSales" stripe> <el-table v-loading="loading" :data="displayFlashSales" stripe>
<el-table-column prop="id" label="ID" width="80" /> <el-table-column label="ID" prop="id" width="80"/>
<el-table-column label="商品" min-width="240"> <el-table-column label="商品" min-width="240">
<template #default="{ row }"> <template #default="{ row }">
<div class="product-cell"> <div class="product-cell">
<SafeImage :src="row.productImageUrl" :alt="row.productName" wrapper-class="product-image" img-class="product-image" /> <SafeImage :alt="row.productName" :src="row.productImageUrl" img-class="product-image"
wrapper-class="product-image"/>
<div> <div>
<div class="product-name">{{ row.productName }}</div> <div class="product-name">{{ row.productName }}</div>
<div class="product-meta">商品ID{{ row.productId }}</div> <div class="product-meta">商品ID{{ row.productId }}</div>
@@ -64,33 +73,38 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="originalPrice" label="原价" width="110"> <el-table-column label="原价" prop="originalPrice" width="110">
<template #default="{ row }">¥{{ formatCurrency(row.originalPrice) }}</template> <template #default="{ row }">¥{{ formatCurrency(row.originalPrice) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="活动价" prop="flashPrice" width="110"> <el-table-column label="活动价" prop="flashPrice" width="110">
<template #default="{ row }">¥{{ formatCurrency(row.flashPrice) }}</template> <template #default="{ row }">¥{{ formatCurrency(row.flashPrice) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="flashStock" label="总库存" width="100" /> <el-table-column label="总库存" prop="flashStock" width="100"/>
<el-table-column prop="remainingStock" label="剩余库存" width="100" /> <el-table-column label="剩余库存" prop="remainingStock" width="100"/>
<el-table-column label="时间范围" min-width="220"> <el-table-column label="时间范围" min-width="220">
<template #default="{ row }"> <template #default="{ row }">
<div>{{ formatTime(row.startTime) }}</div> <div>{{ formatTime(row.startTime) }}</div>
<div class="text-slate-400"> {{ formatTime(row.endTime) }}</div> <div class="text-slate-400"> {{ formatTime(row.endTime) }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" width="110"> <el-table-column label="状态" prop="status" width="110">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag> <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="320" fixed="right"> <el-table-column fixed="right" label="操作" width="320">
<template #default="{ row }"> <template #default="{ row }">
<el-button text type="primary" @click="openDetail(row)">查看</el-button> <el-button text type="primary" @click="openDetail(row)">查看</el-button>
<el-button text type="primary" @click="openEditDialog(row)">编辑</el-button> <el-button text type="primary" @click="openEditDialog(row)">编辑</el-button>
<el-button v-if="row.status === 'UPCOMING'" text type="success" @click="changeStatus('publish', row)">发布</el-button> <el-button v-if="row.status === 'UPCOMING'" text type="success" @click="changeStatus('publish', row)">发布
<el-button v-if="row.status === 'ACTIVE'" text type="warning" @click="changeStatus('pause', row)">暂停</el-button> </el-button>
<el-button v-if="row.status === 'PAUSED'" text type="success" @click="changeStatus('resume', row)">恢复</el-button> <el-button v-if="row.status === 'ACTIVE'" text type="warning" @click="changeStatus('pause', row)">暂停
<el-button v-if="row.status === 'ACTIVE' || row.status === 'PAUSED'" text type="danger" @click="changeStatus('end', row)">结束</el-button> </el-button>
<el-button v-if="row.status === 'PAUSED'" text type="success" @click="changeStatus('resume', row)">恢复
</el-button>
<el-button v-if="row.status === 'ACTIVE' || row.status === 'PAUSED'" text type="danger"
@click="changeStatus('end', row)">结束
</el-button>
<el-button text type="danger" @click="removeFlashSale(row)">删除</el-button> <el-button text type="danger" @click="removeFlashSale(row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
@@ -100,8 +114,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[10, 20, 50]" :page-sizes="[10, 20, 50]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@current-change="loadFlashSales" @current-change="loadFlashSales"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@@ -112,7 +126,7 @@
<el-dialog v-model="formVisible" :title="formMode === 'create' ? '创建限时活动' : '编辑限时活动'" width="760px"> <el-dialog v-model="formVisible" :title="formMode === 'create' ? '创建限时活动' : '编辑限时活动'" width="760px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<el-form-item label="关联商品" prop="productId"> <el-form-item label="关联商品" prop="productId">
<el-select v-model="form.productId" filterable :disabled="formMode === 'edit'" placeholder="请选择商品"> <el-select v-model="form.productId" :disabled="formMode === 'edit'" filterable placeholder="请选择商品">
<el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id"/> <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -131,31 +145,32 @@
<el-form-item label="开始时间" prop="startTime"> <el-form-item label="开始时间" prop="startTime">
<el-date-picker <el-date-picker
v-model="form.startTime" v-model="form.startTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:disabled-date="disablePastDate" :disabled-date="disablePastDate"
class="w-full" class="w-full"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
/> />
</el-form-item> </el-form-item>
<el-form-item label="结束时间" prop="endTime"> <el-form-item label="结束时间" prop="endTime">
<el-date-picker <el-date-picker
v-model="form.endTime" v-model="form.endTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:disabled-date="disablePastDate" :disabled-date="disablePastDate"
class="w-full" class="w-full"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="formVisible = false">取消</el-button> <el-button @click="formVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="submitForm">保存</el-button> <el-button :loading="saving" type="primary" @click="submitForm">保存</el-button>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="detailVisible" title="限时详情" width="760px"> <el-dialog v-model="detailVisible" title="限时详情" width="760px">
<div v-if="currentItem" class="detail-layout"> <div v-if="currentItem" class="detail-layout">
<SafeImage :src="currentItem.productImageUrl" :alt="currentItem.productName" wrapper-class="detail-image" img-class="detail-image" /> <SafeImage :alt="currentItem.productName" :src="currentItem.productImageUrl" img-class="detail-image"
wrapper-class="detail-image"/>
<div class="detail-content"> <div class="detail-content">
<h3>{{ currentItem.productName }}</h3> <h3>{{ currentItem.productName }}</h3>
<div class="price-line"> <div class="price-line">
@@ -180,7 +195,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {computed, onMounted, reactive, ref} from 'vue' import {computed, onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import type {FormInstance, FormRules} from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
@@ -450,7 +465,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.page-shell { .page-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -490,8 +505,13 @@ onMounted(() => {
border: 1px solid #d8cebf; border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04); box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
&__value { @apply text-3xl font-bold; } &__value {
&__label { @apply text-sm opacity-90 mt-2; } @apply text-3xl font-bold;
}
&__label {
@apply text-sm opacity-90 mt-2;
}
} }
.panel-card { .panel-card {

View File

@@ -7,11 +7,15 @@
</div> </div>
<div class="page-actions"> <div class="page-actions">
<el-button @click="reloadData"> <el-button @click="reloadData">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh/>
</el-icon>
刷新 刷新
</el-button> </el-button>
<el-button type="primary" @click="openCreateDialog"> <el-button type="primary" @click="openCreateDialog">
<el-icon><Plus /></el-icon> <el-icon>
<Plus/>
</el-icon>
创建拼团 创建拼团
</el-button> </el-button>
</div> </div>
@@ -49,11 +53,12 @@
<div class="panel-card"> <div class="panel-card">
<el-table v-loading="loading" :data="list" stripe> <el-table v-loading="loading" :data="list" stripe>
<el-table-column prop="id" label="ID" width="80" /> <el-table-column label="ID" prop="id" width="80"/>
<el-table-column label="商品" min-width="240"> <el-table-column label="商品" min-width="240">
<template #default="{ row }"> <template #default="{ row }">
<div class="product-cell"> <div class="product-cell">
<SafeImage :src="row.productImageUrl" :alt="row.productName" wrapper-class="product-image" img-class="product-image" /> <SafeImage :alt="row.productName" :src="row.productImageUrl" img-class="product-image"
wrapper-class="product-image"/>
<div> <div>
<div class="product-name">{{ row.productName }}</div> <div class="product-name">{{ row.productName }}</div>
<div class="product-meta">商品ID{{ row.productId }}</div> <div class="product-meta">商品ID{{ row.productId }}</div>
@@ -67,7 +72,7 @@
<el-table-column label="拼团价" width="100"> <el-table-column label="拼团价" width="100">
<template #default="{ row }"><span class="font-bold">¥{{ formatCurrency(row.groupPrice) }}</span></template> <template #default="{ row }"><span class="font-bold">¥{{ formatCurrency(row.groupPrice) }}</span></template>
</el-table-column> </el-table-column>
<el-table-column prop="requiredMembers" label="成团人数" width="90" /> <el-table-column label="成团人数" prop="requiredMembers" width="90"/>
<el-table-column label="库存" width="120"> <el-table-column label="库存" width="120">
<template #default="{ row }">{{ row.remainingStock }} / {{ row.totalStock }}</template> <template #default="{ row }">{{ row.remainingStock }} / {{ row.totalStock }}</template>
</el-table-column> </el-table-column>
@@ -82,7 +87,7 @@
<el-tag :type="getStatusType(row.status)">{{ row.statusDescription }}</el-tag> <el-tag :type="getStatusType(row.status)">{{ row.statusDescription }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="240" fixed="right"> <el-table-column fixed="right" label="操作" width="240">
<template #default="{ row }"> <template #default="{ row }">
<el-button text type="primary" @click="openEditDialog(row)">编辑</el-button> <el-button text type="primary" @click="openEditDialog(row)">编辑</el-button>
<el-button v-if="row.status === 'DRAFT'" text type="success" @click="publishActivity(row)">发布</el-button> <el-button v-if="row.status === 'DRAFT'" text type="success" @click="publishActivity(row)">发布</el-button>
@@ -100,8 +105,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[10, 20, 50]" :page-sizes="[10, 20, 50]"
:total="pagination.total"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@current-change="loadList" @current-change="loadList"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@@ -113,7 +118,8 @@
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑拼团活动' : '创建拼团活动'" width="760px"> <el-dialog v-model="dialogVisible" :title="editingId ? '编辑拼团活动' : '创建拼团活动'" width="760px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<el-form-item label="关联商品" prop="productId"> <el-form-item label="关联商品" prop="productId">
<el-select v-model="form.productId" filterable :disabled="!!editingId" placeholder="请选择商品" class="w-full"> <el-select v-model="form.productId" :disabled="!!editingId" class="w-full" filterable
placeholder="请选择商品">
<el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id"/> <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -132,46 +138,46 @@
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="成团人数" prop="requiredMembers"> <el-form-item label="成团人数" prop="requiredMembers">
<el-input-number v-model="form.requiredMembers" :min="2" :max="100" class="w-full" /> <el-input-number v-model="form.requiredMembers" :max="100" :min="2" class="w-full"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="每人限购" prop="maxPerUser"> <el-form-item label="每人限购" prop="maxPerUser">
<el-input-number v-model="form.maxPerUser" :min="1" :max="10" class="w-full" /> <el-input-number v-model="form.maxPerUser" :max="10" :min="1" class="w-full"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="有效期(分钟)"> <el-form-item label="有效期(分钟)">
<el-input-number v-model="form.durationMinutes" :min="1" :max="10080" class="w-full" /> <el-input-number v-model="form.durationMinutes" :max="10080" :min="1" class="w-full"/>
</el-form-item> </el-form-item>
<el-form-item label="开始时间" prop="startTime"> <el-form-item label="开始时间" prop="startTime">
<el-date-picker <el-date-picker
v-model="form.startTime" v-model="form.startTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:disabled-date="disablePastDate" :disabled-date="disablePastDate"
class="w-full" class="w-full"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
/> />
</el-form-item> </el-form-item>
<el-form-item label="结束时间" prop="endTime"> <el-form-item label="结束时间" prop="endTime">
<el-date-picker <el-date-picker
v-model="form.endTime" v-model="form.endTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:disabled-date="disablePastDate" :disabled-date="disablePastDate"
class="w-full" class="w-full"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button> <el-button :loading="submitting" type="primary" @click="handleSubmit">确定</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue' import {ref, reactive, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import type {FormInstance, FormRules} from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
@@ -232,11 +238,16 @@ const formatTime = (value: string) => dayjs(value).format(TIME_FORMAT)
const getStatusType = (status: string) => { const getStatusType = (status: string) => {
switch (status) { switch (status) {
case 'DRAFT': return 'info' case 'DRAFT':
case 'UPCOMING': return 'warning' return 'info'
case 'ACTIVE': return 'success' case 'UPCOMING':
case 'ENDED': return '' return 'warning'
default: return 'info' case 'ACTIVE':
return 'success'
case 'ENDED':
return ''
default:
return 'info'
} }
} }
@@ -398,7 +409,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.page-shell { .page-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -438,8 +449,13 @@ onMounted(() => {
border: 1px solid #d8cebf; border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04); box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
&__value { @apply text-3xl font-bold; } &__value {
&__label { @apply text-sm opacity-90 mt-2; } @apply text-3xl font-bold;
}
&__label {
@apply text-sm opacity-90 mt-2;
}
} }
.panel-card { .panel-card {

View File

@@ -6,10 +6,13 @@
<p class="page-subtitle">复刻 JSP 监控页的指标卡服务状态性能趋势与实时日志</p> <p class="page-subtitle">复刻 JSP 监控页的指标卡服务状态性能趋势与实时日志</p>
</div> </div>
<div class="page-actions"> <div class="page-actions">
<el-switch v-model="autoRefresh" inline-prompt active-text="自动刷新" inactive-text="手动" @change="toggleAutoRefresh" /> <el-switch v-model="autoRefresh" active-text="自动刷新" inactive-text="手动" inline-prompt
@change="toggleAutoRefresh"/>
<el-button @click="clearLogs">清空日志</el-button> <el-button @click="clearLogs">清空日志</el-button>
<el-button type="primary" @click="refreshAll"> <el-button type="primary" @click="refreshAll">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh/>
</el-icon>
刷新全部 刷新全部
</el-button> </el-button>
</div> </div>
@@ -49,11 +52,13 @@
<el-tag type="success">运行中</el-tag> <el-tag type="success">运行中</el-tag>
</div> </div>
<div class="service-row"> <div class="service-row">
<div class="service-name"><span :class="['dot', redisHealthy ? 'success' : 'danger']"></span>Redis 集群</div> <div class="service-name"><span :class="['dot', redisHealthy ? 'success' : 'danger']"></span>Redis 集群
</div>
<el-tag :type="redisHealthy ? 'success' : 'danger'">{{ redisHealthy ? '正常' : '异常' }}</el-tag> <el-tag :type="redisHealthy ? 'success' : 'danger'">{{ redisHealthy ? '正常' : '异常' }}</el-tag>
</div> </div>
<div class="service-row"> <div class="service-row">
<div class="service-name"><span :class="['dot', mysqlHealthy ? 'success' : 'danger']"></span>MySQL 服务</div> <div class="service-name"><span :class="['dot', mysqlHealthy ? 'success' : 'danger']"></span>MySQL 服务
</div>
<el-tag :type="mysqlHealthy ? 'success' : 'danger'">{{ mysqlHealthy ? '正常' : '异常' }}</el-tag> <el-tag :type="mysqlHealthy ? 'success' : 'danger'">{{ mysqlHealthy ? '正常' : '异常' }}</el-tag>
</div> </div>
</div> </div>
@@ -79,14 +84,14 @@
</div> </div>
</div> </div>
<el-table v-loading="loading" :data="redisNodes" stripe> <el-table v-loading="loading" :data="redisNodes" stripe>
<el-table-column prop="node" label="节点" min-width="180" /> <el-table-column label="节点" min-width="180" prop="node"/>
<el-table-column prop="status" label="状态" width="100"> <el-table-column label="状态" prop="status" width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.status === '正常' ? 'success' : 'danger'">{{ row.status }}</el-tag> <el-tag :type="row.status === '正常' ? 'success' : 'danger'">{{ row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="memory" label="内存" width="110" /> <el-table-column label="内存" prop="memory" width="110"/>
<el-table-column prop="connections" label="连接数" width="110" /> <el-table-column label="连接数" prop="connections" width="110"/>
</el-table> </el-table>
</div> </div>
@@ -118,11 +123,11 @@
<div class="alerts-box"> <div class="alerts-box">
<el-alert <el-alert
:title="systemAlert.title" :closable="false"
:description="systemAlert.description" :description="systemAlert.description"
:title="systemAlert.title"
:type="systemAlert.type" :type="systemAlert.type"
show-icon show-icon
:closable="false"
/> />
</div> </div>
</div> </div>
@@ -138,7 +143,10 @@
<div class="log-list"> <div class="log-list">
<div v-for="item in logs" :key="item.id" class="log-row"> <div v-for="item in logs" :key="item.id" class="log-row">
<span class="log-time">{{ item.time }}</span> <span class="log-time">{{ item.time }}</span>
<el-tag size="small" :type="item.level === 'error' ? 'danger' : item.level === 'warn' ? 'warning' : 'success'">{{ item.level.toUpperCase() }}</el-tag> <el-tag :type="item.level === 'error' ? 'danger' : item.level === 'warn' ? 'warning' : 'success'"
size="small">
{{ item.level.toUpperCase() }}
</el-tag>
<span class="log-message">{{ item.message }}</span> <span class="log-message">{{ item.message }}</span>
</div> </div>
</div> </div>
@@ -146,7 +154,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {computed, nextTick, onMounted, onUnmounted, reactive, ref} from 'vue' import {computed, nextTick, onMounted, onUnmounted, reactive, ref} from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@@ -335,7 +343,7 @@ onUnmounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.page-shell { .page-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -376,8 +384,13 @@ onUnmounted(() => {
border: 1px solid #d8cebf; border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04); box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
&__value { @apply text-3xl font-bold; } &__value {
&__label { @apply text-sm opacity-90 mt-2; } @apply text-3xl font-bold;
}
&__label {
@apply text-sm opacity-90 mt-2;
}
} }
.content-grid { .content-grid {
@@ -434,8 +447,13 @@ onUnmounted(() => {
display: inline-block; display: inline-block;
} }
.dot.success { background: #171715; } .dot.success {
.dot.danger { background: #666666; } background: #171715;
}
.dot.danger {
background: #666666;
}
.chart-container { .chart-container {
height: 320px; height: 320px;

View File

@@ -7,12 +7,16 @@
</div> </div>
<div class="page-actions"> <div class="page-actions">
<el-button @click="reloadData"> <el-button @click="reloadData">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh/>
</el-icon>
刷新 刷新
</el-button> </el-button>
<el-button type="primary" @click="migrateItems">迁移旧订单明细</el-button> <el-button type="primary" @click="migrateItems">迁移旧订单明细</el-button>
<el-button @click="exportCsv"> <el-button @click="exportCsv">
<el-icon><Download /></el-icon> <el-icon>
<Download/>
</el-icon>
导出 导出
</el-button> </el-button>
</div> </div>
@@ -39,7 +43,11 @@
<div class="panel-card filter-card"> <div class="panel-card filter-card">
<el-input v-model="query.keyword" clearable placeholder="搜索订单号 / 用户 / 商品" @keyup.enter="loadOrders"> <el-input v-model="query.keyword" clearable placeholder="搜索订单号 / 用户 / 商品" @keyup.enter="loadOrders">
<template #prefix><el-icon><Search /></el-icon></template> <template #prefix>
<el-icon>
<Search/>
</el-icon>
</template>
</el-input> </el-input>
<el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch"> <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
<el-option label="待支付" value="1"/> <el-option label="待支付" value="1"/>
@@ -56,11 +64,11 @@
<div class="panel-card"> <div class="panel-card">
<el-table v-loading="loading" :data="displayOrders" stripe> <el-table v-loading="loading" :data="displayOrders" stripe>
<el-table-column prop="orderNo" label="订单号" min-width="120" /> <el-table-column label="订单号" min-width="120" prop="orderNo"/>
<el-table-column prop="username" label="用户" min-width="100" /> <el-table-column label="用户" min-width="100" prop="username"/>
<el-table-column prop="productName" label="商品" min-width="160" show-overflow-tooltip /> <el-table-column label="商品" min-width="160" prop="productName" show-overflow-tooltip/>
<el-table-column prop="quantity" label="数量" width="80" /> <el-table-column label="数量" prop="quantity" width="80"/>
<el-table-column prop="totalAmount" label="金额" width="110"> <el-table-column label="金额" prop="totalAmount" width="110">
<template #default="{ row }">¥{{ formatCurrency(row.totalAmount) }}</template> <template #default="{ row }">¥{{ formatCurrency(row.totalAmount) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="类型" width="100"> <el-table-column label="类型" width="100">
@@ -68,19 +76,21 @@
<el-tag :type="getOrderTypeTag(row.orderType)">{{ getOrderTypeText(row.orderType) }}</el-tag> <el-tag :type="getOrderTypeTag(row.orderType)">{{ getOrderTypeText(row.orderType) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" width="100"> <el-table-column label="状态" prop="status" width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag> <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createdAt" label="创建时间" min-width="170"> <el-table-column label="创建时间" min-width="170" prop="createdAt">
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template> <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="220" fixed="right"> <el-table-column fixed="right" label="操作" width="220">
<template #default="{ row }"> <template #default="{ row }">
<el-button text type="primary" @click="openDetail(row.id)">详情</el-button> <el-button text type="primary" @click="openDetail(row.id)">详情</el-button>
<el-button v-if="row.status === 'PAID'" text type="success" @click="shipOrder(row)">发货</el-button> <el-button v-if="row.status === 'PAID'" text type="success" @click="shipOrder(row)">发货</el-button>
<el-button v-if="row.status === 'PENDING' || row.status === 'PAID'" text type="danger" @click="cancelOrder(row)">取消</el-button> <el-button v-if="row.status === 'PENDING' || row.status === 'PAID'" text type="danger"
@click="cancelOrder(row)">取消
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -89,8 +99,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[10, 20, 50]" :page-sizes="[10, 20, 50]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@current-change="loadOrders" @current-change="loadOrders"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@@ -108,8 +118,9 @@
<el-tag :type="getStatusType(currentOrder.status)">{{ getStatusText(currentOrder.status) }}</el-tag> <el-tag :type="getStatusType(currentOrder.status)">{{ getStatusText(currentOrder.status) }}</el-tag>
</div> </div>
<div class="item-card" v-for="item in currentOrder.items" :key="item.id"> <div v-for="item in currentOrder.items" :key="item.id" class="item-card">
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="item-image" img-class="item-image" /> <SafeImage :alt="item.productName" :src="item.productImage" img-class="item-image"
wrapper-class="item-image"/>
<div class="item-info"> <div class="item-info">
<div class="item-name">{{ item.productName }}</div> <div class="item-name">{{ item.productName }}</div>
<div class="item-meta">¥{{ formatCurrency(item.price) }} × {{ item.quantity }}</div> <div class="item-meta">¥{{ formatCurrency(item.price) }} × {{ item.quantity }}</div>
@@ -133,7 +144,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {computed, onMounted, reactive, ref} from 'vue' import {computed, onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@@ -297,7 +308,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.page-shell { .page-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -337,8 +348,13 @@ onMounted(() => {
border: 1px solid #d8cebf; border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04); box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
&__value { @apply text-3xl font-bold; } &__value {
&__label { @apply text-sm opacity-90 mt-2; } @apply text-3xl font-bold;
}
&__label {
@apply text-sm opacity-90 mt-2;
}
} }
.panel-card { .panel-card {

View File

@@ -7,11 +7,15 @@
</div> </div>
<div class="page-actions"> <div class="page-actions">
<el-button @click="reloadData"> <el-button @click="reloadData">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh/>
</el-icon>
刷新 刷新
</el-button> </el-button>
<el-button type="primary" @click="openCreateDialog"> <el-button type="primary" @click="openCreateDialog">
<el-icon><Plus /></el-icon> <el-icon>
<Plus/>
</el-icon>
添加商品 添加商品
</el-button> </el-button>
</div> </div>
@@ -39,20 +43,22 @@
<div class="panel-card filter-card"> <div class="panel-card filter-card">
<el-input <el-input
v-model="query.keyword" v-model="query.keyword"
placeholder="搜索商品名称"
clearable clearable
placeholder="搜索商品名称"
@keyup.enter="handleSearch" @keyup.enter="handleSearch"
> >
<template #prefix> <template #prefix>
<el-icon><Search /></el-icon> <el-icon>
<Search/>
</el-icon>
</template> </template>
</el-input> </el-input>
<el-select v-model="query.category" clearable placeholder="全部分类" @change="handleSearch"> <el-select v-model="query.category" clearable placeholder="全部分类" @change="handleSearch">
<el-option v-for="item in categories" :key="item" :label="item" :value="item"/> <el-option v-for="item in categories" :key="item" :label="item" :value="item"/>
</el-select> </el-select>
<el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch"> <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
<el-option label="上架" :value="1" /> <el-option :value="1" label="上架"/>
<el-option label="下架" :value="0" /> <el-option :value="0" label="下架"/>
</el-select> </el-select>
<el-button type="primary" @click="handleSearch">搜索</el-button> <el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button> <el-button @click="handleReset">重置</el-button>
@@ -60,32 +66,32 @@
<div class="panel-card"> <div class="panel-card">
<el-table v-loading="loading" :data="products" stripe> <el-table v-loading="loading" :data="products" stripe>
<el-table-column prop="id" label="ID" width="80" /> <el-table-column label="ID" prop="id" width="80"/>
<el-table-column label="商品图片" width="100"> <el-table-column label="商品图片" width="100">
<template #default="{ row }"> <template #default="{ row }">
<SafeImage :src="row.imageUrl" :alt="row.name" wrapper-class="product-image" img-class="product-image" /> <SafeImage :alt="row.name" :src="row.imageUrl" img-class="product-image" wrapper-class="product-image"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="商品名称" min-width="180" show-overflow-tooltip /> <el-table-column label="商品名称" min-width="180" prop="name" show-overflow-tooltip/>
<el-table-column prop="description" label="商品描述" min-width="220" show-overflow-tooltip /> <el-table-column label="商品描述" min-width="220" prop="description" show-overflow-tooltip/>
<el-table-column prop="category" label="分类" width="120" /> <el-table-column label="分类" prop="category" width="120"/>
<el-table-column prop="price" label="价格" width="110"> <el-table-column label="价格" prop="price" width="110">
<template #default="{ row }">¥{{ formatCurrency(row.price) }}</template> <template #default="{ row }">¥{{ formatCurrency(row.price) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="stock" label="库存" width="90"> <el-table-column label="库存" prop="stock" width="90">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.stock > 10 ? 'success' : 'warning'">{{ row.stock }}</el-tag> <el-tag :type="row.stock > 10 ? 'success' : 'warning'">{{ row.stock }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" width="100"> <el-table-column label="状态" prop="status" width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'">{{ row.status === 1 ? '上架' : '下架' }}</el-tag> <el-tag :type="row.status === 1 ? 'success' : 'info'">{{ row.status === 1 ? '上架' : '下架' }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createdAt" label="创建时间" min-width="170"> <el-table-column label="创建时间" min-width="170" prop="createdAt">
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template> <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="240" fixed="right"> <el-table-column fixed="right" label="操作" width="240">
<template #default="{ row }"> <template #default="{ row }">
<el-button text type="primary" @click="openDetail(row.id)">查看</el-button> <el-button text type="primary" @click="openDetail(row.id)">查看</el-button>
<el-button text type="primary" @click="openEditDialog(row.id)">编辑</el-button> <el-button text type="primary" @click="openEditDialog(row.id)">编辑</el-button>
@@ -98,8 +104,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[10, 20, 50]" :page-sizes="[10, 20, 50]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@current-change="loadProducts" @current-change="loadProducts"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@@ -113,7 +119,8 @@
<el-input v-model="form.name" placeholder="请输入商品名称"/> <el-input v-model="form.name" placeholder="请输入商品名称"/>
</el-form-item> </el-form-item>
<el-form-item label="商品分类" prop="category"> <el-form-item label="商品分类" prop="category">
<el-select v-model="form.category" placeholder="请选择分类" class="w-full" allow-create filterable default-first-option> <el-select v-model="form.category" allow-create class="w-full" default-first-option filterable
placeholder="请选择分类">
<el-option v-for="item in categories" :key="item" :label="item" :value="item"/> <el-option v-for="item in categories" :key="item" :label="item" :value="item"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -139,18 +146,18 @@
<ImageUpload v-model="form.imageUrl"/> <ImageUpload v-model="form.imageUrl"/>
</el-form-item> </el-form-item>
<el-form-item label="商品描述" prop="description"> <el-form-item label="商品描述" prop="description">
<el-input v-model="form.description" type="textarea" :rows="4" maxlength="500" show-word-limit /> <el-input v-model="form.description" :rows="4" maxlength="500" show-word-limit type="textarea"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="formVisible = false">取消</el-button> <el-button @click="formVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="submitForm">保存</el-button> <el-button :loading="saving" type="primary" @click="submitForm">保存</el-button>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="detailVisible" title="商品详情" width="760px"> <el-dialog v-model="detailVisible" title="商品详情" width="760px">
<div v-if="detail" class="detail-layout"> <div v-if="detail" class="detail-layout">
<SafeImage :src="detail.imageUrl" :alt="detail.name" wrapper-class="detail-image" img-class="detail-image" /> <SafeImage :alt="detail.name" :src="detail.imageUrl" img-class="detail-image" wrapper-class="detail-image"/>
<div class="detail-content"> <div class="detail-content">
<h3>{{ detail.name }}</h3> <h3>{{ detail.name }}</h3>
<div class="detail-price">¥{{ formatCurrency(detail.price) }}</div> <div class="detail-price">¥{{ formatCurrency(detail.price) }}</div>
@@ -176,7 +183,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue' import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import type {FormInstance, FormRules} from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
@@ -375,7 +382,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.page-shell { .page-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -0,0 +1,334 @@
<template>
<div class="page-shell">
<div class="page-header">
<div>
<h2 class="page-title">退货管理</h2>
<p class="page-subtitle">处理用户退货申请审核和退款</p>
</div>
<el-button @click="reloadData">
<el-icon>
<Refresh/>
</el-icon>
刷新
</el-button>
</div>
<div class="stats-grid">
<div class="mini-stat orange">
<div class="mini-stat__value">{{ stats.pendingCount }}</div>
<div class="mini-stat__label">待审核</div>
</div>
<div class="mini-stat blue">
<div class="mini-stat__value">{{ stats.approvedCount }}</div>
<div class="mini-stat__label">已同意</div>
</div>
<div class="mini-stat purple">
<div class="mini-stat__value">{{ stats.returningCount }}</div>
<div class="mini-stat__label">退货中</div>
</div>
<div class="mini-stat green">
<div class="mini-stat__value">{{ stats.completedCount }}</div>
<div class="mini-stat__label">已完成</div>
</div>
</div>
<div class="panel-card filter-card">
<el-select v-model="filters.status" clearable placeholder="全部状态" style="width: 150px" @change="loadReturns">
<el-option :value="undefined" label="全部"/>
<el-option :value="1" label="待审核"/>
<el-option :value="2" label="已同意"/>
<el-option :value="3" label="退货中"/>
<el-option :value="4" label="已完成"/>
<el-option :value="5" label="已拒绝"/>
<el-option :value="6" label="已取消"/>
</el-select>
<el-button type="primary" @click="loadReturns">查询</el-button>
</div>
<div class="panel-card">
<el-table v-loading="loading" :data="returns" stripe>
<el-table-column label="退货单号" min-width="140" prop="returnNo"/>
<el-table-column label="订单号" min-width="140" prop="orderNo"/>
<el-table-column label="用户" prop="username" width="100"/>
<el-table-column label="商品" min-width="160" prop="productName" show-overflow-tooltip/>
<el-table-column label="退款金额" prop="refundAmount" width="100">
<template #default="{ row }">&yen;{{ row.refundAmount }}</template>
</el-table-column>
<el-table-column label="退货原因" min-width="120" prop="reason" show-overflow-tooltip/>
<el-table-column label="状态" prop="statusText" width="90">
<template #default="{ row }">
<el-tag :type="getReturnStatusType(row.status)" size="small">{{ row.statusText }}</el-tag>
</template>
</el-table-column>
<el-table-column label="申请时间" min-width="170" prop="createdAt">
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template #default="{ row }">
<el-button v-if="row.status === 'PENDING'" text type="primary" @click="openReviewDialog(row)">审核
</el-button>
<el-button v-if="row.status === 'RETURNING'" text type="success" @click="handleComplete(row)">确认退款
</el-button>
<el-button text @click="openDetailDialog(row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10,20,50]" :total="total"
layout="total, sizes, prev, pager, next, jumper" @current-change="loadReturns"
@size-change="loadReturns"/>
</div>
</div>
<!-- 审核弹窗 -->
<el-dialog v-model="reviewVisible" title="退货审核" width="500px">
<div v-if="currentReturn" class="space-y-4">
<div class="text-sm"><span class="text-gray-500">退货单号</span>{{ currentReturn.returnNo }}</div>
<div class="text-sm"><span class="text-gray-500">用户</span>{{ currentReturn.username }}</div>
<div class="text-sm"><span class="text-gray-500">退款金额</span><span class="text-red-500 font-semibold">&yen;{{
currentReturn.refundAmount
}}</span></div>
<div class="text-sm"><span class="text-gray-500">退货原因</span>{{ currentReturn.reason }}</div>
<div v-if="currentReturn.description" class="text-sm"><span
class="text-gray-500">详细描述</span>{{ currentReturn.description }}
</div>
<el-divider/>
<el-radio-group v-model="reviewForm.status">
<el-radio :label="2">同意退货</el-radio>
<el-radio :label="5">拒绝退货</el-radio>
</el-radio-group>
<el-input v-if="reviewForm.status === 5" v-model="reviewForm.rejectReason" :rows="3" placeholder="请输入拒绝原因"
type="textarea"/>
<el-input v-model="reviewForm.adminRemark" :rows="2" placeholder="管理员备注(选填)" type="textarea"/>
</div>
<template #footer>
<el-button @click="reviewVisible = false">取消</el-button>
<el-button :disabled="!reviewForm.status" type="primary" @click="submitReview">确认</el-button>
</template>
</el-dialog>
<!-- 详情弹窗 -->
<el-dialog v-model="detailVisible" title="退货详情" width="600px">
<div v-if="currentReturn" class="space-y-3 text-sm">
<div><span class="text-gray-500">退货单号</span>{{ currentReturn.returnNo }}</div>
<div><span class="text-gray-500">订单号</span>{{ currentReturn.orderNo }}</div>
<div><span class="text-gray-500">用户</span>{{ currentReturn.username }}</div>
<div><span class="text-gray-500">商品</span>{{ currentReturn.productName }}</div>
<div><span class="text-gray-500">退款金额</span><span
class="text-red-500 font-semibold">&yen;{{ currentReturn.refundAmount }}</span></div>
<div><span class="text-gray-500">退货原因</span>{{ currentReturn.reason }}</div>
<div v-if="currentReturn.description"><span class="text-gray-500">详细描述</span>{{
currentReturn.description
}}
</div>
<div><span class="text-gray-500">状态</span>
<el-tag :type="getReturnStatusType(currentReturn.status)" size="small">{{ currentReturn.statusText }}</el-tag>
</div>
<div v-if="currentReturn.rejectReason"><span class="text-gray-500">拒绝原因</span><span
class="text-red-500">{{ currentReturn.rejectReason }}</span></div>
<div v-if="currentReturn.returnTracking"><span
class="text-gray-500">物流单号</span>{{ currentReturn.returnTracking }}
</div>
<div v-if="currentReturn.adminRemark"><span class="text-gray-500">管理员备注</span>{{
currentReturn.adminRemark
}}
</div>
<div><span class="text-gray-500">申请时间</span>{{ formatTime(currentReturn.createdAt) }}</div>
<div v-if="currentReturn.reviewedAt"><span
class="text-gray-500">审核时间</span>{{ formatTime(currentReturn.reviewedAt) }}
</div>
<div v-if="currentReturn.shippedAt"><span
class="text-gray-500">寄出时间</span>{{ formatTime(currentReturn.shippedAt) }}
</div>
<div v-if="currentReturn.completedAt"><span
class="text-gray-500">完成时间</span>{{ formatTime(currentReturn.completedAt) }}
</div>
</div>
<template #footer>
<el-button @click="detailVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {returnApi} from '@/api/modules/return'
import {normalizeOrderReturn} from '@/utils/normalizers'
import type {OrderReturn} from '@/types/api'
import dayjs from 'dayjs'
const loading = ref(false)
const page = ref(1)
const size = ref(10)
const total = ref(0)
const returns = ref<OrderReturn[]>([])
const filters = reactive<{ status: number | undefined }>({status: undefined})
const stats = reactive({
pendingCount: 0,
approvedCount: 0,
returningCount: 0,
completedCount: 0,
rejectedCount: 0,
cancelledCount: 0,
totalCount: 0
})
const reviewVisible = ref(false)
const detailVisible = ref(false)
const currentReturn = ref<OrderReturn | null>(null)
const reviewForm = reactive({status: 0 as number, rejectReason: '', adminRemark: ''})
const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
const getReturnStatusType = (status: string) => ({
PENDING: 'warning',
APPROVED: 'primary',
RETURNING: 'primary',
COMPLETED: 'success',
REJECTED: 'danger',
CANCELLED: 'info'
}[status] || 'info')
const loadStats = async () => {
try {
const res = await returnApi.getStatistics()
if (res.success) Object.assign(stats, res.data)
} catch (error) {
console.error('加载统计失败:', error)
}
}
const loadReturns = async () => {
loading.value = true
try {
const res = await returnApi.getAll({
status: filters.status,
page: page.value - 1,
size: size.value,
})
if (res.success) {
returns.value = (res.data.content || []).map((item: any) => normalizeOrderReturn(item))
total.value = res.data.totalElements || 0
}
} finally {
loading.value = false
}
}
const openReviewDialog = (row: OrderReturn) => {
currentReturn.value = row
reviewForm.status = 0
reviewForm.rejectReason = ''
reviewForm.adminRemark = ''
reviewVisible.value = true
}
const openDetailDialog = (row: OrderReturn) => {
currentReturn.value = row
detailVisible.value = true
}
const submitReview = async () => {
if (!currentReturn.value || !reviewForm.status) return
if (reviewForm.status === 5 && !reviewForm.rejectReason.trim()) {
ElMessage.warning('请输入拒绝原因')
return
}
try {
await returnApi.adminReview(currentReturn.value.id, {
status: reviewForm.status,
rejectReason: reviewForm.status === 5 ? reviewForm.rejectReason : undefined,
adminRemark: reviewForm.adminRemark || undefined,
})
ElMessage.success('审核完成')
reviewVisible.value = false
reloadData()
} catch (error) {
console.error('审核失败:', error)
}
}
const handleComplete = async (row: OrderReturn) => {
await ElMessageBox.confirm(`确认退款 ¥${row.refundAmount} 给用户 ${row.username}`, '确认退款', {
confirmButtonText: '确认退款',
cancelButtonText: '取消',
type: 'warning'
})
try {
await returnApi.adminComplete(row.id)
ElMessage.success('退款已完成')
reloadData()
} catch (error) {
console.error('确认退款失败:', error)
}
}
const reloadData = async () => {
await Promise.all([loadStats(), loadReturns()])
}
onMounted(() => {
reloadData()
})
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
gap: 20px;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.page-title {
@apply text-2xl font-bold text-slate-900;
}
.page-subtitle {
@apply text-sm text-slate-500 mt-1;
}
.stats-grid {
display: grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap: 16px;
}
.mini-stat {
@apply rounded-xl p-5 shadow-sm;
background: #fffaf2;
color: #171715;
border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
}
.mini-stat__value {
@apply text-3xl font-bold;
}
.mini-stat__label {
@apply text-sm opacity-90 mt-2;
}
.panel-card {
@apply bg-white rounded-xl p-5;
border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
}
.filter-card {
display: flex;
gap: 12px;
align-items: center;
}
.table-footer {
@apply flex justify-end mt-4;
}
</style>

View File

@@ -0,0 +1,204 @@
<template>
<div class="page-shell">
<div class="page-header">
<div>
<h2 class="page-title">评价管理</h2>
<p class="page-subtitle">查看隐藏和回复用户评价</p>
</div>
<el-button @click="reloadData">
<el-icon>
<Refresh/>
</el-icon>
刷新
</el-button>
</div>
<div class="stats-grid">
<div class="mini-stat blue">
<div class="mini-stat__value">{{ stats.totalReviews }}</div>
<div class="mini-stat__label">评价总数</div>
</div>
<div class="mini-stat green">
<div class="mini-stat__value">{{ stats.todayReviews }}</div>
<div class="mini-stat__label">今日新增</div>
</div>
<div class="mini-stat orange">
<div class="mini-stat__value">{{ stats.averageRating.toFixed(1) }}</div>
<div class="mini-stat__label">平均评分</div>
</div>
<div class="mini-stat purple">
<div class="mini-stat__value">{{ stats.fiveStarReviews }}</div>
<div class="mini-stat__label">五星评价</div>
</div>
</div>
<div class="panel-card filter-card">
<el-input v-model="keyword" clearable placeholder="搜索用户 / 商品 / 评价内容" @keyup.enter="loadReviews"/>
<el-button type="primary" @click="loadReviews">搜索</el-button>
</div>
<div class="panel-card">
<el-table v-loading="loading" :data="reviews" stripe>
<el-table-column label="商品" min-width="160" prop="productName" show-overflow-tooltip/>
<el-table-column label="用户" prop="username" width="120"/>
<el-table-column label="评分" prop="rating" width="120">
<template #default="{ row }">
<el-rate :model-value="row.rating" disabled/>
</template>
</el-table-column>
<el-table-column label="评价内容" min-width="240" prop="content" show-overflow-tooltip/>
<el-table-column label="状态" prop="statusText" width="90"/>
<el-table-column label="回复" min-width="200" prop="adminReply" show-overflow-tooltip/>
<el-table-column label="时间" min-width="170" prop="createdAt"/>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button text type="primary" @click="openReply(row)">回复</el-button>
<el-button :type="row.status === 1 ? 'warning' : 'success'" text @click="toggleStatus(row)">
{{ row.status === 1 ? '隐藏' : '显示' }}
</el-button>
<el-button text type="danger" @click="removeReview(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10,20,50]" :total="total"
layout="total, sizes, prev, pager, next, jumper" @current-change="loadReviews"
@size-change="loadReviews"/>
</div>
</div>
<el-dialog v-model="replyVisible" title="评价回复" width="600px">
<el-input v-model="replyText" :rows="5" maxlength="500" placeholder="请输入管理员回复" show-word-limit
type="textarea"/>
<template #footer>
<el-button @click="replyVisible = false">取消</el-button>
<el-button type="primary" @click="submitReply">保存回复</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {adminApi} from '@/api/modules/admin'
import type {AdminReviewRow, AdminReviewStats} from '@/types/admin'
const loading = ref(false)
const keyword = ref('')
const page = ref(1)
const size = ref(10)
const total = ref(0)
const reviews = ref<AdminReviewRow[]>([])
const stats = reactive<AdminReviewStats>({totalReviews: 0, todayReviews: 0, averageRating: 0, fiveStarReviews: 0})
const replyVisible = ref(false)
const currentReviewId = ref<number | null>(null)
const replyText = ref('')
const loadStats = async () => {
const res = await adminApi.getReviewStats()
Object.assign(stats, res.data)
}
const loadReviews = async () => {
loading.value = true
try {
const res = await adminApi.getReviews({page: page.value, size: size.value, keyword: keyword.value || undefined})
reviews.value = res.data.reviews
total.value = res.data.total
} finally {
loading.value = false
}
}
const openReply = (row: AdminReviewRow) => {
currentReviewId.value = row.id;
replyText.value = row.adminReply || '';
replyVisible.value = true
}
const submitReply = async () => {
if (!currentReviewId.value) return
await adminApi.updateReview(currentReviewId.value, {adminReply: replyText.value, status: 1})
ElMessage.success('回复已保存')
replyVisible.value = false
loadReviews()
}
const toggleStatus = async (row: AdminReviewRow) => {
await adminApi.updateReview(row.id, {status: row.status === 1 ? 0 : 1})
ElMessage.success('状态已更新')
loadStats();
loadReviews()
}
const removeReview = async (id: number) => {
await ElMessageBox.confirm('确定删除该评价吗?', '提示', {type: 'warning'})
await adminApi.deleteReview(id)
ElMessage.success('删除成功')
loadStats();
loadReviews()
}
const reloadData = async () => {
await Promise.all([loadStats(), loadReviews()])
}
onMounted(() => {
reloadData()
})
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
gap: 20px;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.page-title {
@apply text-2xl font-bold text-slate-900;
}
.page-subtitle {
@apply text-sm text-slate-500 mt-1;
}
.stats-grid {
display: grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap: 16px;
}
.mini-stat {
@apply rounded-xl p-5 shadow-sm;
background: #fffaf2;
color: #171715;
border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
}
.mini-stat__value {
@apply text-3xl font-bold;
}
.mini-stat__label {
@apply text-sm opacity-90 mt-2;
}
.panel-card {
@apply bg-white rounded-xl p-5;
border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
}
.filter-card {
display: grid;
grid-template-columns:1fr 100px;
gap: 12px;
}
.table-footer {
@apply flex justify-end mt-4;
}
</style>

View File

@@ -7,11 +7,15 @@
</div> </div>
<div class="page-actions"> <div class="page-actions">
<el-button @click="reloadData"> <el-button @click="reloadData">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh/>
</el-icon>
刷新 刷新
</el-button> </el-button>
<el-button @click="exportCsv"> <el-button @click="exportCsv">
<el-icon><Download /></el-icon> <el-icon>
<Download/>
</el-icon>
导出 导出
</el-button> </el-button>
</div> </div>
@@ -38,11 +42,15 @@
<div class="panel-card filter-card"> <div class="panel-card filter-card">
<el-input v-model="query.keyword" clearable placeholder="搜索用户名 / 邮箱 / 手机号" @keyup.enter="handleSearch"> <el-input v-model="query.keyword" clearable placeholder="搜索用户名 / 邮箱 / 手机号" @keyup.enter="handleSearch">
<template #prefix><el-icon><Search /></el-icon></template> <template #prefix>
<el-icon>
<Search/>
</el-icon>
</template>
</el-input> </el-input>
<el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch"> <el-select v-model="query.status" clearable placeholder="全部状态" @change="handleSearch">
<el-option label="正常" :value="1" /> <el-option :value="1" label="正常"/>
<el-option label="禁用" :value="0" /> <el-option :value="0" label="禁用"/>
</el-select> </el-select>
<el-button type="primary" @click="handleSearch">搜索</el-button> <el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button> <el-button @click="handleReset">重置</el-button>
@@ -50,13 +58,16 @@
<div class="panel-card"> <div class="panel-card">
<el-table v-loading="loading" :data="users" stripe> <el-table v-loading="loading" :data="users" stripe>
<el-table-column prop="id" label="ID" width="80" /> <el-table-column label="ID" prop="id" width="80"/>
<el-table-column prop="username" label="用户名" min-width="120" /> <el-table-column label="用户名" min-width="120" prop="username"/>
<el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip /> <el-table-column label="邮箱" min-width="180" prop="email" show-overflow-tooltip/>
<el-table-column prop="phone" label="手机号" min-width="130" /> <el-table-column label="手机号" min-width="130" prop="phone"/>
<el-table-column prop="role" label="角色" width="100"> <el-table-column label="角色" prop="role" width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.role === 'ADMIN' ? 'danger' : 'info'">{{ row.role === 'ADMIN' ? '管理员' : '普通用户' }}</el-tag> <el-tag :type="row.role === 'ADMIN' ? 'danger' : 'info'">{{
row.role === 'ADMIN' ? '管理员' : '普通用户'
}}
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" width="100"> <el-table-column label="状态" width="100">
@@ -69,10 +80,10 @@
<el-tag :type="row.isOnline ? 'success' : 'info'">{{ row.isOnline ? '在线' : '离线' }}</el-tag> <el-tag :type="row.isOnline ? 'success' : 'info'">{{ row.isOnline ? '在线' : '离线' }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createdAt" label="注册时间" min-width="170"> <el-table-column label="注册时间" min-width="170" prop="createdAt">
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template> <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="lastLogin" label="最后登录" min-width="170"> <el-table-column label="最后登录" min-width="170" prop="lastLogin">
<template #default="{ row }">{{ row.lastLogin ? formatTime(row.lastLogin) : '-' }}</template> <template #default="{ row }">{{ row.lastLogin ? formatTime(row.lastLogin) : '-' }}</template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" width="150"> <el-table-column fixed="right" label="操作" width="150">
@@ -87,8 +98,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[10, 20, 50]" :page-sizes="[10, 20, 50]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@current-change="loadUsers" @current-change="loadUsers"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@@ -112,7 +123,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue' import {onMounted, reactive, ref} from 'vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -218,7 +229,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.page-shell { .page-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -258,8 +269,13 @@ onMounted(() => {
border: 1px solid #d8cebf; border: 1px solid #d8cebf;
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04); box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
&__value { @apply text-3xl font-bold; } &__value {
&__label { @apply text-sm opacity-90 mt-2; } @apply text-3xl font-bold;
}
&__label {
@apply text-sm opacity-90 mt-2;
}
} }
.panel-card { .panel-card {

View File

@@ -4,13 +4,17 @@
<!-- 页面标题 --> <!-- 页面标题 -->
<div class="mb-6"> <div class="mb-6">
<h1 class="text-3xl font-bold flex items-center"> <h1 class="text-3xl font-bold flex items-center">
<el-icon class="text-blue-500 mr-2"><ShoppingCart /></el-icon> <el-icon class="text-blue-500 mr-2">
<ShoppingCart/>
</el-icon>
购物车 购物车
</h1> </h1>
</div> </div>
<div v-if="cartStore.loading" class="text-center py-12"> <div v-if="cartStore.loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -37,12 +41,14 @@
</el-checkbox> </el-checkbox>
<el-button <el-button
:disabled="cartStore.selectedCount === 0"
text text
type="danger" type="danger"
:disabled="cartStore.selectedCount === 0"
@click="handleBatchRemove" @click="handleBatchRemove"
> >
<el-icon class="mr-1"><Delete /></el-icon> <el-icon class="mr-1">
<Delete/>
</el-icon>
删除选中 删除选中
</el-button> </el-button>
</div> </div>
@@ -62,7 +68,9 @@
/> />
<!-- 商品图片 --> <!-- 商品图片 -->
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100" img-class="w-24 h-24 object-cover rounded-lg" /> <SafeImage :alt="item.productName" :src="item.productImage"
img-class="w-24 h-24 object-cover rounded-lg"
wrapper-class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100"/>
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="flex-1"> <div class="flex-1">
@@ -89,16 +97,16 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<el-input-number <el-input-number
v-model="item.quantity" v-model="item.quantity"
:min="1"
:max="item.stock" :max="item.stock"
:min="1"
size="small" size="small"
@change="handleQuantityChange(item.id, item.quantity)" @change="handleQuantityChange(item.id, item.quantity)"
/> />
<el-button <el-button
size="small"
text text
type="danger" type="danger"
size="small"
@click="handleRemoveItem(item.id)" @click="handleRemoveItem(item.id)"
> >
删除 删除
@@ -121,7 +129,9 @@
<!-- 底部操作栏 --> <!-- 底部操作栏 -->
<div class="border-t px-6 py-4 flex justify-between items-center"> <div class="border-t px-6 py-4 flex justify-between items-center">
<el-button text @click="handleClearCart"> <el-button text @click="handleClearCart">
<el-icon class="mr-1"><Delete /></el-icon> <el-icon class="mr-1">
<Delete/>
</el-icon>
清空购物车 清空购物车
</el-button> </el-button>
@@ -168,10 +178,10 @@
<!-- 结算按钮 --> <!-- 结算按钮 -->
<el-button <el-button
type="danger"
size="large"
class="w-full"
:disabled="cartStore.selectedCount === 0" :disabled="cartStore.selectedCount === 0"
class="w-full"
size="large"
type="danger"
@click="handleCheckout" @click="handleCheckout"
> >
去结算{{ cartStore.selectedCount }} 去结算{{ cartStore.selectedCount }}
@@ -187,7 +197,9 @@
class="flex gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded" class="flex gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded"
@click="router.push(`/product/${item.id}`)" @click="router.push(`/product/${item.id}`)"
> >
<SafeImage :src="item.imageUrl" :alt="item.name" wrapper-class="w-16 h-16 rounded overflow-hidden bg-gray-100" img-class="w-16 h-16 object-cover rounded" /> <SafeImage :alt="item.name" :src="item.imageUrl"
img-class="w-16 h-16 object-cover rounded"
wrapper-class="w-16 h-16 rounded overflow-hidden bg-gray-100"/>
<div class="flex-1"> <div class="flex-1">
<p class="text-sm line-clamp-2">{{ item.name }}</p> <p class="text-sm line-clamp-2">{{ item.name }}</p>
<p class="text-red-500 font-semibold">¥{{ item.price }}</p> <p class="text-red-500 font-semibold">¥{{ item.price }}</p>
@@ -202,7 +214,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -326,7 +338,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.cart-page { .cart-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -10,12 +10,16 @@
<p class="text-gray-500 mb-8">抱歉您访问的页面不存在或已被移除</p> <p class="text-gray-500 mb-8">抱歉您访问的页面不存在或已被移除</p>
<div class="space-x-4"> <div class="space-x-4">
<el-button type="primary" size="large" @click="router.push('/')"> <el-button size="large" type="primary" @click="router.push('/')">
<el-icon class="mr-2"><HomeFilled /></el-icon> <el-icon class="mr-2">
<HomeFilled/>
</el-icon>
返回首页 返回首页
</el-button> </el-button>
<el-button size="large" @click="router.back()"> <el-button size="large" @click="router.back()">
<el-icon class="mr-2"><Back /></el-icon> <el-icon class="mr-2">
<Back/>
</el-icon>
返回上一页 返回上一页
</el-button> </el-button>
</div> </div>
@@ -23,13 +27,13 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
const router = useRouter() const router = useRouter()
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.error-404 { .error-404 {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
display: flex; display: flex;

View File

@@ -1,14 +1,16 @@
<template> <template>
<div class="flashsale-detail-page"> <div class="flashsale-detail-page">
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/flashsale' }">限时活动</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/flashsale' }">限时活动</el-breadcrumb-item>
<el-breadcrumb-item>{{ flashSale?.productName || '详情' }}</el-breadcrumb-item> <el-breadcrumb-item>{{ flashSale?.productName || '详情' }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -22,14 +24,16 @@
<div> <div>
<div class="relative"> <div class="relative">
<SafeImage <SafeImage
:src="flashSale.productImageUrl"
:alt="flashSale.productName" :alt="flashSale.productName"
wrapper-class="w-full rounded-lg overflow-hidden bg-gray-100" :src="flashSale.productImageUrl"
img-class="w-full rounded-lg object-cover" img-class="w-full rounded-lg object-cover"
wrapper-class="w-full rounded-lg overflow-hidden bg-gray-100"
/> />
<div class="absolute top-4 left-4"> <div class="absolute top-4 left-4">
<el-tag :type="statusType" size="large" effect="dark"> <el-tag :type="statusType" effect="dark" size="large">
<el-icon class="mr-1"><Lightning /></el-icon> <el-icon class="mr-1">
<Lightning/>
</el-icon>
{{ statusText }} {{ statusText }}
</el-tag> </el-tag>
</div> </div>
@@ -55,9 +59,11 @@
<div class="mb-6"> <div class="mb-6">
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<span class="text-gray-600">库存情况</span> <span class="text-gray-600">库存情况</span>
<span class="text-sm text-gray-500">剩余 {{ flashSale.remainingStock }} / {{ flashSale.flashStock }} </span> <span class="text-sm text-gray-500">剩余 {{ flashSale.remainingStock }} / {{
flashSale.flashStock
}} </span>
</div> </div>
<el-progress :percentage="stockPercent" :stroke-width="10" :color="progressColor" /> <el-progress :color="progressColor" :percentage="stockPercent" :stroke-width="10"/>
</div> </div>
<div v-if="flashSale.status === 'ACTIVE'" class="mb-6"> <div v-if="flashSale.status === 'ACTIVE'" class="mb-6">
@@ -69,19 +75,29 @@
<div class="note-card mb-6 p-4 rounded-lg"> <div class="note-card mb-6 p-4 rounded-lg">
<div class="flex items-center"> <div class="flex items-center">
<el-icon class="mr-2"><InfoFilled /></el-icon> <el-icon class="mr-2">
<InfoFilled/>
</el-icon>
<span>每人限购 {{ flashSale.limitPerUser }} </span> <span>每人限购 {{ flashSale.limitPerUser }} </span>
</div> </div>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<el-button type="primary" size="large" class="w-full" :disabled="!canParticipate" :loading="participating" @click="handleParticipate"> <el-button :disabled="!canParticipate" :loading="participating" class="w-full" size="large" type="primary"
<el-icon class="mr-2"><Lightning /></el-icon> @click="handleParticipate">
<el-icon class="mr-2">
<Lightning/>
</el-icon>
{{ buttonText }} {{ buttonText }}
</el-button> </el-button>
<div class="flex gap-4"> <div class="flex gap-4">
<el-button size="large" class="flex-1" @click="handleViewProduct">查看商品详情</el-button> <el-button class="flex-1" size="large" @click="handleViewProduct">查看商品详情</el-button>
<el-button size="large" class="flex-1" @click="handleShare"><el-icon class="mr-1"><Share /></el-icon>分享活动</el-button> <el-button class="flex-1" size="large" @click="handleShare">
<el-icon class="mr-1">
<Share/>
</el-icon>
分享活动
</el-button>
</div> </div>
</div> </div>
@@ -106,7 +122,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -130,21 +146,28 @@ const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
const statusType = computed(() => { const statusType = computed(() => {
if (!flashSale.value) return 'info' if (!flashSale.value) return 'info'
switch (flashSale.value.status) { switch (flashSale.value.status) {
case 'UPCOMING': return 'warning' case 'UPCOMING':
case 'ACTIVE': return 'danger' return 'warning'
case 'ENDED': return 'info' case 'ACTIVE':
default: return 'info' return 'danger'
case 'ENDED':
return 'info'
default:
return 'info'
} }
}) })
const statusText = computed(() => { const statusText = computed(() => {
if (!flashSale.value) return '' if (!flashSale.value) return ''
switch (flashSale.value.status) { switch (flashSale.value.status) {
case 'UPCOMING': return '即将开始' case 'UPCOMING':
return '即将开始'
case 'ACTIVE': case 'ACTIVE':
return '进行中' return '进行中'
case 'ENDED': return '已结束' case 'ENDED':
default: return '' return '已结束'
default:
return ''
} }
}) })
@@ -241,7 +264,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.flashsale-detail-page { .flashsale-detail-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -4,7 +4,9 @@
<!-- 页面标题 --> <!-- 页面标题 -->
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold mb-2 flex items-center"> <h1 class="text-3xl font-bold mb-2 flex items-center">
<el-icon class="page-icon mr-2"><Lightning /></el-icon> <el-icon class="page-icon mr-2">
<Lightning/>
</el-icon>
限时活动 限时活动
</h1> </h1>
<p class="text-gray-600">限时抢购先到先得</p> <p class="text-gray-600">限时抢购先到先得</p>
@@ -37,9 +39,9 @@
<!-- 搜索 --> <!-- 搜索 -->
<el-input <el-input
v-model="filters.keyword" v-model="filters.keyword"
clearable
placeholder="搜索商品名称" placeholder="搜索商品名称"
style="width: 200px" style="width: 200px"
clearable
@keyup.enter="loadFlashSales" @keyup.enter="loadFlashSales"
> >
<template #suffix> <template #suffix>
@@ -51,7 +53,9 @@
<!-- 刷新按钮 --> <!-- 刷新按钮 -->
<el-button @click="handleRefresh"> <el-button @click="handleRefresh">
<el-icon class="mr-1"><Refresh /></el-icon> <el-icon class="mr-1">
<Refresh/>
</el-icon>
刷新 刷新
</el-button> </el-button>
</div> </div>
@@ -62,28 +66,38 @@
<div class="stat-card tone-1"> <div class="stat-card tone-1">
<div class="stat-value">{{ statistics.upcoming }}</div> <div class="stat-value">{{ statistics.upcoming }}</div>
<div class="stat-label">即将开始</div> <div class="stat-label">即将开始</div>
<el-icon :size="30" class="stat-icon"><Clock /></el-icon> <el-icon :size="30" class="stat-icon">
<Clock/>
</el-icon>
</div> </div>
<div class="stat-card tone-2"> <div class="stat-card tone-2">
<div class="stat-value">{{ statistics.active }}</div> <div class="stat-value">{{ statistics.active }}</div>
<div class="stat-label">正在进行</div> <div class="stat-label">正在进行</div>
<el-icon :size="30" class="stat-icon"><Lightning /></el-icon> <el-icon :size="30" class="stat-icon">
<Lightning/>
</el-icon>
</div> </div>
<div class="stat-card tone-3"> <div class="stat-card tone-3">
<div class="stat-value">{{ statistics.participated }}</div> <div class="stat-value">{{ statistics.participated }}</div>
<div class="stat-label">我的参与</div> <div class="stat-label">我的参与</div>
<el-icon :size="30" class="stat-icon"><Trophy /></el-icon> <el-icon :size="30" class="stat-icon">
<Trophy/>
</el-icon>
</div> </div>
<div class="stat-card tone-4"> <div class="stat-card tone-4">
<div class="stat-value">{{ statistics.success }}</div> <div class="stat-value">{{ statistics.success }}</div>
<div class="stat-label">抢购成功</div> <div class="stat-label">抢购成功</div>
<el-icon :size="30" class="stat-icon"><SuccessFilled /></el-icon> <el-icon :size="30" class="stat-icon">
<SuccessFilled/>
</el-icon>
</div> </div>
</div> </div>
<!-- 限时活动列表 --> <!-- 限时活动列表 -->
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -107,8 +121,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[12, 24, 36, 48]" :page-sizes="[12, 24, 36, 48]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="loadFlashSales" @size-change="loadFlashSales"
@current-change="loadFlashSales" @current-change="loadFlashSales"
@@ -119,7 +133,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue' import {ref, reactive, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -239,7 +253,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.flashsale-page { .flashsale-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -2,14 +2,16 @@
<div class="page-container py-8"> <div class="page-container py-8">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<!-- 面包屑 --> <!-- 面包屑 -->
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/groupbuying' }">拼团活动</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/groupbuying' }">拼团活动</el-breadcrumb-item>
<el-breadcrumb-item>{{ detail?.productName || '加载中...' }}</el-breadcrumb-item> <el-breadcrumb-item>{{ detail?.productName || '加载中...' }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div v-if="loading" class="text-center py-20"> <div v-if="loading" class="text-center py-20">
<el-icon class="is-loading" :size="32"><Loading /></el-icon> <el-icon :size="32" class="is-loading">
<Loading/>
</el-icon>
</div> </div>
<template v-else-if="detail"> <template v-else-if="detail">
@@ -17,49 +19,60 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div> <div>
<SafeImage <SafeImage
:src="detail.productImageUrl"
:alt="detail.productName" :alt="detail.productName"
wrapper-class="w-full h-96 rounded-2xl overflow-hidden" :src="detail.productImageUrl"
img-class="w-full h-96 object-cover" img-class="w-full h-96 object-cover"
wrapper-class="w-full h-96 rounded-2xl overflow-hidden"
/> />
</div> </div>
<div> <div>
<el-tag :type="statusType" effect="dark" class="mb-3">{{ detail.statusDescription }}</el-tag> <el-tag :type="statusType" class="mb-3" effect="dark">{{ detail.statusDescription }}</el-tag>
<h1 class="text-2xl font-bold mb-4">{{ detail.productName }}</h1> <h1 class="text-2xl font-bold mb-4">{{ detail.productName }}</h1>
<div class="price-section mb-4"> <div class="price-section mb-4">
<div class="flex items-end gap-3"> <div class="flex items-end gap-3">
<span class="text-3xl font-bold" style="color: #171715">¥{{ detail.groupPrice }}</span> <span class="text-3xl font-bold" style="color: #171715">¥{{ detail.groupPrice }}</span>
<span class="text-lg text-gray-400 line-through">¥{{ detail.productPrice }}</span> <span class="text-lg text-gray-400 line-through">¥{{ detail.productPrice }}</span>
<el-tag type="danger" size="small"> ¥{{ detail.discount }}</el-tag> <el-tag size="small" type="danger"> ¥{{ detail.discount }}</el-tag>
</div> </div>
</div> </div>
<div class="info-section space-y-3 mb-6"> <div class="info-section space-y-3 mb-6">
<div class="flex items-center text-gray-600"> <div class="flex items-center text-gray-600">
<el-icon class="mr-2"><User /></el-icon> <el-icon class="mr-2">
<User/>
</el-icon>
<span>{{ detail.requiredMembers }} 人成团</span> <span>{{ detail.requiredMembers }} 人成团</span>
</div> </div>
<div class="flex items-center text-gray-600"> <div class="flex items-center text-gray-600">
<el-icon class="mr-2"><Timer /></el-icon> <el-icon class="mr-2">
<Timer/>
</el-icon>
<span>开团后 {{ detail.durationMinutes }} 分钟内有效</span> <span>开团后 {{ detail.durationMinutes }} 分钟内有效</span>
</div> </div>
<div class="flex items-center text-gray-600"> <div class="flex items-center text-gray-600">
<el-icon class="mr-2"><Box /></el-icon> <el-icon class="mr-2">
<Box/>
</el-icon>
<span>剩余库存: {{ detail.remainingStock }} / {{ detail.totalStock }}</span> <span>剩余库存: {{ detail.remainingStock }} / {{ detail.totalStock }}</span>
</div> </div>
<div class="flex items-center text-gray-600"> <div class="flex items-center text-gray-600">
<el-icon class="mr-2"><Warning /></el-icon> <el-icon class="mr-2">
<Warning/>
</el-icon>
<span>每人限购 {{ detail.maxPerUser }} </span> <span>每人限购 {{ detail.maxPerUser }} </span>
</div> </div>
</div> </div>
<el-progress :percentage="stockPercent" :stroke-width="8" :show-text="false" :color="progressColor" class="mb-6" /> <el-progress :color="progressColor" :percentage="stockPercent" :show-text="false" :stroke-width="8"
class="mb-6"/>
<div class="flex gap-3"> <div class="flex gap-3">
<el-button type="primary" size="large" :disabled="!canJoin" @click="handleCreateGroup" :loading="joining"> <el-button :disabled="!canJoin" :loading="joining" size="large" type="primary" @click="handleCreateGroup">
<el-icon class="mr-1"><Connection /></el-icon> <el-icon class="mr-1">
<Connection/>
</el-icon>
一键开团 一键开团
</el-button> </el-button>
<el-button size="large" @click="$router.push(`/product/${detail.productId}`)"> <el-button size="large" @click="$router.push(`/product/${detail.productId}`)">
@@ -92,7 +105,8 @@
</div> </div>
<div v-else class="space-y-4"> <div v-else class="space-y-4">
<div v-for="group in formingGroups" :key="group.id" class="group-item p-4 rounded-xl flex items-center justify-between" <div v-for="group in formingGroups" :key="group.id"
class="group-item p-4 rounded-xl flex items-center justify-between"
style="background: #fffaf2; border: 1px solid #e8e0d4"> style="background: #fffaf2; border: 1px solid #e8e0d4">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<el-avatar :size="40">{{ group.leaderUsername ? group.leaderUsername[0] : '?' }}</el-avatar> <el-avatar :size="40">{{ group.leaderUsername ? group.leaderUsername[0] : '?' }}</el-avatar>
@@ -110,7 +124,7 @@
{{ m.username ? m.username[0] : '?' }} {{ m.username ? m.username[0] : '?' }}
</el-avatar> </el-avatar>
</div> </div>
<el-button type="primary" size="small" @click="handleJoinGroup(group.id)" :loading="joining"> <el-button :loading="joining" size="small" type="primary" @click="handleJoinGroup(group.id)">
参团 参团
</el-button> </el-button>
</div> </div>
@@ -126,14 +140,17 @@
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div v-for="group in completedGroups" :key="group.id" class="group-item p-4 rounded-xl flex items-center justify-between" <div v-for="group in completedGroups" :key="group.id"
class="group-item p-4 rounded-xl flex items-center justify-between"
style="background: #f8f8f6; border: 1px solid #e8e0d4; opacity: 0.85"> style="background: #f8f8f6; border: 1px solid #e8e0d4; opacity: 0.85">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<el-avatar :size="40">{{ group.leaderUsername ? group.leaderUsername[0] : '?' }}</el-avatar> <el-avatar :size="40">{{ group.leaderUsername ? group.leaderUsername[0] : '?' }}</el-avatar>
<div> <div>
<div class="font-semibold">{{ group.leaderUsername }} 的团</div> <div class="font-semibold">{{ group.leaderUsername }} 的团</div>
<div class="text-sm text-green-600"> <div class="text-sm text-green-600">
<el-icon class="mr-1"><CircleCheckFilled /></el-icon> <el-icon class="mr-1">
<CircleCheckFilled/>
</el-icon>
已成团 · {{ group.currentMembers }}/{{ group.requiredMembers }} 已成团 · {{ group.currentMembers }}/{{ group.requiredMembers }}
</div> </div>
</div> </div>
@@ -144,7 +161,7 @@
{{ m.username ? m.username[0] : '?' }} {{ m.username ? m.username[0] : '?' }}
</el-avatar> </el-avatar>
</div> </div>
<el-tag type="success" size="small">已成团</el-tag> <el-tag size="small" type="success">已成团</el-tag>
</div> </div>
</div> </div>
</div> </div>
@@ -154,7 +171,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -178,10 +195,14 @@ const completedGroups = computed(() => groups.value.filter(g => g.status === 'SU
const statusType = computed(() => { const statusType = computed(() => {
switch (detail.value?.status) { switch (detail.value?.status) {
case 'UPCOMING': return 'warning' case 'UPCOMING':
case 'ACTIVE': return 'success' return 'warning'
case 'ENDED': return 'info' case 'ACTIVE':
default: return 'info' return 'success'
case 'ENDED':
return 'info'
default:
return 'info'
} }
}) })
@@ -245,7 +266,7 @@ const handleJoinGroup = async (groupId: number) => {
onMounted(loadDetail) onMounted(loadDetail)
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.price-section { .price-section {
@apply p-4 rounded-xl; @apply p-4 rounded-xl;
background: #fffaf2; background: #fffaf2;

View File

@@ -2,37 +2,46 @@
<div class="page-container py-8"> <div class="page-container py-8">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<!-- 面包屑 --> <!-- 面包屑 -->
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/groupbuying' }">拼团活动</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/groupbuying' }">拼团活动</el-breadcrumb-item>
<el-breadcrumb-item>团组详情</el-breadcrumb-item> <el-breadcrumb-item>团组详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div v-if="loading" class="text-center py-20"> <div v-if="loading" class="text-center py-20">
<el-icon class="is-loading" :size="32"><Loading /></el-icon> <el-icon :size="32" class="is-loading">
<Loading/>
</el-icon>
</div> </div>
<template v-else-if="group"> <template v-else-if="group">
<div class="max-w-2xl mx-auto"> <div class="max-w-2xl mx-auto">
<!-- 团组状态 --> <!-- 团组状态 -->
<div class="status-section text-center mb-8 p-8 rounded-2xl" style="background: #fffaf2; border: 1px solid #e8e0d4"> <div class="status-section text-center mb-8 p-8 rounded-2xl"
<el-tag :type="statusType" effect="dark" size="large" class="mb-4">{{ group.statusDescription }}</el-tag> style="background: #fffaf2; border: 1px solid #e8e0d4">
<el-tag :type="statusType" class="mb-4" effect="dark" size="large">{{ group.statusDescription }}</el-tag>
<h2 class="text-xl font-bold mb-2">{{ group.groupBuying?.productName }}</h2> <h2 class="text-xl font-bold mb-2">{{ group.groupBuying?.productName }}</h2>
<div class="text-2xl font-bold mb-4" style="color: #171715">¥{{ group.groupBuying?.groupPrice }}</div> <div class="text-2xl font-bold mb-4" style="color: #171715">¥{{ group.groupBuying?.groupPrice }}</div>
<div v-if="group.status === 'FORMING'" class="mb-4"> <div v-if="group.status === 'FORMING'" class="mb-4">
<p class="text-gray-500 mb-2">还差 <span class="font-bold text-lg" style="color: #171715">{{ group.requiredMembers - group.currentMembers }}</span> 人成团</p> <p class="text-gray-500 mb-2">还差 <span class="font-bold text-lg" style="color: #171715">{{
group.requiredMembers - group.currentMembers
}}</span> 人成团</p>
<CountDown :end-time="new Date(group.expireTime).getTime()" @finish="loadGroup"/> <CountDown :end-time="new Date(group.expireTime).getTime()" @finish="loadGroup"/>
</div> </div>
<div v-else-if="group.status === 'SUCCESS'" class="mb-4"> <div v-else-if="group.status === 'SUCCESS'" class="mb-4">
<el-icon :size="48" color="#67c23a"><CircleCheckFilled /></el-icon> <el-icon :size="48" color="#67c23a">
<CircleCheckFilled/>
</el-icon>
<p class="text-green-600 mt-2 font-semibold">拼团成功!</p> <p class="text-green-600 mt-2 font-semibold">拼团成功!</p>
</div> </div>
<div v-else class="mb-4"> <div v-else class="mb-4">
<el-icon :size="48" color="#909399"><CircleCloseFilled /></el-icon> <el-icon :size="48" color="#909399">
<CircleCloseFilled/>
</el-icon>
<p class="text-gray-500 mt-2">拼团未成功</p> <p class="text-gray-500 mt-2">拼团未成功</p>
</div> </div>
</div> </div>
@@ -41,26 +50,32 @@
<div class="members-section mb-8"> <div class="members-section mb-8">
<h3 class="text-lg font-bold mb-4">团成员 ({{ group.currentMembers }}/{{ group.requiredMembers }})</h3> <h3 class="text-lg font-bold mb-4">团成员 ({{ group.currentMembers }}/{{ group.requiredMembers }})</h3>
<GroupMemberList <GroupMemberList
:leader-user-id="group.leaderUserId"
:members="group.members" :members="group.members"
:required-members="group.requiredMembers" :required-members="group.requiredMembers"
:leader-user-id="group.leaderUserId"
/> />
</div> </div>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="flex gap-3 justify-center"> <div class="flex gap-3 justify-center">
<el-button v-if="group.status === 'FORMING' && !isInGroup" type="primary" size="large" @click="handleJoin" :loading="joining"> <el-button v-if="group.status === 'FORMING' && !isInGroup" :loading="joining" size="large" type="primary"
<el-icon class="mr-1"><Connection /></el-icon> @click="handleJoin">
<el-icon class="mr-1">
<Connection/>
</el-icon>
加入拼团 加入拼团
</el-button> </el-button>
<el-button v-if="group.status === 'FORMING' && isInGroup" type="danger" size="large" @click="handleCancel" :loading="cancelling"> <el-button v-if="group.status === 'FORMING' && isInGroup" :loading="cancelling" size="large" type="danger"
@click="handleCancel">
退出团组 退出团组
</el-button> </el-button>
<el-button size="large" @click="$router.push(`/groupbuying/${group.groupBuyingId}`)"> <el-button size="large" @click="$router.push(`/groupbuying/${group.groupBuyingId}`)">
查看活动 查看活动
</el-button> </el-button>
<el-button v-if="group.status === 'FORMING'" size="large" @click="handleShare"> <el-button v-if="group.status === 'FORMING'" size="large" @click="handleShare">
<el-icon class="mr-1"><Share /></el-icon> <el-icon class="mr-1">
<Share/>
</el-icon>
邀请好友 邀请好友
</el-button> </el-button>
</div> </div>
@@ -70,7 +85,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -93,10 +108,14 @@ const groupId = computed(() => Number(route.params.id))
const statusType = computed(() => { const statusType = computed(() => {
switch (group.value?.status) { switch (group.value?.status) {
case 'FORMING': return 'warning' case 'FORMING':
case 'SUCCESS': return 'success' return 'warning'
case 'FAILED': return 'info' case 'SUCCESS':
default: return 'info' return 'success'
case 'FAILED':
return 'info'
default:
return 'info'
} }
}) })

View File

@@ -3,7 +3,9 @@
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<!-- 页头 --> <!-- 页头 -->
<div class="flex items-center mb-6"> <div class="flex items-center mb-6">
<el-icon :size="28" class="mr-2"><Connection /></el-icon> <el-icon :size="28" class="mr-2">
<Connection/>
</el-icon>
<h1 class="text-2xl font-bold">拼团活动</h1> <h1 class="text-2xl font-bold">拼团活动</h1>
</div> </div>
@@ -16,7 +18,7 @@
<el-radio-button label="ENDED">已结束</el-radio-button> <el-radio-button label="ENDED">已结束</el-radio-button>
</el-radio-group> </el-radio-group>
<el-button :icon="Refresh" @click="loadList" :loading="loading">刷新</el-button> <el-button :icon="Refresh" :loading="loading" @click="loadList">刷新</el-button>
</div> </div>
<!-- 统计卡片 --> <!-- 统计卡片 -->
@@ -41,7 +43,9 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="text-center py-20"> <div v-if="loading" class="text-center py-20">
<el-icon class="is-loading" :size="32"><Loading /></el-icon> <el-icon :size="32" class="is-loading">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -75,7 +79,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue' import {ref, reactive, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {Refresh, Loading} from '@element-plus/icons-vue' import {Refresh, Loading} from '@element-plus/icons-vue'
@@ -130,7 +134,7 @@ const handleJoin = (id: number) => {
onMounted(loadList) onMounted(loadList)
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.stat-card { .stat-card {
@apply bg-white rounded-xl p-4 text-center; @apply bg-white rounded-xl p-4 text-center;
background: #fffaf2; background: #fffaf2;

View File

@@ -1,14 +1,16 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<!-- 轮播图 --> <!-- 轮播图 -->
<el-carousel height="400px" :interval="5000" arrow="hover"> <el-carousel :interval="5000" arrow="hover" height="400px">
<el-carousel-item v-for="item in banners" :key="item.id"> <el-carousel-item v-for="item in banners" :key="item.id">
<div class="banner-content" :style="{ background: item.bgColor }"> <div :style="{ background: item.bgColor }" class="banner-content">
<div class="container mx-auto px-4 h-full"> <div class="container mx-auto px-4 h-full">
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<div class="w-1/2"> <div class="w-1/2">
<h1 class="banner-title text-4xl font-bold mb-4"> <h1 class="banner-title text-4xl font-bold mb-4">
<el-icon :size="40"><Lightning /></el-icon> <el-icon :size="40">
<Lightning/>
</el-icon>
{{ item.title }} {{ item.title }}
</h1> </h1>
<p class="banner-subtitle text-xl mb-6">{{ item.subtitle }}</p> <p class="banner-subtitle text-xl mb-6">{{ item.subtitle }}</p>
@@ -37,17 +39,23 @@
<section class="mb-12"> <section class="mb-12">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold flex items-center"> <h2 class="text-2xl font-bold flex items-center">
<el-icon class="section-icon mr-2"><Grid /></el-icon> <el-icon class="section-icon mr-2">
<Grid/>
</el-icon>
商品分类 商品分类
</h2> </h2>
<el-button text @click="router.push('/products')"> <el-button text @click="router.push('/products')">
全部商品 全部商品
<el-icon class="ml-1"><ArrowRight /></el-icon> <el-icon class="ml-1">
<ArrowRight/>
</el-icon>
</el-button> </el-button>
</div> </div>
<div v-if="loadingCategories" class="text-center py-8"> <div v-if="loadingCategories" class="text-center py-8">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
</div> </div>
<div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
@@ -69,17 +77,23 @@
<section class="mb-12"> <section class="mb-12">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold flex items-center"> <h2 class="text-2xl font-bold flex items-center">
<el-icon class="section-icon mr-2"><Lightning /></el-icon> <el-icon class="section-icon mr-2">
<Lightning/>
</el-icon>
限时活动 限时活动
</h2> </h2>
<el-button text @click="router.push('/flashsale')"> <el-button text @click="router.push('/flashsale')">
查看全部 查看全部
<el-icon class="ml-1"><ArrowRight /></el-icon> <el-icon class="ml-1">
<ArrowRight/>
</el-icon>
</el-button> </el-button>
</div> </div>
<div v-if="loadingFlashSales" class="text-center py-8"> <div v-if="loadingFlashSales" class="text-center py-8">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -101,17 +115,23 @@
<section class="mb-12"> <section class="mb-12">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold flex items-center"> <h2 class="text-2xl font-bold flex items-center">
<el-icon class="section-icon mr-2"><Star /></el-icon> <el-icon class="section-icon mr-2">
<Star/>
</el-icon>
热门商品 热门商品
</h2> </h2>
<el-button text @click="router.push('/products')"> <el-button text @click="router.push('/products')">
查看全部 查看全部
<el-icon class="ml-1"><ArrowRight /></el-icon> <el-icon class="ml-1">
<ArrowRight/>
</el-icon>
</el-button> </el-button>
</div> </div>
<div v-if="loadingProducts" class="text-center py-8"> <div v-if="loadingProducts" class="text-center py-8">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -134,22 +154,30 @@
<h2 class="text-2xl font-bold text-center mb-8">系统特性</h2> <h2 class="text-2xl font-bold text-center mb-8">系统特性</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card"> <div class="feature-card">
<el-icon :size="40" class="feature-icon mb-4"><Lightning /></el-icon> <el-icon :size="40" class="feature-icon mb-4">
<Lightning/>
</el-icon>
<h3 class="text-lg font-semibold mb-2">限时优惠</h3> <h3 class="text-lg font-semibold mb-2">限时优惠</h3>
<p class="text-gray-600">社区生鲜团购系统支持热门商品集中促销</p> <p class="text-gray-600">社区生鲜团购系统支持热门商品集中促销</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<el-icon :size="40" class="feature-icon mb-4"><Lock /></el-icon> <el-icon :size="40" class="feature-icon mb-4">
<Lock/>
</el-icon>
<h3 class="text-lg font-semibold mb-2">防超卖</h3> <h3 class="text-lg font-semibold mb-2">防超卖</h3>
<p class="text-gray-600">分布式锁机制确保库存数据一致性</p> <p class="text-gray-600">分布式锁机制确保库存数据一致性</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<el-icon :size="40" class="feature-icon mb-4"><Coin /></el-icon> <el-icon :size="40" class="feature-icon mb-4">
<Coin/>
</el-icon>
<h3 class="text-lg font-semibold mb-2">Redis缓存</h3> <h3 class="text-lg font-semibold mb-2">Redis缓存</h3>
<p class="text-gray-600">五种数据类型应用毫秒级响应</p> <p class="text-gray-600">五种数据类型应用毫秒级响应</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<el-icon :size="40" class="feature-icon mb-4"><Odometer /></el-icon> <el-icon :size="40" class="feature-icon mb-4">
<Odometer/>
</el-icon>
<h3 class="text-lg font-semibold mb-2">接口限流</h3> <h3 class="text-lg font-semibold mb-2">接口限流</h3>
<p class="text-gray-600">多种限流策略防止恶意刷单</p> <p class="text-gray-600">多种限流策略防止恶意刷单</p>
</div> </div>
@@ -159,7 +187,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, onMounted} from 'vue' import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -306,7 +334,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.home-page { .home-page {
min-height: 100vh; min-height: 100vh;
} }

View File

@@ -1,14 +1,16 @@
<template> <template>
<div class="order-detail-page"> <div class="order-detail-page">
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/orders' }">我的订单</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/orders' }">我的订单</el-breadcrumb-item>
<el-breadcrumb-item>订单详情</el-breadcrumb-item> <el-breadcrumb-item>订单详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -25,10 +27,10 @@
</div> </div>
<el-steps :active="getActiveStep()" finish-status="success"> <el-steps :active="getActiveStep()" finish-status="success">
<el-step title="提交订单" :description="formatTime(order.createdAt)" /> <el-step :description="formatTime(order.createdAt)" title="提交订单"/>
<el-step title="支付订单" :description="order.paidAt ? formatTime(order.paidAt) : ''" /> <el-step :description="order.paidAt ? formatTime(order.paidAt) : ''" title="支付订单"/>
<el-step title="商家发货" :description="order.shippedAt ? formatTime(order.shippedAt) : ''" /> <el-step :description="order.shippedAt ? formatTime(order.shippedAt) : ''" title="商家发货"/>
<el-step title="确认收货" :description="order.completedAt ? formatTime(order.completedAt) : ''" /> <el-step :description="order.completedAt ? formatTime(order.completedAt) : ''" title="确认收货"/>
</el-steps> </el-steps>
<div class="mt-6 flex gap-2"> <div class="mt-6 flex gap-2">
@@ -47,8 +49,12 @@
<el-button text type="danger" @click="handleDelete">删除订单</el-button> <el-button text type="danger" @click="handleDelete">删除订单</el-button>
</template> </template>
<template v-else-if="order.status === 'REFUNDING'"> <template v-else-if="order.status === 'REFUNDING'">
<el-button v-if="orderReturn && orderReturn.status === 'APPROVED'" type="primary" @click="trackingDialogVisible = true">填写物流单号</el-button> <el-button v-if="orderReturn && orderReturn.status === 'APPROVED'" type="primary"
<el-button v-if="orderReturn && (orderReturn.status === 'PENDING' || orderReturn.status === 'APPROVED')" @click="handleCancelReturn">取消退货</el-button> @click="trackingDialogVisible = true">填写物流单号
</el-button>
<el-button v-if="orderReturn && (orderReturn.status === 'PENDING' || orderReturn.status === 'APPROVED')"
@click="handleCancelReturn">取消退货
</el-button>
</template> </template>
<template v-else-if="order.status === 'REFUNDED'"> <template v-else-if="order.status === 'REFUNDED'">
<el-button text type="danger" @click="handleDelete">删除订单</el-button> <el-button text type="danger" @click="handleDelete">删除订单</el-button>
@@ -62,8 +68,12 @@
<div class="bg-white rounded-lg shadow-sm p-6 mb-6"> <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<h3 class="text-lg font-semibold mb-4">收货信息</h3> <h3 class="text-lg font-semibold mb-4">收货信息</h3>
<div v-if="order.address" class="text-sm space-y-2"> <div v-if="order.address" class="text-sm space-y-2">
<div><span class="text-gray-500">收货人</span><span>{{ order.address.name }} {{ order.address.phone }}</span></div> <div><span class="text-gray-500">收货人</span><span>{{ order.address.name }} {{
<div><span class="text-gray-500">收货地址</span><span>{{ order.address.province }} {{ order.address.city }} {{ order.address.district }} {{ order.address.address }}</span></div> order.address.phone
}}</span></div>
<div><span class="text-gray-500">收货地址</span><span>{{ order.address.province }} {{ order.address.city }} {{
order.address.district
}} {{ order.address.address }}</span></div>
</div> </div>
<div v-else class="text-gray-500">暂无收货信息</div> <div v-else class="text-gray-500">暂无收货信息</div>
</div> </div>
@@ -72,51 +82,76 @@
<h3 class="text-lg font-semibold mb-4">商品信息</h3> <h3 class="text-lg font-semibold mb-4">商品信息</h3>
<div class="space-y-4"> <div class="space-y-4">
<div v-for="item in order.items" :key="item.id" class="flex gap-4 pb-4 border-b last:border-0"> <div v-for="item in order.items" :key="item.id" class="flex gap-4 pb-4 border-b last:border-0">
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-24 h-24 rounded" img-class="w-24 h-24 object-cover rounded" /> <SafeImage :alt="item.productName" :src="item.productImage" img-class="w-24 h-24 object-cover rounded"
wrapper-class="w-24 h-24 rounded"/>
<div class="flex-1"> <div class="flex-1">
<h4 class="font-semibold mb-2">{{ item.productName }}</h4> <h4 class="font-semibold mb-2">{{ item.productName }}</h4>
<div class="text-sm text-gray-500">单价¥{{ item.price }} × {{ item.quantity }}</div> <div class="text-sm text-gray-500">单价¥{{ item.price }} × {{ item.quantity }}</div>
</div> </div>
<div class="text-right"><div class="font-semibold text-lg">¥{{ item.subtotal }}</div></div> <div class="text-right">
<div class="font-semibold text-lg">¥{{ item.subtotal }}</div>
</div>
</div> </div>
</div> </div>
<div class="border-t pt-4 mt-4 space-y-2"> <div class="border-t pt-4 mt-4 space-y-2">
<div class="flex justify-between text-sm"><span class="text-gray-500">商品总额</span><span>¥{{ order.totalAmount }}</span></div> <div class="flex justify-between text-sm"><span
class="text-gray-500">商品总额</span><span>¥{{ order.totalAmount }}</span></div>
<div class="flex justify-between text-sm"><span class="text-gray-500">运费</span><span>¥0.00</span></div> <div class="flex justify-between text-sm"><span class="text-gray-500">运费</span><span>¥0.00</span></div>
<div class="flex justify-between text-sm"><span class="text-gray-500">优惠</span><span class="text-red-500">-¥0.00</span></div> <div class="flex justify-between text-sm"><span class="text-gray-500">优惠</span><span class="text-red-500">-¥0.00</span>
<div class="flex justify-between text-lg font-semibold pt-2 border-t"><span>实付金额</span><span class="text-red-500">¥{{ order.paymentAmount }}</span></div> </div>
<div class="flex justify-between text-lg font-semibold pt-2 border-t"><span>实付金额</span><span
class="text-red-500">¥{{ order.paymentAmount }}</span></div>
</div> </div>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-semibold mb-4">订单信息</h3> <h3 class="text-lg font-semibold mb-4">订单信息</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div><span class="text-gray-500">订单编号</span><span>{{ order.orderNo }}</span><el-button text type="primary" size="small" @click="copyOrderNo">复制</el-button></div> <div><span class="text-gray-500">订单编号</span><span>{{ order.orderNo }}</span>
<el-button size="small" text type="primary" @click="copyOrderNo">复制</el-button>
</div>
<div><span class="text-gray-500">创建时间</span><span>{{ formatTime(order.createdAt) }}</span></div> <div><span class="text-gray-500">创建时间</span><span>{{ formatTime(order.createdAt) }}</span></div>
<div v-if="order.paidAt"><span class="text-gray-500">付款时间</span><span>{{ formatTime(order.paidAt) }}</span></div> <div v-if="order.paidAt"><span class="text-gray-500">付款时间</span><span>{{
<div v-if="order.paymentMethod"><span class="text-gray-500">支付方式</span><span>{{ getPaymentMethodText(order.paymentMethod) }}</span></div> formatTime(order.paidAt)
<div v-if="order.shippedAt"><span class="text-gray-500">发货时间</span><span>{{ formatTime(order.shippedAt) }}</span></div> }}</span></div>
<div v-if="order.completedAt"><span class="text-gray-500">完成时间</span><span>{{ formatTime(order.completedAt) }}</span></div> <div v-if="order.paymentMethod"><span
<div v-if="order.remark" class="md:col-span-2"><span class="text-gray-500">订单备注</span><span>{{ order.remark }}</span></div> class="text-gray-500">支付方式</span><span>{{ getPaymentMethodText(order.paymentMethod) }}</span></div>
<div v-if="order.shippedAt"><span class="text-gray-500">发货时间</span><span>{{
formatTime(order.shippedAt)
}}</span></div>
<div v-if="order.completedAt"><span
class="text-gray-500">完成时间</span><span>{{ formatTime(order.completedAt) }}</span></div>
<div v-if="order.remark" class="md:col-span-2"><span
class="text-gray-500">订单备注</span><span>{{ order.remark }}</span></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 退货信息 --> <!-- 退货信息 -->
<div v-if="orderReturn && (order.status === 'REFUNDING' || order.status === 'REFUNDED')" class="bg-white rounded-lg shadow-sm p-6 mb-6"> <div v-if="orderReturn && (order.status === 'REFUNDING' || order.status === 'REFUNDED')"
class="bg-white rounded-lg shadow-sm p-6 mb-6">
<h3 class="text-lg font-semibold mb-4">退货信息</h3> <h3 class="text-lg font-semibold mb-4">退货信息</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div><span class="text-gray-500">退货单号</span><span>{{ orderReturn.returnNo }}</span></div> <div><span class="text-gray-500">退货单号</span><span>{{ orderReturn.returnNo }}</span></div>
<div><span class="text-gray-500">退货状态</span><el-tag :type="getReturnStatusType(orderReturn.status)" size="small">{{ orderReturn.statusText }}</el-tag></div> <div><span class="text-gray-500">退货状态</span>
<div><span class="text-gray-500">退款金额</span><span class="text-red-500 font-semibold">&yen;{{ orderReturn.refundAmount }}</span></div> <el-tag :type="getReturnStatusType(orderReturn.status)" size="small">{{ orderReturn.statusText }}</el-tag>
</div>
<div><span class="text-gray-500">退款金额</span><span
class="text-red-500 font-semibold">&yen;{{ orderReturn.refundAmount }}</span></div>
<div><span class="text-gray-500">退货原因</span><span>{{ orderReturn.reason }}</span></div> <div><span class="text-gray-500">退货原因</span><span>{{ orderReturn.reason }}</span></div>
<div v-if="orderReturn.description" class="md:col-span-2"><span class="text-gray-500">详细描述</span><span>{{ orderReturn.description }}</span></div> <div v-if="orderReturn.description" class="md:col-span-2"><span
<div v-if="orderReturn.rejectReason" class="md:col-span-2"><span class="text-gray-500">拒绝原因:</span><span class="text-red-500">{{ orderReturn.rejectReason }}</span></div> class="text-gray-500">详细描述</span><span>{{ orderReturn.description }}</span></div>
<div v-if="orderReturn.returnTracking"><span class="text-gray-500">物流单号</span><span>{{ orderReturn.returnTracking }}</span></div> <div v-if="orderReturn.rejectReason" class="md:col-span-2"><span class="text-gray-500">拒绝原因</span><span
<div v-if="orderReturn.adminRemark" class="md:col-span-2"><span class="text-gray-500">管理员备注</span><span>{{ orderReturn.adminRemark }}</span></div> class="text-red-500">{{ orderReturn.rejectReason }}</span></div>
<div v-if="orderReturn.returnTracking"><span
class="text-gray-500">物流单号</span><span>{{ orderReturn.returnTracking }}</span></div>
<div v-if="orderReturn.adminRemark" class="md:col-span-2"><span class="text-gray-500">管理员备注</span><span>{{
orderReturn.adminRemark
}}</span></div>
<div><span class="text-gray-500">申请时间</span><span>{{ formatTime(orderReturn.createdAt) }}</span></div> <div><span class="text-gray-500">申请时间</span><span>{{ formatTime(orderReturn.createdAt) }}</span></div>
<div v-if="orderReturn.completedAt"><span class="text-gray-500">完成时间</span><span>{{ formatTime(orderReturn.completedAt) }}</span></div> <div v-if="orderReturn.completedAt"><span
class="text-gray-500">完成时间</span><span>{{ formatTime(orderReturn.completedAt) }}</span></div>
</div> </div>
</div> </div>
@@ -146,7 +181,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, onMounted} from 'vue' import {ref, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -175,18 +210,45 @@ const trackingDialogVisible = ref(false)
const orderReturn = ref<OrderReturn | null>(null) const orderReturn = ref<OrderReturn | null>(null)
const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss') const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
const getStatusType = (status: string) => ({ PENDING: 'warning', PAID: 'primary', SHIPPED: 'primary', COMPLETED: 'success', CANCELLED: 'info', REFUNDING: 'warning', REFUNDED: 'danger' }[status] || 'info') const getStatusType = (status: string) => ({
const getStatusText = (status: string) => ({ PENDING: '待付款', PAID: '待发货', SHIPPED: '待收货', COMPLETED: '已完成', CANCELLED: '已取消', REFUNDING: '退货中', REFUNDED: '已退货' }[status] || status) PENDING: 'warning',
const getPaymentMethodText = (method: string) => ({ ONLINE: '在线支付', ALIPAY: '支付宝', WECHAT: '微信支付', CASH: '货到付款', default: '默认支付' }[method] || method) PAID: 'primary',
SHIPPED: 'primary',
COMPLETED: 'success',
CANCELLED: 'info',
REFUNDING: 'warning',
REFUNDED: 'danger'
}[status] || 'info')
const getStatusText = (status: string) => ({
PENDING: '待付款',
PAID: '待发货',
SHIPPED: '待收货',
COMPLETED: '已完成',
CANCELLED: '已取消',
REFUNDING: '退货中',
REFUNDED: '已退货'
}[status] || status)
const getPaymentMethodText = (method: string) => ({
ONLINE: '在线支付',
ALIPAY: '支付宝',
WECHAT: '微信支付',
CASH: '货到付款',
default: '默认支付'
}[method] || method)
const getActiveStep = () => { const getActiveStep = () => {
if (!order.value) return 0 if (!order.value) return 0
switch (order.value.status) { switch (order.value.status) {
case 'PENDING': return 1 case 'PENDING':
case 'PAID': return 2 return 1
case 'SHIPPED': return 3 case 'PAID':
case 'COMPLETED': return 4 return 2
default: return 0 case 'SHIPPED':
return 3
case 'COMPLETED':
return 4
default:
return 0
} }
} }
@@ -211,20 +273,50 @@ const copyOrderNo = () => {
const handlePay = async () => { const handlePay = async () => {
if (!order.value) return if (!order.value) return
await ElMessageBox.confirm(`订单金额:¥${order.value.paymentAmount},确认付款?`, '付款确认', { confirmButtonText: '确认付款', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm(`订单金额:¥${order.value.paymentAmount},确认付款?`, '付款确认', {
try { await orderApi.pay(order.value.id, 'ONLINE'); ElMessage.success('付款成功'); loadOrderDetail() } catch (error) { console.error('付款失败:', error) } confirmButtonText: '确认付款',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.pay(order.value.id, 'ONLINE');
ElMessage.success('付款成功');
loadOrderDetail()
} catch (error) {
console.error('付款失败:', error)
}
} }
const handleCancel = async () => { const handleCancel = async () => {
if (!order.value) return if (!order.value) return
await ElMessageBox.confirm('确定要取消该订单吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定要取消该订单吗?', '提示', {
try { await orderApi.cancel(order.value.id); ElMessage.success('订单已取消'); loadOrderDetail() } catch (error) { console.error('取消订单失败:', error) } confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.cancel(order.value.id);
ElMessage.success('订单已取消');
loadOrderDetail()
} catch (error) {
console.error('取消订单失败:', error)
}
} }
const handleConfirm = async () => { const handleConfirm = async () => {
if (!order.value) return if (!order.value) return
await ElMessageBox.confirm('确定已收到商品?', '确认收货', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定已收到商品?', '确认收货', {
try { await orderApi.confirm(order.value.id); ElMessage.success('已确认收货'); loadOrderDetail() } catch (error) { console.error('确认收货失败:', error) } confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.confirm(order.value.id);
ElMessage.success('已确认收货');
loadOrderDetail()
} catch (error) {
console.error('确认收货失败:', error)
}
} }
const checkAllReviewed = async () => { const checkAllReviewed = async () => {
@@ -239,7 +331,14 @@ const checkAllReviewed = async () => {
} }
} }
const getReturnStatusType = (status: string) => ({ PENDING: 'warning', APPROVED: 'primary', RETURNING: 'primary', COMPLETED: 'success', REJECTED: 'danger', CANCELLED: 'info' }[status] || 'info') const getReturnStatusType = (status: string) => ({
PENDING: 'warning',
APPROVED: 'primary',
RETURNING: 'primary',
COMPLETED: 'success',
REJECTED: 'danger',
CANCELLED: 'info'
}[status] || 'info')
const loadReturnInfo = async () => { const loadReturnInfo = async () => {
if (!order.value) return if (!order.value) return
@@ -261,7 +360,11 @@ const onReturnSuccess = () => {
const handleCancelReturn = async () => { const handleCancelReturn = async () => {
if (!orderReturn.value) return if (!orderReturn.value) return
await ElMessageBox.confirm('确定要取消退货申请吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定要取消退货申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
try { try {
await returnApi.cancel(orderReturn.value.id) await returnApi.cancel(orderReturn.value.id)
ElMessage.success('退货申请已取消') ElMessage.success('退货申请已取消')
@@ -282,8 +385,18 @@ const handleRebuy = async () => {
const handleDelete = async () => { const handleDelete = async () => {
if (!order.value) return if (!order.value) return
await ElMessageBox.confirm('确定删除该订单吗?删除后不可恢复。', '删除确认', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定删除该订单吗?删除后不可恢复。', '删除确认', {
try { await orderApi.delete(order.value.id); ElMessage.success('订单已删除'); router.push('/orders') } catch (error) { console.error('删除订单失败:', error) } confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.delete(order.value.id);
ElMessage.success('订单已删除');
router.push('/orders')
} catch (error) {
console.error('删除订单失败:', error)
}
} }
onMounted(async () => { onMounted(async () => {
@@ -292,7 +405,7 @@ onMounted(async () => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.order-detail-page { .order-detail-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -3,14 +3,20 @@
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-3xl font-bold flex items-center"> <h1 class="text-3xl font-bold flex items-center">
<el-icon class="text-blue-500 mr-2"><List /></el-icon> <el-icon class="text-blue-500 mr-2">
<List/>
</el-icon>
我的订单 我的订单
</h1> </h1>
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6"> <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
<div v-for="stat in orderStats" :key="stat.key" class="bg-white rounded-lg p-4 text-center cursor-pointer hover:shadow-md transition-shadow" @click="handleStatusFilter(stat.key)"> <div v-for="stat in orderStats" :key="stat.key"
<el-icon :size="24" :class="stat.color" class="mb-2"><component :is="stat.icon" /></el-icon> class="bg-white rounded-lg p-4 text-center cursor-pointer hover:shadow-md transition-shadow"
@click="handleStatusFilter(stat.key)">
<el-icon :class="stat.color" :size="24" class="mb-2">
<component :is="stat.icon"/>
</el-icon>
<div class="text-2xl font-bold">{{ stat.count }}</div> <div class="text-2xl font-bold">{{ stat.count }}</div>
<div class="text-sm text-gray-500">{{ stat.label }}</div> <div class="text-sm text-gray-500">{{ stat.label }}</div>
</div> </div>
@@ -29,16 +35,21 @@
<el-radio-button label="REFUNDED">已退货</el-radio-button> <el-radio-button label="REFUNDED">已退货</el-radio-button>
</el-radio-group> </el-radio-group>
<el-input v-model="filters.keyword" placeholder="搜索订单号或商品名称" style="width: 250px" clearable @keyup.enter="loadOrders"> <el-input v-model="filters.keyword" clearable placeholder="搜索订单号或商品名称" style="width: 250px"
@keyup.enter="loadOrders">
<template #suffix> <template #suffix>
<el-icon class="cursor-pointer" @click="loadOrders"><Search /></el-icon> <el-icon class="cursor-pointer" @click="loadOrders">
<Search/>
</el-icon>
</template> </template>
</el-input> </el-input>
</div> </div>
</div> </div>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -57,19 +68,22 @@
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<el-tag v-if="order.orderType === 'FLASH_SALE'" size="small" type="danger">限时</el-tag> <el-tag v-if="order.orderType === 'FLASH_SALE'" size="small" type="danger">限时</el-tag>
<el-tag v-else-if="order.orderType === 'GROUP_BUYING'" type="success" size="small">拼团</el-tag> <el-tag v-else-if="order.orderType === 'GROUP_BUYING'" size="small" type="success">拼团</el-tag>
<el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag> <el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
</div> </div>
</div> </div>
<div class="p-6"> <div class="p-6">
<div v-for="item in order.items" :key="item.id" class="flex gap-4 mb-4 last:mb-0"> <div v-for="item in order.items" :key="item.id" class="flex gap-4 mb-4 last:mb-0">
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-20 h-20 rounded" img-class="w-20 h-20 object-cover rounded" /> <SafeImage :alt="item.productName" :src="item.productImage" img-class="w-20 h-20 object-cover rounded"
wrapper-class="w-20 h-20 rounded"/>
<div class="flex-1"> <div class="flex-1">
<h4 class="font-semibold">{{ item.productName }}</h4> <h4 class="font-semibold">{{ item.productName }}</h4>
<div class="text-sm text-gray-500 mt-1">¥{{ item.price }} × {{ item.quantity }}</div> <div class="text-sm text-gray-500 mt-1">¥{{ item.price }} × {{ item.quantity }}</div>
</div> </div>
<div class="text-right"><div class="font-semibold">¥{{ item.subtotal }}</div></div> <div class="text-right">
<div class="font-semibold">¥{{ item.subtotal }}</div>
</div>
</div> </div>
</div> </div>
@@ -82,32 +96,33 @@
<el-button text type="primary" @click="handleViewDetail(order.id)">查看详情</el-button> <el-button text type="primary" @click="handleViewDetail(order.id)">查看详情</el-button>
<template v-if="order.status === 'PENDING'"> <template v-if="order.status === 'PENDING'">
<el-button type="primary" size="small" @click="handlePay(order)">立即付款</el-button> <el-button size="small" type="primary" @click="handlePay(order)">立即付款</el-button>
<el-button size="small" @click="handleCancel(order)">取消订单</el-button> <el-button size="small" @click="handleCancel(order)">取消订单</el-button>
</template> </template>
<template v-else-if="order.status === 'SHIPPED'"> <template v-else-if="order.status === 'SHIPPED'">
<el-button type="primary" size="small" @click="handleConfirm(order)">确认收货</el-button> <el-button size="small" type="primary" @click="handleConfirm(order)">确认收货</el-button>
</template> </template>
<template v-else-if="order.status === 'COMPLETED'"> <template v-else-if="order.status === 'COMPLETED'">
<el-button v-if="orderReviewStatus[order.id]" size="small" @click="openReviewDialog(order)">查看评价</el-button> <el-button v-if="orderReviewStatus[order.id]" size="small" @click="openReviewDialog(order)">查看评价
<el-button v-else type="primary" size="small" @click="openReviewDialog(order)">评价</el-button> </el-button>
<el-button type="warning" size="small" @click="openReturnDialog(order)">申请退货</el-button> <el-button v-else size="small" type="primary" @click="openReviewDialog(order)">评价</el-button>
<el-button size="small" type="warning" @click="openReturnDialog(order)">申请退货</el-button>
<el-button size="small" @click="handleRebuy(order)">再次购买</el-button> <el-button size="small" @click="handleRebuy(order)">再次购买</el-button>
<el-button text type="danger" size="small" @click="handleDelete(order)">删除订单</el-button> <el-button size="small" text type="danger" @click="handleDelete(order)">删除订单</el-button>
</template> </template>
<template v-else-if="order.status === 'REFUNDING'"> <template v-else-if="order.status === 'REFUNDING'">
<el-button type="primary" size="small" @click="handleViewDetail(order.id)">查看退货进度</el-button> <el-button size="small" type="primary" @click="handleViewDetail(order.id)">查看退货进度</el-button>
</template> </template>
<template v-else-if="order.status === 'REFUNDED'"> <template v-else-if="order.status === 'REFUNDED'">
<el-button text type="danger" size="small" @click="handleDelete(order)">删除订单</el-button> <el-button size="small" text type="danger" @click="handleDelete(order)">删除订单</el-button>
</template> </template>
<template v-else-if="order.status === 'CANCELLED'"> <template v-else-if="order.status === 'CANCELLED'">
<el-button text type="danger" size="small" @click="handleDelete(order)">删除订单</el-button> <el-button size="small" text type="danger" @click="handleDelete(order)">删除订单</el-button>
</template> </template>
</div> </div>
</div> </div>
@@ -115,7 +130,10 @@
</div> </div>
<div v-if="orders.length > 0" class="mt-8 flex justify-center"> <div v-if="orders.length > 0" class="mt-8 flex justify-center">
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.size" :total="pagination.total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="loadOrders" @current-change="loadOrders" /> <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.size"
:page-sizes="[10, 20, 50]" :total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" @size-change="loadOrders"
@current-change="loadOrders"/>
</div> </div>
<ReviewDialog <ReviewDialog
@@ -137,7 +155,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue' import {ref, reactive, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -175,13 +193,33 @@ const orderStats = ref([
const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss') const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
const getStatusType = (status: string) => ({ PENDING: 'warning', PAID: 'primary', SHIPPED: 'primary', COMPLETED: 'success', CANCELLED: 'info', REFUNDING: 'warning', REFUNDED: 'danger' }[status] || 'info') const getStatusType = (status: string) => ({
const getStatusText = (status: string) => ({ PENDING: '待付款', PAID: '待发货', SHIPPED: '待收货', COMPLETED: '已完成', CANCELLED: '已取消', REFUNDING: '退货中', REFUNDED: '已退货' }[status] || status) PENDING: 'warning',
PAID: 'primary',
SHIPPED: 'primary',
COMPLETED: 'success',
CANCELLED: 'info',
REFUNDING: 'warning',
REFUNDED: 'danger'
}[status] || 'info')
const getStatusText = (status: string) => ({
PENDING: '待付款',
PAID: '待发货',
SHIPPED: '待收货',
COMPLETED: '已完成',
CANCELLED: '已取消',
REFUNDING: '退货中',
REFUNDED: '已退货'
}[status] || status)
const loadOrders = async () => { const loadOrders = async () => {
loading.value = true loading.value = true
try { try {
const res = await orderApi.getList({ page: pagination.page - 1, size: pagination.size, status: filters.status || undefined }) const res = await orderApi.getList({
page: pagination.page - 1,
size: pagination.size,
status: filters.status || undefined
})
if (res.success) { if (res.success) {
const keyword = filters.keyword.trim().toLowerCase() const keyword = filters.keyword.trim().toLowerCase()
const list = res.data.content const list = res.data.content
@@ -212,22 +250,59 @@ const loadStatistics = async () => {
} }
} }
const handleStatusFilter = (status: string) => { filters.status = status; pagination.page = 1; loadOrders() } const handleStatusFilter = (status: string) => {
filters.status = status;
pagination.page = 1;
loadOrders()
}
const handleViewDetail = (orderId: number) => router.push(`/order/${orderId}`) const handleViewDetail = (orderId: number) => router.push(`/order/${orderId}`)
const handlePay = async (order: Order) => { const handlePay = async (order: Order) => {
await ElMessageBox.confirm(`订单金额:¥${order.paymentAmount || order.totalAmount},确认付款?`, '付款确认', { confirmButtonText: '确认付款', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm(`订单金额:¥${order.paymentAmount || order.totalAmount},确认付款?`, '付款确认', {
try { await orderApi.pay(order.id, 'ONLINE'); ElMessage.success('付款成功'); loadOrders(); loadStatistics() } catch (error) { console.error('付款失败:', error) } confirmButtonText: '确认付款',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.pay(order.id, 'ONLINE');
ElMessage.success('付款成功');
loadOrders();
loadStatistics()
} catch (error) {
console.error('付款失败:', error)
}
} }
const handleCancel = async (order: Order) => { const handleCancel = async (order: Order) => {
await ElMessageBox.confirm('确定要取消该订单吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定要取消该订单吗?', '提示', {
try { await orderApi.cancel(order.id); ElMessage.success('订单已取消'); loadOrders(); loadStatistics() } catch (error) { console.error('取消订单失败:', error) } confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.cancel(order.id);
ElMessage.success('订单已取消');
loadOrders();
loadStatistics()
} catch (error) {
console.error('取消订单失败:', error)
}
} }
const handleConfirm = async (order: Order) => { const handleConfirm = async (order: Order) => {
await ElMessageBox.confirm('确定已收到商品?', '确认收货', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定已收到商品?', '确认收货', {
try { await orderApi.confirm(order.id); ElMessage.success('已确认收货'); loadOrders(); loadStatistics() } catch (error) { console.error('确认收货失败:', error) } confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.confirm(order.id);
ElMessage.success('已确认收货');
loadOrders();
loadStatistics()
} catch (error) {
console.error('确认收货失败:', error)
}
} }
const checkOrdersReviewStatus = async (orderList: Order[]) => { const checkOrdersReviewStatus = async (orderList: Order[]) => {
@@ -275,14 +350,28 @@ const handleRebuy = async (order: Order) => {
} }
const handleDelete = async (order: Order) => { const handleDelete = async (order: Order) => {
await ElMessageBox.confirm('确定删除该订单吗?删除后不可恢复。', '删除确认', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定删除该订单吗?删除后不可恢复。', '删除确认', {
try { await orderApi.delete(order.id); ElMessage.success('订单已删除'); loadOrders(); loadStatistics() } catch (error) { console.error('删除订单失败:', error) } confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
})
try {
await orderApi.delete(order.id);
ElMessage.success('订单已删除');
loadOrders();
loadStatistics()
} catch (error) {
console.error('删除订单失败:', error)
}
} }
onMounted(() => { loadOrders(); loadStatistics() }) onMounted(() => {
loadOrders();
loadStatistics()
})
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.orders-page { .orders-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -2,14 +2,16 @@
<div class="product-detail-page"> <div class="product-detail-page">
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<!-- 面包屑 --> <!-- 面包屑 -->
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/products' }">商品列表</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/products' }">商品列表</el-breadcrumb-item>
<el-breadcrumb-item>{{ product?.name || '商品详情' }}</el-breadcrumb-item> <el-breadcrumb-item>{{ product?.name || '商品详情' }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -25,11 +27,13 @@
<!-- 左侧商品图片 --> <!-- 左侧商品图片 -->
<div> <div>
<div class="relative"> <div class="relative">
<SafeImage :src="currentImage" :alt="product?.name || '商品图片'" wrapper-class="w-full h-[420px] rounded-2xl overflow-hidden bg-gray-100" img-class="w-full h-[420px] object-cover" /> <SafeImage :alt="product?.name || '商品图片'" :src="currentImage"
img-class="w-full h-[420px] object-cover"
wrapper-class="w-full h-[420px] rounded-2xl overflow-hidden bg-gray-100"/>
<!-- 商品状态 --> <!-- 商品状态 -->
<div v-if="product.stock === 0" class="absolute top-4 right-4"> <div v-if="product.stock === 0" class="absolute top-4 right-4">
<el-tag type="info" size="large">已售罄</el-tag> <el-tag size="large" type="info">已售罄</el-tag>
</div> </div>
</div> </div>
@@ -38,10 +42,10 @@
<img <img
v-for="(img, index) in product.images" v-for="(img, index) in product.images"
:key="index" :key="index"
:src="img"
:alt="`${product.name}-${index}`" :alt="`${product.name}-${index}`"
class="w-20 h-20 object-cover rounded cursor-pointer border-2"
:class="currentImage === img ? 'border-primary-500' : 'border-transparent'" :class="currentImage === img ? 'border-primary-500' : 'border-transparent'"
:src="img"
class="w-20 h-20 object-cover rounded cursor-pointer border-2"
@click="currentImage = img" @click="currentImage = img"
@error="handleImageError" @error="handleImageError"
> >
@@ -84,9 +88,9 @@
<label class="block text-sm text-gray-600 mb-2">购买数量</label> <label class="block text-sm text-gray-600 mb-2">购买数量</label>
<el-input-number <el-input-number
v-model="quantity" v-model="quantity"
:min="1"
:max="product.stock"
:disabled="product.stock === 0" :disabled="product.stock === 0"
:max="product.stock"
:min="1"
/> />
<span class="ml-3 text-sm text-gray-500"> <span class="ml-3 text-sm text-gray-500">
库存 {{ product.stock }} 库存 {{ product.stock }}
@@ -96,19 +100,21 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="flex gap-4 mb-6"> <div class="flex gap-4 mb-6">
<el-button <el-button
type="primary"
size="large"
:disabled="product.stock === 0" :disabled="product.stock === 0"
size="large"
type="primary"
@click="handleAddToCart" @click="handleAddToCart"
> >
<el-icon class="mr-2"><ShoppingCart /></el-icon> <el-icon class="mr-2">
<ShoppingCart/>
</el-icon>
加入购物车 加入购物车
</el-button> </el-button>
<el-button <el-button
type="danger"
size="large"
:disabled="product.stock === 0" :disabled="product.stock === 0"
size="large"
type="danger"
@click="handleBuyNow" @click="handleBuyNow"
> >
立即购买 立即购买
@@ -137,7 +143,10 @@
</div> </div>
<div> <div>
<dt class="text-gray-500">用户评分</dt> <dt class="text-gray-500">用户评分</dt>
<dd class="font-medium">{{ reviewSummary.averageRating.toFixed(1) }} / 5{{ reviewSummary.totalReviews }} </dd> <dd class="font-medium">{{ reviewSummary.averageRating.toFixed(1) }} / 5{{
reviewSummary.totalReviews
}}
</dd>
</div> </div>
<div> <div>
<dt class="text-gray-500">上架时间</dt> <dt class="text-gray-500">上架时间</dt>
@@ -167,7 +176,7 @@
<div class="flex items-center gap-8 mb-4"> <div class="flex items-center gap-8 mb-4">
<div class="text-center"> <div class="text-center">
<div class="text-3xl font-bold text-yellow-500">{{ reviewSummary.averageRating.toFixed(1) }}</div> <div class="text-3xl font-bold text-yellow-500">{{ reviewSummary.averageRating.toFixed(1) }}</div>
<el-rate :model-value="reviewSummary.averageRating" disabled class="mt-1" /> <el-rate :model-value="reviewSummary.averageRating" class="mt-1" disabled/>
<div class="text-sm text-gray-500 mt-1">累计 {{ reviewSummary.totalReviews }} 条评价</div> <div class="text-sm text-gray-500 mt-1">累计 {{ reviewSummary.totalReviews }} 条评价</div>
</div> </div>
<div class="flex-1 space-y-1"> <div class="flex-1 space-y-1">
@@ -175,8 +184,8 @@
<span class="text-sm text-gray-500 w-8">{{ star }}</span> <span class="text-sm text-gray-500 w-8">{{ star }}</span>
<el-progress <el-progress
:percentage="getRatingPercentage(star)" :percentage="getRatingPercentage(star)"
:stroke-width="12"
:show-text="false" :show-text="false"
:stroke-width="12"
class="flex-1" class="flex-1"
/> />
<span class="text-sm text-gray-400 w-10 text-right">{{ getRatingCount(star) }}</span> <span class="text-sm text-gray-400 w-10 text-right">{{ getRatingCount(star) }}</span>
@@ -192,7 +201,8 @@
</div> </div>
<el-rate :model-value="review.rating" disabled/> <el-rate :model-value="review.rating" disabled/>
<p class="text-gray-600 mt-3 leading-6">{{ review.content }}</p> <p class="text-gray-600 mt-3 leading-6">{{ review.content }}</p>
<div v-if="review.adminReply" class="mt-3 rounded-lg bg-gray-50 border border-gray-200 p-3 text-sm text-gray-600"> <div v-if="review.adminReply"
class="mt-3 rounded-lg bg-gray-50 border border-gray-200 p-3 text-sm text-gray-600">
<div class="font-medium text-gray-800 mb-1">商家回复</div> <div class="font-medium text-gray-800 mb-1">商家回复</div>
<div>{{ review.adminReply }}</div> <div>{{ review.adminReply }}</div>
</div> </div>
@@ -233,7 +243,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -396,7 +406,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.product-detail-page { .product-detail-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -4,7 +4,9 @@
<!-- 页面标题 --> <!-- 页面标题 -->
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold mb-2 flex items-center"> <h1 class="text-3xl font-bold mb-2 flex items-center">
<el-icon class="page-icon mr-2"><ShoppingBag /></el-icon> <el-icon class="page-icon mr-2">
<ShoppingBag/>
</el-icon>
商品列表 商品列表
</h1> </h1>
<p class="text-gray-600">精选好物品质保证</p> <p class="text-gray-600">精选好物品质保证</p>
@@ -38,8 +40,8 @@
<!-- 分类筛选 --> <!-- 分类筛选 -->
<el-select <el-select
v-model="filters.category" v-model="filters.category"
placeholder="选择分类"
clearable clearable
placeholder="选择分类"
style="width: 150px" style="width: 150px"
@change="loadProducts" @change="loadProducts"
> >
@@ -81,9 +83,9 @@
<!-- 搜索 --> <!-- 搜索 -->
<el-input <el-input
v-model="filters.keyword" v-model="filters.keyword"
clearable
placeholder="搜索商品" placeholder="搜索商品"
style="width: 200px" style="width: 200px"
clearable
@keyup.enter="loadProducts" @keyup.enter="loadProducts"
> >
<template #suffix> <template #suffix>
@@ -97,7 +99,9 @@
<!-- 商品列表 --> <!-- 商品列表 -->
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -120,8 +124,8 @@
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.size" v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[12, 24, 36, 48]" :page-sizes="[12, 24, 36, 48]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="loadProducts" @size-change="loadProducts"
@current-change="loadProducts" @current-change="loadProducts"
@@ -132,7 +136,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, onMounted, watch} from 'vue' import {ref, reactive, onMounted, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -266,7 +270,7 @@ watch(() => route.query, (newQuery) => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.products-page { .products-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -3,14 +3,18 @@
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold mb-2 flex items-center"> <h1 class="text-3xl font-bold mb-2 flex items-center">
<el-icon class="text-pink-500 mr-2"><StarFilled /></el-icon> <el-icon class="text-pink-500 mr-2">
<StarFilled/>
</el-icon>
我的收藏 我的收藏
</h1> </h1>
<p class="text-gray-600">收藏你感兴趣的商品随时回来查看</p> <p class="text-gray-600">收藏你感兴趣的商品随时回来查看</p>
</div> </div>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -21,13 +25,14 @@
</div> </div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div v-for="item in favorites" :key="item.id" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow"> <div v-for="item in favorites" :key="item.id"
class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow">
<SafeImage <SafeImage
:src="item.productImageUrl"
:alt="item.productName" :alt="item.productName"
wrapper-class="w-full h-48 bg-gray-100"
img-class="w-full h-48 object-cover"
:clickable="true" :clickable="true"
:src="item.productImageUrl"
img-class="w-full h-48 object-cover"
wrapper-class="w-full h-48 bg-gray-100"
@click="router.push(`/product/${item.productId}`)" @click="router.push(`/product/${item.productId}`)"
/> />
<div class="p-4"> <div class="p-4">
@@ -38,7 +43,7 @@
<span class="text-xs text-gray-400">收藏于 {{ formatTime(item.createdAt) }}</span> <span class="text-xs text-gray-400">收藏于 {{ formatTime(item.createdAt) }}</span>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<el-button type="primary" class="flex-1" @click="addToCart(item.productId)">加入购物车</el-button> <el-button class="flex-1" type="primary" @click="addToCart(item.productId)">加入购物车</el-button>
<el-button @click="toggleFavorite(item.productId)">取消收藏</el-button> <el-button @click="toggleFavorite(item.productId)">取消收藏</el-button>
</div> </div>
</div> </div>
@@ -48,7 +53,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {onMounted, ref} from 'vue' import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@@ -91,7 +96,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.favorites-page { .favorites-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -21,21 +21,21 @@
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
size="large" clearable
placeholder="请输入用户名" placeholder="请输入用户名"
prefix-icon="User" prefix-icon="User"
clearable size="large"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model="loginForm.password" v-model="loginForm.password"
type="password"
size="large"
placeholder="请输入密码" placeholder="请输入密码"
prefix-icon="Lock" prefix-icon="Lock"
show-password show-password
size="large"
type="password"
@keyup.enter="handleLogin" @keyup.enter="handleLogin"
/> />
</el-form-item> </el-form-item>
@@ -43,16 +43,16 @@
<el-form-item> <el-form-item>
<div class="flex justify-between items-center w-full"> <div class="flex justify-between items-center w-full">
<el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox> <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
<el-link type="primary" :underline="false">忘记密码</el-link> <el-link :underline="false" type="primary">忘记密码</el-link>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
type="primary"
size="large"
class="w-full"
:loading="loading" :loading="loading"
class="w-full"
size="large"
type="primary"
@click="handleLogin" @click="handleLogin"
> >
@@ -61,7 +61,7 @@
<div class="text-center"> <div class="text-center">
<span class="text-gray-600">还没有账号</span> <span class="text-gray-600">还没有账号</span>
<router-link to="/register" class="text-primary-500 hover:underline"> <router-link class="text-primary-500 hover:underline" to="/register">
立即注册 立即注册
</router-link> </router-link>
</div> </div>
@@ -71,7 +71,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive} from 'vue' import {ref, reactive} from 'vue'
import type {FormInstance, FormRules} from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
import {useUserStore} from '@/stores/user' import {useUserStore} from '@/stores/user'
@@ -119,7 +119,7 @@ const handleLogin = async () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.login-page { .login-page {
background: transparent; background: transparent;
} }

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="max-w-4xl mx-auto py-6 px-4"> <div class="max-w-4xl mx-auto py-6 px-4">
<!-- 面包屑 --> <!-- 面包屑 -->
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>消息通知</el-breadcrumb-item> <el-breadcrumb-item>消息通知</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
@@ -10,10 +10,10 @@
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">消息通知</h2> <h2 class="text-xl font-semibold">消息通知</h2>
<div class="flex gap-2"> <div class="flex gap-2">
<el-button size="small" @click="handleMarkAllRead" :disabled="unreadCount === 0"> <el-button :disabled="unreadCount === 0" size="small" @click="handleMarkAllRead">
全部已读 全部已读
</el-button> </el-button>
<el-button size="small" type="danger" plain @click="handleClearAll" :disabled="notifications.length === 0"> <el-button :disabled="notifications.length === 0" plain size="small" type="danger" @click="handleClearAll">
清空全部 清空全部
</el-button> </el-button>
</div> </div>
@@ -29,7 +29,9 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="32" class="animate-spin"><Loading /></el-icon> <el-icon :size="32" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -38,27 +40,27 @@
<div <div
v-for="item in notifications" v-for="item in notifications"
:key="item.id" :key="item.id"
class="border rounded-lg p-4 cursor-pointer transition-colors hover:bg-gray-50"
:class="{ 'bg-orange-50/50 border-orange-200': !item.read }" :class="{ 'bg-orange-50/50 border-orange-200': !item.read }"
class="border rounded-lg p-4 cursor-pointer transition-colors hover:bg-gray-50"
@click="handleClick(item)" @click="handleClick(item)"
> >
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<el-icon :size="20" class="mt-0.5" :class="getIconColor(item.type)"> <el-icon :class="getIconColor(item.type)" :size="20" class="mt-0.5">
<component :is="getIcon(item.type)"/> <component :is="getIcon(item.type)"/>
</el-icon> </el-icon>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
<span class="font-medium" :class="{ 'font-semibold': !item.read }">{{ item.title }}</span> <span :class="{ 'font-semibold': !item.read }" class="font-medium">{{ item.title }}</span>
<el-tag v-if="!item.read" type="danger" size="small" effect="light">未读</el-tag> <el-tag v-if="!item.read" effect="light" size="small" type="danger">未读</el-tag>
<el-tag size="small" effect="plain">{{ getTypeLabel(item.type) }}</el-tag> <el-tag effect="plain" size="small">{{ getTypeLabel(item.type) }}</el-tag>
</div> </div>
<p class="text-sm text-gray-600 mb-2">{{ item.message }}</p> <p class="text-sm text-gray-600 mb-2">{{ item.message }}</p>
<span class="text-xs text-gray-400">{{ formatTime(item.createdAt) }}</span> <span class="text-xs text-gray-400">{{ formatTime(item.createdAt) }}</span>
</div> </div>
<el-button <el-button
v-if="!item.read" v-if="!item.read"
text
size="small" size="small"
text
@click.stop="handleMarkRead(item)" @click.stop="handleMarkRead(item)"
> >
标记已读 标记已读
@@ -68,11 +70,11 @@
</div> </div>
<!-- 空状态 --> <!-- 空状态 -->
<el-empty v-else description="暂无消息通知" class="py-12" /> <el-empty v-else class="py-12" description="暂无消息通知"/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -139,7 +141,8 @@ const handleClearAll = async () => {
const handleClick = async (item: NotificationItem) => { const handleClick = async (item: NotificationItem) => {
if (!item.read) { if (!item.read) {
await notificationApi.markAsRead(item.id).catch(() => {}) await notificationApi.markAsRead(item.id).catch(() => {
})
item.read = true item.read = true
} }
if (item.link) { if (item.link) {

View File

@@ -32,11 +32,31 @@
</div> </div>
<el-menu :default-active="activeMenu" @select="handleMenuSelect"> <el-menu :default-active="activeMenu" @select="handleMenuSelect">
<el-menu-item index="info"><el-icon><User /></el-icon><span>基本信息</span></el-menu-item> <el-menu-item index="info">
<el-menu-item index="security"><el-icon><Lock /></el-icon><span>账号安全</span></el-menu-item> <el-icon>
<el-menu-item index="address"><el-icon><Location /></el-icon><span>收货地址</span></el-menu-item> <User/>
<el-menu-item index="orders"><el-icon><List /></el-icon><span>我的订单</span></el-menu-item> </el-icon>
<el-menu-item index="favorites"><el-icon><Star /></el-icon><span>我的收藏</span></el-menu-item> <span>基本信息</span></el-menu-item>
<el-menu-item index="security">
<el-icon>
<Lock/>
</el-icon>
<span>账号安全</span></el-menu-item>
<el-menu-item index="address">
<el-icon>
<Location/>
</el-icon>
<span>收货地址</span></el-menu-item>
<el-menu-item index="orders">
<el-icon>
<List/>
</el-icon>
<span>我的订单</span></el-menu-item>
<el-menu-item index="favorites">
<el-icon>
<Star/>
</el-icon>
<span>我的收藏</span></el-menu-item>
</el-menu> </el-menu>
</div> </div>
</div> </div>
@@ -46,33 +66,54 @@
<div v-if="activeMenu === 'info'"> <div v-if="activeMenu === 'info'">
<h2 class="text-xl font-semibold mb-6">基本信息</h2> <h2 class="text-xl font-semibold mb-6">基本信息</h2>
<el-form ref="infoFormRef" :model="infoForm" :rules="infoRules" label-width="100px"> <el-form ref="infoFormRef" :model="infoForm" :rules="infoRules" label-width="100px">
<el-form-item label="用户名"><el-input v-model="infoForm.username" disabled /></el-form-item> <el-form-item label="用户名">
<el-form-item label="邮箱" prop="email"><el-input v-model="infoForm.email" /></el-form-item> <el-input v-model="infoForm.username" disabled/>
<el-form-item label="手机号" prop="phone"><el-input v-model="infoForm.phone" /></el-form-item> </el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="infoForm.email"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="infoForm.phone"/>
</el-form-item>
<el-form-item label="头像"> <el-form-item label="头像">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<el-avatar :size="60" :src="infoForm.avatar">{{ (infoForm.username || 'U')[0] }}</el-avatar> <el-avatar :size="60" :src="infoForm.avatar">{{ (infoForm.username || 'U')[0] }}</el-avatar>
<el-button @click="handleUpdateAvatar">更换头像</el-button> <el-button @click="handleUpdateAvatar">更换头像</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item><el-button type="primary" @click="handleSaveInfo">保存修改</el-button></el-form-item> <el-form-item>
<el-button type="primary" @click="handleSaveInfo">保存修改</el-button>
</el-form-item>
</el-form> </el-form>
</div> </div>
<div v-else-if="activeMenu === 'security'"> <div v-else-if="activeMenu === 'security'">
<h2 class="text-xl font-semibold mb-6">账号安全</h2> <h2 class="text-xl font-semibold mb-6">账号安全</h2>
<el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="100px"> <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
<el-form-item label="原密码" prop="oldPassword"><el-input v-model="passwordForm.oldPassword" type="password" show-password /></el-form-item> <el-form-item label="原密码" prop="oldPassword">
<el-form-item label="新密码" prop="newPassword"><el-input v-model="passwordForm.newPassword" type="password" show-password /></el-form-item> <el-input v-model="passwordForm.oldPassword" show-password type="password"/>
<el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="passwordForm.confirmPassword" type="password" show-password /></el-form-item> </el-form-item>
<el-form-item><el-button type="primary" @click="handleChangePassword">修改密码</el-button></el-form-item> <el-form-item label="新密码" prop="newPassword">
<el-input v-model="passwordForm.newPassword" show-password type="password"/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="passwordForm.confirmPassword" show-password type="password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChangePassword">修改密码</el-button>
</el-form-item>
</el-form> </el-form>
</div> </div>
<div v-else-if="activeMenu === 'address'"> <div v-else-if="activeMenu === 'address'">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold">收货地址</h2> <h2 class="text-xl font-semibold">收货地址</h2>
<el-button type="primary" @click="openAddressDialog()"><el-icon class="mr-1"><Plus /></el-icon>添加地址</el-button> <el-button type="primary" @click="openAddressDialog()">
<el-icon class="mr-1">
<Plus/>
</el-icon>
添加地址
</el-button>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div v-for="addr in addresses" :key="addr.id" class="border rounded-lg p-4"> <div v-for="addr in addresses" :key="addr.id" class="border rounded-lg p-4">
@@ -81,14 +122,18 @@
<div class="flex items-center gap-2 mb-2 flex-wrap"> <div class="flex items-center gap-2 mb-2 flex-wrap">
<span class="font-semibold">{{ addr.name }}</span> <span class="font-semibold">{{ addr.name }}</span>
<span class="text-gray-500">{{ addr.phone }}</span> <span class="text-gray-500">{{ addr.phone }}</span>
<el-tag v-if="addr.isDefault" type="primary" size="small">默认</el-tag> <el-tag v-if="addr.isDefault" size="small" type="primary">默认</el-tag>
</div> </div>
<p class="text-gray-600">{{ addr.province }} {{ addr.city }} {{ addr.district }} {{ addr.address }}</p> <p class="text-gray-600">{{ addr.province }} {{ addr.city }} {{ addr.district }} {{
addr.address
}}</p>
</div> </div>
<div class="space-x-2 whitespace-nowrap"> <div class="space-x-2 whitespace-nowrap">
<el-button v-if="!addr.isDefault" text type="success" size="small" @click="setDefaultAddress(addr.id)">设为默认</el-button> <el-button v-if="!addr.isDefault" size="small" text type="success"
<el-button text type="primary" size="small" @click="openAddressDialog(addr)">编辑</el-button> @click="setDefaultAddress(addr.id)">设为默认
<el-button text type="danger" size="small" @click="removeAddress(addr.id)">删除</el-button> </el-button>
<el-button size="small" text type="primary" @click="openAddressDialog(addr)">编辑</el-button>
<el-button size="small" text type="danger" @click="removeAddress(addr.id)">删除</el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -113,16 +158,40 @@
<el-dialog v-model="addressDialogVisible" :title="editingAddressId ? '编辑地址' : '新增地址'" width="620px"> <el-dialog v-model="addressDialogVisible" :title="editingAddressId ? '编辑地址' : '新增地址'" width="620px">
<el-form ref="addressFormRef" :model="addressForm" :rules="addressRules" label-width="90px"> <el-form ref="addressFormRef" :model="addressForm" :rules="addressRules" label-width="90px">
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="12"><el-form-item label="收货人" prop="name"><el-input v-model="addressForm.name" /></el-form-item></el-col> <el-col :span="12">
<el-col :span="12"><el-form-item label="手机号" prop="phone"><el-input v-model="addressForm.phone" /></el-form-item></el-col> <el-form-item label="收货人" prop="name">
<el-input v-model="addressForm.name"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input v-model="addressForm.phone"/>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="8"><el-form-item label="省份" prop="province"><el-input v-model="addressForm.province" /></el-form-item></el-col> <el-col :span="8">
<el-col :span="8"><el-form-item label="城市" prop="city"><el-input v-model="addressForm.city" /></el-form-item></el-col> <el-form-item label="省份" prop="province">
<el-col :span="8"><el-form-item label="区县" prop="district"><el-input v-model="addressForm.district" /></el-form-item></el-col> <el-input v-model="addressForm.province"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="城市" prop="city">
<el-input v-model="addressForm.city"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="区县" prop="district">
<el-input v-model="addressForm.district"/>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-form-item label="详细地址" prop="address"><el-input v-model="addressForm.address" type="textarea" :rows="3" /></el-form-item> <el-form-item label="详细地址" prop="address">
<el-form-item><el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox></el-form-item> <el-input v-model="addressForm.address" :rows="3" type="textarea"/>
</el-form-item>
<el-form-item>
<el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
</el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="addressDialogVisible = false">取消</el-button> <el-button @click="addressDialogVisible = false">取消</el-button>
@@ -132,7 +201,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {onMounted, reactive, ref, watch} from 'vue' import {onMounted, reactive, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -156,10 +225,23 @@ const profileStats = reactive({ totalOrders: 0, totalAmount: 0, flashSaleSuccess
const infoForm = reactive({username: '', email: '', phone: '', avatar: ''}) const infoForm = reactive({username: '', email: '', phone: '', avatar: ''})
const passwordForm = reactive({oldPassword: '', newPassword: '', confirmPassword: ''}) const passwordForm = reactive({oldPassword: '', newPassword: '', confirmPassword: ''})
const addressForm = reactive<AddressItem>({ id: 0, name: '', phone: '', province: '', city: '', district: '', address: '', isDefault: false }) const addressForm = reactive<AddressItem>({
id: 0,
name: '',
phone: '',
province: '',
city: '',
district: '',
address: '',
isDefault: false
})
const infoRules: FormRules = { const infoRules: FormRules = {
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }], email: [{required: true, message: '请输入邮箱', trigger: 'blur'}, {
type: 'email',
message: '请输入正确的邮箱地址',
trigger: 'blur'
}],
phone: [{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}], phone: [{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}],
} }
@@ -171,7 +253,12 @@ const validatePassword = (_rule: any, value: string, callback: (error?: Error) =
const passwordRules: FormRules = { const passwordRules: FormRules = {
oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'}], oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'}],
newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }], newPassword: [{required: true, message: '请输入新密码', trigger: 'blur'}, {
min: 6,
max: 20,
message: '密码长度在 6 到 20 个字符',
trigger: 'blur'
}],
confirmPassword: [{required: true, validator: validatePassword, trigger: 'blur'}], confirmPassword: [{required: true, validator: validatePassword, trigger: 'blur'}],
} }
@@ -216,7 +303,16 @@ const loadProfileStats = async () => {
const resetAddressForm = () => { const resetAddressForm = () => {
editingAddressId.value = null editingAddressId.value = null
Object.assign(addressForm, { id: 0, name: '', phone: '', province: '', city: '', district: '', address: '', isDefault: false }) Object.assign(addressForm, {
id: 0,
name: '',
phone: '',
province: '',
city: '',
district: '',
address: '',
isDefault: false
})
} }
const handleMenuSelect = (index: string) => { const handleMenuSelect = (index: string) => {
@@ -245,11 +341,16 @@ const handleSaveInfo = async () => {
const handleUpdateAvatar = async () => { const handleUpdateAvatar = async () => {
try { try {
const { value } = await ElMessageBox.prompt('请输入新的头像图片 URL', '更换头像', { inputValue: infoForm.avatar, confirmButtonText: '保存', cancelButtonText: '取消' }) const {value} = await ElMessageBox.prompt('请输入新的头像图片 URL', '更换头像', {
inputValue: infoForm.avatar,
confirmButtonText: '保存',
cancelButtonText: '取消'
})
infoForm.avatar = value || '' infoForm.avatar = value || ''
userStore.updateUserInfo({avatar: infoForm.avatar}) userStore.updateUserInfo({avatar: infoForm.avatar})
ElMessage.success('头像已更新') ElMessage.success('头像已更新')
} catch {} } catch {
}
} }
const handleChangePassword = async () => { const handleChangePassword = async () => {
@@ -257,7 +358,11 @@ const handleChangePassword = async () => {
await passwordFormRef.value.validate(async (valid) => { await passwordFormRef.value.validate(async (valid) => {
if (!valid) return if (!valid) return
try { try {
const res = await userApi.changePassword({ oldPassword: passwordForm.oldPassword, newPassword: passwordForm.newPassword, confirmPassword: passwordForm.confirmPassword }) const res = await userApi.changePassword({
oldPassword: passwordForm.oldPassword,
newPassword: passwordForm.newPassword,
confirmPassword: passwordForm.confirmPassword
})
if (res.success) { if (res.success) {
ElMessage.success('密码修改成功,请重新登录') ElMessage.success('密码修改成功,请重新登录')
await userStore.logout() await userStore.logout()
@@ -281,7 +386,15 @@ const saveAddress = async () => {
if (!addressFormRef.value) return if (!addressFormRef.value) return
await addressFormRef.value.validate(async (valid) => { await addressFormRef.value.validate(async (valid) => {
if (!valid) return if (!valid) return
const payload = { name: addressForm.name, phone: addressForm.phone, province: addressForm.province, city: addressForm.city, district: addressForm.district, address: addressForm.address, isDefault: addressForm.isDefault } const payload = {
name: addressForm.name,
phone: addressForm.phone,
province: addressForm.province,
city: addressForm.city,
district: addressForm.district,
address: addressForm.address,
isDefault: addressForm.isDefault
}
try { try {
if (editingAddressId.value) { if (editingAddressId.value) {
await addressApi.update(editingAddressId.value, payload) await addressApi.update(editingAddressId.value, payload)
@@ -323,7 +436,7 @@ onMounted(async () => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.profile-page { .profile-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -21,52 +21,52 @@
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="registerForm.username" v-model="registerForm.username"
size="large" clearable
placeholder="请输入用户名" placeholder="请输入用户名"
prefix-icon="User" prefix-icon="User"
clearable size="large"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="email"> <el-form-item prop="email">
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
size="large" clearable
placeholder="请输入邮箱" placeholder="请输入邮箱"
prefix-icon="Message" prefix-icon="Message"
clearable size="large"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="phone"> <el-form-item prop="phone">
<el-input <el-input
v-model="registerForm.phone" v-model="registerForm.phone"
size="large" clearable
placeholder="请输入手机号(选填)" placeholder="请输入手机号(选填)"
prefix-icon="Phone" prefix-icon="Phone"
clearable size="large"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model="registerForm.password" v-model="registerForm.password"
type="password"
size="large"
placeholder="请输入密码" placeholder="请输入密码"
prefix-icon="Lock" prefix-icon="Lock"
show-password show-password
size="large"
type="password"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="confirmPassword"> <el-form-item prop="confirmPassword">
<el-input <el-input
v-model="registerForm.confirmPassword" v-model="registerForm.confirmPassword"
type="password"
size="large"
placeholder="请确认密码" placeholder="请确认密码"
prefix-icon="Lock" prefix-icon="Lock"
show-password show-password
size="large"
type="password"
@keyup.enter="handleRegister" @keyup.enter="handleRegister"
/> />
</el-form-item> </el-form-item>
@@ -74,18 +74,18 @@
<el-form-item prop="agreement"> <el-form-item prop="agreement">
<el-checkbox v-model="registerForm.agreement"> <el-checkbox v-model="registerForm.agreement">
我已阅读并同意 我已阅读并同意
<el-link type="primary" :underline="false">用户协议</el-link> <el-link :underline="false" type="primary">用户协议</el-link>
<el-link type="primary" :underline="false">隐私政策</el-link> <el-link :underline="false" type="primary">隐私政策</el-link>
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
type="primary"
size="large"
class="w-full"
:loading="loading" :loading="loading"
class="w-full"
size="large"
type="primary"
@click="handleRegister" @click="handleRegister"
> >
@@ -94,7 +94,7 @@
<div class="text-center"> <div class="text-center">
<span class="text-gray-600">已有账号</span> <span class="text-gray-600">已有账号</span>
<router-link to="/login" class="text-primary-500 hover:underline"> <router-link class="text-primary-500 hover:underline" to="/login">
立即登录 立即登录
</router-link> </router-link>
</div> </div>
@@ -104,7 +104,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive} from 'vue' import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage, ElForm} from 'element-plus' import {ElMessage, ElForm} from 'element-plus'
@@ -190,7 +190,7 @@ const handleRegister = async () => {
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.register-page { .register-page {
background: transparent; background: transparent;
} }

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="user-returns-page"> <div class="user-returns-page">
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>我的退货</el-breadcrumb-item> <el-breadcrumb-item>我的退货</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
@@ -20,7 +20,9 @@
</div> </div>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -40,13 +42,17 @@
<div class="p-6"> <div class="p-6">
<div class="flex gap-4"> <div class="flex gap-4">
<SafeImage :src="item.productImage" :alt="item.productName" wrapper-class="w-20 h-20 rounded" img-class="w-20 h-20 object-cover rounded" /> <SafeImage :alt="item.productName" :src="item.productImage" img-class="w-20 h-20 object-cover rounded"
wrapper-class="w-20 h-20 rounded"/>
<div class="flex-1"> <div class="flex-1">
<h4 class="font-semibold">{{ item.productName || '商品' }}</h4> <h4 class="font-semibold">{{ item.productName || '商品' }}</h4>
<div class="text-sm text-gray-500 mt-1">订单号{{ item.orderNo }}</div> <div class="text-sm text-gray-500 mt-1">订单号{{ item.orderNo }}</div>
<div class="text-sm text-gray-500 mt-1">退货原因{{ item.reason }}</div> <div class="text-sm text-gray-500 mt-1">退货原因{{ item.reason }}</div>
<div v-if="item.rejectReason" class="text-sm text-red-500 mt-1">拒绝原因{{ item.rejectReason }}</div> <div v-if="item.rejectReason" class="text-sm text-red-500 mt-1">拒绝原因{{ item.rejectReason }}</div>
<div v-if="item.returnTracking" class="text-sm text-gray-500 mt-1">物流单号{{ item.returnTracking }}</div> <div v-if="item.returnTracking" class="text-sm text-gray-500 mt-1">物流单号{{
item.returnTracking
}}
</div>
</div> </div>
<div class="text-right"> <div class="text-right">
<div class="text-sm text-gray-500">退款金额</div> <div class="text-sm text-gray-500">退款金额</div>
@@ -57,14 +63,20 @@
<div class="border-t px-6 py-4 flex justify-end gap-2"> <div class="border-t px-6 py-4 flex justify-end gap-2">
<el-button text type="primary" @click="router.push(`/order/${item.orderId}`)">查看订单</el-button> <el-button text type="primary" @click="router.push(`/order/${item.orderId}`)">查看订单</el-button>
<el-button v-if="item.status === 'APPROVED'" type="primary" size="small" @click="openTrackingDialog(item)">填写物流</el-button> <el-button v-if="item.status === 'APPROVED'" size="small" type="primary" @click="openTrackingDialog(item)">
<el-button v-if="item.status === 'PENDING' || item.status === 'APPROVED'" size="small" @click="handleCancel(item)">取消退货</el-button> 填写物流
</el-button>
<el-button v-if="item.status === 'PENDING' || item.status === 'APPROVED'" size="small"
@click="handleCancel(item)">取消退货
</el-button>
</div> </div>
</div> </div>
</div> </div>
<div v-if="pagination.total > 0" class="mt-8 flex justify-center"> <div v-if="pagination.total > 0" class="mt-8 flex justify-center">
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.size" :total="pagination.total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next" @size-change="loadReturns" @current-change="loadReturns" /> <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.size"
:page-sizes="[10, 20, 50]" :total="pagination.total" layout="total, sizes, prev, pager, next"
@size-change="loadReturns" @current-change="loadReturns"/>
</div> </div>
<ReturnTrackingDialog <ReturnTrackingDialog
@@ -77,7 +89,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue' import {ref, reactive, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
@@ -97,7 +109,14 @@ const trackingDialogVisible = ref(false)
const currentReturn = ref<OrderReturn | null>(null) const currentReturn = ref<OrderReturn | null>(null)
const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss') const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
const getReturnStatusType = (status: string) => ({ PENDING: 'warning', APPROVED: 'primary', RETURNING: 'primary', COMPLETED: 'success', REJECTED: 'danger', CANCELLED: 'info' }[status] || 'info') const getReturnStatusType = (status: string) => ({
PENDING: 'warning',
APPROVED: 'primary',
RETURNING: 'primary',
COMPLETED: 'success',
REJECTED: 'danger',
CANCELLED: 'info'
}[status] || 'info')
const loadReturns = async () => { const loadReturns = async () => {
loading.value = true loading.value = true
@@ -125,7 +144,11 @@ const openTrackingDialog = (item: OrderReturn) => {
} }
const handleCancel = async (item: OrderReturn) => { const handleCancel = async (item: OrderReturn) => {
await ElMessageBox.confirm('确定要取消退货申请吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await ElMessageBox.confirm('确定要取消退货申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
try { try {
await returnApi.cancel(item.id) await returnApi.cancel(item.id)
ElMessage.success('退货申请已取消') ElMessage.success('退货申请已取消')
@@ -135,10 +158,12 @@ const handleCancel = async (item: OrderReturn) => {
} }
} }
onMounted(() => { loadReturns() }) onMounted(() => {
loadReturns()
})
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.user-returns-page { .user-returns-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="user-reviews-page"> <div class="user-reviews-page">
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<el-breadcrumb separator="/" class="mb-6"> <el-breadcrumb class="mb-6" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>我的评价</el-breadcrumb-item> <el-breadcrumb-item>我的评价</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
@@ -9,7 +9,9 @@
<h1 class="text-3xl font-bold mb-6">我的评价</h1> <h1 class="text-3xl font-bold mb-6">我的评价</h1>
<div v-if="loading" class="text-center py-12"> <div v-if="loading" class="text-center py-12">
<el-icon :size="40" class="animate-spin"><Loading /></el-icon> <el-icon :size="40" class="animate-spin">
<Loading/>
</el-icon>
<p class="mt-2 text-gray-500">加载中...</p> <p class="mt-2 text-gray-500">加载中...</p>
</div> </div>
@@ -23,10 +25,10 @@
<div v-for="review in paginatedReviews" :key="review.id" class="bg-white rounded-lg shadow-sm p-6"> <div v-for="review in paginatedReviews" :key="review.id" class="bg-white rounded-lg shadow-sm p-6">
<div class="flex gap-4"> <div class="flex gap-4">
<SafeImage <SafeImage
:src="review.productImage"
:alt="review.productName" :alt="review.productName"
wrapper-class="w-20 h-20 rounded cursor-pointer" :src="review.productImage"
img-class="w-20 h-20 object-cover rounded" img-class="w-20 h-20 object-cover rounded"
wrapper-class="w-20 h-20 rounded cursor-pointer"
@click="router.push(`/product/${review.productId}`)" @click="router.push(`/product/${review.productId}`)"
/> />
<div class="flex-1"> <div class="flex-1">
@@ -72,7 +74,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -114,7 +116,7 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.user-reviews-page { .user-reviews-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 60px);
background: transparent; background: transparent;

View File

@@ -0,0 +1,64 @@
import type {Router} from 'vue-router'
import {useUserStore} from '@/stores/user'
import {ElMessage} from 'element-plus'
export function setupGuards(router: Router) {
// 路由前置守卫
router.beforeEach(async (to, from, next) => {
const userStore = useUserStore()
if (userStore.token && !userStore.user) {
await userStore.getUserInfo()
}
// 设置页面标题
document.title = `${to.meta.title || '社区生鲜团购系统'} - 社区生鲜团购平台`
// 需要登录的页面
if (to.meta.requiresAuth && !userStore.isLoggedIn) {
ElMessage.warning('请先登录')
next({
path: '/login',
query: {redirect: to.fullPath}
})
return
}
// 需要管理员权限的页面
if (to.meta.requiresAdmin && !userStore.isAdmin) {
ElMessage.error('无权访问')
next('/')
return
}
const adminBlockedFrontPaths = [
'/cart',
'/orders',
'/favorites',
'/reviews',
'/returns',
'/notifications',
'/addresses',
'/profile',
]
const isAdminFrontPath = adminBlockedFrontPaths.some((path) => to.path === path || to.path.startsWith(`${path}/`))
if (userStore.isAdmin && isAdminFrontPath) {
next('/admin')
return
}
// 已登录用户访问登录/注册页面
if ((to.path === '/login' || to.path === '/register') && userStore.isLoggedIn) {
next('/')
return
}
next()
})
// 路由后置守卫
router.afterEach((to, from) => {
// 页面切换后滚动到顶部
window.scrollTo(0, 0)
})
}

View File

@@ -0,0 +1,229 @@
import {createRouter, createWebHistory} from 'vue-router'
import type {RouteRecordRaw} from 'vue-router'
import {setupGuards} from './guards'
// 路由配置
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('@/layouts/MainLayout.vue'),
children: [
{
path: '',
name: 'Home',
component: () => import('@/pages/home/index.vue'),
meta: {title: '首页'}
},
{
path: 'flashsale',
name: 'FlashSale',
component: () => import('@/pages/flashsale/index.vue'),
meta: {title: '限时活动'}
},
{
path: 'flashsales',
redirect: '/flashsale'
},
{
path: 'flashsale/:id',
name: 'FlashSaleDetail',
component: () => import('@/pages/flashsale/detail.vue'),
meta: {title: '限时详情'}
},
{
path: 'products',
name: 'Products',
component: () => import('@/pages/product/index.vue'),
meta: {title: '商品列表'}
},
{
path: 'search',
redirect: (to) => ({path: '/products', query: to.query})
},
{
path: 'category/:category',
redirect: (to) => ({path: '/products', query: {category: String(to.params.category || '')}})
},
{
path: 'product/:id',
name: 'ProductDetail',
component: () => import('@/pages/product/detail.vue'),
meta: {title: '商品详情'}
},
{
path: 'cart',
name: 'Cart',
component: () => import('@/pages/cart/index.vue'),
meta: {title: '购物车', requiresAuth: true}
},
{
path: 'orders',
name: 'Orders',
component: () => import('@/pages/order/index.vue'),
meta: {title: '我的订单', requiresAuth: true}
},
{
path: 'order/:id',
name: 'OrderDetail',
component: () => import('@/pages/order/detail.vue'),
meta: {title: '订单详情', requiresAuth: true}
},
{
path: 'profile',
name: 'Profile',
component: () => import('@/pages/user/profile.vue'),
meta: {title: '个人中心', requiresAuth: true}
},
{
path: 'favorites',
name: 'Favorites',
component: () => import('@/pages/user/favorites.vue'),
meta: {title: '我的收藏', requiresAuth: true}
},
{
path: 'reviews',
name: 'MyReviews',
component: () => import('@/pages/user/reviews.vue'),
meta: {title: '我的评价', requiresAuth: true}
},
{
path: 'returns',
name: 'MyReturns',
component: () => import('@/pages/user/returns.vue'),
meta: {title: '我的退货', requiresAuth: true}
},
{
path: 'notifications',
name: 'Notifications',
component: () => import('@/pages/user/notifications.vue'),
meta: {title: '消息通知', requiresAuth: true}
},
{
path: 'groupbuying',
name: 'GroupBuying',
component: () => import('@/pages/groupbuying/index.vue'),
meta: {title: '拼团活动'}
},
{
path: 'groupbuying/:id',
name: 'GroupBuyingDetail',
component: () => import('@/pages/groupbuying/detail.vue'),
meta: {title: '拼团详情'}
},
{
path: 'groupbuying/group/:id',
name: 'GroupBuyingGroupDetail',
component: () => import('@/pages/groupbuying/group.vue'),
meta: {title: '团组详情', requiresAuth: true}
},
{
path: 'addresses',
name: 'Addresses',
component: () => import('@/pages/user/profile.vue'),
meta: {title: '地址管理', requiresAuth: true}
}
]
},
{
path: '/login',
name: 'Login',
component: () => import('@/pages/user/login.vue'),
meta: {title: '登录'}
},
{
path: '/register',
name: 'Register',
component: () => import('@/pages/user/register.vue'),
meta: {title: '注册'}
},
{
path: '/admin',
component: () => import('@/layouts/AdminLayout.vue'),
meta: {requiresAuth: true, requiresAdmin: true},
children: [
{
path: '',
name: 'AdminDashboard',
component: () => import('@/pages/admin/dashboard.vue'),
meta: {title: '管理后台'}
},
{
path: 'products',
name: 'AdminProducts',
component: () => import('@/pages/admin/products.vue'),
meta: {title: '商品管理'}
},
{
path: 'flashsales',
name: 'AdminFlashSales',
component: () => import('@/pages/admin/flashsales.vue'),
meta: {title: '限时管理'}
},
{
path: 'groupbuying',
name: 'AdminGroupBuying',
component: () => import('@/pages/admin/groupbuying.vue'),
meta: {title: '拼团管理'}
},
{
path: 'orders',
name: 'AdminOrders',
component: () => import('@/pages/admin/orders.vue'),
meta: {title: '订单管理'}
},
{
path: 'users',
name: 'AdminUsers',
component: () => import('@/pages/admin/users.vue'),
meta: {title: '用户管理'}
},
{
path: 'reviews',
name: 'AdminReviews',
component: () => import('@/pages/admin/reviews.vue'),
meta: {title: '评价管理'}
},
{
path: 'returns',
name: 'AdminReturns',
component: () => import('@/pages/admin/returns.vue'),
meta: {title: '退货管理'}
},
{
path: 'favorites',
name: 'AdminFavorites',
component: () => import('@/pages/admin/favorites.vue'),
meta: {title: '收藏管理'}
},
{
path: 'monitor',
name: 'AdminMonitor',
component: () => import('@/pages/admin/monitor.vue'),
meta: {title: '系统监控'}
}
]
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('@/pages/error/404.vue'),
meta: {title: '页面未找到'}
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {top: 0}
}
}
})
// 设置路由守卫
setupGuards(router)
export default router

View File

@@ -0,0 +1,167 @@
import {defineStore} from 'pinia'
import {ref, computed} from 'vue'
import type {CartItem} from '@/types/api'
import {cartApi} from '@/api/modules/cart'
import {ElMessage} from 'element-plus'
export const useCartStore = defineStore('cart', () => {
// 状态
const items = ref<CartItem[]>([])
const loading = ref(false)
// 计算属性
const itemCount = computed(() => items.value.length)
const totalQuantity = computed(() =>
items.value.reduce((sum, item) => sum + item.quantity, 0)
)
const selectedItems = computed(() =>
items.value.filter(item => item.selected)
)
const selectedCount = computed(() => selectedItems.value.length)
const totalPrice = computed(() =>
selectedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)
const isAllSelected = computed(() =>
items.value.length > 0 && items.value.every(item => item.selected)
)
// 获取购物车数据
const fetchCart = async () => {
loading.value = true
try {
const res = await cartApi.getCart()
if (res.success) {
items.value = res.data || []
}
} catch (error) {
console.error('获取购物车失败:', error)
} finally {
loading.value = false
}
}
// 添加到购物车
const addToCart = async (productId: number, quantity = 1) => {
try {
const res = await cartApi.addToCart({productId, quantity})
if (res.success) {
ElMessage.success('已添加到购物车')
await fetchCart()
return true
}
return false
} catch (error) {
console.error('添加到购物车失败:', error)
return false
}
}
// 更新数量
const updateQuantity = async (itemId: string, quantity: number) => {
if (quantity < 1) return
try {
const res = await cartApi.updateQuantity(itemId, quantity)
if (res.success) {
const item = items.value.find(i => i.id === itemId)
if (item) {
item.quantity = quantity
}
}
} catch (error) {
console.error('更新数量失败:', error)
}
}
// 删除商品
const removeItem = async (itemId: string) => {
try {
const res = await cartApi.removeItem(itemId)
if (res.success) {
items.value = items.value.filter(i => i.id !== itemId)
ElMessage.success('已删除')
}
} catch (error) {
console.error('删除失败:', error)
}
}
// 批量删除
const removeSelected = async () => {
const ids = selectedItems.value.map(item => item.id)
if (ids.length === 0) return
try {
const res = await cartApi.batchRemove(ids)
if (res.success) {
items.value = items.value.filter(i => !ids.includes(i.id))
ElMessage.success('已批量删除')
}
} catch (error) {
console.error('批量删除失败:', error)
}
}
// 清空购物车
const clearCart = async () => {
try {
const res = await cartApi.clearCart()
if (res.success) {
items.value = []
ElMessage.success('购物车已清空')
}
} catch (error) {
console.error('清空购物车失败:', error)
}
}
// 切换选中状态
const toggleSelect = (itemId: string) => {
const item = items.value.find(i => i.id === itemId)
if (item) {
item.selected = !item.selected
}
}
// 全选/取消全选
const toggleSelectAll = () => {
const allSelected = isAllSelected.value
items.value.forEach(item => {
item.selected = !allSelected
})
}
// 获取购物车数量(仅数量)
const getCartCount = async () => {
try {
const res = await cartApi.getCount()
if (res.success) {
return res.data.count || 0
}
return 0
} catch (error) {
console.error('获取购物车数量失败:', error)
return 0
}
}
return {
items,
loading,
itemCount,
totalQuantity,
selectedItems,
selectedCount,
totalPrice,
isAllSelected,
fetchCart,
addToCart,
updateQuantity,
removeItem,
removeSelected,
clearCart,
toggleSelect,
toggleSelectAll,
getCartCount,
}
})

View File

@@ -0,0 +1,159 @@
import {defineStore} from 'pinia'
import {ref, computed} from 'vue'
import type {User, LoginParams, RegisterParams} from '@/types/api'
import {userApi} from '@/api/modules/user'
import {ElMessage} from 'element-plus'
import router from '@/router'
export const useUserStore = defineStore('user', () => {
// 状态
const user = ref<User | null>(null)
const token = ref<string>('')
// 计算属性
const isLoggedIn = computed(() => !!token.value)
const isAdmin = computed(() => user.value?.role === 'ADMIN' || user.value?.username === 'admin')
const username = computed(() => user.value?.username || '')
// 从localStorage恢复登录状态
const initializeAuth = () => {
const savedToken = localStorage.getItem('token')
const savedUser = localStorage.getItem('user')
if (savedToken && savedUser) {
token.value = savedToken
user.value = JSON.parse(savedUser)
}
}
// 登录
const login = async (params: LoginParams) => {
try {
const res = await userApi.login(params)
if (res.success) {
token.value = res.data.token
user.value = res.data.user
localStorage.setItem('token', token.value)
localStorage.setItem('user', JSON.stringify(user.value))
try {
const profile = await userApi.getInfo()
if (profile.success) {
user.value = {
...profile.data,
avatar: profile.data.avatar || user.value?.avatar || '',
}
localStorage.setItem('user', JSON.stringify(user.value))
}
} catch (sessionError) {
console.error('登录成功但会话校验失败:', sessionError)
user.value = null
token.value = ''
localStorage.removeItem('token')
localStorage.removeItem('user')
ElMessage.error('登录成功但会话未建立,请检查 Cookie / 代理配置')
return false
}
ElMessage.success('登录成功')
const redirect = router.currentRoute.value.query.redirect as string
await router.push(redirect || '/')
return true
}
return false
} catch (error) {
console.error('登录失败:', error)
return false
}
}
// 注册
const register = async (params: RegisterParams) => {
try {
const res = await userApi.register(params)
if (res.success) {
ElMessage.success('注册成功,请登录')
router.push('/login')
return true
}
return false
} catch (error) {
console.error('注册失败:', error)
return false
}
}
// 退出登录
const logout = async () => {
try {
if (token.value) {
await userApi.logout()
}
} catch (error) {
console.error('退出登录失败:', error)
}
user.value = null
token.value = ''
// 清除localStorage
localStorage.removeItem('token')
localStorage.removeItem('user')
ElMessage.success('已退出登录')
router.push('/login')
}
// 获取用户信息
const getUserInfo = async () => {
if (!token.value) return
try {
const res = await userApi.getInfo()
if (res.success) {
user.value = {
...res.data,
avatar: res.data.avatar || user.value?.avatar || '',
}
localStorage.setItem('user', JSON.stringify(user.value))
}
} catch (error) {
console.error('获取用户信息失败:', error)
user.value = null
token.value = ''
localStorage.removeItem('token')
localStorage.removeItem('user')
}
}
// 更新用户信息
const updateUserInfo = (info: Partial<User>) => {
if (user.value) {
user.value = {...user.value, ...info}
localStorage.setItem('user', JSON.stringify(user.value))
}
}
// 初始化
initializeAuth()
return {
user,
token,
isLoggedIn,
isAdmin,
username,
login,
register,
logout,
getUserInfo,
updateUserInfo,
}
})

View File

@@ -77,8 +77,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: var(--tone-900); color: var(--tone-900);
background: background: radial-gradient(circle at top, rgba(255, 253, 248, 0.88), rgba(255, 253, 248, 0) 26%),
radial-gradient(circle at top, rgba(255, 253, 248, 0.88), rgba(255, 253, 248, 0) 26%),
linear-gradient(180deg, var(--tone-50) 0%, #f2ebdf 100%); linear-gradient(180deg, var(--tone-50) 0%, #f2ebdf 100%);
} }

View File

@@ -0,0 +1,165 @@
export interface AdminDashboardStats {
totalUsers: number
totalProducts: number
totalOrders: number
totalAmount: number
todayOrders: number
paidOrders: number
pendingOrders: number
activeFlashSales: number
}
export interface AdminUserStats {
totalUsers: number
activeUsers: number
newUsers: number
onlineUsers: number
}
export interface AdminOrderStats {
totalOrders: number
paidOrders: number
pendingOrders: number
completedOrders: number
cancelledOrders: number
totalAmount: number
}
export interface AdminProductStats {
totalProducts: number
activeProducts: number
inactiveProducts: number
lowStockProducts: number
}
export interface AdminFlashSaleStats {
totalFlashSales: number
activeFlashSales: number
upcomingFlashSales: number
endedFlashSales: number
}
export interface AdminRecentOrderRow {
id: number
orderNo: string
username: string
productName: string
quantity: number
totalAmount: number
status: string
orderType: 'NORMAL' | 'FLASH_SALE' | 'GROUP_BUYING'
createdAt: string
isFlashSale: boolean
}
export interface AdminHotProductRow {
id: number
name: string
price: number
stock: number
sales: number
}
export interface AdminUserRow {
id: number
username: string
email: string
phone: string
status: number
statusText: string
role: 'USER' | 'ADMIN'
isOnline: boolean
createdAt: string
lastLogin?: string
}
export interface AdminOrderRow {
id: number
orderNo: string
username: string
productName: string
productId?: number
quantity: number
totalAmount: number
status: string
orderType: 'NORMAL' | 'FLASH_SALE' | 'GROUP_BUYING'
createdAt: string
isFlashSale: boolean
}
export interface AdminProductRow {
id: number
name: string
description: string
category: string
price: number
stock: number
status: number
imageUrl: string
createdAt: string
updatedAt?: string
totalSales?: number
totalRevenue?: number
viewCount?: number
rating?: number
}
export interface MonitorSystemStatus {
status: string
cpuUsage: number
memoryUsage: number
diskUsage: number
availableProcessors?: number
totalMemory?: string
usedMemory?: string
dbStatus?: string
redisStatus?: string
requestCountToday?: number
}
export interface RedisNodeStatus {
node: string
status: string
memory: string
connections: number
}
export interface AdminReviewStats {
totalReviews: number
todayReviews: number
averageRating: number
fiveStarReviews: number
}
export interface AdminFavoriteStats {
totalFavorites: number
favoriteUsers: number
favoriteProducts: number
todayFavorites: number
}
export interface AdminReviewRow {
id: number
productId: number
userId: number
orderId: number
productName: string
username: string
rating: number
content: string
status: number
statusText: string
adminReply?: string
repliedAt?: string
createdAt: string
}
export interface AdminFavoriteRow {
id: number
userId: number
productId: number
productName: string
productCategory: string
username: string
createdAt: string
}

View File

@@ -0,0 +1,247 @@
// API响应基础类型
export interface ApiResponse<T = any> {
code: number
success: boolean
message: string
data: T
timestamp?: number
}
// 分页参数
export interface PageParams {
page: number
size: number
sort?: string
order?: 'asc' | 'desc'
}
// 分页响应
export interface PageResponse<T> {
content: T[]
totalElements: number
totalPages: number
size: number
number: number
first: boolean
last: boolean
}
// 用户类型
export interface User {
id: number
username: string
email: string
phone?: string
avatar?: string
role: 'USER' | 'ADMIN'
status: 'ACTIVE' | 'INACTIVE' | 'BANNED'
createdAt: string
updatedAt: string
}
// 登录参数
export interface LoginParams {
username: string
password: string
rememberMe?: boolean
}
// 注册参数
export interface RegisterParams {
username: string
password: string
email: string
phone?: string
}
// 商品类型
export interface Product {
id: number
name: string
description: string
price: number
stock: number
imageUrl: string
images?: string[]
category: string
status: 'ON_SALE' | 'OFF_SALE' | 'SOLD_OUT'
sales: number
views: number
createdAt: string
updatedAt: string
}
// 限时活动类型
export interface FlashSale {
id: number
productId: number
productName: string
productImageUrl: string
originalPrice: number
flashPrice: number
flashStock: number
remainingStock: number
startTime: string
endTime: string
status: 'UPCOMING' | 'ACTIVE' | 'ENDED' | 'PAUSED'
limitPerUser: number
description?: string
createdAt: string
updatedAt: string
}
// 购物车项
export interface CartItem {
id: string
productId: number
productName: string
productImage: string
price: number
quantity: number
stock: number
selected: boolean
createdAt: string
}
// 订单类型
export interface Order {
id: number
orderNo: string
userId: number
username: string
totalAmount: number
paymentAmount: number
paymentMethod?: string
status: 'PENDING' | 'PAID' | 'SHIPPED' | 'COMPLETED' | 'CANCELLED' | 'REFUNDING' | 'REFUNDED'
orderType?: 'NORMAL' | 'FLASH_SALE' | 'GROUP_BUYING'
items: OrderItem[]
address?: OrderAddress
remark?: string
createdAt: string
updatedAt: string
paidAt?: string
shippedAt?: string
completedAt?: string
}
// 订单项
export interface OrderItem {
id: number
productId: number
productName: string
productImage: string
price: number
quantity: number
subtotal: number
}
// 订单地址
export interface OrderAddress {
name: string
phone: string
province: string
city: string
district: string
address: string
zipCode?: string
}
// 统计数据
export interface Statistics {
totalUsers: number
totalProducts: number
totalOrders: number
totalSales: number
todayOrders: number
todaySales: number
activeFlashSales: number
onlineUsers: number
}
// 退货类型
export interface OrderReturn {
id: number
returnNo: string
orderId: number
orderNo: string
userId: number
username: string
refundAmount: number
reason: string
description?: string
images?: string
status: 'PENDING' | 'APPROVED' | 'RETURNING' | 'COMPLETED' | 'REJECTED' | 'CANCELLED'
statusText: string
rejectReason?: string
adminRemark?: string
returnTracking?: string
productName?: string
productImage?: string
reviewedAt?: string
shippedAt?: string
completedAt?: string
cancelledAt?: string
createdAt: string
updatedAt: string
}
// 拼团活动类型
export interface GroupBuying {
id: number
productId: number
productName: string
productImageUrl: string
productPrice: number
groupPrice: number
requiredMembers: number
durationMinutes: number
totalStock: number
remainingStock: number
maxPerUser: number
status: 'DRAFT' | 'UPCOMING' | 'ACTIVE' | 'ENDED'
statusDescription: string
startTime: string
endTime: string
createdAt: string
updatedAt: string
activeGroupCount: number
discount: number
}
// 拼团团组类型
export interface GroupBuyingGroup {
id: number
groupNo: string
groupBuyingId: number
leaderUserId: number
leaderUsername: string
requiredMembers: number
currentMembers: number
status: 'FORMING' | 'SUCCESS' | 'FAILED'
statusDescription: string
expireTime: string
createdAt: string
completedAt?: string
members: GroupBuyingMember[]
groupBuying?: GroupBuying
}
// 拼团成员类型
export interface GroupBuyingMember {
id: number
userId: number
username: string
avatar?: string
orderId?: number
status: number
joinedAt: string
}
// 拼团统计
export interface GroupBuyingStatistics {
totalActivities: number
activeActivities: number
myGroups: number
successGroups: number
totalSaved: number
}

View File

@@ -0,0 +1,29 @@
export interface FlashSale {
id: number
productId: number
productName: string
productImage: string
originalPrice: number
flashPrice: number
flashStock: number
soldCount: number
startTime: string
endTime: string
status: number // 0-未开始 1-进行中 2-已结束
description?: string
createdAt: string
updatedAt: string
}
export interface FlashSaleParams {
status?: number
keyword?: string
sort?: string
page?: number
size?: number
}
export interface FlashSaleParticipation {
flashSaleId: number
quantity: number
}

View File

@@ -0,0 +1,37 @@
export interface Product {
id: number
name: string
description: string
price: number
stock: number
image: string
category: string
categoryId: number
brand?: string
specifications?: Record<string, any>
sales: number
rating: number
reviewCount: number
status: number // 0-下架 1-上架
createdAt: string
updatedAt: string
}
export interface ProductParams {
categoryId?: number
keyword?: string
minPrice?: number
maxPrice?: number
sort?: string
page?: number
size?: number
}
export interface Category {
id: number
name: string
parentId?: number
icon?: string
sort: number
children?: Category[]
}

View File

@@ -0,0 +1,66 @@
import defaultProductImage from '@/assets/default-product.svg'
export const DEFAULT_PRODUCT_IMAGE = defaultProductImage
const ABSOLUTE_URL_PATTERN = /^(https?:)?\/\//i
const SPECIAL_URL_PATTERN = /^(data:|blob:)/i
const normalizeBaseUrl = (value?: string) => {
if (!value) return ''
return value.endsWith('/') ? value.slice(0, -1) : value
}
export const resolveImageUrl = (value?: string | null) => {
if (!value || !String(value).trim()) {
return DEFAULT_PRODUCT_IMAGE
}
const imageUrl = String(value).trim()
if (ABSOLUTE_URL_PATTERN.test(imageUrl) || SPECIAL_URL_PATTERN.test(imageUrl)) {
return imageUrl
}
const baseUrl = normalizeBaseUrl(import.meta.env.VITE_API_BASE_URL)
if (!baseUrl) {
return imageUrl.startsWith('/') ? imageUrl : `/${imageUrl}`
}
return imageUrl.startsWith('/') ? `${baseUrl}${imageUrl}` : `${baseUrl}/${imageUrl}`
}
export const normalizeStorageImageUrl = (value?: string | null) => {
if (!value || !String(value).trim()) {
return ''
}
const imageUrl = String(value).trim()
if (ABSOLUTE_URL_PATTERN.test(imageUrl)) {
try {
const parsed = new URL(imageUrl.startsWith('//') ? `http:${imageUrl}` : imageUrl)
if (
parsed.pathname.startsWith('/uploads/') ||
parsed.pathname.startsWith('/images/') ||
parsed.pathname.startsWith('/static/')
) {
return parsed.pathname
}
} catch {
return imageUrl
}
}
return imageUrl
}
export const applyFallbackImage = (event: Event) => {
const target = event.target as HTMLImageElement | null
if (!target) return
if (target.dataset.fallbackApplied === 'true') {
return
}
target.dataset.fallbackApplied = 'true'
target.onerror = null
target.src = DEFAULT_PRODUCT_IMAGE
}

View File

@@ -0,0 +1,407 @@
import type {
CartItem,
FlashSale,
GroupBuying,
GroupBuyingGroup,
Order,
OrderAddress,
OrderReturn,
PageResponse,
Product,
User,
} from '@/types/api'
import type {
AdminHotProductRow,
AdminOrderRow,
AdminProductRow,
AdminRecentOrderRow,
AdminUserRow,
} from '@/types/admin'
import {DEFAULT_PRODUCT_IMAGE, normalizeStorageImageUrl, resolveImageUrl} from '@/utils/image'
const toNumber = (value: unknown, fallback = 0) => {
const result = Number(value)
return Number.isFinite(result) ? result : fallback
}
const toString = (value: unknown, fallback = '') => {
if (value === null || value === undefined) {
return fallback
}
return String(value)
}
const toIsoLikeString = (value: unknown) => {
const raw = toString(value)
return raw || new Date().toISOString()
}
export const buildOrderNo = (id: number | string) => {
const numericId = toString(id).padStart(6, '0')
return `FS${numericId}`
}
export const mapUserStatusText = (status: number) => {
return status === 1 ? '正常' : '禁用'
}
export const mapOrderStatus = (status: number | string): Order['status'] => {
const value = typeof status === 'string' ? status : toNumber(status)
if (value === 'PENDING' || value === 1) return 'PENDING'
if (value === 'PAID' || value === 2) return 'PAID'
if (value === 'SHIPPED' || value === 3) return 'SHIPPED'
if (value === 'COMPLETED' || value === 4) return 'COMPLETED'
if (value === 'CANCELLED' || value === 5) return 'CANCELLED'
if (value === 'REFUNDING' || value === 6) return 'REFUNDING'
if (value === 'REFUNDED' || value === 7) return 'REFUNDED'
return 'PENDING'
}
export const mapOrderType = (orderType: number | string | undefined, isFlashSale?: boolean): 'NORMAL' | 'FLASH_SALE' | 'GROUP_BUYING' => {
const value = typeof orderType === 'string' ? orderType : toNumber(orderType)
if (value === 'FLASH_SALE' || value === 2) return 'FLASH_SALE'
if (value === 'GROUP_BUYING' || value === 3) return 'GROUP_BUYING'
if (isFlashSale) return 'FLASH_SALE'
return 'NORMAL'
}
export const mapFlashSaleStatus = (status: number | string): FlashSale['status'] => {
const value = typeof status === 'string' ? status : toNumber(status)
if (value === 'UPCOMING' || value === 1) return 'UPCOMING'
if (value === 'ACTIVE' || value === 2) return 'ACTIVE'
if (value === 'ENDED' || value === 3) return 'ENDED'
if (value === 'PAUSED' || value === 4) return 'PAUSED'
return 'UPCOMING'
}
export const mapProductStatus = (status: number | string, stock = 0): Product['status'] => {
const value = typeof status === 'string' ? status : toNumber(status)
if (stock <= 0) return 'SOLD_OUT'
if (value === 'OFF_SALE' || value === 0) return 'OFF_SALE'
return 'ON_SALE'
}
export const normalizeUser = (user: Record<string, any>): User => {
const username = toString(user.username)
return {
id: toNumber(user.id),
username,
email: toString(user.email),
phone: toString(user.phone),
avatar: resolveImageUrl(toString(user.avatar, '')),
role: toString(user.role).toUpperCase() === 'ADMIN' ? 'ADMIN' : username === 'admin' ? 'ADMIN' : 'USER',
status: toNumber(user.status, 1) === 1 ? 'ACTIVE' : 'BANNED',
createdAt: toIsoLikeString(user.createdAt),
updatedAt: toIsoLikeString(user.updatedAt || user.createdAt),
}
}
export const normalizeProduct = (product: Record<string, any>): Product => {
const stock = toNumber(product.stock)
const imageUrl = resolveImageUrl(toString(product.imageUrl, ''))
return {
id: toNumber(product.id),
name: toString(product.name),
description: toString(product.description),
price: toNumber(product.price),
stock,
imageUrl,
images: imageUrl ? [imageUrl] : [DEFAULT_PRODUCT_IMAGE],
category: toString(product.category, '默认分类'),
status: mapProductStatus(product.status, stock),
sales: toNumber(product.sales),
views: toNumber(product.viewCount ?? product.views),
createdAt: toIsoLikeString(product.createdAt),
updatedAt: toIsoLikeString(product.updatedAt || product.createdAt),
}
}
export const normalizeFlashSale = (flashSale: Record<string, any>): FlashSale => {
const flashStock = toNumber(flashSale.flashStock)
const remainingStock = toNumber(flashSale.remainingStock, flashStock)
return {
id: toNumber(flashSale.id),
productId: toNumber(flashSale.productId),
productName: toString(flashSale.productName),
productImageUrl: resolveImageUrl(toString(flashSale.productImageUrl, '')),
originalPrice: toNumber(flashSale.originalPrice),
flashPrice: toNumber(flashSale.flashPrice),
flashStock,
remainingStock,
startTime: toIsoLikeString(flashSale.startTime),
endTime: toIsoLikeString(flashSale.endTime),
status: mapFlashSaleStatus(flashSale.status),
limitPerUser: toNumber(flashSale.limitPerUser, 1),
description: toString(flashSale.description || flashSale.statusDescription),
createdAt: toIsoLikeString(flashSale.createdAt),
updatedAt: toIsoLikeString(flashSale.updatedAt || flashSale.createdAt),
}
}
const buildOrderAddress = (order: Record<string, any>): OrderAddress | undefined => {
const name = toString(order.receiverName)
const phone = toString(order.receiverPhone)
const address = toString(order.receiverAddress)
if (!name && !phone && !address) {
return undefined
}
return {
name,
phone,
province: '',
city: '',
district: '',
address,
}
}
export const normalizeOrder = (order: Record<string, any>): Order => {
const totalAmount = toNumber(order.totalAmount ?? order.totalPrice)
const quantity = toNumber(order.quantity, 1)
const status = mapOrderStatus(order.status)
const createdAt = toIsoLikeString(order.createdAt)
const updatedAt = toIsoLikeString(order.updatedAt || order.createdAt)
const productImage = resolveImageUrl(toString(order.productImageUrl, ''))
const fallbackItem = {
id: toNumber(order.productId || order.id),
productId: toNumber(order.productId),
productName: toString(order.productName, '未知商品'),
productImage,
price: quantity > 0 ? Number((totalAmount / quantity).toFixed(2)) : totalAmount,
quantity,
subtotal: totalAmount,
}
const items = Array.isArray(order.items) && order.items.length > 0
? order.items.map((item: Record<string, any>) => ({
id: toNumber(item.id || item.productId),
productId: toNumber(item.productId),
productName: toString(item.productName, '未知商品'),
productImage: resolveImageUrl(toString(item.productImageUrl || item.productImage, '')),
price: toNumber(item.price),
quantity: toNumber(item.quantity, 1),
subtotal: toNumber(item.subtotal ?? item.price),
}))
: [fallbackItem]
return {
id: toNumber(order.id),
orderNo: toString(order.orderNo, buildOrderNo(order.id)),
userId: toNumber(order.userId),
username: toString(order.username),
totalAmount,
paymentAmount: totalAmount,
paymentMethod: toString(order.paymentMethod) || (status === 'PENDING' ? undefined : 'ONLINE'),
status,
orderType: mapOrderType(order.orderType, order.isFlashSale),
items,
address: buildOrderAddress(order),
remark: toString(order.remark),
createdAt,
updatedAt,
paidAt: order.paidAt ? toIsoLikeString(order.paidAt) : (status === 'PAID' || status === 'SHIPPED' || status === 'COMPLETED' ? updatedAt : undefined),
shippedAt: order.shippedAt ? toIsoLikeString(order.shippedAt) : (status === 'SHIPPED' || status === 'COMPLETED' ? updatedAt : undefined),
completedAt: order.completedAt ? toIsoLikeString(order.completedAt) : (status === 'COMPLETED' ? updatedAt : undefined),
}
}
export const normalizeCartItems = (cart: Record<string, any> | undefined): CartItem[] => {
const items = Array.isArray(cart?.items) ? cart.items : []
return items.map((item: Record<string, any>) => ({
id: toString(item.productId),
productId: toNumber(item.productId),
productName: toString(item.productName),
productImage: resolveImageUrl(toString(item.productImageUrl || item.productImage, '')),
price: toNumber(item.productPrice),
quantity: toNumber(item.quantity, 1),
stock: toNumber(item.stock),
selected: true,
createdAt: new Date().toISOString(),
}))
}
export const normalizePage = <T>(payload: Record<string, any>, mapper: (item: Record<string, any>) => T): PageResponse<T> => {
const content = Array.isArray(payload.content) ? payload.content.map((item: Record<string, any>) => mapper(item)) : []
const size = toNumber(payload.size, content.length || 10)
const pageNumber = toNumber(payload.currentPage ?? payload.number)
const totalElements = toNumber(payload.totalElements, content.length)
const totalPages = toNumber(payload.totalPages, size > 0 ? Math.ceil(totalElements / size) : 1)
return {
content,
totalElements,
totalPages,
size,
number: pageNumber,
first: pageNumber <= 0,
last: totalPages === 0 ? true : pageNumber >= totalPages - 1,
}
}
export const normalizeAdminRecentOrder = (order: Record<string, any>): AdminRecentOrderRow => ({
id: toNumber(order.id),
orderNo: buildOrderNo(order.id),
username: toString(order.username),
productName: toString(order.productName),
quantity: toNumber(order.quantity, 1),
totalAmount: toNumber(order.totalAmount ?? order.totalPrice),
status: mapOrderStatus(order.status),
orderType: mapOrderType(order.orderType, order.isFlashSale),
createdAt: toIsoLikeString(order.createdAt),
isFlashSale: Boolean(order.isFlashSale),
})
export const normalizeAdminHotProduct = (product: Record<string, any>): AdminHotProductRow => ({
id: toNumber(product.id),
name: toString(product.name),
price: toNumber(product.price),
stock: toNumber(product.stock),
sales: toNumber(product.sales),
})
export const normalizeAdminUser = (user: Record<string, any>): AdminUserRow => ({
id: toNumber(user.id),
username: toString(user.username),
email: toString(user.email),
phone: toString(user.phone),
status: toNumber(user.status, 1),
statusText: mapUserStatusText(toNumber(user.status, 1)),
role: toString(user.role).toUpperCase() === 'ADMIN' || toString(user.username) === 'admin' ? 'ADMIN' : 'USER',
isOnline: Boolean(user.isOnline),
createdAt: toIsoLikeString(user.createdAt),
lastLogin: user.lastLogin ? toIsoLikeString(user.lastLogin) : undefined,
})
export const normalizeAdminOrder = (order: Record<string, any>): AdminOrderRow => ({
id: toNumber(order.id),
orderNo: buildOrderNo(order.id),
username: toString(order.username),
productName: toString(order.productName),
productId: toNumber(order.productId),
quantity: toNumber(order.quantity, 1),
totalAmount: toNumber(order.totalAmount),
status: mapOrderStatus(order.status),
orderType: mapOrderType(order.orderType, order.isFlashSale),
createdAt: toIsoLikeString(order.createdAt),
isFlashSale: Boolean(order.isFlashSale),
})
export const normalizeAdminProduct = (product: Record<string, any>): AdminProductRow => ({
id: toNumber(product.id),
name: toString(product.name),
description: toString(product.description),
category: toString(product.category, '默认分类'),
price: toNumber(product.price),
stock: toNumber(product.stock),
status: toNumber(product.status, 1),
imageUrl: normalizeStorageImageUrl(toString(product.imageUrl, '')),
createdAt: toIsoLikeString(product.createdAt),
updatedAt: product.updatedAt ? toIsoLikeString(product.updatedAt) : undefined,
totalSales: toNumber(product.totalSales),
totalRevenue: toNumber(product.totalRevenue),
viewCount: toNumber(product.viewCount),
rating: toNumber(product.rating),
})
export const mapGroupBuyingStatus = (status: number | string): GroupBuying['status'] => {
const value = typeof status === 'string' ? status : toNumber(status)
if (value === 'DRAFT' || value === 0) return 'DRAFT'
if (value === 'UPCOMING' || value === 1) return 'UPCOMING'
if (value === 'ACTIVE' || value === 2) return 'ACTIVE'
if (value === 'ENDED' || value === 3) return 'ENDED'
return 'DRAFT'
}
export const mapGroupStatus = (status: number | string): GroupBuyingGroup['status'] => {
const value = typeof status === 'string' ? status : toNumber(status)
if (value === 'FORMING' || value === 1) return 'FORMING'
if (value === 'SUCCESS' || value === 2) return 'SUCCESS'
if (value === 'FAILED' || value === 3) return 'FAILED'
return 'FORMING'
}
export const normalizeGroupBuying = (gb: Record<string, any>): GroupBuying => ({
id: toNumber(gb.id),
productId: toNumber(gb.productId),
productName: toString(gb.productName),
productImageUrl: resolveImageUrl(toString(gb.productImageUrl, '')),
productPrice: toNumber(gb.productPrice),
groupPrice: toNumber(gb.groupPrice),
requiredMembers: toNumber(gb.requiredMembers, 2),
durationMinutes: toNumber(gb.durationMinutes, 1440),
totalStock: toNumber(gb.totalStock),
remainingStock: toNumber(gb.remainingStock),
maxPerUser: toNumber(gb.maxPerUser, 1),
status: mapGroupBuyingStatus(gb.status),
statusDescription: toString(gb.statusDescription),
startTime: toIsoLikeString(gb.startTime),
endTime: toIsoLikeString(gb.endTime),
createdAt: toIsoLikeString(gb.createdAt),
updatedAt: toIsoLikeString(gb.updatedAt || gb.createdAt),
activeGroupCount: toNumber(gb.activeGroupCount),
discount: toNumber(gb.discount),
})
export const mapReturnStatus = (status: number | string): OrderReturn['status'] => {
const value = typeof status === 'string' ? status : toNumber(status)
if (value === 'PENDING' || value === 1) return 'PENDING'
if (value === 'APPROVED' || value === 2) return 'APPROVED'
if (value === 'RETURNING' || value === 3) return 'RETURNING'
if (value === 'COMPLETED' || value === 4) return 'COMPLETED'
if (value === 'REJECTED' || value === 5) return 'REJECTED'
if (value === 'CANCELLED' || value === 6) return 'CANCELLED'
return 'PENDING'
}
export const normalizeOrderReturn = (ret: Record<string, any>): OrderReturn => ({
id: toNumber(ret.id),
returnNo: toString(ret.returnNo),
orderId: toNumber(ret.orderId),
orderNo: toString(ret.orderNo),
userId: toNumber(ret.userId),
username: toString(ret.username),
refundAmount: toNumber(ret.refundAmount),
reason: toString(ret.reason),
description: toString(ret.description),
images: toString(ret.images),
status: mapReturnStatus(ret.status),
statusText: toString(ret.statusText),
rejectReason: toString(ret.rejectReason),
adminRemark: toString(ret.adminRemark),
returnTracking: toString(ret.returnTracking),
productName: toString(ret.productName),
productImage: resolveImageUrl(toString(ret.productImage, '')),
reviewedAt: ret.reviewedAt ? toIsoLikeString(ret.reviewedAt) : undefined,
shippedAt: ret.shippedAt ? toIsoLikeString(ret.shippedAt) : undefined,
completedAt: ret.completedAt ? toIsoLikeString(ret.completedAt) : undefined,
cancelledAt: ret.cancelledAt ? toIsoLikeString(ret.cancelledAt) : undefined,
createdAt: toIsoLikeString(ret.createdAt),
updatedAt: toIsoLikeString(ret.updatedAt || ret.createdAt),
})
export const normalizeGroupBuyingGroup = (group: Record<string, any>): GroupBuyingGroup => ({
id: toNumber(group.id),
groupNo: toString(group.groupNo),
groupBuyingId: toNumber(group.groupBuyingId),
leaderUserId: toNumber(group.leaderUserId),
leaderUsername: toString(group.leaderUsername),
requiredMembers: toNumber(group.requiredMembers, 2),
currentMembers: toNumber(group.currentMembers, 1),
status: mapGroupStatus(group.status),
statusDescription: toString(group.statusDescription),
expireTime: toIsoLikeString(group.expireTime),
createdAt: toIsoLikeString(group.createdAt),
completedAt: group.completedAt ? toIsoLikeString(group.completedAt) : undefined,
members: Array.isArray(group.members)
? group.members.map((m: Record<string, any>) => ({
id: toNumber(m.id),
userId: toNumber(m.userId),
username: toString(m.username),
avatar: resolveImageUrl(toString(m.avatar, '')),
orderId: m.orderId ? toNumber(m.orderId) : undefined,
status: toNumber(m.status),
joinedAt: toIsoLikeString(m.joinedAt),
}))
: [],
groupBuying: group.groupBuying ? normalizeGroupBuying(group.groupBuying) : undefined,
})

View File

@@ -0,0 +1,29 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: {
50: '#f7f7f6',
100: '#efefed',
200: '#dfdfdc',
300: '#c6c6c2',
400: '#9f9f99',
500: '#7b7b74',
600: '#5e5e58',
700: '#44443f',
800: '#2b2b27',
900: '#171715',
},
},
animation: {
'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
},
},
plugins: [],
}

View File

@@ -3,7 +3,11 @@
"target": "ES2020", "target": "ES2020",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"module": "ESNext", "module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"], "lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true, "skipLibCheck": true,
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
@@ -17,10 +21,25 @@
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["src/*"] "@/*": [
"src/*"
]
}, },
"types": ["vite/client", "element-plus/global", "node"] "types": [
"vite/client",
"element-plus/global",
"node"
]
}, },
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "include": [
"references": [{ "path": "./tsconfig.node.json" }] "src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
} }

View File

@@ -6,5 +6,7 @@
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowSyntheticDefaultImports": true "allowSyntheticDefaultImports": true
}, },
"include": ["vite.config.ts"] "include": [
"vite.config.ts"
]
} }

View File

@@ -0,0 +1,53 @@
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (proxyPath) => proxyPath.replace(/^\/api/, '/api'),
},
'/images': {
target: 'http://localhost:8080',
changeOrigin: true,
},
'/uploads': {
target: 'http://localhost:8080',
changeOrigin: true,
},
'/static': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
},
},
},
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia'],
element: ['element-plus', '@element-plus/icons-vue'],
utils: ['axios', 'dayjs', '@vueuse/core'],
charts: ['echarts', 'vue-echarts'],
},
},
},
},
})

View File

@@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>社区生鲜团购系统</title>
<meta name="description" content="社区生鲜团购系统,支持分布式锁、接口限流、库存预热等核心功能">
<meta content="限时,抢购,电商,community group buying" name="keywords">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@@ -1,34 +0,0 @@
import request from './request'
import type { FlashSale, FlashSaleParams } from '@/types/flashsale'
export const flashSaleApi = {
// 获取限时活动列表
getList(params?: FlashSaleParams) {
return request.get<any, { list: FlashSale[], total: number }>('/api/flashsales', { params })
},
// 获取限时活动详情
getDetail(id: number) {
return request.get<any, FlashSale>(`/api/flashsales/${id}`)
},
// 参与限时
participate(flashSaleId: number, quantity: number = 1) {
return request.post('/api/flashsales/participate', {
flashSaleId,
quantity
})
},
// 获取正在进行的限时活动
getActive() {
return request.get<any, FlashSale[]>('/api/flashsales/active')
},
// 获取即将开始的限时活动
getUpcoming() {
return request.get<any, FlashSale[]>('/api/flashsales/upcoming')
}
}
export default flashSaleApi

View File

@@ -1,52 +0,0 @@
import { request } from '../request'
import type { ApiResponse } from '@/types/api'
export interface AddressItem {
id: number
userId?: number
name: string
phone: string
province: string
city: string
district: string
address: string
isDefault: boolean
createdAt?: string
updatedAt?: string
}
export interface SaveAddressParams {
name: string
phone: string
province: string
city: string
district: string
address: string
isDefault?: boolean
}
export const addressApi = {
getList(): Promise<ApiResponse<AddressItem[]>> {
return request.get('/api/address')
},
getDefault(): Promise<ApiResponse<AddressItem>> {
return request.get('/api/address/default')
},
create(data: SaveAddressParams): Promise<ApiResponse<AddressItem>> {
return request.post('/api/address', data)
},
update(id: number, data: SaveAddressParams): Promise<ApiResponse<AddressItem>> {
return request.put(`/api/address/${id}`, data)
},
setDefault(id: number): Promise<ApiResponse<AddressItem>> {
return request.post(`/api/address/${id}/default`)
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/address/${id}`)
},
}

View File

@@ -1,144 +0,0 @@
import { request } from '../request'
import type { ApiResponse } from '@/types/api'
import type {
AdminDashboardStats,
AdminFavoriteRow,
AdminFavoriteStats,
AdminFlashSaleStats,
AdminHotProductRow,
AdminOrderRow,
AdminOrderStats,
AdminProductRow,
AdminProductStats,
AdminRecentOrderRow,
AdminReviewRow,
AdminReviewStats,
AdminUserRow,
AdminUserStats,
MonitorSystemStatus,
RedisNodeStatus,
} from '@/types/admin'
import {
normalizeAdminHotProduct,
normalizeAdminOrder,
normalizeAdminProduct,
normalizeAdminRecentOrder,
normalizeAdminUser,
} from '@/utils/normalizers'
export const adminApi = {
getDashboardStats(): Promise<ApiResponse<AdminDashboardStats>> {
return request.get('/api/admin/dashboard/stats')
},
getUserStats(): Promise<ApiResponse<AdminUserStats>> {
return request.get('/api/admin/users/stats')
},
getOrderStats(): Promise<ApiResponse<AdminOrderStats>> {
return request.get('/api/admin/orders/stats')
},
getProductStats(): Promise<ApiResponse<AdminProductStats>> {
return request.get('/api/admin/products/stats')
},
getFlashSaleStats(): Promise<ApiResponse<AdminFlashSaleStats>> {
return request.get('/api/admin/flashsales/stats')
},
getRecentOrders(limit = 10): Promise<ApiResponse<AdminRecentOrderRow[]>> {
return request.get<ApiResponse<any[]>>('/api/admin/orders/recent', { limit }).then((res) => ({
...res,
data: Array.isArray(res.data) ? res.data.map((item) => normalizeAdminRecentOrder(item)) : [],
}))
},
getHotProducts(limit = 5): Promise<ApiResponse<AdminHotProductRow[]>> {
return request.get<ApiResponse<any[]>>('/api/admin/products/hot', { limit }).then((res) => ({
...res,
data: Array.isArray(res.data) ? res.data.map((item) => normalizeAdminHotProduct(item)) : [],
}))
},
getUsers(params: { page: number; size: number; keyword?: string; status?: number | '' }): Promise<ApiResponse<{ users: AdminUserRow[]; total: number; totalPages: number; currentPage: number; size: number }>> {
const query = { page: params.page, size: params.size, keyword: params.keyword, status: params.status === '' ? undefined : params.status }
return request.get<ApiResponse<Record<string, any>>>('/api/admin/users', query).then((res) => ({
...res,
data: {
users: Array.isArray(res.data.users) ? res.data.users.map((item) => normalizeAdminUser(item)) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
deleteUser(id: number): Promise<ApiResponse> {
return request.delete(`/api/admin/users/${id}`)
},
getOrders(params: { page: number; size: number; keyword?: string; status?: string | '' }): Promise<ApiResponse<{ orders: AdminOrderRow[]; total: number; totalPages: number; currentPage: number; size: number }>> {
const query = { page: params.page, size: params.size, keyword: params.keyword, status: params.status === '' ? undefined : params.status }
return request.get<ApiResponse<Record<string, any>>>('/api/admin/orders', query).then((res) => ({
...res,
data: {
orders: Array.isArray(res.data.orders) ? res.data.orders.map((item) => normalizeAdminOrder(item)) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
getProducts(params: { page: number; size: number; keyword?: string; category?: string; status?: number | '' }): Promise<ApiResponse<{ products: AdminProductRow[]; total: number; totalPages: number; currentPage: number; size: number }>> {
const query = { page: params.page, size: params.size, keyword: params.keyword, category: params.category, status: params.status === '' ? undefined : params.status }
return request.get<ApiResponse<Record<string, any>>>('/api/admin/products', query).then((res) => ({
...res,
data: {
products: Array.isArray(res.data.products) ? res.data.products.map((item) => normalizeAdminProduct(item)) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
getSystemStatus(): Promise<ApiResponse<MonitorSystemStatus>> { return request.get('/api/admin/monitor/system') },
getRedisStatus(): Promise<ApiResponse<RedisNodeStatus[]>> { return request.get('/api/admin/monitor/redis') },
getProduct(id: number): Promise<ApiResponse<AdminProductRow>> {
return request.get<ApiResponse<any>>(`/api/admin/products/${id}`).then((res) => ({ ...res, data: normalizeAdminProduct(res.data) }))
},
createProduct(data: Record<string, unknown>): Promise<ApiResponse<AdminProductRow>> {
return request.post<ApiResponse<any>>('/api/admin/products', data).then((res) => ({ ...res, data: normalizeAdminProduct(res.data) }))
},
updateProduct(id: number, data: Record<string, unknown>): Promise<ApiResponse<AdminProductRow>> {
return request.put<ApiResponse<any>>(`/api/admin/products/${id}`, data).then((res) => ({
...res,
data: res.data ? normalizeAdminProduct(res.data) : undefined,
}))
},
deleteProduct(id: number): Promise<ApiResponse> { return request.delete(`/api/admin/products/${id}`) },
getReviewStats(): Promise<ApiResponse<AdminReviewStats>> { return request.get('/api/admin/reviews/stats') },
getFavoriteStats(): Promise<ApiResponse<AdminFavoriteStats>> { return request.get('/api/admin/favorites/stats') },
getReviews(params: { page: number; size: number; keyword?: string }): Promise<ApiResponse<{ reviews: AdminReviewRow[]; total: number; totalPages: number; currentPage: number; size: number }>> {
return request.get<ApiResponse<Record<string, any>>>('/api/admin/reviews', params).then((res) => ({
...res,
data: {
reviews: Array.isArray(res.data.reviews) ? (res.data.reviews as AdminReviewRow[]) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
updateReview(id: number, data: { status?: number; adminReply?: string }): Promise<ApiResponse> { return request.put(`/api/admin/reviews/${id}`, data) },
deleteReview(id: number): Promise<ApiResponse> { return request.delete(`/api/admin/reviews/${id}`) },
getFavorites(params: { page: number; size: number; keyword?: string }): Promise<ApiResponse<{ favorites: AdminFavoriteRow[]; total: number; totalPages: number; currentPage: number; size: number }>> {
return request.get<ApiResponse<Record<string, any>>>('/api/admin/favorites', params).then((res) => ({
...res,
data: {
favorites: Array.isArray(res.data.favorites) ? (res.data.favorites as AdminFavoriteRow[]) : [],
total: Number(res.data.total || 0),
totalPages: Number(res.data.totalPages || 0),
currentPage: Number(res.data.currentPage || params.page),
size: Number(res.data.size || params.size),
},
}))
},
deleteFavorite(id: number): Promise<ApiResponse> { return request.delete(`/api/admin/favorites/${id}`) },
migrateLegacyOrderItems(): Promise<ApiResponse<{ totalOrders: number; migrated: number; skipped: number }>> { return request.post('/api/admin/orders/migrate-items') },
}

View File

@@ -1,55 +0,0 @@
import { request } from '../request'
import type { ApiResponse, CartItem } from '@/types/api'
import { normalizeCartItems, normalizeOrder } from '@/utils/normalizers'
export const cartApi = {
// 获取购物车
getCart(): Promise<ApiResponse<CartItem[]>> {
return request.get<ApiResponse<any>>('/api/cart').then((res) => ({
...res,
data: normalizeCartItems(res.data),
}))
},
// 添加到购物车
addToCart(data: {
productId: number;
quantity: number
}): Promise<ApiResponse> {
return request.post('/api/cart/add', data)
},
// 更新数量
updateQuantity(itemId: string, quantity: number): Promise<ApiResponse> {
return request.put('/api/cart/update', { productId: Number(itemId), quantity })
},
// 删除商品
removeItem(itemId: string): Promise<ApiResponse> {
return request.delete('/api/cart/remove', { productId: Number(itemId) })
},
// 批量删除
batchRemove(ids: string[]): Promise<ApiResponse> {
return request.delete('/api/cart/batch-remove', { productIds: ids.map(Number) })
},
// 清空购物车
clearCart(): Promise<ApiResponse> {
return request.delete('/api/cart/clear')
},
// 获取购物车数量
getCount(): Promise<ApiResponse<{ count: number }>> {
return request.get('/api/cart/count')
},
checkout(ids?: string[]): Promise<ApiResponse<any>> {
return request.post<ApiResponse<any>>('/api/cart/checkout', {
productIds: ids?.map(Number),
}).then((res) => ({
...res,
data: normalizeOrder(res.data),
}))
},
}

View File

@@ -1,31 +0,0 @@
import { request } from '../request'
import type { ApiResponse } from '@/types/api'
export interface FavoriteItem {
id: number
userId: number
productId: number
productName: string
productImageUrl: string
productPrice: number
productCategory: string
createdAt: string
}
export const favoriteApi = {
getList(): Promise<ApiResponse<FavoriteItem[]>> {
return request.get('/api/favorite')
},
getCount(): Promise<ApiResponse<{ count: number }>> {
return request.get('/api/favorite/count')
},
check(productId: number): Promise<ApiResponse<{ favorited: boolean }>> {
return request.get('/api/favorite/check', { productId })
},
toggle(productId: number): Promise<ApiResponse<{ favorited: boolean }>> {
return request.post('/api/favorite/toggle', { productId })
},
}

View File

@@ -1,164 +0,0 @@
import { request } from '../request'
import type { ApiResponse, FlashSale, PageParams, PageResponse } from '@/types/api'
import { mapOrderStatus, normalizeFlashSale, normalizePage } from '@/utils/normalizers'
const flashSaleStatusToCode = (status?: string) => {
if (status === 'UPCOMING') return 1
if (status === 'ACTIVE') return 2
if (status === 'ENDED') return 3
if (status === 'PAUSED') return 4
return undefined
}
const flashSaleSortField = (sort?: string) => {
if (sort === 'flashPrice') return 'flashPrice'
if (sort === 'endTime') return 'endTime'
return 'startTime'
}
export const flashsaleApi = {
// 获取限时活动统计信息(即将开始/正在进行/我的参与/抢购成功)
getStatistics(): Promise<ApiResponse<{ upcoming: number; active: number; participated: number; success: number }>> {
return request.get('/api/flashsale/statistics')
},
// 获取限时活动列表
getList(params?: PageParams & { status?: string }): Promise<ApiResponse<PageResponse<FlashSale>>> {
return request.post<ApiResponse<Record<string, any>>>('/api/flashsale/list', {
status: flashSaleStatusToCode(params?.status),
page: params?.page ?? 0,
size: params?.size ?? 10,
sortBy: flashSaleSortField(params?.sort),
sortDirection: params?.order || 'asc',
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeFlashSale),
}))
},
// 获取正在进行的限时活动
getActive(limit?: number): Promise<ApiResponse<FlashSale[]>> {
return request.get<ApiResponse<any[]>>('/api/flashsale/active').then((res) => ({
...res,
data: (Array.isArray(res.data) ? res.data : [])
.map((item) => normalizeFlashSale(item))
.slice(0, limit ?? Number.MAX_SAFE_INTEGER),
}))
},
// 获取限时活动详情
getDetail(id: number): Promise<ApiResponse<FlashSale>> {
return request.get<ApiResponse<any>>(`/api/flashsale/${id}`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
// 参与限时
participate(data: {
flashSaleId: number;
quantity: number;
timestamp?: number;
}): Promise<ApiResponse<{ orderId: number }>> {
return request.post<ApiResponse<any>>('/api/flashsale/participate', data).then((res) => ({
...res,
data: {
orderId: Number(res.data?.orderId || res.data?.id || 0),
},
}))
},
// 获取用户参与记录
getUserRecords(): Promise<ApiResponse<any[]>> {
return request.post<ApiResponse<Record<string, any>>>('/api/order/my-orders', {
orderType: 2,
page: 0,
size: 100,
sortBy: 'createdAt',
sortDirection: 'desc',
}).then((res) => {
const content = Array.isArray(res.data?.content) ? res.data.content : []
return {
...res,
data: content.map((item: Record<string, any>) => ({
id: item.id,
success: mapOrderStatus(item.status) !== 'CANCELLED',
status: item.status,
})),
}
})
},
// 检查用户是否可以参与
checkEligibility(flashSaleId: number): Promise<ApiResponse<{
eligible: boolean;
reason?: string;
remainingQuota?: number;
}>> {
return this.getDetail(flashSaleId).then((res) => {
const eligible = res.data.status === 'ACTIVE' && res.data.remainingStock > 0
return {
code: 0,
success: true,
message: '检查成功',
data: {
eligible,
reason: eligible ? '' : '活动未开始、已结束或库存不足',
remainingQuota: res.data.limitPerUser,
},
}
})
},
create(data: {
productId: number
flashPrice: number
flashStock: number
startTime: string
endTime: string
}): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>('/api/flashsale/create', data).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
update(id: number, data: Record<string, unknown>): Promise<ApiResponse<FlashSale>> {
return request.put<ApiResponse<any>>(`/api/flashsale/${id}`, data).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/flashsale/${id}`)
},
publish(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/publish`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
pause(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/pause`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
resume(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/resume`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
end(id: number): Promise<ApiResponse<FlashSale>> {
return request.post<ApiResponse<any>>(`/api/flashsale/${id}/end`).then((res) => ({
...res,
data: normalizeFlashSale(res.data),
}))
},
}

View File

@@ -1,108 +0,0 @@
import { request } from '../request'
import type { ApiResponse, GroupBuying, GroupBuyingGroup, GroupBuyingStatistics, PageParams, PageResponse } from '@/types/api'
import { normalizeGroupBuying, normalizeGroupBuyingGroup, normalizePage } from '@/utils/normalizers'
const groupBuyingStatusToCode = (status?: string) => {
if (status === 'DRAFT') return 0
if (status === 'UPCOMING') return 1
if (status === 'ACTIVE') return 2
if (status === 'ENDED') return 3
return undefined
}
export const groupbuyingApi = {
getStatistics(): Promise<ApiResponse<GroupBuyingStatistics>> {
return request.get('/api/groupbuying/statistics')
},
getList(params?: PageParams & { status?: string }): Promise<ApiResponse<PageResponse<GroupBuying>>> {
return request.get<ApiResponse<Record<string, any>>>('/api/groupbuying/list', {
status: groupBuyingStatusToCode(params?.status),
page: params?.page ?? 0,
size: params?.size ?? 10,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeGroupBuying),
}))
},
getDetail(id: number): Promise<ApiResponse<GroupBuying>> {
return request.get<ApiResponse<any>>(`/api/groupbuying/${id}`).then((res) => ({
...res,
data: normalizeGroupBuying(res.data),
}))
},
getGroups(id: number, params?: PageParams): Promise<ApiResponse<PageResponse<GroupBuyingGroup>>> {
return request.get<ApiResponse<Record<string, any>>>(`/api/groupbuying/${id}/groups`, {
page: params?.page ?? 0,
size: params?.size ?? 10,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeGroupBuyingGroup),
}))
},
joinGroup(data: { groupBuyingId: number; groupId?: number }): Promise<ApiResponse<{
success: boolean
message: string
groupId: number
groupNo: string
orderId: number
}>> {
return request.post('/api/groupbuying/join', data)
},
getGroupDetail(groupId: number): Promise<ApiResponse<GroupBuyingGroup>> {
return request.get<ApiResponse<any>>(`/api/groupbuying/group/${groupId}`).then((res) => ({
...res,
data: normalizeGroupBuyingGroup(res.data),
}))
},
cancelMembership(groupId: number): Promise<ApiResponse> {
return request.post(`/api/groupbuying/group/${groupId}/cancel`)
},
getMyGroups(params?: PageParams): Promise<ApiResponse<PageResponse<GroupBuyingGroup>>> {
return request.get<ApiResponse<Record<string, any>>>('/api/groupbuying/my-groups', {
page: params?.page ?? 0,
size: params?.size ?? 10,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeGroupBuyingGroup),
}))
},
// Admin
create(data: {
productId: number
groupPrice: number
requiredMembers: number
durationMinutes: number
totalStock: number
maxPerUser: number
startTime: string
endTime: string
}): Promise<ApiResponse<GroupBuying>> {
return request.post<ApiResponse<any>>('/api/groupbuying/admin/create', data).then((res) => ({
...res,
data: normalizeGroupBuying(res.data),
}))
},
update(id: number, data: Record<string, unknown>): Promise<ApiResponse<GroupBuying>> {
return request.put<ApiResponse<any>>(`/api/groupbuying/admin/${id}`, data).then((res) => ({
...res,
data: normalizeGroupBuying(res.data),
}))
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/groupbuying/admin/${id}`)
},
preloadAll(): Promise<ApiResponse> {
return request.post('/api/groupbuying/admin/preload-all')
},
}

View File

@@ -1,45 +0,0 @@
import { request } from '../request'
export interface NotificationItem {
id: number
userId: number
type: 'flashsale' | 'order' | 'system'
title: string
message: string
link?: string
read: boolean
createdAt: string
}
interface ApiRes<T = any> {
success: boolean
message?: string
data: T
}
export const notificationApi = {
/** 获取通知列表 */
getList(type?: string): Promise<ApiRes<NotificationItem[]>> {
return request.get('/api/notification/list', type ? { type } : undefined)
},
/** 获取未读数量 */
getUnreadCount(): Promise<ApiRes<number>> {
return request.get('/api/notification/unread-count')
},
/** 标记单条已读 */
markAsRead(id: number): Promise<ApiRes> {
return request.put(`/api/notification/${id}/read`)
},
/** 全部标记已读 */
markAllAsRead(): Promise<ApiRes> {
return request.put('/api/notification/read-all')
},
/** 清空所有通知 */
clearAll(): Promise<ApiRes> {
return request.delete('/api/notification/clear')
}
}

View File

@@ -1,138 +0,0 @@
import { request } from '../request'
import type { ApiResponse, Order, PageParams, PageResponse } from '@/types/api'
import { normalizeOrder } from '@/utils/normalizers'
const orderStatusToCode = (status?: string) => {
if (status === 'PENDING') return 1
if (status === 'PAID') return 2
if (status === 'SHIPPED') return 3
if (status === 'COMPLETED') return 4
if (status === 'CANCELLED') return 5
return undefined
}
const aggregateOrders = (rawOrders: Array<Record<string, any>>): Order[] => {
const groups = new Map<string, Array<Record<string, any>>>()
rawOrders.forEach((item) => {
const key = item.groupNo || item.orderNo || String(item.id)
if (!groups.has(key)) {
groups.set(key, [])
}
groups.get(key)!.push(item)
})
return Array.from(groups.values()).map((group) => {
const [anchor] = group
const normalizedAnchor = normalizeOrder(anchor)
const items = group.flatMap((item) => normalizeOrder(item).items)
const totalAmount = items.reduce((sum, item) => sum + item.subtotal, 0)
return {
...normalizedAnchor,
orderNo: anchor.groupNo || normalizedAnchor.orderNo,
totalAmount,
paymentAmount: totalAmount,
items,
}
})
}
export const orderApi = {
create(data: {
items: Array<{ productId: number; quantity: number }>
addressId?: number
remark?: string
}): Promise<ApiResponse<Order>> {
const [firstItem] = data.items
return request.post<ApiResponse<any>>('/api/order/create', {
productId: firstItem.productId,
quantity: firstItem.quantity,
remark: data.remark,
}).then((res) => ({
...res,
data: normalizeOrder(res.data),
}))
},
getList(params?: PageParams & { status?: string }): Promise<ApiResponse<PageResponse<Order>>> {
return request.post<ApiResponse<Record<string, any>>>('/api/order/my-orders', {
status: orderStatusToCode(params?.status),
page: params?.page ?? 0,
size: params?.size ?? 10,
sortBy: params?.sort || 'createdAt',
sortDirection: params?.order || 'desc',
}).then((res) => {
const rawContent = Array.isArray(res.data.content) ? res.data.content : []
const content = aggregateOrders(rawContent)
return {
...res,
data: {
content,
totalElements: Number(res.data.totalElements || content.length),
totalPages: Number(res.data.totalPages || 1),
size: res.data.size || content.length,
number: res.data.currentPage || 0,
first: true,
last: true,
},
}
})
},
getDetail(id: number): Promise<ApiResponse<Order>> {
return request.get<ApiResponse<any>>(`/api/order/${id}`).then(async (res) => {
if (res.data.groupNo) {
const groupRes = await request.get<ApiResponse<any[]>>(`/api/order/group/${res.data.groupNo}`)
return {
...res,
data: aggregateOrders(groupRes.data)[0],
}
}
return {
...res,
data: normalizeOrder(res.data),
}
})
},
cancel(id: number): Promise<ApiResponse> {
return request.post(`/api/order/${id}/cancel`)
},
pay(id: number, paymentMethod: string): Promise<ApiResponse> {
return request.post(`/api/order/${id}/pay`, { paymentMethod })
},
ship(id: number): Promise<ApiResponse> {
return request.post(`/api/order/${id}/ship`)
},
updateStatus(id: number, status: number, remark?: string): Promise<ApiResponse> {
return request.put('/api/order/status', { orderId: id, status, remark })
},
confirm(id: number): Promise<ApiResponse> {
return request.post(`/api/order/${id}/confirm`)
},
delete(id: number): Promise<ApiResponse> {
return request.delete(`/api/order/${id}`)
},
getStatistics(): Promise<ApiResponse<{ total: number; pending: number; paid: number; shipped: number; completed: number; cancelled: number }>> {
return request.get<ApiResponse<any>>('/api/order/statistics').then((res) => ({
...res,
data: {
total: Number(res.data.totalOrders || 0),
pending: Number(res.data.pendingPaymentOrders || 0),
paid: Number(res.data.paidOrders || 0),
shipped: Number(res.data.shippedOrders || 0),
completed: Number(res.data.completedOrders || 0),
cancelled: Number(res.data.cancelledOrders || 0),
},
}))
},
}

View File

@@ -1,57 +0,0 @@
import { request } from '../request'
import type { ApiResponse, Product, PageParams, PageResponse } from '@/types/api'
import { normalizePage, normalizeProduct } from '@/utils/normalizers'
export const productApi = {
// 获取商品列表
getList(params?: PageParams & {
keyword?: string;
category?: string;
minPrice?: number;
maxPrice?: number;
}): Promise<ApiResponse<PageResponse<Product>>> {
return request.get<ApiResponse<Record<string, any>>>('/api/product/list', {
page: params?.page ?? 0,
size: params?.size ?? 10,
keyword: params?.keyword,
category: params?.category,
minPrice: params?.minPrice,
maxPrice: params?.maxPrice,
sortBy: params?.sort || 'id',
sortDirection: params?.order || 'desc',
status: 1,
}).then((res) => ({
...res,
data: normalizePage(res.data, normalizeProduct),
}))
},
// 获取热门商品
getHot(limit = 8): Promise<ApiResponse<Product[]>> {
return request.get<ApiResponse<any[]>>('/api/product/hot', { limit }).then((res) => ({
...res,
data: Array.isArray(res.data) ? res.data.map((item) => normalizeProduct(item)) : [],
}))
},
// 获取商品详情
getDetail(id: number): Promise<ApiResponse<Product>> {
return request.get<ApiResponse<any>>(`/api/product/${id}`).then((res) => ({
...res,
data: normalizeProduct(res.data),
}))
},
// 搜索商品
search(keyword: string): Promise<ApiResponse<Product[]>> {
return this.getList({ keyword, page: 0, size: 50 }).then((res) => ({
...res,
data: res.data.content,
}))
},
// 获取商品分类
getCategories(): Promise<ApiResponse<string[]>> {
return request.get('/api/product/categories')
},
}

Some files were not shown because too many files have changed in this diff Show More