# 添加服务页改动记录

## 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 模板编译校验。