mrr.sj.front/CHANGE_RECORD_ADD_SERVICE.md

添加服务页改动记录

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