82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
|
# 添加服务页改动记录
|
|||
|
|
|
|||
|
|
## 2026-06-11
|
|||
|
|
|
|||
|
|
### 1. 接口返回视频字段未正常显示
|
|||
|
|
|
|||
|
|
涉及文件：
|
|||
|
|
|
|||
|
|
- `pages/shop/add-service.vue`
|
|||
|
|
- `components/dynamic-form/dynamic-form.vue`
|
|||
|
|
- `components/dynamic-form/FormItemVideo.vue`
|
|||
|
|
|
|||
|
|
改动内容：
|
|||
|
|
|
|||
|
|
- `pages/shop/add-service.vue`
|
|||
|
|
- 动态模板转换时不再过滤 `fieldType === 'video'` 的字段。
|
|||
|
|
- 新增 `hasDynamicVideoField`，当接口模板已经返回视频字段时，使用动态表单内的视频上传组件。
|
|||
|
|
- 原页面固定视频上传块保留为兜底，仅在模板没有视频字段时显示，避免重复显示两个视频上传组件。
|
|||
|
|
- 给 `dynamic-form` 传入 `upload-user-id`，让动态视频上传能拿到当前发布用户 ID。
|
|||
|
|
- 初始化动态字段时支持分组结构，视频多选字段按数组初始化。
|
|||
|
|
|
|||
|
|
- `components/dynamic-form/dynamic-form.vue`
|
|||
|
|
- 视频字段渲染时传入 `maxCount`、`maxSize/maxFileSize`。
|
|||
|
|
- 新增 `uploadUserId` prop，并传给 `form-item-video`。
|
|||
|
|
- 多视频字段初始化为空数组，单视频字段初始化为空字符串。
|
|||
|
|
|
|||
|
|
- `components/dynamic-form/FormItemVideo.vue`
|
|||
|
|
- 支持单视频和多视频值类型。
|
|||
|
|
- 使用 `ali-oss-uploader` 上传视频时传入 `kind=2`。
|
|||
|
|
- 支持视频上传成功后回写、删除后清空、已有视频回显。
|
|||
|
|
- 上传用户 ID 优先使用父组件传入值，兜底读取 Vuex 中的商家信息。
|
|||
|
|
|
|||
|
|
### 2. 视频上传后传给后端的地址打不开
|
|||
|
|
|
|||
|
|
涉及文件：
|
|||
|
|
|
|||
|
|
- `components/ali-oss-uploader/ali-oss-uploader.vue`
|
|||
|
|
|
|||
|
|
改动内容：
|
|||
|
|
|
|||
|
|
- 上传 OSS 后不再无条件拼接 URL 并回传。
|
|||
|
|
- H5 `fetch` 上传和 APP/小程序 `uni.uploadFile` 上传都必须返回 `2xx` 才认为成功。
|
|||
|
|
- 上传失败时 reject，并触发 `error`，避免把不存在的 OSS 地址提交给后端。
|
|||
|
|
- 统一生成 OSS object key，上传使用的 key 和回传给后端的 URL 使用同一套路径规则。
|
|||
|
|
- 文件扩展名提取增加兜底逻辑：
|
|||
|
|
- 视频默认 `.mp4`
|
|||
|
|
- 图片默认 `.jpg`
|
|||
|
|
- 清理临时路径中的 query/hash，避免生成异常对象名。
|
|||
|
|
|
|||
|
|
### 3. 添加服务页多图上传支持拖动排序
|
|||
|
|
|
|||
|
|
涉及文件：
|
|||
|
|
|
|||
|
|
- `components/ali-oss-uploader/ali-oss-uploader.vue`
|
|||
|
|
- `components/dynamic-form/FormItemImage.vue`
|
|||
|
|
- `pages/shop/add-service.vue`
|
|||
|
|
|
|||
|
|
改动内容：
|
|||
|
|
|
|||
|
|
- `components/ali-oss-uploader/ali-oss-uploader.vue`
|
|||
|
|
- 新增 `sortable` prop，默认关闭。
|
|||
|
|
- 图片上传列表支持长按开始拖动。
|
|||
|
|
- 拖动到其他图片位置时实时交换数组顺序。
|
|||
|
|
- 每次排序后立即触发 `input` 和 `change`，向父组件回写排序后的 `fileList`。
|
|||
|
|
- 拖动中增加视觉状态，降低透明度并缩放。
|
|||
|
|
- 拖动结束后短暂抑制图片预览，避免排序后误触发预览。
|
|||
|
|
- 图片预览使用当前 `fileList` 字符串数组，保持预览顺序和提交顺序一致。
|
|||
|
|
|
|||
|
|
- `components/dynamic-form/FormItemImage.vue`
|
|||
|
|
- 动态表单多图上传开启 `sortable`。
|
|||
|
|
|
|||
|
|
- `pages/shop/add-service.vue`
|
|||
|
|
- 提交逻辑沿用当前数组顺序：
|
|||
|
|
- `image_multi` 字段按动态表单当前数组顺序传参。
|
|||
|
|
- `photo` 字段通过 `Object.values(this.formData.photo || {})` 取当前顺序传参。
|
|||
|
|
|
|||
|
|
### 4. 校验情况
|
|||
|
|
|
|||
|
|
- 已执行 `git diff --check`，当前相关改动无 whitespace 错误。
|
|||
|
|
- 项目 `package.json` 未配置 build/lint 脚本，未执行完整构建校验。
|
|||
|
|
- 本地缺少 `vue-template-compiler`，未执行 Vue 模板编译校验。
|