feat(store): 添加商品图片及轮播图上传功能
- 商品编辑弹窗新增商品主图上传和更换功能,支持上传进度反馈 - 实现轮播图(files字段)上传、删除和显示,支持多格式files解析 - 编辑提交时携带图片和轮播图数据进行保存 - 新增图片压缩工具函数getCompressedImageUrl,用于生成缩略图压缩URL - 统一修正上传接口URL,确保图片上传服务可用
This commit is contained in:
@@ -61,11 +61,29 @@
|
||||
- **问题**: `handleSelectCategory` 中先 `setSelectedCategory` 再立即调用 `loadGoods`,但 `loadGoods` 通过闭包读取到的 `selectedCategory` 仍是旧值,导致第一次点击实际用的是上次选中的分类
|
||||
- **修复**: `loadGoods` 增加可选参数 `categoryId`,`handleSelectCategory` 选择分类后直接把新的 `cat?.categoryId` 传入 `loadGoods`,避免闭包取到旧状态
|
||||
|
||||
## 门店商品管理页编辑弹窗补充会员价字段
|
||||
## 门店商品管理页添加图片上传/更换功能
|
||||
- **文件**: `src/pages/store/goods/index.tsx`
|
||||
- **问题**: 编辑弹窗只有到手价和市场价,缺少会员价(dealerPrice)输入框
|
||||
- **修复**:
|
||||
1. `editForm` state 新增 `dealerPrice: ''`
|
||||
2. `openEditModal` 中填充 `dealerPrice: goods.dealerPrice || ''`
|
||||
3. 表单 UI 在市场价和库存之间新增会员价输入框
|
||||
4. `submitEdit` 提交时携带 `dealerPrice`
|
||||
- **问题**: 编辑弹窗只能修改价格库存等字段,缺少商品图片上传和更换功能
|
||||
- **修复**:
|
||||
1. 引入 `uploadFile` from `@/api/system/file`
|
||||
2. 新增 `uploadingImage` 状态追踪上传进度
|
||||
3. 新增 `handleUploadImage` 函数:调用 `uploadFile()` 上传图片,获取返回的 `path` 更新 `editGoods.image`
|
||||
4. 编辑弹窗商品信息区:图片改为可点击触发上传,蒙层显示「更换」/「上传中...」,无图时显示照相机占位符
|
||||
5. `submitEdit` 提交时携带 `editGoods.image` 保存新图片
|
||||
|
||||
## 门店商品管理页添加轮播图上传/删除功能
|
||||
- **文件**: `src/pages/store/goods/index.tsx`
|
||||
- **问题**: 编辑弹窗缺少轮播图(`files` 字段)管理能力;实际 `files` 为对象数组 `[{uid,url,status}]`,首次实现只按字符串数组解析导致图片无法显示
|
||||
- **修复**:
|
||||
1. `editForm` 新增 `files` 状态,元素为 `{ uid?, url, status? }` 对象
|
||||
2. `openEditModal` 解析 `goods.files`:兼容对象数组 `[{uid,url,status}]`、字符串数组 `["url"]`、逗号分隔字符串三种格式
|
||||
3. 新增 `handleAddBanner` 上传新轮播图(生成 `{ uid: file.id, url, status: 'done' }`),`handleRemoveBanner` 删除指定位置轮播图
|
||||
4. 编辑弹窗新增轮播图区域:显示现有图片+删除按钮,底部「上传」入口
|
||||
5. `submitEdit` 提交时将 `files` 数组 `JSON.stringify` 后保存
|
||||
|
||||
## 新增图片压缩工具函数
|
||||
- **文件**: `src/utils/image.ts`(新建)
|
||||
- **函数**: `getCompressedImageUrl(url, options?)` — 给 OSS 图片 URL 拼接阿里云图片处理参数
|
||||
- **默认参数**: `width=750, quality=90, enabled=true`
|
||||
- **安全处理**: 空 URL 返回空串、已含 `x-oss-process` 不重复拼接、根据已有 query 参数自动选 `?`/`&` 分隔符
|
||||
- **使用约定**: 列表/卡片等缩略图场景使用此函数;预览大图(`Taro.previewImage`)直接用原 URL,不调用此函数
|
||||
|
||||
Reference in New Issue
Block a user