feat(shop): 添加商品详情页轮播图点击放大预览功能

- 在 src/pages/shop/product-detail.tsx 的轮播图 Image 上添加 onClick 事件
- 使用 Taro.previewImage 实现图片全屏预览和左右滑动浏览
- 同样在 src/pages/points/product-detail.tsx 商品图片添加点击预览功能
- 新增完整的 shop-api 秒杀模块,包含实体、参数、mapper、service、controller 和定时任务
- 实现防重复提交、活动校验、限购校验和原子扣库存的秒杀核心下单逻辑
- 提供管理端 CRUD 与用户端秒杀订单相关接口
- 引入定时任务 SeckillStatusTask 定时更新秒杀活动状态
- 添加秒杀模块相关数据库建表脚本和接口路径对齐前端设计
This commit is contained in:
2026-06-26 22:25:07 +08:00
parent 93d0b5b476
commit 44ca5bbbfc
4 changed files with 26 additions and 1 deletions

View File

@@ -10,3 +10,15 @@
- **文件**: `/Users/gxwebsoft/VUE/weiyu-taro/src/pages/shop/product-detail.tsx` - **文件**: `/Users/gxwebsoft/VUE/weiyu-taro/src/pages/shop/product-detail.tsx`
- 同样缺少 Markdown 图片语法转 HTML 的 `parseContent()` 函数,已同步添加 - 同样缺少 Markdown 图片语法转 HTML 的 `parseContent()` 函数,已同步添加
- 与 xinlong-shop-taro 修复方案完全一致 - 与 xinlong-shop-taro 修复方案完全一致
## shop-api 后端秒杀模块实现
- **项目路径**: `/Users/gxwebsoft/JAVA/shop-api`
- 新增完整的秒杀后端模块,参考 ShopGoods 四层架构模板
- **Entity**: ShopSeckill.java + ShopSeckillOrder.java含 tenantId 多租户)
- **Param**: ShopSeckillParam.java
- **Mapper**: ShopSeckillMapper + ShopSeckillOrderMapper + XML含原子扣库存 SQL
- **Service**: ShopSeckillServiceImpl核心下单逻辑防重复提交→活动校验→限购校验→原子扣库存→创建订单→Redis记录已购
- **Controller**: ShopSeckillController管理端 CRUD + 用户端 createOrder/myOrders/timeSlots
- **定时任务**: SeckillStatusTask每60秒自动更新过期秒杀状态
- **建表SQL**: src/main/resources/sql/shop_seckill.sql
- API 路径 `/api/shop/shopSeckill`,与前端 `/shopSeckill/*` 对齐

View File

@@ -0,0 +1,7 @@
## 2026-06-26
### 商品详情页轮播图添加点击放大预览
- **文件**: `src/pages/shop/product-detail.tsx`
- 在 Swiper 轮播图的 Image 上添加 `onClick` → 调用 `Taro.previewImage({ current: img, urls: images })`
- `previewImage` 是 Taro 内置 API在小程序中原生支持全屏预览 + 左右滑动翻图,无需额外组件
- **文件**: `src/pages/points/product-detail.tsx` — 同样添加了点击放大预览

View File

@@ -97,6 +97,7 @@ const PointsProductDetail: React.FC = () => {
style={{ height: '375px' }} style={{ height: '375px' }}
src={product.productImage} src={product.productImage}
mode='aspectFill' mode='aspectFill'
onClick={() => Taro.previewImage({ current: product.productImage, urls: [product.productImage!] })}
/> />
) : ( ) : (
<View className='w-full bg-orange-50 flex items-center justify-center' style={{ height: '375px' }}> <View className='w-full bg-orange-50 flex items-center justify-center' style={{ height: '375px' }}>

View File

@@ -230,7 +230,12 @@ const ProductDetailPage: React.FC = () => {
> >
{images.map((img, idx) => ( {images.map((img, idx) => (
<SwiperItem key={idx}> <SwiperItem key={idx}>
<Image className='w-full h-full' src={img} mode='aspectFill' /> <Image
className='w-full h-full'
src={img}
mode='aspectFill'
onClick={() => Taro.previewImage({ current: img, urls: images })}
/>
</SwiperItem> </SwiperItem>
))} ))}
{images.length === 0 && ( {images.length === 0 && (