Compare commits

...

448 Commits

Author SHA1 Message Date
b49fa378e7 Merge branch 'temp221' into dev/1.0 2026-10-10 17:34:41 +08:00
1c0444b1ec chore:微信小程序真机广告 正常 2026-10-10 17:31:02 +08:00
09909f0dcf chore:真机上显示广告正常 2026-10-10 16:02:20 +08:00
b14032149e chore:启动广告,后台开启首次弹出,第一次进入小程序后会弹出广告,
后台开启每次弹出,每次重新进入小程序都会弹出广告
2026-10-10 11:35:55 +08:00
447f7cd7b5 chore:启动广告,后台开启首次弹出,每一次重新进入小程序后都会弹出广告 2026-10-10 11:20:36 +08:00
a5a94e31cc Merge branch 'temp221' into dev/1.0 2026-10-10 09:04:48 +08:00
dd15ff8ea4 chore:智能客服的欢迎语标题可自定义调节 2026-10-10 09:04:09 +08:00
3ab78f5369 chore:AI智能题目可以自定义调节颜色大小,字号 2026-10-09 18:29:02 +08:00
e223e58425 chore:输入框切换正常 2026-10-09 18:17:03 +08:00
5ef5f275f0 chore:微信小程序的语音输入切换到文字输入不会闪 2026-10-09 18:10:31 +08:00
236e56f4e9 chore: 2026-10-09 17:01:16 +08:00
d170e53082 Merge branch 'temp221' into dev/1.0 2026-10-09 16:57:33 +08:00
e7dd6aff62 chore:微信小程序的AI智能客服标题和图片之间有距离 2026-10-09 16:56:05 +08:00
8488aa39bc chore:输入框高度一致 2026-10-09 16:33:42 +08:00
817d2081d7 chore:输入框语音输入时,输入框样式修改 2026-10-09 16:21:27 +08:00
0a0ce88d82 chore:输入框样式突出 2026-10-09 14:45:08 +08:00
34c0df5320 chore:快捷问题,标题,换一换按钮,图片之间空隙变大 2026-10-09 14:34:14 +08:00
c36d8dbce6 chore:悬浮按钮可以后台自定义调节 2026-10-09 10:46:40 +08:00
356a6d2bbf chore:真机用户隐私保护的“同意并继续”按钮显示正常 2026-10-09 09:16:18 +08:00
3b354992e3 chore:悬浮按钮可以自定义调节 2026-10-08 17:59:37 +08:00
fe0381a298 chore:微信小程序pdf正常打开 2026-10-08 17:26:16 +08:00
733c33a41c chore:新加源代码pages_tool/files/detail.vue,文件列表链接正常打开PDF 2026-10-08 17:07:10 +08:00
e8ff0e9be4 chore:快捷问题框浮起来 2026-10-08 09:22:36 +08:00
0faecf3603 chore:AI智能欢迎语的快捷问题的框改椭圆 2026-10-08 09:11:30 +08:00
e9c8bac60b chore:微信小程序正常 2026-09-30 17:02:26 +08:00
a72e1b733d chore:隐藏欢迎语页面的时间 2026-09-30 16:40:27 +08:00
132ecbb127 chore:随机生成快捷问题的图标 2026-09-30 16:36:15 +08:00
5173b5d38e chore:支持换一换按钮应用 2026-09-30 16:15:07 +08:00
4172da6201 chore:更新欢迎语和快捷问题的样式,点击输入框隐藏欢迎语整体 2026-09-30 16:02:20 +08:00
53be343159 chore:所有个更多功能正常 2026-09-30 15:26:14 +08:00
1de5f925ee chore:添加文件的图标正常 2026-09-30 14:48:38 +08:00
95b5484629 chore:新对话改成黑色,网址改成黑色 2026-09-30 14:36:56 +08:00
454bc3b522 chore:修改更多功能样式 2026-09-30 14:21:43 +08:00
1223ec9202 chore:隐藏更多功能中的语音 2026-09-30 12:01:17 +08:00
4f75347103 chore:语音输入图标正常 2026-09-30 11:58:34 +08:00
6e7dbdde94 chore:修改语音输入样式 2026-09-30 11:53:40 +08:00
04b5ed06a3 chore:修改语音输入图标 2026-09-30 11:37:04 +08:00
0507d600a0 chore:扬声器图标修改为黑色圆点 + 两道声波 2026-09-30 11:34:14 +08:00
cf902e0440 chore:语音输入图标更改 2026-09-30 11:30:26 +08:00
f555b8a946 chore:智能用户和回答都字号都25,不加粗 2026-09-30 10:49:08 +08:00
ce705d9d61 chore:文件图标正常 2026-09-30 10:01:17 +08:00
5f4dc370f8 chore:语音气泡正常 2026-09-30 09:28:22 +08:00
a978858254 chore:语音输入正常 2026-09-29 17:25:14 +08:00
10e6402ad6 chore:语音输入有返回 2026-09-29 16:46:59 +08:00
bf5e32df2b chore:修改包大小 2026-09-29 14:16:57 +08:00
9b0a2ce9b6 feat: 添加components-diy\diy-webview.vue 2026-09-29 11:16:08 +08:00
954e8cad0b chore: 重新整理依赖及revert lang.js 2026-09-29 11:12:58 +08:00
166a284359 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221
# Conflicts:
#	.local.config.js
#	common/js/ai-service.js
#	common/js/media-upload.js
#	docs/ai-agent-integration.md
#	pages_tool/ai-chat/ai-chat-message.vue
#	pages_tool/ai-chat/components/ai-chat-tools-panel.vue
#	pages_tool/ai-chat/index.vue
2026-09-29 11:02:53 +08:00
5efae5c38b feat(ai-chat): 增加自动定位权限提示及处理逻辑,优化用户体验 2026-09-28 13:57:46 +08:00
4168c24fd6 feat(ai-chat): 增强位置消息处理,支持透传位置、时间、页面上下文,优化用户体验 2026-09-28 13:48:56 +08:00
762401777b feat(ai-chat): 增强多媒体消息处理,支持多条语音和视频同时发送,优化消息气泡显示逻辑 2026-09-28 11:30:40 +08:00
24c4e40df9 Merge remote-tracking branch 'remotes/origin/temp221' into temp221 2026-09-28 11:12:05 +08:00
c58734fcda feat(ai-chat): 增强语音消息处理,支持多条语音同时发送及中央播放面板 2026-09-28 11:10:26 +08:00
bbc9fdd6ea feat(ai-chat): 动态切换输入框 placeholder 文案,支持语音和媒体附件提示 2026-09-28 10:18:10 +08:00
4cd21ade51 fix(ai-chat): 修复 v-if/v-else 配对问题,优化输入框和语音图标布局对称性 2026-09-28 10:16:09 +08:00
0799e47233 feat(ai-chat): 在流式回答中添加"思考中..."指示,优化操作栏显示逻辑 2026-09-28 10:05:52 +08:00
306f2f7ff7 feat(voice-input): 改进音频消息处理,支持音频时长和指令文本,优化后端交互 2026-09-28 09:33:57 +08:00
fff10a2e19 feat(media-upload): 增加全量音视频格式支持,确保与后端一致 2026-09-24 18:03:08 +08:00
9d990e6aac feat: implement voice input feature with press-and-hold gesture
- Added new language strings for voice input functionality in English and Chinese.
- Updated manifest to include microphone permission for voice recording.
- Enhanced ai-chat-message component to support voice input with visual feedback for recording and cancellation gestures.
- Integrated voice recorder functionality in ai-chat-voice-panel, allowing users to record audio with a maximum duration of 60 seconds.
- Implemented audio handling logic to upload recorded audio files and display them in the chat interface.
- Added error handling for voice recording failures and user notifications.
- Updated styles for improved UI/UX during voice recording interactions.
2026-09-24 17:47:37 +08:00
74468e2c9d feat(ai-chat): 暂时隐藏模型选择器,统一使用 Auto 模式 2026-09-24 17:31:15 +08:00
f40c4b2a69 Merge branch 'temp221' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-24 17:05:26 +08:00
2dae3adf66 chore:网页容器H5显示正常 2026-09-24 17:00:14 +08:00
e079afc0a2 feat(media-upload): 增加自愈机制,自动切换 STS 直传以应对后端策略变化 2026-09-24 16:27:33 +08:00
85b3e4db47 chore:AI回答的文字只有网址是蓝色,其他回答是黑色的 2026-09-24 13:59:24 +08:00
0197224c75 chore:H5所有气泡都统一 2026-09-24 11:59:50 +08:00
70f8fb867d feat(chat-ui): 增加聊天 UI 配置的本地持久化和预加载功能,优化首帧渲染体验 2026-09-24 11:10:21 +08:00
86b87eeb9d feat(ai-chat): 聊天 UI 配置 V3 — 名称/头像/时间配置项消费
- CHAT_UI_DEFAULTS 同步后端 4 新键 (show_name/show_avatar/avatar/time_format/time_humanize)
- 标题与 AI 头像按开关显隐, 自定义头像 (素材库 pic_path / URL) 优先于内置
- formatTime 支持 auto(智能分段)/full(完整) 与 humanizeTime 相对时间优先 (刚刚/N分钟前/N小时前/昨天/前天/M月D日/Y年M月D日)
- i18n 中英各+5 键
2026-09-24 10:30:28 +08:00
297b545e55 fix(media-upload): alioss 直传 endpoint 缺 oss- 前缀修复
- sts.region 是简写 (cn-hangzhou), 真实 OSS endpoint 须完整形式 (oss-cn-hangzhou)
- 优先使用后端 sts.oss_url (OssProviderRegistry::buildDirectEndpoint 已拼好), 兜底 oss-${region} 拼接
2026-09-24 10:29:55 +08:00
3e2ae9b7ca chore 2026-09-24 08:51:52 +08:00
2016b87b6e chore:回答问题视口随文字增长一直是贴着最新一句往上走。 2026-09-23 17:12:11 +08:00
a42ad4ebb3 chore:新增AI智能问题是否合并回答/单独回答 2026-09-23 16:25:39 +08:00
158750b933 chore:删除AI回答后下面出现修改图标的英文 2026-09-23 15:26:36 +08:00
3abe65de2a chore:H5的气泡修改 2026-09-23 15:22:19 +08:00
c0e432cc22 chore:微信小程序真机可以自定义复制 2026-09-23 15:04:27 +08:00
f8115f47fd chore:AI修改新对话按钮图标,搜索记录按钮向上移动,删除AI回答后的AI名称 2026-09-23 14:13:54 +08:00
0ee97f902d chore:跳转文章列表链接可以分类 2026-09-23 11:15:47 +08:00
3b996485e8 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0
# Conflicts:
#	components-diy/diy-image-nav.vue
2026-09-22 15:44:27 +08:00
d18df73849 fix(diy-image-nav): 修复小程序端水平滚动条始终显示/滑动时显示不生效 2026-09-22 15:22:15 +08:00
66b56387e6 chore:滑动图片后台上传图片自适应 2026-09-22 15:15:24 +08:00
bac5583ecb 强制合并 2026-09-22 10:52:56 +08:00
3079cf4ba5 chore:点赞图标正常 2026-09-22 10:39:01 +08:00
aefb0c1550 Merge branch 'temp221' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-21 08:53:52 +08:00
235adb5ebd chore:优化工具调用的可见性控制,确保与思考过程开关一致;统一欢迎语字段名,移除冗余信息;兼容旧数据格式,提升数据处理的健壮性 2026-09-20 18:25:59 +08:00
744981ed93 chore:添加 chat_ui_config 支持,优化前端 UI 行为开关;实现附件类型动态控制,确保与后端配置同步 2026-09-20 18:01:43 +08:00
942d85de19 chore:要实现后台开启双语模式,微信小程序真机切换英文模式,此时显示的是英文,后台关闭双语模式,微信小程序刷新重新进入要是中文模式 2026-09-20 17:58:16 +08:00
ae5921aa90 fix(lang): 恢复 common 和 components 节点校验 2026-09-20 16:15:48 +08:00
c104f6c443 chore: 忽略 .trae 相关文件 2026-09-20 16:15:19 +08:00
747a15f16e chore: 忽略 .workbuddy 目录 2026-09-20 16:14:42 +08:00
ee20c214de chore:优化服务配置缓存逻辑,减少不必要的 API 调用;修复欢迎语加载逻辑,避免重复推送欢迎气泡;调整快捷问题样式以兼容低版本环境 2026-09-20 15:45:12 +08:00
b93752d58c 更新lang 2026-09-20 15:27:45 +08:00
619e1dc9ef Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0
# Conflicts:
#	components-diy/diy-category-item.vue
#	components-diy/diy-category.vue
2026-09-20 15:25:15 +08:00
8fd68033ed chore:添加欢迎语配套快捷问题功能,支持用户快速发送常见问题;优化数据格式处理与样式 2026-09-20 15:07:43 +08:00
500328ef55 chore :真机可以支持测试 2026-09-20 14:27:51 +08:00
62b4b44f88 chore :真机可以支持测试 2026-09-20 14:06:28 +08:00
6fa0603783 fix(diy-search): 支持卡片底板内边距/外边距/圆角/四边样式后台字段 2026-09-20 10:39:49 +08:00
9d599d5f47 chore:后台更改卡片底板内边距,四边样式颜色,前端和后台同步 2026-09-20 10:33:28 +08:00
2b1f8a4fe2 chore:修复清除会话的 URL 格式,确保使用 camelCase,避免 404 错误;优化 agent 切换时的会话 ID 管理 2026-09-19 16:25:16 +08:00
34c712db32 chore: 同步搜索框与滑动图片相关5个文件到 dev/1.0 2026-09-19 16:03:13 +08:00
7a81045290 Merge branch 'temp221' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-19 15:26:53 +08:00
67ce0f8b39 chore:更新 AI 服务会话管理逻辑,优化用户状态切换时的 key 迁移与会话隔离,确保 H5 端 elicitResponse 请求正常处理 2026-09-19 15:26:38 +08:00
01df6c9116 chore:后台调节滑动图片组件的左右边距,前端运行出来和后台一致 2026-09-19 15:01:22 +08:00
480a109114 chore:商品分类模板1更改,只有「加载完成 且 该二级分类下商品列表非空」才渲染,否则标题 + 网格整块都不显示。 2026-09-18 17:44:03 +08:00
509fe203f7 chore:商品分类模板5 更改完成 2026-09-18 17:28:51 +08:00
0f9cc1087f chore:商品分类模板5 2026-09-18 16:44:14 +08:00
0f24f47048 chore:滑动图片的上下左间距可以后台自定义调节 2026-09-18 15:26:05 +08:00
a3d2ee562e chore:新增商品分类模板5 2026-09-18 13:53:47 +08:00
1b1704f7c6 chore:滑动图片是水平滑动滚动条根据后台显示,AI智能点赞svg 2026-09-18 09:58:15 +08:00
8b2670bf31 chore:客服信息组件转英文模式显示全部英文 2026-09-17 18:19:30 +08:00
e66c91acfc chore:【搜索框】的样式设置中的“背景颜色”可以控制搜索框的"背景颜色"和搜索框的“上下左右边距”的颜色 2026-09-17 15:09:42 +08:00
29699a66fd chore:AI智能输入框样式改变 2026-09-17 14:21:28 +08:00
3b4051c775 chore:上传图片可以支持3张,正常显示 2026-09-17 09:48:49 +08:00
fffb5dae18 chore:用户的消息,图片在上文字在下 2026-09-17 09:11:59 +08:00
8cfc144ba9 fix(frontend): 端用户附件走 inline base64 路径, 避开 MediaGuard SSRF 闸门
PR-FRONTEND-MEDIA-INLINE-BASE64 (2026-09-16)
PR-WB-MP-INBOUND-MEDIA 配套

症状: 用户在前端上传图片成功后 (OSS URL 已返回), AI Agent 仍回复
"我这边并没有收到或看到任何图片附件".

根因链路:
1. backend Upload.php::buildPublicUrl 用 request()->domain() 拼 URL
   (LAN 部署返回 http://192.168.x.x:8050/upload/..., 公网部署返回公网域名)
2. 前端把 upload 响应直接透给 AI chat attachments[] 字段
3. backend MediaGuard::urlAllowed 把 192.168.x.x 当内网 IP
   (FILTER_FLAG_NO_PRIV_RANGE) 拒绝 → attachments 整批丢
4. 静默失败: MediaGuard 在 '白名单过滤后空集' 时返回 ok=true + media=[]
   → Kefu.php 不 return error, 业务继续走
5. WB 收到 0 个 media block → Agent 看不到附件

修复:
- media-upload.js 新增 fileToBase64(filePath, opts) helper
  - H5: fetch(blobUrl) → blob → FileReader.readAsDataURL → strip data: 前缀
  - MP-WEIXIN/APP-PLUS: uni.getFileSystemManager().readFileSync(base64)
  - SIZE_LIMIT_INLINE_BASE64 = 5MB, 与后端 INLINE_MEDIA_LIMIT 对齐
  - 超限 / 失败返回 null, 调用方退回 URL 路径
- ai-chat-message.vue sendMessage 改为 await Promise.all 模式:
  - 对每个 pending item 调 fileToBase64(tempPath) 拿 base64
  - 把 data + encoding='base64' 注入 attachment
  - enrichedPendingAttachments 同时用于 readyAttachments + userMessage.attachments
  - 复用同一份 base64, 不重复读 file

后端接收 data 字段后整条链路已对齐:
- MessageMedia::normalizeInput 直接透传 data 字段
- MediaGuard::check data 非空时无条件放行, 不参与 URL 校验
- WbAgentOsClient::buildMediaBlocks (A 路) 路径 1 优先 data + image/audio
- WbAcpClient::buildMediaBlocks (B 路) data 非空也走 inline base64
- inline_media_sanity.php 39 个断言全部覆盖 (test 3.1, 3.2, 4.1, 4.2, 7.6)

测试:
- E2E test_inline_base64.py 10/10 通过
  - mock 上传返回 LAN URL 模拟 MediaGuard 拦截场景
  - 抓 /api/kefu/chat POST body, 验证 attachments[].data 是有效 PNG base64
  - magic bytes 89504E47 验证通过
- 既有 test_ai_chat_upload.py 20/20 通过 (无回归)

边界:
- >5MB 图片 fileToBase64 返回 null, 退回 URL 路径 (buildMediaBlocks 走
  路径 2 fetchInline / 路径 3 resource_link); LAN 部署下仍可能被 MediaGuard
  拦截, 但 5MB 以下的图片(主流微信/支付宝截图等)不受影响
- H5/MINIProgram/APP 三端都加了 #ifdef 编译条件
2026-09-16 17:55:49 +08:00
065fba7cf8 fix(media-upload): H5 pathToFile 修复 multipart filename 缺扩展名
PR-FRONTEND-MEDIA-UPLOAD-FIX-HOTFIX (2026-09-16)

诊断: 直接打后端 (curl) 验证后端 ext_rule 完全 OK,
所有 jpg/png/heic 标准 mime 都返回 code:0, 只有 filename=空
(无扩展名) 才会被拒. 所以问题在前端.

定位: common/js/media-upload.js pathToFile() H5 分支:
  原代码 filePath.split('/').pop() 对 blob:http://xxx/uuid
  取出 'uuid' (无扩展名)
  → new File([blob], 'uuid', ...) 没有 .jpg/.png 后缀
  → multipart Content-Disposition: filename='uuid'
  → 后端 fileExt 规则检查 'uuid' 不在白名单 → 拒绝

修复: 提取 extractExt() 到模块顶层 (之前内联在 uploadViaSts 里),
pathToFile 调用 extractExt(filePath, blob.type) 三段兜底:
  1) filePath 最后一段正则
  2) filePath.name 兜底
  3) blob.type mimeHint 反查 EXT_MIME_MAP → png/jpg/heic 等

修复后 multipart filename = 'test-img1.png' (有扩展名),
后端 ext_rule 通过, 上传成功.

E2E 验证 (verify_filename2.py):
  - 修复前: filename='test-img2' → 后端拒绝
  - 修复后: filename='test-img2.png' → 后端接受

教训: PR-FRONTEND-MEDIA-UPLOAD-FIX 加 extractExt 时只修了 STS 路径,
PHP 路径漏修; H5 blob URL + multipart 是双盲点 (前端不知道后端需要
filename 扩展名, 后端拿到 filename 才检查). 任何 file.toBlob() 或
URL.createObjectURL 出来的 file 都要在 File 构造时补扩展名.
2026-09-16 17:32:03 +08:00
f2cb69cb06 fix(ai-chat): rename _pendingIdSeq → pendingIdSeq (Vue 2 strips underscore-prefix data)
PR-FRONTEND-MEDIA-UPLOAD-FIX-HOTFIX (2026-09-16)

Bug: Vue 2 在组件实例化时过滤掉 _ 和 $ 开头的数据属性.
`_pendingIdSeq: 0` 在 data() 里定义但 this._pendingIdSeq === undefined.
onImagePicked 中 `++this._pendingIdSeq` → NaN, 所有 pendingImage 的
localId 都是 NaN, Vue 'Duplicate keys detected: NaN' 警告.

E2E 实测发现 (test_ai_chat_upload.py 20/20 通过):
- pendingImages 应有 3 项 ✓
- 每张图 localId 独立递增 (1, 2, 3) ✓
- 3 张图独立上传成功 ✓
- DOM 渲染 3 个 .pending-item + 3 个 uni-image 缩略图 ✓
- canSendPendingImage computed = true → .top-send-btn 出现 ✓
- removePendingImage(localId) → 剩 2 张 ✓
- 失败场景: uploadError 有值 + pending-retry-delete 出现 ✓

修复: data 里改 pendingIdSeq: 0, 代码里改 ++this.pendingIdSeq
教训: Vue 2 data() 里禁止用 _ 或 $ 前缀的属性名.
2026-09-16 17:14:11 +08:00
fe2d3dcfe2 fix(ai-chat): 全面修复前端图片附件 4 个 P0 + 3 个 P1 + 3 个 P2 bug
PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16)

配合后端 PR-WB-MP-UPLOAD-EXT (HEIC/AVIF/BMP/TIFF 双层修复), 前端用户上传链路全面打通:

**4 个 P0 (阻塞用户上传)**:
- pendingImage 单数 → pendingImages 数组: 选 9 张图只发 1 张 → 全部一起发
  - 每个图独立 localId 独立上传独立失败
  - 失败给删除按钮 (用户不再卡死)
- MP-WEIXIN 不压缩 HEIC → H5+MP-WEIXIN 双端都压缩
  - 微信 chooseImage 默认 compressed 不支持 HEIC, 必须本地 uni.compressImage
- getFileSize 失败兜底 0 → 失败抛错, 探测完全失败时兜底走 STS
  - 0 > 2MB = false 让 auto 模式永远走 PHP 中转, 大文件 OOM
  - 现: totallyUnknown → 兜底 STS
- guessMime 缺 HEIC 等 → 与后端 guessMimeFromPath 对齐 26 个 mime

**3 个 P1 (业务级)**:
- selectFile 微信小程序死按钮 → 加 #ifdef MP-WEIXIN 分支 (uni.chooseMessageFile/wx.chooseMessageFile)
  - 兼容检测两个 API 哪个可用
- 上传失败后 pendingImage 永远卡住 → 失败时给 删除 按钮 (pending-retry-delete)
- URL.createObjectURL 永不释放 → upload 完成后 (成功/失败都) revokeObjectURL

**3 个 P2 (优化)**:
- filePath.split('.').pop() 在 blob URL 翻车 → 用 lastSegment + 正则提取 + 兜底 'bin'
- STS MP-WEIXIN size 永远 0 → 用已知 detectedSize + pathToFile 再探测
- H5 压缩阈值 10MB → 3MB

**新增**:
- tests/media-upload-fix.test.js (12 个单测全过): guessMime 现代格式 / extractExt blob URL / decideSts 兜底 STS 决策
2026-09-16 16:52:49 +08:00
78973c99a3 chore: 2026-09-16 16:38:34 +08:00
171190c1cd chore:合并 2026-09-16 11:52:28 +08:00
7952f5a722 feat(ai-chat): frontend 媒体上传/播放全栈接通 (PR-FRONTEND-MEDIA-UPLOAD 2026-09-16)
P0 — 新建 common/js/media-upload.js (12KB)
    - uploadImage(filePath) / uploadMedia(filePath, kind) 落地
    - 此前 ai-chat-tools-panel.vue 引用但文件从未入库, 选图立即抛 "Cannot find module"
    - 12 cloud provider 分流: 4-field STS (alioss/qiniu/txcos/baidubos/qingstor/jdoss/ucloud/wyoss) vs single-URL signed PUT (huaweiobs/volcengine/awsoss/minio)
    - 端点必须 addon namespace: /<addon>/api/upload/{image|file|ossSts}, 普通 /api/kefu/upload/* 不命中 InitRoute
    - 补 docs 设计稿漏写的 `import store from '@/store/index.js'` (H5 上传需带 token)

  P1 — ai-chat-message.vue 用户附件全支持
    - P1.1 filter 不再丢 file/audio/video 消息
    - P1.2 用户气泡加 type==='file' 分支: 文件图标 + 名称 + 大小 + 上传状态
    - P1.3 sendMessage type 不再强制把 audio/video 折成 file

  P2 — AI 侧 audio 播放引擎接通
    - P2.1 previewAttachment audio 分支 → 跳 file-preview
    - P2.2 音频气泡接 uni.createInnerAudioContext: data 加 innerAudioCtx/_innerAudioSrc, 改写 playAudio/pauseAudio, beforeDestroy 必 destroy, slider 区分 change (显示) / changeend (实际 seek)
    - P2.3 file-preview.vue 加 image-viewer + audio-viewer 两个分支;inferFileType 识别 jpg/png/mp3/wav 等扩展

  P3 — sendMessageWithContent 透传 attachments 参数
    - 默认 attachments = [], 传给 sendStreamMessage/sendNormalMessage
    - tools panel 选完文件 push 到 attachments → 链到 send

  lang — zh-cn + en-us file-preview 加 4 项
    - audioUrlNotExist / audioDefaultTitle / audioPlaying / audioPaused

  docs — docs/ai-agent-integration.md (跨 PR 累积同步, 2149 行)
    - 版本基线提到 PR-WB-MP-INLINE-MEDIA (2026-09-16) 及之后
    - 加 §3.1.5 attachments.data 字段协议 (PR-WB-MP-INLINE-MEDIA)
    - 12 cloud provider 替换原"阿里云"单点 (PR-OSS-REGISTRY)
    - media-upload.js 章节补 fileToBase64 (PR-FRONTEND-MEDIA-UPLOAD)
    - 上传策略表 backend/oss_sts/auto 全替换为"云存储"措辞

  对齐后端:
    - PR-WB-MP-INLINE-MEDIA (a707b90): media data 字段
    - PR-OSS-REGISTRY (12 provider): OssProviderRegistry
    - PR-FRONTEND-MEDIA-UPLOAD (本 commit): 前端落地

  兼容性:
    - 后端未升级到 PR-WB-MP-INLINE-MEDIA 之前, attachments 不带 data 字段, 走 URL 路径 (退化到老行为, 不破)
    - 后端 oss_sts 单点 alioss 时, securityToken 不带 -SIGNED 后缀, 走 4-field STS 分支 (与 PR-OSS-REGISTRY 之前兼容)

  回归:
    - node --check media-upload.js OK
    - lang zh ESM import OK, 输出 8 个 key 全对
    - ai-chat-message.vue 11 处 PR-FRONTEND-MEDIA-UPLOAD 标记, file-preview.vue 9 处
    - 旧 chat 路径不带 attachments 走默认 [], 不破坏现有响应结构

  安全约束: 不涉及 nginx 层防盗链 / 限速
2026-09-16 11:42:18 +08:00
3f29116345 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-16 11:15:23 +08:00
3f99a1b9e4 chore:AI回答显示思考... 2026-09-16 11:14:53 +08:00
7a5de9a44f chore:微信小程序也已显示思考过程 2026-09-16 08:44:19 +08:00
b4a8415a38 chore:AI智能回答没有气泡 2026-09-15 16:52:43 +08:00
e2573cbaef chore:商品分类模板2的二级分类下拉按钮删除白色背景 2026-09-15 16:25:38 +08:00
ca772295ba chore: 商品分类模板1/2/3/4/99显示一级分类下全部二级分类商品 2026-09-15 11:11:47 +08:00
0925d28eb0 chore:后台商品分类模板可以显示全部商品 2026-09-15 10:51:50 +08:00
782a26f446 chore:AI智能显示思考过程 2026-09-14 17:49:30 +08:00
278645230a chore:回答行距变小,加上气泡,隐藏气泡下面的"..." 2026-09-14 08:57:45 +08:00
21ee661cef chore:AI智能回答特殊文字有特殊显示 2026-09-12 14:43:57 +08:00
3fffab81c8 chore:可以复制回答 2026-09-12 11:03:34 +08:00
6993582592 chore:AI智能客服改成AI智能 2026-09-12 09:25:30 +08:00
429487b1d1 chore:微信小程序真机智能客服正常 2026-09-12 09:20:51 +08:00
d15724dd2f chore:用户气泡样式 2026-09-11 17:34:43 +08:00
4cb34bf28e chore:用户可以自定义选择复制的文字 2026-09-11 17:14:42 +08:00
2daaa258a0 chore:AI智能可以复制语句 2026-09-11 14:43:23 +08:00
3892fb517f chore:隐藏智能体的任务栏 2026-09-11 10:10:52 +08:00
659308e116 chore:任务栏的图标小程序正常 2026-09-11 09:29:56 +08:00
bc127a45e8 chore:输入框样式 2026-09-11 09:15:12 +08:00
596e7cdb03 chore:输入框的更多功能加上关闭按钮 2026-09-10 17:20:10 +08:00
f09fffb7ad chore:点进智能AI页面,输入框移动到底部 2026-09-10 16:43:51 +08:00
a01587fc68 chore:修改智能AI页面 2026-09-10 16:36:25 +08:00
04cd90078b chore:后台开启商品分类模板一的三级分类按钮,如果切换一级标题时三级分类标题没有商品,就不要显示没有商品的三级标题, 2026-09-10 11:50:38 +08:00
45015cc781 chore:后台开启商品分类模板一的三级分类按钮,运行出来后图片中红色框中分类标题面的白色背景删除 2026-09-10 11:39:39 +08:00
fce62e988f chore: 2026-09-10 10:03:12 +08:00
c5f91be93b chore: 2026-09-09 17:56:54 +08:00
d0960da1d8 chore:商品分类模板1的以及分类和右侧商品上面名称栏对齐 2026-09-09 09:53:58 +08:00
8443cadba9 chore:商品分类模板2,4加购按钮显示正常 2026-09-07 16:52:27 +08:00
9739eea32a chore: 2026-09-07 15:55:24 +08:00
90c77096aa chore:商品分类模板1,2,3,4,99全部正常 2026-09-07 14:56:32 +08:00
1deb805d29 chore:商品分类样式1,2可以切换视图 2026-09-07 12:00:44 +08:00
b079442cfa chore:商品分类的1,2,3,4,99视图可以切换 2026-09-07 11:09:28 +08:00
88a0153f90 chore:商品分类的划线价在价格下面 2026-09-07 10:24:40 +08:00
50cd3081e6 chore:加购商品时购物车出现在页面下面 2026-09-07 09:56:03 +08:00
f37633525f chore:商品分类样式2 点击加购商品时去结算会出现 2026-09-05 18:23:29 +08:00
1893f6d884 chore:商品分类样式2 2026-09-05 17:37:44 +08:00
661b33b6b6 chore:商品分类样式2信这个购物车功能 2026-09-05 17:19:11 +08:00
1d8bcf7d73 chore:微信小程序表单图片和后台一致 2026-09-05 11:54:29 +08:00
aaa4faeb57 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-05 10:55:36 +08:00
2288746182 chore:微信小程序和后台表单样式一致 2026-09-05 10:54:22 +08:00
56d6d17b6a refactor(diy-form.vue): 优化横幅裁剪逻辑,调整背景位置处理以适应uni-app H5编译器 2026-09-04 18:16:13 +08:00
53e885164d refactor(diy-form.vue): 优化横幅图片处理,支持裁剪比例和手动裁栏框配置 2026-09-04 17:38:09 +08:00
e82355cf9b chore: 2026-09-04 15:39:44 +08:00
16f2053927 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-04 14:42:29 +08:00
0fbff1004c refactor(ns-newform.vue): 增加小程序环境修复,优化CSS变量定义和使用 2026-09-04 14:41:04 +08:00
75690ba6cc Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-04 13:49:14 +08:00
0506e765a9 chore: 2026-09-04 13:48:44 +08:00
acab1971ab refactor(ns-newform.vue): 优化字段样式,支持字段级控件尺寸和样式动态设置 2026-09-04 13:48:00 +08:00
f8797b9529 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221 2026-09-04 09:24:54 +08:00
11cc4f6319 refactor(ns-newform.vue): 优化字段样式,支持组件独立的间距和内边距设置 2026-09-04 09:13:25 +08:00
fc5c7e682c refactor(ns-newform.vue): 优化必填星号样式,动态计算颜色和间距 2026-09-03 17:59:22 +08:00
b2211edeab refactor(formdata.vue): update default styles and config merging logic
- Adjusted the merging order of form configuration to prioritize frontend defaults when backend configurations are absent.
- Clarified comments regarding the purpose of new visual styles and their application.
- Modified the hideInnerBanner logic to ensure consistent behavior with the updated form styles.
2026-09-03 17:50:11 +08:00
cd1ba1fbe2 chore:后台页面管理编辑-平台入驻核心权益-新增Tab页,前端运行出来可以正常滑动,Tab页正常显示 2026-09-03 16:27:30 +08:00
d2ad7b4108 chore:后台选择电话留言模式下,购物车库存销量隐藏 2026-09-03 11:22:21 +08:00
b4c47fcc26 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221
# Conflicts:
#	components-diy/diy-form.vue
2026-09-02 11:58:46 +08:00
b31c133d8e chore:表单修改边距 2026-09-02 11:44:19 +08:00
2787e73126 chore:优化表单风格逻辑,支持显式和隐式判定,确保兼容性 2026-09-02 11:14:52 +08:00
aafd888596 chore:表单横幅缩小 2026-09-02 10:51:46 +08:00
ff3c2a0d9b chore:97数字跳动的显示正常 2026-09-01 18:26:36 +08:00
e7ad9a3cb5 Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-09-01 16:29:29 +08:00
fc2b77135b chore:更新本地配置注释以提高可读性 2026-09-01 16:29:18 +08:00
33f54eb63c chore:后台数字跳动可以自定义文字大小颜色 2026-09-01 15:56:30 +08:00
a026adaec7 chore:表单样式修改 2026-09-01 09:24:09 +08:00
278d8c94f9 chore:表单样式修改表单浮于图片上方 2026-09-01 08:54:26 +08:00
f66b70c087 chore:推荐码分享按钮上移 2026-08-31 15:40:14 +08:00
c1407a84bb chore:H5登录正常 2026-08-29 18:22:10 +08:00
6ffbae0f33 chore:表单弹窗正常 2026-08-29 17:44:26 +08:00
f6038575cc chore:表单弹窗正常 2026-08-29 16:04:20 +08:00
5cdafb6f7f chore:推荐码立即分享跳转页面正常 2026-08-28 17:49:56 +08:00
7ebbdaf996 chore:微信小程序的表单多选可以垂直对齐 2026-08-28 14:13:32 +08:00
ecb0789780 chore:表单样式更新 2026-08-28 11:58:23 +08:00
e693e4273c chore:表单样式更新 2026-08-28 10:22:24 +08:00
e3171ef7ad chore:H5正常 2026-08-26 18:13:00 +08:00
3ca1ca8cd7 chore:推荐码样式新增 2026-08-26 11:44:39 +08:00
fcbbb05afe chore:表单正常 2026-08-25 18:06:35 +08:00
dd94e53d81 chore:表单提交正常 2026-08-25 17:39:03 +08:00
b8ff67aaa3 chore:提交次数 2026-08-25 11:18:43 +08:00
40a6f739d0 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221
# Conflicts:
#	.local.config.js
2026-08-24 09:56:36 +08:00
58a5a7d535 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp59 2026-08-24 09:31:08 +08:00
0e8db6f821 chore:PDF名字可以自定义 2026-08-22 16:04:33 +08:00
e6a45f6b7d chore:PDF有显示了 2026-08-22 15:55:00 +08:00
1b7cc4b679 chore:打开PDF右边新加一个分享按钮 2026-08-22 13:59:06 +08:00
876f639bb5 chore:红色按钮不乱飘了 2026-08-20 18:26:59 +08:00
02c9fa602e chore:购物车按钮正常 2026-08-20 17:51:48 +08:00
b5b27039ee feat(form): add captcha and form behavior support
实现表单行为相关功能,新增验证码输入模块,支持表单登录校验、提交次数限制、表单开放状态判断,补充多语言文案,优化空状态展示逻辑
2026-08-20 15:55:41 +08:00
8901e302e4 style: 修复配置文件缩进格式不一致问题
统一调整配置文件内所有对象的缩进样式,移除多余的空格,修正代码格式对齐问题,提升代码可读性。
2026-08-17 14:43:54 +08:00
68bcd3ae7c Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp2797
# Conflicts:
#	.local.config.js
2026-08-17 14:41:25 +08:00
9f89172829 chore: 2026-08-17 08:48:14 +08:00
ddd1ec3056 chore(gitignore): 补充 Trae IDE 临时文件的忽略规则
新增匹配根目录下所有以 .trae_ 开头的临时文件和目录,完善git忽略配置
2026-08-15 17:32:16 +08:00
d305268cb8 Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-08-15 17:29:52 +08:00
1efb866e41 style(config): 格式化本地配置文件的缩进与空格
1. 统一所有配置项的缩进风格为4空格
2. 修正多余的尾随和冗余空格
3. 添加新增的5g-1测试配置项
4. 调整注释掉的配置项格式
2026-08-15 17:29:01 +08:00
b8182a0f97 chore: 2026-08-15 14:31:01 +08:00
37463a173c chore:一级分类的不选中的样式后台可以自定义 2026-08-15 10:37:55 +08:00
422ca8cdb5 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp2797 2026-08-15 09:53:01 +08:00
f92b1fb5b7 chore: 2026-08-15 09:52:30 +08:00
a0043418c8 chore: 2026-08-15 09:46:12 +08:00
927f763d0a chore:后台可以自定义配置一级分类选中后的字体颜色和字体大小 2026-08-15 09:28:15 +08:00
69ad814985 Merge remote-tracking branch 'remotes/origin/dev/1.0' into PR-1-ai-agent-link 2026-08-15 09:27:58 +08:00
92599453c2 chore:竖版视频可以正常显示正常大小比例 2026-08-14 15:10:03 +08:00
5d7facc94d chore:竖版视频可以正常在容器里 2026-08-14 15:03:23 +08:00
f6eb1fad11 Merge branch 'dev/1.0' into PR-1-ai-agent-link 2026-08-14 14:03:49 +08:00
83b253bced chore:表单鸿蒙做更改 2026-08-14 11:21:05 +08:00
19cb332645 refactor(ai-page): 统一页面路由管理并修复AI智能体路径
1.  将硬编码的页面路径替换为PAGE_KEY_MAP常量统一管理
2.  修正AI智能体页面路径为/pages_tool/ai-agent/index
3.  优化客服跳转逻辑,避免重复注入tabBar隐藏标记
4.  为AI聊天页面添加自定义组件占位配置
2026-08-14 09:36:04 +08:00
e5406a27ba chore:苹果ios表单显示正常,商品详情的视频可以支持竖版横板视频 2026-08-14 09:09:07 +08:00
ffa170ff13 feat(ai): PR-7 前端 ai-service 按 agent_id 路由 endpoint
背景:
- 后端 aikefu 和 ai-agent 两个独立 addon (PR-6 v2.0)
- 前端 ai-chat 之前所有 API endpoint 都 hardcode 到 /api/kefu/* + /ws/aikefu
- 5 个 agent (智能客服默认 + 4 个 AI智能体) 实际上无法被前端独立路由

改动:
- 新增 resolveAddonName(agentId) -> 'aikefu' / 'aiagent'
- 新增 resolveApiUrl(apiName) -> '/api/kefu/X' / '/api/aiagent/X'
- 新增 resolveWsPath() -> '/ws/aikefu' / '/ws/aiagent'

- 全量替换 sendMessage / sendHttpStream / sendStreamMessage / generateConversationId /
  getServiceStatus / getServiceConfig / clearConversation / getConversationHistory /
  chatWithEventSource / WebSocket connect URL:
  全部用 resolveApiUrl / resolveWsPath 动态计算

- setAgentId 跨 addon 切换时自动 disconnectWebSocket (路径变了)
- 新增 getAddonName() / getApiPrefix() 测试辅助方法

后端配套 PR-8+9:
- /api/aiagent/api/Chat/chat (HTTP, 含流式 SSE)
- /api/aiagent/api/Chat/{info,health,getHistory,clearConversation,createConversation}
- /ws/aiagent WebSocket 端点 (从 aikefu WebSocket 复制改名)

路由规则:
- agent_aikefu -> aikefu addon (老路径, 默认智能客服)
- 其他 agent (knowledge / quick_reply / sales / hr) -> aiagent addon (新路径)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-13 18:30:00 +08:00
3b81ecdf98 Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp2797 2026-08-13 14:11:20 +08:00
c536fac4d2 chore:视频显示布局正常 2026-08-13 11:15:57 +08:00
475449f04e chore:视频正常上下黑边删除 2026-08-13 10:32:35 +08:00
e40b46a888 chore:视频可以播放 2026-08-13 10:20:27 +08:00
8a95b0310d feat(ai-chat): 适配浮动按钮入口隐藏底部tabBar
实现浮动按钮跳转AI聊天页时自动隐藏底部tabBar,通过__dyu标记区分入口来源:
1. 浮动按钮点击时注入__dyu=FloatBtn来源标记
2. AI聊天页根据该标记临时隐藏tabBar并在卸载时恢复
3. 兼容旧store无对应mutation的场景
2026-08-12 18:18:19 +08:00
a81386d336 refactor(components): 统一多端textarea配置与高度计算逻辑
1.  对齐ns-form和ns-newform的textarea配置参数,新增textareaRows和textareaLineHeight配置
2.  移除平台分支判断,所有平台统一使用:rows+行高计算高度的方案
3.  适配鸿蒙ArkUI原生TextArea,通过:rows控制行数,JS动态计算高度
4.  移除textarea硬编码高度,改为通过formConfig动态控制
2026-08-12 15:47:11 +08:00
b69eeba74b fix(ns-form): 适配微信小程序和H5的textarea渲染逻辑
重构了多平台textarea的渲染条件,合并了平台判断逻辑,新增rows属性配置,优化了样式适配和代码可读性
2026-08-12 15:41:06 +08:00
f656be789d feat(ai-agent): 新增AI智能体通用支持框架
1.  新增多语言文案,适配AI智能体通用场景
2.  新增AI智能体页面路由常量与跳转逻辑
3.  改造AI聊天页面支持动态agent_id和页面标题
4.  升级AI服务层,支持多agent_id自动传递
2026-08-12 15:12:00 +08:00
82139e616d chore:后台国际化可以控制查看详情按钮 2026-08-10 14:18:24 +08:00
ed6d9f563d chore:后台设置二级分类,模板1显示“查看详情”按钮 2026-08-10 13:59:44 +08:00
3a8ad7d871 refactor(diy-recommend-code): 动态 style 全改用 $util.objToStyle 输出 px
问题:
- 后端 diyData 数值语义是 px(后端 wap/design.html 都按 px 输出),
  但前端 px2rpx() 之前 *2 转 rpx,导致商家设置 8px 实际渲染 16px
- 鸿蒙元服务对动态 style 中的 rpx 解析有问题

方案:
- px2rpx(val) 改为返回原值(当作 px 用)
- 17 处动态 :style="{...}" 全部改成 :style="$util.objToStyle({...})"
  用 objToStyle 工具方法生成标准 CSS 字符串,跨平台兼容
- 34 处 px2rpx() + 'rpx' 拼接改成 + 'px'
- 8 处 padding/border 中的 'rpx ' / 'rpx solid' 也同步改成 'px'

静态 'XXrpx' 字符串(写在模板里的)保留,uniapp 静态模板
支持 rpx,不影响。

后端保持原状不动(数值 px 语义,与 wap/design.html 一致)。
这样前后端语义统一,商家在 diyData 改数值时:
- H5/小程序: 静态 rpx 自适应屏幕
- 动态部分: 按 px 渲染,商家设计器里的 px 值精确生效
- 鸿蒙元服务: 全部用 px,无解析问题
2026-08-08 15:43:13 +08:00
ec960a29c4 fix(diy-recommend-code): 复制按钮 style 单位 rpx 改 px 适配鸿蒙元服务
之前复制按钮用 rpx 单位:
- border:2rpx solid #xxx
- font-size:24rpx
- height:60rpx / padding:0 32rpx / border-radius:30rpx / gap:8rpx

在 H5/微信小程序没问题,但鸿蒙元服务对动态拼接 style 中的 rpx
解析异常,渲染尺寸可能错乱。

修复: rpx 全改成 px(1rpx = 0.5px,即原数值 / 2):
- border:1px solid #xxx     (原 2rpx)
- font-size:12px            (原 24rpx)
- border-radius:15px        (原 30rpx)
- padding:0 16px            (原 0 32rpx)
- height:30px               (原 60rpx)
- gap:4px                   (原 8rpx)

horizontal 预设:
- border-radius:16px        (原 32rpx)
- padding:0 12px            (原 0 24rpx)
- height:32px               (原 64rpx)
- gap:3px                   (原 6rpx)

这样 4 处复制按钮 + 文字节点所有动态 style 数值都用 px,
鸿蒙元服务全平台兼容。
2026-08-08 15:01:52 +08:00
8312de5d09 refactor(diy-recommend-code): 复制按钮用 $util.objToStyle 生成 style
之前复制按钮用字符串拼接方式:
  :style="'...static...' + method() + '...static...'"

虽然字符串拼接全平台兼容,但写法繁琐,且 camelCase/kebab-case
容易写错(camelCase 用驼峰,字符串里要手写 - 转换)。

改成调用 common/js/util.js 中已有的 objToStyle 方法:
  :style="$util.objToStyle(copyBtnStyleObj(...))"

copyBtnStyleObj(preset, textOnly) 返回对象:
- 边框/背景/border-color: 跟随后端 diyData.codeColor
- 文字色/字号/字重: 跟随后端 codeColor(可选 textOnly=true 时)
- 其余布局属性: 由 preset 参数覆盖(4 个预设各自差异)

$util.objToStyle 自动 camelCase → kebab-case(如 alignItems → align-items)
转换后拼接为标准 CSS 字符串,全平台兼容。

好处:
- 写法更清晰(对象语法)
- 不用手写 kebab-case
- 与项目其他地方统一风格(common/js/util.js 已有此工具)
2026-08-08 14:57:39 +08:00
5833a244de refactor(diy-recommend-code): 复制按钮 style 改用字符串拼接兼容多端
之前 4 个预设(gradient/minimal/card/horizontal)的"复制推荐码"按钮
用 :style="{...}" 对象语法 + value.codeColor || '#xxx' 三元拼接。

对象语法在 H5 / 小程序正常,但在鸿蒙元服务等部分平台对嵌套对象/
三元拼接的支持有限,容易渲染异常。

修改:
- 新增 methods:
  copyBtnBorderStyle()  → 返回 '2rpx solid #xxx'
  copyBtnTextColor()    → 返回 '#xxx'
- 4 处复制按钮改成 :style="'...字符串...' + 方法() + '...字符串...'"
  风格,只把边框/文字色动态部分用方法返回,
  其余布局属性(display/border-radius/padding/gap 等)写成静态字符串。
- 字符串拼接方式在 H5 / 小程序 / APP / 鸿蒙元服务全平台表现一致

copyBtnBorderStyle() 与 copyBtnTextColor() 都从 diyData.codeColor 读取,
商家改 codeColor 时所有预设的复制按钮边框/文字色都跟随变化。
2026-08-08 14:51:57 +08:00
92fe95d131 feat(diy-recommend-code): 复制按钮颜色跟随后端 diyData.codeColor
之前 gradient 和 horizontal 预设的"复制推荐码"按钮边框/文字颜色
是写死的:
- gradient: #DC143C
- horizontal: #FF8F00

minimal 和 card 已经跟随后端 codeColor 字段。统一所有预设都跟随
codeColor,让商家可以在后端 diyData 调整颜色。

修复:
- gradient 复制按钮: 边框/文字改用 '2rpx solid ' + (value.codeColor || '#DC143C')
  文字色改用 value.codeColor || '#DC143C'
- horizontal 复制按钮: 边框/文字改用 '2rpx solid ' + (value.codeColor || '#FF8F00')
  文字色改用 value.codeColor || '#FF8F00'

这样 4 个预设风格统一,商家改 codeColor 时所有预设的复制按钮边框/
文字色都会跟随。
2026-08-08 14:47:52 +08:00
07718235c3 Revert "fix(diy-recommend-code): horizontal 预设"立即分享"颜色对齐后端 wap.html"
This reverts commit 183181a15d.
2026-08-08 14:42:04 +08:00
183181a15d fix(diy-recommend-code): horizontal 预设"立即分享"颜色对齐后端 wap.html
对比后端 PHP wap.html(第 174 行):
  background:linear-gradient(90deg,#FF9800 0%,#FF4444 100%);
  box-shadow:0 2px 6px rgba(255,68,68,0.25);

前端 horizontal 预设的"立即分享"按钮之前用黄橙渐变
  linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)

不一致。改为后端的橙红渐变:
  linear-gradient(90deg,#FF9800 0%,#FF4444 100%);
  box-shadow 也改为 rgba(255,68,68,0.25)

影响两个分支:
- 小程序 button 路径(button path 行 298)
- H5 view 路径(view path 行 303)

其他 3 个预设(gradient/minimal/card)颜色与后端已对齐,无需调整。
2026-08-08 14:38:29 +08:00
a4f2c81528 fix(diy-recommend-code): 海报背景 + 分享链接绘制
问题 1: 海报整张画成蓝色渐变
原因: _drawPosterBg 用 diyData.bgColorStart/End 当整个画布背景,
但这两个字段实际是给"卡片"用的渐变色,不是给整张海报用的。

修复: _drawPosterBg 只用 bgColor(浅色)填充整张画布;
bgColorStart/End 留给卡片本身(推荐码区)的样式。

问题 2: 后端 showLink=true 时没有绘制分享链接

修复: 在标题副标题后,推荐码区前加一行分享链接
(读 v.shareLink || this.shareLink,截断 36 字符)。
showLink=false 时不画,blockY 保持 88;
showLink=true 时画一行,blockY 下移到 104,推荐码区跟着下移
避免重叠。

drawQrcodeAndExport 的 qrY = blockY + blockH + 24 自动跟随,
底部提示也跟随,整张布局保持完整。
2026-08-08 14:05:11 +08:00
30b66ad7b3 feat(diy-recommend-code): 海报颜色布局改为读取 diyData 动态适配
之前 generateSharePoster 颜色和布局都是 hardcode(米黄区、
黄橙渐变、FFC107 等)。后端改 stylePreset 后分享图不会跟随变化。

修改: 抽出 palette 对象,所有视觉参数都从 diyData.value 读:
- bgColor / bgColorStart / bgColorEnd / borderColor
- borderRadius / padding
- titleColor / titleFontSize
- codeColor / codeFontSize
- accentColor / textColor

新增方法:
- _drawPosterBg(ctx, W, H, palette)
  优先用 createLinearGradient 画 bgColorStart→bgColorEnd 渐变,
  旧 canvas 不支持则 fallback 到 bgColor 单色
- _drawPosterCard(ctx, W, H, palette, stylePreset)
  按 stylePreset 区分装饰:minimal/card/horizontal 右上角加 🎁 emoji
  gradient 不加装饰

后续如需更多差异,只在这两个方法里扩展即可,不影响主流程。
2026-08-08 13:58:55 +08:00
077fac40c2 fix(diy-recommend-code): 兼容 setFontWeight 旧 canvas API
用户日志: TypeError: c.setFontWeight is not a function
原因: setFontWeight 是微信小程序新版 type=2d canvas 专有 API,
旧版不支持。运行时 ctx.setFontWeight 不存在,调用报错。

修复: 先用 typeof 检查,存在则调用;不存在则用
ctx.font = 'bold 36px sans-serif' 字符串设置字重(旧 API 支持)。
2026-08-08 12:03:46 +08:00
10d45b1c3b fix(diy-recommend-code): generateSharePoster 等方法移到 methods 块
问题: 用户日志显示 "TypeError: this.generateSharePoster is not a function"。
原因: generateSharePoster / _exportCanvas / _roundRect / _downloadImage
等方法之前被定义在 methods 块外的 export default 对象上(与
onShareAppMessage 这种生命周期钩子同级),Vue 不会自动绑定它们到
组件实例,导致 this.xxx 找不到。

修复:
- 删除 methods 块外的那 5 个方法的旧定义
- 重新加到 methods 块内(放在 goLogin 后,methods 块关闭 } 之前)
- onShareAppMessage / onShareTimeline 是小程序生命周期钩子,
  必须留在 export default 对象上,不能进 methods(保留不动)

验证:
- H5 测试 isH5Platform=true,提前 return 不进入 generateSharePoster,正常
- 小程序下 this.generateSharePoster 现在能找到方法
- loadCode 成功后 _prepareSharePoster 调用正常
2026-08-08 12:02:11 +08:00
60dc054383 fix(diy-recommend-code): canvas 海报生成加详细调试日志 + ctx.draw 包裹
问题: 小程序下 generateSharePoster "开始调" 后无 "resolved",
卡在 canvas 绘制或导出步骤。

修复 + 调试:

1. generateSharePoster 流程加详细日志:
   - 进入
   - 准备 createCanvasContext
   - createCanvasContext 返回值
   - qrcodeRenderUrl 当前值
   - drawQrcodeAndExport 进入
   - ctx.draw(false, cb) 准备
   - ctx.draw callback 触发

2. 关键修复: ctx.draw(false, callback) 包裹导出
   - 旧代码:画完 fill() 后直接调 _exportCanvas(canvas 还是空的)
   - 新代码:画完后 ctx.draw(false, () => _exportCanvas())
     在 callback 里导出真正渲染完的 canvas

3. _exportCanvas 简化:
   - 不再走 createSelectorQuery(可能挂起)
   - 直接用 canvasId 调 canvasToTempFilePath
   - 加 5s 超时兜底,避免永远卡住

4. _prepareSharePoster 加 isH5Platform 短路:
   - H5 下 canvas 模板不渲染,createCanvasContext 会失败
   - 短路后不调用 generateSharePoster,避免无效报错

请在微信开发者工具里再次测试,看哪一行日志卡住
(预期: 进入 → createCanvasContext 返回 → qrcodeRenderUrl →
drawQrcodeAndExport → ctx.draw 准备 → ctx.draw callback → _exportCanvas → 成功)
,把卡住那一行的日志贴出来。
2026-08-08 11:52:57 +08:00
ef8c7568ac chore(diy-recommend-code): 海报预生成流程加调试日志
增加 _prepareSharePoster 流程日志:
- _prepareSharePoster 被调用 + isH5Platform/code
- 开始调 generateSharePoster
- generateSharePoster resolved + posterPath
- 写 storage 完成

方便在微信开发者工具/真机控制台调试为什么没看到
[推荐码分享]海报预生成完成 日志,定位是 _prepareSharePoster
没被调用、generateSharePoster 抛错、还是写 storage 失败。
2026-08-08 11:48:55 +08:00
551d6c103d fix(diy-recommend-code): 修复小程序分享图仍为全屏截图
之前的方案是用户点"立即分享"按钮时,onShareClick 异步调
generateSharePoster() 生成海报后写 storage。但这有问题:

微信小程序 <button open-type="share"> 流程:
1. 用户点 button → 同步触发页面级 onShareAppMessage
2. onShareAppMessage 同步返回 shareData(必须含 imageUrl)
3. 微信用这个 imageUrl 展示分享面板

onShareClick 的异步 generateSharePoster 永远来不及,onShareAppMessage
读取 storage 时海报还没生成,所以微信用全屏截图。

修复:预生成海报。
- 在 loadCode 成功回调里,推荐码拿到后立即调 _prepareSharePoster()
  异步生成海报,生成完写入 _recommendShareData storage
- loadQrcodeIfNeeded 成功回调里也再调一次,确保带二维码海报覆盖
  不带二维码的占位版

_prepareSharePoster():
- #ifdef MP-WEIXIN 包住,仅小程序执行
- 调 generateSharePoster 拿 tempFilePath
- 写入 _recommendSharePoster 缓存 + _recommendShareData 当前值
- 用户点分享时,storage 已经有最新海报,onShareAppMessage
  读取后返回 imageUrl,微信用这个图展示分享面板
2026-08-08 11:46:23 +08:00
4a92d9bec2 feat(diy-recommend-code): 微信小程序分享海报自动生成(仅推荐码组件)
之前微信小程序点击"立即分享"会触发 onShareAppMessage,
默认 imageUrl 用 diyData.shareImageUrl(为空时微信截全页)。
问题是分享图片是整张页面,而不是推荐码组件本身。

新增 generateSharePoster():用 uni.canvas 绘制一张仅含推荐码组件内容
的 375x480 海报:
- 白底 + 顶部标题
- 米黄背景区 + 推荐码大字
- 二维码(如有 qrcodeRenderUrl)
- 底部提示文字

并修改 onShareAppMessage:
- 小程序环境(!isH5Platform):返回 Promise,等待 canvas 生成完成后
  用临时文件路径作 imageUrl
- 失败回退到 diyData.shareImageUrl
- H5 环境:保持原逻辑(不走 canvas)

新增辅助方法:
- _exportCanvas():canvas 转临时文件路径(支持 type=2d 和旧版 API)
- _roundRect():绘制圆角矩形路径(canvas 2d 不直接支持 roundRect 时的兜底)
- _downloadImage():网络图片下载到临时路径(uni.downloadFile Promise 化)

模板:
- 在 root view 内加一个隐藏 canvas (canvas-id="sharePosterCanvas"),
  仅小程序环境渲染,固定在视口外 left:-9999px top:-9999px
2026-08-08 11:39:25 +08:00
ff4340c3a9 style(diy-recommend-code): horizontal 预设按钮行两端对称对齐
horizontal 预设的"复制推荐码"和"立即分享"按钮之前是错落布局
(align-items:flex-end),且两端外边距不一致(padding 不统一)。
改为两端对称对齐:

- 父级 view:
  align-items:center (垂直居中,不再错落)
  padding:0 8rpx (两端外边距对称)
- 复制按钮:
  display:inline-flex (按内容自适应宽度)
  border:2rpx solid #FF8F00 (固定橙色边框,不读 diyData.codeColor)
- 立即分享按钮 (button path):
  position:relative; left:0; right:0; margin:0; padding:0
  (修复小程序 button 默认偏移问题,与其他预设 button path 一致)

效果:
- H5: 复制按钮左边缘距卡片左边 = 分享按钮右边缘距卡片右边 (各 8rpx)
- 小程序: 立即分享按钮不再向左偏移,与复制按钮保持视觉对称
- 两个按钮高度统一,垂直居中对齐
2026-08-08 11:29:04 +08:00
4303a93278 style(diy-recommend-code): card 预设同步采用 100% 宽 + 居中结构
card 预设的"立即分享"按钮之前是 inline-block + padding 自适应宽度,
与其他预设不一致。改为和 gradient / minimal 预设一致的"双层结构":

- button path (小程序/APP):
  外层 button: position:relative; left:0; right:0;
  margin:16rpx 0 0 0; width:100%; display:block; box-sizing:border-box;
  内层 view: display:block; width:100%; height:76rpx;
  background:#FFFFFF; border:2rpx solid #FF6B6B; border-radius:38rpx;
  text-align:center;

- view path (H5):
  外层 view: margin-top:16rpx; width:100%;
  内层 view: display:block; width:100%; height:76rpx;
  同上样式

card 风格保持"白底红边框"设计,不读 diyData.buttonBgColor。

效果:
- 按钮 100% 卡片宽,与 gradient / minimal 一致
- 小程序 button 默认偏移问题(position:relative + left:0 + right:0)同步修复
- 商家在 4 个预设下看到一致的全宽分享按钮布局
2026-08-08 10:35:12 +08:00
12e4493a17 style(diy-recommend-code): minimal 预设同步采用 100% 宽 + 居中结构
minimal 预设的"立即分享"按钮之前是 inline-block + padding 自适应宽度,
与其他预设不一致。改为和 gradient 预设一致的"双层结构":

- button path (小程序/APP):
  外层 button: position:relative; left:0; right:0;
  margin:16rpx 0 0 0; width:100%; display:block; box-sizing:border-box;
  内层 view: display:block; width:100%; height:76rpx;
  background:linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%);
  border-radius:38rpx; box-shadow; text-align:center;

- view path (H5):
  外层 view: margin-top:16rpx; width:100%;
  内层 view: display:block; width:100%; height:76rpx;
  同上渐变样式

效果:
- 按钮 100% 卡片宽,与 gradient 一致
- 小程序 button 默认偏移问题(position:relative + left:0 + right:0)同步修复
- 商家在 4 个预设下看到一致的全宽分享按钮布局
2026-08-08 10:29:31 +08:00
c94e214d05 style(diy-recommend-code): 优化分享按钮布局样式
调整分享按钮的内外层元素排版,统一宽高对齐方式,修复按钮展示偏移问题,提升多端视觉一致性
2026-08-08 10:11:14 +08:00
afede79047 fix(diy-recommend-code): 小程序 button 路径同步采用双层居中结构
之前 H5 路径(v-else-if 走 view)已修复为双层结构
(外层 text-align:center + 内层 inline-block),但小程序/APP
路径仍保留旧的「display:flex + width:100% + height:80rpx +
box-shadow」组合,在 webview 中可能存在同样问题。

为了让小程序下居中也稳定,4 个预设的 <button open-type="share">
也改为双层结构:
- 外层 button: text-align:center;background:transparent;
  border:none;padding:0;line-height:normal;
  保留 open-type="share" 让微信小程序原生分享能力依然有效
- 内层 view: display:inline-block; 自带 padding+渐变+阴影样式

horizontal 预设的 button (行 298) 是水平按钮行右侧窄按钮,
额外加 display:inline-block 让其按内容撑开(不被推到 100% 宽)。

这样:
- H5: view fallback(text-align:center)→ 居中
- 小程序: button + 内联 view(双层结构)→ 居中
- APP: 与小程序走同一份代码 → 居中

注意:本次修改的 HTML 结构对小程序的 onShareAppMessage 钩子
无影响(uniapp 仍按 v-if 条件编译 + open-type="share" 自动桥接)。
2026-08-08 09:36:57 +08:00
ab727eef1d fix(diy-recommend-code): H5 立即分享按钮居中问题修复
之前 H5 平台下 view fallback 的样式:
  display:flex; justify-content:center; align-items:center;
  width:100%; height:80rpx; ...
在某些情况下未生效(可能与 box-shadow / border-radius / box-sizing
互动有关),导致按钮在 H5 中贴左显示。

修复方案:改用经典的双层结构:
- 外层 view: text-align:center; (行内元素自动居中)
- 内层 view: display:inline-block; width 按 padding 自适应
这种结构 uniapp H5 / 小程序 / APP 各端都稳定支持。

修改点:
- gradient 预设(L119): 黄橙渐变胶囊
- minimal 预设(L187): 红橙渐变胶囊
- card 预设(L238): 白底红边胶囊
- horizontal 预设(L295): 不变(靠右浮动按钮,已有 flex-end 对齐)
- gradient 复制按钮父级(L106): 同步改 text-align:center + inline-flex
  (修复 H5 下 fit-content + flex 在某些机型失效导致按钮偏左)

影响:仅修改 H5 平台的 view fallback 样式(实际渲染层),小程序/APP
端 button 路径未改动。
2026-08-08 09:19:23 +08:00
ee050f5df9 chore(.gitignore): 归档本地测试文件到 _test_archive/
将之前调试时遗留的 43 个测试脚本/截图/对比图/草稿文件
移动到 _test_archive/ 子目录,并加 .gitignore 规则使其不入仓。

规则:
- _test_archive/ : 整个归档目录
- _test_*.png / _test_*.html : 根目录兜底
- _compare*.png / _compare*.py
- _auth_*.json
- _commit_msg.txt
- /check_button.py

_test_v6_clean.py 同时修改,所有截图路径改为 OUT_DIR = __file__ 目录,
保证未来运行测试时产物仍归档到 _test_archive/ 而不是污染根目录。
2026-08-07 18:28:12 +08:00
855fbb2fe5 Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-08-07 18:24:13 +08:00
b706e67e82 chore(gitignore): add test archive directory to gitignore
新增本地测试脚本与产物归档的git忽略规则,避免将测试临时文件提交到公共仓库
2026-08-07 18:24:08 +08:00
557addb76b Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into Branch_24cb3a09 2026-08-07 18:14:15 +08:00
dacc25b281 chore:微信小程序推荐码登录按钮正常弹出手机号授权 2026-08-07 18:13:35 +08:00
ec4fb3e688 feat(diy-recommend-code): 二维码容器支持尺寸/边框/背景/圆角/内边距可配
新增 6 个 props 字段:
- qrSize: 数字,默认 200,二维码图片宽高(rpx)
- qrBoxBorderColor: 颜色,默认 '',容器边框色(空=按预设默认)
- qrBoxBorderWidth: 数字,默认 0,边框宽度(rpx,0=按预设默认)
- qrBoxBorderRadius: 数字,默认 0,容器圆角(rpx)
- qrBoxBackground: 颜色,默认 '',容器背景色(空=透明)
- qrBoxPadding: 数字,默认 0,容器内边距(rpx)

修改点:4 个预设(gradient/minimal/card/horizontal)的 showQR 块
不再用硬编码 <image width=200rpx>,改为:
  <view style="<动态 width/height/border/borderRadius/bg/padding>">
    <image style="width:100%;height:100%">
  </view>
保证缩放、边框、背景、圆角、内边距都能响应 props 字段。

后端同步:design.html / wap.html 新增 nc.qrSize / nc.qrBoxBorderColor /
  nc.qrBoxBorderWidth / nc.qrBoxBorderRadius / nc.qrBoxBackground /
  nc.qrBoxPadding 字段并应用。

注:单位上,前端 rpx;后端 px。两者各自适配,与现有 fontSize/
  borderRadius/titleFontSize 等字段命名一致。
2026-08-07 18:06:25 +08:00
75e40c752b feat(diy-recommend-code): 复制推荐码按钮支持显示/文案自定义
新增 props 字段:
- showCopyButton: 布尔,默认 true,控制"复制推荐码"按钮显示
- copyButtonText: 字符串,默认 "复制推荐码",自定义按钮文案

修改点:
- props default: 新增 showCopyButton: true、copyButtonText: '复制推荐码';
                  移除未使用的 placeholderCopyText、placeholderShareText、
                  showButton,统一用 showShareButton 名称
- 4 个预设(gradient/minimal/card/horizontal)的"复制推荐码"按钮
                  包裹层加 v-if="value.showCopyButton !== false"
                  按钮文案改为 {{ nc.copyButtonText || '复制推荐码' }}

后端同步: design.html / wap.html 同步加 nc.showCopyButton / nc.copyButtonText 字段。
2026-08-07 17:53:26 +08:00
24df6f0dd5 chore(diy-recommend-code): 同步 titleColor 默认值与后端 design.html 对齐
后端 design.html 的 titleColor fallback 是 '#1A1A1A',4 个预设都使用这个值。
前端 props default 之前是 '#333333',导致 DIY 后台预览(design.html)和
H5 实际渲染(前端组件)标题颜色不一致。

修复:前端 titleColor 改为 '#1A1A1A',与后端对齐。

注意:前端 H5 渲染的样式仍然优先读取 props.value.titleColor(来自后端 diyData),
只有当后端没有传 titleColor 时才落到这个默认值,所以对线上渲染无破坏。
2026-08-07 17:40:44 +08:00
a8ab093eae fix(diy-recommend-code): Minimal 风格立即分享按钮改红橙渐变胶囊
之前后端 diyData.buttonBgColor 默认 #E4393C 覆盖了 Minimal 风格的
linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%) 默认值,导致「立即分享」
按钮显示为红色实心,与设计参考图不一致。

调整内容:
- 立即分享按钮固定走红橙渐变 linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%)
  不再读 diyData.buttonBgColor(与 Card/Gradient/Horizontal 风格保持统一)
- H5 端 view fallback 同步(与已有 H5 风格统一处理)

影响范围:仅 Minimal 极简风格(stylePreset === 'minimal')。
2026-08-07 17:28:15 +08:00
7f4b1d6d13 fix(diy-recommend-code): Horizontal 风格立即分享按钮改黄橙渐变胶囊
之前后端 diyData.buttonBgColor 默认 #E4393C 覆盖了 Horizontal 风格的
`linear-gradient(90deg,#FF9800 0%,#FF4444 100%)` 默认值,导致「立即分享」
按钮显示为红色实心,与设计参考图不一致。

调整内容:
- 立即分享按钮固定走 linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)
  不再读 diyData.buttonBgColor(与 Gradient 风格保持统一)
- 阴影色从 rgba(255,68,68,...) 改为 rgba(255,143,0,...) 与渐变色一致
- H5 端 view fallback 同步(与 Card / Gradient 风格统一处理)

影响范围:仅 Horizontal 横向风格(stylePreset === 'horizontal')。
2026-08-07 17:24:31 +08:00
1420b7435e fix(diy-recommend-code): Gradient 风格立即分享按钮改胶囊形 + 黄橙渐变
之前后端 diyData.buttonBgColor 默认 #E4393C 会覆盖 Gradient 风格的
linear-gradient 默认值,导致「立即分享」按钮显示为红色实心。

调整内容:
- 复制按钮顶部距 12rpx → 16rpx(更均匀)
- 立即分享按钮 marginTop 20rpx → 16rpx(紧凑布局)
- 立即分享按钮圆角 16rpx → 40rpx(胶囊形)
- 立即分享按钮固定走 linear-gradient(90deg,#FFC107 0%,#FF8F00 100%),
  不再读 diyData.buttonBgColor(避免被后端默认色覆盖)
- H5 端 view fallback 同步(与 Card 风格统一处理)

影响范围:仅 Gradient 渐变风格(stylePreset === 'gradient')。
2026-08-07 17:21:12 +08:00
8b331e53d3 fix(diy-recommend-code): Card 风格立即分享按钮固定「白底红边框」
之前 Button 背景色由 diyData.buttonBgColor 决定,后端默认 #E4393C 导致
Card 风格的「立即分享」按钮显示为红色实心,与设计参考图不一致。

调整内容:
- props default 中 buttonBgColor 默认值改为空字符串
- 新增 isH5Platform 状态(条件编译 H5 段在 created 中标记)
- H5 端用 view 替代 button 触发分享,避开浏览器 button 默认样式
- 小程序/APP 端保留 button 以触发 open-type="share"
- Card 预设的「立即分享」按钮固定为白底 + 红边 + 红字设计

影响范围:仅 Card 卡片风格(stylePreset === 'card')。
2026-08-07 17:16:52 +08:00
10fd785b4c refactor(formdata): 适配H5端保留原生导航栏
调整自绘导航栏逻辑,仅在非H5端渲染自定义导航栏,补充H5端相关注释说明,修正样式代码位置
2026-08-07 16:45:14 +08:00
2c0b8ed076 docs(formdata): add notes about show_home btn effective scope
补充说明show_home参数仅在custom导航栏端生效,H5端忽略该参数
2026-08-07 16:25:19 +08:00
ab8625ebaf feat(form): add custom navigation bar for form page across multiple platforms
适配APP、微信小程序、华为快应用和鸿蒙元服务,新增自定义导航栏,支持返回和首页按钮,修正多端导航栏适配逻辑
2026-08-07 16:22:50 +08:00
bbef0ecf55 feat(util): add coerceBool function for parsing URL query booleans
添加专门用于处理URL查询参数的布尔值转换函数,解决直接使用Boolean转换字符串'false'、'0'时不符合预期的问题,兼容多种合法的布尔值参数写法。
2026-08-07 16:09:02 +08:00
671c350d95 feat(diy-recommend-code): 为推荐码组件添加可定制化样式配置
1.  支持自定义标题字体大小、颜色,推荐码字体大小和颜色
2.  支持自定义卡片圆角、内边距
3.  支持自定义分享按钮背景色、文字颜色
4.  新增分享按钮显示控制、占位推荐码和换码文案配置
5.  统一将硬编码样式替换为动态绑定的可配置样式
2026-08-07 15:00:52 +08:00
2d19a653c9 refactor(form): remove unused back home button and related code
移除了表单页面中不再使用的返回主页按钮、对应的国际化文案和重置表单方法,清理冗余代码
2026-08-07 14:36:28 +08:00
5f60504c75 chore: 2026-08-07 11:11:38 +08:00
289e582ba1 refactor(form): 调整代码缩进与格式,优化提交逻辑
统一模板缩进为制表符,移除冗余日志,将提交数据内联至请求参数以精简代码结构
2026-08-07 10:35:26 +08:00
c26280a4d3 refactor(form): 重构提交逻辑以支持跨端统一接管
diy-form 组件将提交事件机制改为函数 prop (onSubmit) 接管,避免 $listeners 在 MP 端不可用的问题。
formdata 页面使用 bind 预绑定 this,防止子组件调用时上下文漂移。
新增防重复提交标记复位逻辑,优化网络失败时的重试体验。
2026-08-07 10:31:57 +08:00
619ca3a236 chore:微信小程序可以分享给好友表单 2026-08-06 16:52:41 +08:00
c35d0e2505 chore:微信小程序分享给好友和微信分享功能一样 2026-08-06 16:31:59 +08:00
a6e9176dbf chore:推荐码4 种样式 2026-08-06 15:03:29 +08:00
f4517be6c3 chore :推荐码样式123 2026-08-06 14:03:24 +08:00
408c40fbe9 chore:修改同意并获取推荐码页面 2026-08-06 09:57:56 +08:00
b46dc248d5 chore:去登录按钮和上面登录注册一样跳转 2026-08-06 09:39:22 +08:00
1fb2b470da chore:同意按钮改颜色 2026-08-06 09:07:57 +08:00
81ff205d2c chore:我的页面登录后显示同意获取推荐码 2026-08-06 08:56:50 +08:00
1b3dd41a4b chore:样式4正常 2026-08-05 17:17:45 +08:00
670d3f99fc Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into Branch_24cb3a09
# Conflicts:
#	.local.config.js
2026-08-05 15:50:36 +08:00
eb2839eeb8 chore:微信小程序分享链接 2026-08-05 15:48:05 +08:00
b0f7c7a15c chore:样式134推荐码居中 2026-08-05 15:02:50 +08:00
f1487e60bb chore: 2026-08-05 14:23:29 +08:00
74c24d084e chore:推荐码样式2立即分享按钮和推荐码对齐 2026-08-05 14:15:27 +08:00
5e8a1a48dd chore:删除棕色小圆点 2026-08-05 14:05:58 +08:00
66deecdcf8 chore:推荐码4可以正常显示 2026-08-05 11:48:34 +08:00
37d72381c7 chore:推荐码2的立即分享按钮正常 2026-08-05 11:09:20 +08:00
be40bb19b3 fix(ns-form): 修复微信小程序textarea条件编译缩进错误
调整了微信小程序和其他平台textarea的条件编译代码缩进,修正了模板语法嵌套错误,确保编译逻辑正确执行
2026-08-05 11:07:43 +08:00
157a7b4e16 fix(ns-form): 修复微信小程序textarea显示和滚动问题
针对微信小程序原生textarea,改用固定高度176rpx替代auto-height,解决无限扩展遮挡组件的问题,同时优化滚动条拇指比例,提升交互体验
2026-08-05 11:01:04 +08:00
9d187bb8a4 chore:分支9 切换的新分支,把4个推荐码样式改了,但不完全可以 2026-08-05 09:57:09 +08:00
d4326bc827 chore(config): add local 192.168.197.1 config and switch default env
1. 新增192.168.197.1:8050的本地开发配置项
2. 调整默认启用的环境配置为local-1
3. 修复package.json缩进格式并新增对应局域网调试的H5打包配置
2026-08-04 16:19:19 +08:00
24cb3a096d chore:正常运行 2026-08-04 14:20:37 +08:00
1610f3f75d chore:可以复制链接自动更新 2026-08-04 11:18:10 +08:00
837bfbfd77 chore:链接可以复制 2026-08-04 10:21:37 +08:00
e24a6b25f2 chore:邀请码可以显示 2026-08-03 17:36:50 +08:00
318ed4028e chore 2026-08-03 16:29:01 +08:00
1cda06573e refactor: 移除旧的邀请码来源追踪逻辑
1. 删除App.vue中全局邀请码持久化逻辑与相关工具函数
2. 简化http请求的方法与请求头处理逻辑
3. 移除diy-form组件内的邀请码暂存、提交与展示逻辑
4. 清理不再使用的工具类邀请码辅助函数
2026-08-03 16:24:18 +08:00
be1e175471 chore: 2026-08-03 15:34:43 +08:00
0598f97efe chore:修改了会员中心页面弹出【网络异常,请稍后重试】,无法获取推荐码。 2026-08-03 14:55:36 +08:00
cd91ff9d49 chore:邀请码初步更改 2026-08-03 14:19:21 +08:00
e01ba29604 fix(鸿蒙兼容): 修复商品详情页骨架屏常驻问题
1. 兼容后端不返回goods_promotion字段的场景,避免直接取值抛错
2. 替换鸿蒙元服务下不可靠的nextTick和延迟关闭逻辑,改为同步关闭骨架屏,解决数据返回后骨架屏常驻的问题
2026-07-31 16:52:16 +08:00
ca60948fcd chore:原来的购物车+收藏按钮隐藏 2026-07-31 16:19:45 +08:00
beaa330651 fix(forms): 修复单选多选组布局样式兼容问题
1. 为ns-newform和ns-form的单选/多选组添加内联样式属性`_optionLayoutStyle`
2. 预计算垂直/流式布局的flex样式,解决跨端渲染兼容问题
3. 调整本地配置文件的启用项注释
2026-07-31 13:55:49 +08:00
a891e4abf9 feat(ns-form,ns-newform): add option layout configuration for radio/checkbox groups
add vertical and wrap layout options for form option groups, support passing option_layout field in form items to control arrangement style, default is wrap auto wrap layout
2026-07-31 11:39:24 +08:00
de6a76e91b feat(form): 统一表单组件样式并新增配置项
1.  新增标签字重、自动宽度上限、输入框边框/背景色等配置项
2.  统一ns-form、ns-newform和diy-form的输入框样式与默认值
3.  优化标签宽度计算逻辑,添加自动宽度上限防止布局溢出
4.  适配多端输入框样式,添加聚焦态交互效果
2026-07-31 11:10:41 +08:00
eed766366d fix(ns-form,ns-newform): 优化文本输入框默认值处理逻辑
针对Text和Textarea组件,当placeholder为空字符串时不再自动设置默认空值,保留用户输入的空状态
2026-07-31 10:19:47 +08:00
ed944ee192 chore(mp-harmony): vue.config.js IIFE 加 UNI_PLATFORM 判断, 只在鸿蒙场景跑
背景:
  之前 vue.config.js 顶层 IIFE 在任何 require 场景都会跑 fixSubpackageModuleNames
  + runSyncCheck, 不区分平台。导致 mp-weixin / h5 编译时也会修改 5 个
  mp-harmony 子包的 .json5 文件, 污染 git status (虽然不是破坏性修改,
  但用户看不到为什么改了这些文件)。

改动:
  vue.config.js 顶层 IIFE 入口加平台判断:
    if (process.env.UNI_PLATFORM !== 'mp-harmony') {
      return;  // 非鸿蒙场景直接跳过
    }
  UNI_PLATFORM === 'mp-harmony' 是 uniapp 编译器在编译鸿蒙时设置的环境变量,
  HBuilderX 选 "发行 → 鸿蒙元服务" 会设此变量, 编译 mp-weixin / h5 时不会设。

  顺便清理了一个 dead code 块:
    if (... && __TEST_GATE_BLOCKED__) return;
  搜索全文件, __TEST_GATE_BLOCKED__ 没有任何地方被设置, 这个判断永远不成立。

端到端验证 (3 个测试场景):
  1. UNI_PLATFORM=mp-weixin → 修子包逻辑跳过, name 保持 ""
  2. UNI_PLATFORM=mp-harmony → 修子包 + 跑 sync check, 5 个 name 恢复正确
  3. UNI_PLATFORM 不设 (默认) → 修子包逻辑跳过, name 保持 ""

影响:
  - HBuilderX "发行 → 鸿蒙元服务" 行为不变 (修复 + sync check 仍自动跑)
  - HBuilderX "发行 → 微信小程序" / "运行 → H5" 行为更干净
    (不会无意义改 mp-harmony 子包文件)
  - 命令行 vue-cli-service build 同理, 避免 mp-weixin / h5 编译后
    git status 出现误改提示
2026-07-31 09:52:34 +08:00
270f5f4eff build(mp-harmony): 仅在鸿蒙元服务场景执行子包模块名修复
避免在微信小程序、H5编译时无意义修改鸿蒙平台的子包文件,防止污染编译git状态
2026-07-31 09:50:46 +08:00
0cb5c1a4df chore(mp-harmony): vue.config.js 顶层 IIFE 集成 runSyncCheck (4 处一致性自动校验)
背景:
  之前 vue.config.js 顶层 IIFE 只调 fixSubpackageModuleNames 修 5 个子包 name,
  但漏改 build-profile.json5 / entry/oh-package.json5 / ascf_build/ 目录时
  没有任何提示, 用户在 HBuilderX 看不到错误, 直到 DevEco ohpm 报错才发现。

改动:
  1. scripts/fix-subpackage-module-names.js 新增 runSyncCheck() 函数:
     - 读取 har-deps-required.json5 (whitelist) 作为单一事实源 (优先 json5 包,
       失败回退手写解析)
     - 扫描 3 个地方的一致性: build-profile.json5 modules / entry/oh-package.json5
       file: 依赖 / ascf_build/ 实际目录
     - 不一致时 console 打印明确错误 + 修复步骤 (1, 2, 3, 4 个文件)
     - 默认不抛错 (silent: false 仅 console 输出, exitOnError: false)
     - 暴露为 module.exports.runSyncCheck

  2. vue.config.js 顶层 IIFE 集成:
     - 修完 name 后调 runSyncCheck()
     - HBuilderX 触发 require vue.config.js 时立即执行
     - 不阻塞 vue-cli-service, 但 console 输出立刻告知用户漏改位置
     - 鸿蒙端的硬性错误 (ohpm "Field IS Empty") 仍由 DevEco 抛出

  端到端验证:
    1. 故意在 whitelist 加 pages_extra (未同步其他 3 处)
       → vue.config.js require 立即输出:
         ✘ build-profile.json5 缺失子包: [pages_extra]
         ✘ entry/oh-package.json5 缺失 file: 依赖: [pages_extra]
         ✘ ascf_build/ 目录缺失子包: [pages_extra]
         修复: 1. entry/har-deps-required.json5 ... 2. mp-harmony/build-profile.json5 ...
               3. entry/oh-package.json5 ... 4. ascf_build/<pkg>/ 实际目录
    2. 故意清空 pages_tool 的 name 字段
       → 修成 "pages_tool" + 跑 sync check, 输出 ✓ 5 个子包配置完全一致

  module.exports 仍只有白名单字段 (productionSourceMap, configureWebpack),
  vue-cli-service 不会报 "Invalid options" 错。

依赖: 项目已有 json5 包, 无需新装
2026-07-31 08:54:30 +08:00
4f7f4f5117 build: add localhost:8050 development build configuration
新增本地开发环境8050端口的构建配置,包含UNI_PLATFORM和UNI_APP_DOMAIN环境变量以及生产模式定义
2026-07-31 08:52:21 +08:00
51274b70ce feat(form): add url params透传和member_id上报功能
1. 为form和formdata页面新增通用URL参数透传逻辑,过滤保留字段后收集参数
2. 处理scene参数中的额外透传参数
3. 提交请求时携带url_params和当前会员ID
4. 修复代码格式问题
2026-07-31 08:48:23 +08:00
9d8324bb44 chore(mp-harmony): 新增子包配置一致性检查脚本 (防新增/删除漏改)
背景:
  mp-harmony 项目的子包 HAR 配置分散在 4 个地方:
    1. entry/har-deps-required.json5 的 requiredHarDeps (单一事实源)
    2. mp-harmony/build-profile.json5 的 modules 数组
    3. entry/oh-package.json5 的 dependencies
    4. ascf_build 实际目录

  新增/删除子包时, 任何一处忘改都会导致鸿蒙构建失败:
    - build-profile.json5 没加 → hvigor 不构建该模块
    - entry/oh-package.json5 没加 file: → ohpm 不 link 该 HAR
    - ascf_build/ 目录不存在 → ohpm "Field IS Empty Error"
    - har-deps-required.json5 没加 → check-har-deps 不会检查

改动:
  新增 scripts/check-subpackage-sync.js:
    - 读取 entry/har-deps-required.json5 作为单一事实源
    - 扫描 build-profile.json5 的 modules / entry/oh-package.json5
      的 file: 依赖 / ascf_build 实际目录 / 每个子包的关键文件齐备性
    - 任何一处不一致立即报错, 指出哪一处需要修改
    - 支持 --strict 模式 (CI 用, exit 1 阻断 build)
    - 已验证反向场景: 故意添加 pages_extra 到 build-profile.json5
      后跑 --strict, 立即报告 "build-profile.json5 多了 [pages_extra]"

使用方式:
  本地日常:  node scripts/check-subpackage-sync.js
  CI 严格:   node scripts/check-subpackage-sync.js --strict
  新增子包 SOP: 跑一次确认没漏, 不一致会列出缺失位置

依赖: 项目已有 json5 包 (devDependencies transitive), 无需新装
2026-07-30 15:27:28 +08:00
d1c58f2ec8 chore(mp-harmony): 移除 ascf_build 下的构建产物 (rawfile + Index.ets)
背景:
  上一个 commit 把 ascf_build 整个目录的元数据纳入 git, 但误把
  每次构建都会变化的产物也入仓了:
    - rawfile/index.js: 每次 DevEco Build 重新生成 (含 webpack chunk id, hash 等)
    - rawfile/<root>/diy-*.pack.js: 同上
    - rawfile/<root>/placeholder/index.html + index.pack.js: 同上
    - Index.ets: 5 个包都是 0 字节空壳, 没有任何内容

  这些文件应该被 .gitignore 排除, 避免每次 DevEco Build 后 git
  status 都会报告 "modified", 污染 diff。

改动:
  1. .gitignore 改造
     - rawfile/** 整体 ignore (鸿蒙端每次 Build 重新生成)
     - Index.ets ignore (空壳, 0 字节)
     - 移除之前的 ! 兜底规则 (rawfile/**/placeholder/index.*,
       rawfile/index.js, base/element/*.json 等), 因为这些都
       已经在 rawfile/ 下被整体 ignore
  2. 从 git 历史删除 12 个误入的产物文件 (5 个 Index.ets +
     5 个 rawfile/index.js + 1 个 placeholder/index.html +
     1 个 placeholder/index.pack.js), 保留在工作树

仍然入 git 的 ascf_build 关键文件 (每次 commit 都更新):
  - oh-package.json5
  - build-profile.json5
  - hvigorfile.ts
  - obfuscation-rules.txt
  - src/main/module.json5
  - src/main/resources/base/element/string.json
2026-07-30 14:36:14 +08:00
6f0d6a9f59 fix(mp-harmony): 修正签名证书文件路径
修复了build-profile.json5中证书文件路径配置错误,将原本的./cert-profile/qq/.p12调整为正确的./cert-profile/qq/qq.p12
2026-07-30 14:32:34 +08:00
8ebd7918fb chore(mp-harmony): 修正子包 HAR name 字段 + 纳入元数据到 git
背景:
  mp-harmony 项目的 5 个 ascf shared HAR 子包 (components_diy / pages_goods /
  pages_order / pages_promotion / pages_tool) 在 ascf_build 目录下, 关键
  元数据 (oh-package.json5 / module.json5 / build-profile.json5 /
  Index.ets / hvigorfile.ts / obfuscation-rules.txt) 之前被 .gitignore
  整体忽略, 从未被 git 跟踪, 导致 "module.name 被清空" 等回归无法被
  git diff / blame 追踪。

改动:
  1. .gitignore 改造
     - 不再整体 ignore ascf_build
     - 精确 ignore 已知产物路径 (rawfile/**/*.pack.js / rawfile/**/*.html
       / rawfile/**/*.json / build/ / oh_modules/ / .preview/ / .cxx/
       / .test/ / node_modules/)
     - ! 取反保留 HAR 必需文件 (placeholder/index.*, rawfile/index.js,
       base/element/*.json)
     - 补充 entry / hvigor / 鸿蒙签名材料 / IDE 临时文件 ignore 规则
  2. 首次将 5 个 HAR 包的元数据纳入 git (40 个文件)
  3. 新增 scripts/fix-subpackage-module-names.js: 任何入口 require
     vue.config.js 时自动修复 oh-package.json5.name + module.json5.module.name
     双重覆盖, 防止 DevEco ohpm 报 "00604007 Field IS Empty Error" 或
     hvigor 报 "Schema validate failed"
  4. vue.config.js 顶层 IIFE 触发修复 (任何 require 立即生效, 不依赖
     webpack 钩子)
  5. entry/scripts/check-har-deps.js 扩展: 校验 ascf_build 子包
     module.json5.module.name 字段 (兜底校验)
  6. entry/har-deps-required.json5 扩展: 新增 subpackageModuleJson5
     路径映射 + ohModulesRoots 校验资源齐备性
  7. entry/README-HAR-DEPS.md 更新: 故障速查表新增 module.name 相关
     报错条目

预期效果:
  - HBuilderX 触发 vue-cli-service build → vue.config.js 自动修复子包
    name → DevEco ohpm install / hvigor schema 校验通过
  - check-har-deps.js 兜底, 任何回归立即被检测并报错
  - 团队成员 git pull 后能立即看到 ascf_build 元数据, 可用 git diff
    跟踪 module.name 等关键字段变更
2026-07-30 14:26:55 +08:00
3dd059a6f6 chore: 更新站点域名和uniacid配置
将基础域名从https://xcx2.aigc-quickapp.com/修改为https://5g.aigc-quickapp.com,同时将uniacid从2482调整为248以匹配新后台配置
2026-07-30 14:05:48 +08:00
414a0e4438 chore(mp-harmony: 切换到QQ签名配置
更新应用包名和签名证书为QQ渠道的签名文件与配置
2026-07-30 11:52:09 +08:00
df9d45fc1d refactor(mp-harmony): add HAR dependency checks and debug logs
1. add debug logs for diy component lifecycle and data flow
2. add required HAR dependency declarations for mp-harmony entry module
3. add har-deps config, validation script and documentation
2026-07-30 11:43:25 +08:00
3bbf8c9531 feat(http): 添加HTTP请求全链路日志打印
新增请求ID、耗时统计,打印请求参数、响应结果与失败信息,同时添加重试相关日志,完善各个接口的调用日志输出
2026-07-30 10:40:07 +08:00
f6cc866aa7 Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-07-30 10:35:04 +08:00
d5d3c2b7be chore: add cs and qq region harmony cert profile files
add all required certificate, key and profile files for huawei harmonyos cs and qq region packaging
2026-07-30 10:27:38 +08:00
c5134c1eb2 chore(mp-harmony): 更新鸿蒙项目配置与依赖
1.  新增忽略node_modules目录到gitignore
2.  升级modelVersion到6.0.0并更新相关配置
3.  更新ascf-toolkit插件与ascfapi依赖版本
4.  新增业务模块构建配置
5.  优化hvigor配置与插件参数
2026-07-30 09:01:25 +08:00
7c51841dba chore: 2026-07-25 17:53:39 +08:00
a70a29eda1 chore:自定义标题显示 2026-07-25 17:10:32 +08:00
4bd36db70f chore:微信小程序自定义标题已经可以开始展示了 2026-07-25 15:57:37 +08:00
eab5a97ba5 feat(vr page): add custom nav bar and support page title param
1. 为APP-PLUS端的VR页面配置自定义导航栏样式
2. 从路由参数中获取并设置页面标题
2026-07-25 15:20:51 +08:00
3d4941865e fix(vr page): 修复导航栏标题无法正确更新的问题
优化vr页面的导航栏标题更新逻辑,通过监听title变化和监听webview的titleUpdate事件,以及在页面显示时更新标题,确保标题能正确同步显示。
2026-07-25 14:57:22 +08:00
9da07f1566 merge: feat/google-detail-skeleton → dev/1.0 2026-07-25 09:24:41 +08:00
8cef7b775b Revert "build: add localhost:8050-h5 build configuration"
This reverts commit 6cf8261298.
2026-07-25 09:24:16 +08:00
791d0bb623 fix(goods-detail): 骨架屏期间不再渲染真实底部 action
- 把 <slot name="action"> 移入 v-else 分支, 与 .goods-detail 同一生命周期
- 修复: 加载初期 goodsSkuDetail.goods_state=0 (默认值), 父组件 detail.vue
  模板里 <ns-goods-action> 走 v-else 显示"该商品已下架"
- 数据到达 goods_state=1 后才切到正常按钮, 导致首屏出现"已下架→正常"闪烁
- 修复后: 骨架屏状态下完全不渲染 ns-goods-action, 仅显示 .goods-detail-skeleton-action 占位

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-25 09:06:39 +08:00
dbc6002248 fix(vr page): optimize navigation bar title setting logic
add optional chaining to safely access res.data.title,
only set navigation bar title when title exists, fallback to default removed
2026-07-25 08:50:43 +08:00
6cf8261298 build: add localhost:8050-h5 build configuration
新增本地开发的h5端打包配置,指定端口8050并设置对应平台环境变量
2026-07-24 18:14:18 +08:00
9eb42c4a0c feat(goods-detail): 商品详情页接入骨架屏
- 新增 7 段占位(banner / 价格 / 标题 / 规格 / 商家 / 详情 / 推荐)
  配合底部 action 占位(fixed bottom,2 个 icon + 2 个 btn),
  避免首屏出现"空白 → 真实内容"的跳变
- detail.vue 透传 loading 状态;骨架屏在加载态、未拿到 goods_id 时
  持续显示(hasRealData computed),网络断开时不切到空详情
- loading-cover 改为 initShow=false;骨架屏接管首屏视觉
- 骨架屏最短展示 300ms,保证数据快时用户也能感知到占位

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-24 18:10:31 +08:00
ed8a316bc0 chore: 2026-07-24 17:20:34 +08:00
daab99fd88 chore: 2026-07-24 17:18:09 +08:00
dac27ca43b Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-07-24 16:40:27 +08:00
f5f893b445 refactor(splash&diy): 重构启动页逻辑,优化白屏问题
1. 统一全平台启动页为strict模式,仅在12s兜底超时才强制关闭
2. 新增网络自适应超时策略,根据网络环境调整兜底时长
3. 补充diy加载失败时的启动页关闭逻辑,避免严格模式下无限等待
4. 优化代码格式与注释,修复部分代码细节问题
2026-07-24 16:11:41 +08:00
45c0c2afb1 refactor(鸿蒙元服务): 适配鸿蒙平台隐私托管与启动屏时序优化
1. 适配鸿蒙元服务平台隐私托管,由系统自动弹出隐私弹窗,应用层不再弹出自建弹窗
2. 新增启动屏strict模式,鸿蒙场景下严格等待首页DIY渲染完成再关闭启动屏,避免白屏
3. 新增splash-state单元测试覆盖新旧模式与鸿蒙场景
4. 清理隐私相关冗余代码与注释,统一平台逻辑分支
2026-07-24 15:10:49 +08:00
f4a770e246 refactor(mp-harmony): 完善隐私协议配置同步流程与鸿蒙双轨适配
1.  新增隐私配置同步脚本,自动从manifest和site.js同步真实隐私协议URL到鸿蒙构建产物
2.  补充鸿蒙元服务隐私托管双轨制适配逻辑
3.  新增完整的隐私弹窗组件单元测试覆盖
4.  修复构建产物隐私配置被占位符覆盖的问题
2026-07-24 14:43:02 +08:00
352c359326 chore(mp-harmony): 初始化鸿蒙元服务项目并完善配置
1.  添加应用及启动图标资源
2.  配置页面路由、卡片信息与资源文件
3.  更新gitignore排除rawfile目录
4.  修改构建签名的keyAlias为cs
2026-07-24 11:35:14 +08:00
1cc9fec69c build(mp-harmony): 更新签名密钥和证书密码
替换原有调试环境的签名密码为新的配置值,确保应用签名正常
2026-07-24 11:25:05 +08:00
2c89235f15 fix(mp-harmony): 更新应用包名
修正AppScope下app.json5中的bundleName配置项
2026-07-24 11:07:28 +08:00
1d8d18922b build(mp-harmony): 切换签名证书为cs相关配置并清理冗余资源
更新了build-profile.json5中的签名配置路径,替换为csDebug.p7b和cs.cer;删除了旧的kk.csr证书请求文件以及冗余的证书物料文件,同时移除了不再需要的组件依赖配置
2026-07-24 10:57:09 +08:00
18dad6c112 chore:VR正常 2026-07-24 08:49:31 +08:00
3debab7291 chore:VR有返回箭头了 2026-07-23 18:27:34 +08:00
a2449ddd91 Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-07-23 17:26:20 +08:00
ff0d26908c fix(member): 修复账号注销/退出登录后无法正常跳转到微信原生授权登录的问题
修复背景:
  账号注销成功后, 用户被重定向到 native 登录页 (手机号+验证码表单风格, 像 H5),
  而不是微信小程序原生授权登录 (ns-login 弹窗 + getPhoneNumber 授权).
  此外, 微信小程序下短时间内连发 reLaunch 会触发 native 错误:
    appLaunch with non-empty page stack
  以及历史遗留的 navigateTo push 登录页 + 旧页面在栈中导致的死循环问题.

主要修复:

1. util.js redirectTo reLaunch 分支 (4 平台兼容):
   - H5 平台: window.location.replace (真正清空 history, 避免 history.back + router.replace 假清栈)
   - 小程序平台 (mp-weixin/mp-harmony/...): 加 300ms 全局跳转锁 + setTimeout(0) 包裹
     解决 appLaunch with non-empty page stack 错误
   - APP/其他: 保留原生 uni.reLaunch

2. util.js redirectTo 入口智能默认 (跨平台兜底):
   - 目标 == LOGIN_PAGE_URL && mode 是默认 navigateTo && 没传 back 参数
     → 自动改成 reLaunch (避免注销后死循环)
   - 显式传 mode 或带 back 参数的场景保持原行为 (不影响登录后回原页面)

3. member-public.js mixin 增强:
   - getLoginEntryUrl(): 跨平台登录入口智能分流
     微信小程序/鸿蒙/其他小程序 → INDEX_PAGE_URL (首页, 走 ns-login 原生授权弹窗)
     H5/快应用/APP → LOGIN_PAGE_URL (原生登录页)
   - redirectToLoginOnce(): 统一封装 clearLoginState + 跳登录入口, 带 800ms 组件级防抖锁
   - logout / getCancelStatus 兜底 / submitCancelApply 三个地方都改用 redirectToLoginOnce()

4. 5 个注销/退出流程页面改造:
   - cancelsuccess.vue / cancelstatus.vue / cancellation.vue / cancelrefuse.vue
     / assets.vue: 跳登录入口全部用 redirectToLoginOnce (不再直接 redirectTo(LOGIN_PAGE_URL))
   - cancellation.vue / cancelrefuse.vue: 加 memberPublic mixin (原本没有)

5. 取消了在 pages/index/public/js/index.js 中 onShow 自动弹登录弹窗的尝试
   (因触发 Vue 框架的 dataset of null pre-existing 错误, 改由其他途径处理)

测试覆盖 (300+ 测试用例全部通过):
  - tests/member-cancel-flow.test.js (28 个测试, 9 个用户故事场景)
  - tests/redirectTo-relaunch-h5.test.js (11 个测试, 9 个跨平台场景)
  - tests/redirectTo-real.test.js (12 个)
  - tests/util.test.js (30 个)
  - 其他 8 个测试文件全部通过
2026-07-23 17:26:00 +08:00
c4675deb1e Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into yuanlaide6 2026-07-23 16:51:55 +08:00
c99d808051 chore:二级标题按钮白色背景和一级标题对齐 2026-07-23 16:51:00 +08:00
acbac773db fix(member): 修复退出登录后可返回旧页面的问题
1.  退出登录和注销流程兜底分支都改用reLaunch跳转登录页,清空页面栈防止返回旧会员页
2.  新增完整的单元测试覆盖logout和getCancelStatus的异常分支、调用顺序和跳转模式
2026-07-23 15:17:08 +08:00
b9cb6bf75b fix(member-cancel): 修复注销成功后仍能回退查看旧账号信息的问题
1.  注销申请成功后立即调用clearLoginState清除登录态,避免残留账号信息
2.  所有跳转均改用reLaunch模式清空页面栈,防止用户通过回退键回到历史页面
3.  新增完整的注销流程行为测试用例覆盖所有场景
2026-07-23 15:14:01 +08:00
14e0fb9969 merge: 将 fix/2026-07-20-errkey 合并到 dev/1.0
# Conflicts:
#	.local.config.js
#	pages_tool/ai-chat/ai-chat-message.vue
2026-07-23 14:11:27 +08:00
3d2a982718 chore(config): add test-12 environment config
新增户外鞋优惠券测试环境的配置项,同时注释掉原有的18-test测试配置
2026-07-23 11:49:34 +08:00
eefcc9fe57 feat: 新增鸿蒙元服务平台适配
适配鸿蒙小程序平台,包括导航栏胶囊适配、支付通道支持、登录授权逻辑,以及分享功能兼容
2026-07-23 11:34:03 +08:00
f51b601ecb feat(detail页): 新增鸿蒙小程序端购物车和关注按钮
补充鸿蒙小程序平台的专属操作按钮,包括购物车入口和收藏关注按钮,对齐其他平台的功能展示
2026-07-23 11:04:54 +08:00
70a01bfd2b fix: 修复多页面国际化文案调用路径错误
将多处误用的 common.前缀国际化调用改为顶层路径,同时新增语言调用错误的回归测试用例,防止后续再次出现类似的命名空间误用问题
2026-07-23 10:37:22 +08:00
94142268a0 refactor(i18n): 完成全量硬编码中文文案替换为多语言方案
1.  替换所有页面/组件中的硬编码中文提示文案为$lang调用,包括支付、帮助中心、公告等页面
2.  重构diy.js加载失败文案处理逻辑,支持参数化替换
3.  新增多语言混入逻辑,实现导航标题随语种动态切换
4.  重构支付组件初始化逻辑,优化平台适配代码
5.  添加多语言单元测试和硬编码扫描脚本
6.  更新语言包,新增缺失的翻译词条
2026-07-23 09:46:16 +08:00
4b0aa0ac40 i18n: 补充多语言文案并优化英文tabbar命名
1. 为支付模块新增未获取到支付信息的多语言文案
2. 为通用模块新增网络错误、视频号播放限制、提交/加载相关文案
3. 优化英文环境底部tabbar的命名为更自然的首字母大写形式
2026-07-23 09:07:32 +08:00
6ee4de94a2 fix: 修复多商户优惠券选择异常和空指针问题
1. 新增coupon_list数组类型校验避免渲染异常
2. 重构优惠券选择逻辑,使用merch_id隔离选中状态避免多商户污染
3. 增加orderCreateData.coupon的类型兜底处理,防止非对象/数组类型报错
4. 修复优惠券弹窗选中状态同步逻辑,保留用户已选优惠券
2026-07-23 08:45:01 +08:00
658396c9a3 chore:二级标题按钮和一级标题第一个对齐 2026-07-22 17:49:08 +08:00
0a6abd87ae build(mp-harmony): 添加components_diy和页面模块的构建配置
同时新增清理华为IDE内置node路径的脚本,以及空的权限检查文件
2026-07-22 16:48:46 +08:00
25fc8311f8 chore:H5和微信小程序的返回第一个一级标题时右侧高度正确更新。 2026-07-22 10:38:51 +08:00
d4a249d744 chore:99的微信小程序左侧一级标题的高度会根据字数自动调节,右侧二级标题的白色背景高度会随着左侧选中项的高度自动改变,保持两侧高度一致。 2026-07-22 10:28:57 +08:00
f7efbfd4b7 chore:现在左侧一级题的高度会根据字数自动调节,右侧二级标题的白色背景高度会随着左侧选中项的高度自动改变,保持两侧高度一致。 2026-07-21 18:28:29 +08:00
e9b96df758 chore:一级分类高度和二级分类高度一致 2026-07-21 17:36:35 +08:00
75f70138ed chore:解决key的问题 2026-07-21 15:40:27 +08:00
c9aa4c75ae chore:template==99左侧一级分类选中时的指示器是一个红色的垂直竖条 2026-07-21 12:00:08 +08:00
a1db706072 chore:一级标题选中时加粗字体 2026-07-21 11:55:48 +08:00
276120162a chore:二级分类按钮是一致的颜色 2026-07-21 11:45:12 +08:00
f523122889 chore:99的视图按钮单列商品正常显示立即咨询 2026-07-21 11:40:55 +08:00
cea0e36d5d chore:视图改变 2026-07-21 10:42:21 +08:00
0169f25ca5 chore:H5的二级分类按钮下框对齐 2026-07-21 10:31:46 +08:00
3939d15f2a style(diy-category-item): 调整不同端的分类按钮容器内边距
针对H5和非H5平台分别适配二级分类按钮的内边距样式,保证页面布局在各端显示一致
2026-07-21 10:30:41 +08:00
fd4edc177d chore(config): update local dev config and env entries
1. add local-18 artificial crystal dev environment config
2. update domain for 2482 low-altitude economy env
3. adjust default active env to 2821 and add local-18 comment option
2026-07-21 09:54:13 +08:00
f96fee60d3 chore: 更新本地配置并补全页面导航栏标题配置
1.  调整.local.config.js中的测试平台配置项,替换原有54号配置为18号并新增48号配置,同时修改默认启用的低空经济项目id为2482
2.  在pages.json的所有页面配置中统一添加navigationBarTitleText空配置项,修正部分页面的APP端导航样式适配
2026-07-21 09:52:51 +08:00
d57b69d7cb Merge branch 'dev/1.0' of https://git.aigc-quickapp.com/Uniapp/lucky_shop into dev/1.0 2026-07-21 09:43:31 +08:00
d875642d99 feat(diy-category): 新增模板1和模板4分类页面样式与功能
1. 新增模板4:顶部图片搜索框、左侧一级分类列表、底部购物车栏
2. 新增模板1:仿京东淘宝分类布局,支持三级分类分组展示商品
3. 优化模板1样式:调整分类栏、商品列表、标签样式
4. 修复模板切换时的搜索框重复渲染问题
5. 新增模板1、3、4的专属UI样式和交互逻辑
2026-07-21 09:41:25 +08:00
0bcb5e7f4a fix(common/js/diy.js): 修正错误处理中使用的错误key函数
将diyErrorKey替换为httpErrorKey来适配HTTP状态码错误处理逻辑
2026-07-21 09:33:48 +08:00
65013a35f0 chore: 2026-07-21 09:20:48 +08:00
31daebc83b Merge remote-tracking branch 'origin/dev/1.0' into yuanlaide6 2026-07-21 08:50:19 +08:00
b8894ea2dc chore: 2026-07-20 18:00:04 +08:00
ff130bbf15 chore:改了二级分类的下边框 2026-07-20 17:29:15 +08:00
3a88941828 build(vue.config): 修复生产构建门禁的node执行路径问题
将执行test-gate的命令从硬编码的"node"改为使用process.execPath,避免依赖PATH环境变量查找node二进制,解决HBuilderX等IDE下PATH无node条目导致的构建失败问题,同时打印当前使用的node版本
2026-07-20 15:38:15 +08:00
b8c813e43b build(vue.config): add production build test gate
新增生产构建门禁校验,在正式打包前执行测试脚本,覆盖所有会加载vue配置的构建入口,包括HBuilderX、vue-cli和uni-cli,拦截未通过测试的生产构建
2026-07-20 11:07:24 +08:00
73776841d8 fix: 修复鸿蒙元服务商品详情页空白及接口兼容问题
1. 移除view组件无效的scroll-y属性,避免鸿蒙JSVM静默不渲染导致页面空白
2. 删除冗余的商品分类页面路由配置
3. 为ref调用和接口请求添加try-catch与空值防御,避免极端场景下崩溃
4. 补充鸿蒙元服务接口调用的兼容性处理,确保请求正常发起
5. 调整loading隐藏时机和异常捕获逻辑,优化页面容错能力
2026-07-20 08:44:15 +08:00
cd2705e5b9 fix(test): 修复沙箱环境下tabbar测试的依赖和调试flag问题
1. 移除沙箱不支持的ESM import语句
2. 内联注入依赖的_toParamValueString函数
3. 将globalThis.__TABBAR_DEBUG__替换为global以穿透沙箱
4. 修复全局调试flag无法在沙箱内生效的问题
2026-07-18 18:31:00 +08:00
02b8966a91 fix(mp-harmony): 修正鸿蒙元服务的url编码逻辑,对齐微信小程序行为
更新了鸿蒙元服务的_safeEncodeForPlatform实现和相关测试:
1. 修正此前错误的"鸿蒙整体encode url"假设,实际鸿蒙行为和微信一致,按&=分隔解析query
2. JS侧不再完全不编码,而是仅对&=?#和空格做encode,保留中文/字母数字等
3. 更新所有相关测试用例和文档注释,同步修复微信平台的编码逻辑说明
2026-07-18 18:23:39 +08:00
2adb574dd5 refactor(util-navigate): 合并微信和鸿蒙平台的编码逻辑
将原有的mp-weixin和mp-harmony平台的编码判断合并,简化分支代码逻辑
2026-07-18 18:19:38 +08:00
5b7351dcd2 fix: 兼容鸿蒙元服务端小程序适配优化
1.  修复cart页面unload时调用不存在方法的报错
2.  适配鸿蒙themeColor绑定和$nextTick兼容问题
3.  给多处逻辑添加try/catch防止页面空白
4.  补全v-for循环的key属性
2026-07-18 17:54:05 +08:00
63e2cb2ff7 fix(diy-category): 修复鸿蒙平台下样式条件编译错误
修正了骨架树项的样式宏定义拼写错误,确保鸿蒙平台能正确应用对应样式
2026-07-18 17:21:42 +08:00
d65f27b256 style(components): 优化多端兼容性适配细节
1. 补充loading-cover组件的兼容场景说明
2. 为鸿蒙元服务适配flex gap替代方案
2026-07-18 17:19:58 +08:00
ce7cbc75df feat(diy-category): add skeleton loading state for category page
优化分类页面加载体验,请求分类数据时显示骨架屏占位,避免页面先展示空态再切换内容造成的闪烁问题,同时调整了空状态的渲染逻辑,请求失败时也能正确显示空态占位
2026-07-18 17:14:02 +08:00
a6091f6b68 refactor(commodity-detail): optimize performance and fix UI flicker issues
1. add empty form tip for product message section
2. lazy load goods form to unblock initial page render
3. optimize category and tabbar rendering to fix flicker on WeChat mini-program
4. delay non-critical data processing to improve first-screen rendering speed
5. fix popup blank issue when opening product message form for the first time
2026-07-18 16:57:10 +08:00
9d6c3218fb refactor(http, diy): 抽象通用网络错误处理逻辑
1. 抽离通用http错误分类器到单独模块,实现错误处理复用
2. 统一多语言文案,将diy专属错误合并到通用http命名空间
3. 简化diy页面的错误处理代码,降低维护成本
2026-07-18 16:18:35 +08:00
71ea945743 style: 修复pages.json缩进与格式问题
调整pages.json中所有页面配置的缩进对齐,修正多处格式错误,统一代码风格,包括分包页面、全局配置和easycom规则的排版问题,修复了文件末尾换行缺失问题。
2026-07-18 16:04:40 +08:00
c8d92d8100 feat(diy): add in-page error prompt for diy data loading failure
1. add multi-language error copy for api request and network exceptions
2. add fixed top error banner component for index page
3. rewrite diy data request error handling: replace toast with reliable in-page prompt with retry button
4. add detailed error reason and request url display in error prompt
2026-07-18 15:58:40 +08:00
5831189e5e fix(diy-form): 修复鸿蒙元服务下value未定义导致的报错
针对鸿蒙元服务运行时首次渲染时value可能为undefined的情况,为所有模板表达式和计算属性添加空值守护,避免触发Cannot read properties of undefined错误
2026-07-18 14:51:42 +08:00
109cba6b6c style(vue.config): 给控制台日志添加前缀标识
统一修改vue.config.js里的console日志,添加[vue.config]前缀便于识别
2026-07-18 14:47:54 +08:00
f01a1d7efc build(vue.config): replace config.log with console.log
将vue配置文件中的自定义日志输出替换为标准console.log,移除了依赖的自定义日志工具调用
2026-07-18 14:42:09 +08:00
ae5b878822 build(vue.config): adjust terser console drop logic and add debug log
重构了鸿蒙平台保留console的判断逻辑,新增配置日志方便调试,统一了控制台语句移除的配置规则
2026-07-18 14:41:42 +08:00
7d4ecb9731 i18n: add missing diy page error prompt copy
补充中英文双语的自定义页面错误提示文案,包括弹窗标题和重试按钮文字
2026-07-18 14:26:11 +08:00
b5e9940934 fix(pages.json): 为首页页面配置新增components-diy分包
补充pages/index/index页面的依赖分包,将components-diy加入到依赖列表中
2026-07-18 12:01:16 +08:00
018616dd0e fix(common/js/event-safety): 修复dataset访问可能的空指针问题
使用可选链操作符避免target为null/undefined时访问dataset报错
2026-07-18 11:58:09 +08:00
74e53a9ca6 style(pages.json): 修复pages.json的缩进格式问题
修正pages.json中商品模块分包下category页面配置的缩进不一致问题,提升代码可读性
2026-07-18 11:52:36 +08:00
fdc0b54fbd fix(common/js/goods_detail_base): add format parameter to goodsform api request
为商品表单接口请求添加format: 'object'参数,指定返回数据格式为对象类型
2026-07-18 11:27:21 +08:00
8e31b9e327 chore:模板4的二级分类按钮正常 2026-07-18 11:26:27 +08:00
460dbcb447 chore:二级分类按钮显示正常 2026-07-18 11:15:58 +08:00
81ecd45de4 chore:二级分类按钮显示 2026-07-18 11:13:34 +08:00
059630ba2c refactor: 重构商品留言表单逻辑,替换为diy-form组件
1.  移除页面data中维护的留言表单数据,改为通过computed实时从商品详情数据构建diy-form所需格式
2.  替换ns-newform为diy-form组件,使用raw模式并接管表单提交逻辑
3.  完善平台别名映射,新增更多小程序平台兼容配置
4.  为diy-form新增占位符样式属性绑定
5.  重构商品表单接口处理逻辑,统一所有元数据字段的初始化和兼容处理
2026-07-18 10:55:39 +08:00
1ac0fb2484 refactor(goods-detail): 升级商品留言表单组件与接口适配
1.  将原有的同步调用改为异步处理handleGoodsSkuData和getGoodsForm方法
2.  重构getGoodsForm接口请求逻辑,兼容新旧版接口返回格式
3.  新增goods_form_config字段支持新表单组件样式配置
4.  替换旧版ns-form为ns-newform组件,完善空数据兜底处理
5.  优化商品留言初始化的可选链操作避免空指针报错
2026-07-18 10:34:37 +08:00
d8816bbe42 chore:还原到模板3二级分类按钮正常 2026-07-18 10:31:35 +08:00
b410597d9c chore 2026-07-18 10:15:27 +08:00
1143ef7b72 fix(util-navigate): 完善鸿蒙元服务编码逻辑注释与说明
更新了util-navigate和对应测试文件的注释,补充鸿蒙原生编码的细节,说明双重编码的问题以及&符号的处理逻辑,修正了注释里的重复表述
2026-07-18 09:24:10 +08:00
987e75c65a Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into yuanlaide3 2026-07-18 09:07:28 +08:00
ac8c461546 chore:二级分类按钮点击一会能切一会不能切 2026-07-18 08:58:52 +08:00
f3032a6004 fix(util-navigate): 修复多平台搜索关键词编码乱码问题
重构跨平台参数编码逻辑:
1. 微信小程序/鸿蒙元服务:仅处理编码边界符和decode roundtrip,不主动编码,交由平台原生处理
2. H5/华为快应用:保留主动编码逻辑,适配浏览器query解析规则
3. 新增专项测试用例覆盖搜索关键词跨端流转场景,修复商品分类页跳转列表页关键词显示乱码的bug
2026-07-18 08:34:43 +08:00
a4d8023e1f chore:二级分类按钮正常 2026-07-17 18:17:45 +08:00
bb0adb0542 style(ns-form, ns-newform): 新增占位符字体大小配置项
1. 为两个表单组件新增placeholderFontSize配置项与对应CSS变量
2. 将输入框占位符字体大小从复用label字号改为独立配置
3. 适配小程序/鸿蒙原生占位符样式规则
2026-07-17 16:14:25 +08:00
a4c218fecc chore: 2026-07-17 16:06:07 +08:00
0d820b04f7 chore:template == 4页面后台选择二级分类正常 2026-07-17 15:53:09 +08:00
70c9c49b94 refactor(form): 抽离平台检测逻辑到共用mixin,统一多端表单配置处理
1. 新增form-platform-mixin.js集中管理平台判断、别名兼容和配置键获取逻辑
2. 移除ns-form和ns-newform组件内重复的平台相关代码
3. 统一替换rpx单位处理逻辑为$util.rpx,简化样式计算代码
4. 移除冗余的_resolveFontSize工具方法,复用现有工具能力
2026-07-17 15:44:40 +08:00
6d1bdb5d8b chore:删除右侧上面的和一级标题一样的字 2026-07-17 15:07:19 +08:00
73b7b2a8df chore:template == 3的模板正常 2026-07-17 14:54:44 +08:00
b2063418fb chore:template == 1的模板正常 2026-07-17 14:01:40 +08:00
21c342e389 chore: 2026-07-17 11:56:44 +08:00
cbf91fa905 feat(util,navigate): add uniacid stale check for wap url
新增租户uniacid一致性校验逻辑,修复装修外链携带过期租户ID导致的跳转错误问题:
1. 新增pickCurrentUniacid和hasStaleUniacidInUrl工具函数
2. 在链接处理逻辑中校验wap_url内的uniacid与当前系统租户ID是否一致
3. 脏数据场景下强制走外链模式而非内部跳转
4. 补充完整的单元测试覆盖
2026-07-17 11:37:53 +08:00
61495b5e90 refactor(utils&form): 优化设备信息获取与表单组件样式配置
1.  为设备信息相关方法添加可选链操作符,避免空值报错
2.  重构getDeviceInfo和getWindowInfo的异常处理逻辑,简化代码
3.  重构ns-form表单组件,新增全局样式配置支持,兼容多端样式自定义
4.  优化表单布局样式、必填项和选中态颜色,修复鸿蒙元服务TextArea适配问题
5.  新增标签宽度自动计算功能,优化表单排版对齐效果
2026-07-17 10:43:49 +08:00
185d4914a6 chore:页面显示正常1模板 2026-07-17 10:21:40 +08:00
e3bbb7c77a chore:商品分类页面符合template==1 2026-07-17 09:58:25 +08:00
4044070867 fix(splash): 移除 onDiyGroupLoaded 多余 500ms 延迟避免 page-ready 兜底超时
diy-group 内部 _notifyLoaded 已有 300ms 渲染 settle, 叠加的 500ms 会吃掉
splash 2s page-ready 兜底预算, 导致弱网/冷启动下走 page-ready-timeout 兜底路径
(splash 在页面就绪前被强制关闭)。改为收到 loaded 事件后立即 notifyPageReady。
2026-07-16 17:20:46 +08:00
41b0d15570 chore: 切换默认启用的项目配置为低空经济
调整注释掉的配置项,将48切换为2482作为默认启用的项目配置
2026-07-16 17:09:30 +08:00
aafb75bad3 style: 调整多个页面的回到顶部按钮位置适配多端
为H5和小程序平台分别配置mescroll-totop的right和bottom样式,修复不同终端下按钮位置适配问题
2026-07-16 17:07:30 +08:00
6e19bc7aff chore: 注释新增低空经济项目配置
暂时注释掉2482号项目的配置代码,避免其被错误加载启用
2026-07-16 16:53:41 +08:00
94e852032b Merge remote-tracking branch 'remotes/origin/dev/1.0' into dev/1.0 2026-07-16 16:46:06 +08:00
5ccbc5d4f4 chore(config): add 18-test development environment configuration
Also add commented reference for the new 18-test environment
2026-07-16 16:45:59 +08:00
cf6d54e2bf fix(util): 修复内部页面绝对URL被误判为外链的问题
新增extractInternalAppPath和resolveNavMode工具函数,在diyRedirectTo中增加内部页面绝对URL还原逻辑:
1. 支持通过open_mode配置三种导航模式:auto/online/internal
2. 严格校验域名避免误伤外部站点,支持强制内部跳转场景
3. 修复H5整页刷新丢失状态、MP被塞进web-view的问题
2026-07-16 16:32:10 +08:00
b038175f07 Merge branch 'gaibao-2821' into dev/1.0 2026-07-14 08:47:48 +08:00
f18577a46c chore:切换左侧一级分类时,右侧会自动选中第一个二级分类按钮(如"离型纸")
如果用户之前点击过某个二级分类(如"离型膜"),切换一级分类后会自动选中同名的二级分类
2026-07-13 18:05:36 +08:00
9915fb9bb1 chore:切换左侧一级分类时,右侧默认选中第一个按钮 2026-07-13 18:00:48 +08:00
bb34e32f87 chore:删除按钮上方的“什么行业” 2026-07-13 17:26:58 +08:00
45e997adae chore:实现左侧一级分类点击哪个行业,右面就只显示这个行业,不显示其他的行业 2026-07-13 17:21:14 +08:00
2e4f11d108 chore:增加分类按钮,把商品列表的商品放在按钮下面 2026-07-13 17:14:15 +08:00
219 changed files with 53029 additions and 10381 deletions

81
.gitignore vendored
View File

@@ -5,10 +5,83 @@
/iconfont-preview.html
.codebuddy
.workbuddy
.vscode
.trae
.trae*
# 本地调试配置 (含 uniacid / 域名, 每人不同, 不应入仓)
# 注意: 如果 .local.config.js 已经被之前的 commit 入仓,
# 需要手动 `git rm --cached .local.config.js` 并用 filter-branch
# 清理历史 (仅限团队协商后操作)
.local.config.js
# 鸿蒙元服务构建产物
# 鸿蒙元服务构建产物 (被 .gitignore 的只是产物, HAR 元数据需要 git 管理)
# 重要: ascf_build 根目录的元数据 (oh-package.json5 / Index.ets / build-profile.json5 / ...)
# 必须被 git 管理, 否则无法追踪 "module.name 被清空" 等回归。
# 这些元数据通过下方的 ! 取反规则显式纳入 git。
stub-app-projects/mp-harmony/ascf/ascf_src
stub-app-projects/mp-harmony/ascf/ascf_build
stub-app-projects/mp-harmony/entry/src/main/resources
stub-app-projects/mp-harmony/entry/src/main/resources/rawfile
# ascf_build/<pkg>/ 是 HAR 包定义
# 区分两类内容:
# 1. 必须入 git (元数据 / 构建配置 / HAR 入口):
# - oh-package.json5, build-profile.json5, hvigorfile.ts
# - obfuscation-rules.txt, src/main/module.json5
# - src/main/resources/base/element/string.json (HAR i18n)
# 2. 每次构建覆盖 (不应入 git):
# - src/main/resources/rawfile/** : 鸿蒙端从 ascf_src 同步的编译产物
# - Index.ets : 空壳文件, 无内容
# - build/, oh_modules/, .preview/, .cxx/, .test/, node_modules/
# rawfile/ 整体 ignore (鸿蒙端每次 Build 重新生成)
stub-app-projects/mp-harmony/ascf/ascf_build/**/rawfile/**
# Index.ets 是空壳 (每个包都是 0 字节), 不入 git
stub-app-projects/mp-harmony/ascf/ascf_build/**/Index.ets
# 其他产物目录
stub-app-projects/mp-harmony/ascf/ascf_build/**/build
stub-app-projects/mp-harmony/ascf/ascf_build/**/oh_modules
stub-app-projects/mp-harmony/ascf/ascf_build/**/.preview
stub-app-projects/mp-harmony/ascf/ascf_build/**/.cxx
stub-app-projects/mp-harmony/ascf/ascf_build/**/.test
stub-app-projects/mp-harmony/ascf/ascf_build/**/node_modules
# entry 下的产物
stub-app-projects/mp-harmony/entry/build
stub-app-projects/mp-harmony/entry/oh_modules
stub-app-projects/mp-harmony/entry/.preview
stub-app-projects/mp-harmony/entry/.cxx
stub-app-projects/mp-harmony/entry/.test
stub-app-projects/mp-harmony/entry/node_modules
# 鸿蒙工程顶层产物 (.hvigor / hvigor / .idea 已在根 .gitignore 范围或更精准的鸿蒙子 .gitignore)
stub-app-projects/mp-harmony/oh_modules
stub-app-projects/mp-harmony/.hvigor
stub-app-projects/mp-harmony/.idea
# 鸿蒙 hvigor 自身依赖
stub-app-projects/mp-harmony/hvigor
# Trae/IDE 临时文件
.hvigor/outputs
.trae_permission_check_*
# 本地测试脚本与产物归档(不入 git, 留本地复用)
# 内容: Playwright 截图 / 测试脚本 / 对比图 / 临时提交草稿
# 复用方式: cd _test_archive && python xxx.py
_test_archive/
# 兜底:防止任何临时测试文件被遗漏在根目录
# 名称以 _test_/_compare_/_auth_ 开头, 或 check_button.py 等
_test_*.png
_test_*.html
_compare*.png
_compare*.py
_auth_*.json
_commit_msg.txt
/check_button.py
# 鸿蒙签名材料 (敏感, 绝不能提交到公共 git)
# 仓库有 origin (github.com/Zajd/jsysq-uniapp) 是公开仓库, 签名材料必须 gitignore
stub-app-projects/mp-harmony/**/cert-profile
stub-app-projects/mp-harmony/**/.p12
stub-app-projects/mp-harmony/**/.p7b
stub-app-projects/mp-harmony/**/.cer
stub-app-projects/mp-harmony/**/.csr
stub-app-projects/mp-harmony/**/material

View File

@@ -21,7 +21,7 @@ const localDevConfig = ({
'2881': { // 防爆电器
uniacid: 2881,
domain: 'https://xcx6.aigc-quickapp.com/',
},
},
'2724': { // 生物菌肥
uniacid: 2724,
domain: 'https://xcx.aigc-quickapp.com/',
@@ -45,7 +45,11 @@ const localDevConfig = ({
'11-test': { // 测试平台
uniacid: 11,
domain: 'https://test.aigc-quickapp.com',
},
},
'18-test': { // 测试平台
uniacid: 18,
domain: 'https://test.aigc-quickapp.com',
},
'local-2': { // 测试平台
uniacid: 2,
domain: 'http://localhost:8050/',
@@ -55,11 +59,16 @@ const localDevConfig = ({
domain: 'http://192.168.197.1:8050/',
// domain: 'http://localhost:8050/',
},
'192.168.8.118-1': { // 测试平台
uniacid: 1,
domain: 'http://192.168.8.118:8050/',
// domain: 'http://localhost:8050/',
},
'local-11': { // 测试平台
uniacid: 11,
domain: 'http://localhost:8050/',
},
'100': {
},
'100': {// 口译教学
uniacid: 100,
domain: 'https://5g.aigc-quickapp.com/',
},
@@ -67,47 +76,51 @@ const localDevConfig = ({
uniacid: 1,
domain: 'https://5g.aigc-quickapp.com/',
},
'115': {
'115': {// 低压断路器
uniacid: 115,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-11': {
'5g-11': {// 铝箔袋包装
uniacid: 11,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-206': {
},
'5g-206': {// 气体探测
uniacid: 206,
domain: 'https://5g.aigc-quickapp.com/',
},
'47': { // 修改弹窗
},
'5g-165': { // 鸡肉调理品, 优惠卷显示不全,及逻辑错误
uniacid: 165,
domain: 'https://5g.aigc-quickapp.com/',
},
'47': { // 免疫细胞干细胞外泌体 ,修改弹窗
uniacid: 47,
domain: 'https://5g.aigc-quickapp.com/',
},
'145': { // 表单链接转义问题
'145': { //昆山昆创净化科技有限公司 , 表单链接转义问题
uniacid: 145,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-213': { // 单图组点击链接无法跳转
},
'5g-213': { // 碱性康养水天然泡茶水 , 单图组点击链接无法跳转
uniacid: 213,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-4': { // 公告点击链接无法跳转
},
'5g-4': { // 高端硅钢制造装备 , 公告点击链接无法跳转
uniacid: 4,
domain: 'https://5g.aigc-quickapp.com/',
},
},
'5g-97': { // 大宗商品贸易,支持自定义字体大小、颜色
uniacid: 97,
domain: 'https://5g.aigc-quickapp.com/',
},
},
'5g-50': { // 燃气安全产品机器人,购物车无反应
uniacid: 50,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-237': { // 商品分类,没有立即咨询文字
},
'5g-237': { //高活性氧化镁 商品分类,没有立即咨询文字
uniacid: 237,
domain: 'https://5g.aigc-quickapp.com/',
},
'2847': { //
},
'2847': { // 家居装饰品
uniacid: 2847,
domain: 'https://xcx.aigc-quickapp.com/',
},
@@ -115,37 +128,138 @@ const localDevConfig = ({
uniacid: 2482,
domain: 'https://xcx6.aigc-quickapp.com/',
},
'2485': { // 验证电子表单前后端数据一致性
'2485': { // 智能物流仓储 , 验证电子表单前后端数据一致性
uniacid: 2485,
domain: 'https://xcx6.aigc-quickapp.com/',
},
'2821': { // 离型纸硅油纸
uniacid: 2821,
'2821': { // 离型纸硅油纸
uniacid: 2821,
domain: 'https://xcx.aigc-quickapp.com/',
},
'18': { // 测试平台
uniacid: 18,
domain: 'https://test.aigc-quickapp.com',
},
'2': { // 测试平台
uniacid: 2,
domain: 'https://test.aigc-quickapp.com',
},
'48': { // 测试平台
uniacid: 48,
domain: 'https://test.aigc-quickapp.com',
},
'test-12': { // 户外鞋,测试优惠券
uniacid: 12,
domain: 'https://test.aigc-quickapp.com',
},
'248': { // 工业称重系统垃圾吊电子秤,支持自定义字体大小、颜色
uniacid: 248,
domain: 'https://5g.aigc-quickapp.com/',
},
'228': { // 反渗透阻垢剂RO装置 商品分类,没有立即咨询文字
uniacid: 228,
domain: 'https://5g.aigc-quickapp.com/',
},
'2797': { //气雾栽培机,视频组件安卓ios播放正常
uniacid: 2797,
domain: 'https://xcx.aigc-quickapp.com/',
},
'5g-95': { // 加热器 ,商品分类,没有立即咨询文字
uniacid: 95,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-160': { // 过瘤胃瘤胃保护,商品详情视频
uniacid: 160,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-268': { // 合成孔径雷达,一级分类背景字体颜色
uniacid: 268,
domain: 'https://5g.aigc-quickapp.com/',
},
'225-test': { // 测试平台
uniacid: 225,
domain: 'https://test.aigc-quickapp.com',
},
'192.168.8.118-321': { // 测试平台
uniacid: 321,
domain: 'http://192.168.8.118:8050/',
// domain: 'http://localhost:8050/',
},
'5g-59': { // 脱模剂粘合剂乐瑞固Lorechem
uniacid: 59,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-204': { // 热固性塑料,公告不跳转
uniacid: 204,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-351': { // 洗车机,商品详情的销量,购物车,库存隐藏
uniacid: 351,
domain: 'https://5g.aigc-quickapp.com/',
},
'2709': { // 中央厨房
uniacid: 2709,
domain: 'https://xcx.aigc-quickapp.com/',
},
'18': { // 测试平台
uniacid: 18,
domain: 'https://test.aigc-quickapp.com',
'192.168.8.118-325': { // 测试平台
uniacid: 325,
domain: 'http://192.168.8.118:8050/',
// domain: 'http://localhost:8050/',
},
'2': { // 测试平台
uniacid: 2,
domain: 'https://test.aigc-quickapp.com',
'2505': { // 煤矿钻机
uniacid: 2505,
domain: 'https://xcx.aigc-quickapp.com/',
},
'48': { // 测试平台
uniacid: 48,
domain: 'https://test.aigc-quickapp.com',
'3007': { // 钎焊材料
uniacid: 3007,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2843': { // 蔬菜种子网
uniacid: 2843,
domain: 'https://xcx.aigc-quickapp.com/',
},
'5g-317': { // 电磁兼容,模板显示不全商品
uniacid: 317,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-312': { // 天然植物功效活性物
uniacid: 312,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-248': { // 工业称重
uniacid: 248,
domain: 'https://5g.aigc-quickapp.com/',
},
'5g-325': { // 检验检测机构
uniacid: 325,
domain: 'https://5g.aigc-quickapp.com/',
},
// })['5g-237']; // 商品分类,没有立即咨询文字
// })['5g-97']; // 大宗商品贸易,支持自定义字体大小、颜色
// })['5g-50']; // 燃气安全产品机器人,购物车无反应
// })['2821']; // 离型纸硅油纸
})['48']; // 离型纸硅油纸
// })['2482']; // 低空经济
// })['48']; // 离型纸硅油纸
// })['2485']; // 验证电子表单前后端数据一致性
// })['5g-11']; // 数码
// })['5g-213']; // 选择要使用的环境配置
// })['5g-213']; // 选择要使用的环境配置
// })['2881']; // 鸡肉调理品, 优惠卷显示不全,及逻辑错误
// })['2724']; // 生物菌肥
// })['2811']; // 选择要使用的环境配置
// })['5g-351']; //洗车机
// })['5g-204']; //热固性塑料
// })['5g-59']; //合成孔径雷达
// })['2709']; //中央厨房
// })['3007']; //钎焊材料
// })['2505']; //煤矿钻机
// })['local-11']; // 选择要使用的环境配置
// })['local-1']; // 本地
// })['2811']; // 本地
// })['5g-317']; // 电磁兼容
// })['5g-351']; //
})['2843']; // 本地
// })['local-2']; // 本地
// })['local-11']; // 本地
// })['1-test']; // test
// })['test-12']; // test
export default localDevConfig;

60
App.vue
View File

@@ -5,6 +5,15 @@
import ThemeOverride from 'common/js/theme-override.js';
import PrivacyManager from 'common/js/privacy.js';
import splashState from 'common/js/splash-state.js';
// PR-MULTI-TURN-KEY-BINDING (2026-09-18): AI 客服会话 key 切换
// 登录态恢复后通知 aiService 清旧 user key,避免串会话
import aiService from 'common/js/ai-service.js';
import { markNeedStartupAd } from 'common/js/startup-ad.js';
// 记录 App 是否已至少展示过一次: 首次 onShow = 启动展示(由 onLaunch 完成初始化),
// 之后每一次 onShow(含微信 ... 菜单"重新进入小程序"、从后台切回)都视为"重新进入"。
// 微信"重新进入小程序"不一定触发 onHide,所以用"是否展示过"判断更稳妥。
let _appHasShown = false;
import {
Weixin
@@ -271,27 +280,56 @@
// 隐私协议弹窗: 启动期关键资源 (i18n/theme/remote-config) 就绪后触发
// 通过 PrivacyManager → uni.$emit('privacy:show') 通知当前页面的 privacy-popup 组件
// 只弹一次: 同意后写 storage,后续不再弹
// 异步查询平台隐私状态(微信/鸿蒙), H5 同步返回
// 异步查询平台隐私状态(微信/快应用), H5 同步返回
// H5 直访特定 URL(子串匹配)时跳过本次弹窗,不写 storage,下次正常访问其他页面还会弹
// urlFallback: 首次启动 onLaunch 时 getCurrentPages 还没页面, 用 onLaunch options 兜底
// readyGuard: 双保险 — 若调用方没传, PrivacyManager 内部从 _externalReadyGuard 取
// (= ConfigExternal.getPrivacyReadyGuard(privacyConfig.waitChannels))
// 二次 await 仍保留: race 后还有可能某个通道没真完成, 二次 await 兜底
//
// 鸿蒙元服务(双轨制):
// 已接入平台隐私托管, 鸿蒙系统自动弹出系统级隐私弹窗.
// 应用层不调 PrivacyManager.show() (会和系统弹窗叠加被驳回).
// #ifdef MP-HARMONY
// 鸿蒙: 走平台隐私托管, markSkipped 写 storage
try {
await Promise.all([_i18nDone, _themeFirstApply, _themeOverride, _remoteConfig])
PrivacyManager.markSkipped()
} catch (e) { console.warn('[privacy] MP-HARMONY markSkipped fail', e); }
// #endif
// #ifndef MP-HARMONY
try {
await PrivacyManager.show({
urlFallback: _buildPrivacyUrlFallback(options),
readyGuard: Promise.all([_i18nDone, _themeFirstApply, _themeOverride, _remoteConfig]),
})
} catch (e) { console.warn('[privacy] show fail', e); }
// #endif
// splash 必须在隐私弹窗决策后再 hide (否则 splash 关掉瞬间弹窗还没渲染, 视觉闪一下)
// mode='fast': 隐私弹窗即将出现, splash 用 80ms 短动画, 让 modal 更快接管视觉
// 避免 splash 和弹窗同时显示造成的"双遮罩"感, 减少约 400ms 启动时间
// 只有 remote-only 模式才用了 splash (其他场景 src 模式不需要等远端)
//
// 关键 (鸿蒙 + 其他平台): 这里只发"软隐藏"信号, splash 实际关闭要等
// splashState._softHide() 看到 _hasMounted && _pageReady 才真关。
// _pageReady 由首页 diy-group 渲染完时调 notifyPageReady() 触发。
// 这样保证 splash **一直显示**, 直到首页 diy 内容真的渲染好,
// 避免 splash 关闭后到 diy 内容出现之间出现白屏。
//
// 鸿蒙端 (mode='strict'):
// 鸿蒙系统弹窗是用户视觉锚点, 应用层 splash 必须**真等到**diy 渲染好
// 才能关, 不走 MOUNT_GRACE_MS/PAGE_READY_GRACE_MS 软隐藏兜底
// (软隐藏兜底 1+2=3s 经常不够用, 会导致 splash 提前 hide → 白屏)
// strict 模式只受 DEFAULT_TIMEOUT=12s 总超时兜底, 实际由 notifyPageReady() 触发
// #ifndef H5
const _needSplash = typeof Lang !== 'undefined' && Lang.isRemoteOnly && Lang.isRemoteOnly();
if (_needSplash) {
splashState.hide({ reason: 'boot-complete', mode: 'fast' });
// 所有平台都用 strict 模式: 不走 1+2s 软隐藏兜底
// splash 真等到 notifyPageReady (diy 渲染好) 或 notifyDiyLoadError (diy 错误) 才关
// DEFAULT_TIMEOUT=12s 总超时仍然兜底
// 避免 splash 提前关导致白屏
splashState.hide({ reason: 'boot-complete', mode: 'strict' });
}
// #endif
@@ -434,6 +472,14 @@
if (uni.getStorageSync('memberInfo')) {
this.$store.commit('setMemberInfo', uni.getStorageSync('memberInfo'));
// PR-MULTI-TURN-KEY-BINDING (2026-09-18): 登录态恢复后清旧 user key
// 避免"A 退出 → B 登录 → 直接复用 A 的会话 ID" 串会话
try {
if (aiService && typeof aiService.onUserChange === 'function') {
aiService.onUserChange();
}
} catch (e) { /* ignore */ }
// 查询购物车信息
this.$store.dispatch('getCartNumber');
}
@@ -462,6 +508,16 @@
},
onShow: function(options) {
// #ifdef MP
// 微信小程序"重新进入小程序"(...) 等场景: onLaunch 不重跑,但模块级内存缓存仍在,
// 会让 cachedStorage / 语言包缓存继续返回进入前的旧值。首次 onShow 是启动展示,
// 之后每次 onShow(含 ... 重新进入、从后台切回前台)都视为重新进入,主动失效缓存并重新对齐。
if (_appHasShown) {
try { Lang.onAppReentry(); } catch (e) {}
// 重新进入小程序(从后台切回 / "重新进入小程序"菜单): 标记需要弹出启动广告
try { markNeedStartupAd(); } catch (e) {}
}
_appHasShown = true;
// 自动授权登录
this.getAuthInfo();
if (this.$store.state.token) {

View File

@@ -118,6 +118,8 @@
.goods-video video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.goods-video .uni-video-cover {
@@ -1223,6 +1225,7 @@
}
.popup-layer {
position: relative;
background: #fff;
.head-wrap {
font-size: $font-size-toolbar;

File diff suppressed because it is too large Load Diff

View File

@@ -63,7 +63,7 @@ if (process?.env?.NODE_ENV === 'development') {
}
// #endif
const { uniacid = 0, domain = defaultDomain } = localDevConfig ?? { uniacid: 0, domain: defaultDomain }
const { uniacid = 0, domain = defaultDomain, aikefuConfigUuid = '' } = localDevConfig ?? { uniacid: 0, domain: defaultDomain }
export default {
/**
@@ -80,6 +80,10 @@ export default {
//api请求地址
baseUrl: domain,
// aikefu 智能客服配置 uuid (媒体上传必填; 后端 /api/kefu/info 目前不返回该值,
// 需在 .local.config.js 对应环境配置里手动填写 aikefuConfigUuid: 'xxx')
aikefuConfigUuid: aikefuConfigUuid,
// 图片域名
imgDomain: domain,

View File

@@ -4,6 +4,7 @@
*/
import IMAGE_CONFIG from './image-config.js';
import Platform from './platform.js';
import PAGE_KEY_MAP from './util.js';
export class CustomerService {
constructor(vueInstance, externalConfig = null) {
@@ -118,6 +119,16 @@ export class CustomerService {
/**
* 跳转到 AI智能客服页面(AiChat)
*
* 注意:不在此处注入 __dyu=FloatBtn。
* 该标记原本是 diy-float-btn.vue 用来告诉 ai-chat "我是从浮动按钮来的,请隐藏底部 tabBar"。
* 此方法是 customer-service.js 的**通用 AI 客服入口**,被多处复用:
* - hover-nav(悬浮客服按钮)
* - 商品详情页 / 会员中心 / 个人中心 等的"联系客服"按钮
* - DIY 浮动按钮(diy-float-btn 内部已自行注入 __dyu=FloatBtn,这里再注入会重复)
* 若在此处统一注入,会让所有 AI 客服入口都隐藏底部 tabBar,语义错误且侵入性过强。
* hover-nav 需要隐藏 tabBar 的场景,由 hover-nav.vue#handleUnifiedKefuClick
* 自行注入 __dyu=FloatBtn(与 diy-float-btn.vue#onFloatBtnClick 一致)。
*/
openAiChatService() {
try {
@@ -127,7 +138,7 @@ export class CustomerService {
}
// ✅ 修正路径:必须与 pages.json 中注册的路径一致
const aiChatUrl = '/pages_tool/ai-chat/index';
const aiChatUrl = PAGE_KEY_MAP.AI_CHAT_PAGE_URL;
// ✅ 使用 navigateTo 保留返回栈(体验更好)
uni.navigateTo({
@@ -551,6 +562,9 @@ export class CustomerService {
/**
* 打开 AI 智能助手
*
* 注意:不在此处注入 __dyu=FloatBtn,理由同 openAiChatService()。
* 由调用方(hover-nav.vue 等)按需注入。
*/
openAIChat() {
try {
@@ -558,7 +572,7 @@ export class CustomerService {
this.vm.setAiUnreadCount(0);
}
const aiChatUrl = '/pages_tool/ai-chat/index';
const aiChatUrl = PAGE_KEY_MAP.AI_CHAT_PAGE_URL;
uni.navigateTo({
url: aiChatUrl,

View File

@@ -1,6 +1,8 @@
import WxMap from 'common/js/map-wx-jssdk.js';
import Config from '@/common/js/config.js';
import util from '@/common/js/util.js';
import { classifyHttpError, httpErrorKey } from '@/common/js/http-error.js';
import { consumeNeedStartupAd, isColdLaunchPending } from '@/common/js/startup-ad.js';
let systemInfo = util.getDeviceInfo();
@@ -51,10 +53,15 @@ export default {
lastDiyInfoTime: 0, // 上次成功加载的时间戳
lastDiyInfoLang: '', // 上次加载时的语言,语言切换时强制刷新
diyInfoTtl: 3 * 60 * 1000, // 3分钟内不重复请求
// diy 数据网络加载失败时的页面内错误提示(比 showModal 在各端更可靠)
diyLoadError: false,
diyLoadErrorMsg: '',
diyLoadErrorUrl: '', // 出错的网络请求地址
//启动广告
adv:{},
adv: {},
};
},
onLoad(option) {
@@ -117,10 +124,10 @@ export default {
// 关闭定位
this.enterDefaultStore();
}
},
onShow() {
this.init();
},
onHide() {
@@ -205,12 +212,12 @@ export default {
}
},
methods: {
play(){
play() {
},
async init() {
// 定位信息过期后,重新获取定位
if(this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
if (this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
this.$util.getLocation({
fail: (res) => {
// 拒绝定位,进入默认总店
@@ -226,6 +233,7 @@ export default {
}
}
console.log('[DIY][init] calling getDiyInfo, storeToken=', !!this.storeToken);
await this.getDiyInfo();
//获取启动广告
await this.getDiyAdv();
@@ -283,50 +291,159 @@ export default {
}, 50);
// #endif
},
async getDiyAdv(){
async getDiyAdv() {
//启动广告
let res = await this.$api.sendRequest({
url: '/api/diyview/getstartadv',
data: {},
async: false
});
this.adv = res.value
// 弹框形式,首次弹出 1,每次弹出 0
if(this.adv.advshow == 1){
setTimeout(() => {
if (res.value.advtype == 1) {
// 接口把启动广告配置放在 data 字段(少数环境也可能放在 value), 两者兼容,
// 避免取到 undefined 后模板 v-if 抛错导致 uni-popup 不渲染、真机广告弹不出来
let advData = (res && (res.data != null ? res.data : res.value)) || {};
this.adv = advData;
// 后台配置: advshow=1 开启启动广告; advtype 决定弹出策略
// advtype == 1: 首次弹出 —— 仅第一次进入小程序弹出(持久化标记, 清缓存后可再弹)
// advtype == 0: 每次弹出 —— 每次"重新进入小程序"都弹出(不含 Tab 切换回首页)
if (this.adv.advshow == 1) {
setTimeout(async () => {
// 隐私协议未同意时, 先等用户点击隐私协议(同意/拒绝)关闭弹窗,
// 否则广告弹窗会被隐私弹窗(z-index:5000)盖住, 真机上表现为"点了隐私协议后广告不弹"
await this._waitPrivacyResolved();
if (!this.$refs.uniPopupWindow) return;
// 先判定本次是否需要弹出, 避免无谓的图片预加载
let shouldOpen = false;
let isFirstType = false;
if (this.adv.advtype == 1) {
// 首次弹出: 从未展示过才弹
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
this.$refs.uniPopupWindow && popwindow_count == 1)) {
this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
if (popwindow_count == '' || popwindow_count == 0) {
shouldOpen = true;
isFirstType = true;
}
} else if (res.value.advtype == 0) {
this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
} else {
// 每次弹出: 冷启动首次 或 真正"重新进入小程序"(App 前后台切换)时弹出,
// 由 App.onShow 在重新进入时置位的信号驱动, 切 Tab 不会触发 App.onShow 故不弹
if (consumeNeedStartupAd() || isColdLaunchPending()) {
shouldOpen = true;
}
}
if (!shouldOpen) return;
// 关键: 广告图片是网络图, 而 uni-popup 用 v-if 在 open() 时才渲染 slot,
// 图片要等弹窗打开后才开始请求/解码, 真机网络慢时就会"一截一截"逐步显示。
// 先把所有广告图片预加载进本地缓存, 全部就绪后再 open, 使弹窗一次性完整出现。
await this._preloadAdvImages(this.adv.list);
if (!this.$refs.uniPopupWindow) return;
this.$refs.uniPopupWindow.open();
if (isFirstType) {
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
}
}, 500);
}
},
/**
* 等待隐私协议流程结束后再弹启动广告
* - 鸿蒙元服务: 隐私由系统托管, 应用层不弹自建弹窗, 直接放行
* - 已同意过(storage privacyAgreed): 无需等待, 直接放行
* - 未同意: 监听 PrivacyManager 广播的 privacy:agreed / privacy:disagreed,
* 用户点击隐私协议(同意/拒绝)关闭弹窗后放行
* - 兜底超时: 隐私协议因规则未弹等情况永不 emit 时也要弹广告, 避免卡死
* @param {number} [maxWait=15000]
* @returns {Promise<void>}
*/
_waitPrivacyResolved(maxWait = 15000) {
// 鸿蒙元服务: 隐私协议由系统托管, 应用层不弹自建隐私弹窗, 无需等待
// #ifdef MP-HARMONY
return Promise.resolve();
// #endif
// 已经同意过 → 隐私弹窗不会再出现, 直接放行
if (uni.getStorageSync('privacyAgreed')) return Promise.resolve();
return new Promise((resolve) => {
let done = false;
const finish = () => {
if (done) return;
done = true;
uni.$off('privacy:agreed', finish);
uni.$off('privacy:disagreed', finish);
clearTimeout(timer);
resolve();
};
uni.$on('privacy:agreed', finish);
uni.$on('privacy:disagreed', finish);
// 兜底: 隐私协议因规则未弹 / 一直未处理时, 超时后也要弹广告
const timer = setTimeout(finish, maxWait);
});
},
// 无法从网络获取 diy 数据时:在页面内渲染错误横幅(各端可靠、一定可见)
// 同时通过 uni.$emit 通知 splash-state 关闭启动屏 (否则 strict 模式永远不关)
// @param {Object|string} [err] 网络异常对象 {errMsg, statusCode} / 服务端消息字符串
// @param {string} [url] 出错的请求地址(完整 URL),用于横幅展示
// @param {string} [errorType] 错误类型: 'network' | 'no-response' | 'business'
_showDiyLoadError(err, url, errorType) {
this.diyLoadErrorMsg = this._buildDiyErrorMsg(err);
this.diyLoadErrorUrl = url || '';
this.diyLoadError = true;
// 通知 splash: diy 加载失败, 启动屏应该让位给错误横幅
// 用 uni.$emit 而非直接 import splash-state, 避免循环依赖
// reason 拼成 'diy-{errorType}-error' 方便业务方区分 (splash:diy-error 事件)
const reason = errorType ? `diy-${errorType}-error` : 'diy-load-error'
try { uni.$emit && uni.$emit('diy:load-error', { reason, errorType, err, url }); } catch (e) { }
},
// 根据错误信息组织更详细的提示文案
// 说明:remote-only 模式下 $lang 可能返回空串,故统一用 `|| 中文兜底` 保证非空
_buildDiyErrorMsg(err) {
const info = classifyHttpError(err);
// 服务端明确返回的业务消息(字符串):直接透传
if (info.type === 'business') return info.raw;
const key = httpErrorKey(info.type);
let reason = this.$lang(key);
// HTTP 状态码类错误:把 statusCode 拼到 reason 后面
if (info.statusCode) reason += '(' + info.statusCode + ')';
// empty / unknown 不走模板,直接返回通用网络异常
if (info.type === 'empty' || info.type === 'unknown') return reason;
const tpl = this.$lang('diy.loadFailTpl', { reason });
return tpl;
},
// 错误横幅「重试」入口
retryDiyInfo() {
this.diyLoadError = false;
this.diyLoadErrorMsg = '';
this.diyLoadErrorUrl = '';
this.getDiyInfo(true);
},
async getDiyInfo(force = false) {
// 节流:正在请求 / N 秒内已加载过 / 语言未变 -> 跳过
const now = Date.now();
const currentLang = uni.getStorageSync("lang") || '';
console.log('[DIY][getDiyInfo] start', 'force=', force, 'id=', this.id, 'name=', this.name, 'lang=', currentLang, 'loading=', this.diyInfoLoading, 'lastAt=', this.lastDiyInfoTime, 'lastLang=', this.lastDiyInfoLang);
if (!force) {
if (this.diyInfoLoading) return;
if (this.diyInfoLoading) {
console.log('[DIY][getDiyInfo] skip: already loading');
return;
}
if (this.lastDiyInfoTime && (now - this.lastDiyInfoTime) < this.diyInfoTtl
&& this.lastDiyInfoLang === currentLang) {
console.log('[DIY][getDiyInfo] skip: throttled by ttl');
return;
}
}
this.diyInfoLoading = true;
let res;
// 出错时用于展示的完整请求地址(Request URL),与 http.js 拼接/归一化方式保持一致
const diyInfoUrl = '/api/diyview/info';
const diyInfoFullUrl = ((Config.baseUrl || '') + diyInfoUrl).replace(/(?<!:)\/+/g, '/');
try {
res = await this.$api.sendRequest({
url: '/api/diyview/info',
url: diyInfoUrl,
data: {
id: this.id,
name: this.name,
@@ -335,19 +452,30 @@ export default {
async: false
});
} catch (e) {
console.error('getDiyInfo request failed', e);
console.error('[DIY][getDiyInfo] request failed', e);
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
this.$util.showToast({
title: this.$lang('diy.networkError')
});
this.diyInfoLoading = false;
// 无法从网络获取数据时,页面内显示错误横幅并提供重试(带详细原因 + 请求地址)
// errorType='network': 网络异常 (uni.request catch)
this._showDiyLoadError(e, diyInfoFullUrl, 'network');
return;
}
this.diyInfoLoading = false;
console.log('[DIY][getDiyInfo] got response', 'code=', res && res.code, 'hasData=', !!(res && res.data), 'valueType=', res && res.data && typeof res.data.value, 'valueLen=', res && res.data && (typeof res.data.value === 'string' ? res.data.value.length : (res.data.value ? res.data.value.length : null)));
if (!res || res.code != 0 || !res.data) {
console.warn('[DIY][getDiyInfo] invalid response', JSON.stringify(res));
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
// 完全没有拿到网络响应,视为无法从网络获取数据,页面内显示错误横幅
if (!res) {
// errorType='no-response': 完全没有 res 对象
this._showDiyLoadError(null, diyInfoFullUrl, 'no-response');
// 保持原有数据结构,仅清空 value,避免鸿蒙下重新布局
this.diyData = { ...(this.diyData || {}), value: [] };
return;
}
if (res && res.code == -3) {
this.$util.showToast({
title: res.message
@@ -357,9 +485,10 @@ export default {
return;
}
this.$util.showToast({
title: this.$lang('diy.noDiyData')
});
// 拿到响应但业务失败 / 无数据(如接口 404 返回 200+错误码、code!=0)
// 同样视为无法获取到 diy 数据,页面内显示错误横幅
// errorType='business': 业务失败 (code!=0 / 消息提示)
this._showDiyLoadError(res && res.message, diyInfoFullUrl, 'business');
// 保持原有数据结构,仅清空 value,避免鸿蒙下重新布局
this.diyData = { ...(this.diyData || {}), value: [] };
return;
@@ -367,10 +496,20 @@ export default {
this.lastDiyInfoTime = now;
this.lastDiyInfoLang = currentLang;
// 成功加载后清除错误提示
this.diyLoadError = false;
this.diyLoadErrorMsg = '';
this.diyLoadErrorUrl = '';
let diyDataValue = res.data;
if (diyDataValue.value) {
this.diyData = JSON.parse(diyDataValue.value);
try {
this.diyData = JSON.parse(diyDataValue.value);
} catch (parseErr) {
console.error('[DIY][getDiyInfo] JSON.parse(value) failed', parseErr, 'value preview=', String(diyDataValue.value).slice(0, 200));
throw parseErr;
}
console.log('[DIY][getDiyInfo] parsed diyData', 'globalKeys=', this.diyData && this.diyData.global ? Object.keys(this.diyData.global) : null, 'valueCount=', this.diyData && this.diyData.value && this.diyData.value.length, 'topIndexValue before=', this.topIndexValue);
// 导航栏标题要根据语言环境切换
// 优先使用 title_map 多语言 map,没有则回退到 title / en_title
@@ -379,22 +518,22 @@ export default {
this.mpCollect = this.diyData.global.mpCollect;
this.setPublicShare();
/* if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
// 弹框形式,首次弹出 1,每次弹出 0
setTimeout(() => {
if (this.diyData.global.popWindow.count == 1) {
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
this.$refs.uniPopupWindow && popwindow_count == 1)) {
/* if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
// 弹框形式,首次弹出 1,每次弹出 0
setTimeout(() => {
if (this.diyData.global.popWindow.count == 1) {
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
this.$refs.uniPopupWindow && popwindow_count == 1)) {
this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
}
} else if (this.diyData.global.popWindow.count == 0) {
this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
}
} else if (this.diyData.global.popWindow.count == 0) {
this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
}
}, 500);
}*/
}, 500);
}*/
// 修改diy数据结构排序
let searchIndex = -1;
@@ -458,11 +597,51 @@ export default {
this.openBottomNav = this.diyData.global.openBottomNav;
}
this.isShowCopyRight = true;
console.log('[DIY][getDiyInfo] done', 'topIndexValue after=', this.topIndexValue && this.topIndexValue.componentName, 'valueCount=', this.diyData.value.length, 'openBottomNav=', this.openBottomNav, 'isShowCopyRight=', this.isShowCopyRight);
} else {
console.warn('[DIY][getDiyInfo] no value in res.data', JSON.stringify(diyDataValue).slice(0, 200));
}
},
/**
* 预加载启动广告图片
* 广告弹窗由 uni-popup 在 open() 时才用 v-if 渲染内容, 图片是网络图,
* 若等到弹窗打开后才开始加载, 真机网络慢时会出现"一截一截"逐步显示。
* 这里提前把图片下载进本地缓存, 等全部加载完成(或超时)后再弹出,
* 使弹窗一次性完整呈现。
* @param {Array} list - adv.list, 元素形如 { imageUrl, link }
* @param {number} [timeout=4000] - 单张兜底超时, 避免个别图片卡住导致广告永不弹出
* @returns {Promise<void>}
*/
_preloadAdvImages(list, timeout = 4000) {
if (!list || !list.length) return Promise.resolve();
const tasks = list.map((item) => {
return new Promise((resolve) => {
const url = (item && item.imageUrl) ? this.$util.img(item.imageUrl) : '';
if (!url) return resolve();
let done = false;
const finish = () => {
if (done) return;
done = true;
clearTimeout(timer);
resolve();
};
const timer = setTimeout(finish, timeout);
try {
// getImageInfo 会下载图片并写入本地缓存, 之后 image 组件可直接命中缓存
uni.getImageInfo({
src: url,
success: finish,
fail: finish
});
} catch (e) {
finish();
}
});
});
return Promise.all(tasks).then(() => {});
},
closePopupWindow() {
this.$refs.uniPopupWindow.close();
uni.setStorageSync(this.id + this.name + '_popwindow_count', -1);
},
closeCollectPopupWindow() {
this.$refs.collectPopupWindow.close();

View File

@@ -44,7 +44,7 @@ export class EventSafety {
// 安全的方法
matches: (selector) => EventSafety.safeMatches(target, selector),
// 数据集
dataset: target.dataset || {}
dataset: target?.dataset || {}
}
return safeTarget

View File

@@ -0,0 +1,112 @@
/**
* form-platform-mixin.js
*
* 表单组件共用的平台检测 mixin
*
* 集中维护 3 个 computed:
* - platform 当前运行平台 key(与后端 formConfig.terminal 键名对齐)
* - platformAliases 后端键名 → 内部 platform 名 兼容层
* - platformConfigKeys 当前平台的有效配置键集合(用于从 formConfig.terminal 查找)
*
* 消费方:
* - components/ns-form/ns-form.vue
* - components/ns-newform/ns-newform.vue
* - 任何需要按端读取 formConfig.terminal.{h5|weapp|harmony|app} 的表单组件
*
* 设计原则:
* 1. 单一真值:避免 ns-form / ns-newform 各自维护导致漂移
* 2. 纯 computed mixin:不依赖 props/data/methods,便于跨组件复用
* 3. 不依赖 util.js 等其它模块,避免循环依赖
* 4. 通过 mixins: [...] 引入,组件侧不再写平台判断代码
*
* 用法:
* import formPlatformMixin from '@/common/js/form-platform-mixin.js';
* export default {
* mixins: [formPlatformMixin],
* computed: {
* config() {
* const cur = this.platform;
* const keys = this.platformConfigKeys;
* // ...
* }
* }
* };
*/
export default {
computed: {
/**
* 当前运行平台标识(与后端 formConfig.terminal 键名对齐)
* 后端 terminal 键:h5 / weapp / harmony / app / mp-alipay / mp-baidu / mp-toutiao
*/
platform() {
// #ifdef H5
return 'h5';
// #endif
// #ifdef MP-WEIXIN
return 'weapp';
// #endif
// #ifdef MP-ALIPAY
return 'mp-alipay';
// #endif
// #ifdef MP-BAIDU
return 'mp-baidu';
// #endif
// #ifdef MP-TOUTIAO
return 'mp-toutiao';
// #endif
// #ifdef APP-PLUS
return 'app';
// #endif
// #ifdef MP-HARMONY
return 'harmony';
// #endif
// #ifdef QUICKAPP-WEBVIEW
return 'quickapp';
// #endif
return 'h5';
},
/**
* 后端键名 → 内部 platform 名 兼容层
* canonical 与 platform() 返回值一致;别名为兼容 DB 旧 app_type(upgrade-to-ai-agent.sql)
* 及 uniapp / 设计器的历史命名。键名严格区分大小写。
*/
platformAliases() {
return {
'h5': 'h5',
'weapp': 'weapp',
'mp-weixin': 'weapp',
'wechat': 'weapp',
'harmony': 'harmony',
'app': 'app',
'app-plus': 'app',
'mp-alipay': 'mp-alipay',
'aliapp': 'mp-alipay',
'alipay': 'mp-alipay',
'mp-baidu': 'mp-baidu',
'baiduapp': 'mp-baidu',
'baidu': 'mp-baidu',
'mp-toutiao': 'mp-toutiao',
'toutiao': 'mp-toutiao'
};
},
/**
* 当前平台的有效配置键集合
* 用于 config() 中查找 formConfig.terminal 下的平台差异化配置:
* - 后端格式:formConfig.terminal = { h5: {...}, weapp: {...}, harmony: {...} }
* - 旧式扁平:formConfig[platformKey] = { ... }
* 返回所有映射到当前 platform 的后端键名,方便两种结构都能命中。
*/
platformConfigKeys() {
const cur = this.platform;
const aliases = this.platformAliases;
const keys = [];
Object.keys(aliases).forEach(k => {
if (aliases[k] === cur) keys.push(k);
});
// 加入当前平台名(兼容 formConfig[platform] 这种扁平写法)
if (keys.indexOf(cur) === -1) keys.push(cur);
return keys;
}
}
};

View File

@@ -79,114 +79,127 @@ export default {
},
methods: {
// 处理商品详情数据
handleGoodsSkuData() {
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
//设置标题
// this.$langConfig.title(this.navbarData.title);
if (this.goodsSkuDetail.config) {
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
}
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
this.modifyGoodsInfo();
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
preview: this.preview,
source_member: this.source_member,
posterParams: this.posterParams,
posterApi: this.posterApi,
shareUrl: this.shareUrl,
goodsRoute: this.goodsRoute,
isVirtual: this.goodsSkuDetail.is_virtual,
deliveryType: this.goodsSkuDetail.express_type,
whetherCollection: this.goodsSkuDetail.is_collect,
evaluateConfig: this.goodsSkuDetail.evaluate_config,
evaluateList: this.goodsSkuDetail.evaluate_list,
evaluateCount: this.goodsSkuDetail.evaluate_count
});
//媒体
if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
else this.goodsSkuDetail.sku_images = [];
}
// 多规格时合并主图
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
}
let maxHeight = '';
let systemInfo = uni.getSystemInfoSync();
this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
if (typeof item.pic_spec == "string")
item.pic_spec = item.pic_spec.split('*');
let ratio = item.pic_spec[0] / systemInfo.windowWidth;
item.pic_spec[0] = item.pic_spec[0] / ratio;
item.pic_spec[1] = item.pic_spec[1] / ratio;
if (!maxHeight || maxHeight > item.pic_spec[1]) {
maxHeight = item.pic_spec[1];
async handleGoodsSkuData() {
// 鸿蒙兼容: 外层包 try/catch, 任何同步抛错都不会导致 page 整体空白
try {
if (this.goodsSkuDetail.config) {
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
}
});
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || this.$lang('unit.piece');
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
// 当前商品SKU规格
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
this.modifyGoodsInfo();
// 商品属性
if (this.goodsSkuDetail.goods_attr_format) {
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
for (var j = 0; j < goods_attr_format.length; j++) {
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
// 初始化商品详情视图数据
try {
if (this.$refs && this.$refs.goodsDetailView) {
this.$refs.goodsDetailView.init({
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
preview: this.preview,
source_member: this.source_member,
posterParams: this.posterParams,
posterApi: this.posterApi,
shareUrl: this.shareUrl,
goodsRoute: this.goodsRoute,
isVirtual: this.goodsSkuDetail.is_virtual,
deliveryType: this.goodsSkuDetail.express_type,
whetherCollection: this.goodsSkuDetail.is_collect,
evaluateConfig: this.goodsSkuDetail.evaluate_config,
evaluateList: this.goodsSkuDetail.evaluate_list,
evaluateCount: this.goodsSkuDetail.evaluate_count
});
}
} catch (e) {
console.error('goodsDetailView.init failed:', e);
}
//媒体
if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
else this.goodsSkuDetail.sku_images = [];
}
// 多规格时合并主图
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
}
let maxHeight = '';
let systemInfo = uni.getSystemInfoSync();
this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
if (typeof item.pic_spec == "string")
item.pic_spec = item.pic_spec.split('*');
let ratio = item.pic_spec[0] / systemInfo.windowWidth;
item.pic_spec[0] = item.pic_spec[0] / ratio;
item.pic_spec[1] = item.pic_spec[1] / ratio;
if (!maxHeight || maxHeight > item.pic_spec[1]) {
maxHeight = item.pic_spec[1];
}
});
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || this.$lang('unit.piece');
// 当前商品SKU规格
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
// 商品属性
if (this.goodsSkuDetail.goods_attr_format) {
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
for (var j = 0; j < goods_attr_format.length; j++) {
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
}
}
}
}
}
// 商品SKU格式
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
// 商品SKU格式
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
// 商品详情
if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
// 商品详情
if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
//商品服务
if (this.goodsSkuDetail.goods_service) {
for (let i in this.goodsSkuDetail.goods_service) {
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
//商品服务
if (this.goodsSkuDetail.goods_service) {
for (let i in this.goodsSkuDetail.goods_service) {
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
}
}
}
this.contactData = {
title: this.goodsSkuDetail.sku_name,
path: this.shareUrl,
img: this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
})
};
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
this.contactData = {
title: this.goodsSkuDetail.sku_name,
path: this.shareUrl,
img: this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
})
};
try {
if (this.$refs && this.$refs.goodsPromotion) {
this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
}
} catch (e) { console.error('goodsPromotion refresh failed:', e); }
if (this.goodsRoute != '/pages_goods/detail') this.setPublicShare();
// this.getBarrageData();
if (this.addonIsExist.form) {
this.getGoodsForm();
// 性能优化: 商品表单(留言表单)仅在商品详情打开"立即留言"弹窗时才需要,
// 不再阻塞首次渲染。改为在后台并发请求, 用户真正打开弹窗时数据已就绪。
try {
this._goodsFormPromise = this.getGoodsForm();
} catch (e) {
console.error('getGoodsForm kicked off failed:', e);
}
} catch (e) {
console.error('handleGoodsSkuData failed:', e);
}
},
/**
@@ -321,17 +334,76 @@ export default {
},
/**
* 获取商品表单
* 后端 goodsform 接口与 info() 对齐,返回 {json_data, form_config(camelCase),
* form_name, form_tip, form_banner, show_banner, show_tip}。
* 全部字段都落到 goodsSkuDetail 上:表单字段 / 样式 / banner / tip 元数据,
* 给 detail.vue 的 diy-form 直接消费。所有分支都做兜底初始化,避免下游拿到 undefined。
*/
getGoodsForm() {
this.$api.sendRequest({
url: "/form/api/form/goodsform",
data: {
goods_id: this.goodsSkuDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
}
});
async getGoodsForm() {
// 防御: sku 切换/数据未到时 goods_id 可能为 0/空, 此时直接走空数据分支,
// 避免后端拿到非法 goods_id 导致 4xx/5xx 后还把脏数据塞给前端。
if (!this.goodsSkuDetail || !this.goodsSkuDetail.goods_id) {
const emptyFn = () => {
this.$set(this.goodsSkuDetail, 'goods_form', []);
this.$set(this.goodsSkuDetail, 'goods_form_config', {});
this.$set(this.goodsSkuDetail, 'goods_form_name', '');
this.$set(this.goodsSkuDetail, 'goods_form_tip', '');
this.$set(this.goodsSkuDetail, 'goods_form_banner', '');
this.$set(this.goodsSkuDetail, 'goods_form_show_banner', false);
this.$set(this.goodsSkuDetail, 'goods_form_show_tip', false);
};
emptyFn();
return;
}
let res;
try {
res = await this.$api.sendRequest({
url: "/form/api/form/goodsform",
data: {
goods_id: this.goodsSkuDetail.goods_id,
format: 'object'
},
async: false
});
} catch (e) {
console.warn('getGoodsForm request failed', e);
res = null;
}
const empty = () => {
this.$set(this.goodsSkuDetail, 'goods_form', []);
this.$set(this.goodsSkuDetail, 'goods_form_config', {});
this.$set(this.goodsSkuDetail, 'goods_form_name', '');
this.$set(this.goodsSkuDetail, 'goods_form_tip', '');
this.$set(this.goodsSkuDetail, 'goods_form_banner', '');
this.$set(this.goodsSkuDetail, 'goods_form_show_banner', false);
this.$set(this.goodsSkuDetail, 'goods_form_show_tip', false);
};
if (!res || res.code != 0 || !res.data) {
empty();
return;
}
if (Array.isArray(res.data)) {
// 旧版扁平数组兼容
empty();
this.$set(this.goodsSkuDetail, 'goods_form', res.data);
return;
}
this.$set(this.goodsSkuDetail, 'goods_form', res.data.json_data || []);
this.$set(this.goodsSkuDetail, 'goods_form_config', res.data.form_config || {});
this.$set(this.goodsSkuDetail, 'goods_form_name', res.data.form_name || '');
this.$set(this.goodsSkuDetail, 'goods_form_tip', res.data.form_tip || '');
this.$set(this.goodsSkuDetail, 'goods_form_banner', res.data.form_banner || '');
// show_banner/show_tip 后端存 0/1,归一化 boolean
this.$set(
this.goodsSkuDetail,
'goods_form_show_banner',
res.data.show_banner == 1 ? true : (res.data.show_banner === 0 ? false : true)
);
this.$set(
this.goodsSkuDetail,
'goods_form_show_tip',
res.data.show_tip == 1 ? true : (res.data.show_tip === 0 ? false : true)
);
}
},
/**

101
common/js/http-error.js Normal file
View File

@@ -0,0 +1,101 @@
/**
* 通用网络/接口错误分类器
*
* 适用场景:
* - uniapp 各端统一错误分类(diy.js / 商品 / 订单 / 自定义页面等)
* - 任意传入 {statusCode, errMsg, message} 形式错误对象的位置
*
* 设计要点:
* 1) 与 Vue / $lang 解耦:不调用任何 i18n 函数,只返回分类结果 + 原始错误字段
* 调用方拿到 type 后,自行决定使用 $lang('http.timeout') / $lang('http.serverError')
* 或其它命名空间的文案,完全保持各模块原有的 key 命名习惯
* 2) 通用网络/接口错误统一映射到 common.http.* 命名空间:
* - http.networkError: 通用网络异常(兜底)
* - http.timeout: 请求超时
* - http.serverError: 服务器错误(5xx)
* - http.notFound: 接口不存在(404)
* - http.auth: 无访问权限(401/403)
* - http.unknown: 其他非 2xx
* 3) 兼容多种错误对象形态:
* - uniapp request: { statusCode, errMsg, data }
* - axios: { response: { status }, message }
* - fetch / 原生: { message, name }
*
* @param {Object|string} err 错误对象或后端业务消息字符串
* @returns {{ type: string, statusCode?: number, errMsg?: string, raw?: any }}
* - type 取值:
* 'business' - 后端返回的业务消息字符串(已透传到 raw)
* 'empty' - 错误对象为空
* 'notFound' - HTTP 404
* 'server' - HTTP 5xx
* 'auth' - HTTP 401 / 403
* 'request' - 其它非 2xx 状态码
* 'timeout' - errMsg 含 timeout
* 'network' - errMsg 含 connect / network / fail
* 'unknown' - 无法分类
* - statusCode: 若有则原样返回
* - errMsg: 归一后的原始消息
* - raw: 原始输入,方便调用方进一步处理
*/
export function classifyHttpError(err) {
// 1) 无错误对象
if (!err) {
return { type: 'empty', raw: err };
}
// 2) 后端直接返回的业务消息(字符串)
if (typeof err === 'string') {
return { type: 'business', raw: err };
}
// 3) 字段归一(兼容 uni / axios / 原生 Error)
const statusCode = err.statusCode
?? err.response?.status
?? err.status;
const errMsg = err.errMsg || err.message || '';
if (statusCode) {
if (statusCode === 404) return { type: 'notFound', statusCode, errMsg, raw: err };
if (statusCode >= 500) return { type: 'server', statusCode, errMsg, raw: err };
if (statusCode === 401 || statusCode === 403) return { type: 'auth', statusCode, errMsg, raw: err };
return { type: 'request', statusCode, errMsg, raw: err };
}
if (/timeout/i.test(errMsg)) {
return { type: 'timeout', errMsg, raw: err };
}
if (/(connect|network|fail)/i.test(errMsg)) {
return { type: 'network', errMsg, raw: err };
}
return { type: 'unknown', errMsg, raw: err };
}
/**
* 根据 classifyHttpError 的结果,映射到 common.http.* 命名空间的 i18n key
*
* 通用网络/接口错误统一走 http.*,调用方通过 $lang(key) 解析文案。
* 原 diy.errTimeout 这类 key 已合并到 http.*,保持项目国际化更专业。
*
* @param {string} type classifyHttpError 返回的 type
* @returns {string|null} 对应的 http.* key;type='business' 时返回 null(透传 raw)
*/
export function httpErrorKey(type) {
switch (type) {
case 'empty': return 'http.networkError';
case 'business': return null; // 透传,不用 key
case 'notFound': return 'http.notFound';
case 'server': return 'http.serverError';
case 'auth': return 'http.auth';
case 'request': return 'http.unknown';
case 'timeout': return 'http.timeout';
case 'network': return 'http.networkError';
case 'unknown':
default: return 'http.networkError';
}
}
export default {
classifyHttpError,
httpErrorKey,
};

View File

@@ -44,6 +44,15 @@ function _sleep(ms) {
}
function _makeRequest(url, method, data, header, dataType, responseType, timeout) {
const reqId = 'req_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
const reqStart = Date.now();
console.log('[HTTP][REQUEST]', reqId, method, url, JSON.stringify({
data: data,
header: header,
dataType: dataType,
responseType: responseType,
timeout: timeout
}));
return new Promise((resolve, reject) => {
uni.request({
url: url,
@@ -54,6 +63,7 @@ function _makeRequest(url, method, data, header, dataType, responseType, timeout
responseType: responseType,
timeout: timeout,
success: (res) => {
console.log('[HTTP][RESPONSE]', reqId, method, url, 'statusCode=', res.statusCode, 'cost=', (Date.now() - reqStart) + 'ms', JSON.stringify(res.data));
if (res.statusCode && [200, 500].indexOf(res.statusCode) == -1) {
reject({ errMsg: `request:fail statusCode=${res.statusCode}`, statusCode: res.statusCode });
return;
@@ -73,6 +83,7 @@ function _makeRequest(url, method, data, header, dataType, responseType, timeout
resolve(res.data);
},
fail: (res) => {
console.error('[HTTP][FAIL]', reqId, method, url, 'cost=', (Date.now() - reqStart) + 'ms', JSON.stringify(res));
reject(res);
}
});
@@ -87,15 +98,20 @@ async function _requestWithRetry(params, url, method, data, header, dataType, re
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
if (attempt > 0) {
console.log('[HTTP][RETRY]', method, url, 'attempt=', attempt, 'maxRetries=', maxRetries);
}
const result = await _makeRequest(url, method, data, header, dataType, responseType, timeout);
return result;
} catch (err) {
lastError = err;
lastStatusCode = err && err.statusCode;
console.warn('[HTTP][RETRY-FAIL]', method, url, 'attempt=', attempt, 'errMsg=', err && err.errMsg, 'statusCode=', lastStatusCode);
if (attempt >= maxRetries || !_shouldRetry(err.errMsg)) {
break;
}
const delay = RETRY_DELAY_BASE * Math.pow(2, attempt);
console.log('[HTTP][RETRY-WAIT]', method, url, 'delay=', delay + 'ms');
await _sleep(delay);
}
}
@@ -207,6 +223,7 @@ export default {
}
},
uploadBase64(params) {
console.log('[HTTP][REQUEST] uploadBase64', Config.baseUrl + '/api/upload/headimgBase64');
uni.request({
url: Config.baseUrl + '/api/upload/headimgBase64',
method: 'POST',
@@ -221,14 +238,17 @@ export default {
dataType: 'json',
responseType: 'text',
success: res => {
console.log('[HTTP][RESPONSE] uploadBase64', 'statusCode=', res.statusCode, JSON.stringify(res.data));
typeof params.success == 'function' && params.success(res.data);
},
fail: () => {
console.error('[HTTP][FAIL] uploadBase64', JSON.stringify(res));
typeof params.fail == 'function' && params.fail(res);
}
});
},
pullImage(params) {
console.log('[HTTP][REQUEST] pullImage', Config.baseUrl + '/api/upload/headimgPull', 'path=', params.path);
uni.request({
url: Config.baseUrl + '/api/upload/headimgPull',
method: 'POST',
@@ -243,14 +263,17 @@ export default {
dataType: 'json',
responseType: 'text',
success: res => {
console.log('[HTTP][RESPONSE] pullImage', 'statusCode=', res.statusCode, JSON.stringify(res.data));
typeof params.success == 'function' && params.success(res.data);
},
fail: () => {
console.error('[HTTP][FAIL] pullImage', JSON.stringify(res));
typeof params.fail == 'function' && params.fail(res);
}
});
},
upload(params) {
console.log('[HTTP][REQUEST] upload', Config.baseUrl + params.url, 'name=', params.name || 'file');
uni.uploadFile({
url: Config.baseUrl + params.url,
filePath: params.filePath,
@@ -264,9 +287,11 @@ export default {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
success: (res) => {
console.log('[HTTP][RESPONSE] upload', Config.baseUrl + params.url, 'statusCode=', res.statusCode, res.data);
typeof params.success == 'function' && params.success(JSON.parse(res.data));
},
fail: (res) => {
console.error('[HTTP][FAIL] upload', Config.baseUrl + params.url, JSON.stringify(res));
typeof params.fail == 'function' && params.fail(res);
}
});

View File

@@ -284,6 +284,21 @@ export async function loadBundleTree(options = {}) {
const version = String(payload.version || '');
const sign = payload.sign || '';
// 诊断(真机定位用): tree 顶层结构不完整(非对象/为空/缺 common 或 components)时,
// 打印实际拿到的 tree 顶层 key + 请求上下文, 便于排查为什么 isBundleComplete 失败
// (真机上若看到这条 warn, 说明服务端返回了残缺 bundle, 这才是英文回退/ toast 的根因)
if (!tree || typeof tree !== 'object' || !tree.common || !tree.components) {
console.warn(
'[lang-loader] bundle tree INCOMPLETE. ' +
'topLevelKeys=' + JSON.stringify(Object.keys(tree || {})) +
' lang=' + lang +
' appType=' + appType +
' uniacid=' + uniacid +
' version=' + version +
' hasPayloadTree=' + ((payload && payload.tree) !== undefined)
);
}
// 4) 签名校验(可选)
const secret = langConfig.remote.signSecret || '';
const signValid = validateSign(tree, version, sign, secret);

View File

@@ -628,6 +628,26 @@ function loadLangPackSync(lang, path) {
* 获得当前本地语言
* @returns
*/
/**
* 语言切换开关钩子(由后台 shop_info.ischina 决定,经 store/index.js 的 setShopInfo 写入)。
*
* 设计原则: 只"在关闭时清理持久化语种", 绝不在开启态加任何门控 —— 否则一旦 ischina
* 取值/语义判断偏差, 就会误伤"开启双语后切换英文"的正常行为(回归)。
*
* 行为:
* - 后台关闭双语/小程序(ischina 为假): 清掉用户此前持久化到 storage 的语种 + 缓存,
* 使刷新/重新进入时 getCurrentLocale() 回退默认中文, 满足
* "后台关闭双语后, 刷新重新进入必须是中文" 的需求。
* - 后台开启双语(ischina 为真): 不做任何拦截, 完全保持原有"切换英文"行为不变。
*/
function setLangSwitchEnabled(enabled) {
if (!enabled) {
// 关闭语言切换: 清掉持久化语种 + 缓存, 强制回到默认中文
invalidateStorageCache('lang');
try { uni.removeStorageSync('lang'); } catch (e) {}
}
}
function getCurrentLocale() {
// 关键:使用 cachedStorageGet,防止 uni.getStorageSync 触发 Vue 事件导致 lang() 递归
const val = cachedStorageGet('lang', null);
@@ -973,6 +993,13 @@ export default {
*/
getCurrentLocale,
/**
* 语言切换功能开关(后台 shop_info.ischina 决定)。
* 关闭后 getCurrentLocale() 强制返回默认语言(中文),并清掉已持久化的语种。
* 详见本文件 setLangSwitchEnabled 函数与 store/index.js 的 setShopInfo 钩子。
*/
setLangSwitchEnabled,
/**
* 从后端数据中提取当前语言的文案(向后兼容)
* 优先使用 xxx_map 多语言 map,没有则回退到 xxx / en_xxx 二元模式
@@ -1054,6 +1081,13 @@ export default {
// force 失败时 loadBundleTree 内部直接抛错(不回退 cache), 让这里进入 catch
let isComplete1 = isBundleComplete(result.tree);
if (!isComplete1) {
// [debug] 首次拉取的 bundle 不完整: 打印顶层 key, 便于定位远端是否缺 common/components
try {
console.warn('[i18n:boot] bundle incomplete (1st fetch). ' +
'lang=' + lang + ', appType=' + appType + ', uniacid=' + uniacid +
', source=' + (result && result.source) +
', topKeys=' + JSON.stringify(Object.keys(result && result.tree || {})));
} catch (e) {}
// 强制重试前清掉所有 cache, 避免 force 路径残留旧数据
delete remoteTreeCache[_preloadMk];
result = await loadBundleTree({ lang, appType, uniacid, force: true });
@@ -1064,6 +1098,13 @@ export default {
// 不加载本地 lang 兜底(remote-only 模式, 本地 lang 已被 webpack 排除)
let isComplete2 = isBundleComplete(result.tree);
if (!isComplete2) {
// [debug] force 重试后仍不完整: 打印顶层 key, 确认远端确实返回残缺 tree
try {
console.warn('[i18n:boot] bundle incomplete (after force retry). ' +
'lang=' + lang + ', appType=' + appType + ', uniacid=' + uniacid +
', source=' + (result && result.source) +
', topKeys=' + JSON.stringify(Object.keys(result && result.tree || {})));
} catch (e) {}
throw new Error('lang bundle unusable after force retry');
}
@@ -1103,10 +1144,14 @@ export default {
setRemoteStatus('fail', { reason: _reason, lang });
bootCompleted = true;
emitUpdated(lang);
// 注意: 这里已用缓存兜底成功(UI 可用), 不应再标 status:'fail',
// 否则 App.vue 会弹"Failed to load i18n"误报 toast。
// remoteStatus 仍保持 'fail'(上方已 setRemoteStatus), 用于离线指示。
return {
ok: true,
source: 'cache',
status: 'fail',
status: 'ok',
degraded: true,
reason: _errMsg || 'fallback to cache',
lang,
cacheAge: cached.ts ? Date.now() - cached.ts : 0,
@@ -1176,6 +1221,42 @@ export default {
loadOverrides(lang);
},
/**
* 微信小程序"重新进入小程序"(右上角 ... 菜单)场景调用:
* 该操作销毁页面栈重新进首页,但小程序 JS 上下文往往不重置(热重启),
* 于是 App.onLaunch(里面跑 boot 全量初始化)不会重跑,而模块级内存缓存仍在:
* - _storageResultCache(cachedStorage): 可能返回进入前缓存的 lang/uniacid
* - _mergedLangCache / _fieldResultCache: 沿用进入前的翻译结果
* - remote-only 模式下远端 bundle 不会被重新拉取
* 这里主动失效所有内存缓存,并重新对齐远端 bundle,使重新进入后按当前
* storage 的 locale 重新读取并合并,不再沿用旧值。
* 注意: 首次 onShow(启动展示)不应调用本方法,App.vue 负责区分。
*/
onAppReentry() {
// [debug] 验证微信"重新进入小程序"是否真的命中本分支:真机复现后搜 i18n:reentry
try {
console.log('[i18n:reentry] onAppReentry triggered, IS_REMOTE_ONLY=' + IS_REMOTE_ONLY +
', beforeInvalidateLang=' + (cachedStorageGet('lang', null)) +
', beforeInvalidateUniacid=' + (cachedStorageGet('uniacid', null)));
} catch (e) {}
// 1) cachedStorage 失效: 下次 cachedStorageGet 必须重新读 storage(locale/uniacid)
invalidateStorageCache();
// 2) 语言包合并/字段缓存失效,并 bump _overrideVersion → lang() 用当前 locale 重新合并
invalidateLangCaches();
// [debug] 失效后立刻重新读,确认 cachedStorage 已重新走 storage(而非命中旧缓存)
try {
console.log('[i18n:reentry] after invalidate, freshLang=' + getCurrentLocale() +
', freshUniacid=' + getCurrentUniacid());
} catch (e) {}
// 3) remote-only: 重新进入时 onLaunch 不重跑,这里重新拉当前 locale 的 bundle 并推送重渲染
if (IS_REMOTE_ONLY) {
this.boot();
} else {
this.refresh(true);
}
},
/**
* * 订阅远端状态变化(status: 'unknown' | 'ok' | 'fail', detail.reason 有 fail 分类)
* @param {(status:string, detail:object) => void} fn
@@ -1247,7 +1328,7 @@ export default {
const fieldCacheKey = `${locale}__${langPath}__${_overrideVersion}__${field}`;
const cachedFieldResult = _fieldResultCache[fieldCacheKey];
const hasDefault = arguments.length > 1 && typeof arguments[1] === 'string' && arguments[1] !== '';
const __DEV__ = (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production');
if (cachedFieldResult !== undefined) {
let value = cachedFieldResult;
// 没找到翻译
@@ -1256,10 +1337,6 @@ export default {
if (hasDefault) {
return arguments[1];
}
// 生产环境无默认值 → 返回空串(避免用户看到 raw key)
if (!__DEV__) {
return '';
}
// 开发环境 → 返回 raw key(便于发现问题)
return value;
}
@@ -1350,9 +1427,6 @@ export default {
// 有默认值 → 使用默认值
if (hasDefault) {
value = arguments[1];
} else if (!__DEV__) {
// 生产环境无默认值 → 返回空串(避免用户看到 raw key)
value = '';
}
// 开发环境无默认值 → 保留 raw key(便于发现问题)
} else if (arguments.length > 1) {
@@ -1367,7 +1441,7 @@ export default {
if (value == undefined) value = '';
// 多语言调试
if (__DEV__ && field == value) {
if (field == value) {
console.warn(`[i18n] missing key "${field}" in ${langPath || '<root>'} (${locale})`);
}

768
common/js/media-upload.js Normal file
View File

@@ -0,0 +1,768 @@
// common/js/media-upload.js
// ai-chat / ai-agent 媒体上传: 图片 (PHP 中转 + STS 直传) / 音视频 / 其他文件
//
// PR-FRONTEND-MEDIA-UPLOAD (2026-09-16): 之前 ai-chat-tools-panel.vue 引用了
// uploadImage / uploadMedia, 但本文件从未落库, 选图 / 选文件立即抛
// "Cannot find module '@/common/js/media-upload.js'". 此次按
// docs/ai-agent-integration.md §3.4 Step 1 落地, 顺手补 store import (设计稿漏).
//
// 调用方:
// ai-chat-tools-panel.vue → selectImage() / _uploadOneFile()
// ai-chat-message.vue → 直接用 aiService.sendMessage 传 attachments (本模块不出场)
//
// 上传策略:
// 图片: 优先 PHP 中转 (≤2MB 走 backend), 超过或商家选了 oss_sts/auto → STS 直传
// 音视频/文件: 一律 STS 直传 (体积大概率 >2MB)
//
// 端点:
// PHP 中转: POST /<addon>/api/upload/<image|file> multipart/form-data
// STS 凭证: POST /<addon>/api/upload/ossSts application/json
// STS 直传: PUT <provider>/<key> 云存储协议 (4-field STS 或 single-URL)
import aiService from './ai-service.js'
import Config from './config.js'
import store from '@/store/index.js'
const SIZE_LIMIT_PHP_PASSTHROUGH = 2 * 1024 * 1024 // 2MB
const SIZE_LIMIT_H5_COMPRESS = 3 * 1024 * 1024 // 3MB (从 10MB 下调,移动端 H5 体验更流畅)
// PR-FRONTEND-MEDIA-INLINE-BASE64 (2026-09-16): WB Agent J7 inline base64 上限 5MB
// 与 backend WbAgentOsClient::INLINE_MEDIA_LIMIT = 5242880 对齐
// 超过这个 size 后 buildMediaBlocks 会改走 URL fetch 路径, 上限失效
const SIZE_LIMIT_INLINE_BASE64 = 5 * 1024 * 1024 // 5MB (与后端 INLINE_MEDIA_LIMIT 对齐)
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 现代格式 mime 同步后端 guessMimeFromPath
// STS 直传绕过后端 mime 推断, 前端必须自带, 否则附件 mime 降级 application/octet-stream
const EXT_MIME_MAP = {
jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', webp: 'image/webp',
heic: 'image/heic', heif: 'image/heif', avif: 'image/avif',
bmp: 'image/bmp', tif: 'image/tiff', tiff: 'image/tiff',
mp3: 'audio/mpeg', wav: 'audio/wav', aac: 'audio/aac',
m4a: 'audio/mp4', flac: 'audio/flac', ogg: 'audio/ogg',
oga: 'audio/ogg', opus: 'audio/opus', amr: 'audio/amr', wma: 'audio/x-ms-wma',
aiff: 'audio/aiff', aif: 'audio/aiff', ape: 'audio/x-ape', mid: 'audio/midi',
// PR-AV-FULL-SUPPORT (2026-09-24): 全量音视频格式 (与后端 MediaUploadPolicy::guessMimeByExt 对齐)
midi: 'audio/midi', caf: 'audio/x-caf', mka: 'audio/x-matroska', ac3: 'audio/ac3',
mp4: 'video/mp4', mov: 'video/quicktime', avi: 'video/x-msvideo',
mkv: 'video/x-matroska', webm: 'video/webm', flv: 'video/x-flv',
m4v: 'video/x-m4v', wmv: 'video/x-ms-wmv', '3gp': 'video/3gpp',
mpeg: 'video/mpeg', mpg: 'video/mpeg', ts: 'video/mp2t',
'3g2': 'video/3gpp2', f4v: 'video/x-flv', mpe: 'video/mpeg', m2v: 'video/mpeg',
m2ts: 'video/mp2t', mts: 'video/mp2t', ogv: 'video/ogg', vob: 'video/mpeg',
asf: 'video/x-ms-asf', rm: 'application/vnd.rn-realmedia',
rmvb: 'application/vnd.rn-realmedia-vbr', divx: 'video/x-divx',
doc: 'application/msword',
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
ppt: 'application/vnd.ms-powerpoint',
pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
zip: 'application/zip', rar: 'application/x-rar-compressed',
'7z': 'application/x-7z-compressed',
json: 'application/json', xml: 'application/xml', md: 'text/markdown',
pdf: 'application/pdf', txt: 'text/plain',
xls: 'application/vnd.ms-excel',
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
}
/**
* 上传图片 (type=image)
* @param {string} filePath - uni.chooseImage 返回的 tempFilePaths[0]
* @returns {Promise<{url, mime, size, name, kind, used_strategy}>}
*/
export async function uploadImage(filePath, opts = {}) {
const addon = aiService.getAddonName() // 'aikefu' | 'aiagent'
const config = await aiService.getServiceConfig()
const strategy = config?.upload_strategy || 'backend'
// 压缩: H5/MP-WEIXIN 双端都做, iPhone HEIC 大图走不通 PHP 中转也走不通 STS, 必须本地压
let compressedPath = filePath
let detectedSize = 0
try {
detectedSize = await getFileSize(filePath)
} catch (e) {
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 探测失败不静默降级到 0 (会让 auto 模式永远走 PHP 中转)
// 改为抛错, 上层选择兜底走 STS (size=0 → 大于任何阈值 → 走 STS)
console.warn('[media-upload] getFileSize failed:', e)
}
// H5 + MP-WEIXIN 都压缩 (微信 chooseImage 默认 sizeType:['compressed'] 但 HEIC 不在压缩白名单)
// #ifdef H5 || MP-WEIXIN
if (detectedSize > SIZE_LIMIT_H5_COMPRESS || opts.forceCompress) {
try {
const compressed = await uni.compressImage({
src: filePath,
quality: 80,
compressedWidth: 2048,
compressedHeight: 2048,
})
compressedPath = compressed.tempFilePath || filePath
console.log('[media-upload] compressImage OK', detectedSize, '→', compressedPath)
} catch (e) {
console.warn('[media-upload] compressImage failed, use original:', e)
}
}
// #endif
// 检查是否需要走 STS (>2MB 或商家选 oss_sts)
// 决策: STS 触发条件 = oss_sts(总是) || auto + 大于 2MB
// fileSizeFinal = 探测失败的兜底:
// - 第一次探测失败(原始大小未知) → 保守走 STS
// - 第一次成功, 第二次探测压缩后失败 → 用原始 detectedSize
let fileSizeFinal = detectedSize
if (compressedPath !== filePath) {
try { fileSizeFinal = await getFileSize(compressedPath) } catch (e) {
// 压缩后探测失败, 退回到原始大小 (可能没压成功)
fileSizeFinal = detectedSize
}
}
const useSts = strategy === 'oss_sts'
|| (strategy === 'auto' && fileSizeFinal > SIZE_LIMIT_PHP_PASSTHROUGH)
// ★ PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 探测完全失败(原始+压缩后都 0) → 保守走 STS
// 原代码 fileSizeFinal === 0 会让"auto 模式永远走 PHP 中转", 大文件 OOM
// 但 fileSizeFinal = detectedSize (有值) 时按值判断; 只有两边都失败才兜底 STS
const totallyUnknown = detectedSize === 0 && fileSizeFinal === 0
const finalUseSts = useSts || (strategy === 'auto' && totallyUnknown)
if (finalUseSts) {
return await uploadViaSts(compressedPath, 'image', addon, aiService.getAgentId(), config, detectedSize)
}
try {
return await uploadViaPhp(compressedPath, 'image', addon, aiService.getAgentId(), detectedSize)
} catch (e) {
// PR-UPLOAD-ADAPTIVE-FALLBACK (2026-09-24): 后端已切 oss_sts 而 /info 缓存里的 strategy 过期
// → PHP 中转被拒 (OSS_STS_REQUIRED), 自动切 STS 直传重试 (自愈, 无需用户重试)
if (e && e.code === 'OSS_STS_REQUIRED') {
console.warn('[media-upload] PHP 中转被拒 (后端策略已是 oss_sts), 自动切换 STS 直传')
return await uploadViaSts(compressedPath, 'image', addon, aiService.getAgentId(), config, detectedSize)
}
throw e
}
}
/**
* 上传 audio / video / file
* 策略: 商家配了云存储 (oss_sts/auto) → STS 直传, 失败回退 PHP 中转;
* 未配云存储 (backend) → 直接 PHP 中转
* @param {string} filePath
* @param {'audio'|'video'|'file'} kind
* @param {{name?:string, mime?:string, size?:number}} [opts]
* PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): H5 传进来的是 blob URL (无扩展名),
* 必须由调用方把原始 File 的 name/mime/size 带进来, 否则 STS key 会以 .bin 结尾,
* Content-Type 退化成 application/octet-stream, 音频/视频播放器取不到正确类型。
*/
export async function uploadMedia(filePath, kind, opts = {}) {
if (!['audio', 'video', 'file'].includes(kind)) {
throw new Error(`invalid kind: ${kind}`)
}
const addon = aiService.getAddonName()
const config = await aiService.getServiceConfig()
const agentId = aiService.getAgentId()
const hints = { name: opts.name || '', mime: opts.mime || '' }
const size = opts.size || 0
const strategy = (config && config.upload_strategy) || 'backend'
// PHP 中转 (kind 以调用方传入的音视频分类为准, 后端只区分 image|file)
const doPhpUpload = async (fallbackErr) => {
let phpRes = null
try {
phpRes = await uploadViaPhp(filePath, kind, addon, agentId, size)
} catch (err) {
throw new Error((err && err.message) || (fallbackErr && fallbackErr.message) || '上传失败')
}
if (!phpRes || !phpRes.url) {
throw new Error((fallbackErr && fallbackErr.message) || '上传失败: 当前平台不支持该上传方式')
}
return Object.assign({}, phpRes, { kind })
}
// 商家未开启云存储 (strategy=backend): 与图片保持一致走 PHP 中转,
// 避免没配 STS 时"视频/音频"按钮一选就报 "STS 凭据获取失败" 完全不可用
// PR-UPLOAD-ADAPTIVE-FALLBACK (2026-09-24): 若后端已切 oss_sts 而本地 strategy 过期,
// PHP 中转被拒 (OSS_STS_REQUIRED) → 自动切 STS 直传重试
if (strategy === 'backend') {
try {
return await doPhpUpload()
} catch (e) {
if (e && e.code === 'OSS_STS_REQUIRED') {
console.warn('[media-upload] PHP 中转被拒 (后端策略已是 oss_sts), 自动切换 STS 直传')
return await uploadViaSts(filePath, kind, addon, agentId, config, size, hints)
}
throw e
}
}
try {
return await uploadViaSts(filePath, kind, addon, agentId, config, size, hints)
} catch (e) {
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): STS 不可用 (未配置云存储 / 凭证接口失败)
// 时回退 PHP 中转, 保证音频/视频文件仍能上传
// PR-UPLOAD-ADAPTIVE-FALLBACK (2026-09-24): 回退的 PHP 中转若也被 oss_sts 策略拒收,
// 保留原始 STS 错误抛出 (回退注定失败, 报真实根因比报 "操作失败" 有用)
console.warn('[media-upload] STS 上传失败, 回退 PHP 中转:', e && e.message)
try {
return await doPhpUpload(e)
} catch (e2) {
if (e2 && e2.code === 'OSS_STS_REQUIRED') throw e
throw e2
}
}
}
/**
* PHP 中转 (multipart/form-data)
* 端点必须用 addon 模式 URL: /<addon>/api/upload/<image|file>
* 注释: InitRoute 注册 aikefu/api/upload 时挂在 addon namespace 下,
* /api/aikefu/upload/* 才是命中路径; /api/kefu/upload/* 不命中
* (那是普通接口命名空间, 上传走的是 addon 专属路由)
*/
async function uploadViaPhp(filePath, kind, addon, agentId, knownSize = 0) {
const url = (addon === 'aikefu' ? '/aikefu/api/upload/' : '/aiagent/api/upload/')
+ (kind === 'image' ? 'image' : 'file')
// #ifdef MP-WEIXIN
return new Promise((resolve, reject) => {
uni.uploadFile({
url: Config.baseUrl + url,
filePath,
name: 'file',
formData: {
kind,
// aikefu 后端必填 config_uuid; 同时兼容 config_uid 命名并附 agent_id 兜底
agent_id: agentId || undefined,
config_uuid: addon === 'aikefu' ? (aiService.getCurrentConfigUuid?.() || '') : undefined,
config_uid: addon === 'aikefu' ? (aiService.getCurrentConfigUuid?.() || '') : undefined,
uniacid: aiService.getUniacid(),
user_id: aiService.getUserId?.() || '',
},
success: (res) => {
try {
const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
if (data.code === 0 || data.success) {
resolve({
url: data.data.url,
mime: data.data.mime,
size: data.data.size || knownSize || 0,
name: data.data.name,
kind: data.data.kind || kind,
used_strategy: data.data.used_strategy || 'backend',
oss_sts_required: data.data.oss_sts_required || false,
})
} else {
// PR-UPLOAD-ADAPTIVE-FALLBACK (2026-09-24): 后端策略已切 oss_sts 时拒收 PHP 中转,
// 顶层 oss_sts_required=true → 标记错误码, 调用方捕获后自动切 STS 直传 (自愈)
const err = new Error(data.data || data.msg || data.message || '上传失败')
if (data.oss_sts_required === true) err.code = 'OSS_STS_REQUIRED'
reject(err)
}
} catch (e) {
reject(new Error('解析响应失败: ' + e.message))
}
},
fail: (err) => reject(new Error('网络错误: ' + (err.errMsg || err.message))),
})
})
// #endif
// #ifdef H5
const form = new FormData()
const file = await pathToFile(filePath, kind)
form.append('file', file)
form.append('kind', kind)
if (addon === 'aiagent') form.append('agent_id', agentId)
else {
// aikefu 后端必填 config_uuid; 同时兼容 config_uid 命名并附 agent_id 兜底
const uuid = aiService.getCurrentConfigUuid?.() || ''
form.append('config_uuid', uuid)
form.append('config_uid', uuid)
form.append('agent_id', agentId)
}
form.append('uniacid', aiService.getUniacid())
form.append('user_id', aiService.getUserId?.() || '')
const res = await fetch(Config.baseUrl + url, {
method: 'POST',
headers: { 'token': store.state.token || '' },
body: form,
})
const data = await res.json()
if (data.code === 0 || data.success) {
return {
url: data.data.url,
mime: data.data.mime,
size: data.data.size || knownSize || 0,
name: data.data.name,
kind: data.data.kind || kind,
used_strategy: data.data.used_strategy || 'backend',
oss_sts_required: data.data.oss_sts_required || false,
}
}
// PR-UPLOAD-ADAPTIVE-FALLBACK (2026-09-24): 后端拒收且标记 oss_sts_required → 自动切 STS 直传
if (data.oss_sts_required === true) {
const err = new Error(data.data || data.msg || data.message || '上传失败')
err.code = 'OSS_STS_REQUIRED'
throw err
}
throw new Error(data.msg || data.message || '上传失败')
// #endif
}
/**
* STS 直传 (拿临时凭证 → 直传云存储)
*
* PR-OSS-REGISTRY (2026-09-15) 后端支持 12 个 provider, 协议层分两类:
* A) 4-field STS (8 个: alioss/qiniu/txcos/baidubos/qingstor/jdoss/ucloud/wyoss)
* → 前端拼 PUT URL, Authorization header = STS <ak>:<sk>
* B) single-URL (4 个: huaweiobs/volcengine/awsoss/minio)
* → sts.accessKeyId 已是完整预签 PUT URL, sts.securityToken='<PROVIDER>-SIGNED'
* 标记, 不带 Authorization
*
* 后端 stsResp.data.data 可能字段:
* { provider, bucket, region, accessKeyId, accessKeySecret, securityToken,
* key_prefix_tpl, site_id, host? (single-URL 模式), endpoint? (qiniu 7 参兼容) }
*/
/**
* PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 三段兜底扩展名提取
* 1) filePath 最后一段正则匹配 .xxx
* 2) filePath.name 兜底 (H5 File 对象 / APP tempFile.name)
* 3) mimeHint 反查 EXT_MIME_MAP (H5 blob URL 没扩展名但 blob.type 通常是 image/png)
* 4) 最终 'bin' (防 URL 片段被误当扩展名)
*
* PR-FRONTEND-MEDIA-UPLOAD-FIX-HOTFIX (2026-09-16): 提到模块顶层,
* 之前只在 uploadViaSts 里, pathToFile 引用不到 → "extractExt is not defined"
*/
function extractExt(filePath, mimeHint = '', nameHint = '') {
let ext = 'bin'
if (typeof filePath === 'string') {
const lastSeg = filePath.split('?')[0].split('/').pop() || ''
const m = lastSeg.match(/\.([a-z0-9]+)$/i)
if (m) ext = m[1].toLowerCase()
}
if (ext === 'bin' && filePath && filePath.name) {
const m2 = String(filePath.name).match(/\.([a-z0-9]+)$/i)
if (m2) ext = m2[1].toLowerCase()
}
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): H5 blob URL + 调用方带下来的原始文件名
if (ext === 'bin' && nameHint) {
const m3 = String(nameHint).match(/\.([a-z0-9]+)$/i)
if (m3) ext = m3[1].toLowerCase()
}
// 3) mime→ext 反查 (PR-FRONTEND-MEDIA-UPLOAD-FIX-HOTFIX): blob URL 无扩展名但
// blob.type 是 image/png 这种, 反查 EXT_MIME_MAP → png
if (ext === 'bin' && mimeHint) {
for (const [e, m] of Object.entries(EXT_MIME_MAP)) {
if (m === mimeHint) { ext = e; break }
}
}
if (!/^[a-z0-9]{2,5}$/.test(ext)) ext = 'bin'
return ext
}
/**
* PR-H5-PRESIGN-DIRECT (2026-09-24): alioss 直传改走服务端预签名 URL (ossPresign)
*
* 背景: 旧 uploadViaSts 对 alioss 走 4 字段 STS 凭证 + 前端裸 PUT
* (Authorization: STS ak:sk + x-oss-security-token)。该 Authorization 头
* 不是合法 OSS V1 签名 (合法格式为 `OSS AccessKeyId:HMAC-SHA1(StringToSign)`,
* 签名必须由持有 secret 的一方计算) → OSS 恒 403 AccessDenied。
* 后端「对话测试」已切 ossPresign (服务端签 PUT URL) 实测可用 (tests/repro_h5_sts_put.js:
* 裸 PUT 403 / presign PUT 200), 前端同款切换。
* 额外收益: object key 由服务端 KeyPrefixBuilder 统一拼, 消除前端模板替换的
* 双重前缀/占位符错配; content_type 由服务端签名后回传, PUT 带同值即可。
*
* 端点: POST /<addon>/api/upload/ossPresign
* 入参: filename / content_type / uniacid + (aikefu: config_uuid | aiagent: agent_id)
* 出参: {upload_url, content_type, public_url, object_key, provider, ...}
* PUT 时不带任何 Authorization 头 (签名在 query 里), Content-Type 必须与签名一致。
*/
/**
* PR-UNI-REQUEST-CB (2026-09-24): uni.request 的 Promise 兼容封装
* 实测 (tests/probe_uni_request.js): 本 uni-app H5 版本 `await uni.request(opts)`
* resolve 的是 **undefined** (不带 success 回调时 Promise 返回值不可用),
* 导致 stsResp.statusCode/preResp.data 全部 TypeError。
* 回调式调用是唯一跨端可靠用法, 统一从这里走。
*/
function uniRequest(opts) {
return new Promise((resolve, reject) => {
uni.request(Object.assign({}, opts, {
success: resolve,
fail: (err) => reject(new Error((err && err.errMsg) || 'request failed')),
}))
})
}
async function uploadViaPresign(filePath, kind, addon, agentId, knownSize = 0, hints = {}) {
// PR-H5-PRESIGN-EXT (2026-09-24): H5 图片是 blob URL (无扩展名), extractExt 会得 'bin'
// → 先经 pathToFile 还原 File, 用 file.type / file.name 反推扩展名与 Content-Type
let mimeHint = hints.mime || ''
let nameHint = hints.name || ''
let probeFile = null
// #ifdef H5
try {
probeFile = await pathToFile(filePath, kind)
if (!mimeHint && probeFile && probeFile.type) mimeHint = probeFile.type
if (!nameHint && probeFile && probeFile.name) nameHint = probeFile.name
} catch (e) {
// blob URL 还原失败不致命: ext 兜底 jpg, PUT 时再走 pathToFile
console.warn('[media-upload] presign probe failed:', e && e.message)
}
// #endif
const ext = extractExt(filePath, mimeHint, nameHint)
// 兜底: 彻底拿不到类型时, 图片按 jpg 传 (后端后缀白名单拒收 .bin; jpg 嗅探渲染无碍)
const finalExt = (ext === 'bin' && kind === 'image') ? 'jpg' : ext
const contentType = mimeHint || guessMime(finalExt)
const filename = (nameHint && /^[^\/\\]+\.[a-zA-Z0-9]{2,5}$/.test(nameHint))
? nameHint
: `media_${Date.now()}_${Math.random().toString(36).slice(2, 8)}.${finalExt}`
const preUrl = (addon === 'aikefu' ? '/aikefu/api/upload/' : '/aiagent/api/upload/') + 'ossPresign'
const preResp = await uniRequest({
url: Config.baseUrl + preUrl,
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': store.state.token || ''
},
data: {
filename,
content_type: contentType,
uniacid: aiService.getUniacid(),
agent_id: addon === 'aiagent' ? (agentId || undefined) : undefined,
config_uuid: addon === 'aikefu' ? (aiService.getCurrentConfigUuid?.() || '') : undefined,
},
})
if (preResp.statusCode === 404) {
const err = new Error('后端无 ossPresign 端点 (版本过旧)')
err.code = 'PRESIGN_UNSUPPORTED'
throw err
}
if (preResp.statusCode !== 200 || (preResp.data.code !== 0 && !preResp.data.success)) {
throw new Error(preResp.data?.msg || preResp.data?.message || '预签名获取失败')
}
const pre = preResp.data.data
const uploadUrl = pre.upload_url
const finalContentType = pre.content_type || contentType
let uploadedSize = knownSize || 0
// #ifdef H5
if (probeFile && probeFile.size) uploadedSize = probeFile.size
// #endif
// 直传: PUT 已签名 URL, 无 Authorization 头 (签名在 query 里)
// #ifdef H5
const file = probeFile || await pathToFile(filePath, kind)
const ossRes = await fetch(uploadUrl, {
method: 'PUT',
headers: { 'Content-Type': finalContentType },
body: file,
})
console.log('[media-upload] presign PUT', ossRes.status, (pre.public_url || '').slice(0, 90))
if (!ossRes.ok) throw new Error(`${pre.provider || 'alioss'} PUT ${ossRes.status}`)
// #endif
// #ifdef MP-WEIXIN
// uni.uploadFile 只会发 multipart POST, 不能 PUT → 读成 ArrayBuffer 用 uni.request 发原始 PUT
await new Promise((resolve, reject) => {
uni.getFileSystemManager().readFile({
filePath,
success: (res) => {
uni.request({
url: uploadUrl,
method: 'PUT',
header: { 'Content-Type': finalContentType },
data: res.data,
success: (r) => (r.statusCode >= 200 && r.statusCode < 300)
? resolve()
: reject(new Error(`${pre.provider || 'alioss'} PUT ${r.statusCode}`)),
fail: reject,
})
},
fail: (e) => reject(new Error('readFile failed: ' + (e.errMsg || ''))),
})
})
// #endif
return {
url: (pre.public_url || uploadUrl.split('?')[0]),
mime: finalContentType,
size: uploadedSize,
name: (pre.object_key || filename).split('/').pop(),
kind,
used_strategy: 'oss_sts',
provider: pre.provider || 'alioss',
}
}
async function uploadViaSts(filePath, kind, addon, agentId, config, knownSize = 0, hints = {}) {
// PR-H5-PRESIGN-DIRECT (2026-09-24): alioss (及 provider 未知时) 先走服务端预签名;
// 旧 4 字段裸 PUT 的 Authorization 头不是合法 OSS 签名, 恒 403 (tests/repro_h5_sts_put.js 实测)
// 仅当后端明确配置了非 alioss provider, 或后端过旧无 presign 端点时才落回旧流程
const providerHint = (config && config.oss_provider) || ''
if (!providerHint || providerHint === 'alioss') {
try {
return await uploadViaPresign(filePath, kind, addon, agentId, knownSize, hints)
} catch (e) {
if (!(e && e.code === 'PRESIGN_UNSUPPORTED')) throw e
console.warn('[media-upload] ossPresign 不可用, 回退旧 STS 流程:', e.message)
}
}
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 用更稳的扩展名提取
// H5 blob URL (blob:https://xxx/uuid) 无扩展名 → split('.').pop() 会拿整条 URL
// 优先 file.name (H5 file / APP tempFile.name), 都没有就 blob URL → 'bin'
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): H5 走 blob URL 时 file.name 拿不到,
// 由 uploadMedia 的 opts.name/mime 兜底 (音频 .mp3 / 视频 .mp4 才不会被写成 .bin)
const ext = extractExt(filePath, hints.mime || '', hints.name || '')
// 1. 拿 STS 凭证 (addon 模式 URL)
const stsUrl = (addon === 'aikefu' ? '/aikefu/api/upload/' : '/aiagent/api/upload/') + 'ossSts'
const stsResp = await uniRequest({
url: Config.baseUrl + stsUrl,
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': store.state.token || ''
},
data: {
agent_id: agentId || undefined,
config_uuid: addon === 'aikefu' ? (aiService.getCurrentConfigUuid?.() || '') : undefined,
config_uid: addon === 'aikefu' ? (aiService.getCurrentConfigUuid?.() || '') : undefined,
uniacid: aiService.getUniacid(),
user_id: aiService.getUserId?.() || '',
},
})
if (stsResp.statusCode !== 200 || (stsResp.data.code !== 0 && !stsResp.data.success)) {
throw new Error(stsResp.data?.msg || stsResp.data?.message || 'STS 凭证获取失败')
}
const sts = stsResp.data.data
const provider = sts.provider || 'alioss' // 老后端默认 alioss
// 2. 拼 PUT URL (用后端返回的 key_prefix_tpl 替换占位符)
const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {
const r = Math.random() * 16 | 0
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
})
const now = new Date()
const key = (sts.key_prefix_tpl || 'site/{site_id}/{yyyy}/{mm}/{dd}/{rand}')
.replace('{site_id}', sts.site_id || '0')
.replace('{agent_id}', agentId || '0')
.replace('{yyyy}', now.getFullYear().toString())
.replace('{mm}', String(now.getMonth() + 1).padStart(2, '0'))
.replace('{dd}', String(now.getDate()).padStart(2, '0'))
.replace('{rand}', uuid)
+ '.' + ext
// ★ PR-OSS-REGISTRY (2026-09-15): provider 分流
// single-URL 模式: securityToken 末尾是 -SIGNED (OBS-SIGNED / TOS-SIGNED / AWS-SIGNED / MINIO-SIGNED)
const isSingleUrlMode = typeof sts.securityToken === 'string'
&& /-(SIGNED)$/.test(sts.securityToken)
let ossUrl, headers
if (isSingleUrlMode) {
// B) single-URL: sts.accessKeyId 是完整预签 PUT URL, 不需要 Authorization header
ossUrl = sts.accessKeyId
headers = { 'Content-Type': guessMime(ext) }
} else if (provider === 'qiniu') {
// A) qiniu 兼容模式: sts.accessKeyId = uptoken, endpoint 来自 sts.endpoint 或 sts.host
ossUrl = (sts.endpoint || sts.host || `https://upload-${sts.region}.qiniup.com`) + '/' + key
headers = {
'Authorization': 'UpToken ' + sts.accessKeyId,
'Content-Type': guessMime(ext),
}
} else {
// A) 4-field STS 默认 (alioss/txcos/baidubos/qingstor/jdoss/ucloud/wyoss)
// endpoint 模板按 provider 区分, 后端未返 endpoint 时按 OSS 模板拼
// ★ FIX-ALIOSS-ENDPOINT-OSS-PREFIX (2026-09-23): alioss 区域名缺前缀 bug
// sts.region 是用户输入的简写形式 (cn-hangzhou), 但真实 OSS endpoint 必须用完整形式 (oss-cn-hangzhou)
// 之前 `https://${bucket}.${region}.aliyuncs.com` 拼成 `suzhou-oss-data-xyz.cn-hangzhou.aliyuncs.com` (DNS 不存在)
// 正确: `https://${bucket}.oss-${region}.aliyuncs.com` → `suzhou-oss-data-xyz.oss-cn-hangzhou.aliyuncs.com`
// 后端 sts.oss_url 已拼好正确 URL (用 OssProviderRegistry::buildDirectEndpoint), 优先用它
const aliossTpl = sts.oss_url
? sts.oss_url.replace(/\/[^\/?#]+$/, '') // 去尾 key, 留 base endpoint
: `https://${sts.bucket}.oss-${sts.region}.aliyuncs.com`
const tpl = (provider === 'alioss') ? aliossTpl
: (provider === 'txcos') ? `https://${sts.bucket}-${sts.region}.cos.${sts.region}.myqcloud.com`
: (provider === 'baidubos') ? `https://${sts.bucket}.${sts.region}.bcebos.com`
: (provider === 'jdoss') ? `https://${sts.bucket}.${sts.region}.jdcloud-oss.com`
: (provider === 'wyoss') ? `https://${sts.bucket}.${sts.host || sts.region}`
: (sts.endpoint ? sts.endpoint.replace('{bucket}', sts.bucket) : `https://${sts.bucket}.${sts.region}`)
ossUrl = `${tpl}/${key}`
headers = {
'Authorization': `STS ${sts.accessKeyId}:${sts.accessKeySecret}`,
'x-oss-security-token': sts.securityToken,
'Content-Type': guessMime(ext),
}
}
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): MP-WEIXIN uni.uploadFile 拿不到 file.size
// H5 pathToFile 拿到的 file 有 size, MP-WEIXIN 没有; STS 完成后用已知 size 或后端返回
let uploadedSize = knownSize || 0
// #ifdef H5
try {
const probe = await pathToFile(filePath, kind)
if (probe && probe.size) uploadedSize = probe.size
} catch (e) {}
// #endif
// 3. 直传云存储
// #ifdef MP-WEIXIN
await new Promise((resolve, reject) => {
uni.uploadFile({
url: ossUrl,
filePath,
name: 'file',
formData: {},
header: headers,
success: (res) => {
if (res.statusCode >= 200 && res.statusCode < 300) resolve()
else reject(new Error(`${provider} PUT ${res.statusCode}`))
},
fail: reject,
})
})
// #endif
// #ifdef H5
const file = await pathToFile(filePath, kind)
const ossRes = await fetch(ossUrl, {
method: 'PUT',
headers,
body: file,
})
if (!ossRes.ok) throw new Error(`${provider} PUT ${ossRes.status}`)
// #endif
// 4. 返回公网 URL
return {
url: ossUrl.split('?')[0], // single-URL 模式 URL 带 ?<签名参数>, 拼 chat attachment 用 base URL
mime: guessMime(ext),
size: uploadedSize,
name: key.split('/').pop(),
kind,
used_strategy: 'oss_sts',
provider,
}
}
async function getFileSize(filePath) {
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 失败抛错而不是 resolve(0)
// 0 会让 auto 模式永远走 PHP 中转 (0 > 2MB = false), 失去 STS 直传能力
// 上层 uploadImage 用 try/catch 兜底, 探测失败视为 "大小未知, 默认走 STS"
// #ifdef MP-WEIXIN
return new Promise((resolve, reject) => {
uni.getFileInfo({
filePath,
success: (res) => resolve(res.size || 0),
fail: (err) => reject(new Error('getFileInfo failed: ' + (err.errMsg || ''))),
})
})
// #endif
// #ifdef H5
try {
const res = await fetch(filePath)
const blob = await res.blob()
return blob.size
} catch (e) {
throw new Error('getFileSize fetch failed: ' + e.message)
}
// #endif
}
async function pathToFile(filePath, kind) {
// #ifdef H5
const res = await fetch(filePath)
const blob = await res.blob()
// PR-FRONTEND-MEDIA-UPLOAD-FIX-HOTFIX (2026-09-16): H5 blob URL 路径修复扩展名
// 原代码 `filePath.split('/').pop()` 对 blob:http://xxx/uuid 取出 'uuid' (无扩展名)
// → 后端 multipart filename 缺失扩展名 → ext_rule 拒绝 "上传文件后缀不允许"
// extractExt 三段兜底: 1) lastSegment 正则 2) file.name 3) 'bin' 最终兜底
// 若 ext='bin', 走 guessMime(EXT_MIME_MAP) 看能不能从 mime 反推 jpg/png (mime→ext)
const rawName = filePath.split('/').pop() || `${kind}.bin`
const ext = extractExt(filePath, blob.type)
const finalName = ext !== 'bin' ? `${rawName}.${ext}` : rawName
// blob.type 通常是 image/png 或空; 空时用 guessMime 兜底
const mime = blob.type || guessMime(ext)
return new File([blob], finalName, { type: mime })
// #endif
}
/**
* PR-FRONTEND-MEDIA-INLINE-BASE64 (2026-09-16): 把附件原文件读成 base64,
* 用于 ai-chat-message.vue sendMessage 给 attachment 加 `data` 字段,
* 让 backend 走 WbAgentOsClient::buildMediaBlocks 路径 ① (inline base64)
* 而不是路径 ②/③ (URL fetch / resource_link).
*
* 为什么必要: 之前 PR-FRONTEND-MEDIA-UPLOAD-FIX 已让上传链路 (uni.compressImage
* → backend Upload.php) 返回了公网 URL, 但此 URL 是 backend Upload.php::buildPublicUrl
* 用 request()->domain() 拼出来的 (例如 http://192.168.x.x:8050/upload/...).
* 买家端 AI chat 把这个 URL 透给 backend, backend MediaGuard::urlAllowed
* 把 192.168.x.x 当内网 IP (FILTER_FLAG_NO_PRIV_RANGE) 拒绝, 附件被静默丢弃.
*
* 修复: 同步给 attachment 加 data: <bare-base64> 字段.
* - backend MessageMedia::normalizeInput 直接透传 data (line 207-208)
* - backend MediaGuard::check 看到 data 非空就无条件放行, 不参与 URL 校验 (line 137-140)
* - backend WbAgentOsClient::buildMediaBlocks 路径 ① 优先 data + image/audio → 直接 base64 内联
* 全链路 bypass URL 公网可达性 (无论 LAN 还是公网, 都不依赖 WB Cloud 拉 URL).
*
* 返回: { data: '<bare-base64>', size, mime } | null
* - null 时表示文件 > maxBytes (默认 5MB, J7 上限) 或读取失败 → 调用方跳过 data 字段, 走 URL 路径
* - bare-base64 (不带 data:image/png;base64, 前缀) — 后端 buildMediaBlocks 需要纯 base64
* - mime 从 blob.type (H5) / 调用方传 mimeHint (uni-app 平台不知道 blob.type)
*
* @param {string} filePath 选图/选文件时的原始路径 (blob: URL 或 _doc/tmp_xxx 路径)
* @param {object} [opts]
* @param {number} [opts.maxBytes=5MB] 超限返回 null (frontend 主动限流, 减轻带宽/内存)
* @param {string} [opts.mimeHint] 非 H5 平台拿不到 blob.type, 用 pending.uploaded.mime 兜底
*/
export async function fileToBase64(filePath, opts = {}) {
const maxBytes = opts.maxBytes || SIZE_LIMIT_INLINE_BASE64
if (!filePath) return null
// #ifdef H5
try {
const res = await fetch(filePath)
if (!res.ok) throw new Error('fetch failed: ' + res.status)
const blob = await res.blob()
if (blob.size > maxBytes) {
console.log('[media-upload] fileToBase64: size', blob.size, '> maxBytes', maxBytes, '→ 跳过内联')
return null
}
const dataUri = await new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = () => reject(new Error('FileReader failed'))
reader.readAsDataURL(blob)
})
const m = /^data:([^;,]+);base64,(.*)$/.exec(dataUri)
if (!m) throw new Error('unexpected data URI shape: ' + String(dataUri).slice(0, 40))
return { data: m[2], size: blob.size, mime: m[1] }
} catch (e) {
console.warn('[media-upload] fileToBase64 H5 失败:', e)
return null
}
// #endif
// #ifdef MP-WEIXIN || APP-PLUS
try {
const fsm = uni.getFileSystemManager()
// 1. 探测大小, 超限直接返回 null
let size = 0
try {
const stat = fsm.statSync(filePath)
// statSync 在部分平台返回 {size}, 部分返回 {fileSize}, 部分直接是数字
size = (stat && (stat.size || stat.fileSize)) || 0
} catch (e) {
// statSync 失败 (权限/路径) → 直接尝试 readFile, 后端会再校验 size
console.warn('[media-upload] fileToBase64 statSync failed, fallback to readFile:', e)
}
if (size > maxBytes) {
console.log('[media-upload] fileToBase64: size', size, '> maxBytes', maxBytes, '→ 跳过内联')
return null
}
// 2. readFile 拿 base64 — 同步 API 简单可靠, base64 在 5MB 文件 ≈ 6.7MB 字符串, 内存可控
const data = fsm.readFileSync(filePath, 'base64')
return { data, size: size || 0, mime: opts.mimeHint || '' }
} catch (e) {
console.warn('[media-upload] fileToBase64 uni-app 失败:', e)
return null
}
// #endif
}
function guessMime(ext) {
return EXT_MIME_MAP[ext] || 'application/octet-stream'
}
export default { uploadImage, uploadMedia }

View File

@@ -147,20 +147,13 @@ function getQuickAppPrivacySetting() {
}
/**
* 鸿蒙元服务: 查询平台级隐私设置
* 鸿蒙元服务的隐私授权由系统自动管理,应用层只需检查 storage
* @returns {Promise<{needAuthorization: boolean, privacyContractName?: string}>}
* 鸿蒙元服务: 已接入平台隐私托管, 应用层不再调任何系统 API
* 仅为兼容历史代码保留此函数 (被 checkPrivacy() 调用), 内部只走 storage 路径
* @returns {Promise<{needAuthorization: boolean}>}
*/
function getHarmonyPrivacySetting() {
return new Promise((resolve) => {
// #ifdef MP-HARMONY
// 鸿蒙元服务: 隐私授权由系统管理,应用层仅检查 storage
// 系统会在用户首次使用隐私API时自动弹出系统级隐私授权弹窗
resolve({ needAuthorization: !getStorageAgreed() });
// #endif
// #ifndef MP-HARMONY
resolve({ needAuthorization: !getStorageAgreed() });
// #endif
});
}
@@ -188,7 +181,7 @@ async function checkPrivacy() {
}
// #endif
// 鸿蒙元服务: 隐私由系统管理,仅查 storage
// 鸿蒙元服务: 调系统 getPrivacySetting (无 API 时 getHarmonyPrivacySetting 内部回退 storage)
// H5 / 其他平台: 仅查 storage
return checkPrivacySync();
}
@@ -730,8 +723,9 @@ const PrivacyManager = {
// 优化: storage 已同意时直接走同步快速路径, 不调 async checkPrivacy()
// 节省 1 个 microtask (~0-4ms, dev 模式更明显)
// 注意: 微信小程序/快应用/鸿蒙走 checkPrivacy (平台 API 异步)
// 注意: 微信小程序/快应用走 checkPrivacy (平台 API 异步)
// H5 下 checkPrivacy 内部已 sync 化 (修过), 直接 await 即可
// 鸿蒙元服务: 不调任何系统 API, 不弹自建弹窗 (走平台托管)
const result = _storageAgreed ? checkPrivacySync() : await checkPrivacy();
_needShow = result.needAuthorization;
@@ -741,7 +735,18 @@ const PrivacyManager = {
return;
}
// 设置待弹窗标志
// #ifdef MP-HARMONY
// 鸿蒙元服务: 已接入平台隐私托管, 由鸿蒙系统自动弹出系统级隐私弹窗
// 应用层不再 emit 'privacy:show' 触发自建 privacy-popup.vue
// 标记已决策, 防止 consumePendingShow 兜底分支在 page mounted 时再次弹自建弹窗
_needShow = false;
_pendingShow = false;
_urlRuleDecided = true;
console.log('[privacy] MP-HARMONY: 已委托鸿蒙平台隐私托管, 不触发自建弹窗');
return;
// #endif
// 其他平台: 设置待弹窗标志 + emit 触发自建弹窗
// 已 mounted 的页面组件通过事件接收
// 未 mounted 的页面组件 mounted 时通过 consumePendingShow 补偿
_pendingShow = true;
@@ -757,18 +762,28 @@ const PrivacyManager = {
* 页面 mounted 时补偿检查: 若 show() 在页面 mounted 之前 emit 了事件
* 此方法返回 true 并清除标志,页面组件据此自动弹窗
*
* 鸿蒙元服务兼容:
* 历史兼容:
* Lang.boot() 可能 hang, PrivacyManager.show() 可能从未被调用过;
* 此时 _pendingShow 仍是默认 false, 但用户从未同意过隐私, 必须强制弹一次。
* 所以增加 storage 检测: 用户未同意也返回 true (补偿弹窗)。
*
* 鸿蒙元服务(双轨制):
* 已接入平台隐私托管, 由鸿蒙系统自动弹出系统级隐私弹窗,
* 应用层不再 emit/弹自建弹窗, 兜底分支也必须返回 false, 否则会与
* 鸿蒙系统级弹窗叠加出现"多次弹出"。
* @returns {boolean} true=需要弹窗,false=不需要
*/
consumePendingShow() {
// #ifdef MP-HARMONY
// 鸿蒙元服务: 已接入平台隐私托管, 不弹自建弹窗
return false;
// #endif
if (_pendingShow && _needShow) {
_pendingShow = false;
return true;
}
// 鸿蒙兜底: PrivacyManager.show() 没跑过 + 用户没同意过 storage → 必须弹
// 兜底: PrivacyManager.show() 没跑过 + 用户没同意过 storage → 必须弹
// 同一次进程内只补一次,避免隐私弹窗被反复触发
// 关键: URL/路由规则已经决策过 "本次跳过" 时, 不应触发兜底弹窗 (白名单场景)
if (!_hasChecked && !_pendingShow && !_urlRuleDecided && !getStorageAgreed()) {

View File

@@ -33,7 +33,16 @@ function useNativeLoading() {
// #endif
}
const DEFAULT_TIMEOUT = 8000; // 总兜底超时
// 总兜底超时档位 (show 时可覆盖):
// 12000 (12s): 默认档, 启动体验优先 (大多数网络环境够用, 略比 10s 宽松)
// 17000 (17s): 中档, 慢网/冷启动 (1s+ 启动 + 3-5s i18n 远端 + 1-3s diy 拉取 + 缓冲)
// 22000 (22s): 慢网档, 极弱网环境 (1s+ 启动 + 5-8s i18n 远端 + 3-5s diy 拉取 + 缓冲)
// 低于 12000 不推荐: 用户感知的"启动卡"窗口期不够, 但业务方仍可传 < 12000 测试用
// 业务方覆盖: splashState.show({ timeout: 17000 })
// 注意: DEFAULT_TIMEOUT 仍是兜底 (无 opts.timeout), 不能被业务方传更低
// 严防因为 timeout 太短导致用户看到白屏.
// 设计思路: 各档位比"刚好够用"多 2s 缓冲, 弱网/慢网络环境兜底更稳
const DEFAULT_TIMEOUT = 12000; // 总兜底超时 (默认 12s)
const MOUNT_GRACE_MS = 1000; // 软隐藏后等组件 mount 的宽限时间
const PAGE_READY_GRACE_MS = 2000; // 软隐藏后等页面就绪的宽限时间
@@ -71,6 +80,111 @@ class SplashState {
// 避免多通道并发时, splash 组件 re-render 风暴
this._pendingProgress = null; // 待 emit 的最新进度
this._flushTimer = null; // 节流定时器
// 网络环境 (用于 show() 自动选档)
// _networkType: 'wifi' | '4g' | '5g' | '3g' | '2g' | 'none' | 'unknown'
// _networkReady: false 表示还没检测完 (splash 显示中第一次构造时常见)
// _networkReady 后, 网络变化时通过 onNetworkStatusChange 实时更新
this._networkType = 'unknown';
this._networkReady = false;
// 启动网络检测 (异步, 不阻塞 splash 显示)
this._initNetworkDetect();
// 监听 diy 加载失败事件 (diy.js 通过 uni.$emit 触发)
// 收到后调 notifyDiyLoadError (严格模式下必须能关闭 splash)
// 解耦: splash-state 不直接 import diy.js
// 透传 reason / errorType / err / url 给业务方监听 splash:diy-error 使用
try {
if (typeof uni !== 'undefined' && uni.$on) {
uni.$on('diy:load-error', (payload) => {
try { this.notifyDiyLoadError(payload || {}) } catch (e) {}
})
}
} catch (e) {}
}
/**
* 初始化网络检测
* - 调 uni.getNetworkType 异步获取当前网络类型
* - 监听 uni.onNetworkStatusChange 实时更新
* - H5 平台降级: 调 navigator.onLine, 不支持细粒度网络类型
* 失败保护: try-catch 包, 任意失败都保持 _networkType='unknown' (不会破坏 splash)
*/
_initNetworkDetect() {
try {
// #ifdef H5
// H5 平台: navigator.onLine 是粗粒度, 只能判断在线/离线
// 仅在 navigator.onLine 是明确 boolean (true/false) 时才是 H5
// Node 24+ 有 navigator 但 onLine 是 undefined, 不算 H5 (走下面 uni.getNetworkType)
if (typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean') {
// 初始检测: 用 _updateNetworkType (内部会触发事件)
this._updateNetworkType(navigator.onLine ? 'wifi' : 'none', { source: 'h5-initial' })
// 监听 online/offline 事件
if (typeof window !== 'undefined' && window.addEventListener) {
window.addEventListener('online', () => {
this._updateNetworkType('wifi', { source: 'h5-online', isConnected: true })
})
window.addEventListener('offline', () => {
this._updateNetworkType('none', { source: 'h5-offline', isConnected: false })
})
}
return
}
// navigator.onLine 不是 boolean (Node/SSR) - 走 uni.getNetworkType
// #endif
// #ifndef H5
if (typeof uni === 'undefined' || !uni.getNetworkType) {
// 不可用: 用 _updateNetworkType 设 unknown (会触发事件)
this._updateNetworkType('unknown', { source: 'no-uni-api' })
return
}
// 异步获取当前网络类型
uni.getNetworkType({
success: (res) => {
this._updateNetworkType((res && res.networkType) || 'unknown', { source: 'uni-initial' })
},
fail: () => {
this._updateNetworkType('unknown', { source: 'uni-initial-fail' })
},
})
// 监听网络变化
if (uni.onNetworkStatusChange) {
uni.onNetworkStatusChange((res) => {
const newType = (res && res.networkType)
|| (res && res.isConnected === false ? 'none' : 'unknown')
this._updateNetworkType(newType, {
source: 'uni-change',
isConnected: res && typeof res.isConnected === 'boolean' ? res.isConnected : undefined,
})
})
}
// #endif
} catch (e) {
// 任意失败都用 unknown, 不影响 splash
this._updateNetworkType('unknown', { source: 'init-error' })
}
}
/**
* 根据当前网络环境选档
* - 离线 (none): 4000 (4s, 让 diy 错误信号有时间触发)
* - 弱网 (2g/3g): 22000 (22s 慢网档, 多 2s 缓冲)
* - 正常 (4g/5g/wifi): 12000 (12s 默认档, 多 2s 缓冲)
* - 未知 (unknown): 17000 (17s 中档, 保守)
* - 网络未就绪: 12000 (DEFAULT_TIMEOUT, 保守)
*/
_pickTimeoutByNetwork() {
if (!this._networkReady) return DEFAULT_TIMEOUT // 网络检测未就绪, 用默认
switch (this._networkType) {
case 'none': return 4000 // 离线: 4s 兜底
case '2g':
case '3g': return 22000 // 弱网: 22s 慢网档
case '4g':
case '5g':
case 'wifi': return 12000 // 正常: 12s 默认档
case 'unknown':
default: return 17000 // 未知: 17s 中档 (保守)
}
}
show(opts = {}) {
@@ -111,7 +225,34 @@ class SplashState {
try { uni.showLoading({ title: opts.title || '加载中...', mask: false }); } catch (e) {}
}
const timeout = opts.timeout || DEFAULT_TIMEOUT;
// 业务方可通过 opts.timeout 覆盖, 但不能低于 5000ms (低于此值给 warn, 仍生效)
// 原因: 启动期 i18n/theme/remote-config 远端加载最少 1-2s, diy 加载 1-3s
// timeout 低于 5s 会经常触发兜底强关, 用户看到白屏
// 测试场景允许传 < 5000ms (因为 mock 环境快), 仍生效但 warn
// 优先级: opts.timeout (业务方显式) > _pickTimeoutByNetwork() (自动选档) > DEFAULT_TIMEOUT
const MIN_RECOMMENDED_TIMEOUT = 5000
let timeout
if (opts.timeout) {
timeout = opts.timeout
if (opts.timeout < MIN_RECOMMENDED_TIMEOUT) {
console.warn(
`[splash-state] timeout=${opts.timeout}ms 低于推荐下限 ${MIN_RECOMMENDED_TIMEOUT}ms, ` +
`可能导致启动期白屏. 生产环境建议 10000-20000ms.`
)
}
} else {
// 自动选档: 根据当前网络环境选 timeout
timeout = this._pickTimeoutByNetwork()
}
this._armTimeout(timeout);
}
/**
* 设置/重设 splash 总超时兜底
* - 由 show() 初始化, 或 _updateNetworkType() 在网络变化时调用
* - 关键: 网络从好→差时延长, 差→好时缩短, 保证用户不会过早/过晚看到白屏
*/
_armTimeout(timeout) {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
this._timeoutId = null;
@@ -125,6 +266,55 @@ class SplashState {
}, timeout);
}
/**
* 网络变化时更新 _networkType, 并按需重启 splash 兜底
* @param {string} newType 新的网络类型
* @param {Object} [meta] 附加信息 { isConnected, source: 'h5-online' | 'uni-change' | ... }
* @returns {boolean} 是否真的更新了 (新旧不同时为 true)
*/
_updateNetworkType(newType, meta) {
newType = newType || 'unknown'
const oldType = this._networkType
const changed = oldType !== newType
// 关键: 即使 type 没变, _networkReady 也要设 true
// 原因: 首次调用 _updateNetworkType 是从 _initNetworkDetect 进来
// 此时 _networkType='unknown' (初始), 可能 newType 也是 'unknown' (uni 不可用)
// 但 _networkReady 仍要从 false → true (让 _pickTimeoutByNetwork 工作)
this._networkReady = true
if (!changed) return false
this._networkType = newType
// 网络变化时: 如果 splash 还 visible, 重启兜底 (用新档)
// 业务场景:
// - wifi → 2g: 启动期远端慢, 兜底延长, 避免过早强关
// - 2g → wifi: 兜底缩短, 避免过晚强关
// - any → none: 兜底缩短到 4s, 让 diy 错误信号更快触发
// - none → any: 兜底恢复正常档, 给足时间
const shouldReboot = this._visible && this._pendingHide === null
// 关键: 仅当 splash 还没进入"软隐藏"阶段时重启兜底
// _pendingHide 不为 null 表示业务方已调 hide(), 等 notifyPageReady/DiyLoadError 即可
// 此时网络变化不影响兜底 (业务方已接管决策)
if (shouldReboot) {
const newTimeout = this._pickTimeoutByNetwork()
this._armTimeout(newTimeout)
}
// 发 splash:network-change 事件 (业务方监听)
// payload: { from, to, isConnected, retryRecommended, rebootSplashTimeout }
// retryRecommended: 从 none 恢复时建议重试 (业务方重调 diy 接口)
// rebootSplashTimeout: 是否重启了 splash 兜底 (true/false)
const eventPayload = {
from: oldType,
to: newType,
isConnected: meta && typeof meta.isConnected === 'boolean' ? meta.isConnected : newType !== 'none',
retryRecommended: oldType === 'none' && newType !== 'none', // 离线→在线, 建议重试
rebootSplashTimeout: shouldReboot,
source: (meta && meta.source) || 'unknown',
}
this._emit('splash:network-change', eventPayload)
return true
}
/**
* 隐藏 splash
* @param {Object} opts
@@ -136,15 +326,22 @@ class SplashState {
* @param {string} [opts.mode] - 离开动画模式
* - 'default': 默认 480ms 动画
* - 'fast': 80ms 短动画, 用于隐私弹窗等需要立即接管视觉的场景, 避免"双遮罩"感
* - 'strict': 严格模式, 不走 MOUNT_GRACE_MS / PAGE_READY_GRACE_MS 兜底,
* 只等 notifyPageReady() 或 DEFAULT_TIMEOUT 总超时
* 适用于: 已接入平台托管的系统弹窗 (鸿蒙),
* splash 必须真等到首页 diy 内容渲染好才能关
*/
hide(opts = {}) {
const reason = opts.reason || 'manual';
const useStrict = opts.mode === 'strict' || opts._strict === true;
// boot-complete 默认走软隐藏, 避免时序问题
const useSoft = opts.soft === true || (opts.soft !== false && reason === 'boot-complete');
const mode = opts.mode === 'fast' ? 'fast' : 'default';
const useSoft = useStrict || opts.soft === true || (opts.soft !== false && reason === 'boot-complete');
// strict 模式复用 fast 动画
const mode = useStrict ? 'fast' : (opts.mode === 'fast' ? 'fast' : 'default');
if (useSoft) {
this._softHide({ reason, mode });
// 传递完整 opts, _softHide 内部能识别 mode='strict' 或 _strict
this._softHide(opts);
} else {
this._doHide({ reason, mode });
}
@@ -154,10 +351,17 @@ class SplashState {
* 软隐藏: 标记应该 hide, 等组件 mount + 页面就绪
* 如果组件 1s 内没 mount, 兜底自动 hide
* 如果页面 2s 内没就绪, 兜底自动 hide
*
* strict 模式 (鸿蒙已接入平台托管):
* 不走 MOUNT_GRACE_MS / PAGE_READY_GRACE_MS 兜底
* 只等 notifyMounted() + notifyPageReady() 或 DEFAULT_TIMEOUT 总超时
* 保证 splash 一定等到首页 diy 内容真的渲染好
*/
_softHide(opts) {
if (!this._visible) return; // 已经隐藏了
this._pendingHide = opts;
// strict 模式识别: mode='strict' 或 _strict=true
const useStrict = opts && (opts.mode === 'strict' || opts._strict === true);
// 如果组件已经 mount 且页面已就绪, 立即隐藏
if (this._hasMounted && this._pageReady) {
@@ -165,6 +369,12 @@ class SplashState {
return;
}
// strict 模式: 不设 mountGraceId 兜底, 只等 notifyPageReady
// (DEFAULT_TIMEOUT 在 show() 设置的 _timeoutId 兜底)
if (useStrict) {
return;
}
// 兜底: 1s 内没 mount, 强制隐藏
if (this._mountGraceId) clearTimeout(this._mountGraceId);
this._mountGraceId = setTimeout(() => {
@@ -177,15 +387,27 @@ class SplashState {
/**
* 真正触发软隐藏
* 如果页面还未就绪, 等待页面就绪后再 hide
* strict 模式 (鸿蒙): 不设 pageReadyGraceId 兜底, 只等 notifyPageReady()
*/
_flushPendingHide() {
if (this._mountGraceId) {
clearTimeout(this._mountGraceId);
this._mountGraceId = null;
}
// 已被 notifyDiyLoadError 拿走 _pendingHide 并自己 _doHide: noop
// 原因: notifyMounted 50ms 后会调 _flushPendingHide, 但 _pendingHide 已被 notifyDiyLoadError 消费
// 不应再调 _doHide (避免重复发 splash:hide 或时序错乱)
if (!this._pendingHide) return;
const _opts = this._pendingHide
const useStrict = _opts && (_opts.mode === 'strict' || _opts._strict === true)
// 如果页面还未就绪, 等待页面就绪 (保留 _pendingHide, 等页面就绪后再处理)
if (!this._pageReady) {
// strict 模式: 不设 pageReadyGraceId, 只等 notifyPageReady()
// 总超时由 show() 里的 _timeoutId 兜底 (DEFAULT_TIMEOUT=8s)
if (useStrict) {
return;
}
// 兜底: 2s 内没就绪, 强制隐藏
if (this._pageReadyGraceId) clearTimeout(this._pageReadyGraceId);
this._pageReadyGraceId = setTimeout(() => {
@@ -204,6 +426,11 @@ class SplashState {
/**
* 实际隐藏 (硬路径)
* @param {Object} opts
* @param {string} [opts.reason='manual'] 隐藏原因
* @param {string} [opts.mode='default'] 动画模式
* @param {boolean} [opts._silent=false] true=不发 splash:hide 事件
* 适用于 notifyDiyLoadError: 已经发了 splash:diy-error, 不能再发 splash:hide
*/
_doHide(opts) {
if (!this._visible) return; // 防重入
@@ -225,6 +452,8 @@ class SplashState {
if (useNativeLoading()) {
try { uni.hideLoading(); } catch (e) {}
}
// _silent=true: 业务方已经从 notifyDiyLoadError 收了 splash:diy-error, 这里不发 splash:hide
if (opts._silent) return;
this._emit('splash:hide', {
reason: opts.reason || 'manual',
mode: opts.mode || 'default',
@@ -264,6 +493,60 @@ class SplashState {
}
}
/**
* diy 加载失败时通知 (网络异常/业务失败/无响应)
* - 任何模式: 真关 splash (不能无限等, 错误已显示在页面横幅上)
* - 触发独立事件 'splash:diy-error' (不是 'splash:hide')
* 业务方可监听此事件做: 错误上报 / 自定义错误展示 / 区分错误类型
* 调用时机: diy 错误横幅出现后 (diy.js._showDiyLoadError)
*
* @param {Object} [opts]
* @param {string} [opts.reason='diy-load-error'] 隐藏原因
* 用于 'splash:diy-error' 事件的 payload, 业务方可区分:
* - 'diy-network-error': 网络异常 (uni.request catch)
* - 'diy-no-response': 无响应 (res 为空)
* - 'diy-business-error': 业务失败 (code!=0)
* @param {string} [opts.errorType] 错误类型: 'network' | 'business' | 'no-response'
* @param {Object|string} [opts.err] 原始错误对象
* @param {string} [opts.url] 出错的请求地址
*/
notifyDiyLoadError(opts = {}) {
// 已 _pageReady=true (notifyPageReady 之后): noop
// 原因: 业务方先调 notifyPageReady (diy 渲染好) 之后又调 notifyDiyLoadError (重复调用或时序错乱)
// 不应再触发 splash:diy-error (已经发过 splash:hide)
if (this._pageReady) return;
// 复用 notifyPageReady 的关闭逻辑 (页面就绪 = 错误状态也算"就绪")
// 原因: 错误状态页 (diyLoadError=true) 已经有 UI 反馈, splash 真关不卡视觉
this._pageReady = true
// 清除所有兜底, 真关 (strict 模式严格依赖 notifyPageReady/notifyDiyLoadError)
if (this._pageReadyGraceId) {
clearTimeout(this._pageReadyGraceId)
this._pageReadyGraceId = null
}
if (this._mountGraceId) {
clearTimeout(this._mountGraceId)
this._mountGraceId = null
}
// 触发独立事件 (不发 splash:hide, 让业务方区分正常 hide 和 diy 错误)
this._emit('splash:diy-error', {
reason: opts.reason || 'diy-load-error',
errorType: opts.errorType,
err: opts.err,
url: opts.url,
})
// 关键: 直接 _doHide 关闭 splash, **不**走 _flushPendingHide
// 原因: _flushPendingHide 内部会 _doHide → 触发 splash:hide 事件
// notifyDiyLoadError 路径**只**应发 splash:diy-error, 不应发 splash:hide
// (业务方根据事件类型区分, 不能混淆)
if (this._pendingHide) {
// 把 _pendingHide 取出, 直接 _doHide 关闭
// _silent=true 让 _doHide 不发 splash:hide (因为已经发了 splash:diy-error)
const _pendingOpts = this._pendingHide
this._pendingHide = null
setTimeout(() => this._doHide({ ..._pendingOpts, _silent: true }), 50)
}
}
/**
* 组件 unmount 时通知 (用于 _hasMounted 状态管理)
* 目前保留 _hasMounted=true, 因为一般只有 tab 页有 splash 组件, 不会动态增减

View File

@@ -71,6 +71,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -264,6 +268,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -456,6 +464,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -648,6 +660,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -840,6 +856,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -1032,6 +1052,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -1224,6 +1248,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
@@ -1416,6 +1444,10 @@ export default {
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_tree_select_text_color: '#333',// 左侧分类树选中态字体颜色(后台可自定义)
diy_category_tree_select_bg_color: '#fff',// 左侧分类树选中态背景颜色(后台可自定义)
diy_category_tree_normal_text_color: '#222222',// 左侧分类树未选中态字体颜色(后台可自定义)
diy_category_tree_normal_bg_color: '#f5f5f5',// 左侧分类树未选中态背景颜色(后台可自定义)
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称

View File

@@ -368,6 +368,186 @@ export function normalizeUrl(urlString) {
return schemeAndHost + normalizedPath + normalizedQuery + hash;
}
// =============================================================
// extractInternalAppPath
// =============================================================
/**
* 从一个 URL 中提取"本 App 内部页面路径"。
*
* 背景 / 修复的 bug:
* 后台装修数据里,内部页面常被存成【绝对 URL】,例如
* https://host/hwappx/common/pages_tool/form/formdata?id=130
* diyRedirectTo 用 `wap_url.indexOf('http') != -1` 判断"外部链接",于是:
* - H5: 走 window.location.href → 整页刷新;点返回时整个 App 重启、启动屏重播、状态丢失
* - MP: 走 web-view → 本应原生跳转的内部页被塞进 web-view
* 本函数把这类"指向本 App 内部页面"的绝对 URL 还原成相对路径,
* 让 diyRedirectTo 改走内部页面分支(uni.navigateTo / SPA 跳转)。
*
* 判定规则(双闸门,避免误伤真正的外部站点):
* 闸门 1 —— host 校验(相对路径直接放行):
* 绝对 URL 的 host 必须与本 App 自己的域名【完全一致】(忽略端口, 大小写不敏感);
* 否则返回 null(视为真外链, 维持原逻辑)。
* ★ 完全一致是最严格的口径: 不同子域(如 xcx3 vs xcx6)、不同域名一律当外链,
* 彻底杜绝误伤 Shopify(xxx.myshopify.com/pages/about)、Facebook 等外站。
* 闸门 2 —— 路径校验:
* pathname 中出现以 App 页面根开头的段(pages / pages_xxx),
* 则从该段起截取为内部路径(以 '/' 开头),连同 query/hash 一起返回;
* 未命中返回 null。
*
* @example
* const H = ['xcx6.aigc-quickapp.com']
* extractInternalAppPath('https://xcx6.aigc-quickapp.com/hwappx/common/pages_tool/form/formdata?id=1', H)
* // '/pages_tool/form/formdata?id=1' (域名完全一致 → 还原)
* extractInternalAppPath('https://xcx3.aigc-quickapp.com/hwappx/common/pages/index/index', H)
* // null (子域不同 → 维持外链)
* extractInternalAppPath('https://xxx.myshopify.com/pages/about-us', H)
* // null (外域名 → 维持外链,不误伤)
* extractInternalAppPath('/pages_goods/detail?id=9', H)
* // '/pages_goods/detail?id=9' (相对路径 → 内部)
*
* @param {string} url 绝对或相对 URL
* @param {string|string[]|true} [allowedHosts] 本 App 自己的域名(可传完整 URL 或纯 host,会自动提取);
* 传 `true` 表示【强制内部】—— 跳过 host 校验, 只要路径含 /pages 段就还原(用于 open_mode='internal')。
* @returns {string|null} 形如 '/pages_tool/form/formdata?id=1' 的内部路径,或 null
*/
export function extractInternalAppPath(url, allowedHosts) {
if (!url || typeof url !== 'string') return null;
let rest = url;
// 闸门 1: host 校验(完全一致);allowedHosts === true 时跳过(强制内部)
const hostMatch = rest.match(/^https?:\/\/([^/]*)/i);
if (hostMatch) {
if (allowedHosts !== true) {
const host = (hostMatch[1] || '').toLowerCase().replace(/:\d+$/, '');
const allow = _normalizeHostList(allowedHosts);
if (!host || allow.indexOf(host) === -1) return null; // 域名不完全一致 → 不改
}
rest = rest.substring(hostMatch[0].length);
}
// 闸门 2: 路径校验(找第一个"页面根段" /pages 或 /pages_xxx)
const pageMatch = rest.match(/\/pages(?:_[a-z0-9]+)?\//i);
if (!pageMatch) return null;
const internal = rest.substring(pageMatch.index);
return internal || null;
}
/**
* 把 allowedHosts 归一化成纯 host 数组(小写、去协议、去路径、去端口)。
* 入参每一项可以是完整 URL(https://host/xx/)或纯 host(host:port)。
* @param {string|string[]} hosts
* @returns {string[]}
*/
function _normalizeHostList(hosts) {
if (!hosts) return [];
const arr = Array.isArray(hosts) ? hosts : [hosts];
const out = [];
for (const h of arr) {
if (!h || typeof h !== 'string') continue;
let s = h.trim().toLowerCase();
const m = s.match(/^https?:\/\/([^/]*)/i);
if (m) s = m[1] || '';
else s = s.replace(/\/.*$/, ''); // 去掉可能带的 path
s = s.replace(/:\d+$/, ''); // 去端口
if (s) out.push(s);
}
return out;
}
/**
* 解析 link 的导航模式(统一开关)。用于 diyRedirectTo 决定内部页面绝对 URL 如何跳转。
*
* 取值来源(顶层字段 或 page_params 里, 大小写不敏感, 兼容驼峰 openMode):
* - open_mode = 'internal' | 'spa' → 'internal' 强制走内部 SPA(忽略域名是否一致)
* - open_mode = 'online' | 'web' → 'online' 强制走线上(H5 整页刷新 / MP web-view)
* - 未设置 / 其他 → 'auto' 自动: 域名完全一致才内部, 否则线上
*
* @param {Object} link
* @returns {'internal'|'online'|'auto'}
*/
export function resolveNavMode(link) {
if (!link || typeof link !== 'object') return 'auto';
const pp = (link.page_params && typeof link.page_params === 'object') ? link.page_params : {};
const raw = link.open_mode != null ? link.open_mode
: (link.openMode != null ? link.openMode
: (pp.open_mode != null ? pp.open_mode : pp.openMode));
const m = (typeof raw === 'string') ? raw.trim().toLowerCase() : '';
if (m === 'internal' || m === 'spa') return 'internal';
if (m === 'online' || m === 'web') return 'online';
return 'auto';
}
// =============================================================
// hasStaleUniacidInUrl
// =============================================================
// pickCurrentUniacid
// =============================================================
/**
* 从两个候选 uniacid 源中选出"系统当前 uniacid"。
*
* 用法(当前 diyRedirectTo 中的实际调用, 必须与 http.js 行 168 保持一致):
* pickCurrentUniacid(
* uni.getStorageSync('uniacid'), // 持久化, 登录/初始化写入
* Config.uniacid, // 编译期兜底
* )
*
* 优先级: 第一个参数非 0 → 选第一个; 否则选第二个非 0 值; 都没有 → 0。
* 0 视为"无 uniacid": 业务上 uniacid 不会是 0, parseInt 后为 0 也算无效。
*
* ★ 注意: 故意【不读 store.state.uniacid】。当前代码库里 store.state 上从未设置
* uniacid 字段(http.js 只用 storage/Config), 若引入 store 分支会出现
* "守卫用 A 真值, http 请求用 B 真值"的不一致。
*
* @param {*} primaryValue 第一候选(运行时持久化值)
* @param {*} secondaryValue 第二候选(编译期兜底)
* @returns {number} 选出的 uniacid; 都无效时返回 0
*/
export function pickCurrentUniacid(primaryValue, secondaryValue) {
const a = parseInt(primaryValue, 10);
if (a) return a; // 非 0 真值
const b = parseInt(secondaryValue, 10);
if (b) return b;
return 0;
}
// =============================================================
// hasStaleUniacidInUrl
// =============================================================
/**
* 检测 link.wap_url 中【URL 原生】的 uniacid query 与系统当前 uniacid 是否一致。
*
* 用途: uniacid 是平台租户 ID, 会随租户迁移 / 平台调整而变化。
* - 如果数据里的 wap_url 自带的 uniacid 与当前系统不一致,
* 说明这份装修数据可能是历史遗留或别的租户的(脏数据),
* 不应该被自动改写成内部 SPA(否则会跳到错租户的内页 / 拿错数据)。
* - 应当保守地走外链(整页 / web-view), 让原 URL(及其 uniacid)如实生效。
*
* 关键: 必须【在 resolveLinkUrl 抽走 query 之前】判断, 否则 URL 里的 uniacid 已经
* 被搬到 page_params 里, 分不清"URL 原生"还是"外加的"。
*
* 比较规则: 两侧 parseInt 后比较, 兼容 '2482' vs 2482、URL 编码、空值。
*
* @param {string} wap_url link.wap_url (resolveLinkUrl 之前的原始值)
* @param {string|number|null} currentUniacid 系统当前的 uniacid
* (0 / null / '' / undefined 一律视为"无当前 uniacid", 返回 false — 让上游决定怎么做)
* @returns {boolean} true = URL 原生 uniacid 与当前不一致(脏数据, 该强制走线上)
*/
export function hasStaleUniacidInUrl(wap_url, currentUniacid) {
if (!wap_url || typeof wap_url !== 'string') return false;
if (currentUniacid == null || currentUniacid === '' || currentUniacid === 0) return false;
const m = wap_url.match(/[?&]uniacid=([^&#]*)/i);
if (!m) return false;
let urlUniacid;
try { urlUniacid = decodeURIComponent(m[1]); } catch (e) { urlUniacid = m[1]; }
const cur = String(currentUniacid);
const a = parseInt(urlUniacid, 10);
const b = parseInt(cur, 10);
// 两侧都能 parse 成数字时按数字比; 否则按字符串比
if (!Number.isNaN(a) && !Number.isNaN(b)) return a !== b;
return urlUniacid !== cur;
}
// =============================================================
// appendQueryParams
// =============================================================
@@ -484,29 +664,30 @@ export function shouldEncodeUrl() {
return true;
}
/**
* 跨平台 safeEncode(decode roundtrip + encode 一次)
* 仅编码 URL 分隔符 / 边界相关字符,保留中文 / ASCII 字母数字原样
*
* 4 平台编码行为:
* | 平台 | 宿主 | 内部自动 encode? | JS 侧需要 encode? |
* |-----------|---------------|------------------|------------------|
* | h5 | 浏览器 | 否 | 必须 |
* | mp-weixin | 微信原生 | 否 | 必须(否则微信把 & 当分隔符丢参数) |
* | mp-harmony| 鸿蒙原生 | 否 | 必须 |
* | quickapp | 华为快应用 Webview (本质 H5) | 否 | 必须 |
* 解决问题:
* - 微信小程序: 不会对 url 做整体 encode,只 split on '&' / '=',但 **不** decode 值
* 给 onLoad。所以 JS 必须 encode `&` `=` `?` `#` 空格(防止 query 边界被破坏),
* 但 **不能** encode 中文(否则 onLoad 拿到已编码字符串,显示成乱码)。
* - 鸿蒙元服务: 会整体 encode url(包括中文和已编码的 %xx)。
* 所以 JS 完全不 encode(让平台做)。见下面 mp-harmony 分支。
* - H5 / 快应用: 浏览器不 encode,JS 必须 encode 一次(用标准 encodeURIComponent)。
*
* 关键 bug 修复(2026-07-14):
* 微信小程序下, src 内嵌 URL 含 `&` `?` `=` 空格 反引号等特殊字符时,
* 若 JS 不主动 encode, 微信底层路由会把这些字符当成 top-level query 分隔符,
* 导致后续 key(id/uniacid/page_params) 全部丢失。
*
* @param {*} v
* @param {string} s 已 decode roundtrip 后的原文
* @returns {string}
*/
function _encodeUrlDelimiters(s) {
// 只 replace 这 5 个 URL 分隔 / 边界相关字符,其他(中文 / 字母 / 数字 / 标点等)原样
return s.replace(/[&=#?\s]/g, c => encodeURIComponent(c));
}
export function _safeEncodeForPlatform(v) {
const s = _toParamValueString(v);
// decode roundtrip: 兼容上游已 encode 过的入参
// decode roundtrip: 兼容上游已 encode 过的入参(无论平台都做,避免双编码)
let once = s;
try {
if (/%[0-9a-fA-F]{2}/.test(s)) {
@@ -516,7 +697,16 @@ export function _safeEncodeForPlatform(v) {
once = s;
}
// 4 平台都主动 encode 一次
const platform = getPlatform();
// 微信小程序: split on '&' / '=' 解析 url,但不 decode value 给 onLoad。
// - 中文 / 字母 / 数字 → 原样保留(否则 onLoad 拿到 %xx 乱码)
// - `&` `=` `?` `#` 空格 → 必须 encode(否则 query 边界被破坏, src 等含 URL 的字段被截断,webview 打不开)
if (['mp-weixin','mp-harmony'].includes(platform)) {
return _encodeUrlDelimiters(once);
}
// H5 / 华为快应用: 浏览器不自动编码, JS 侧必须主动 encode 一次(标准 encodeURIComponent)
return encodeURIComponent(once);
}
@@ -616,6 +806,7 @@ export function createNavigateApi(opts = {}) {
cleanParamUrls,
normalizeUrl,
appendQueryParams,
extractInternalAppPath,
parsePageParams,
resolveLinkUrl,
decodeEntity,

File diff suppressed because it is too large Load Diff

2090
common/js/util.js.bak Normal file

File diff suppressed because it is too large Load Diff

92
common/js/video-helper.js Normal file
View File

@@ -0,0 +1,92 @@
// iOS 微信小程序 <video> 兼容工具
// 问题背景:
// 1) 弹窗内的 <video> 用 autoplay 不可靠——popup 初始隐藏,autoplay 在隐藏态不触发,
// 等 popup 显示后也不会重新 autoplay,导致"安卓有时能播、iOS 不能";
// 2) iOS 对同一个 <video> 实例在 src 重绑 / 弹窗重开 / 播放结束后,不会自动重新加载,
// 需要靠 :key 重建实例或 seek(0) 才能重播;
// 3) iOS 微信不支持 webm / vp9 / hevc / ogv 等封装或编码,会直接黑屏;
// 4) H5 端(含微信内置浏览器)$nextTick 调 play() 太快,弹窗动画未完时浏览器内部
// 会自动 pause(),导致 "The play() request was interrupted by a call to pause()" 错误。
// 这里统一提供"格式检测"与"在视频可见后触发播放"的能力,供各视频组件复用。
//
// 重要:微信小程序的 <video>.play() 不要求用户手势(与 H5 不同),只要在视频元素
// 已经渲染、popup 已经显示后调用即可。因此请务必在 uni-popup 的 @change(show=true)
// 回调里调用本方法,而不是在 open() 里紧跟着 $nextTick 调用(那时元素尚未可见)。
// iOS 微信 <video> 已知不支持的封装/编码(仅按扩展名做保守判断,用于给出友好提示)
const UNSUPPORTED_EXT_ON_IOS = ['webm', 'ogv', 'ogg', 'mov', 'm4v', 'hevc', 'av1', '3gp'];
// 取 URL 中的小写扩展名(忽略查询参数与 hash)
export function getVideoExt(url) {
if (!url || typeof url !== 'string') return '';
const clean = url.split('?')[0].split('#')[0];
const idx = clean.lastIndexOf('.');
if (idx < 0) return '';
return clean.slice(idx + 1).toLowerCase();
}
// 该地址在 iOS 上是否很可能无法播放(基于扩展名的保守判断)
export function isLikelyUnsupportedOnIOS(url) {
const ext = getVideoExt(url);
if (!ext) return false;
return UNSUPPORTED_EXT_ON_IOS.indexOf(ext) !== -1;
}
// 在"视频已经渲染、popup 已经显示"的前提下触发播放。
// 必须在 uni-popup 的 @change(show=true) 回调里调用,此时 <video> 元素已可见,
// createVideoContext 才能拿到有效实例。
// videoId: <video> 的 id;instance: 当前组件/页面实例(组件内必传)。
export function playVideoInContext(videoId, instance) {
if (!videoId || !instance) return;
// H5 端需要更长延迟:等 uni-popup 动画播完(~350ms),否则浏览器内部会自动
// pause() 导致 "play() interrupted by pause()" 错误;小程序端 $nextTick 即可。
// #ifdef H5
const delay = 400;
// #endif
// #ifndef H5
const delay = 0;
// #endif
const doPlay = () => {
let ctx = null;
try {
ctx = uni.createVideoContext(videoId, instance);
} catch (e) {
console.error('[video-helper] createVideoContext failed:', e);
return;
}
if (!ctx) return;
try {
ctx.play();
} catch (e) {
console.error('[video-helper] play() failed, will retry:', e);
// H5 端首次 play() 常被浏览器自动 pause() 打断,延迟重试一次
// #ifdef H5
setTimeout(() => {
try { ctx.play(); } catch (retryErr) {
console.error('[video-helper] retry play() also failed:', retryErr);
}
}, 300);
// #endif
}
};
if (delay > 0) {
// H5:先等 nextTick(DOM 更新),再等 delay(弹窗动画完成)
if (typeof instance.$nextTick === 'function') {
instance.$nextTick(() => setTimeout(doPlay, delay));
} else {
setTimeout(doPlay, delay);
}
} else {
// 小程序端:nextTick 即可
if (typeof instance.$nextTick === 'function') {
instance.$nextTick(doPlay);
} else {
doPlay();
}
}
}

819
common/js/voice-recorder.js Normal file
View File

@@ -0,0 +1,819 @@
/**
* voice-recorder.js — 跨端录音抽象层
*
* PR-FRONTEND-VOICE-INPUT (2026-09-24)
* 统一 H5 / 微信小程序 / App-Plus / 鸿蒙元服务 四端的录音接口,
* 把麦克风采集 + 振幅事件 + 自动停止 + 资源回收 收敛到一处。
*
* PR-FRONTEND-VOICE-WAV (2026-09-25)
* H5 分支从 MediaRecorder (产出 webm/opus) 改为 AudioContext + ScriptProcessor
* 采原始 PCM, 停止时手动封装成标准 WAV (PCM 16-bit LE mono, 16kHz).
* 原因: Chrome MediaRecorder 只支持 webm/ogg 容器, 不支持 wav/mp3 录制;
* 大多数 STT / 后端 Agent 框架无法解析 webm/opus.
* 产 wav 后所有 STT 服务 (Whisper / 达摩院 / 腾讯 ASR / ...) 都吃.
*
* 平台分支:
* - H5 : navigator.mediaDevices.getUserMedia → AudioContext
* → ScriptProcessor 采 PCM Float32 → 停止时封装 WAV.
* 振幅采样走 AnalyserNode (与采 PCM 并行, 不冲突).
* - MP / APP / 鸿蒙: uni.getRecorderManager()(uni-app 鸿蒙 runtime 已映射)
* 走 onFrameRecorded 推 progress 事件.
* uni-app format 参数可指定 wav/mp3/aac.
*
* 统一事件:
* progress → { level: 0..1, duration: ms } 持续采样, 用于驱动波形动画
* error → Error 录音失败
*
* 统一结果 (stop() 解析):
* {
* filePath?: string, // MP/APP/鸿蒙: tempFilePath; H5: blob URL
* blob?: Blob, // H5: WAV Blob (供 FileReader / uploadMedia 二次处理)
* fileName?: string, // H5: voice_<ts>.wav; MP 按 uni 约定
* duration: number, // ms
* mime: string, // 录音产物 MIME: H5='audio/wav', MP/APP/鸿蒙按 format
* size: number, // bytes
* cancelled: false
* }
*
* 取消时 resolve(null);调用方拿到 null 时不要 push 到 pendingFiles。
*/
const DEFAULT_MAX_DURATION_MS = 60 * 1000
// PR-FRONTEND-VOICE-SINGLETON (2026-09-29): uni.getRecorderManager() / wx.getRecorderManager()
// 是全局单例, 且微信内部状态极易因上一次未完全停止而残留, 导致下一次 start() 报
// "operateRecorder:fail:audio is recording, don't start"。
// 这里用模块级 Promise 把所有 start/stop 串行化, 确保前一个实例 onStop/onError 完成后
// 才允许下一个实例 start()。
let _singletonIdlePromise = Promise.resolve()
let _singletonIdleResolver = null
let _singletonRec = null
let _singletonBusyInstance = null
function _getSingletonRecorder() {
if (!_singletonRec) {
_singletonRec = uni.getRecorderManager()
}
return _singletonRec
}
let _singletonIdleTimer = null
function _setSingletonBusy(instance, maxDurationMs = DEFAULT_MAX_DURATION_MS) {
if (_singletonIdleTimer) {
clearTimeout(_singletonIdleTimer)
_singletonIdleTimer = null
}
if (_singletonIdleResolver) {
// 已经有未释放的 busy promise, 理论上不应发生; 先强制释放避免死锁
_singletonIdleResolver()
_singletonIdleResolver = null
}
_singletonIdlePromise = new Promise((resolve) => {
_singletonIdleResolver = resolve
})
_singletonBusyInstance = instance
// 保险: 即使 onStop/onError 因异常没触发, 最多等 10s 也要释放,
// 避免死锁导致后续所有 start() 永远挂起。
_singletonIdleTimer = setTimeout(() => {
console.warn('[voice-recorder:singleton] idle timeout, force release')
_setSingletonIdle(instance)
}, Math.min(maxDurationMs + 5000, 10000))
}
function _setSingletonIdle(instance) {
if (_singletonIdleTimer) {
clearTimeout(_singletonIdleTimer)
_singletonIdleTimer = null
}
if (_singletonBusyInstance && _singletonBusyInstance !== instance) {
// 不是当前占用者释放, 忽略
return
}
if (_singletonIdleResolver) {
_singletonIdleResolver()
_singletonIdleResolver = null
}
_singletonIdlePromise = Promise.resolve()
_singletonBusyInstance = null
}
// H5 录音参数: 16kHz mono PCM → 16-bit LE WAV
// 16kHz/16-bit 是大多数 STT 服务 (Whisper / 达摩院 / 腾讯 ASR 等) 最常见的输入规格.
const H5_SAMPLE_RATE = 16000
const H5_NUM_CHANNELS = 1
const H5_SCRIPT_PROCESSOR_BUFFER_SIZE = 4096
/**
* 构造带 code 字段的 Error
* - code: 稳定的英文枚举, 供调用方按 code 走 $lang() 翻译
* - message: 兜底英文 message, 用于开发/调试或未识别 code
* 注意: voice-recorder.js 自身不持有 Vue 上下文, 翻译必须在调用方完成
*/
function _err(code, message) {
const e = new Error(message || code)
e.code = code
return e
}
/**
* 检测当前运行环境 (避免编译器把所有分支都打进去)
* - true / false 都是运行时结果;条件编译靠注释里的 #ifdef
*/
function isH5() {
// #ifdef H5
return true
// #endif
// #ifndef H5
return false
// #endif
}
function isMpOrApp() {
// #ifdef MP-WEIXIN || APP-PLUS || MP-HARMONY
return true
// #endif
// #ifndef MP-WEIXIN || APP-PLUS || MP-HARMONY
return false
// #endif
}
/**
* 由 mime 反推文件扩展名
*/
function mimeToExt(mime) {
if (!mime) return 'wav'
if (mime.indexOf('wav') !== -1) return 'wav'
if (mime.indexOf('webm') !== -1) return 'webm'
if (mime.indexOf('ogg') !== -1) return 'ogg'
if (mime.indexOf('mp4') !== -1) return 'm4a'
if (mime.indexOf('mpeg') !== -1) return 'mp3'
if (mime.indexOf('aac') !== -1) return 'aac'
return 'audio'
}
/**
* 合并多个 Float32Array (PCM 帧缓冲) 为单个 Float32Array
*/
function mergeFloat32Arrays(arrays) {
let totalLength = 0
for (let i = 0; i < arrays.length; i++) totalLength += arrays[i].length
const out = new Float32Array(totalLength)
let offset = 0
for (let i = 0; i < arrays.length; i++) {
out.set(arrays[i], offset)
offset += arrays[i].length
}
return out
}
/**
* 将 Float32 PCM (-1..1) 编码为标准 WAV (PCM 16-bit LE, RIFF/WAVE 头).
* 所有 STT 服务都吃这个格式; 浏览器 H5 录音不依赖 MediaRecorder 也能产出.
*
* 参考 RIFF/WAVE 规范:
* https://docs.fileformat.com/audio/wav/
* http://soundfile.sapp.org/doc/WaveFormat/
*/
function encodeWavPcm16LE(samples, sampleRate, numChannels) {
const bytesPerSample = 2 // 16-bit
const dataSize = samples.length * numChannels * bytesPerSample
const buffer = new ArrayBuffer(44 + dataSize)
const view = new DataView(buffer)
// RIFF chunk descriptor (12 bytes)
writeAscii(view, 0, 'RIFF')
view.setUint32(4, 36 + dataSize, true) // ChunkSize = 文件总字节 - 8
writeAscii(view, 8, 'WAVE')
// fmt subchunk (24 bytes)
writeAscii(view, 12, 'fmt ')
view.setUint32(16, 16, true) // Subchunk1Size for PCM = 16
view.setUint16(20, 1, true) // AudioFormat: 1 = PCM
view.setUint16(22, numChannels, true)
view.setUint32(24, sampleRate, true)
view.setUint32(28, sampleRate * numChannels * bytesPerSample, true) // ByteRate
view.setUint16(32, numChannels * bytesPerSample, true) // BlockAlign
view.setUint16(34, 16, true) // BitsPerSample
// data subchunk (8 + N bytes)
writeAscii(view, 36, 'data')
view.setUint32(40, dataSize, true)
// PCM 样本: Float32 (-1..1) → Int16 LE (clamp 到 [-1, 1] 防溢出)
let offset = 44
for (let i = 0; i < samples.length; i++) {
let s = samples[i]
if (s > 1) s = 1
else if (s < -1) s = -1
const int16 = s < 0 ? Math.round(s * 0x8000) : Math.round(s * 0x7FFF)
view.setInt16(offset, int16, true)
offset += 2
}
return buffer
}
function writeAscii(view, offset, str) {
for (let i = 0; i < str.length; i++) {
view.setUint8(offset + i, str.charCodeAt(i))
}
}
/**
* 创建录音器实例。
*
* @param {object} [opts]
* @param {number} [opts.maxDuration=60000] 自动停止时长 (ms)
* @param {string} [opts.format] MP/APP/鸿蒙 'mp3'|'aac'|'wav' (uni-app 文档)
* @param {number} [opts.sampleRate=16000]
* @param {number} [opts.numberOfChannels=1]
* @param {number} [opts.encodeBitRate=48000]
*
* @returns {VoiceRecorder}
*/
export function createVoiceRecorder(opts = {}) {
return new VoiceRecorder(opts)
}
class VoiceRecorder {
constructor(opts) {
this._maxDuration = opts.maxDuration || DEFAULT_MAX_DURATION_MS
// PR-FRONTEND-VOICE-FORMAT (2026-09-29): 微信小程序在部分 Android 机型上对 mp3/aac 兼容性差,
// 表现为一启动就 onStop(duration~100ms)。wav 是无压缩格式, 兼容性最好, 优先使用。
this._format = opts.format || 'wav'
this._sampleRate = opts.sampleRate || 16000
this._channels = opts.numberOfChannels || 1
this._bitRate = opts.encodeBitRate || 48000
this._listeners = { progress: [], error: [] }
this._isRecording = false
this._isStarting = false // start() 已调用, 但 onStart 尚未回调
this._stopResolve = null // 当前 stop() 等待 onStop 解析的 resolve
this._pendingStop = false // onStart 之前就调用了 stop() → 等开始后立即停
this._startTs = 0
this._id = Math.random().toString(36).slice(2, 8)
this._autoStopTimer = null
this._stopFallbackTimer = null // PR-FRONTEND-VOICE-FALLBACK: stop()/cancel() 兜底定时器
this._earlyStopResult = null // PR-FRONTEND-VOICE-RACE: onStop 在 stop() 之前触发时缓存结果
// 平台相关句柄
this._h5 = null // { mediaRecorder, stream, audioCtx, analyser, chunks, mime, rafId }
this._uniRec = null // uni.getRecorderManager() 返回值
console.log(`[voice-recorder:${this._id}] created`)
}
on(event, cb) {
if (!this._listeners[event]) this._listeners[event] = []
this._listeners[event].push(cb)
}
off(event, cb) {
const arr = this._listeners[event]
if (!arr) return
const idx = arr.indexOf(cb)
if (idx !== -1) arr.splice(idx, 1)
}
_emit(event, payload) {
const arr = this._listeners[event]
if (!arr) return
for (const cb of arr.slice()) {
try { cb(payload) } catch (e) { /* swallow */ }
}
}
get isRecording() { return this._isRecording }
/**
* 开始录音。
* resolve() 仅表示「启动成功」,真正的产物在 stop()/cancel() 中拿到。
*/
start() {
if (this._isRecording) {
return Promise.reject(_err('ALREADY_STARTED', 'recorder already started'))
}
if (this._isStarting) {
return Promise.reject(_err('ALREADY_STARTED', 'recorder is starting'))
}
this._isStarting = true
let p = null
if (isH5()) {
p = this._startH5()
} else if (isMpOrApp()) {
p = this._startUni()
} else {
this._isStarting = false
return Promise.reject(_err('NOT_SUPPORTED', 'voice input not supported on this platform'))
}
// 启动失败时复位状态, 避免后续 stop()/cancel() 一直挂起
p.catch((e) => {
this._isStarting = false
return Promise.reject(e)
})
return p
}
/**
* 停止录音并返回产物。
* resolve(null) 表示已取消 / 无产物,调用方应忽略。
*/
stop() {
console.log(`[voice-recorder:${this._id}] stop() called`, { isRecording: this._isRecording, isStarting: this._isStarting, hasUniRec: !!this._uniRec, hasStopResolve: !!this._stopResolve, earlyResult: !!this._earlyStopResult })
if (!this._isRecording) {
// PR-FRONTEND-VOICE-RACE (2026-09-29): 真机常见"按住即松手"——
// onStart 尚未回调 (录音未真正开始) 就调用 stop(), 原逻辑直接返回 null
// 导致上层判定"录音失败,请重试"。这里改为挂起, 等 onStart 触发后立即停,
// 产物仍走 onStop 正常返回 (太短的音轨后端可自行拒绝)。
if (this._isStarting) {
console.log(`[voice-recorder:${this._id}] stop() deferred: waiting for onStart`)
return new Promise((resolve) => {
this._pendingStop = true
this._stopResolve = resolve
})
}
// onStop 在 stop() 之前触发, 且有有效产物则返回缓存结果
if (this._earlyStopResult) {
const r = this._earlyStopResult
this._earlyStopResult = null
console.log(`[voice-recorder:${this._id}] stop() returning early onStop result`)
return Promise.resolve(r)
}
console.log(`[voice-recorder:${this._id}] stop() early return null (not recording)`)
return Promise.resolve(null)
}
if (isH5()) return this._stopH5()
return this._stopUni()
}
/**
* 中断录音并丢弃产物。
*/
cancel() {
if (this._isStarting) {
// PR-FRONTEND-VOICE-CANCEL-RACE (2026-09-29): onStart 尚未触发就取消,
// 不能立即返回, 否则录音器启动后会继续录制。挂起 pendingStop,
// 等 onStart 触发后立即 stop(), 产物被丢弃。
console.log(`[voice-recorder:${this._id}] cancel() deferred: waiting for onStart`)
return new Promise((resolve) => {
this._pendingStop = true
this._stopResolve = () => resolve()
})
}
if (!this._isRecording) {
this._clearAutoStopTimer()
return Promise.resolve()
}
if (isH5()) return this._cancelH5()
return this._cancelUni()
}
// ===================== H5 实现 =====================
// PR-FRONTEND-VOICE-WAV (2026-09-25): 改为 AudioContext + ScriptProcessor 采 PCM,
// 停止时手动封装标准 WAV. 不再依赖 MediaRecorder, 解决 Chrome 只能产 webm/opus
// 导致后端 STT / Agent framework 无法解析的问题.
//
// 关键设计:
// 1. PCM 采样率固定 16kHz mono, 浏览器会自动 resample 麦克风输入
// (实际由 AudioContext sampleRate 参数保证)
// 2. ScriptProcessor 必须 connect 到 audioCtx.destination 才会触发
// onaudioprocess; 通过 GainNode(gain=0) 静音防止麦克风外放回声
// 3. 振幅采样走 AnalyserNode (与 PCM 采样并行, 不冲突)
// 4. onaudioprocess 每帧必须拷贝 channelData (new Float32Array(input)),
// 否则下一帧会覆盖导致 PCM 数据丢失
_startH5() {
return new Promise((resolve, reject) => {
if (typeof navigator === 'undefined' || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
reject(_err('H5_NO_MIC_API', 'mic API not available (HTTPS or localhost required)'))
return
}
const Ctx = window.AudioContext || window.webkitAudioContext
if (!Ctx) {
reject(_err('H5_NO_AUDIO_CTX', 'AudioContext not available'))
return
}
const buffers = []
let stream = null
let audioCtx = null
let source = null
let processor = null
let analyser = null
let silentGain = null
let rafId = null
// 清理 H5 资源 (失败 / 异常路径统一调用)
const cleanup = () => {
try { if (rafId) cancelAnimationFrame(rafId) } catch (e) { /* noop */ }
try { if (processor) processor.disconnect() } catch (e) { /* noop */ }
try { if (analyser) analyser.disconnect() } catch (e) { /* noop */ }
try { if (source) source.disconnect() } catch (e) { /* noop */ }
try { if (silentGain) silentGain.disconnect() } catch (e) { /* noop */ }
try { if (audioCtx && audioCtx.state !== 'closed') audioCtx.close().catch(() => {}) } catch (e) { /* noop */ }
try { if (stream) stream.getTracks().forEach(t => t.stop()) } catch (e) { /* noop */ }
}
navigator.mediaDevices.getUserMedia({
audio: {
channelCount: H5_NUM_CHANNELS,
// 注意: 部分浏览器会忽略 sampleRate 约束, 实际采样率以 AudioContext 为准
sampleRate: H5_SAMPLE_RATE,
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true
}
})
.then((s) => {
stream = s
audioCtx = new Ctx({ sampleRate: H5_SAMPLE_RATE })
// 麦克风 → ScriptProcessor → 静音 GainNode → destination
// (ScriptProcessor 必须连到 destination 才会触发 onaudioprocess;
// 用 GainNode(gain=0) 静音, 防止麦克风声音外放产生回声)
source = audioCtx.createMediaStreamSource(stream)
const BufferSize = H5_SCRIPT_PROCESSOR_BUFFER_SIZE
processor = audioCtx.createScriptProcessor(BufferSize, H5_NUM_CHANNELS, H5_NUM_CHANNELS)
processor.onaudioprocess = (e) => {
const channelData = e.inputBuffer.getChannelData(0)
// 必须拷贝: inputBuffer 数据会被下一帧覆盖, 不拷贝会导致 PCM 丢失
buffers.push(new Float32Array(channelData))
}
silentGain = audioCtx.createGain()
silentGain.gain.value = 0
source.connect(processor)
processor.connect(silentGain)
silentGain.connect(audioCtx.destination)
// AnalyserNode 并行采振幅 (驱动波形动画)
analyser = audioCtx.createAnalyser()
analyser.fftSize = 256
source.connect(analyser)
const freqBuf = new Uint8Array(analyser.frequencyBinCount)
const tick = () => {
if (!this._isRecording) return
try {
analyser.getByteFrequencyData(freqBuf)
let sum = 0
for (let i = 0; i < freqBuf.length; i++) sum += freqBuf[i]
const level = Math.min(1, sum / (freqBuf.length * 255))
this._emit('progress', { level, duration: Date.now() - this._startTs })
} catch (e) { /* noop */ }
rafId = requestAnimationFrame(tick)
}
tick()
this._h5 = { stream, audioCtx, source, processor, analyser, silentGain, rafId, buffers, sampleRate: audioCtx.sampleRate, cleanup }
this._isRecording = true
this._startTs = Date.now()
this._setAutoStopTimer()
resolve()
})
.catch((err) => {
// 麦克风权限拒绝 / 设备不可用
cleanup()
reject(_err('H5_MIC_PERMISSION', (err && err.message) || 'mic permission denied or device unavailable'))
})
})
}
_stopH5() {
return new Promise((resolve) => {
const h5 = this._h5
if (!h5) { resolve(null); return }
// 1) 拆 audio graph + 停流 (避免 onprocess 继续累积 buffer)
try { h5.cleanup() } catch (e) { /* noop */ }
// 2) 合并 PCM 帧缓冲
const sampleRate = h5.sampleRate || H5_SAMPLE_RATE
const merged = mergeFloat32Arrays(h5.buffers || [])
// 3) 编码标准 WAV (PCM 16-bit LE mono)
const wavBuffer = encodeWavPcm16LE(merged, sampleRate, H5_NUM_CHANNELS)
const blob = new Blob([wavBuffer], { type: 'audio/wav' })
this._h5 = null
this._isRecording = false
this._clearAutoStopTimer()
if (merged.length === 0) {
// 没有采到任何 PCM (例如用户没说话或立即 stop)
resolve(null)
return
}
const fileName = `voice_${Date.now()}.wav`
const blobUrl = (typeof URL !== 'undefined' && URL.createObjectURL)
? URL.createObjectURL(blob)
: ''
resolve({
filePath: blobUrl,
blob,
fileName,
duration: Date.now() - this._startTs,
mime: 'audio/wav',
size: blob.size,
cancelled: false
})
})
}
_cancelH5() {
return new Promise((resolve) => {
const h5 = this._h5
if (!h5) {
this._isRecording = false
this._clearAutoStopTimer()
resolve()
return
}
try { h5.cleanup() } catch (e) { /* noop */ }
this._h5 = null
this._isRecording = false
this._clearAutoStopTimer()
resolve()
})
}
// ===================== uni-app (MP/APP/鸿蒙) 实现 =====================
_startUni() {
// PR-FRONTEND-VOICE-SINGLETON: 串行化所有对微信录音单例的访问,
// 防止"上一个 onStop 还没触发, 下一个 start() 就报 audio is recording"。
return _singletonIdlePromise.then(() => {
// 防竞态: 注册 .then() 后到回调执行前, 可能有其他实例先占用了单例, 需要重新排队。
if (_singletonBusyInstance && _singletonBusyInstance !== this) {
console.log(`[voice-recorder:${this._id}] _startUni: singleton busy by ${_singletonBusyInstance._id}, re-queue`)
return this._startUni()
}
_setSingletonBusy(this, this._maxDuration)
console.log(`[voice-recorder:${this._id}] _startUni: singleton busy acquired`)
return this._doStartUni()
})
}
_doStartUni() {
return new Promise((resolve, reject) => {
let rec = null
try {
rec = _getSingletonRecorder()
} catch (e) {
_setSingletonIdle(this)
reject(_err('NO_RECORDER_MANAGER', 'uni.getRecorderManager unavailable'))
return
}
if (!rec) {
_setSingletonIdle(this)
reject(_err('NO_RECORDER_MANAGER', 'recorder manager unavailable'))
return
}
this._uniRec = rec
this._isStarting = true
console.log(`[voice-recorder:${this._id}] _startUni: start() invoked on singleton`)
rec.onStart(() => {
console.log(`[voice-recorder:${this._id}] onStart fired`)
this._isRecording = true
this._isStarting = false
this._startTs = Date.now()
this._setAutoStopTimer()
if (this._pendingStop) {
// 用户在录音真正开始前就松手: 立即结束, 产物经 onStop 返回
console.log(`[voice-recorder:${this._id}] onStart: pendingStop detected, calling rec.stop()`)
this._pendingStop = false
try { rec.stop() } catch (e) { /* onStop 自会兜底 */ }
}
resolve()
})
rec.onStop((res) => {
// res = { tempFilePath, duration, fileSize }
console.log(`[voice-recorder:${this._id}] onStop fired`, res, 'hasStopResolve=', !!this._stopResolve)
this._clearStopFallbackTimer()
this._uniRec = null
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
// PR-FRONTEND-VOICE-FORMAT (2026-09-29): 微信临时文件后缀才是真实容器格式:
// Android aac → .m4a, iOS aac → .aac, mp3 → .mp3。按实际后缀给 mime/文件名,
// 避免播放器/后端因后缀与容器不符而失败。
const tempPath = (res && res.tempFilePath) || ''
const rawExt = (tempPath.split('?')[0].split('/').pop().match(/\.([a-z0-9]+)$/i) || [])[1] || ''
const ext = rawExt.toLowerCase()
const mime = ext === 'm4a' ? 'audio/mp4'
: ext === 'aac' ? 'audio/aac'
: ext === 'mp3' ? 'audio/mpeg'
: ext === 'wav' ? 'audio/wav'
: (this._format === 'wav' ? 'audio/wav'
: this._format === 'aac' ? 'audio/aac'
: 'audio/mpeg')
// PR-FRONTEND-VOICE-DURATION-FIX (2026-09-29): 微信 onStop 的 duration
// 偶尔为 0, 用 start→stop 真实时长兜底, 避免下游按 duration=0 丢弃。
const realDuration = this._startTs ? Date.now() - this._startTs : 0
const reportedDuration = (res && typeof res.duration === 'number') ? res.duration : 0
const duration = reportedDuration > 0 ? reportedDuration : realDuration
const result = {
filePath: tempPath,
blob: null,
fileName: tempPath ? `voice_${Date.now()}.${ext || 'aac'}` : '',
duration,
mime,
size: res.fileSize || 0,
cancelled: false
}
if (this._stopResolve) {
const r = this._stopResolve
this._stopResolve = null
r(result)
} else if (result.filePath && result.duration > 0) {
// PR-FRONTEND-VOICE-RACE: onStop 在 stop() 之前触发且产物有效, 缓存起来
this._earlyStopResult = result
}
_setSingletonIdle(this)
})
rec.onError((err) => {
this._clearStopFallbackTimer()
const e = _err('UNI_RECORD_ERROR', (err && (err.errMsg || err.message)) || 'record failed')
console.error(`[voice-recorder:${this._id}] UNI_RECORD_ERROR raw:`, err, 'errMsg=', err && err.errMsg, 'message=', err && err.message)
this._uniRec = null
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
this._emit('error', e)
if (this._stopResolve) {
const r = this._stopResolve
this._stopResolve = null
r(null)
} else {
// 启动阶段的 reject
reject(e)
}
_setSingletonIdle(this)
})
// 振幅事件 (uni-app 文档:onFrameRecorded, frameSize 单位 KB, frameBuffer ArrayBuffer)
if (typeof rec.onFrameRecorded === 'function') {
rec.onFrameRecorded((res) => {
if (!res || !res.frameBuffer) return
// frameBuffer 是 PCM 字节,简单用 |sample| / 0x8000 取平均振幅
try {
const view = new DataView(res.frameBuffer)
let sum = 0
const len = res.frameBuffer.byteLength
const step = Math.max(2, Math.floor(len / 256))
for (let i = 0; i < len; i += step) {
const v = view.getInt16(i, true)
sum += Math.abs(v)
}
const avg = sum / Math.max(1, Math.floor(len / step))
const level = Math.min(1, avg / 16384)
this._emit('progress', { level, duration: Date.now() - this._startTs })
} catch (e) { /* noop */ }
})
}
try {
rec.start({
// PR-FRONTEND-VOICE-DURATION-UNIT (2026-09-29): 微信 RecorderManager.start 的 duration
// 单位是毫秒(ms), 不是秒。之前 /1000 导致只录 60ms 就被自动停止。
duration: this._maxDuration,
sampleRate: this._sampleRate,
numberOfChannels: this._channels,
encodeBitRate: this._bitRate,
format: this._format
// PR-FRONTEND-VOICE-FRAMESIZE (2026-09-29): 去掉 frameSize, 部分机型对此参数敏感,
// 可能导致录音被提前中断。
})
} catch (e) {
this._clearStopFallbackTimer()
this._uniRec = null
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
_setSingletonIdle(this)
// 启动阶段就被 stop()/cancel() 抢占, 需要 Fulfill 挂起的 Promise, 而不是 reject
if (this._stopResolve && this._pendingStop) {
const r = this._stopResolve
this._stopResolve = null
this._pendingStop = false
r(null)
return
}
reject(e)
}
})
}
_stopUni() {
return new Promise((resolve) => {
console.log(`[voice-recorder:${this._id}] _stopUni called`)
const rec = this._uniRec
if (!rec) { resolve(null); return }
this._earlyStopResult = null
this._stopResolve = resolve
this._clearStopFallbackTimer()
// PR-FRONTEND-VOICE-FALLBACK: 真机偶发 onStop 不回调, 导致 stop() 永远挂起,
// UI 无法释放旧实例, 新录音提示"recorder already exists"。最多等 3s 强制 resolve。
this._stopFallbackTimer = setTimeout(() => {
console.warn(`[voice-recorder:${this._id}] _stopUni fallback timeout, force resolve`)
this._stopResolve = null
this._pendingStop = false
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
this._uniRec = null
_setSingletonIdle(this)
resolve(null)
}, 3000)
try { rec.stop() } catch (e) {
this._clearStopFallbackTimer()
this._stopResolve = null
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
this._uniRec = null
_setSingletonIdle(this)
resolve(null)
}
})
}
_cancelUni() {
return new Promise((resolve) => {
console.log(`[voice-recorder:${this._id}] _cancelUni called`)
this._earlyStopResult = null
const rec = this._uniRec
if (!rec) {
// 挂起的 stop 需要一并了结, 避免松手后卡在 pending
if (this._stopResolve && this._pendingStop) {
const r = this._stopResolve
this._stopResolve = null
this._pendingStop = false
r(null)
}
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
_setSingletonIdle(this)
resolve()
return
}
this._stopResolve = () => resolve()
this._pendingStop = false
this._clearStopFallbackTimer()
// PR-FRONTEND-VOICE-FALLBACK: cancel() 同样可能因 onStop 不回调而挂起。
this._stopFallbackTimer = setTimeout(() => {
console.warn(`[voice-recorder:${this._id}] _cancelUni fallback timeout, force resolve`)
this._stopResolve = null
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
this._uniRec = null
_setSingletonIdle(this)
resolve()
}, 3000)
try { rec.stop() } catch (e) {
this._clearStopFallbackTimer()
this._isRecording = false
this._isStarting = false
this._clearAutoStopTimer()
this._uniRec = null
_setSingletonIdle(this)
resolve()
}
})
}
// ===================== 工具 =====================
_setAutoStopTimer() {
this._clearAutoStopTimer()
this._autoStopTimer = setTimeout(() => {
// 自动停止 (上限到达)
if (this._isRecording) {
this.stop().catch(() => { /* swallow */ })
}
}, this._maxDuration)
}
_clearAutoStopTimer() {
if (this._autoStopTimer) {
clearTimeout(this._autoStopTimer)
this._autoStopTimer = null
}
}
_clearStopFallbackTimer() {
if (this._stopFallbackTimer) {
clearTimeout(this._stopFallbackTimer)
this._stopFallbackTimer = null
}
}
}
export default createVoiceRecorder

View File

@@ -1,30 +1,35 @@
<template>
<view data-component-name="diy-bottom-nav" v-if="shouldShowTabBar">
<view class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
<view class="tabbar-border"></view>
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @tap.stop="redirectTo(item.link)">
<view class="bd">
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2"
:animation="isCartItem(item.link) ? cartAnimation : null"
:id="isCartItem(item.link) ? 'tabbarCart' : null">
<block v-if="verify(item.link)">
<image v-if="item.selected_icon_type == 'img'"
:src="$util.img(item.selectedIconPath)" />
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
:value="item.selected_style ? item.selected_style : null"></diy-icon>
</block>
<block v-else>
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath"
:value="item.style ? item.style : null"></diy-icon>
</block>
<view class="cart-count-mark font-size-activity-tag"
:class="{ max: cartNumber > 99 }"
:style="{ background: 'var(--price-color)' }"
v-if="isCartItem(item.link) && cartNumber > 0">
{{ cartNumber > 99 ? '99+' : cartNumber }}
<!-- 修复底部 TabBar 频闪:
微信小程序等环境下 `shouldShowTabBar` 在 tabBarList 异步加载期间会从 false→true 短暂切换,
配合 `v-if` 会让整个 tab 组件树卸载/重建 -> 视觉频闪 + tabBar 占用空间反复占位/释放导致上方内容跳动。
改为 `v-show`, 只切换可见性, 内部 tab 始终在 DOM 中(无 tabBarList 时只渲染空壳占位)。 -->
<view data-component-name="diy-bottom-nav" v-show="shouldShowTabBar">
<!-- tabBarList 未就绪时仍保留 placeholder 占位, 避免上方内容在加载完成后突跳 -->
<view v-if="tabBarList && tabBarList.list && tabBarList.list.length" class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
<view class="tabbar-border"></view>
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @tap.stop="redirectTo(item.link)">
<view class="bd">
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2"
:animation="isCartItem(item.link) ? cartAnimation : null"
:id="isCartItem(item.link) ? 'tabbarCart' : null">
<block v-if="verify(item.link)">
<image v-if="item.selected_icon_type == 'img'"
:src="$util.img(item.selectedIconPath)" />
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
:value="item.selected_style ? item.selected_style : null"></diy-icon>
</block>
<block v-else>
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath"
:value="item.style ? item.style : null"></diy-icon>
</block>
<view class="cart-count-mark font-size-activity-tag"
:class="{ max: cartNumber > 99 }"
:style="{ background: 'var(--price-color)' }"
v-if="isCartItem(item.link) && cartNumber > 0">
{{ cartNumber > 99 ? '99+' : cartNumber }}
</view>
</view>
</view>
<view class="label"
v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'diy'"
:style="{ color: verify(item.link) ? tabBarList.textHoverColor : tabBarList.textColor }">
@@ -38,7 +43,7 @@
</view>
</view>
</view>
<!-- 解决fixed定位后底部导航栏塌陷问题 -->
<!-- 解决fixed定位后底部导航栏塌陷问题: 始终保留 placeholder, 避免内容随 tabBar 可见性跳 -->
<view class="tab-bar-placeholder"></view>
</view>
</template>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -265,7 +265,7 @@ export default {
// #ifndef MP-WEIXIN
if (item?.channelType === 'wechat') {
uni.showToast({
title: '视频号仅支持在微信小程序环境中播放',
title: this.$lang('wechatChannel.wechatMpOnly'),
icon: 'none',
duration: 2000
});

View File

@@ -1,36 +1,25 @@
<template>
<template>
<view :style="componentStyle" data-component-name="diy-digit">
<scroll-view :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'">
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index"
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
:style="{ width: (100 / value.rowCount + '%') + ';' }">
<view style="display:flex;">
<view :style="{
'line-height': '1.2;',
'font-size': (value.font.titlesize * 2 + 'rpx') + ';',
'font-weight': '600;',
'color': value.font.titlecolor + ';'
}">
:style="itemStyle">
<view :style="innerWrapStyle">
<view :style="innerRowStyle">
<uv-count-to :ref="`countTo-${index}`" :autoplay="true" :startVal="30" :endVal="item.title"
:decimals="getvalue(item.title)" decimal="."></uv-count-to>
<text :style="{
'margin-left': '4rpx;',
'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.unitcolor + ';'
}">{{ item.unit }}</text>
:decimals="getvalue(item.title)" decimal="."
:color="value.font.titlecolor"
:fontSize="titleFontSize"
:bold="isBold(value.font.weight)"></uv-count-to>
<text :style="unitStyle">{{ item.unit }}</text>
</view>
</view>
<view class="graphic-text">
<text :style="{
'font-size': (value.font.descsize * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.desccolor + ';'
}">{{ item.desc }}</text>
<view class="graphic-text">
<text :style="descStyle">{{ item.desc }}</text>
</view>
</view>
</view>
</view>
</scroll-view>
<ns-login ref="login"></ns-login>
@@ -54,10 +43,20 @@ export default {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
// #ifndef MP
,windowWidth: 375
// #endif
}
},
created() {
// 组件创建时的逻辑
// #ifndef MP
try {
let info = uni.getSystemInfoSync();
this.windowWidth = info.windowWidth || info.screenWidth || 375;
if (this.windowWidth > 960) this.windowWidth = 375;
} catch (e) { }
// #endif
},
watch: {
componentRefresh(newValue) {
@@ -65,6 +64,42 @@ export default {
}
},
computed: {
// 全部返回字符串:WeChat 小程序的 style="{{obj}}" 对象绑定不会被运行时正确解析为内联 CSS
//(参考 diy-graphic-nav.vue:那里同样用字符串拼接 style="{{'width:...%'}}",能正常生效)。
// 字符串既能被 MP 直接当 cssText,也能被 H5 的 CSSOM 正确解析。
itemStyle() {
return 'width:' + (100 / this.value.rowCount) + '%;';
},
innerWrapStyle() {
return 'display:flex;justify-content:center;align-items:center;width:100%;';
},
innerRowStyle() {
return 'display:flex;align-items:baseline;justify-content:center;width:100%;line-height:1.2;';
},
unitStyle() {
// #ifdef MP
return 'margin-left:4rpx;font-size:' + (this.value.font.unitsize * 2) + 'rpx;font-weight:' + this.value.font.weight + ';color:' + this.value.font.unitcolor + ';';
// #endif
// #ifndef MP
return 'margin-left:' + this.rpxToPx(4) + 'px;font-size:' + this.rpxToPx((Number(this.value.font.unitsize) || 12) * 2) + 'px;font-weight:' + this.value.font.weight + ';color:' + this.value.font.unitcolor + ';';
// #endif
},
descStyle() {
// #ifdef MP
return 'font-size:' + (this.value.font.descsize * 2) + 'rpx;font-weight:' + this.value.font.weight + ';color:' + this.value.font.desccolor + ';';
// #endif
// #ifndef MP
return 'font-size:' + this.rpxToPx((Number(this.value.font.descsize) || 12) * 2) + 'px;font-weight:' + this.value.font.weight + ';color:' + this.value.font.desccolor + ';';
// #endif
},
titleFontSize() {
// #ifdef MP
return this.value.font.titlesize || 22;
// #endif
// #ifndef MP
return this.rpxToPx((Number(this.value.font.titlesize) || 22) * 2);
// #endif
},
componentStyle() {
let style = '';
style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
@@ -83,11 +118,25 @@ export default {
}
},
methods: {
// #ifndef MP
// rpx -> px:H5 行内样式里的 rpx 不生效,统一换算成 px
rpxToPx(rpx) {
let num = Number(rpx) || 0;
if (!num) return 0;
return Math.round((num * (this.windowWidth || 375) / 750) * 100) / 100;
},
// #endif
// 获取小数位数
getvalue(value) {
return value % 1 !== 0 ? 2 : 0;
},
// 是否加粗
isBold(weight) {
return weight === 'bold' || (weight && Number(weight) >= 600);
},
// 页面跳转
redirectTo(item) {
if (!item.wap_url || this.$util.getCurrRoute() != this.$util.MEMBER_PAGE_URL || this.storeToken) {
@@ -257,4 +306,5 @@ export default {
}
}
}
</style>
</style>

View File

@@ -3,7 +3,7 @@
:class="{ left_top: value.bottomPosition == 1, right_top: value.bottomPosition == 2, left_bottom: value.bottomPosition == 3, right_bottom: value.bottomPosition == 4 }"
:style="style">
<block v-for="(item, index) in value.list" :key="index">
<view class="button-box" @tap.stop="$util.diyRedirectTo(item.link)"
<view class="button-box" @tap.stop="onFloatBtnClick(item)"
:style="{ width: value.imageSize + 'px', height: value.imageSize + 'px', fontSize: value.imageSize + 'px' }">
<image v-if="!item.iconType || item.iconType == 'img'" :src="$util.img(item.imageUrl)" mode="aspectFit"
show-menu-by-longpress />
@@ -44,7 +44,44 @@ export default {
componentRefresh: function (nval) { }
},
components: {},
methods: {},
methods: {
/**
* 浮动按钮点击处理:
* 在跳转前给 link 注入 __dyu=FloatBtn 来源标记,
* 让目标页面(尤其是 ai-chat)能识别"来自浮动按钮"从而隐藏底部 tabBar,
* 与"从底部导航栏点击进入时显示并高亮 tabBar"的场景并存。
*
* 为什么用 __dyu 这种 3 字符命名:
* - 双下划线 __ 前缀 + 3 位字母(dy-ui 框架) 是前端约定俗成的"系统内部保留字段"标志
* (如 __proto__, __esModule),业务方配置 link 时几乎不可能使用这种短命名 → 与业务参数零冲突
* - URL 中占用空间极小,不污染业务 query 字符串
* - 未来如需扩展其他组件的入口来源,可继续使用 __dyu 前缀(如 __dyu=Banner / __dyu=Nav)
*
* 实现要点:
* - 浅拷贝 item.link 避免污染原数据(可能被 v-for 复用)
* - 把标记写入 page_params,diyRedirectTo → redirectTo 会自动拼到 URL query,
* 目标页 onLoad(options) 可直接读取
* - 同时在 wap_url 末尾追加/合并 __dyu=FloatBtn 兜底:某些路径不走 page_params 拼接
*/
onFloatBtnClick(item) {
if (!item || !item.link) return;
const link = { ...item.link };
link.page_params = Object.assign({}, link.page_params || {}, {
__dyu: 'FloatBtn'
});
// 兜底:直接把标记拼到 wap_url query,防止 page_params 在某些分支未被透传
if (link.wap_url && typeof link.wap_url === 'string' && link.wap_url.indexOf('http') === -1) {
const sep = link.wap_url.indexOf('?') === -1 ? '?' : '&';
// 避免重复追加(精确匹配 __dyu= 而不是 __dyu,避免误伤可能的 __dyu_other)
if (link.wap_url.indexOf('__dyu=') === -1) {
link.wap_url = link.wap_url + sep + '__dyu=FloatBtn';
}
}
this.$util.diyRedirectTo(link);
},
},
computed: {
style() {
let style = {},

View File

@@ -1,32 +1,84 @@
<template>
<view data-component-name="diy-form" class="diy-from" :style="diyFormStyle">
<!-- Banner -->
<view v-if="value.show_banner && value.form_banner" class="form-banner" :style="bannerStyle">
<image :src="$util.img(value.form_banner)" mode="widthFix" class="banner-img" />
</view>
<!-- 提示语 -->
<view v-if="value.show_tip && value.form_tip" class="form-tip" :style="tipStyle">{{ value.form_tip }}</view>
<!-- 表单组件 -->
<ns-newform
:data="formComponents"
:customAttr="value"
:mode="mergedFormConfig.formLayout || 'horizontal'"
:formConfig="mergedFormConfig"
ref="nsNewform"
></ns-newform>
<!-- 提交按钮(外层 = form-bg + form-padding-x;按钮 = submit-bg + submit-color + input-height + input-radius)。
showSubmit=false 时由父级页面渲染自己的提交按钮并通过 ref 调用本组件的 verify()/getFormData()。 -->
<view v-if="showSubmit" class="form-submit-wrap" :style="submitWrapStyle">
<view @click.stop="submitForm" class="form-submit" :style="submitStyle">{{ submitText }}</view>
<!-- 鸿蒙元服务运行时在首次 _render 时 value 可能还是 undefined,
下面所有 value.xxx 模板表达式都必须用 `value && value.xxx` 守护,
否则会触发 MP 编译器注入的 propsToData 观察者(对应编译产物里
r=function(){var o=this.value.show_banner...this.$mp.data...})
报 "Cannot read properties of undefined (reading 'show_banner')"。 -->
<view v-if="value && value.show_banner && value.form_banner" class="form-banner is-card-overlap" :style="bannerStyle + bannerBleedStyle">
<!-- Banner 图片高度策略(与商家端预览 .preview-banner height:auto 对齐):
默认 mode="widthFix":宽度撑满、高度按图片原始比例自适应,图片完整显示不裁剪;
显式配置 bannerHeight/banner_height 或 bannerCropRatio → 切 aspectFill 居中裁剪;
显式配置 bannerCropBox → 切 widthFix + image 内联 transform translate/缩放(手动裁栏框);
裁剪位置(bannerCropPosition):uni-app image 不支持 object-position,
通过 .banner-img-crop 容器的 transform translateY 控制(top/居中/底部)。 -->
<view class="banner-img-wrap" :class="bannerImgWrapClass" :style="bannerImgWrapStyle">
<view class="banner-img-crop" :class="'crop-' + bannerCropPosition">
<image :src="$util.img(value.form_banner)" :mode="bannerImgMode" class="banner-img" :style="bannerImgStyle" />
</view>
</view>
</view>
<!-- 卡片浮起模式:tip / 提交按钮位置可配(仅 card 风格生效)
- tip_position: outside(默认)= 独立白卡负 margin 压住 banner 底部;inside = 内容卡内
- submit_position: inside(默认)= 提交按钮在内容卡内;outside = 卡片下方独立区域 -->
<template v-if="hasBannerMode">
<!-- tip 独立卡(outside,默认):负 margin 压 banner + 白底 + 圆角 + 阴影,视觉参照商家端预览 .preview-tip -->
<view v-if="value && value.show_tip && value.form_tip && tipPosition === 'outside'" class="form-tip-card" :style="tipCardStyle">{{ value.form_tip }}</view>
<!-- 内容卡:tipPosition !== 'outside'(tip 关闭或 tip 在卡内)时由本卡接管负 margin 浮起 -->
<view class="form-card" :style="cardWrapStyle">
<!-- tip 卡内(inside):无独立卡视觉,用户配置的 bg/border/shadow 仍生效 -->
<view v-if="value && value.show_tip && value.form_tip && tipPosition !== 'outside'" class="form-tip" :style="tipStyle">{{ value.form_tip }}</view>
<!-- 表单组件 -->
<ns-newform
:data="formComponents"
:customAttr="value"
:mode="mergedFormConfig.formLayout || 'vertical'"
:formConfig="mergedFormConfig"
ref="nsNewform"
></ns-newform>
<!-- 提交按钮(inside,默认):在内容卡内 -->
<view v-if="showSubmit && submitPosition !== 'outside'" class="form-submit-wrap" :style="submitWrapStyle">
<view @click.stop="handleSubmit" class="form-submit" :style="submitStyle">{{ submitText }}</view>
</view>
</view>
<!-- 提交按钮独立区(outside):卡片下方,无卡背景 -->
<view v-if="showSubmit && submitPosition === 'outside'" class="form-submit-wrap" :style="submitWrapStyle">
<view @click.stop="handleSubmit" class="form-submit" :style="submitStyle">{{ submitText }}</view>
</view>
</template>
<!-- 无 banner 时仍按旧布局直接渲染 tip / ns-newform / submit,避免影响其他使用方(diy-group / diy-article 等) -->
<template v-else>
<!-- 提示语 -->
<view v-if="value && value.show_tip && value.form_tip" class="form-tip" :style="tipStyle">{{ value && value.form_tip }}</view>
<!-- 表单组件 -->
<ns-newform
:data="formComponents"
:customAttr="value"
:mode="mergedFormConfig.formLayout || 'vertical'"
:formConfig="mergedFormConfig"
ref="nsNewform"
></ns-newform>
<view v-if="showSubmit" class="form-submit-wrap" :style="submitWrapStyle">
<view @click.stop="handleSubmit" class="form-submit" :style="submitStyle">{{ submitText }}</view>
</view>
</template>
</view>
</template>
<script>
// 自定义表单
// 提交接管三档(不依赖 $listeners / 事件机制,跨 H5 / MP / 鸿蒙一致):
// 1) 默认 → showSubmit=true + 不传 onSubmit → 内置按钮 + 内置 defaultSubmit
// 2) 复用按钮、自定义逻辑 → showSubmit=true + :onSubmit="fn" → 内置按钮 + 父级 fn
// 3) 完全自定义 UI → showSubmit=false + :onSubmit="fn" 或 ref.verify()/getFormData() → 父级全控
// 注:type: Function prop 在 uni-app MP 端走 Vue runtime 注入,机制与 ns-navbar.customBack 一致
import DiyMinx from './minx.js'
import NsNewform from '@/components/ns-newform/ns-newform.vue'
// 横幅裁剪比例白名单(与后端 form.js syncFormConfigToCSS 保持一致)
const BANNER_CROP_RATIOS = { '16:9': 16/9, '4:3': 4/3, '1:1': 1, '3:4': 3/4 }
export default {
name: 'diy-from',
components: { NsNewform },
@@ -47,6 +99,20 @@ export default {
showSubmit: {
type: Boolean,
default: true
},
// 父级容器左右内边距(rpx)。卡片模式下让 banner 图片突破这个内边距左右铺满(如 system-form-wrap 的 padding-x)。
// 仅在 hasBannerMode=true 时生效;默认 0(不铺满)。
// 引入原因:formdata.vue 的 .system-form-wrap 默认 padding: 0 50rpx,banner 图片被左右各 50rpx 收缩,
// 后台配 form_banner 后图片应跨越屏幕宽度,而不是被容器内缩。
containerInset: {
type: Number,
default: 0
},
// 父级可选地接管提交:传入函数 prop 时,verify 通过后由它处理 formData;
// 不传时走组件内置 defaultSubmit(兜底)。default 必须是 null,不能写成函数返回 null
onSubmit: {
type: Function,
default: null
}
},
mixins: [DiyMinx],
@@ -70,13 +136,15 @@ export default {
},
computed: {
style() {
// 鸿蒙元服务运行时首次 _render 时 this.value 可能还是 undefined,必须全程加护
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle === 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
var v = this.value || {};
css += 'background-color:' + (v.contentBgColor || '') + ';';
if (v.elementAngle === 'round') {
css += 'border-top-left-radius:' + (v.topElementAroundRadius || 0) * 2 + 'rpx;';
css += 'border-top-right-radius:' + (v.topElementAroundRadius || 0) * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + (v.bottomElementAroundRadius || 0) * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + (v.bottomElementAroundRadius || 0) * 2 + 'rpx;';
}
return css;
},
@@ -90,24 +158,292 @@ export default {
padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx`
});
},
// 提示语样式:padding-x、font-size、color、bg-color、border-bottom(与后端 .form-preview-tip 对齐)
// Banner 图片高度模式(2026-09-03 对齐商家端预览):
// 商家端预览 .preview-banner 是 max-width:100%; height:auto —— 按图片原始比例完整显示。
// 此前 H5 固定 180rpx + aspectFill 居中裁剪,导致横幅高度不一/图片内容被裁缺失。
// 现在:无显式配置 → widthFix 自适应(与后端 height:auto 等价);
// 显式配置 bannerHeight / banner_height → 固定高度 + aspectFill 裁剪(用户主动选择);
// 显式配置 bannerCropRatio → 按比例锁高度,比例+高度都设时高度优先(保持数字 rpx 的语义);
// 显式配置 bannerCropBox → 手动裁栏框(widthFix + image transform,最高优先级,独享遮罩)。
hasBannerHeight() {
const cfg = this.mergedFormConfig || {};
const raw = cfg.bannerHeight !== undefined ? cfg.bannerHeight : cfg.banner_height;
const n = parseInt(raw);
return !isNaN(n) && n > 0;
},
bannerImgMode() {
// 手动裁栏框优先(widthFix + transform);
// 显式选择比例(16:9/4:3/...)时用 aspectFill 填满比例容器;
// 仅配置高度 + 原比例时与商家端预览一致:widthFix 自适应,容器限制最大高度,图片完整显示不裁剪。
if (this.hasManualCrop) return 'widthFix';
return this.bannerCropRatio ? 'aspectFill' : 'widthFix';
},
// Banner 图片包裹层高度:
// - 比例模式 / 手动框:输出固定 height,配合 aspectFill 裁剪;
// - 仅高度 + 原比例:输出 max-height,让图片按原始比例完整显示,高度不超过设定值。
bannerImgWrapStyle() {
if (!this.hasBannerHeight) return '';
let h = parseInt(this.mergedFormConfig.bannerHeight !== undefined ? this.mergedFormConfig.bannerHeight : this.mergedFormConfig.banner_height);
if (h < 40) h = 40;
if (h > 1200) h = 1200;
if (this.bannerCropRatio || this.hasManualCrop) {
return this.$util.objToStyle({ height: h + 'rpx' });
}
return this.$util.objToStyle({ 'max-height': h + 'rpx' });
},
// 裁剪比例:读双键(camel + snake);合法值 16:9/4:3/1:1/3:4;空 = 不启用
bannerCropRatio() {
const cfg = this.mergedFormConfig || {};
const raw = cfg.bannerCropRatio !== undefined ? cfg.bannerCropRatio : cfg.banner_crop_ratio;
return (raw && BANNER_CROP_RATIOS[raw]) ? raw : '';
},
// 裁剪位置:top/center/bottom(默认 center);通过 CSS object-position 控制(uni-app H5/MP 容器配合 transform 实现)
bannerCropPosition() {
const cfg = this.mergedFormConfig || {};
const raw = cfg.bannerCropPosition !== undefined ? cfg.bannerCropPosition : cfg.banner_crop_position;
return (raw === 'top' || raw === 'bottom') ? raw : 'center';
},
// 手动裁栏框:读双键;返回 {x,y,w,h} 0..1 比例或 null
// 三优先级:手动框 > 比例/位置 > 高度/位置(与后端 syncFormConfigToCSS 对齐)
bannerCropBox() {
const cfg = this.mergedFormConfig || {};
const raw = cfg.bannerCropBox !== undefined ? cfg.bannerCropBox : cfg.banner_crop_box;
if (!raw) return null;
try {
const obj = typeof raw === 'string' ? JSON.parse(raw) : raw;
if (obj && typeof obj.x === 'number' && typeof obj.y === 'number' && typeof obj.w === 'number' && typeof obj.h === 'number' && obj.w > 0 && obj.h > 0) {
return obj;
}
} catch (e) { return null; }
return null;
},
// 手动裁栏框激活时:渲染模式切 widthFix(保留全图)+ 内层 img 用 transform 移动/缩放显示裁栏区域
hasManualCrop() { return !!this.bannerCropBox; },
// 手动裁栏框下 image 内联样式:放大到原图尺寸,按 box 坐标 translate 显示
// 用 rpx 转换(MP 原生 rpx / H5 换算 px)
bannerImgStyle() {
if (!this.hasManualCrop) return '';
const b = this.bannerCropBox;
const scaleX = 1 / b.w;
const scaleY = 1 / b.h;
const tx = -b.x * 100;
const ty = -b.y * 100;
return this.$util.objToStyle({
position: 'absolute',
left: 0,
top: 0,
width: (scaleX * 100) + '%',
height: (scaleY * 100) + '%',
maxWidth: 'none',
transform: 'translate(' + tx + '%, ' + ty + '%)',
});
},
// 手动裁栏框下容器需要绝对定位 + 隐藏溢出
bannerImgWrapClass() {
const isAspectFill = this.bannerImgMode === 'aspectFill';
return {
'is-fixed-height': isAspectFill,
'has-crop': isAspectFill,
'has-manual-crop': this.hasManualCrop,
'has-height-limit': this.hasBannerHeight && !isAspectFill && !this.hasManualCrop
};
},
// 表单风格:优先读显式 form_style(classic / card),未设置时回退到隐式判定(看 show_banner && form_banner)
// - classic:经典风格,平铺无 banner 卡片
// - card :卡片浮起风格,banner + 卡片浮起 + 容器内缩
// 注意:必须读 this.formCfg(原始 formConfig 对象)而不是 mergedFormConfig(白名单组装对象,不含 form_style 键)
// 双键兼容:formdata 链路 camel(formStyle,api splitFormConfig 转换);DIY 链路 snake(form_style,design.js 直存)
// 老表单无 form_style 字段时 → undefined → 走隐式判定,与原行为完全一致,零迁移风险
hasBannerMode() {
const v = this.value || {};
const fc = this.formCfg || {};
const style = fc.formStyle !== undefined ? fc.formStyle : fc.form_style;
if (style === 'card') return true;
if (style === 'classic') return false;
return !!(v.show_banner && v.form_banner);
},
// tip 提示语位置(仅 card 风格消费;classic 恒 'outside' 维持原结构)
// outside=独立白卡浮起压 banner(默认);inside=内容卡内(无独立卡视觉)
tipPosition() {
if (!this.hasBannerMode) return 'outside';
return this.mergedFormConfig.tipPosition === 'inside' ? 'inside' : 'outside';
},
// 提交按钮位置(仅 card 风格消费;classic 恒 'outside' 维持原结构)
// inside=内容卡内(默认);outside=卡片下方独立区域
submitPosition() {
if (!this.hasBannerMode) return 'outside';
return this.mergedFormConfig.submitPosition === 'outside' ? 'outside' : 'inside';
},
// 卡片容器内联样式:margin-top(负偏移+下移补偿)+ 左右外缩 + border-radius + box-shadow + background + border。
// clamp 与默认值对齐后端 form.js syncFormConfigToCSS:overlap 0-200(默认48) / radius 0-40(默认24) / sidePad 0-60(默认30);
// margin-top = -overlap + overlap_top(后端 --card-overlap 公式 (-overlap+overlapTop)/2 为 px,rpx 不除 2)
// tip 独立卡(outside + showTip)带队浮起时,本卡只留正常间距(后端预览 draggable margin 10px=20rpx)
// sidePad 语义(2026-09-03 与后端统一):卡片距屏幕左右距离(对齐后端 --card-side-pad,默认 30rpx=15px)。
// formdata 链路(containerInset>0)容器已有 padding,卡片负 margin 破壳后再缩 sidePad(与 banner bleed 同思路);
// DIY 链路(无 containerInset)直接 margin = sidePad。
// 卡内内容缩进由 ns-newform .form-wrap 的 formPaddingX 承担(与后端 .draggable-wrap padding: form-padding-x 同构)。
cardWrapStyle() {
const cfg = this.mergedFormConfig || {};
const parentInset = this._num(this.containerInset, 0);
let sidePad = this._num(cfg.cardSidePad, 30);
if (sidePad < 0) sidePad = 0;
if (sidePad > 60) sidePad = 60;
const sideMargin = parentInset > 0 ? (sidePad - parentInset) : sidePad;
// overlap:负值向上压住 banner 底部;overlap_top 为下移补偿(可正可负,叠加生效)
let overlap = Math.abs(this._num(cfg.cardOverlap, 48));
if (overlap > 200) overlap = 200;
const overlapTop = this._num(cfg.cardOverlapTop, 0);
// banner 实际渲染时才用负 margin 压住它;banner 被隐藏(如 hideInnerBanner / 配置缺失)时
// 负 margin 会把卡片(含 tip)整体推出屏幕顶部,必须收回 0
const bannerVisible = !!(this.value && this.value.show_banner && this.value.form_banner);
// tip 独立卡存在时由 tip 卡带队压 banner,内容卡只留正常间距(20rpx ≈ 后端预览 10px)
const tipLeads = this.tipPosition === 'outside' && !!(this.value && this.value.show_tip && this.value.form_tip);
// 卡片圆角:缺省 24rpx(浮起卡片的圆角,比外层卡片的 16rpx 更明显,突出浮起感)
let radius = this._num(cfg.cardRadius, 24);
if (radius < 0) radius = 0;
if (radius > 40) radius = 40;
// 阴影:缺省中等阴影(与设计方案一致)—— 由本容器承担浮起感
const shadow = cfg.cardShadow || '0 8rpx 24rpx rgba(0,0,0,0.08)';
// 卡片底色:纯白,与设计方案一致;可由后台 formConfig.cardBgColor 覆盖
const bgColor = cfg.cardBgColor || '#ffffff';
// 边框:宽度 rpx(0-20),留空/0 = 无边框
let borderWidth = this._num(cfg.cardBorderWidth, 0);
if (borderWidth < 0) borderWidth = 0;
if (borderWidth > 20) borderWidth = 20;
const style = {
marginTop: (bannerVisible ? (tipLeads ? 20 : (-overlap + overlapTop)) : 0) + 'rpx',
marginLeft: sideMargin + 'rpx',
marginRight: sideMargin + 'rpx',
borderRadius: radius + 'rpx',
boxShadow: shadow,
backgroundColor: bgColor
};
if (borderWidth > 0) {
style['border'] = borderWidth + 'rpx ' + (cfg.cardBorderStyle || 'solid') + ' ' + (cfg.cardBorderColor || 'transparent');
}
return this.$util.objToStyle(style);
},
// tip 独立卡样式(card + outside):负 margin 压 banner + 左右外缩 + 白底 + 圆角 + 阴影 + 细边框。
// 视觉参照后端预览 .form-style-card .preview-tip(margin: var(--card-overlap) var(--card-side-pad) 0;白底 12px 圆角 柔和阴影 左对齐)
// 用户配置的 tip 四态属性(bg/border/radius/shadow/padding/align)在此全部生效,仅默认值不同(独立卡默认白底卡视觉)
// sidePad 语义与 cardWrapStyle 一致:卡片距屏幕左右距离(默认 30rpx;formdata 链路破壳 sidePad-parentInset)
tipCardStyle() {
const cfg = this.mergedFormConfig || {};
const bannerVisible = !!(this.value && this.value.show_banner && this.value.form_banner);
let overlap = Math.abs(this._num(cfg.cardOverlap, 48));
if (overlap > 200) overlap = 200;
const overlapTop = this._num(cfg.cardOverlapTop, 0);
const parentInset = this._num(this.containerInset, 0);
let sidePad = this._num(cfg.cardSidePad, 30);
if (sidePad < 0) sidePad = 0;
if (sidePad > 60) sidePad = 60;
const sideMargin = parentInset > 0 ? (sidePad - parentInset) : sidePad;
const padT = this._num(cfg.tipPaddingTop, 32);
const padR = this._num(cfg.tipPaddingRight, 32);
const padB = this._num(cfg.tipPaddingBottom, 32);
const padL = this._num(cfg.tipPaddingLeft, 32);
const style = {
marginTop: (bannerVisible ? (-overlap + overlapTop) : 0) + 'rpx',
marginLeft: sideMargin + 'rpx',
marginRight: sideMargin + 'rpx',
padding: `${padT}rpx ${padR}rpx ${padB}rpx ${padL}rpx`,
'font-size': `${this._num(cfg.tipFontSize, 32)}rpx`,
'color': cfg.tipColor || '#1f2937',
'background-color': cfg.tipBgColor || '#ffffff',
'border-radius': `${this._num(cfg.tipRadius, 24)}rpx`,
'box-shadow': cfg.tipShadow || '0 8rpx 24rpx rgba(0,0,0,0.08)',
'text-align': cfg.tipAlign || 'left'
};
// 边框:独立卡默认细边框(2rpx ≈ 后端预览 1px);配置 0 = 无边框
const bw = this._num(cfg.tipBorderWidth, 2);
if (bw > 0) {
style['border'] = `${bw}rpx ${cfg.tipBorderStyle || 'solid'} ${cfg.tipBorderColor || 'rgba(0,0,0,0.06)'}`;
}
return this.$util.objToStyle(style);
},
// Banner 容器破壳样式:仅在卡片模式下 + 父级传了 containerInset>0 时启用,让 banner 突破父容器 padding 跨越屏幕宽度。
// 计算逻辑:负 margin-left/right + 等量扩宽 width,使 banner 元素左/右边界对齐到屏幕边缘。
// 父级未传 containerInset 或传 0 时返回空样式,banner 保持原尺寸(零外溢)。
bannerBleedStyle() {
const inset = this._num(this.containerInset, 0);
if (!this.hasBannerMode || inset <= 0) return '';
const expand = inset * 2;
return this.$util.objToStyle({
marginLeft: -inset + 'rpx',
marginRight: -inset + 'rpx',
width: 'calc(100% + ' + expand + 'rpx)'
});
},
// 提示语样式(classic 平铺 / card+inside 卡内共用):与后端 edit.html 内联 .preview-tip 对齐
// - 四边内边距:未配置时经典态 上/下=rowPaddingY(4) 左右=tipPaddingX(14);卡片态统一 32rpx
// - 边框:classic 用 border-bottom(宽度默认 0;旧数据仅配 color → 2rpx 底边);
// card 用全边框(配置宽度才输出)
// - 圆角 / 阴影(rpx 字符串) / 对齐(card 态默认左对齐,经典态居中)
// - 背景色:''=未配置 → 透明(独立卡白底兜底已挪到 tipCardStyle,卡内 tip 无独立卡视觉)
tipStyle() {
const cfg = this.mergedFormConfig || {};
const card = this.hasBannerMode;
const padT = this._num(cfg.tipPaddingTop, card ? 32 : this._num(cfg.rowPaddingY, 4));
const padR = this._num(cfg.tipPaddingRight, card ? 32 : this._num(cfg.tipPaddingX, 14));
const padB = this._num(cfg.tipPaddingBottom, card ? 32 : this._num(cfg.rowPaddingY, 4));
const padL = this._num(cfg.tipPaddingLeft, card ? 32 : this._num(cfg.tipPaddingX, 14));
const style = {
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.tipPaddingX, 14)}rpx`,
padding: `${padT}rpx ${padR}rpx ${padB}rpx ${padL}rpx`,
'font-size': `${this._num(cfg.tipFontSize, 32)}rpx`,
'color': cfg.tipColor || '#000000',
'background-color': cfg.tipBgColor || 'transparent'
'color': cfg.tipColor || (card ? '#1f2937' : '#000000'),
'background-color': cfg.tipBgColor || 'transparent',
'text-align': cfg.tipAlign || (card ? 'left' : 'center')
};
// 仅在配置了 tipBorderColor 时添加底线,避免 transparent 占位仍增加 2rpx 高度
if (cfg.tipBorderColor) {
// 边框:配置了宽度(>0)输出;未配宽度但配了颜色 → 旧数据兼容,2rpx 底边(仅经典态)
const bw = this._num(cfg.tipBorderWidth, 0);
if (bw > 0) {
const bs = cfg.tipBorderStyle || 'solid';
const bc = cfg.tipBorderColor || 'rgba(0,0,0,0.06)';
if (card) {
style['border'] = `${bw}rpx ${bs} ${bc}`;
} else {
style['border-bottom'] = `${bw}rpx ${bs} ${bc}`;
}
} else if (!card && cfg.tipBorderColor) {
style['border-bottom'] = `2rpx solid ${cfg.tipBorderColor}`;
}
// 圆角(rpx)
if (cfg.tipRadius !== undefined && cfg.tipRadius !== null && cfg.tipRadius !== '') {
style['border-radius'] = `${this._num(cfg.tipRadius, 0)}rpx`;
}
// 阴影:后端存 rpx 单位字符串(如 '0 4rpx 12rpx rgba(...)'),uniapp H5/MP 运行时支持 rpx
if (cfg.tipShadow) {
style['box-shadow'] = cfg.tipShadow;
}
return this.$util.objToStyle(style);
},
// 提交按钮外层:与后端 .form-preview-submit 对齐(margin-top + padding: row-padding-y form-padding-x;background: form-bg-color)
// card + inside(默认)时按钮已在内容卡内:padding 收窄为卡内边距(≈后端预览 14px 12px 20px),不设独立背景(继承卡白底)
submitWrapStyle() {
const cfg = this.mergedFormConfig || {};
if (this.hasBannerMode && this.submitPosition !== 'outside') {
return this.$util.objToStyle({
marginTop: `${this._num(cfg.submitMarginTop, 0)}rpx`,
padding: `24rpx 24rpx 40rpx`
});
}
if (this.hasBannerMode) {
// card + outside:卡片下方独立区域 —— 与后端 .preview-submit-wrap(card 模式)同构:
// 左右破壳对齐卡片缩进(sidePad - parentInset),水平内缩 formPaddingX,
// 上下 padding 36rpx/48rpx(后端 18px/24px),背景白底(后端 .preview-submit-wrap 亦为白底)
const parentInset = this._num(this.containerInset, 0);
let sidePad = this._num(cfg.cardSidePad, 30);
if (sidePad < 0) sidePad = 0;
if (sidePad > 60) sidePad = 60;
const sideMargin = parentInset > 0 ? (sidePad - parentInset) : 0;
return this.$util.objToStyle({
marginTop: `${this._num(cfg.submitMarginTop, 0)}rpx`,
marginLeft: sideMargin + 'rpx',
marginRight: sideMargin + 'rpx',
padding: `36rpx ${this._num(cfg.formPaddingX, 14)}rpx 48rpx`,
'background-color': cfg.formBgColor || '#ffffff'
});
}
return this.$util.objToStyle({
marginTop: `${this._num(cfg.submitMarginTop, 0)}rpx`,
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.formPaddingX, 14)}rpx`,
@@ -131,7 +467,7 @@ export default {
width: widthPct + '%',
padding: `${submitPaddingY}rpx 0`,
color: cfg.submitColor || '#ffffff',
'background-color': cfg.submitBgColor || '#ff4544',
'background-color': cfg.submitBgColor || '#3b82f6',
'border-radius': `${this._num(cfg.inputRadius, 10)}rpx`,
'font-size': `${this._num(cfg.labelFontSize, 28)}rpx`
});
@@ -141,6 +477,10 @@ export default {
submitText() {
return this.mergedFormConfig.submitText || '提交';
},
// 父级是否接管提交(集中判断,便于以后替换机制;避免多个调用点各自 typeof 校验)
hasCustomSubmit() {
return typeof this.onSubmit === 'function';
},
// 后端把表单样式配置统一存放在 data.formConfig 子对象中(与后端 design.js getDefaultFormData().formConfig 字段名一致)。
// 这里做一次归一化:优先取 formConfig;如果历史数据是扁平结构(直接挂在 value 上),也做兼容。
formCfg() {
@@ -162,12 +502,33 @@ export default {
if (v1 !== undefined && v1 !== null && v1 !== '') return v1;
return fc[snake];
};
// 多别名取值:后台不同版本 / 不同序列化路径对同一配置项可能用不同键名,
// 这里按优先级取第一个有效值,避免白名单裁剪时把后台配置丢掉(丢了下层永远读不到)
const pickAny = function(keys) {
for (var i = 0; i < keys.length; i++) {
var kv = fc[keys[i]];
if (kv !== undefined && kv !== null && kv !== '') return kv;
}
return undefined;
};
// 通用全局配置(与后端 design.js getDefaultFormData().formConfig 字段名一致)
const base = {
formPaddingX: pick('formPaddingX', 'form_padding_x'),
// Banner 高度(rpx)。后台可配,默认 180rpx ≈ 页面 1/8 高度(适配主流手机屏高)
// 配合 mode="aspectFill" 居中裁剪,保证横幅只占页面八分之一左右
bannerHeight: pick('bannerHeight', 'banner_height'),
bannerPaddingX: pick('bannerPaddingX', 'banner_padding_x'),
// 横幅裁剪位置(top/center/bottom)+ 比例(16:9/4:3/1:1/3:4)+ 手动裁栏框 JSON(2026-09-04 方案 C 抽屉配套)
bannerCropPosition: pick('bannerCropPosition', 'banner_crop_position'),
bannerCropRatio: pick('bannerCropRatio', 'banner_crop_ratio'),
bannerCropBox: pick('bannerCropBox', 'banner_crop_box'),
tipPaddingX: pick('tipPaddingX', 'tip_padding_x'),
rowPaddingY: pick('rowPaddingY', 'row_padding_y'),
// 行内上下边距:兼容 row_padding_y / rowPaddingY / row_padding / rowPadding 等键名
rowPaddingY: (function() {
var v = pick('rowPaddingY', 'row_padding_y');
if (v !== undefined && v !== null && v !== '') return v;
return pickAny(['rowPadding', 'row_padding', 'rowPaddingVertical', 'row_padding_vertical', 'row_padding_top', 'rowPaddingTop']);
})(),
rowMinHeight: pick('rowMinHeight', 'row_min_height'),
labelGap: pick('labelGap', 'label_gap'),
formBgColor: pick('formBgColor', 'form_bg_color'),
@@ -180,8 +541,24 @@ export default {
labelFixedWidth: pick('labelFixedWidth', 'label_fixed_width'),
labelFontSize: pick('labelFontSize', 'label_font_size'),
labelColor: pick('labelColor', 'label_color'),
labelFontWeight: pick('labelFontWeight', 'label_font_weight'),
labelAutoMaxWidth: pick('labelAutoMaxWidth', 'label_auto_max_width'),
requiredColor: pick('requiredColor', 'required_color'),
// 必填星号位置:before=标签前(默认)/ after=标签后(终端无关,存 base 层)
requiredPosition: pick('requiredPosition', 'required_position'),
checkedColor: pick('checkedColor', 'checked_color'),
// 占位符:遗漏会被 ns-newform SCSS 默认值回退覆盖
placeholderColor: pick('placeholderColor', 'placeholder_color'),
placeholderFontSize: pick('placeholderFontSize', 'placeholder_font_size'),
// textarea 显示行数 / 行高(透传给 ns-newform,与 ns-form 保持一致)
// 不传时 ns-newform 走自己的默认 4 行 / 44rpx
textareaRows: pick('textareaRows', 'textarea_rows'),
textareaLineHeight: pick('textareaLineHeight', 'textarea_line_height'),
// 输入框视觉增强(与 ns-newform 对齐)
inputBorderColor: pick('inputBorderColor', 'input_border_color'),
inputBgColor: pick('inputBgColor', 'input_bg_color'),
inputFocusBorderColor: pick('inputFocusBorderColor', 'input_focus_border_color'),
inputFocusBgColor: pick('inputFocusBgColor', 'input_focus_bg_color'),
submitText: pick('submitText', 'submit_text'),
submitColor: pick('submitColor', 'submit_color'),
submitBgColor: pick('submitBgColor', 'submit_bg_color'),
@@ -189,21 +566,71 @@ export default {
submitWidthPercent: pick('submitWidthPercent', 'submit_width_percent'),
submitSize: pick('submitSize', 'submit_size'),
submitMarginTop: pick('submitMarginTop', 'submit_margin_top'),
// 提示语
tipFontSize: pick('tipFontSize', 'tip_font_size'),
tipColor: pick('tipColor', 'tip_color'),
tipBgColor: pick('tipBgColor', 'tip_bg_color'),
tipBorderColor: pick('tipBorderColor', 'tip_border_color')
};
// 提示语(与后端 form.js syncFormConfigToCSS 的 --tip-* 变量一一对应)
tipFontSize: pick('tipFontSize', 'tip_font_size'),
tipColor: pick('tipColor', 'tip_color'),
tipBgColor: pick('tipBgColor', 'tip_bg_color'),
tipBorderColor: pick('tipBorderColor', 'tip_border_color'),
// 边框:宽度(rpx)/线型;未配置宽度时保留旧逻辑(仅 color 配置 → 底边 2rpx)
tipBorderWidth: pick('tipBorderWidth', 'tip_border_width'),
tipBorderStyle: pick('tipBorderStyle', 'tip_border_style'),
// 独立样式:圆角 / 四边内边距 / 阴影 / 对齐('' 与 null 均走 delete → 用各自态的兜底默认)
tipRadius: pick('tipRadius', 'tip_radius'),
tipPaddingTop: pick('tipPaddingTop', 'tip_padding_top'),
tipPaddingRight: pick('tipPaddingRight', 'tip_padding_right'),
tipPaddingBottom: pick('tipPaddingBottom', 'tip_padding_bottom'),
tipPaddingLeft: pick('tipPaddingLeft', 'tip_padding_left'),
tipShadow: pick('tipShadow', 'tip_shadow'),
tipAlign: pick('tipAlign', 'tip_align'),
// 卡片浮起(仅 show_banner && form_banner 启用)
cardOverlap: pick('cardOverlap', 'card_overlap'),
// 额外下移补偿(rpx,可正可负,与 overlap 叠加:margin-top = -overlap + overlap_top)
cardOverlapTop: pick('cardOverlapTop', 'card_overlap_top'),
cardRadius: pick('cardRadius', 'card_radius'),
cardShadow: pick('cardShadow', 'card_shadow'),
cardSidePad: pick('cardSidePad', 'card_side_pad'),
cardBgColor: pick('cardBgColor', 'card_bg_color'),
// 卡片边框(宽度 rpx / CSS 线型 / 颜色;留空 = 无边框)
cardBorderWidth: pick('cardBorderWidth', 'card_border_width'),
cardBorderStyle: pick('cardBorderStyle', 'card_border_style'),
cardBorderColor: pick('cardBorderColor', 'card_border_color'),
// 位置控制(仅 card 风格生效;outside/inside 见 tipPosition/submitPosition computed)
tipPosition: pick('tipPosition', 'tip_position'),
submitPosition: pick('submitPosition', 'submit_position')
};
// 移除 undefined / 空字符串(保留 0/false)
Object.keys(base).forEach(function(k) {
if (base[k] === undefined || base[k] === null || base[k] === '') {
delete base[k];
}
});
// 前端视觉默认:仅作兜底(后端未配置的字段才生效)。
// 注意合并顺序:base 在后 —— 后台 formConfig 显式配置的值(如 submit_bg_color / input_radius)
// 必须覆盖前端默认,否则商家端样式配置完全不生效(曾因此导致提交按钮恒为蓝色)。
const styleDefaults = {
formLayout: 'vertical',
formPaddingX: 28,
rowPaddingY: 24,
labelGap: 20,
labelFontSize: 32,
labelFontWeight: 700,
labelColor: '#1f2937',
inputHeight: 84,
inputRadius: 16,
inputBgColor: '#ffffff',
inputBorderColor: '#e5e7eb',
inputFocusBorderColor: '#3b82f6',
inputFocusBgColor: '#ffffff',
placeholderColor: '#9ca3af',
placeholderFontSize: 28,
checkedColor: '#3b82f6',
showRowDivider: false,
submitColor: '#ffffff',
submitBgColor: '#3b82f6'
};
// 平台差异化配置(terminal 块在 formConfig 子对象内)
// 优先级:v.formConfig.terminal > v.form_config_terminal > v.terminal > v.form_config_platform
const result = Object.assign({}, base);
const result = Object.assign({}, styleDefaults, base);
const termBlock = (v.formConfig && v.formConfig.terminal) || v.form_config_terminal || v.terminal || v.form_config_platform;
if (termBlock && typeof termBlock === 'object') {
Object.keys(termBlock).forEach(function(platform) {
@@ -269,24 +696,26 @@ export default {
return true;
},
// 提交表单
submitForm() {
var self = this;
// 统一提交入口:内置按钮 / 父级 ref 调用都走这里
// 不依赖 $listeners / 事件机制(MP 端 $listeners 为 undefined),跨端一致
handleSubmit() {
// 校验(同时返回 formData 数组;校验失败时 ns-newform 内部 toast 提示)
if (!this.verify()) {
return;
}
// 若父级监听了 @submit,则把提交控制权交给父级(用于父级有自定义提交字段/反馈逻辑的页面,如 formdata.vue 传 uniacid)
if (this.$listeners && this.$listeners.submit) {
this.$emit('submit', this.getFormData());
return;
const formData = this.getFormData();
// 父级显式接管:function prop 在 H5 / MP / 鸿蒙一致可用
if (this.hasCustomSubmit) {
return this.onSubmit(formData);
}
// 兜底:内置 sendRequest 流程
this.defaultSubmit(formData);
},
// 获得保单数据
const submitFormData = this.getFormData();
// 提交到后端
// 公共兜底实现:默认的 /form/api/form/create 流程;
// 父级若需"先自定义、失败回退",可经 ref.defaultSubmit(formData) 调用
defaultSubmit(submitFormData) {
var self = this;
this.$api.sendRequest({
url: '/form/api/form/create',
data: {
@@ -298,7 +727,7 @@ export default {
success: function(res) {
if (res.code === 0) {
uni.showToast({
title: '提交成功',
title: self.$lang('submitSuccess'),
icon: 'success'
});
// 重置表单
@@ -307,7 +736,7 @@ export default {
}
} else {
uni.showToast({
title: res.message || '提交失败',
title: res.message || self.$lang('submitFail'),
icon: 'none'
});
}
@@ -330,12 +759,139 @@ export default {
// 默认左右无边距(与后端 --banner-padding-x 对齐;由内联 bannerStyle 覆盖)
margin: 0;
// banner 图片作为卡片上方的"底图":建立层叠上下文,让 .form-card 通过 z-index 浮在其上。
// 仅在卡片浮起模式(.is-card-overlap)启用,不影响其它使用方(diy-group 等)的旧布局。
&.is-card-overlap {
position: relative;
z-index: 1;
}
// 横幅图片容器:默认高度由 image widthFix 按图片比例自适应(与商家端预览 height:auto 对齐);
// .is-fixed-height(显式配置 bannerHeight)时高度由 bannerImgWrapStyle 内联写入,
// 配合 mode="aspectFill" 居中裁剪填充。
.banner-img-wrap {
width: 100%;
overflow: hidden;
position: relative;
// 默认作为 flex 容器,支持 widthFix + max-height 模式下的顶部/居中/底部对齐
.banner-img-crop {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
&.crop-center {
justify-content: center;
}
&.crop-bottom {
justify-content: flex-end;
}
}
&.is-fixed-height {
.banner-img {
height: 100%;
}
}
// 启用 aspectFill 裁剪时,包装一层 .banner-img-crop 承接裁剪位置。
// 重要:uni-app image 在 H5 端固定转译为 <div style="background-image:url; background-size:cover; background-position:center center;"></div>,
// 内层 div 的 background-position 是运行时生成的 inline 样式,普通 CSS 覆盖不了,必须 !important;
// (不能用 .banner-img 的 translateY 实现位置:image 高度被钉死为容器 100% 后 transform 一去一回相互抵消,是零位移)
// - crop-top → background-position: center top(显示图片顶部区域)
// - crop-center → 默认 center center(不覆盖)
// - crop-bottom → background-position: center bottom(显示图片底部区域)
&.has-crop {
.banner-img-crop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner-img {
// 撑满 wrap,让内层 background-image div 拿到确定高度(uni-image H5 端转译依赖)
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
// uni-app H5 编译器会给样式追加 [data-v-xxx](即使未写 scoped),
// 而 uni-image 运行时 JS 生成的内层 div 没有该属性 → 必须 ::v-deep 把属性选择器挪到 .banner-img 上
.banner-img-crop.crop-top .banner-img ::v-deep div {
background-position: center top !important;
}
.banner-img-crop.crop-bottom .banner-img ::v-deep div {
background-position: center bottom !important;
}
}
// 启用手动裁栏框(bannerCropBox 非空)时:image 用 transform 显示裁栏部分,原图按 box 缩放 + 平移
&.has-manual-crop {
.banner-img-crop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner-img {
// 手动框下由 bannerImgStyle 内联 width/height/transform 驱动,不固定 100%
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
}
.banner-img {
width: 100%;
display: block;
}
}
// 卡片容器:浮在 banner 图片上方(参考设计左图)。
// 仅在 hasBannerMode=true 时渲染(见 template v-if);
// 阴影 + margin-top(负偏移)+ 圆角 + 白底 全部由 cardWrapStyle 内联写入(读取后台 formConfig.card*)。
// 关键:卡片必须自带白底并 z-index 高于 banner,才能真正"盖住"banner 图片底部形成浮起;
// 父级容器(formdata.vue 的 .system-form-wrap)虽也是白底,但它是 banner 的祖先、背景会被 banner 覆盖,
// 因此本容器的白底不可省略(与 .system-form-wrap 同色,视觉上从卡片向下自然延续到页面底部)。
.form-card {
// 定位上下文 + 高于 banner 的层级:让卡片盖住 banner 底部(banner z-index:1)
position: relative;
z-index: 2;
// 兜底白底 / 圆角 / 阴影:与后端未配置时内联写入的默认值一致;后台配置时由内联 cardWrapStyle 覆盖
background-color: #ffffff;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
// 关键:裁剪卡内子元素(ns-newform 白底 / submit 区)到圆角内。
// tip 关闭时本卡带队负 margin 压 banner,若无 overflow:hidden,
// 卡内第一个子元素的方形背景会盖住卡片上圆角(banner 图片在圆角外的部分被遮)。
// 商家端预览 .draggable-wrap 同样有 overflow:hidden(form.css 两处同步)。
overflow: hidden;
// 兜底 padding-bottom:让卡片与后面内容(如推荐码、其它 diy 组件)有间距
padding-bottom: 24rpx;
}
// tip 独立卡(card + tip_position=outside):浮在 banner 上方的独立白卡。
// margin/padding/白底/圆角/阴影/边框 全部由 tipCardStyle 内联写入;
// 必须自带 z-index 高于 banner(z-index:1)才能真正"盖住"banner 底部形成浮起。
.form-tip-card {
position: relative;
z-index: 2;
box-sizing: border-box;
line-height: 1.5;
word-break: break-all;
}
.form-tip {
// 提示语:上下内边距 / 左右内边距 / 字号 / 颜色 / 背景 全部由 tipStyle 内联写入
padding: 0;

View File

@@ -64,6 +64,13 @@
<diy-rich-text :value="item"></diy-rich-text>
</template>
<!-- #ifdef H5 -->
<template v-if="['Webview', 'WebView'].includes(item.componentName)">
<!-- 网页容器 -->
<diy-webview :value="item"></diy-webview>
</template>
<!-- #endif -->
<template v-if="item.componentName == 'HorzLine'">
<!-- 辅助线 -->
<diy-horz-line :value="item"></diy-horz-line>
@@ -159,7 +166,10 @@
<!-- 商品推荐 -->
<diy-goods-recommend :value="item"></diy-goods-recommend>
</template>
<template v-if="item.componentName == 'DiyRecommendCode'">
<!-- 自定义推荐码组件 -->
<diy-recommend-code :value="item"></diy-recommend-code>
</template>
<template v-if="item.componentName == 'GoodsBrand'">
<!-- 商品品牌 -->
<diy-goods-brand :value="item"></diy-goods-brand>
@@ -306,9 +316,11 @@ export default {
}
},
created() {
console.log('[DIY-GROUP][created] hasDiyData=', !!this.diyData, 'valueLen=', this.diyData && this.diyData.value && this.diyData.value.length);
this.processData();
},
mounted() {
console.log('[DIY-GROUP][mounted] hasDiyData=', !!this.diyData, 'valueLen=', this.diyData && this.diyData.value && this.diyData.value.length);
if (this.diyData && this.diyData.value) {
this._notifyLoaded();
}
@@ -349,11 +361,13 @@ export default {
},
methods: {
_notifyLoaded() {
if (this._loadedTimer) clearTimeout(this._loadedTimer);
this._loadedTimer = setTimeout(() => {
this.$emit('loaded');
}, 300);
},
console.log('[DIY-GROUP][_notifyLoaded] enter, will emit loaded in 300ms');
if (this._loadedTimer) clearTimeout(this._loadedTimer);
this._loadedTimer = setTimeout(() => {
console.log('[DIY-GROUP][_notifyLoaded] emit loaded');
this.$emit('loaded');
}, 300);
},
processData() {
if (!this.diyGlobalData || !this.diyGlobalData.value) {
this.processedData = [];
@@ -370,14 +384,41 @@ export default {
: index + 1;
if (newItem.componentName !== 'Search' || newItem.positionWay !== 'fixed') {
newItem.pageStyle = `background-color:${newItem.pageBgColor};`;
// PR-DIY-SEARCH-MARGIN-COLOR (2026-09-17): 搜索组件的上下左右边距区域颜色
// 与搜索框背景色(componentBgColor, 后台自定义)保持一致, 使边距和搜索框融为一体;
// 兼容旧数据: 未配置 componentBgColor 时回退 pageBgColor。其余组件仍用 pageBgColor。
const wrapBgColor = (newItem.componentName === 'Search' && newItem.componentBgColor)
? newItem.componentBgColor
: newItem.pageBgColor;
newItem.pageStyle = `background-color:${wrapBgColor};`;
if (newItem.margin) {
newItem.pageStyle += `padding-top:${newItem.margin.top * 2}rpx;`;
newItem.pageStyle += `padding-bottom:${newItem.margin.bottom * 2}rpx;`;
newItem.pageStyle += `padding-right:${newItem.margin.both * 2}rpx;`;
newItem.pageStyle += `padding-left:${newItem.margin.both * 2}rpx;`;
}
// 边距归一化: 兼容后台两种数据结构(否则边距不生效)
// ① 标准对象形态 margin = { top, bottom, both } —— 大多数组件
// ② 扁平字段形态 marginTop / marginBottom / marginBoth
// —— 如"滑动图片"(ImageNav), 其 margin 是空数组 [], 左右边距存在 marginBoth 里
// both / marginBoth 表示"左右边距"; 数值 → rpx 统一 × 2 (与其它组件一致)
const rawMargin = newItem.margin;
const objMargin = (rawMargin && typeof rawMargin === 'object' && !Array.isArray(rawMargin)) ? rawMargin : null;
const toMarginNum = (v) => { const n = Number(v); return isNaN(n) ? 0 : n; };
const pickMargin = (objKey, flatKey) => {
if (objMargin && objMargin[objKey] !== undefined && objMargin[objKey] !== null && objMargin[objKey] !== '') {
return toMarginNum(objMargin[objKey]);
}
return toMarginNum(newItem[flatKey]);
};
const marginTopNum = pickMargin('top', 'marginTop');
const marginBottomNum = pickMargin('bottom', 'marginBottom');
const marginBothNum = pickMargin('both', 'marginBoth');
// 左右: 若有独立的 left/right 字段则优先, 否则用 both(左右一致)
const marginLeftNum = (objMargin && objMargin.left !== undefined) ? toMarginNum(objMargin.left)
: (newItem.marginLeft !== undefined ? toMarginNum(newItem.marginLeft) : marginBothNum);
const marginRightNum = (objMargin && objMargin.right !== undefined) ? toMarginNum(objMargin.right)
: (newItem.marginRight !== undefined ? toMarginNum(newItem.marginRight) : marginBothNum);
newItem.pageStyle += `padding-top:${marginTopNum * 2}rpx;`;
newItem.pageStyle += `padding-bottom:${marginBottomNum * 2}rpx;`;
newItem.pageStyle += `padding-left:${marginLeftNum * 2}rpx;`;
newItem.pageStyle += `padding-right:${marginRightNum * 2}rpx;`;
}
return newItem;

View File

@@ -1,38 +1,52 @@
<template>
<view :style="componentStyle" data-component-name="diy-image-nav">
<scroll-view :class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'">
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" :class="['image-nav-item', value.mode]"
style="margin-right: 28rpx;">
<!-- 图片部分 -->
<view v-if="value.mode != 'text'" class="image-img" :style="{
'font-size': (value.imageSize * 2 + 'rpx') + ';',
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}">
<image v-if="item.link.wap_url" :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
show-menu-by-longpress @tap.stop="redirectTo(item.link)"></image>
<image v-else :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
show-menu-by-longpress @tap.stop="previewImg(item.imageUrl)"></image>
</view>
<!-- PR-FRONTEND-DIY-SCROLLBAR (2026-09-18): 水平滚动条显隐三态(后台配置)
slide=滑动时显示(默认) / always=始终显示 / never=永不显示
注意: 微信小程序端原生 show-scrollbar 属性被忽略(仅在 App 端生效),
无法保证"始终显示/滑动时显示", 因此小程序端改用【自定义滚动条】(.img-nav-scrollbar),
H5 端用 CSS 伪元素(见下方 #ifdef H5 样式) —— 两端视觉/逻辑保持一致。
fix (2026-09-22): 小程序端"始终显示"失效 —— 见 measureScrollbar() 注释(内容宽度测错)。 -->
<view class="image-nav-wrap">
<scroll-view :class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle, scrollBarClass]"
:style="imageSpacingStyle"
:scroll-x="value.showStyle == 'singleSlide'"
:show-scrollbar="showScrollbarAttr"
:enhanced="enhancedScrollbar"
@scroll="onSlideScroll">
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" :class="['image-nav-item', value.mode]"
:style="imageItemStyle">
<!-- 图片部分 -->
<!-- PR-FRONTEND-DIY-IMAGE-NAV-IMG-SIZE (2026-09-22):
图片按后台上传/配置的尺寸渲染,避免 uni <image> 取不到尺寸时
回退到浏览器默认 320x240 而被"撑到最大";mode=aspectFit 保证不拉伸变形 -->
<view v-if="value.mode != 'text'" class="image-img" :style="imageBoxStyle(item)">
<image v-if="item.link.wap_url" class="image-content" :style="imageInnerStyle(item)"
mode="aspectFit"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
show-menu-by-longpress @tap.stop="redirectTo(item.link)"></image>
<image v-else class="image-content" :style="imageInnerStyle(item)" mode="aspectFit"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
show-menu-by-longpress @tap.stop="previewImg(item.imageUrl)"></image>
</view>
<!-- 文字部分 -->
<text class="image-text" :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}">{{ item.title }}</text>
<!-- 文字部分 -->
<text class="image-text" :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}">{{ item.title }}</text>
</view>
</view>
</scroll-view>
<!-- #ifdef MP -->
<!-- 小程序端自定义水平滚动条: 原生 show-scrollbar 被忽略, 这里自绘以对齐后台/ H5 -->
<view v-if="showCustomScrollbar" class="img-nav-scrollbar">
<view class="img-nav-scrollbar-thumb" :style="scrollbarThumbStyle"></view>
</view>
</scroll-view>
<!-- #endif -->
</view>
<ns-login ref="login"></ns-login>
</view>
</template>
@@ -60,7 +74,12 @@ export default {
slideDidDrag: false, // 5px 阈值后置 true,用于判断 mouseup 后是否拦截 click
slideStartX: 0,
slideStartScrollLeft: 0,
_suppressNextClick: false // 拖拽结束后拦截一次 click,防止误触发跳转
_suppressNextClick: false, // 拖拽结束后拦截一次 click,防止误触发跳转
// PR-FRONTEND-DIY-SCROLLBAR (2026-09-18): "滑动时显示"模式专用
// 滚动中为 true → 给 scroll-view 加 is-scrolling 类展示滚动条, 停止 800ms 后隐藏
slideScrolling: false,
// 小程序端自定义滚动条度量(原生 show-scrollbar 被忽略, 改用自绘)
mpScroll: { viewW: 0, contentW: 0, left: 0 }
}
},
created() {
@@ -75,23 +94,94 @@ export default {
var self = this;
this.$nextTick(function() {
self.bindSlideMouseEvents();
self.bindSlideScrollbar();
});
// #endif
// 小程序端:测量滚动条所需的视口/内容宽度(图片尺寸由内联样式决定, 渲染后稳定)
// 多次(0/300/1000ms)重测: 首次渲染时节点可能尚未布局完成, 单次测量容易拿不到宽度
// → 滚动条不显示; 之后的测量只覆盖有效值, 不会把已测得的宽度清零。
// #ifdef MP
var selfMp = this;
this.$nextTick(function() {
selfMp.measureScrollbar();
});
this._mpMeasureTimers = [300, 1000].map(function(delay) {
return setTimeout(function() {
selfMp.measureScrollbar();
}, delay);
});
// #endif
},
beforeDestroy() {
// #ifdef H5
this.unbindSlideMouseEvents();
this.unbindSlideScrollbar();
// #endif
// #ifdef MP
if (this._mpMeasureTimers) {
this._mpMeasureTimers.forEach(function(t) { clearTimeout(t); });
this._mpMeasureTimers = null;
}
// #endif
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
},
// 小程序端: 列表/数量变化后, 内容宽度会变, 重新测量自定义滚动条
'value.list'(newVal, oldVal) {
// #ifdef MP
if (newVal !== oldVal) {
var self = this;
this.$nextTick(function() {
self.measureScrollbar();
});
}
// #endif
}
},
computed: {
// PR-FRONTEND-DIY-IMAGE-NAV-SPACING (2026-09-18): 组件背景色
// 后台"组件背景"面板下发的字段是 componentBgColor(与图片轮播/搜索等组件一致);
// 兼容别名/数组形态/嵌套容器(避免后台换名或存成数组时前端读不到而完全不上色),
// 最后兜底组件级 pageBgColor(部分组件后台把组件背景存在这里)。
// 空值/非法值(图片URL等)返回空串, 此时不输出 background-color, 保持历史透明视觉。
componentBgColor() {
const v = this.value || {};
const norm = k => String(k).toLowerCase().replace(/[\s_-]/g, '');
const asColor = val => {
if (Array.isArray(val)) val = val[0];
if (typeof val !== 'string') return '';
const s = val.trim();
if (!s) return '';
// 排除图片/URL 等非颜色值
if (/^(url\(|https?:|data:|upload\/|addon\/|\/)/i.test(s)) return '';
return s;
};
const sources = [v];
['style', 'config', 'setting', 'data'].forEach(k => {
if (v[k] && typeof v[k] === 'object' && !Array.isArray(v[k])) sources.push(v[k]);
});
const candidates = [
'componentbgcolor', 'componentbackgroundcolor', 'componentcolor', 'componentbg',
'bgcolor', 'backgroundcolor', 'background',
'pagebgcolor'
];
for (let c = 0; c < candidates.length; c++) {
for (let s = 0; s < sources.length; s++) {
for (const key in sources[s]) {
if (norm(key) === candidates[c]) {
const color = asColor(sources[s][key]);
if (color) return color;
}
}
}
}
return '';
},
componentStyle() {
let style = '';
style += 'background-color:' + this.value.componentBgColor + ';';
if (this.componentBgColor) style += 'background-color:' + this.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
@@ -123,9 +213,446 @@ export default {
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
},
// ========== PR-FRONTEND-DIY-SCROLLBAR (2026-09-18): 水平滚动条显隐三态 ==========
// 后台"水平滚动条"配置: 滑动时显示 / 始终显示 / 永不显示 → 归一化为 slide / always / never
// 字段名兼容: scrollBar / scrollbar / scrollBarType / horizontalScrollBar / horizontalScrollbar
// (忽略大小写/下划线/中划线差异, 并向下探测 value.scrollBar / value.style 等嵌套容器)
// 值兼容: 英文枚举(slide/auto/always/never/none...) / 中文枚举(滑动时显示/始终显示/永不显示)
// / 数字(0=滑动时显示 1=始终显示 2=永不显示) / 布尔(true=始终显示 false=永不显示)
// 兜底: 未下发或无法识别 → 'slide' (滑动时显示, 与历史行为一致)
scrollBarMode() {
const v = this.value || {};
const norm = k => String(k).toLowerCase().replace(/[\s_-]/g, '');
// 从配置对象中取"滚动条"字段的原始值
const pickRaw = obj => {
if (!obj || typeof obj != 'object') return undefined;
for (const key in obj) {
const k = norm(key);
if (k.indexOf('scrollbar') != -1 || k.indexOf('scrolltype') != -1) {
const val = obj[key];
if (val && typeof val === 'object') {
// 子配置对象形态: { scrollBar: { type: 'always' } }
return val.type !== undefined ? val.type : (val.value !== undefined ? val.value : val.mode);
}
if (val !== undefined && val !== null && val !== '') return val;
}
}
return undefined;
};
let raw = pickRaw(v);
// 嵌套容器兜底
if (raw === undefined) {
const containers = ['scrollBar', 'scrollbar', 'style', 'config', 'setting', 'data'];
for (let i = 0; i < containers.length; i++) {
if (v[containers[i]] && typeof v[containers[i]] === 'object') {
raw = pickRaw(v[containers[i]]);
if (raw !== undefined) break;
}
}
}
if (raw === undefined || raw === null || raw === '') return 'slide';
if (typeof raw === 'boolean') return raw ? 'always' : 'never';
if (raw === 0 || raw === '0') return 'slide';
if (raw === 1 || raw === '1') return 'always';
if (raw === 2 || raw === '2') return 'never';
const map = {
slide: 'slide', scroll: 'slide', auto: 'slide', scrolling: 'slide', whilescrolling: 'slide', moveslide: 'slide',
always: 'always', alwaysdisplay: 'always', show: 'always',
never: 'never', none: 'never', hidden: 'never', hide: 'never',
// 后台直出中文枚举时兜底
'滑动时显示': 'slide', '滑动时': 'slide', '滚动时显示': 'slide',
'始终显示': 'always', '一直显示': 'always', '永久显示': 'always',
'永不显示': 'never', '从不显示': 'never', '不显示': 'never'
};
const hit = map[String(raw).toLowerCase().trim()] || map[norm(raw)];
return hit || 'slide';
},
// scroll-view 上的滚动条显隐 class: scrollbar-slide / scrollbar-always / scrollbar-never
// "滑动时显示"在滚动中追加 is-scrolling (由 scroll 监听维护)
scrollBarClass() {
const cls = ['scrollbar-' + this.scrollBarMode];
if (this.scrollBarMode == 'slide' && this.slideScrolling) cls.push('is-scrolling');
return cls;
},
// 原生 show-scrollbar / enhanced 仅在 App 端生效, 小程序端被忽略且会干扰原生行为,
// 故小程序端一律关闭, 改用自定义滚动条; H5 端这两个属性为 no-op, 不影响。
enhancedScrollbar() {
// #ifndef MP
return this.scrollBarMode != 'never';
// #endif
// #ifdef MP
return false;
// #endif
},
showScrollbarAttr() {
// #ifndef MP
return this.scrollBarMode != 'never';
// #endif
// #ifdef MP
return false;
// #endif
},
// 小程序端自定义滚动条的"是否显示"
showCustomScrollbar() {
// #ifdef MP
if (this.scrollBarMode === 'never') return false;
// 只有 singleSlide(横向可滚动)才有滚动条, 与 H5 的 .singleSlide 样式作用域保持一致
if (this.value.showStyle != 'singleSlide') return false;
// 内容没有溢出(无需横向滚动)则不显示
if (!(this.mpScroll.contentW > this.mpScroll.viewW)) return false;
// 滑动时显示: 仅在滚动中显示
if (this.scrollBarMode === 'slide') return this.slideScrolling;
// 始终显示: 一直显示
return true;
// #endif
},
// 小程序端自定义滚动条 thumb 的内联样式(width + 位移)
scrollbarThumbStyle() {
// #ifdef MP
const viewW = this.mpScroll.viewW;
const contentW = this.mpScroll.contentW;
const left = this.mpScroll.left;
if (!viewW || !contentW || contentW <= viewW) return 'display:none;';
const thumbW = Math.max(20, Math.floor(viewW * viewW / contentW));
const maxLeft = contentW - viewW;
const ratio = maxLeft > 0 ? Math.min(1, Math.max(0, left / maxLeft)) : 0;
const thumbLeft = ratio * (viewW - thumbW);
return 'width:' + thumbW + 'px;transform:translateX(' + thumbLeft + 'px);';
// #endif
},
// ========== PR-FRONTEND-DIY-IMAGE-NAV-SPACING (2026-09-18): 图片自定义间距 ==========
// 后台"滑动图片"组件(componentName = ImageNav)的 3 项间距配置。
// 字段名已用线上接口 POST /api/diyview/info(uniacid=312, DIY_VIEW_INDEX) 核对, 实际为:
// imageSpacing 图片横向间距: 相邻图片项之间的横向间隔
// imageSpacingTop 图片上间距 : 图片区域内侧的上内边距
// imageSpacingBottom 图片下间距 : 图片区域内侧的下内边距
// 单位: 按项目惯例(与 diy-group 的 margin.top、图片轮播的 margin.both 一致)换算 rpx = 后台数值 × 2
// 容错: 除后台现用命名外, 仍按归一化(忽略大小写/下划线/中划线)兼容其它命名,
// 并向下探测 value.imageSpacing / value.margin / value.padding 等嵌套容器。
// 兜底: 字段缺失/非法时返回 null, 由 imageSpacingStyle / imageItemStyle 回退历史视觉
// (横向 28rpx, 上/下沿用 CSS 的 16rpx), 老装修数据不受影响。
imageSpacingConfig() {
const v = this.value || {};
const RATIO = 2; // 后台数值 → rpx 换算比例
const norm = k => String(k).toLowerCase().replace(/[\s_-]/g, '');
// 非数字(如 'diy'/枚举)或空值 → null, 交给兜底
const toRpx = val => {
if (val === undefined || val === null || val === '') return null;
const n = Number(val);
if (isNaN(n)) return null;
return Math.max(0, n) * RATIO;
};
// 查找源: value 自身 + 常见嵌套容器(顶层优先)
// 注意: 后端偶发把 margin 存成数组(线上该组件 margin: []), 数组不能当容器取裸键, 直接跳过
const sources = [v];
['imageSpacing', 'imageSpace', 'spacing', 'space', 'margin', 'padding', 'style', 'config', 'setting']
.forEach(k => {
if (v[k] && typeof v[k] === 'object' && !Array.isArray(v[k])) sources.push(v[k]);
});
// 三级查找: ① 全源精确名 → ② 全源模糊包含名 → ③ 嵌套容器内的裸键
// (如 imageSpacing: { horizontal: 3, top: 0, bottom: 0 })
const pick = (exact, fuzzy, nested) => {
for (let s = 0; s < sources.length; s++) {
const src = sources[s];
for (const key in src) {
if (exact.indexOf(norm(key)) != -1) {
const rpx = toRpx(src[key]);
if (rpx !== null) return rpx;
}
}
}
for (let s = 0; s < sources.length; s++) {
const src = sources[s];
for (const key in src) {
const k = norm(key);
if (fuzzy.some(f => k.indexOf(f) != -1)) {
const rpx = toRpx(src[key]);
if (rpx !== null) return rpx;
}
}
}
// 裸键(top/bottom/both...)只在嵌套容器内解释, 避免误取顶层同名字段
for (let s = 1; s < sources.length; s++) {
const src = sources[s];
for (const key in src) {
if (nested.indexOf(norm(key)) != -1) {
const rpx = toRpx(src[key]);
if (rpx !== null) return rpx;
}
}
}
return null;
};
return {
// 图片横向间距 —— 后台现用命名 imageSpacing(首项命中即可, 后面都是兼容别名)
horizontal: pick(
['imagespacing', 'imagespacinghorizontal', 'imagehorizontalspacing', 'imagespacingboth', 'imagespacenum',
'imagemargin', 'imagemarginnum', 'imagespace', 'horizontalspacing', 'horizontalspacenum', 'imagegap',
'spacenum', 'marginnum', 'imageverticalspace', 'space', 'gap'],
['horizontalspacing', 'imagespacing', 'imagespace', 'imagemargin', 'spacenum', 'marginnum', 'imagegap', 'gap'],
['horizontal', 'horizontalnum', 'lr', 'leftright', 'both', 'bothnum', 'imagespacing', 'num', 'margin', 'space', 'gap']
),
// 图片上间距 —— 后台现用命名 imageSpacingTop
paddingTop: pick(
['imagespacingtop', 'imagetopspacing', 'imagespacetop', 'imagetopspace', 'imagepaddingtop',
'paddingtop', 'spacingtop', 'topspace', 'margintop'],
['imagespacingtop', 'paddingtop', 'spacingtop', 'topspacing', 'topspace', 'margintop'],
['top', 'topnum', 'paddingtop', 'margintop', 'spacetop', 'spacingtop']
),
// 图片下间距 —— 后台现用命名 imageSpacingBottom
paddingBottom: pick(
['imagespacingbottom', 'imagebottomspacing', 'imagespacebottom', 'imagebottomspace', 'imagepaddingbottom',
'paddingbottom', 'spacingbottom', 'bottomspace', 'marginbottom'],
['imagespacingbottom', 'paddingbottom', 'spacingbottom', 'bottomspacing', 'bottomspace', 'marginbottom'],
['bottom', 'bottomnum', 'paddingbottom', 'marginbottom', 'spacebottom', 'spacingbottom']
)
};
},
// 图片区域上/下内边距(作用在滚动容器上); 未配置时不输出内联样式, 沿用 CSS padding
imageSpacingStyle() {
const cfg = this.imageSpacingConfig;
let style = '';
if (cfg.paddingTop !== null) style += 'padding-top:' + cfg.paddingTop + 'rpx;';
if (cfg.paddingBottom !== null) style += 'padding-bottom:' + cfg.paddingBottom + 'rpx;';
return style;
},
// 图片项之间的横向间距; 未配置时回退原写死的 28rpx
imageItemStyle() {
const horizontal = this.imageSpacingConfig.horizontal;
return 'margin-right:' + (horizontal === null ? 28 : horizontal) + 'rpx;';
}
},
methods: {
// ========== PR-FRONTEND-DIY-IMAGE-NAV-IMG-SIZE (2026-09-22): 图片展示尺寸 ==========
// 目标: 图片按后台"上传/配置的尺寸"渲染, 不再被撑到最大(小程序/H5 表现一致)。
// 背景: 原写法直接把 item.imgWidth / item.imgHeight(每项字段)当成内联尺寸,
// 后台往往不下发这两个字段(或下发 "") → 生成 'NaNrpx' 这类非法值被忽略,
// <image> 于是回退到 uni-app 默认尺寸 320px x 240px, 视觉上就是"被撑到最大"。
// 取值优先级(后台数值单位按 rpx 约定, 经 $util.rpx() 转成当前端可用单位):
// ① 每一项下发的 imgWidth / imgHeight —— 沿用历史约定: 数值 ÷ 2
// ② 组件级 imgWidth / imgHeight —— 兜底, 同样 ÷ 2
// ③ 组件级"图片尺寸"imageSize —— 与 diy-graphic-nav / diy-merch-list 一致, × 2
// ④ 都没有 → 120 正方形, 只做最小安全兜底(远小于 320x240 默认值)
//
// 落地结构: 外层 .image-img(view) 与 <image> 都按解析出的尺寸渲染, 两端一致;
// 样式统一由下面的方法输出"字符串"(见 imageBoxStyle 的说明, 对象在小程序端会失效)。
rpxVal(val) {
// 项目约定: 小程序/App 输出 'Nrpx', H5 输出 'Npx'(uni.upx2px)
if (this.$util && typeof this.$util.rpx === 'function') return this.$util.rpx(val);
return val + 'rpx';
},
resolveItemImgSize(item) {
const valid = v => {
if (v === undefined || v === null || v === '') return null;
const n = Number(v);
return (!isNaN(n) && n > 0) ? n : null;
};
// ① 每一项图片自身尺寸
const iw = valid(item && item.imgWidth);
const ih = valid(item && item.imgHeight);
if (iw !== null && ih !== null) return { width: iw / 2, height: ih / 2 };
if (iw !== null) return { width: iw / 2, height: iw / 2 };
if (ih !== null) return { width: ih / 2, height: ih / 2 };
// ② 组件级 imgWidth / imgHeight
const v = this.value || {};
const ciw = valid(v.imgWidth);
const cih = valid(v.imgHeight);
if (ciw !== null && cih !== null) return { width: ciw / 2, height: cih / 2 };
if (ciw !== null) return { width: ciw / 2, height: ciw / 2 };
if (cih !== null) return { width: cih / 2, height: cih / 2 };
// ③ 组件级"图片尺寸"
const is = valid(v.imageSize);
if (is !== null) return { width: is * 2, height: is * 2 };
// ④ 安全兜底
return { width: 120, height: 120 };
},
// 图片外层占位盒样式(决定图片最终尺寸)
//
// ⚠️ 必须返回"样式字符串", 不能返回对象!
// 返回对象时 mp-weixin 的编译产物是 `style="{{(item.m0)}}"`(m0 是对象),
// 小程序 WXML 不能把对象转成 style 字符串 → 整条样式直接失效:
// · 只有 <image> 时 → 图片回退到默认 320x240(看起来"被撑到最大")
// · 外层盒没尺寸 + 图片 width:100% 时 → 高度塌成 0(图片完全不显示)
// diy-graphic-nav.vue 能在小程序正常显示, 正是因为它的 style 编译出来是字符串。
imageBoxStyle(item) {
const size = this.resolveItemImgSize(item);
const imageSize = Number(this.value && this.value.imageSize);
const font = (!isNaN(imageSize) && imageSize > 0) ? imageSize * 2 : size.height;
return 'font-size:' + this.rpxVal(font) + ';'
+ 'width:' + this.rpxVal(size.width) + ';'
+ 'height:' + this.rpxVal(size.height) + ';';
},
// 图片自身样式(与占位盒同尺寸, 配合 mode="aspectFit" 等比完整显示)
// max-width / max-height 与 diy-graphic-nav 的写法保持一致, 用于兜底夹住尺寸,
// 保证图片不会超出后台配置的大小。
imageInnerStyle(item) {
const size = this.resolveItemImgSize(item);
const w = this.rpxVal(size.width);
const h = this.rpxVal(size.height);
return 'width:' + w + ';height:' + h + ';max-width:' + w + ';max-height:' + h + ';';
},
// ========== PR-FRONTEND-DIY-SCROLLBAR (2026-09-18): H5 "滑动时显示"滚动条控制 ==========
// 背景: H5 端 scroll-view 的横向滚动条默认被 CSS 隐藏; "滑动时显示"需要监听 scroll,
// 滚动中给容器加 is-scrolling 类展示滚动条, 停止滚动 800ms 后移除类再隐藏。
// "始终显示/永不显示"为纯 CSS 类控制(scrollbar-always/scrollbar-never), 无需 JS。
bindSlideScrollbar() {
// #ifdef H5
if (this._slideScrollBound) return;
// 挂载瞬间若还没拿到滚动容器,直接 return 不标记已绑定;
// ensureSlideEls() 会在用户首次交互时重试(见 emit 处),不会永久失效。
var el = this.getSlideContainer();
if (!el) return;
this._slideScrollEl = el;
this._slideScrollBound = true;
var self = this;
this._onSlideScroll = function() {
if (self.scrollBarMode != 'slide') return;
if (!self.slideScrolling) self.slideScrolling = true;
clearTimeout(self._slideScrollTimer);
self._slideScrollTimer = setTimeout(function() {
self.slideScrolling = false;
}, 800);
};
el.addEventListener('scroll', this._onSlideScroll, { passive: true });
// #endif
},
unbindSlideScrollbar() {
// #ifdef H5
if (this._slideScrollEl && this._onSlideScroll) {
this._slideScrollEl.removeEventListener('scroll', this._onSlideScroll);
}
clearTimeout(this._slideScrollTimer);
this._slideScrollEl = null;
this._onSlideScroll = null;
this._slideScrollBound = false;
this.slideScrolling = false;
// #endif
},
// 统一的 scroll 事件处理(模板 @scroll 绑定, 小程序/H5 共用)
// · 两端:"滑动时显示"模式 → 维护 slideScrolling(滚动中标记, H5 用于 is-scrolling 类)
// · 小程序端: 驱动自定义滚动条 thumb 位置(原生 show-scrollbar 被忽略, 改用自绘)
onSlideScroll(e) {
if (this.scrollBarMode === 'slide') {
if (!this.slideScrolling) this.slideScrolling = true;
clearTimeout(this._slideScrollTimer);
this._slideScrollTimer = setTimeout(() => {
this.slideScrolling = false;
}, 800);
}
// #ifdef MP
// 首次滚动时若还没拿到尺寸, 先测量一次(图片尺寸由内联样式决定, 渲染后即稳定)
if (!this.mpScroll.viewW || !this.mpScroll.contentW) this.measureScrollbar();
// scroll-view 的 scroll 事件 detail 自带真实 scrollWidth(小程序原生返回),
// 只要它比当前记录的更大(内容更长), 就更新 —— 保证滚动条长度比例准确
if (e && e.detail && typeof e.detail.scrollWidth === 'number'
&& e.detail.scrollWidth > this.mpScroll.contentW) {
this.mpScroll.contentW = e.detail.scrollWidth;
}
let left = 0;
if (e && e.detail && typeof e.detail.scrollLeft === 'number') left = e.detail.scrollLeft;
this.mpScroll.left = left;
// #endif
},
// 小程序端: 测量 scroll-view 视口宽度与内容宽度(供自定义滚动条计算 thumb)
//
// ⚠️ fix (2026-09-22) 「始终显示水平滚动条」在小程序端不生效的根因:
// 原实现只取 .uni-scroll-view-content 的 width 当"内容宽度"。但在 mp-weixin 中,
// 该 view 是块级/flex 容器, 宽度恒等于 scroll-view 宽度(子项只是溢出它而不是撑开它),
// 于是 contentW 永远 == viewW → showCustomScrollbar / scrollbarThumbStyle 判定
// "内容没有溢出" → 滚动条永不渲染(后台选"始终显示"也无效)。
// 现改为三级取样, 取到即可用, 且已被测得的有效值不会被后续空测量覆盖:
// ① scroll-view 的 scrollOffset.scrollWidth —— WeChat 原生返回的真实滚动区宽度(首选, 含内边距)
// ② 全部 .image-nav-item 的 rect 跨度 max(right) - min(left) + 左右内边距 —— 最可靠的 DOM 兜底
// ③ 按后台下发的图片/文本尺寸累加推算(rpx → px) —— 极端情况(查询全部失败)下兜底
measureScrollbar() {
// #ifdef MP
if (!uni || !uni.createSelectorQuery) return;
var self = this;
var query = uni.createSelectorQuery().in(this);
query.select('.image-nav').fields({ size: true, scrollOffset: true });
query.selectAll('.image-nav-item').boundingClientRect();
query.exec(function(res) {
var view = res && res[0];
if (!view) return;
var viewW = view.width || 0;
var items = res && res[1];
// ① 原生 scrollWidth
var contentW = view.scrollWidth || 0;
// ② 首尾 item 的 rect 跨度(与当前滚动位置无关: 两端同步平移, 差值稳定)
if (contentW <= viewW && items && items.length) {
var minLeft = Infinity;
var maxRight = -Infinity;
for (var i = 0; i < items.length; i++) {
var r = items[i];
if (!r) continue;
if (r.left < minLeft) minLeft = r.left;
if (r.right > maxRight) maxRight = r.right;
}
if (maxRight > minLeft) {
var padPx = (uni.upx2px ? uni.upx2px(16) : 8) * 2; // .image-nav 左右各 16rpx
var spanW = (maxRight - minLeft) + padPx;
if (spanW > contentW) contentW = spanW;
}
}
// ③ 数据推算兜底
if (!contentW) contentW = self.estimateContentWidthPx();
self.mpScroll.viewW = viewW;
// 有效值只增不减: 避免后一次空测量把已测得的宽度清零(会导致滚动条突然消失)
if (contentW > 0) self.mpScroll.contentW = contentW;
else if (!self.mpScroll.contentW) self.mpScroll.contentW = 0;
self.mpScroll.left = view.scrollLeft || 0;
});
// #endif
},
// 小程序端: 按后台下发的尺寸推算内容总宽度(rpx → px), 仅在 DOM 测量失败时兜底
estimateContentWidthPx() {
// #ifdef MP
const list = (this.value && this.value.list) || [];
if (!list.length) return 0;
const cfg = this.imageSpacingConfig;
const gap = cfg.horizontal === null ? 28 : cfg.horizontal;
let totalRpx = 32; // 容器左右 padding(16rpx × 2)
for (let i = 0; i < list.length; i++) {
if (this.value.mode == 'text') {
const w = Number(list[i] && list[i].imgWidth);
totalRpx += (!isNaN(w) && w > 0) ? w / 2 : 0;
} else {
totalRpx += this.resolveItemImgSize(list[i]).width;
}
totalRpx += gap;
}
let winW = 375;
try {
if (uni && uni.getSystemInfoSync) winW = uni.getSystemInfoSync().windowWidth || 375;
} catch (e) {}
return totalRpx * winW / 750;
// #endif
},
// 页面跳转
redirectTo(link) {
if (!link.wap_url || this.$util.getCurrRoute() != this.$util.MEMBER_PAGE_URL || this.storeToken) {
@@ -153,14 +680,10 @@ export default {
// #ifdef H5
// 防止重复绑定
if (this._slideEventsBound) return;
var outerEl = this.getSlideOuterEl();
var innerEl = this.getSlideContainer();
if (!outerEl || !innerEl) return;
// 关键发现:uni-app 的 <uni-scroll-view> web component 内部用了 BetterScroll,
// 它会拦截 touch/mouse 事件;绑到 scroll-view 自身的 mousedown 收不到(目标被重定向到 HTML)。
// 解决:document 级别 capture 阶段监听 + 用 clientX/clientY 落在容器 bounding box 内才处理。
this._slideOuterEl = outerEl;
this._slideEl = innerEl;
// 注意:这里不再要求"挂载那一刻就能拿到滚动容器"再去绑定监听。
// 之前只要 getSlideContainer() 返回 null(mounted 时 DOM/样式尚未就绪就会发生),
// 就直接 return 且不再重试 → 整个拖拽能力静默失效(鼠标怎么拖都不动)。
// 现在:监听一律先绑上,元素在每次事件里按需解析(见 ensureSlideEls)。
this._slideEventsBound = true;
// document 级别 capture 阶段,先于 uni-app 内部的滚动库触发
document.addEventListener('mousedown', this.onSlideMouseDown, true);
@@ -183,50 +706,79 @@ export default {
this._slideEventsBound = false;
// #endif
},
getSlideContainer() {
// 本组件实例的根元素(<view data-component-name="diy-image-nav">)
//
// ⚠️ 必须用 this.$el 限定在"本实例"内查找元素!
// 历史实现用 document.querySelector('[data-component-name="diy-image-nav"]'),
// 而同一个页面可以放多个滑动图组件(如 首页的 合作伙伴 + 证书资质 + 服务资质),
// document.querySelector 永远只返回页面上的**第一个**实例 ——
// 于是拖拽/滚轮第 2、3 个组件时,"指针是否在容器内"用的是第 1 个组件的位置,
// 判断不通过直接 return → 表现就是"鼠标拖不动、滚轮也没反应"。
getSlideRootEl() {
// #ifdef H5
// uni-app 的 scroll-view 在 H5 端编译为 <uni-scroll-view> web component,
// 嵌套结构:
// <uni-scroll-view> ← 自定义元素
// <div class="uni-scroll-view"> ← 第1层,visible
// <div class="uni-scroll-view"> ← 第2层,overflowX=auto (真滚动容器)
// 真正能响应 scrollLeft 的是第 2 层 div。
// 通过 data-component-name 找到本组件根 view,然后向下找 .uni-scroll-view。
var componentRoot = document.querySelector('[data-component-name="diy-image-nav"]');
if (!componentRoot) return null;
// 找 overflowX:auto 的 div.uni-scroll-view
var candidates = componentRoot.querySelectorAll('.uni-scroll-view');
for (var i = 0; i < candidates.length; i++) {
var s = getComputedStyle(candidates[i]).overflowX;
if (s === 'auto' || s === 'scroll') {
return candidates[i];
}
}
// 兜底:取最后一个 .uni-scroll-view(经验上最后一个就是真滚动容器)
return candidates.length > 0 ? candidates[candidates.length - 1] : null;
var el = this.$el;
if (el && el.nodeType === 1) return el;
return null;
// #endif
},
// 用于判断 mousedown/wheel 是否落在容器内(bounding box)
getSlideOuterEl() {
// #ifdef H5
// 用于判断 mousedown/wheel 是否落在容器内(用最外层 <uni-scroll-view> 的 bounding box)
var componentRoot = document.querySelector('[data-component-name="diy-image-nav"]');
if (!componentRoot) return null;
var sc = componentRoot.querySelector('uni-scroll-view');
return sc || null;
return this.getSlideRootEl();
// #endif
},
getSlideContainer() {
// #ifdef H5
// uni-app 的 scroll-view 在 H5 端编译为 <uni-scroll-view> 自定义元素,
// 真正的滚动 div 是内部的 .uni-scroll-view。这里在**本实例范围内**查找:
// ① 优先"内容宽度 > 可视宽度"判定真滚动容器(与 overflow 写法无关, 最可靠)
// ② 其次 overflow-x: auto/scroll
// ③ 再退化为最后一个 .uni-scroll-view
// ④ 最后退化到 .uni-scroll-view-content 的父元素
var root = this.getSlideRootEl();
if (!root) return null;
var candidates = root.querySelectorAll('.uni-scroll-view');
var i;
for (i = 0; i < candidates.length; i++) {
if (candidates[i].scrollWidth > candidates[i].clientWidth + 1) return candidates[i];
}
for (i = 0; i < candidates.length; i++) {
var s = getComputedStyle(candidates[i]).overflowX;
if (s === 'auto' || s === 'scroll') return candidates[i];
}
if (candidates.length > 0) return candidates[candidates.length - 1];
var content = root.querySelector('.uni-scroll-view-content');
if (content && content.parentElement) return content.parentElement;
return root.querySelector('uni-scroll-view');
// #endif
},
// 按需解析本实例的"根元素 + 真滚动容器"(挂载时机不确定, 统一走这里)
ensureSlideEls() {
// #ifdef H5
var root = this.getSlideRootEl();
if (!root) return false;
this._slideOuterEl = root;
var el = this.getSlideContainer();
if (!el) return false;
this._slideEl = el;
// 滚动条显隐依赖真滚动容器的 scroll 事件:mounted 时若还没拿到容器,
// 这里补绑一次(否则"滑动时显示滚动条"也会失效)。
if (!this._slideScrollBound) this.bindSlideScrollbar();
return true;
// #endif
},
onSlideMouseDown(e) {
// #ifdef H5
if (this.value.showStyle != 'singleSlide') return;
// document 级别监听,只处理落在容器内的事件
// 关键:e.target 可能是 HTML 本身(BetterScroll 内部 stopPropagation 导致),
// document 级别监听,只处理落在"本实例"容器内的事件
// 关键:e.target 可能是 HTML 本身(uni 内部事件重定向导致),
// 所以用 clientX/clientY 判断是否落在容器 bounding box 内。
if (!this._slideOuterEl) return;
if (!this.ensureSlideEls()) return;
var rect = this._slideOuterEl.getBoundingClientRect();
if (!rect) return;
var x = e.clientX, y = e.clientY;
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return;
var el = this.getSlideContainer();
var el = this._slideEl;
if (!el) return;
this.slideIsDragging = true;
this.slideStartX = x;
@@ -240,7 +792,7 @@ export default {
onSlideMouseMove(e) {
// #ifdef H5
if (!this.slideIsDragging) return;
var el = this.getSlideContainer();
var el = this._slideEl;
if (!el) return;
var x = (e.clientX != null) ? e.clientX : 0;
var deltaX = x - this.slideStartX;
@@ -267,7 +819,7 @@ export default {
// #ifdef H5
if (!this._suppressNextClick) return;
if (!e.target) return;
var outer = this._slideOuterEl;
var outer = this._slideOuterEl || this.getSlideOuterEl();
if (!outer || !outer.contains(e.target)) return;
this._suppressNextClick = false;
if (e.preventDefault) e.preventDefault();
@@ -278,13 +830,13 @@ export default {
onSlideWheel(e) {
// #ifdef H5
if (this.value.showStyle != 'singleSlide') return;
if (!this._slideOuterEl) return;
// 同 mouseDown:用 clientX/clientY 判断 wheel 是否落在容器内
// 同 mouseDown:用 clientX/clientY 判断 wheel 是否落在"本实例"容器内
if (!this.ensureSlideEls()) return;
var rect = this._slideOuterEl.getBoundingClientRect();
if (!rect) return;
var x = e.clientX, y = e.clientY;
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return;
var el = this.getSlideContainer();
var el = this._slideEl;
if (!el) return;
// 浏览器 wheel 事件的 deltaY 是垂直方向;此处把垂直滚轮映射到横向滚动
var dx = e.deltaX || 0;
@@ -301,6 +853,36 @@ export default {
</script>
<style lang="scss" scoped>
// 包裹 scroll-view 的容器(相对定位, 自定义滚动条绝对定位于其底部)
.image-nav-wrap {
position: relative;
width: 100%;
}
// 小程序端自定义水平滚动条(MP 原生 show-scrollbar 被忽略, 改用自绘,
// 与 H5 的 CSS 伪元素滚动条视觉一致; 元素仅在 #ifdef MP 下渲染)
.img-nav-scrollbar {
position: absolute;
left: 0;
right: 0;
bottom: 2rpx;
height: 4rpx;
background-color: rgba(0, 0, 0, 0.12);
border-radius: 2rpx;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.img-nav-scrollbar-thumb {
position: absolute;
left: 0;
top: 0;
height: 4rpx;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2rpx;
transition: transform 0.08s linear;
}
.image-nav {
padding: 16rpx;
box-sizing: border-box;
@@ -327,17 +909,72 @@ export default {
// #ifdef H5
overflow-x: auto;
overflow-y: hidden;
// 隐藏滚动条,视觉上仍保持单页布局;用户用鼠标拖拽/滚轮即可滚动
scrollbar-width: none; // Firefox
-ms-overflow-style: none; // IE/Edge legacy
&::-webkit-scrollbar {
display: none;
// 拖拽手势提示(桌面端鼠标用户能看出这一行是可以拖动的)
cursor: grab;
&:active {
cursor: grabbing;
}
// 本行是 <uni-scroll-view> 自定义元素,真正产生滚动的是内部 div.uni-scroll-view,
// 这里同步声明,保证内层容器一定是"可横向滚动"的(鼠标拖拽/滚轮/触屏滑动都依赖它)
::v-deep .uni-scroll-view {
overflow-x: auto;
overflow-y: hidden;
}
// 禁止鼠标选中文字(拖拽时选中会显得很别扭)
user-select: none;
-webkit-user-select: none;
// 拖拽时关闭过渡,避免 Chrome 的惯性滚动与 JS 抢控制权
-webkit-overflow-scrolling: touch;
// ========== PR-FRONTEND-DIY-SCROLLBAR (2026-09-18): 水平滚动条显隐三态 ==========
// 默认态(滑动时显示的静止态 / 永不显示): 隐藏滚动条,视觉上仍保持单页布局;
// 用户用鼠标拖拽/滚轮即可滚动(滚动能力不受滚动条显隐影响)
scrollbar-width: none; // Firefox
-ms-overflow-style: none; // IE/Edge legacy
&::-webkit-scrollbar {
display: none;
}
// uni scroll-view 在 H5 编译后真滚动容器是内层 .uni-scroll-view, 同步隐藏
::v-deep .uni-scroll-view {
scrollbar-width: none;
-ms-overflow-style: none;
}
::v-deep .uni-scroll-view::-webkit-scrollbar {
display: none;
}
// "始终显示" 与 "滑动时显示"(滚动中, 由 is-scrolling 类驱动): 展示细滚动条
&.scrollbar-always,
&.scrollbar-slide.is-scrolling {
scrollbar-width: thin; // Firefox
scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
&::-webkit-scrollbar {
display: block;
height: 4px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.25);
border-radius: 2px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
::v-deep .uni-scroll-view {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
::v-deep .uni-scroll-view::-webkit-scrollbar {
display: block;
height: 4px;
}
::v-deep .uni-scroll-view::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.25);
border-radius: 2px;
}
::v-deep .uni-scroll-view::-webkit-scrollbar-track {
background-color: transparent;
}
}
// #endif
}
@@ -402,6 +1039,15 @@ export default {
align-items: center;
justify-content: center;
font-size: 90rpx;
overflow: hidden;
// PR-FRONTEND-DIY-IMAGE-NAV-IMG-SIZE (2026-09-22):
// 兜底夹住图片尺寸(不设 width/height:100%, 避免外层盒尺寸异常时高度塌成 0
// 导致图片完全不显示)。正常尺寸由 imageInnerStyle 输出的内联样式决定。
.image-content {
max-width: 100%;
max-height: 100%;
}
.tag {
position: absolute;

View File

@@ -6,13 +6,18 @@
<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx" show-menu-by-longpress></image>
</view>
<view class="fui-list-inner">
<view class="title" style="height: 75rpx;">
<text style="font-weight:600" :style="{ color: item.textColor }">{{ item.title }}</text>
<view class="subtitle" style="font-size:24rpx" :style="{ color: item.textColor }">{{ item.desc }}
</view>
<view class="title">
<text class="title-text" :style="titleStyle(item)">{{ item.title }}</text>
<view class="subtitle" :style="descStyle(item)">{{ item.desc }}</view>
<!-- #ifndef H5 -->
<!-- PR-DIY-KEFU-ONE-LINE (2026-09-17): 小程序端隐藏测量节点, 以默认字号实测文本宽度, 反推一行能放下的最大字号 -->
<text class="measure-text measure-title" style="font-size:28rpx;">{{ item.title }}</text>
<text class="measure-text measure-desc" style="font-size:24rpx;">{{ item.desc }}</text>
<!-- #endif -->
</view>
</view>
<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
<!-- PR-DIY-KEFU-ONE-LINE (2026-09-17): 按钮颜色未配置时不再渲染/占位, 避免透明按钮挤窄文字区 -->
<view class="fui-remark jump" v-if="item.BtBgColor || item.BtColor" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx"
:style="{ background: item.BtBgColor, color: item.BtColor }" @tap.stop="previewSqs()">{{ $lang('components-diy.diy-kefu.addNow') }}</span>
</view>
@@ -35,15 +40,31 @@ export default {
data() {
return {
loading: true,
// PR-DIY-KEFU-ONE-LINE (2026-09-17): 小程序端实测得出的一行自适应字号(rpx), 0 表示用默认字号
mpTitleSize: 0,
mpDescSize: 0
};
},
created() {
// this.getDataList();
},
// PR-DIY-KEFU-ONE-LINE (2026-09-17): 英文公司名等长标题一行完整展示(不换行、不省略)
// H5: 挂载/数据变化后实测每个文本的溢出宽度, 逐级缩小 font-size 直到恰好一行放下 —— 保证无省略号;
// 小程序端无法测 DOM, 用字符宽度估算兜底(CJK 1em / 其他 0.6em), 极端超长时仍有省略号兜底
mounted() {
this.$nextTick(this.fitOneLineText)
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
// this.getDataList();
this.$nextTick(this.fitOneLineText)
},
value: {
deep: true,
handler() {
this.$nextTick(this.fitOneLineText)
}
}
},
computed: {
@@ -66,9 +87,130 @@ export default {
current: img,
urls: [img]
})
},
// PR-DIY-KEFU-ONE-LINE (2026-09-17): 单行自适应 —— 标题/描述一行完整展示(不换行), 字号取一行能放下的最大值
// #ifdef H5
fitOneLineText() {
this.$nextTick(() => {
const root = this.$el && this.$el.querySelectorAll ? this.$el : null
if (!root) return
const nodes = root.querySelectorAll('.title-text, .subtitle')
nodes.forEach((el) => {
// 先还原 CSS 默认字号, 再实测是否溢出; 目标宽度留 3px 右侧空隙, 不贴边
el.style.fontSize = ''
let size = parseFloat(window.getComputedStyle(el).fontSize)
const MIN_PX = 10 // 下限 10px, 再小可读性太差
const target = el.clientWidth - 3
let guard = 0
while (el.scrollWidth > target && size > MIN_PX && guard < 60) {
size -= 0.5
el.style.fontSize = size + 'px'
guard++
}
})
})
},
// #endif
// #ifndef H5
// 小程序端: 隐藏测量节点以默认字号实测文本宽度, 宽度与字号成线性关系, 反推一行能放下的最大字号
fitOneLineText() {
uni.createSelectorQuery().in(this)
.select('.fui-list-inner').boundingClientRect()
.select('.measure-title').boundingClientRect()
.select('.measure-desc').boundingClientRect()
.exec((rects) => {
if (!rects || !rects[0]) return
const sys = uni.getSystemInfoSync()
const pxPerRpx = (sys.windowWidth || 375) / 750
// 可用宽度 = 文字区宽度 - 容器右内边距(8rpx) - 与右侧元素(按钮)之间留 8rpx 空隙
const avail = rects[0].width - 16 * pxPerRpx
if (avail <= 0) return
// 标题: 默认 28rpx, 最小 16rpx
if (rects[1] && rects[1].width > avail) {
this.mpTitleSize = Math.max(16, Math.floor(28 * avail / rects[1].width))
} else {
this.mpTitleSize = 0
}
// 描述: 默认 24rpx, 最小 16rpx
if (rects[2] && rects[2].width > avail) {
this.mpDescSize = Math.max(16, Math.floor(24 * avail / rects[2].width))
} else {
this.mpDescSize = 0
}
})
},
// #endif
titleStyle() {
// #ifndef H5
return this.mpTitleSize ? 'font-size:' + this.mpTitleSize + 'rpx;' : ''
// #endif
// #ifdef H5
return ''
// #endif
},
descStyle() {
// #ifndef H5
return this.mpDescSize ? 'font-size:' + this.mpDescSize + 'rpx;' : ''
// #endif
// #ifdef H5
return ''
// #endif
}
}
};
</script>
<style lang="scss"></style>
<style lang="scss">
// 客服展示:标题/描述需要完整展示(中英文均不截断)
// 全局 .fui-list-inner .title 有 nowrap + ellipsis + overflow:hidden,这里用更高优先级的选择器覆盖
// PR-DIY-KEFU-ONE-LINE (2026-09-17): 标题/描述强制单行(配合 JS 自适应字号保证一行放得下), 超长省略号兜底
.diy-kefu {
.fui-list-group {
.fui-list {
align-items: center;
.fui-list-inner {
overflow: hidden;
min-width: 0;
// 右侧留少量空隙, 避免单行文本贴着容器右边缘, 又能尽量铺满到按钮旁
padding-right: 8rpx;
box-sizing: border-box;
.title {
height: auto;
line-height: 1.4;
.title-text {
display: block;
font-size: 28rpx;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subtitle {
display: block;
margin-top: 6rpx;
font-size: 24rpx;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
// PR-DIY-KEFU-ONE-LINE (2026-09-17): 小程序端隐藏测量节点(不占布局、不可见)
.measure-text {
position: absolute;
left: -9999rpx;
top: 0;
white-space: nowrap;
visibility: hidden;
}
}
}
}
}
</style>

View File

@@ -12,10 +12,10 @@
<!-- #ifdef MP -->
<block
v-if="(memberInfo.nickname.indexOf('u_') != -1 && memberInfo.nickname == memberInfo.username) || memberInfo.nickname == memberInfo.mobile">
<view class="nickname"><text class="name" @tap.stop="getWxAuth">{{ $lang('components-diy.diy-member-info.clickToAuthorizeAvatarNickname') }}</text></view>
<view class="nickname"><text class="name" :style="nameStyle" @tap.stop="getWxAuth">{{ $lang('components-diy.diy-member-info.clickToAuthorizeAvatarNickname') }}</text></view>
</block>
<view class="nickname" v-else>
<text class="name" @tap.stop="getWxAuth">{{ memberInfo.nickname }}</text>
<text class="name" :style="nameStyle" @tap.stop="getWxAuth">{{ memberInfo.nickname }}</text>
<view class="member-level"
v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level">
<!-- <text class="icondiy icon-system-huangguan"></text> -->
@@ -39,7 +39,7 @@
<view class="nickname"><text class="name" @tap.stop="getWxAuth">{{ $lang('components-diy.diy-member-info.clickToGetWechatAvatar') }}</text></view>
</block>
<view class="nickname" v-else>
<text class="name" @tap.stop="redirect('/pages_tool/member/info')">{{ memberInfo.nickname
<text class="name" :style="nameStyle" @tap.stop="redirect('/pages_tool/member/info')">{{ memberInfo.nickname
}}</text>
<view class="member-level"
v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level">
@@ -69,7 +69,7 @@
<image :src="$util.getDefaultImage().head" mode="widthFix" show-menu-by-longpress></image>
</view>
<view class="info">
<view class="nickname"><text class="name">{{ $lang('member.index.login') }}</text></view>
<view class="nickname"><text class="name" :style="nameStyle">{{ $lang('member.index.login') }}</text></view>
<view class="desc">{{ $lang('member.index.loginTips') }}</view>
</view>
@@ -367,6 +367,26 @@ export default {
isDisabled() {
if (this.nickName.length > 0) return false;
return true;
},
// PR-DIY-MEMBER-INFO-NAME-FIT (2026-09-17): 英文公司名等长标题自动缩小字号保证一行放下(像后台预览一样一排)
// 标题来源: 已登录取昵称, 未登录取 $lang('member.index.login') 文案(英文包里配置的是公司全称)
// 估算宽度: CJK/全角字符按 1em, 其余(英文/数字/空格)按 0.55em; 标题可用宽度约 470rpx
// 最小 20rpx, 超长时仍有 .name 的省略号兜底
nameStyle() {
let name = '';
if (this.memberInfo && this.memberInfo.nickname) {
name = this.memberInfo.nickname;
} else {
try { name = this.$lang('member.index.login') || ''; } catch (e) { name = ''; }
}
if (!name) return '';
let units = 0;
for (let i = 0; i < name.length; i++) {
units += /[\u2e80-\u9fff\uac00-\ud7af\u3000-\u303f\uff01-\uff60]/.test(name[i]) ? 1 : 0.55;
}
if (units <= 10) return ''; // 短标题走默认 38rpx
const size = Math.max(20, Math.min(34, Math.floor(470 / units)));
return 'font-size:' + size + 'rpx;';
}
},
methods: {

View File

@@ -137,8 +137,8 @@ export default {
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';

View File

@@ -10,8 +10,8 @@
@error="imgError(index)" show-menu-by-longpress />
</view>
<view class="info-wrap">
<text class="title" @tap.stop="handlerClick(item)">{{ item.merch_name }}</text>
<text class="desc">{{ item.desc }}</text>
<text class="title" :style="titleStyle(item)" @tap.stop="handlerClick(item)">{{ item.merch_name }}</text>
<text class="desc" :style="descStyle(item)">{{ item.desc }}</text>
<view class="read-wrap"></view>
</view>
</view>
@@ -179,6 +179,25 @@ export default {
this.toDetail(item);
}
})
},
// PR-DIY-MERCH-LIST-ONE-LINE (2026-09-17): 英文公司名等长标题/描述自动缩小字号, 保证单行显示(像后台预览一样一排)
// 估算宽度: CJK/全角字符按 1em, 其余(英文/数字/空格)按 0.55em; 文字区可用宽度约 500rpx
// 短文本走 CSS 默认字号, 极端超长时仍有省略号兜底
oneLineFontStyle(text, defaultSize, minSize) {
if (!text) return '';
let units = 0;
for (let i = 0; i < text.length; i++) {
units += /[\u2e80-\u9fff\uac00-\ud7af\u3000-\u303f\uff01-\uff60]/.test(text[i]) ? 1 : 0.55;
}
if (units <= 12) return '';
const size = Math.max(minSize, Math.min(defaultSize, Math.floor(500 / units)));
return 'font-size:' + size + 'rpx;';
},
titleStyle(item) {
return this.oneLineFontStyle(item.merch_name, 30, 20);
},
descStyle(item) {
return this.oneLineFontStyle(item.desc, 24, 20);
}
}
};
@@ -296,13 +315,19 @@ export default {
}
.info-wrap {
flex: 1;
min-width: 0; /* PR-DIY-MERCH-LIST-ONE-LINE: 约束宽度让单行省略号生效 */
// flex: 1;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.desc {
color: #888
color: #888;
/* PR-DIY-MERCH-LIST-ONE-LINE: 描述单行, 超出省略 */
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.title {
@@ -311,8 +336,9 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 1; /* PR-DIY-MERCH-LIST-ONE-LINE: 标题一行(原为2行), 配合自适应字号保证放得下 */
-webkit-box-orient: vertical;
white-space: nowrap;
font-size: 30rpx;
line-height: 1.5;
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,8 @@
<template>
<view data-component-name="diy-search" class="diy-search">
<view class="diy-search-wrap" :class="value.positionWay" :style="fixedCss">
<!-- 卡片底板: 搜索框背后一圈底板, 与整体区域背景相互独立; 后台清空则透明(无底板) -->
<view class="search-board" :style="boardLayerStyle">
<view :class="['search-box', 'search-box-' + value.searchStyle]" :style="searchWrapCss"
@tap.stop="handlerSearchClick">
<block v-if="[1, 2].includes(value.searchStyle)">
@@ -13,20 +15,20 @@
<view class="search-content" :style="inputStyle">
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
v-model="searchText" @confirm="handlerSearchClick" disabled="true"
:placeholderStyle="placeholderStyle" />
:placeholderStyle="placeholderStyle" :style="inputElStyle" />
<text class="iconfont icon-sousuo3" @tap.stop="handlerSearchClick"
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)', 'background-color': magnifierBg }"></text>
</view>
</block>
<block v-if="value.searchStyle == 3">
<view class="search-content" :style="inputStyle"
@tap.stop="handlerSearchClick">
<text class="iconfont icon-sousuo3"
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)', 'background-color': magnifierBg }"></text>
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
v-model="searchText" @confirm="handlerSearchClick" disabled="true"
@tap.stop="handlerSearchClick"
:placeholderStyle="placeholderStyle" />
:placeholderStyle="placeholderStyle" :style="inputElStyle" />
<text class="search-content-btn" @tap.stop="handlerSearchClick"
:style="{ 'backgroundColor': value.pageBgColor ? value.pageBgColor : 'rgba(0,0,0,0)' }"
>{{ $lang('components-diy.diy-search.searchBtn') }}</text>
@@ -41,6 +43,7 @@
@tap.stop="handlerRedirectToClick(value.searchLink)"></diy-icon>
</block>
</view>
</view>
</view>
<!-- 解决fixed定位后导航栏塌陷的问题 -->
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder"
@@ -114,20 +117,90 @@ export default {
}
return obj;
},
// 搜索行框(紧包搜索输入框的一行, 含左侧 logo/图标): 背景色优先取后台"行框背景色",
// 未配置时回退到组件背景色(componentBgColor), 保持旧装修视觉; 兼容嵌套字段命名
searchWrapCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
var rowBg = this._probe([
'formBgColor', 'rowBgColor', 'lineBgColor', 'searchBoxBgColor', 'searchRowBgColor',
'boxBgColor', 'rowBackground', 'lineBackground', 'searchLineBgColor'
]) || this.value.componentBgColor || '';
if (rowBg) obj += 'background-color:' + rowBg + ';';
obj += 'text-align:' + this.value.textAlign + ';';
obj += this._radiusStyle(['formBorderRadius', 'rowRadius', 'rowAngle', 'lineRadius', 'searchBoxRadius', 'boxRadius', 'rowRound']);
obj += this._boxSpacingStyle('rowPadding', 'rowPaddingTop', 'rowPaddingBottom', 'rowPaddingLeft', 'rowPaddingRight');
obj += this._boxSpacingStyle('rowMargin', 'rowMarginTop', 'rowMarginBottom', 'rowMarginLeft', 'rowMarginRight', 'margin');
// 后台"搜索行框-内边距/外边距"真实字段 formPadding/formMargin 为带单位 shorthand(如 "0px")
obj += this._cssShorthand(['formPadding', 'rowPaddingStr'], 'padding');
obj += this._cssShorthand(['formMargin', 'rowMarginStr'], 'margin');
// 后台"搜索行框-四边样式"真实字段 formBorder{Top,Right,Bottom,Left}{Show,Color,Width,Style}
obj += this._borderStyle('formBorder');
return obj;
},
// 搜索输入框: 背景色优先取后台"输入框背景色"(含旧字段 elementBgColor), 文本色同步 textColor;
// 高度/内边距/圆角(框体样式)取后台字段, 兼容嵌套命名与缺省
inputStyle() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.borderType == 2) {
obj += 'border-radius:' + '40rpx;';
var inputBg = this._probe([
'elementBgColor', 'inputBgColor', 'searchInputBgColor', 'inputBackground'
]) || this.value.elementBgColor || '';
if (inputBg) obj += 'background-color:' + inputBg + ';';
if (this.value.textColor) obj += 'color:' + this.value.textColor + ';';
obj += this._boxSpacingStyle('inputPadding', 'inputPaddingTop', 'inputPaddingBottom', 'inputPaddingLeft', 'inputPaddingRight');
// 后台"输入框-内边距"真实字段 searchPadding 为带单位 shorthand(如 "0px")
obj += this._cssShorthand(['searchPadding', 'inputPaddingStr'], 'padding');
var h = this._probeNum(['inputHeight', 'boxHeight', 'searchHeight', 'searchBoxHeight']);
if (h !== null) obj += 'height:' + (h * 2) + 'rpx;';
// 框体样式(圆形): 新字段 round/circle/圆形 → 全圆角; 旧字段 borderType==2 → 40rpx
var shape = this._probe(['boxStyle', 'inputShape', 'frameStyle', 'borderShape', 'searchShape']);
if (shape && ['round', 'circle', '圆形', '1'].indexOf(String(shape).toLowerCase()) !== -1) {
obj += 'border-radius:999rpx;';
} else if (this.value.borderType == 2) {
obj += 'border-radius:40rpx;';
}
return obj;
},
// 卡片底板: 搜索框背后一圈底板; 后台"底板背景色/卡片底版"真实字段名为 containerBgColor(历史命名亦兼容)
boardLayerStyle() {
var obj = '';
// 探测候选名尽量覆盖后台各种命名(驼峰/snake_case/下划线都会被 _norm 归一化匹配)
var bg = this._probe([
'containerBgColor', 'containerBackground', 'containerColor',
'cardBgColor', 'boardBgColor', 'cardBackground', 'boardBackground',
'baseBgColor', 'panelBgColor', 'plateBgColor', 'bottomBoardBgColor', 'boardColor',
'backgroundColor', 'bgColor', 'background_color', 'bg_color', 'plateColor',
'bottomBgColor', 'basePlateBgColor', 'basePlateColor', 'cardPlateBgColor', 'cardBottomBgColor'
]);
if (bg) {
obj += 'background-color:' + bg + ';';
// 设了底板背景色却没单独配置内边距时, 搜索框会完全盖住底板 → 改了"没反应";
// 因此未配置 boardPadding 时给默认内边距, 让底板颜色作为卡片显出来
var hasBoardPad = this._probeNum(['boardPadding']) !== null
|| this._probeNum(['boardPaddingTop']) !== null
|| this._probeNum(['boardPaddingBottom']) !== null
|| this._probeNum(['boardPaddingLeft']) !== null
|| this._probeNum(['boardPaddingRight']) !== null
|| this._probe(['containerPadding']) !== '';
if (!hasBoardPad) obj += 'padding:16rpx 12rpx;';
}
obj += this._radiusStyle(['containerBorderRadius', 'boardRadius', 'boardAngle', 'cardRadius', 'baseRadius', 'boardRound']);
obj += this._boxSpacingStyle('boardPadding', 'boardPaddingTop', 'boardPaddingBottom', 'boardPaddingLeft', 'boardPaddingRight');
// 后台"底板-内边距"真实字段 containerPadding 为带单位 shorthand(如 "27px 10px 31px")
obj += this._cssShorthand(['containerPadding', 'boardPaddingStr'], 'padding');
obj += this._boxSpacingStyle('boardMargin', 'boardMarginTop', 'boardMarginBottom', 'boardMarginLeft', 'boardMarginRight', 'margin');
// 后台"底板-外边距"真实字段 containerMargin 为带单位 shorthand(如 "0px")
obj += this._cssShorthand(['containerMargin', 'boardMarginStr'], 'margin');
// 后台"底板-四边样式"真实字段 containerBorder{Top,Right,Bottom,Left}{Show,Color,Width,Style}
obj += this._borderStyle('containerBorder');
return obj;
},
magnifierBg() {
return this._probe(['magnifierBgColor', 'searchIconBgColor', 'iconBgColor', 'magnifierBackground']) || '';
},
inputElStyle() {
var h = this._probeNum(['inputHeight', 'boxHeight', 'searchHeight', 'searchBoxHeight']);
return h !== null ? { height: (h * 2) + 'rpx' } : {};
},
placeholderStyle() {
var obj = '';
if (this.value.textColor) {
@@ -192,6 +265,93 @@ export default {
this.setModuleLocationFn();
},
methods: {
// —— 后台字段名探测(兼容多种命名 / 嵌套容器) ——
_norm(k) {
return String(k == null ? '' : k).toLowerCase().replace(/[_\-]/g, '');
},
// 在 value 自身及常见嵌套容器(style/config/setting/board/card/row/input/...)中按候选字段名探测,
// 命中即返回原值(含 transparent); 未命中返回 ''
_probe(candidates) {
var self = this;
var cands = candidates.map(function (c) { return self._norm(c); });
var v = this.value || {};
var sources = [v];
['style', 'config', 'setting', 'styleSetting', 'board', 'card', 'row', 'line', 'input', 'element', 'search', 'box', 'margin', 'padding']
.forEach(function (k) {
var o = v[k];
if (o && typeof o === 'object' && !Array.isArray(o)) sources.push(o);
});
for (var i = 0; i < sources.length; i++) {
var src = sources[i];
if (!src || typeof src !== 'object') continue;
var keys = Object.keys(src);
for (var j = 0; j < keys.length; j++) {
if (cands.indexOf(self._norm(keys[j])) !== -1) {
var val = src[keys[j]];
if (val !== undefined && val !== null && val !== '') return String(val);
}
}
}
return '';
},
_probeNum(candidates) {
var s = this._probe(candidates);
var n = parseFloat(s);
return isNaN(n) ? null : n;
},
// 后台带单位 shorthand 字段(如 "27px 10px 31px" / "0px"): 换算为 rpx(数值×2, 与组件内数值字段口径一致)后输出 prop:value;
// 未命中候选名返回 ''。无 px 单位的纯数字/其他单位原样透传
_cssShorthand(candidates, prop) {
var raw = this._probe(candidates);
if (raw === '') return '';
var s = String(raw).replace(/(-?\d+(?:\.\d+)?)px/g, function (m, n) {
return (parseFloat(n) * 2) + 'rpx';
});
return prop + ':' + s + ';';
},
// 后台四边独立边框字段: {prefix}{Top,Right,Bottom,Left}{Show,Color,Width,Style}
// Show 为 true/1 才输出该边; 输出格式 border-xxx: 宽(rpx×2) 线型 颜色
_borderStyle(prefix) {
var sides = ['top', 'right', 'bottom', 'left'];
var obj = '';
for (var i = 0; i < sides.length; i++) {
var s = sides[i];
var show = this._probe([prefix + s.charAt(0).toUpperCase() + s.slice(1) + 'Show']);
if (show === '' || show === 'false' || show === '0') continue;
var color = this._probe([prefix + s.charAt(0).toUpperCase() + s.slice(1) + 'Color']);
var width = this._probeNum([prefix + s.charAt(0).toUpperCase() + s.slice(1) + 'Width']);
var style = this._probe([prefix + s.charAt(0).toUpperCase() + s.slice(1) + 'Style']);
if (width === null && !color) continue;
obj += 'border-' + s + ':' + ((width === null ? 0 : width) * 2) + 'rpx ' + (style || 'solid') + ' ' + (color || 'transparent') + ';';
}
return obj;
},
// 圆角: round/circle/圆形 → 全圆角; 数值 → 半径(rpx×2)
_radiusStyle(cands) {
var raw = this._probe(cands);
if (raw === '') return '';
var lower = String(raw).toLowerCase();
if (['round', 'circle', '圆形'].indexOf(lower) !== -1) return 'border-radius:999rpx;';
var n = parseFloat(raw);
if (!isNaN(n)) return 'border-radius:' + (n * 2) + 'rpx;';
return '';
},
// 内/外边距: 单值字段 → 四边; 否则上下左右独立字段。kind 默认 padding
_boxSpacingStyle(single, top, bottom, left, right, kind) {
kind = kind || 'padding';
var singleV = this._probeNum([single]);
if (singleV !== null) return kind + ':' + (singleV * 2) + 'rpx;';
var s = '';
var t = this._probeNum([top]);
var b = this._probeNum([bottom]);
var l = this._probeNum([left]);
var r = this._probeNum([right]);
if (t !== null) s += kind + '-top:' + (t * 2) + 'rpx;';
if (b !== null) s += kind + '-bottom:' + (b * 2) + 'rpx;';
if (l !== null) s += kind + '-left:' + (l * 2) + 'rpx;';
if (r !== null) s += kind + '-right:' + (r * 2) + 'rpx;';
return s;
},
search() {
this.$util.redirectTo('/pages_tool/goods/search');
},
@@ -264,6 +424,11 @@ export default {
overflow: hidden;
}
.search-board {
width: 100%;
box-sizing: border-box;
}
.fixed {
position: fixed;
left: 0;

View File

@@ -5,15 +5,18 @@
<!-- 顶部标签位置:标签导航 + 指示器 + 内容区域 -->
<template v-if="mergedValue.tabPosition === 'top'">
<!-- 标签导航 -->
<view class="tab-nav" :style="[tabNavStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item"
:class="{ active: activeTab === idx }"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
{{ getTabTitle(tab.title) }}
</text>
<scroll-view class="tab-nav" :style="[tabNavStyle]" scroll-x
:scroll-into-view="scrollIntoId" :scroll-with-animation="true">
<view class="tab-nav-inner" :style="[tabNavInnerStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item"
:class="{ active: activeTab === idx }" :id="getNavItemId(idx)"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
{{ getTabTitle(tab.title) }}
</text>
</view>
</view>
</view>
</scroll-view>
<!-- 指示器 -->
<view v-if="mergedValue.showIndicator" class="tab-indicator" :style="[
@@ -74,30 +77,36 @@
]"></view>
<!-- 标签导航 -->
<view class="tab-nav" :style="[tabNavStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item"
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
{{ getTabTitle(tab.title) }}
</text>
</view>
</view>
</template>
<!-- 左侧标签位置:标签导航 + 指示器 + 内容区域 (水平布局) -->
<template v-else-if="mergedValue.tabPosition === 'left'">
<view class="tab-layout-horizontal">
<!-- 左侧标签导航 -->
<view class="tab-nav tab-nav-vertical" :style="[tabNavStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical"
<scroll-view class="tab-nav" :style="[tabNavStyle]" scroll-x
:scroll-into-view="scrollIntoId" :scroll-with-animation="true">
<view class="tab-nav-inner" :style="[tabNavInnerStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item"
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:id="getNavItemId(idx)"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
{{ getTabTitle(tab.title) }}
</text>
</view>
</view>
</scroll-view>
</template>
<!-- 左侧标签位置:标签导航 + 指示器 + 内容区域 (水平布局) -->
<template v-else-if="mergedValue.tabPosition === 'left'">
<view class="tab-layout-horizontal">
<!-- 左侧标签导航 -->
<scroll-view class="tab-nav tab-nav-vertical" :style="[tabNavStyle]" scroll-y
:scroll-into-view="scrollIntoId" :scroll-with-animation="true">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical"
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:id="getNavItemId(idx)"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
{{ getTabTitle(tab.title) }}
</text>
</view>
</scroll-view>
<!-- 左侧指示器 -->
<view v-if="mergedValue.showIndicator" class="tab-indicator tab-indicator-vertical" :style="[
@@ -161,15 +170,17 @@
]"></view>
<!-- 右侧标签导航 -->
<view class="tab-nav tab-nav-vertical" :style="[tabNavStyle]">
<scroll-view class="tab-nav tab-nav-vertical" :style="[tabNavStyle]" scroll-y
:scroll-into-view="scrollIntoId" :scroll-with-animation="true">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical"
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:id="getNavItemId(idx)"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
{{ getTabTitle(tab.title) }}
</text>
</view>
</view>
</scroll-view>
</view>
</template>
</view>
@@ -208,6 +219,7 @@ export default {
data() {
return {
activeTab: this.value?.activeTabIndex ?? 0, // 设置当前激活的标签索引
scrollIntoId: '', // scroll-view 滚动定位的导航项 id
indicatorVars: { // 指示器CSS变量
top: '',
left: '',
@@ -229,6 +241,8 @@ export default {
// 初始化指示器位置
this.$nextTick(() => {
this.updateIndicatorPosition();
// 初始化时将激活标签滚动到可视区域
this.syncScrollIntoId();
});
},
@@ -417,14 +431,6 @@ export default {
// 对于水平布局(顶部和底部),设置固定高度
if (this.mergedValue.tabPosition === 'top' || this.mergedValue.tabPosition === 'bottom') {
style.height = this.formatStyleValue(this.mergedValue.tabHeight, 24);
// 应用对齐方式
if (this.mergedValue.navAlign === 'start') {
style.justifyContent = 'flex-start';
} else if (this.mergedValue.navAlign === 'center') {
style.justifyContent = 'center';
} else if (this.mergedValue.navAlign === 'end') {
style.justifyContent = 'flex-end';
}
}
// 对于垂直布局(左侧和右侧),不设置固定高度,让它自适应内容
else {
@@ -451,6 +457,24 @@ export default {
return style;
},
// 导航栏内层容器样式(与后端版本一致)
tabNavInnerStyle() {
let style = {};
// 仅水平布局(顶部和底部)应用对齐方式
if (this.mergedValue.tabPosition === 'top' || this.mergedValue.tabPosition === 'bottom') {
if (this.mergedValue.navAlign === 'start') {
style.justifyContent = 'flex-start';
} else if (this.mergedValue.navAlign === 'center') {
style.justifyContent = 'center';
} else if (this.mergedValue.navAlign === 'end') {
style.justifyContent = 'flex-end';
}
}
return style;
},
// 标签项样式(与后端版本一致)
tabItemStyle() {
let style = {
@@ -601,9 +625,10 @@ export default {
// 监听器
watch: {
// 监听激活标签变化,更新指示器
// 监听激活标签变化,更新指示器并滚动导航
activeTab: {
handler() {
this.syncScrollIntoId();
this.$nextTick(() => {
this.updateIndicatorPosition();
});
@@ -724,6 +749,16 @@ export default {
getTabKey(tab, idx) {
return `tab-${tab?.id ?? idx}`;
},
// 获取导航项的 DOM id(用于 scroll-view 的 scroll-into-view 定位)
getNavItemId(idx) {
return `tab-nav-item-${idx}`;
},
// 将当前激活标签滚动到导航栏可视区域
syncScrollIntoId() {
this.$nextTick(() => {
this.scrollIntoId = this.getNavItemId(this.activeTab);
});
},
// 更新指示器位置(与后端版本一致)
updateIndicatorPosition() {
this.$nextTick(() => {
@@ -1034,8 +1069,6 @@ export default {
// ===== 标签导航栏样式 =====
.tab-nav {
display: flex;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid #e0e0e0;
overflow-x: auto;
@@ -1049,6 +1082,16 @@ export default {
}
}
// 导航栏内层容器:使用 inline-flex 让内容自然撑开宽度,保证小程序 scroll-view 可横向滚动
.tab-nav-inner {
display: inline-flex;
align-items: center;
width: max-content;
min-width: 100%;
height: 100%;
box-sizing: border-box;
}
// 垂直导航栏
.tab-nav-vertical {
flex-direction: column;
@@ -1068,6 +1111,7 @@ export default {
justify-content: center;
height: 100%;
user-select: none;
flex-shrink: 0; // 防止标签在 scroll-view 内被压缩,保证可完整展示并横向滑动
&.active {
color: var(--active-color, #339af0);

View File

@@ -54,17 +54,21 @@
<!-- 视频播放弹窗 -->
<uni-popup ref="videoPopup" type="center" style="background:transparent;width:100%;height:100%;">
<view class="video-container" :style="popupVideoStyle">
<video
<video
:key="video_url"
ref="popupVideoRef"
class="adaptive-video"
:autoPauseIfNavigate="true"
class="adaptive-video"
:autoPauseIfNavigate="true"
:autoPauseIfOpenNative="true"
:autoplay="false"
:enableAutoRotation="true"
id="myVideo"
:src="video_url"
:autoplay="false"
:enableAutoRotation="true"
id="myVideo"
:src="video_url"
:controls="true"
object-fit="contain"
playsinline
webkit-playsinline
x5-playsinline
@loadedmetadata="onPopupVideoLoaded"
@error="onPopupVideoError"
></video>
@@ -144,41 +148,21 @@ export default {
// 弹窗视频容器样式
popupVideoStyle() {
let style = 'position:fixed;width:100%;left:0;';
const defaultRatio = 9 / 16;
let ratio = defaultRatio;
if (this.popupVideoWidth && this.popupVideoHeight) {
ratio = this.popupVideoHeight / this.popupVideoWidth;
}
const isPortrait = ratio > 1;
if (isPortrait) {
style += 'top:50%;transform:translateY(-50%);';
} else {
style += 'top:20%;';
}
// #ifdef H5
style += 'padding-top: ' + (ratio * 100) + '%;';
// #endif
// #ifdef MP-WEIXIN
style += 'padding-top: ' + (ratio * 100) + '%;';
// #endif
// #ifdef MP-HARMONY
style += 'height: ' + (this.windowWidth * ratio) + 'px;';
// #endif
// 容器横向铺满,黑色背景填满左右边界
// 视频用 object-fit:contain 保持原比例居中,左右黑边由容器黑色背景填充
let style = 'position:fixed;width:100%;height:50vh;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:0;';
return style;
}
},
methods: {
// 显示视频播放弹窗
showVideo(item) {
this.video_url = item.videoUrl;
let url = item.videoUrl || '';
// 处理视频URL:完整链接直接使用,否则通过 $util.img() 转换
if (url && url.indexOf('http://') !== 0 && url.indexOf('https://') !== 0) {
url = this.$util.img(url);
}
this.video_url = url;
this.popupVideoWidth = 0;
this.popupVideoHeight = 0;
this.$refs.videoPopup.open();
@@ -625,22 +609,6 @@ export default {
left: 0;
}
/* #ifdef MP-WEIXIN */
.adaptive-video {
position: absolute;
top: 0;
left: 0;
}
/* #endif */
/* #ifdef MP-HARMONY */
.adaptive-video {
position: static;
display: block;
box-sizing: border-box;
}
/* #endif */
.video-nav {
padding: 16rpx;
box-sizing: border-box;

View File

@@ -11,6 +11,9 @@
:style="videoWarpCss"
controls
preload="metadata"
playsinline
webkit-playsinline
x5-playsinline
@loadedmetadata="onVideoLoaded"
@click="handlerClick(videoUrl)"
></video>
@@ -106,11 +109,11 @@ export default {
}
// #ifdef H5
style += 'padding-top: ' + (ratio * 100) + '%;';
style += 'height:0;padding-top: ' + (ratio * 100) + '%;';
// #endif
// #ifdef MP-WEIXIN
style += 'padding-top: ' + (ratio * 100) + '%;';
style += 'height:0;padding-top: ' + (ratio * 100) + '%;';
// #endif
// #ifdef MP-HARMONY

View File

@@ -0,0 +1,499 @@
<template>
<view data-component-name="diy-webview" class="diy-webview" :style="containerStyle" @tap="handleTap">
<template v-if="src">
<!-- #ifdef H5 -->
<iframe
v-if="!lazyPending"
class="diy-webview-iframe"
:src="src"
:scrolling="scrollMode"
referrerpolicy="no-referrer"
frameborder="0"
allow="fullscreen"
loading="lazy"
@load="handleIframeLoad"
@error="handleIframeError"
></iframe>
<!-- 后台配置的占位图 / 懒加载未进入视口时的展示 -->
<image
v-if="placeholderUrl && (lazyPending || !loaded)"
class="diy-webview-placeholder"
:src="placeholderUrl"
mode="aspectFill"
></image>
<!-- 加载中遮罩:iframe 触发 load 前展示,避免白屏观感 -->
<view v-if="!loaded && !loadError && !lazyPending" class="webview-loading" :style="errorStyle">
<view class="webview-loading-spinner"></view>
<text class="webview-loading-text">网页加载中...</text>
</view>
<!-- H5 下 iframe 内部点击不会冒泡到父容器,提供角标按钮保证"点击跳转"可用 -->
<view class="webview-open-chip" @tap.stop="mpGo">
<text class="iconfont icon-fuzhilianjie"></text>
<text class="webview-open-chip-text">{{ mpGoText }}</text>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- 小程序/APP:内嵌 web-view 会整页覆盖原生层,改为卡片展示 + 点击跳转 -->
<view class='webview-mp-go' :style='mpGoStyle' @tap.stop='mpGo'>
<text class='iconfont icon-fuzhilianjie'></text>
<text class='webview-mp-go-text'>{{ mpGoText }}</text>
</view>
<!-- #endif -->
<!-- 加载失败兜底(如目标站禁止被嵌入/内核过旧加载失败):可点击直接打开 -->
<view v-if="loadError" class="webview-error" :style="errorStyle" @tap.stop="mpGo">
<text class="iconfont icon-fuzhilianjie"></text>
<text class="error-text">{{ errorText }}</text>
<text class="error-open">点击此处打开网页</text>
</view>
</template>
<view v-else class="webview-empty" :style="emptyStyle">
<text class="iconfont icon-fuzhilianjie"></text>
<text class="empty-text">请配置网页链接</text>
</view>
</view>
</template>
<script>
// 网页/WebView 组件:后台配置 URL 后嵌入展示,H5 使用 iframe,小程序/APP 使用原生 web-view
import DiyMinx from './minx.js'
export default {
name: 'diy-webview',
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
src: '',
loaded: false,
loadError: false,
// 后台开启"懒加载"时,iframe 需等容器滚动进入视口后才真正渲染
lazyPending: false
};
},
mixins: [DiyMinx],
created() {
this.initWebview();
},
mounted() {
this._mountedFlag = true;
// #ifdef H5
if (this.lazyPending) this._setupLazyObserver();
// #endif
},
beforeDestroy() {
if (this._observer) {
try { this._observer.disconnect(); } catch (e) {}
this._observer = null;
}
this._clearLoadTimer();
},
watch: {
value: {
immediate: true,
deep: true,
handler(newVal) {
if (newVal) {
this.initWebview();
}
}
}
},
computed: {
containerStyle() {
let style = '';
// 后台高度为 px 值,与项目其他组件一致 ×2 转 rpx(diy-horz-blank 同款换算)
const height = Number(this.value?.height) || 300;
style += `height:${height * 2}rpx;`;
// 组件角度 round 时按后台圆角值渲染(×2 rpx)
if (this.value?.componentAngle === 'round') {
const topR = Number(this.value?.topAroundRadius) || 0;
const bottomR = Number(this.value?.bottomAroundRadius) || 0;
style += `border-radius:${topR * 2}rpx ${topR * 2}rpx ${bottomR * 2}rpx ${bottomR * 2}rpx;`;
}
if (this.value?.bgColor) {
style += `background:${this.value.bgColor};`;
}
if (this.value?.marginTop) {
style += `margin-top:${this.value.marginTop}rpx;`;
}
if (this.value?.marginBottom) {
style += `margin-bottom:${this.value.marginBottom}rpx;`;
}
if (this.value?.padding) {
style += `padding:${this.value.padding}rpx;`;
}
return style;
},
emptyStyle() {
let style = '';
if (this.value?.bgColor) {
style += `background:${this.value.bgColor};`;
}
return style;
},
errorStyle() {
let style = '';
if (this.value?.bgColor) {
style += `background:${this.value.bgColor};`;
}
return style;
},
mpGoText() {
// 注意:this.$lang(key) 在 key 不存在时返回 key 字符串本身,不能仅靠 this.$lang 是否存在判断。
// 取到 key 与传入 key 不同才视为命中语言包,否则用 fallback。
const t = this.$lang && this.$lang('components-diy.diy-webview.mpGo');
return (t && t !== 'components-diy.diy-webview.mpGo') ? t : '点击查看网页内容';
},
mpGoStyle() {
let style = '';
if (this.value && this.value.bgColor) {
style += 'background:' + this.value.bgColor + ';';
}
return style;
},
errorText() {
const t = this.$lang && this.$lang('components-diy.diy-webview.loadError');
return (t && t !== 'components-diy.diy-webview.loadError') ? t : '网页加载失败,请检查链接';
},
// iframe 滚动条开关(后台"滚动"配置:true 显示 / false 隐藏)
scrollMode() {
const s = this.value?.scrolling;
return (s === false || s === 'false' || s === 0) ? 'no' : 'yes';
},
// 占位图(后台 imageUrl,iframe 加载完成前展示)
placeholderUrl() {
const url = this.value?.imageUrl;
return url ? (this.$util.img ? this.$util.img(url) : url) : '';
}
},
methods: {
initWebview() {
const config = this.value || {};
this.loadError = false;
this.loaded = false;
// 调试用:把后台下发的完整 value 对象打印到控制台,方便定位 URL 字段名
console.log('[diy-webview] value:', JSON.stringify(config));
// 兼容后台可能使用的多种链接字段名/嵌套结构
const url = this.extractUrl(config);
// 懒加载:开启时等容器进入视口再渲染 iframe
this.lazyPending = !!(config.lazyRender || config.lazyLoad);
// #ifdef H5
// 数据热更新时(后台重新保存)若尚未进入过视口,需重建观察器(仅在挂载后才可建立)
if (this.lazyPending && this._mountedFlag) this._setupLazyObserver();
// #endif
// 优先使用后台直接下发的 url;若配置的是接口来源(source=api),则通过接口拉取
if (config.source === 'api' && config.apiUrl) {
this.loadUrlFromApi(config.apiUrl);
} else if (url) {
this.src = this.buildSrc(url);
console.log('[diy-webview] src:', this.src);
this._startLoadTimer();
} else {
this.src = '';
console.warn('[diy-webview] 未找到有效链接字段');
}
},
// 在格式化后的 URL 基础上,拼接后台配置的"附加参数"与"携带登录态"(token / member_id)
buildSrc(url) {
let src = this.formatUrl(url);
const config = this.value || {};
const extra = [];
// 附加参数(后台 urlParams 字段,格式 "a=1&b=2",多组参数用 & 连接)
const rawExtra = config.urlParams || config.extraParams || config.appendParams || config.additionalParams || config.params;
if (rawExtra && typeof rawExtra === 'string') {
extra.push(rawExtra.replace(/^[?&]+/, ''));
}
// 携带登录态(后台 carryToken 字段:none 不携带 / token / member_id)
const loginState = config.carryToken || config.loginState || config.login_state;
if (loginState === 'token') {
const token = (this.$store && this.$store.state && this.$store.state.token) || '';
if (token) extra.push('token=' + encodeURIComponent(token));
} else if (loginState === 'member_id') {
const memberInfo = (this.$store && this.$store.state && this.$store.state.memberInfo) || {};
const memberId = memberInfo.member_id || memberInfo.memberId || '';
if (memberId) extra.push('member_id=' + memberId);
}
if (extra.length) {
src += (src.indexOf('?') !== -1 ? '&' : '?') + extra.filter(Boolean).join('&');
}
return src;
},
// #ifdef H5
// 懒加载:容器滚动进入视口(含预加载缓冲 200px)后才渲染 iframe
_setupLazyObserver() {
try {
if (this._observer) {
this._observer.disconnect();
this._observer = null;
}
this._observer = uni.createIntersectionObserver(this, { thresholds: [0] });
this._observer.relativeToViewport({ bottom: 200 }).observe('.diy-webview', () => {
this.lazyPending = false;
if (this._observer) {
this._observer.disconnect();
this._observer = null;
}
});
} catch (e) {
// 观察器异常时直接渲染,避免内容永远空白
this.lazyPending = false;
}
},
// #endif
extractUrl(config) {
if (!config || typeof config !== 'object') return '';
// 优先读取常见字段名(兼容后台不同命名习惯)
let direct = config.url || config.link || config.linkUrl || config.pageUrl || config.webUrl || config.web_url || config.externalUrl || config.targetUrl || config.src || config.href || config.path || config.address;
// 兼容装修链接选择器下发的对象形态:link = { wap_url / url / h5_url ... }
if (direct && typeof direct === 'object') {
direct = direct.wap_url || direct.h5_url || direct.url || direct.app_url || direct.link || '';
}
if (direct && typeof direct === 'string') return direct.trim();
// 兼容嵌套结构:如 value.value.url / value.config.url / value.data.url
for (const key of ['value', 'config', 'data', 'content', 'params']) {
if (config[key] && typeof config[key] === 'object') {
const nested = this.extractUrl(config[key]);
if (nested) return nested;
}
}
return '';
},
formatUrl(url) {
if (!url || typeof url !== 'string') return '';
let formatted = url.trim();
// 如果后台把 URL 编码存储,做一次解码
if (formatted.indexOf('%') !== -1) {
try { formatted = decodeURIComponent(formatted); } catch (e) {}
}
// 支持以 http:// 或 https:// 开头的完整地址
if (/^https?:\/\//i.test(formatted)) return formatted;
// 支持相对路径或站点内链接,自动补全
return this.$util.img ? this.$util.img(formatted) : formatted;
},
loadUrlFromApi(apiUrl) {
this.$api.sendRequest({
url: apiUrl,
success: res => {
if (res.code == 0 && res.data) {
const data = typeof res.data === 'string' ? { url: res.data } : res.data;
this.src = this.formatUrl(data.url || data.link || '');
}
},
fail: () => {
this.src = '';
}
});
},
updateNavbarTitle(e) {
// 参照 pages-tool/webview.vue:当 web-view 页面标题更新时,可同步设置导航栏标题
const title = e?.detail?.title || e?.title || '';
if (title) {
uni.setNavigationBarTitle({ title });
}
this.$emit('titleUpdate', e);
},
// 点击网页容器整体 → 跳转到配置的链接(走统一 diyRedirectTo,外链自动进 web-view / 新窗口)
handleTap() {
if (this.src) this.mpGo();
},
mpGo() {
if (!this.src) return;
if (this.$util && this.$util.diyRedirectTo) {
this.$util.diyRedirectTo({
wap_url: this.src,
title: (this.value && this.value.title) || (this.value && this.value.name) || '网页',
name: (this.value && this.value.name) ? this.value.name : '网页'
});
} else {
uni.navigateTo({ url: '/pages_tool/webview/webview?src=' + encodeURIComponent(this.src) });
}
},
// 注意:方法名不能叫 onLoad/onError —— uni-app 会把组件里的 onLoad 当页面
// 生命周期提升出 methods,导致 @load="onLoad" 渲染时报 handler undefined。
handleIframeLoad(e) {
this.loaded = true;
this.loadError = false;
this._clearLoadTimer();
this.$emit('load', e);
},
handleIframeError(e) {
this.loadError = true;
this.loaded = true;
this._clearLoadTimer();
console.error('[diy-webview] 加载失败:', this.src, e);
this.$emit('error', e);
},
// 加载超时兜底:部分浏览器内核(如 HBuilderX 内置浏览器的老 CEF 内核)对跨域 iframe
// 请求失败时不会触发 error 事件,用定时器兜住,避免容器一直白屏
_startLoadTimer() {
this._clearLoadTimer();
// #ifdef H5
this._loadTimer = setTimeout(() => {
if (!this.loaded) {
this.loadError = true;
console.warn('[diy-webview] 加载超时(10s),显示兜底内容:', this.src);
}
}, 10000);
// #endif
},
_clearLoadTimer() {
if (this._loadTimer) {
clearTimeout(this._loadTimer);
this._loadTimer = null;
}
},
onMessage(e) {
// 接收 web-view / iframe 发来的消息,可用于与后台数据交互
this.$emit('message', e);
// 同时通过事件总线广播,方便页面级监听
this.__$emitEvent({
eventName: 'diy-webview-message',
data: {
componentName: this.value?.componentName,
moduleIndex: this.value?.moduleIndex,
message: e?.detail?.data || e?.data
}
});
}
}
};
</script>
<style lang="scss">
.diy-webview {
width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
.diy-webview-iframe,
.diy-webview-native {
width: 100%;
height: 100%;
display: block;
border: none;
}
/* 占位图 / 懒加载未进入视口时的展示 */
.diy-webview-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* H5 角标跳转按钮:iframe 内部点击不冒泡,用它兜底"点击跳转" */
.webview-open-chip {
position: absolute;
right: 16rpx;
bottom: 16rpx;
z-index: 3;
display: flex;
align-items: center;
padding: 8rpx 20rpx;
border-radius: 999rpx;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 22rpx;
line-height: 1;
.iconfont {
font-size: 24rpx;
margin-right: 6rpx;
}
}
/* 加载中遮罩 */
.webview-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f7f8fa;
color: #999;
font-size: 24rpx;
}
.webview-loading-spinner {
width: 44rpx;
height: 44rpx;
border: 4rpx solid #e5e6eb;
border-top-color: #576b95;
border-radius: 50%;
margin-bottom: 16rpx;
animation: webview-spin 0.8s linear infinite;
}
@keyframes webview-spin {
to {
transform: rotate(360deg);
}
}
.webview-empty,
.webview-mp-go {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f5f5f5;
color: #576B95;
font-size: 26rpx;
.iconfont {
font-size: 48rpx;
margin-bottom: 12rpx;
}
}
.webview-error {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f5f5f5;
color: #999;
font-size: 26rpx;
.iconfont {
font-size: 48rpx;
margin-bottom: 12rpx;
}
}
.webview-error {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: rgba(255, 255, 255, 0.96);
color: #ff6b35;
.error-open {
margin-top: 16rpx;
font-size: 24rpx;
color: #576b95;
text-decoration: underline;
}
}
}
</style>

View File

@@ -1,5 +1,56 @@
export default {
methods: {
/**
* 读取后台装修下发的布尔开关
* 依次取 names 中的字段, 兼容 1/0、"1"/"0"、true/false、"true"/"false" 等值类型
* 命中返回 true/false; 所有字段都未下发时返回 undefined (由调用方决定兜底)
*
* 匹配顺序:
* 1. 精确命中 (showAddCart / show_add_cart ...)
* 2. 忽略大小写、下划线、中划线、空格的差异 (showaddcart === showAddCart === show_add_cart)
* —— 后台实际字段名与前端约定写法不一致时, 这一步兜底
* 3. 常见嵌套容器 (value.style / value.config / value.setting / value.data)
*/
getDiyToggle(names) {
const v = this.value || {};
const parse = val => {
if (val === undefined || val === null || val === '') return undefined;
if (val === true || val === 1 || val === '1' || val === 'true') return true;
if (val === false || val === 0 || val === '0' || val === 'false') return false;
return !!val;
};
const pick = obj => {
if (!obj || typeof obj != 'object') return undefined;
// 1. 精确命中
let i, res;
for (i = 0; i < names.length; i++) {
res = parse(obj[names[i]]);
if (res !== undefined) return res;
}
// 2. 忽略大小写/下划线等差异
const norm = k => String(k).toLowerCase().replace(/[\s_-]/g, '');
const wanted = names.map(norm);
for (const key in obj) {
if (wanted.indexOf(norm(key)) != -1) {
res = parse(obj[key]);
if (res !== undefined) return res;
}
}
return undefined;
};
const root = pick(v);
if (root !== undefined) return root;
// 3. 嵌套容器兜底
const containers = ['style', 'config', 'setting', 'data'];
for (let i = 0; i < containers.length; i++) {
const res = pick(v[containers[i]]);
if (res !== undefined) return res;
}
return undefined;
},
// 异步触发事件
async __$emitEvent(payload = {eventName: '__unnamedEvent', data: {}, promiseCallback: null}) {
await this.$eventBus.emit(payload.eventName, payload.data, payload.promiseCallback)
@@ -18,4 +69,4 @@ export default {
// #endif
},
}
}
}

View File

@@ -1,7 +1,7 @@
<template>
<!-- Vue 2 / uni-app 单根约束:用 view 包一层 -->
<view>
<view v-if="pageCount === 1 || need" class="fixed-box"
<view v-if="(pageCount === 1 || need) && fbVisible && hasAnyButton" class="fixed-box"
:style="[customContainerStyle, {
height: containerHeight,
bottom: containerBottom,
@@ -11,18 +11,18 @@
}]">
<!-- 多语言切换按钮:根据语言数智能切换交互 -->
<view
v-if="isLanguageSwitchEnabled && fixBtnShow"
v-if="isLanguageSwitchEnabled && hasLangButton"
class="btn-item common-bg"
:style="btnItemStyle"
:style="[btnItemStyle, { order: orderIndex.lang }, perBtnStyle.lang]"
@click="handleLangButtonClick"
>
<view class="lang-btn-text">{{ currentLangDisplayName }}</view>
<view class="lang-btn-text">{{ langButtonText }}</view>
</view>
<!-- 微信官方客服按钮-->
<button
v-if="fixBtnShow && hasValidKefuConfig && isWeappOfficialKefu"
v-if="hasKefuButton && hasValidKefuConfig && isWeappOfficialKefu"
class="btn-item common-bg"
:style="btnItemStyle"
:style="[btnItemStyle, { order: orderIndex.kefu }, perBtnStyle.kefu]"
open-type="contact"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
@@ -30,9 +30,9 @@
<!-- 其他类型客服按钮(智能客服、企业微信等)-->
<view
v-if="fixBtnShow && hasValidKefuConfig && !isWeappOfficialKefu && !showWeappSystemKefu"
v-if="hasKefuButton && hasValidKefuConfig && !isWeappOfficialKefu && !showWeappSystemKefu"
class="btn-item common-bg"
:style="btnItemStyle"
:style="[btnItemStyle, { order: orderIndex.kefu }, perBtnStyle.kefu]"
@click="handleUnifiedKefuClick"
>
<image
@@ -48,9 +48,9 @@
<!-- 智能客服按钮(当同时显示小程序系统客服时)-->
<view
v-if="fixBtnShow && hasValidKefuConfig && !isWeappOfficialKefu && showWeappSystemKefu"
v-if="hasKefuButton && hasValidKefuConfig && !isWeappOfficialKefu && showWeappSystemKefu"
class="btn-item common-bg"
:style="btnItemStyle"
:style="[btnItemStyle, { order: orderIndex.kefu }, perBtnStyle.kefu]"
@click="handleUnifiedKefuClick"
>
<image
@@ -66,9 +66,9 @@
<!-- 小程序系统客服按钮 -->
<button
v-if="fixBtnShow && hasValidKefuConfig && showWeappSystemKefu"
v-if="hasKefuButton && hasValidKefuConfig && showWeappSystemKefu"
class="btn-item common-bg"
:style="btnItemStyle"
:style="[btnItemStyle, { order: orderIndex.kefu }, perBtnStyle.kefu]"
open-type="contact"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
@@ -76,9 +76,9 @@
<!-- 电话按钮 -->
<view
v-if="fixBtnShow"
v-if="hasPhoneButton"
class="btn-item common-bg"
:style="[btnItemStyle, { backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
:style="[btnItemStyle, { order: orderIndex.phone }, { backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle, perBtnStyle.phone]"
@click="call"
>
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
@@ -109,6 +109,10 @@
<script>
import { createCustomerService } from '@/common/js/customer-service.js';
import i18nLazyMixin from '@/common/mixin/i18n-lazy.js';
import {
getCurrentRoute, shouldShowOnPage, resolveVisibleButtons,
resolveLangButtonText, isLangButtonVisible,
} from '@/common/js/floating-button.js';
// 语言短码映射表(currentLangDisplayName 展示用,可按需扩展)
// key: 语言 value,value: 显示短码(按钮上展示)
@@ -170,7 +174,11 @@ export default {
data() {
return {
pageCount: 0,
fixBtnShow: true,
currentRoute: '', // 当前页面路由(onShow / created 时刷新, 供页面范围判定)
// 每个按钮的专属样式(来源: 主题 token hover_nav_{key}_bg_color/_text_color/_size,
// 由 _parsePerButtonStyle 从 themeColor 的 CSS 变量串解析, 全平台可用)
// key: lang/kefu/phone, value: { backgroundColor?, color?, width?... } , 空 = 走全局 token
perBtnStyle: { lang: {}, kefu: {}, phone: {} },
shopInfo: null,
currentLangIndex: 0,
langIndexMap: {},
@@ -237,6 +245,57 @@ export default {
customButtonStyle() {
return this.shopInfo?.floatingButton?.button || {};
},
// ============================================================
// 浮动侧边栏配置消费 (来源: /api/config/init → data.floating_button,
// store/index.js 的 floatingButtonConfig, 初始 state 已声明 → 响应式)
// fbConfig 为 null (老缓存响应缺字段) 时, 各判定全部走老行为兜底。
// ============================================================
// 接口下发的浮动侧边栏配置 (老缓存响应 → null)
fbConfig() {
return (this.$store && this.$store.state && this.$store.state.floatingButtonConfig) || null;
},
// 总开关 + 强制隐藏 + 页面范围 判定结果
fbVisible() {
return shouldShowOnPage(this.fbConfig, this.currentRoute, true);
},
// 最终要渲染的按钮 (已按 button_order 排序 + 显隐过滤); null = 用老行为
visibleButtons() {
return resolveVisibleButtons(this.fbConfig);
},
hasAnyButton() {
const b = this.visibleButtons;
return b ? b.length > 0 : true; // 老行为: 电话按钮恒显
},
hasLangButton() {
const b = this.visibleButtons;
return b ? b.indexOf('lang') !== -1
: isLangButtonVisible(this.fbConfig, this.shopInfo, this.langList.length);
},
hasKefuButton() {
const b = this.visibleButtons;
return b ? b.indexOf('kefu') !== -1 : true;
},
hasPhoneButton() {
const b = this.visibleButtons;
return b ? b.indexOf('phone') !== -1 : true;
},
// 语言按钮文案: 商家可配「目标语言 / 当前语言 / 固定文案」。
// 配置缺失时回退老行为 currentLangDisplayName(展示当前语言)。
langButtonText() {
if (!this.fbConfig) return this.currentLangDisplayName;
return resolveLangButtonText(this.fbConfig, this.langList, this.currentLangIndex);
},
// 按钮渲染顺序 (button_order 自上而下); .fixed-box 是 flex-direction: column,
// 用 CSS order 控制三段(语言/客服/电话)的先后, 配置缺失时退回老顺序。
orderIndex() {
const order = (this.fbConfig && Array.isArray(this.fbConfig.button_order))
? this.fbConfig.button_order
: ['lang', 'kefu', 'phone'];
const map = {};
for (let i = 0; i < order.length; i++) map[order[i]] = i + 1;
map.lang = map.lang || 1; map.kefu = map.kefu || 2; map.phone = map.phone || 3;
return map;
},
// 所有 .btn-item 的 inline-style 兜底:
// 1) 测试发现 .btn-item 的 min-*/max-*/aspect-ratio/flex-shrink 等 !important
// 规则在 scoped 样式下,被某些 flex 布局的隐式约束吃掉,只 width/height/border-radius
@@ -301,19 +360,33 @@ export default {
// 每个按钮槽位:72rpx(按钮,与 to-top 一致) + 14rpx(上 margin) + 14rpx(下 margin) = 100rpx
// 容器 padding:20rpx 上 + 20rpx 下 = 40rpx
// 总高度 (rpx):buttonCount × 100 + 40
// 修复:改返回 rpx 而非 px(原 *0.5 硬编码 iPhone 6 375px 转换比),
// 在微信小程序/其他设备(iPhone 13 390px、iPad 等)下由 uni-app 框架
// 按 windowWidth 动态换算,避免 4+ 按钮时容器偏小导致内容被裁切
// 关联:按钮尺寸与 to-top 同步(72rpx),所以槽位高度也是 100rpx;
// 之前按钮 80rpx 时槽位 108rpx,改为 72rpx 后槽位缩小 8rpx,容器整体更紧凑
// 新配置生效时按 visibleButtons 的实际按钮数算,避免隐藏按钮后留下空白档;
// 全部按钮被关掉时返回 0rpx(根节点 v-if 已含 hasAnyButton, 这里是双保险);
// 配置缺失(fbConfig 为 null)时保持老行为: 电话恒显 + 可选语言 + 可选系统客服。
// extraKefuSlot: 小程序系统客服与客服主按钮并存时模板会多渲染一个按钮,
// 需要为它多留一个槽位(fallback 分支与老逻辑等价)。
containerHeight() {
if (!this.fixBtnShow) return '320rpx';
const b = this.visibleButtons;
if (b && b.length === 0) return '0rpx';
let buttonCount = 1;
if (this.isLanguageSwitchEnabled) buttonCount++;
if (this.showWeappSystemKefu) buttonCount++;
buttonCount++;
const totalRpx = buttonCount * 100 + 40;
// 汇总实际渲染的按钮列表 (b 存在 = 新配置; null = 老行为兜底, 与旧计数等价)
const rendered = [];
if (b) {
for (let i = 0; i < b.length; i++) rendered.push(b[i]);
} else {
if (this.isLanguageSwitchEnabled) rendered.push('lang');
rendered.push('kefu');
if (this.showWeappSystemKefu) rendered.push('kefu');
rendered.push('phone');
}
// 槽位高度按每个按钮的实际尺寸算(72rpx 默认 + 28rpx 上下 margin),
// token 单独调大某个按钮时容器高度自动跟随, 不出现裁切/空白
let slotsRpx = 0;
for (let i = 0; i < rendered.length; i++) {
slotsRpx += this.btnSizeRpx(rendered[i]) + 28;
}
const totalRpx = slotsRpx + 40;
return `${totalRpx}rpx`;
},
@@ -337,7 +410,6 @@ export default {
// 与 Top 按钮的 .mescroll-totop { margin-bottom: var(--window-bottom) } 一致,
// 两者会被安全区同步上推,space 保持不变
containerBottom() {
if (!this.fixBtnShow) return '240rpx';
let space = 18 * 5;
// #ifdef MP-WEIXIN
space = 18 * 1;
@@ -357,7 +429,6 @@ export default {
// - right edge 对齐(46rpx):左侧突出 28rpx,中心错位 14rpx
// center 对齐不仅中心精准,突出量也更小
containerRight() {
if (!this.fixBtnShow) return '0rpx';
const offset = this.layoutTopRight + this.layoutTopSize / 2 - this.layoutFloatingWidth / 2;
return `${offset}rpx`;
},
@@ -420,9 +491,14 @@ export default {
}
}
},
// 页面生命周期: hover-nav 是常驻组件, 路由变化必须靠 onShow 通知,
// 否则 currentRoute 停留在首次加载页, 页面范围判定(fbVisible)会失效。
onShow() {
this.refreshRoute();
},
created() {
this.initLanguage();
this.pageCount = getCurrentPages().length;
this.refreshRoute();
// 三源兜底(store / 同步 storage / 异步 storage),
// 任何一个先就绪就先使用,后续由 initStatus watcher 再次同步
@@ -523,6 +599,11 @@ export default {
// #endif
},
methods: {
// 刷新当前路由与页面栈深度(供 fbVisible 的页面范围判定 / pageCount 老判定)
refreshRoute() {
this.currentRoute = getCurrentRoute();
this.pageCount = getCurrentPages().length;
},
// #ifdef H5
/**
* 从 :root 读取 CSS 变量(App.vue 中定义)到 data,
@@ -560,6 +641,9 @@ export default {
* 内部会去重,不会频繁触发)。
*/
_applyThemeColor(tc) {
// 0) 解析每个按钮的专属 token (颜色/尺寸) — 必须放在 $el 早退之前,
// 小程序端 $el 可能不可用, 但 inline-style 解析不依赖 DOM, 全平台都要执行
this._parsePerButtonStyle(tc);
if (!this.$el || !this.$el.style) return;
// 1) 剥离旧注入(避免重复 + 处理主题切换场景)
if (this._appliedThemeColor) {
@@ -576,6 +660,63 @@ export default {
this.$el.style.cssText = (this.$el.style.cssText || '') + ';' + tc;
}
},
/**
* 从 themeColor 的 CSS 变量串(--xxx:value;...)中解析每个悬浮按钮的专属 token:
* --hover-nav-{key}-bg-color → backgroundColor
* --hover-nav-{key}-text-color → color
* --hover-nav-{key}-size → width/height/min-max 等尺寸属性
* key ∈ lang / kefu / phone; token 未配置(或空值被 sanitize 剔除)时对应样式为空,
* CSS/inline 回退到全局 hover_nav_bg_color / hover_nav_text_color / 72rpx。
*/
_parsePerButtonStyle(tc) {
const result = { lang: {}, kefu: {}, phone: {} };
if (tc && typeof tc === 'string') {
const pick = (name) => {
const m = tc.match(new RegExp('--hover-nav-' + name + '\\s*:\\s*([^;]+);'));
return m ? m[1].trim() : '';
};
for (const key of ['lang', 'kefu', 'phone']) {
const s = {};
const bg = pick(key + '-bg-color');
const text = pick(key + '-text-color');
const size = pick(key + '-size');
if (bg) s.backgroundColor = bg;
if (text) s.color = text;
if (size) {
s.width = size;
s.height = size;
s['min-width'] = size;
s['min-height'] = size;
s['max-width'] = size;
s['max-height'] = size;
}
result[key] = s;
}
}
this.perBtnStyle = result;
},
/**
* 取某个按钮当前的尺寸数值(rpx 基准, 供容器高度计算)。
* token 值可能是 rpx(小程序/H5 主题串原样)或 px(H5 端 themeColorSet 已把 rpx 换算成 px),
* px 时按 windowWidth 折算回 rpx; 无 token 时回退默认 72rpx。
*/
btnSizeRpx(key) {
const s = this.perBtnStyle && this.perBtnStyle[key];
const v = s && s.width;
if (!v) return 72;
const m = String(v).match(/^([\d.]+)\s*(rpx|px)?$/i);
if (!m) return 72;
let n = parseFloat(m[1]);
if ((m[2] || 'rpx').toLowerCase() === 'px') {
try {
const w = (uni.getSystemInfoSync() || {}).windowWidth;
if (w) n = n * 750 / w;
} catch (e) { /* 保持原值 */ }
}
return n;
},
initLanguage() {
// 数据源优先级:
// 1) shopInfo.langList(后端按租户/店铺动态下发的语言配置,推荐)
@@ -743,7 +884,53 @@ export default {
this.$langConfig.change(targetLang, url);
},
/**
* 客服按钮点击的统一入口。
*
* 关键修复:智能客服(AI 客服)类型需要走 ai-chat 页面,
* 且必须在 URL 上注入 __dyu=FloatBtn 标记,
* 让 ai-chat/index.vue 的 onLoad(options) 识别"来自悬浮按钮/浮动按钮",
* commit setBottomNavHidden(true) 隐藏底部 tabBar。
*
* 为什么不在 customer-service.js#openAiChatService 统一注入:
* 该方法是通用 AI 客服入口,被多处复用(hover-nav / 商品详情页 / 会员中心 / DIY 浮动按钮等),
* 其中 DIY 浮动按钮(diy-float-btn.vue)已自行注入 __dyu=FloatBtn;其他入口(商品详情页等)
* 是否要隐藏 tabBar 是另一个独立的产品决策,不能在此一刀切。
* 因此由调用方按需注入:本方法(hover-nav)显式注入,diy-float-btn 显式注入,
* 其他入口保持原样。
*
* 与 diy-float-btn.vue#onFloatBtnClick 的行为完全一致,只是触发位置不同。
*/
handleUnifiedKefuClick() {
// 仅智能客服(aikefu)类型需要走 ai-chat 页面并隐藏 tabBar;
// 其他类型(企业微信 / 第三方 / 小程序原生客服等)由 customerService 内部
// 路由到对应渠道(navigateToMiniProgram / openCustomerServiceChat 等),
// 与底部 tabBar 无关,继续走原统一入口。
if (this.customerService && this.customerService.isAIKefu && this.customerService.isAIKefu()) {
// 清除未读数(与 openAiChatService 行为保持一致)
if (typeof this.setAiUnreadCount === 'function') {
this.setAiUnreadCount(0);
} else if (this.$store && typeof this.$store.commit === 'function') {
try { this.$store.commit('setAiUnreadCount', 0); } catch (e) { /* 兼容旧 store */ }
}
// 注入 __dyu=FloatBtn 标记,与 diy-float-btn.vue#onFloatBtnClick 语义一致
const aiChatUrl = `${this.$util.PAGE_KEY_MAP.PAGE_AI_CHAT}?__dyu=FloatBtn`;
uni.navigateTo({
url: aiChatUrl,
fail: (err) => {
console.error('[hover-nav] 跳转 AI智能客服失败:', err);
// H5 兜底
// #ifdef H5
window.location.href = aiChatUrl;
// #endif
uni.showToast({ title: this.$lang('customerService.openFailed'), icon: 'none' });
}
});
return;
}
// 非智能客服类型:走原统一入口(企业微信 / 第三方 / 微信原生客服 等)
this.customerService.handleUnifiedKefuClick({
sendMessageTitle: '来自悬浮按钮的咨询',
sendMessagePath: '/pages/index/index'

View File

@@ -42,82 +42,92 @@ export default {
};
</script>
<style lang="scss">
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading-layer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 997;
background: #f8f8f8;
}
.loading-anim {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
.loading-anim > .item {
position: relative;
width: 70rpx;
height: 70rpx;
perspective: 1600rpx;
transform-style: preserve-3d;
transition: all 0.2s ease-out;
}
.loading-anim .border {
position: absolute;
border-radius: 50%;
border: 6rpx solid;
}
.loading-anim .out {
top: 15%;
left: 15%;
width: 70%;
height: 70%;
// P0: 硬编码主色 → var(--base-color),主题切换时 loading 主色跟着变
// 兼容: 微信小程序 / 鸿蒙元服务 — border-color 接受 var() 值无问题
// JS 端 :style 绑定已用 themeStyle.main_color 走 inline 风格(原行 9),CSS 端用 var() 双保险
border-left-color: var(--base-color, #FF4646);
border-right-color: #C5C5C5 !important;
// border-right-color: rgba($color: #000000, $alpha: 0) !important;
border-top-color: var(--base-color, #FF4646);
border-bottom-color: #C5C5C5 !important;
// border-bottom-color: rgba($color: #000000, $alpha: 0) !important;
animation: spin 0.6s linear normal infinite;
}
.loading-anim .in {
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
animation: spin 0.8s linear infinite;
}
.loading-anim .mid {
top: 40%;
left: 40%;
width: 20%;
height: 20%;
border-left-color: transparent;
border-right-color: transparent;
animation: spin 0.6s linear infinite;
}
<style lang="scss">
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading-layer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 997;
background: #f8f8f8;
// 修复: 强制合成层, 让 spin 动画只在自身合成层跑, 不触发兄弟节点 (尤其是底部 TabBar) 重绘
// 兼容环境: 微信小程序 / 鸿蒙元服务 / H5 都受益
// - 微信小程序: spin 动画每帧导致兄弟 fixed 元素 TabBar 重绘
// - 鸿蒙元服务 JSVM: 同上, JSVM 重绘更明显
// - H5: will-change 提示浏览器持续合成
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
.loading-anim {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
.loading-anim > .item {
position: relative;
width: 70rpx;
height: 70rpx;
perspective: 1600rpx;
transform-style: preserve-3d;
transition: all 0.2s ease-out;
}
.loading-anim .border {
position: absolute;
border-radius: 50%;
border: 6rpx solid;
}
.loading-anim .out {
top: 15%;
left: 15%;
width: 70%;
height: 70%;
// P0: 硬编码主色 → var(--base-color),主题切换时 loading 主色跟着变
// 兼容: 微信小程序 / 鸿蒙元服务 — border-color 接受 var() 值无问题
// JS 端 :style 绑定已用 themeStyle.main_color 走 inline 风格(原行 9),CSS 端用 var() 双保险
border-left-color: var(--base-color, #FF4646);
border-right-color: #C5C5C5 !important;
// border-right-color: rgba($color: #000000, $alpha: 0) !important;
border-top-color: var(--base-color, #FF4646);
border-bottom-color: #C5C5C5 !important;
// border-bottom-color: rgba($color: #000000, $alpha: 0) !important;
animation: spin 0.6s linear normal infinite;
transform-origin: center center;
}
.loading-anim .in {
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
animation: spin 0.8s linear infinite;
transform-origin: center center;
}
.loading-anim .mid {
top: 40%;
left: 40%;
width: 20%;
height: 20%;
border-left-color: transparent;
animation: spin 0.6s linear infinite;
transform-origin: center center;
}
</style>

View File

@@ -1,58 +1,74 @@
<template>
<view class="form-wrap form-component">
<block v-for="(item, index) in formData">
<view class="order-wrap" v-if="item.controller == 'Text'">
<view class="order-cell">
<view class="name">
<view class="form-wrap form-component" :style="formWrapStyle">
<block v-for="(item, index) in formData" :key="index">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Text'">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<input type="text" :placeholder="item.value.placeholder" placeholder-class="placeholder color-tip" v-model="item.val" />
<input
type="text"
:placeholder="item.value.placeholder"
placeholder-class="placeholder color-tip"
v-model="item.val"
:style="inputStyle"
/>
</view>
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Textarea'">
<view class="order-cell flex-box textarea">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Textarea'">
<view class="order-cell flex-box textarea" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<textarea :placeholder="item.value.placeholder" placeholder-class="placeholder color-tip" v-model="item.val"></textarea>
<!-- 所有平台统一通过 formConfig.textareaRows / item.value.rows 控制显示行数:
- H5 / 微信:原生 textarea 识别 :rows 属性,可视高度 = rows × line-height(CSS 控制 line-height);
- 鸿蒙:渲染为原生 ArkUI TextArea,CSS height 不生效,必须靠 :rows 控制。
行数和行高全部由 formConfig 动态下发,不再硬编码 176rpx / row=2。 -->
<textarea
:rows="item.value.rows || textareaRowsValue"
:placeholder="item.value.placeholder"
placeholder-class="placeholder color-tip"
v-model="item.val"
:style="textareaStyle"
></textarea>
</view>
</view>
</view>
<picker mode="selector" :range="item.value.options" v-if="item.controller == 'Select'" @change="pickerChange($event, index)">
<view class="order-wrap">
<view class="order-cell">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<view :class="['box', 'box-flex']">
<text v-if="item.val != ''">{{ item.val }}</text>
<text v-else class="color-tip">{{ $lang('components.nsForm.selectPlaceholder') }}</text>
<text class="iconfont icon-right"></text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
</picker>
<view class="order-wrap" v-if="item.controller == 'Checkbox'">
<view class="order-cell">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Checkbox'">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box check-group-box">
<checkbox-group @change="checkboxChange($event, index)">
<view :class="['box', 'check-group-box', 'option-layout-' + (item.value.option_layout || 'wrap')]">
<checkbox-group @change="checkboxChange($event, index)" :style="item._optionLayoutStyle">
<label v-for="(v, k) in item.option_lists" :key="k">
<checkbox :value="v.value" :checked="v.checked" />
<view class="checkbox">
<text class="iconfont" :class="{ 'icon-fuxuankuang2': !v.checked, 'icon-fuxuankuang1 color-base-text': v.checked }"></text>
<text class="iconfont" :class="{ 'icon-fuxuankuang2': !v.checked, 'icon-fuxuankuang1 color-base-text': v.checked }" :style="{ color: v.checked ? checkedColor : '' }"></text>
{{ v.value }}
</view>
</label>
@@ -61,18 +77,18 @@
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Radio'">
<view class="order-cell">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Radio'">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box radio-group-box">
<radio-group @change="radioChange($event, index)">
<view :class="['box', 'radio-group-box', 'option-layout-' + (item.value.option_layout || 'wrap')]">
<radio-group @change="radioChange($event, index)" :style="item._optionLayoutStyle">
<label v-for="(v, k) in item.option_lists" :key="k">
<radio :value="v.value" :checked="item.val == v.value" />
<view class="radio-box">
<text class="iconfont" :class="{ 'icon-yuan_checkbox': item.val != v.value, 'icon-yuan_checked color-base-text': item.val == v.value }"></text>
<text class="iconfont" :class="{ 'icon-yuan_checkbox': item.val != v.value, 'icon-yuan_checked color-base-text': item.val == v.value }" :style="{ color: item.val == v.value ? checkedColor : '' }"></text>
{{ v.value }}
</view>
</label>
@@ -81,11 +97,11 @@
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Img'">
<view class="order-cell flex-box">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Img'">
<view class="order-cell flex-box" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box img-boxs">
<view class="img-box" v-for="(v, k) in item.img_lists" :key="k" @click="uploadImg(index)">
@@ -97,26 +113,26 @@
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Date'">
<view class="order-cell">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Date'">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box box-flex">
<picker mode="date" :value="item.val" @change="bindDateChange($event, index)">
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
</picker>
<view :class="['box', 'box-flex']">
<picker mode="date" :value="item.val" @change="bindDateChange($event, index)">
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
</picker>
<text class="iconfont icon-right"></text>
</view>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Datelimit'">
<view class="order-cell flex-box">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Datelimit'">
<view class="order-cell flex-box" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box date-boxs">
<view class="date-box">
@@ -138,26 +154,26 @@
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Time'">
<view class="order-cell">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Time'">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box box-flex">
<picker mode="time" :value="item.val" @change="bindTimeChange($event, index)">
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
</picker>
<view :class="['box', 'box-flex']">
<picker mode="time" :value="item.val" @change="bindTimeChange($event, index)">
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
</picker>
<text class="iconfont icon-right"></text>
</view>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'Timelimit'">
<view class="order-cell flex-box">
<view class="name">
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Timelimit'">
<view class="order-cell flex-box" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box date-boxs">
<view class="date-box">
@@ -179,60 +195,332 @@
</view>
</view>
<view class="order-wrap" v-if="item.controller == 'City'">
<view class="order-cell box-flex">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'City'">
<view class="order-cell" :style="rowCellStyle">
<view class="name" :style="nameWidthStyle">
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
<text class="tit">{{ item.value.title }}</text>
</view>
<view :class="['box', 'box-flex']">
<pick-regions :default-regions="item.default_regions" :select-arr="item.select_arr" @getRegions="handleGetRegions($event, index)">
<view class="select-address " :class="{ empty: !item.val, 'color-tip': !item.val }">
{{ item.val ? item.val : (item.select_arr == '2' ? $lang('components.nsForm.selectProvinceCity') : $lang('components.nsForm.selectProvinceCityDistrict')) }}
</view>
</pick-regions>
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="box">
<pick-regions :default-regions="item.default_regions" :select-arr="item.select_arr" @getRegions="handleGetRegions($event, index)">
<view class="select-address " :class="{ empty: !item.val, 'color-tip': !item.val }">
{{ item.val ? item.val : (item.select_arr == '2' ? $lang('components.nsForm.selectProvinceCity') : $lang('components.nsForm.selectProvinceCityDistrict')) }}
</view>
</pick-regions>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
</block>
</view>
</template>
<script>
import formPlatformMixin from '@/common/js/form-platform-mixin.js';
export default {
name: 'ns-form',
mixins: [formPlatformMixin],
props: {
data: {
type: Array,
default: {}
default: () => []
},
customAttr: {
type: Object,
default: function() {
return {};
}
},
/**
* 表单样式配置(由后端 designer 通过 API 传入)。
* 字段名同时支持 camelCase(如 formPaddingX / inputHeight / labelColor)
* 与 snake_case(如 form_padding_x / input_height / label_color),camelCase 优先。
* 不传则使用组件内置默认(与重构前硬编码值一致,无视觉回归)。
*
* 支持的键:
* formPaddingX, formBgColor, rowPaddingY, rowMinHeight, labelGap,
* inputHeight, inputRadius, labelWidthMode ('auto'|'fixed'), labelFixedWidth,
* labelFontSize, labelColor, requiredColor, checkedColor,
* placeholderColor, showRowDivider, rowDividerColor
*
* 平台差异化:formConfig.terminal.{h5|weapp|harmony|app|quickapp} 只放差异字段
*/
formConfig: {
type: Object,
default: () => ({})
}
},
data() {
return {
formData: this.data
formData: [],
maxLabelWidth: 0
};
},
computed: {
// 合并配置:内置默认 < 全局 formConfig < 当前平台 formConfig.terminal[platform]
// 同时兼容 snake_case 与 camelCase 字段名
config() {
// 1) 内置默认值(最低优先级,与重构前的硬编码值一一对应,确保未传 formConfig 时零回归)
const defaults = {
formPaddingX: 28,
formBgColor: '#ffffff',
rowPaddingY: 24,
rowMinHeight: 60,
labelGap: 20,
inputHeight: 84,
inputRadius: 16,
labelWidthMode: 'auto', // 与 ns-newform 对齐:标签在上、输入框在下,整行宽度
labelFixedWidth: 180,
labelFontSize: 32,
labelColor: '#1f2937',
labelFontWeight: 700,
labelAutoMaxWidth: 200,
requiredColor: '#ef4444',
checkedColor: '#3b82f6',
placeholderColor: '#9ca3af',
placeholderFontSize: 28,
// textarea 显示行数 / 行高(与 ns-newform 对齐)
// 改用 :rows + line-height 驱动高度:rows 给原生 <textarea>(H5/微信原生层/鸿蒙 ArkUI 都识别),
// line-height 用于在 textareaStyle 里算出对应的 px 高度;不再写死 176rpx。
textareaRows: 4,
textareaLineHeight: 44,
// 输入框视觉增强(与 ns-newform 对齐)
inputBorderColor: '#e5e7eb',
inputBgColor: '#f9fafb',
inputFocusBorderColor: '#ff4544',
inputFocusBgColor: '#ffffff',
showRowDivider: true,
rowDividerColor: '#f0f0f0'
};
const fc = this.formConfig || {};
// 同时读 camelCase 与 snake_case,camelCase 优先
const pick = (camel, snake) => {
const v1 = fc[camel];
if (v1 !== undefined && v1 !== null && v1 !== '') return v1;
return fc[snake];
};
const base = {
formPaddingX: pick('formPaddingX', 'form_padding_x'),
formBgColor: pick('formBgColor', 'form_bg_color'),
rowPaddingY: pick('rowPaddingY', 'row_padding_y'),
rowMinHeight: pick('rowMinHeight', 'row_min_height'),
labelGap: pick('labelGap', 'label_gap'),
inputHeight: pick('inputHeight', 'input_height'),
inputRadius: pick('inputRadius', 'input_radius'),
labelWidthMode: pick('labelWidthMode', 'label_width_mode'),
labelFixedWidth: pick('labelFixedWidth', 'label_fixed_width'),
labelFontSize: pick('labelFontSize', 'label_font_size'),
labelColor: pick('labelColor', 'label_color'),
labelFontWeight: pick('labelFontWeight', 'label_font_weight'),
requiredColor: pick('requiredColor', 'required_color'),
checkedColor: pick('checkedColor', 'checked_color'),
placeholderColor: pick('placeholderColor', 'placeholder_color'),
placeholderFontSize: pick('placeholderFontSize', 'placeholder_font_size'),
textareaRows: pick('textareaRows', 'textarea_rows'),
textareaLineHeight: pick('textareaLineHeight', 'textarea_line_height'),
inputBorderColor: pick('inputBorderColor', 'input_border_color'),
inputBgColor: pick('inputBgColor', 'input_bg_color'),
inputFocusBorderColor: pick('inputFocusBorderColor', 'input_focus_border_color'),
inputFocusBgColor: pick('inputFocusBgColor', 'input_focus_bg_color'),
showRowDivider: pick('showRowDivider', 'show_row_divider'),
rowDividerColor: pick('rowDividerColor', 'row_divider_color')
};
// 移除 undefined / 空字符串(保留 0 / false)
Object.keys(base).forEach(k => {
if (base[k] === undefined || base[k] === null || base[k] === '') delete base[k];
});
// showRowDivider 在前后端可能传数字 0/1,统一转 boolean
if ('showRowDivider' in base) {
base.showRowDivider = base.showRowDivider === true || base.showRowDivider === 1 || base.showRowDivider === '1';
}
// 2) 当前平台差异化配置(最高优先级),从 formConfig.terminal 取出当前平台 + 所有别名键,合并
const termBlock = fc.terminal || {};
const platformKeys = this.platformConfigKeys || [];
const platformCfg = Object.assign(
{},
...platformKeys.map(k => termBlock[k] || fc[k] || {})
);
// 平台块可能也是 snake_case,统一转 camelCase
const platformCfgCamel = {};
if (this.$util && typeof this.$util.snakeToCamel === 'function') {
Object.keys(platformCfg).forEach(k => {
platformCfgCamel[this.$util.snakeToCamel(k)] = platformCfg[k];
});
} else {
Object.assign(platformCfgCamel, platformCfg);
}
// 3) 三层合并:defaults < base < platformCfgCamel
return Object.assign({}, defaults, base, platformCfgCamel);
},
// 容器样式:内边距 + 背景 + 16 个 CSS 自定义属性
formWrapStyle() {
const cfg = this.config;
const num = (v, fb) => (typeof v === 'number' ? v : parseInt(v) || fb);
// 后端 formConfig 一律以 rpx 传递;
// _rpx() 按端分支:H5 输出 'Npx'(uni.upx2px),其它端输出 'Nrpx'
return this.$util.objToStyle({
padding: `0 ${this.$util.rpx(cfg.formPaddingX)}`,
background: cfg.formBgColor,
'--form-padding-x': this.$util.rpx(cfg.formPaddingX),
'--form-bg-color': cfg.formBgColor,
'--row-padding-y': this.$util.rpx(cfg.rowPaddingY),
'--row-min-height': this.$util.rpx(cfg.rowMinHeight),
'--label-gap': this.$util.rpx(cfg.labelGap),
'--input-height': this.$util.rpx(cfg.inputHeight),
'--input-radius': this.$util.rpx(cfg.inputRadius),
'--label-fixed-width': this.$util.rpx(cfg.labelFixedWidth),
'--label-font-size': this.$util.rpx(num(cfg.labelFontSize, 28)),
'--label-color': cfg.labelColor,
'--label-font-weight': cfg.labelFontWeight,
'--required-color': cfg.requiredColor,
'--checked-color': cfg.checkedColor,
'--placeholder-color': cfg.placeholderColor,
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
'--textarea-rows': num(cfg.textareaRows, 4),
'--textarea-line-height': this.$util.rpx(num(cfg.textareaLineHeight, 44)),
// 输入框视觉增强(与 ns-newform 对齐)
'--input-border-color': cfg.inputBorderColor,
'--input-bg-color': cfg.inputBgColor,
'--input-focus-border-color': cfg.inputFocusBorderColor,
'--input-focus-bg-color': cfg.inputFocusBgColor,
'--row-divider-color': cfg.rowDividerColor,
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
});
},
rowWrapStyle() {
return this.$util.objToStyle({
padding: `${this.$util.rpx(this.config.rowPaddingY)} 0`
});
},
rowWrapClass() {
return this.config.showRowDivider === false ? 'order-wrap no-divider' : 'order-wrap';
},
rowCellStyle() {
return this.$util.objToStyle({
'min-height': this.$util.rpx(this.config.rowMinHeight)
});
},
// 标签宽度:垂直布局下标签整行显示,宽度交由 CSS(.name { width:100% })控制;
// 字号 / 颜色 / 字重已由 .form-wrap 注入的 --label-* 变量统一驱动,无需 inline 注入。
nameWidthStyle() {
return {};
},
// 输入框样式(input / textarea 共用)
inputStyle() {
return this.$util.objToStyle({
'min-height': this.$util.rpx(this.config.inputHeight),
'border-radius': this.$util.rpx(this.config.inputRadius),
'font-size': this.$util.rpx(this.config.labelFontSize),
'color': this.config.labelColor,
'line-height': this.$util.rpx(this.config.inputHeight)
});
},
// textarea 显示行数(来自 formConfig.textareaRows,未配置时回退到默认 4)
textareaRowsValue() {
const n = parseInt(this.config.textareaRows, 10);
return Number.isFinite(n) && n > 0 ? n : 4;
},
// textarea 行高(来自 formConfig.textareaLineHeight,用于 :rows × line-height 算出固定可视高度)
textareaLineHeightValue() {
const n = parseInt(this.config.textareaLineHeight, 10);
return Number.isFinite(n) && n > 0 ? n : 44;
},
// textarea 专用 inline style(所有平台统一使用,见 template 中 textarea 节点)
// 设计要点:
// 1) 不复用 inputStyle 的 min-height / line-height:那两个值取自 inputHeight(默认 60rpx),
// 对 textarea 太小,会让原生 textarea 单行过高、可视区域过小;
// 2) 不使用 auto-height:原生 textarea 上 auto-height 会让组件随内容无限扩展,
// 遮挡后续组件,导致"看不到下面的其他组件";
// 3) 高度 = rows × lineHeight(两个值都由 formConfig 动态下发,不再写死 176rpx):
// - H5 浏览器 / 微信原生层:原生 <textarea> 同时识别 :rows 和 CSS line-height,
// 高度由浏览器自然算出,与 :rows 完全一致;
// - 鸿蒙 ArkUI:原生 TextArea 只识别 :rows,不识别 CSS height,所以我们在 JS 里
// 显式算 height = rows × lineHeight 反向写出,保证三端可视高度像素级一致。
textareaStyle() {
const lh = this.$util.rpx(this.textareaLineHeightValue);
const rows = this.textareaRowsValue;
// 加上 padding(12rpx 上下) 和 border(1rpx 上下) 的占用,避免与 :rows 算出的高度不一致时被截断
const paddings = this.$util.rpx(24) + this.$util.rpx(2);
const h = (this.$util.rpx(this.textareaLineHeightValue * (rows - 1)) + lh) + paddings;
return this.$util.objToStyle({
'height': h,
'min-height': h,
'line-height': lh,
'border-radius': this.$util.rpx(this.config.inputRadius),
'font-size': this.$util.rpx(this.config.labelFontSize),
'color': this.config.labelColor
});
},
// 必填星号颜色
requiredColor() {
return this.config.requiredColor;
},
// 复选 / 单选 选中色
checkedColor() {
return this.config.checkedColor;
}
},
created() {
this.setFormData();
this.initFormData();
this.$nextTick(() => this.calculateMaxLabelWidth());
},
watch: {
data: function() {
this.setFormData();
data: {
deep: true,
handler() {
this.initFormData();
this.$nextTick(() => this.calculateMaxLabelWidth());
}
},
formConfig: {
deep: true,
handler() {
this.$nextTick(() => this.calculateMaxLabelWidth());
}
}
},
methods: {
// 预计算每项的 option_layout inline style(与 ns-newform 对齐)
// 跨端兼容:小程序 / 鸿蒙元服务 WXML 不支持模板里的方法调用,必须预计算到 item 上
recomputeItemStyles() {
if (!this.formData || this.formData.length === 0) return;
this.formData.forEach((item) => {
const itemValue = (item && item.value) || {};
const optLayout = itemValue.option_layout;
const optStyle = {};
if (optLayout === 'vertical') {
optStyle['flex-direction'] = 'column';
optStyle['align-items'] = 'flex-start';
optStyle['gap'] = '8px';
} else {
// wrap 模式
optStyle['flex-direction'] = 'row';
optStyle['align-items'] = 'center';
optStyle['gap'] = '6px';
}
this.$set(item, '_optionLayoutStyle', optStyle);
});
},
initFormData() {
// 深拷贝 prop 数据到本地状态,避免 mutate 上游
this.formData = JSON.parse(JSON.stringify(this.data || []));
this.processFormData();
// 预计算每项 inline style(与 ns-newform 对齐,跨端兼容)
this.recomputeItemStyles();
},
setFormData() {
this.formData = this.data;
this.initFormData();
this.$nextTick(() => this.calculateMaxLabelWidth());
},
processFormData() {
this.formData.forEach(item => {
if (!item.val) item.val = item.value.default ? item.value.default : '';
// Text / Textarea:当 placeholder 为空字符串或没有值时,不设置默认值
const skipDefault = (item.controller == 'Text' || item.controller == 'Textarea') && !item.value.placeholder;
if (!item.val && !skipDefault) item.val = item.value.default ? item.value.default : '';
if (item.value.options) {
item.option_lists = [];
@@ -356,6 +644,14 @@
}
});
},
// 计算最长 label 宽度(封装自 util.calculateMaxLabelWidth)
// 用于 labelWidthMode === 'auto' 时把 .name 的 width 撑开,避免长短 label 错位
calculateMaxLabelWidth() {
this.maxLabelWidth = this.$util.calculateMaxLabelWidth(
this.formData,
this.config.labelFontSize
);
},
verify() {
let verify = true;
@@ -643,9 +939,45 @@
};
</script>
<style lang="scss">
<style lang="scss" scoped>
/* CSS 自定义属性:默认值,与组件内 config.defaults 一一对应,
formConfig 未传时作为兜底;运行时会被 formWrapStyle 注入的 inline style 覆盖。
后端 formConfig 一律以 rpx 传递,前端按 rpx 写入;
仅 H5 端需要在 JS computed(formWrapStyle 等)里通过 _rpx() 转 px。 */
.form-wrap {
--form-padding-x: 28rpx;
--form-bg-color: #ffffff;
--row-padding-y: 24rpx;
--row-min-height: 60rpx;
--label-gap: 20rpx;
--input-height: 84rpx;
--input-radius: 16rpx;
--label-fixed-width: 180rpx;
--label-font-size: 32rpx;
--label-color: #1f2937;
--label-font-weight: 700;
--required-color: #ef4444;
--placeholder-font-size: 28rpx;
--checked-color: #3b82f6;
--placeholder-color: #9ca3af;
// textarea 行数 / 行高(运行时被 formWrapStyle 注入的 inline 覆盖;这里是兜底)
--textarea-rows: 4;
--textarea-line-height: 48rpx;
// 输入框视觉增强(与 ns-newform 对齐)
--input-border-color: #e5e7eb;
--input-bg-color: #ffffff;
--input-focus-border-color: #3b82f6;
--input-focus-bg-color: #ffffff;
--row-divider-color: #f0f0f0;
--show-row-divider: 0;
}
.order-wrap {
padding: 20rpx 0;
padding: var(--row-padding-y, 20rpx) 0;
&.no-divider {
border-bottom: 0;
}
&:last-child {
margin-bottom: 0;
@@ -655,12 +987,14 @@
.order-cell {
display: flex;
align-items: center;
flex-direction: column; // 与 ns-newform vertical 对齐:标签在上、输入框在下
align-items: flex-start;
background: #fff;
position: relative;
min-height: var(--row-min-height, 60rpx);
&.textarea {
align-items: unset;
align-items: flex-start;
}
&.clear-flex {
@@ -674,7 +1008,8 @@
&:last-child {
margin-bottom: 0;
border-bottom: solid 1px #eee;
// calc + 0/1 控制分割线显隐(formConfig.showRowDivider = false 时整条隐藏)
border-bottom: calc(var(--show-row-divider, 1) * 2rpx) solid var(--row-divider-color, #f0f0f0);
}
&.align-top {
@@ -682,61 +1017,165 @@
}
text {
font-size: $font-size-base;
font-size: var(--label-font-size, $font-size-base);
}
.name {
width: 80vw;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
min-height: var(--input-height, 60rpx);
line-height: 1.5;
margin-bottom: var(--label-gap, 20rpx);
margin-right: 0;
}
.tit {
text-align: left;
font-size: $font-size-base;
font-size: var(--label-font-size, $font-size-base);
color: var(--label-color, #1f2937);
font-weight: var(--label-font-weight, 700);
text {
font-size: $font-size-base;
font-size: var(--label-font-size, $font-size-base);
}
}
.required {
color: red;
font-size: 28rpx;
margin-left: 4rpx;
width: 14rpx;
color: var(--required-color, #ef4444);
font-size: var(--label-font-size, 28rpx);
margin-right: 6rpx;
font-weight: bold;
text-align: left;
display: inline-block;
vertical-align: middle;
}
.box {
flex: 1;
padding: 0 10rpx;
width: 100%;
padding: 0;
line-height: inherit;
text-align: left;
// H5 端 <input> 可能被 uni-app 编译为 <uni-input> 包装组件,::v-deep 穿透 scoped 命中真实原生 input
::v-deep input,
input {
font-size: $font-size-base;
font-size: var(--label-font-size, $font-size-base);
text-align: left;
}
textarea {
font-size: $font-size-base;
color: var(--label-color, #1f2937);
// 显式 height / line-height / min-height 同步覆盖 WebView 默认与鸿蒙原生 TextInput 的固有高度,
// 避免 placeholder / 文字下半部分被裁切
line-height: var(--input-height, 84rpx);
height: var(--input-height, 84rpx);
min-height: var(--input-height, 84rpx);
border-radius: var(--input-radius, 16rpx);
box-sizing: border-box;
width: 100%;
height: 88rpx;
line-height: 44rpx;
padding: 0 24rpx;
// 输入框视觉增强(与 ns-newform 对齐)
border: 1rpx solid var(--input-border-color, #e5e7eb);
background: var(--input-bg-color, #ffffff);
transition: all 0.3s ease;
&:focus {
background: var(--input-focus-bg-color, #ffffff);
border-color: var(--input-focus-border-color, #3b82f6);
}
// 原生 placeholder 样式(WebView / H5 生效;小程序/鸿蒙的 placeholder
// 通过 placeholder-class="placeholder" 钩子走 .placeholder 规则)
&::placeholder {
color: var(--placeholder-color, #9ca3af);
font-size: var(--placeholder-font-size, 28rpx);
}
}
// placeholder-class 钩子:在鸿蒙原生 TextInput / WebView 中都生效,
// 限定在 .form-wrap 内避免污染全局 .placeholder / .color-tip
.placeholder {
color: var(--placeholder-color, #9ca3af);
font-size: var(--placeholder-font-size, 28rpx);
line-height: var(--input-height, 84rpx);
}
::v-deep textarea,
textarea {
font-size: var(--label-font-size, $font-size-base);
width: 100%;
color: var(--label-color, #1f2937);
// 行高由 formConfig.textareaLineHeight(兜底 48rpx)控制;
// 高度 = rows × line-height + padding + border,所有值都从 CSS 变量读取,
// 真正做到了"rows 改 → 高度自动改"。
line-height: var(--textarea-line-height, 48rpx);
min-height: calc(var(--textarea-rows, 4) * var(--textarea-line-height, 48rpx) + 26rpx);
height: calc(var(--textarea-rows, 4) * var(--textarea-line-height, 48rpx) + 26rpx);
text-align: left;
border-radius: var(--input-radius, 16rpx);
box-sizing: border-box;
padding: 12rpx 24rpx;
// 输入框视觉增强(与 ns-newform 对齐)
border: 1rpx solid var(--input-border-color, #e5e7eb);
background: var(--input-bg-color, #ffffff);
transition: all 0.3s ease;
&:focus {
background: var(--input-focus-bg-color, #ffffff);
border-color: var(--input-focus-border-color, #3b82f6);
}
}
checkbox-group {
display: flex;
flex-wrap: wrap;
.uni-input {
font-size: var(--label-font-size, $font-size-base);
color: var(--label-color, #1f2937);
line-height: var(--input-height, 84rpx);
min-height: var(--input-height, 84rpx);
// 输入框视觉增强(与 ns-newform 对齐)
border: 1rpx solid var(--input-border-color, #e5e7eb);
background: var(--input-bg-color, #ffffff);
border-radius: var(--input-radius, 16rpx);
transition: all 0.3s ease;
}
.select-address {
font-size: var(--label-font-size, $font-size-base);
color: var(--label-color, #1f2937);
}
.color-tip {
color: var(--placeholder-color, #9ca3af);
}
// 让原生 picker / 自定义 pick-regions 撑满父容器(纵向布局下 label 在上、控件在下)
picker,
.pick-regions {
display: block;
width: 100%;
min-width: 0;
}
// 在 box-flex(带右侧箭头)场景下,picker 不应占满,留出右侧箭头空间
&.box-flex {
picker,
.pick-regions {
width: auto;
}
.iconfont.icon-right {
flex-shrink: 0;
margin-left: 8rpx;
line-height: 1;
}
}
checkbox-group,
radio-group {
display: flex;
flex-wrap: wrap;
width: 100%;
}
label {
@@ -746,6 +1185,39 @@
margin-right: 30rpx;
}
// 选项排列样式:vertical = 每个选项独立一行;wrap(默认)= 横向自动换行
// 注意:option-layout-* 是 .box 自身的类,必须用 & 嵌套,否则编译成 .box .option-layout-* 会选不中
&.option-layout-vertical {
checkbox-group,
radio-group {
flex-direction: column;
align-items: flex-start;
}
label {
width: 100%;
margin-right: 0;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
}
&.option-layout-wrap {
checkbox-group,
radio-group {
flex-direction: row;
align-items: center;
}
label {
margin-right: 30rpx;
margin-bottom: 0;
}
}
&.img-boxs {
display: flex;
align-items: center;
@@ -821,10 +1293,11 @@
align-items: center;
line-height: 1;
.iconfont {
font-size: 32rpx;
margin-right: 10rpx;
}
.iconfont {
font-size: 40rpx;
margin-right: 10rpx;
color: #d1d5db;
}
}
}
@@ -838,16 +1311,17 @@
align-items: center;
line-height: 1;
.iconfont {
font-size: 32rpx;
margin-right: 10rpx;
}
.iconfont {
font-size: 40rpx;
margin-right: 10rpx;
color: #d1d5db;
}
}
}
.iconfont {
color: $color-tip;
font-size: $font-size-base;
font-size: var(--label-font-size, $font-size-base);
}
.box-flex picker {

View File

@@ -10,14 +10,14 @@
return {
list: [],
config: {
title: '猜你喜欢',
title: '',
sources: 'sort',
supportPage: [],
goodsIds: [],
fontWeight: false,
padding: 0,
cartEvent: 'detail',
text: '购买',
text: '',
textColor: '#FFFFFF',
theme: 'default',
aroundRadius: 25,
@@ -67,10 +67,13 @@
}
},
mounted() {
if (this.auto) {
this.getLikeList();
}
},
// 初始化 i18n 默认文案,实际展示以服务端配置 config.title / config.text 为准
if (!this.config.title) this.config.title = this.$lang('common.goodsRecommendTitle');
if (!this.config.text) this.config.text = this.$lang('buyNow');
if (this.auto) {
this.getLikeList();
}
},
methods: {
init() {
this.list = [];

View File

@@ -56,10 +56,18 @@
<!-- 手机号授权按钮 -->
<block v-if="isAgree">
<!-- #ifdef MP-WEIXIN -->
<button class="auth-login save-btn border-0" style="border: none;" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">
<text style="color: #fff; font-size: 30rpx;">{{ $lang('components.ns-login.agreeAndAuthorizeMobile') }}</text>
</button>
<!-- #endif -->
<!-- #ifdef MP-HARMONY -->
<!-- 鸿蒙元服务无 getPhoneNumber 微信 API,改为弹出手机号+验证码表单 -->
<button class="auth-login save-btn border-0" style="border: none;" @tap="showHarmonyMobileForm = true">
<text style="color: #fff; font-size: 30rpx;">{{ $lang('components.ns-login.agreeAndAuthorizeMobile') }}</text>
</button>
<!-- #endif -->
</block>
<block v-else>
<button class="auth-login save-btn border-0" style="border: none;" @tap="authno">
@@ -67,6 +75,27 @@
</button>
</block>
<!-- #ifdef MP-HARMONY -->
<!-- 鸿蒙专属:手机号+验证码表单 -->
<view v-if="showHarmonyMobileForm" class="harmony-mobile-form" @touchmove.prevent.stop>
<view class="item-wrap">
<text class="label">{{ $lang('components.ns-login.mobileLabel') }}</text>
<input type="number" :placeholder="$lang('components.ns-login.mobilePlaceholder')" v-model="formData.mobile" maxlength="11" />
</view>
<view class="item-wrap" v-if="isOpenCaptcha == 1">
<text class="label">{{ $lang('components.ns-login.captchaLabel') }}</text>
<input type="number" :placeholder="$lang('components.ns-login.captchaPlaceholder')" v-model="formData.vercode" maxlength="4" />
<image :src="captcha.img" class="captcha" @tap="getCaptcha" show-menu-by-longpress></image>
</view>
<view class="item-wrap">
<text class="label">{{ $lang('components.ns-login.dynacodeLabel') }}</text>
<input type="number" :placeholder="$lang('components.ns-login.dynacodePlaceholder')" v-model="formData.dynacode" maxlength="4" />
<view class="send color-base-text" @tap="sendMobileCode">{{ dynacodeData.codeText }}</view>
</view>
<button type="default" class="save-btn" @tap="harmonySaveMobile" :disabled="isDisabled">{{ $lang('components.ns-login.save') }}</button>
</view>
<!-- #endif -->
<view @tap="closeLogin"
style="font-size: 30rpx; color: #888; text-align: center; padding-top: 10rpx;">
{{ $lang('components.ns-login.notNow') }}
@@ -109,11 +138,20 @@
<view class="item-wrap" v-if="forceBindingMobileControl">
<text class="label">{{ $lang('components.ns-login.mobileLabel') }}</text>
<!-- #ifdef MP-WEIXIN -->
<button open-type="getPhoneNumber" :plain="true" class="auth-login border-0"
@getphonenumber="getPhoneNumber">
<text class="mobile" v-if="formData.mobile">{{ formData.mobile }}</text>
<text class="color-base-text" v-else>{{ $lang('components.ns-login.getMobile') }}</text>
</button>
<!-- #endif -->
<!-- #ifdef MP-HARMONY -->
<!-- 鸿蒙无 getPhoneNumber,展示手动输入的手机号,没有时显示"获取手机号"提示用户去上面表单录入 -->
<view class="auth-login border-0" :plain="true">
<text class="mobile" v-if="formData.mobile">{{ formData.mobile }}</text>
<text class="color-base-text" v-else @tap="showHarmonyMobileForm = true">{{ $lang('components.ns-login.getMobile') }}</text>
</view>
<!-- #endif -->
</view>
<button type="default" class="save-btn" @tap="saveMp" :disabled="isDisabled">{{ $lang('components.ns-login.save') }}</button>
</template>
@@ -170,12 +208,16 @@ export default {
isSend: false
},
// 小程序获取手机号所需数据
authMobileData: {
iv: '',
encryptedData: ''
},
site_name: ''
};
authMobileData: {
iv: '',
encryptedData: ''
},
site_name: '',
// #ifdef MP-HARMONY
// 鸿蒙专属:控制手机号+验证码表单显示
showHarmonyMobileForm: false,
// #endif
};
},
options: {
styleIsolation: 'shared'
@@ -203,7 +245,7 @@ export default {
if (this.forceBindingMobileControl) {
if (this.formData.mobile.length == 0) return true;
// #ifdef H5
// #ifdef H5 || MP-HARMONY
// 验证码
if (this.isOpenCaptcha == 1 && this.formData.vercode.length == 0) return true;
// 动态码
@@ -283,14 +325,69 @@ export default {
// #ifdef MP-WEIXIN
this.getCode(authData => {
this.authLogin(authData, 'authOnlyLogin');
}, (err) => {
callback && callback(err);
// 真机 __usePrivacyCheck__ 开启时 getPhoneNumber 属于微信隐私接口,
// 必须先完成平台级隐私协议授权,否则点击"授权手机号"按钮会直接报
// "privacy permission is not authorized or buttonId is invalid"。
// 这里在登录链路前主动检查并弹隐私弹窗,授权完成后再继续登录。
this.ensureWxPrivacyAuthorized(() => {
this.getCode(authData => {
this.authLogin(authData, 'authOnlyLogin');
}, (err) => {
callback && callback(err);
});
});
// #endif
},
// 微信小程序: 确保平台级隐私协议已授权后再执行回调
ensureWxPrivacyAuthorized(done) {
try {
if (typeof wx === 'undefined' || !wx.getPrivacySetting) {
// 低版本基础库无隐私 API, 直接放行
done();
return;
}
wx.getPrivacySetting({
success: (res) => {
if (!res || !res.needAuthorization) {
// 已授权或无隐私指引配置, 直接放行
done();
return;
}
// 需要授权: 优先弹自建隐私弹窗(内含 agreePrivacyAuthorization 按钮,
// 点击同意即完成平台级授权); 用户同意后通过 privacy:agreed 事件继续
const popup = this.$refs.privacyPopup;
if (popup && typeof popup.showPrivacyPopup === 'function') {
const onAgreed = () => {
uni.$off('privacy:agreed', onAgreed);
uni.$off('privacy:disagreed', onDisagreed);
done();
};
const onDisagreed = () => {
uni.$off('privacy:agreed', onAgreed);
uni.$off('privacy:disagreed', onDisagreed);
// 用户拒绝隐私协议: 不继续登录链路(隐私接口也不可用)
};
uni.$off('privacy:agreed', onAgreed);
uni.$off('privacy:disagreed', onDisagreed);
uni.$on('privacy:agreed', onAgreed);
uni.$on('privacy:disagreed', onDisagreed);
popup.showPrivacyPopup();
} else if (typeof wx.requirePrivacyAuthorize === 'function') {
// 无 privacy-popup 实例时退回微信官方隐私弹窗
wx.requirePrivacyAuthorize({
success: () => done(),
fail: () => { }
});
}
},
fail: () => done()
});
} catch (e) {
done();
}
},
// 跳转去登录页
toLoginH5Page(mode = 'navigateTo') {
if (this.url) this.$util.redirectTo(this.$util.LOGIN_PAGE_URL, {
@@ -343,7 +440,7 @@ export default {
openCompleteInfoPop() {
this.getRegisterConfig();
// #ifdef H5
// #ifdef H5 || MP-HARMONY
if (!this.storeToken) this.getCaptchaConfig();
// #endif
@@ -572,8 +669,24 @@ export default {
}
});
} else {
const errMsg = (e.detail && e.detail.errMsg) || '';
// #ifdef MP-WEIXIN
// 隐私协议未授权时 getPhoneNumber 会直接失败:
// "getPhoneNumber:fail privacy permission is not authorized or buttonId is invalid"
// 此时不再抛原始错误, 引导用户同意隐私弹窗后重新点授权按钮
if (errMsg.indexOf('privacy') !== -1) {
this.$util.showToast({
title: this.$lang('components.ns-login.pleaseAgreePrivacy')
});
const popup = this.$refs.privacyPopup;
if (popup && typeof popup.showPrivacyPopup === 'function') {
popup.showPrivacyPopup();
}
return;
}
// #endif
this.$util.showToast({
title: e.detail.errMsg
title: errMsg
})
}
},
@@ -676,6 +789,26 @@ export default {
this.forceBindMobile();
},
// #ifdef MP-HARMONY
// 鸿蒙元服务保存手机号:复用 H5 的强制绑定手机号流程
harmonySaveMobile() {
if (this.forceBindingMobileControl) {
let data = {
mobile: this.formData.mobile,
key: this.formData.key,
code: this.formData.dynacode
};
if (this.captcha.id != '') {
data.captcha_id = this.captcha.id;
data.captcha_code = this.formData.vercode;
}
if (!this.verify(data)) return;
}
// 鸿蒙环境下通常也开启了 forceBindingMobileControl(走 forceBindMobile 接口)
this.forceBindMobile();
},
// #endif
// 微信小程序保存数据
saveMp() {
if (this.formData.mobile === '') {

View File

@@ -53,7 +53,7 @@
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API,尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-HARMONY
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

File diff suppressed because it is too large Load Diff

View File

@@ -70,37 +70,11 @@ export default {
return {
isIphoneX: false,
payIndex: 0,
// #ifdef H5
payTypeList: [{
name: this.$lang('components.nsPayment.alipay'),
icon: 'icon-zhifubaozhifu-',
type: 'alipay'
},
{
name: this.$lang('components.nsPayment.wechatpay'),
icon: 'icon-weixin1',
type: 'wechatpay'
}
],
payTypeList: [],
timer: null,
// #endif
// #ifdef MP-WEIXIN
payTypeList: [{
name: this.$lang('components.nsPayment.wechatpay'),
provider: 'wxpay',
icon: 'icon-weixin1',
type: 'wechatpay'
}],
isMatched: 0, // 支付是否需要校验
// #endif
// #ifdef MP-ALIPAY
payTypeList: [{
name: this.$lang('components.nsPayment.alipay'),
icon: 'icon-zhifubaozhifu-',
type: 'alipay',
provider: 'alipay'
}],
// #endif
payInfo: {},
balanceConfig: 0,
// 预售页面判断
@@ -108,6 +82,30 @@ export default {
};
},
created(e) {
// #ifdef H5
this.payTypeList = [
{ name: this.$lang('components.nsPayment.alipay'), icon: 'icon-zhifubaozhifu-', type: 'alipay' },
{ name: this.$lang('components.nsPayment.wechatpay'), icon: 'icon-weixin1', type: 'wechatpay' },
];
// #endif
// #ifdef MP-WEIXIN
this.payTypeList = [
{ name: this.$lang('components.nsPayment.wechatpay'), provider: 'wxpay', icon: 'icon-weixin1', type: 'wechatpay' },
];
// #endif
// #ifdef MP-ALIPAY
this.payTypeList = [
{ name: this.$lang('components.nsPayment.alipay'), icon: 'icon-zhifubaozhifu-', type: 'alipay', provider: 'alipay' },
];
// #endif
// #ifdef MP-HARMONY
// 鸿蒙元服务的支付通道: 与微信小程序相同的 provider='wxpay',
// 但走鸿蒙 JSSDK 的 requestPayment(走鸿蒙支付服务而非 wx.requestPayment)
this.payTypeList = [
{ name: this.$lang('components.nsPayment.wechatpay'), provider: 'wxpay', icon: 'icon-weixin1', type: 'wechatpay' },
];
// #endif
let url;
// #ifdef H5
url = window.location.href

View File

@@ -9,9 +9,13 @@
<view class="video-popup-body">
<video
v-if="videoUrl"
id="popupVideoPlayer"
:src="videoUrl"
controls
autoplay
playsinline
webkit-playsinline
x5-playsinline
class="video-player"
></video>
<view v-else class="video-error">{{ $lang('components.ns-video-player-popup.videoUrlNotExist') }}</view>
@@ -22,6 +26,8 @@
</template>
<script>
import { playVideoInContext } from '@/common/js/video-helper.js';
export default {
name: 'ns-video-player-popup',
props: {
@@ -76,6 +82,10 @@ export default {
* @param {Object} e - 弹窗状态变化事件
*/
onVideoPopupChange(e) {
// H5 端弹窗显示后触发播放:避免 autoplay 被浏览器拦截 / 弹窗动画未完成被 pause() 打断
if (e && e.show) {
playVideoInContext('popupVideoPlayer', this);
}
this.$emit('popup-change', e);
}
}

View File

@@ -95,6 +95,16 @@
i18nKey: 'components.payment.alipay'
}],
// #endif
// #ifdef MP-HARMONY
// 鸿蒙元服务的支付通道: provider='wxpay' 由鸿蒙 JSSDK 接管
payTypeList: [{
name: '微信支付',
provider: 'wxpay',
icon: 'icon-weixin1',
type: 'wechatpay',
i18nKey: 'components.payment.wechatpay'
}],
// #endif
payInfo: null,
balanceConfig: 0,
// 预售页面判断

View File

@@ -1,4 +1,13 @@
<template>
<!-- #ifdef MP-HARMONY -->
<!--
鸿蒙元服务已接入平台隐私托管, 由鸿蒙系统自动弹出系统级隐私弹窗,
应用层不再渲染自建 privacy-popup (避免出现"多次弹出隐私弹窗"被驳回)。
此处保留空模板, 组件实例仍存在 (供其他平台 share 同一份代码),
但模板不会渲染任何内容, 鸿蒙用户看不到自建弹窗。
-->
<!-- #endif-->
<!-- #ifndef MP-HARMONY -->
<view>
<view class="privacy-mask" v-if="showPop">
<view class="privacy-wrap">
@@ -6,7 +15,7 @@
<view class="privacy-desc">
{{ i18n.descPrefix }}
<text class="privacy-link" @tap="openPrivacyContract">{{ i18n.privacyContractName }}</text>
<!-- #ifdef QUICKAPP-WEBVIEW || H5 || MP-HARMONY -->
<!-- #ifdef QUICKAPP-WEBVIEW || H5 -->
<text class="privacy-link" @tap="openPrivacyService">{{ i18n.privacyServiceName }}</text>
<!-- #endif -->
{{ i18n.descSuffix }}
@@ -17,13 +26,15 @@
<button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree">{{ i18n.agreeBtn }}</button>
<!-- #endif -->
<!-- #ifdef H5 || MP-HARMONY -->
<button id="agree-btn" class="privacy-button-btn bg-agree" @tap="handleAgree">{{ i18n.agreeBtn }}</button>
<!-- #ifdef H5 -->
<button id="agree-btn" class="privacy-button-btn bg-agree" @tap="handleAgree">{{ i18n.agreeBtn
}}</button>
<!-- #endif -->
</view>
</view>
</view>
</view>
<!-- #endif -->
</template>
<script>
@@ -48,6 +59,12 @@ export default {
// 平台提供的隐私协议名称(由 wx.getPrivacySetting 等异步设置)
// 弹窗前才参与 i18n.privacyContractName 的填充
platformContractName: '',
// 平台协议名称就绪 Promise:
// created() 中发起异步查询, success/fail 时 resolve
// popUp() 中 await 此 Promise 后再调 prepareI18n(), 保证 $lang() 与
// platformContractName 都已经准备好, 不会出现"空串被永久缓存"的问题
// (与 i18n-lazy mixin 的"boot 完成才能 prepareI18n"是同源契约)
platformContractNameReady: null,
// 弹窗文案: 模板只读 i18n.xxx
// 初值为空串, 弹窗前在 popUp() 中**同步**填充
// 此时 App.vue 已 await boot() + await PrivacyManager.show() 完成,
@@ -70,10 +87,22 @@ export default {
// 所以 listener 可在 created 注册, 但 callback 仍要 nextTick 渲染
created() {
try {
// 创建平台协议名称就绪 Promise
// 后续 wx/has/uni.* 三端的异步 API 都会挂到这个 promise 上 resolve,
// popUp() 中 await 后再 prepareI18n(), 保证 platformContractName 已就绪
// (与 i18n-lazy mixin 的"boot 完成才能 prepareI18n"契约同源)
this.platformContractNameReady = new Promise((resolve) => {
this._resolvePlatformContractName = resolve
})
// #ifdef MP-WEIXIN
wx.getPrivacySetting({
success: (res) => {
this.platformContractName = res.privacyContractName || ''
this._resolvePlatformContractName && this._resolvePlatformContractName()
},
fail: () => {
this._resolvePlatformContractName && this._resolvePlatformContractName()
}
})
// #endif
@@ -85,13 +114,28 @@ export default {
if (res.privacyContractName) {
this.platformContractName = res.privacyContractName
}
this._resolvePlatformContractName && this._resolvePlatformContractName()
},
fail: () => {
this._resolvePlatformContractName && this._resolvePlatformContractName()
},
})
} else {
// 无 API 时立即 resolve (避免 await 永久阻塞)
this._resolvePlatformContractName && this._resolvePlatformContractName()
}
// #endif
// #ifdef MP-HARMONY
// 鸿蒙元服务: 隐私授权由系统管理, 无需应用层查询 privacyContractName
// 鸿蒙元服务: 已接入平台隐私托管, 隐私协议名称由鸿蒙系统管理
// 应用层不再调 uni.getPrivacySetting (避免和系统托管弹窗冲突)
// 立即 resolve, 让 popUp 的 await 不永久阻塞
this._resolvePlatformContractName && this._resolvePlatformContractName()
// #endif
// #ifdef H5
// H5 无平台隐私 API, 立即 resolve
this._resolvePlatformContractName && this._resolvePlatformContractName()
// #endif
// 提前注册 listener (晚于 created 早于 mounted, 减少事件丢失窗口)
@@ -179,14 +223,14 @@ export default {
* 统一弹窗 + 关闭其他页面的弹窗
* 通过 uni.$emit('privacy:forceClose') 通知其他实例关闭
*/
showPrivacyPopup() {
async showPrivacyPopup() {
// 先通知其他实例关闭
try { uni.$emit('privacy:forceClose'); } catch (e) {}
try { uni.$emit('privacy:forceClose'); } catch (e) { }
// 直接弹窗: boot 阶段已经保证 bundle 完整
// 完整性校验在 lang.js _bootImpl() 中完成(检查 defaultAppNameMp 等关键 key)
// 不完整时 force 重试, 仍不完整则报错不静默回退
// 所以这里无需再检测/自愈, 信任 boot 已就绪
this.popUp()
await this.popUp()
},
/**
@@ -237,18 +281,18 @@ export default {
// #ifdef MP-WEIXIN
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization((resolve) => {
// 检查是否已同意
if (!PrivacyManager.needShow()) {
// 已同意, 直接放行
resolve({ event: 'agree' })
// 关键: 微信规定 resolve({ event: 'agree' }) 必须携带 buttonId
// (值为页面上 open-type="agreePrivacyAuthorization" 按钮的 id),
// 缺 buttonId 的 agree 会被判定非法, 被拦截的隐私接口(如 getPhoneNumber)
// 直接报 "privacy permission is not authorized or buttonId is invalid"。
// 所以无论 storage 是否标记过同意, 都必须弹自定义弹窗让用户点同意按钮。
if (typeof this.privacyAuthorization === 'function') {
// 存 resolve 等用户操作, 由 handleAgree 携带 buttonId='agree-btn' 放行
this.privacyAuthorization(resolve)
} else {
// 需要弹窗, 存 resolve 等用户操作
if (typeof this.privacyAuthorization === 'function') {
this.privacyAuthorization(resolve)
} else {
// 兜底: 组件未就绪, 直接放行避免 API 卡死
resolve({ event: 'agree' })
}
// 兜底: 组件未就绪, disagree 放行避免平台 API 永久挂起
// (disagree 无需 buttonId, 不会产生非法 resolve)
resolve({ event: 'disagree' })
}
})
}
@@ -265,7 +309,8 @@ export default {
// #endif
// #ifdef MP-HARMONY
// 鸿蒙元服务: 隐私授权由系统自动管理, 无需应用层监听
// 鸿蒙元服务: 已接入平台隐私托管, 系统级弹窗由鸿蒙自动弹出
// 不再监听 uni.onPrivacyAuthorizationChange (避免和系统托管冲突)
// #endif
},
@@ -284,22 +329,22 @@ export default {
*/
closeOtherPagePopUp(closePopUp) {
// 通过全局事件通知所有页面关闭弹窗
try { uni.$emit('privacy:closeOthers', this._uid); } catch (e) {}
try { uni.$emit('privacy:closeOthers', this._uid); } catch (e) { }
},
openPrivacyContract() {
// #ifdef MP-WEIXIN
wx.openPrivacyContract({
success(res) {},
fail(err) {}
success(res) { },
fail(err) { }
});
// #endif
// #ifdef QUICKAPP-WEBVIEW
if (typeof has != 'undefined' && has?.openPrivacySetting) {
has.openPrivacySetting({
success: (res) => {},
fail: (err) => {}
success: (res) => { },
fail: (err) => { }
});
} else {
this.$util.redirectTo(privacyContractPage);
@@ -307,8 +352,8 @@ export default {
// #endif
// #ifdef MP-HARMONY
// 鸿蒙元服务: 使用应用内协议页面
this.$util.redirectTo(privacyContractPage);
// 鸿蒙元服务: 走平台隐私托管, 协议查看由鸿蒙系统接管
// (隐私弹窗本身不再在鸿蒙上弹出, 这里也基本不会被触发)
// #endif
// #ifdef H5
@@ -320,8 +365,8 @@ export default {
// #ifdef QUICKAPP-WEBVIEW
if (typeof has != 'undefined' && has?.openPrivacySetting) {
has.openPrivacySetting({
success: (res) => {},
fail: (err) => {}
success: (res) => { },
fail: (err) => { }
});
} else {
this.$util.redirectTo(privacyServicePage);
@@ -329,7 +374,7 @@ export default {
// #endif
// #ifdef MP-HARMONY
this.$util.redirectTo(privacyServicePage);
// 鸿蒙元服务: 走平台隐私托管, 协议查看由鸿蒙系统接管
// #endif
// #ifdef H5
@@ -344,7 +389,7 @@ export default {
this.privacyResolves.clear()
// 先通知其他实例关闭, 再关闭自己, 避免叠层
try { uni.$emit('privacy:forceClose'); } catch (e) {}
try { uni.$emit('privacy:forceClose'); } catch (e) { }
this.disPopUp()
// 修复: 拒绝时不写 privacyAgreed, 允许下次再弹
@@ -369,7 +414,7 @@ export default {
this.privacyResolves.clear()
// 先通知其他实例关闭, 再关闭自己
try { uni.$emit('privacy:forceClose'); } catch (e) {}
try { uni.$emit('privacy:forceClose'); } catch (e) { }
this.disPopUp()
// 由 PrivacyManager 管理 storage
@@ -390,9 +435,9 @@ export default {
*/
i18nPrepareFn() {
let appName, privacyContractName, privacyServiceName;
// 关键: appName 必须先解析为字符串, 才能作为 descPrefix/descSuffix 的参数
// #ifdef H5 || MP-HARMONY
// #ifdef H5
appName = this.$lang('components.privacyPopup.defaultAppNameH5');
privacyContractName = this.platformContractName || this.$lang('components.privacyPopup.defaultContractNameH5');
privacyServiceName = this.$lang('components.privacyPopup.defaultServiceNameH5');
@@ -416,20 +461,33 @@ export default {
return result;
},
popUp() {
async popUp() {
// 弹窗前**一次性**计算所有 i18n 文案
// boot 阶段已用 isBundleComplete() 保证 bundle 完整
// $lang() 返回真实翻译(效果与 H5 一致)
// 必须先等两类数据准备好:
// 1) Lang.boot() 完成 — 由 i18n-lazy mixin 隐含保证
// (调用方 App.vue 在 await PrivacyManager.show() 后才触发弹窗,
// PrivacyManager.show() await 了 boot 守卫)
// 2) platformContractName 就绪 — 微信/快应用/鸿蒙三端的 API 都是异步的,
// success 回调时机不确定, 直接 prepareI18n() 会读到空字符串, 导致
// "空串被永久缓存" (与 i18n-lazy mixin 警告的问题同源)
// 因此这里 await platformContractNameReady, 然后再 prepareI18n。
if (this.platformContractNameReady) {
try {
await this.platformContractNameReady
} catch (e) {
// 防御性: 即便 ready 出错也继续 (走 fallback 默认文案)
}
}
this.prepareI18n();
this.showPop = true;
// 通知 PrivacyManager 弹窗实际显示状态 (用于 rules-updated 双阶段重评估)
try { uni.$emit && uni.$emit('privacy:popup-state', { showing: true }) } catch (e) {}
try { uni.$emit && uni.$emit('privacy:popup-state', { showing: true }) } catch (e) { }
},
disPopUp() {
this.showPop = false;
// 通知 PrivacyManager 弹窗实际显示状态 (用于 rules-updated 双阶段重评估)
try { uni.$emit && uni.$emit('privacy:popup-state', { showing: false }) } catch (e) {}
try { uni.$emit && uni.$emit('privacy:popup-state', { showing: false }) } catch (e) { }
},
},
beforeDestroy() {
@@ -438,6 +496,11 @@ export default {
uni.$off('privacy:show', this.handlePrivacyShow)
uni.$off('privacy:forceClose', this.handleForceClose)
uni.$off('privacy:re-evaluate', this.handleReEvaluate)
// 销毁时强制 resolve, 避免 popUp() 中的 await 永久挂起 (例如用户提前离开页面)
if (typeof this._resolvePlatformContractName === 'function') {
this._resolvePlatformContractName()
this._resolvePlatformContractName = null
}
},
}
</script>
@@ -491,7 +554,7 @@ export default {
.privacy-button-btn {
color: #FFF;
font-size: 30rpx;
/* #ifdef QUICKAPP-WEBVIEW || H5 || MP-HARMONY */
/* #ifdef QUICKAPP-WEBVIEW || H5 */
font-size: 28rpx;
/* #endif */
font-weight: 500;
@@ -504,6 +567,12 @@ export default {
flex: 1;
margin-right: 30rpx;
justify-content: center;
/* 关键修复: 微信 <button> 原生默认 padding-left/right: 14px 没有被重置,
* 会挤压按钮内容区。真机窄屏(375px 以下)上「同意并继续」5 个字被裁成
* 「同意并继」。这里显式清零 padding 并锁定 border-box。 */
padding: 0;
box-sizing: border-box;
white-space: nowrap;
}
.privacy-button-btn::after {

2204
docs/ai-agent-integration.md Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -12,12 +12,29 @@ export const lang = {
timeFormatToday: 'Today',
timeFormatYesterday: 'Yesterday',
timeFormatBeforeYesterday: 'Day before yesterday',
// PR-CHAT-UI-CONFIG-V3 (2026-09-24): Humanized relative time (ui_time_humanize)
timeJustNow: 'Just now',
timeMinutesAgo: '{n} min ago',
timeHoursAgo: '{n} h ago',
timeMonthDay: '{m}/{d}',
timeYearMonthDay: '{y}/{m}/{d}',
// ====== ai-chat-message ======
aiNickname: 'AI Assistant',
defaultNickname: 'Me',
// PR-FRONTEND-VOICE-INPUT (2026-09-24): query text for attachment-only messages
// audioMessage / videoMessage: short label for the user-bubble filename fallback (still used by bubble template)
// *Instruction* keys: explicit directive sent to the AI as the query.
// Just a label gets ignored — the AI needs an explicit "please listen/look"
// to actually invoke STT/vision/file parsing on the attachment payload.
audioMessage: 'Voice Message',
videoMessage: 'Video Message',
audioInstruction: 'I sent a voice message. Please listen to it and reply.',
audioInstructionWithDuration: 'I sent a voice message ({seconds}s). Please listen to it and reply.',
imageInstruction: 'I sent an image. Please look at it and reply.',
videoInstruction: 'I sent a video. Please watch it and reply.',
fileInstruction: 'I sent a file. Please review it and reply.',
attachmentInstruction: 'I sent attachments. Please review them and reply.',
inputPlaceholder: 'Please enter your question...',
expandEditorTitle: 'Edit Content',
loadMoreHistory: 'Load more history',
@@ -112,15 +129,48 @@ export const lang = {
// ====== ai-chat-tools-panel ======
moreFunctions: 'More Features',
image: 'Image',
video: 'Video/Audio',
file: 'File',
voice: 'Voice',
recordVoice: 'Record Voice',
uploadAudio: 'Upload Audio',
pickVideo: 'Choose Video',
pickAudio: 'Choose Audio',
chooseAudioFail: 'Failed to select audio',
chooseVideoFail: 'Failed to select video',
audioNotReady: 'Audio not ready',
location: 'Location',
// PR-AUTO-LOCATION (2026-09-28): automatic location permission prompts
locationPermissionTitle: 'Location Permission Required',
locationPermissionH5: 'Please enable location permission via the lock icon in your browser address bar, then resend the message.',
locationPermissionMp: 'To help the AI better answer location-related questions, please enable location permission.\n\nTap "Open Settings" to enable it in your system settings, then return to this page and resend the message.',
locationSettingBtn: 'Open Settings',
locationSkipBtn: 'Not Now',
locationH5GuideBtn: 'Got it',
// ====== ai-chat-voice-panel ======
voiceInputTitle: 'Voice Input',
recordingTip: 'Recording, release to end',
startRecordTip: 'Tap to start recording',
voiceInputFailed: 'Voice input failed',
// PR-FRONTEND-VOICE-INPUT (2026-09-24): press-and-hold gesture + recorder error messages
holdToTalk: 'Hold to talk',
releaseToSend: 'Release to send',
releaseToCancel: 'Release to cancel',
slideUpToCancel: '↑ Slide up to cancel',
slideUpToCancelHint: '↑ Slide up to cancel',
// PR-INPUT-PLACEHOLDER-DYNAMIC (2026-09-28): dynamic input placeholder by context
placeholderDefault: 'Type a message or hold to talk',
placeholderWithAudio: 'Add a note for your voice (optional)',
placeholderWithMedia: 'Add a caption (optional)',
slideUpToCancelHint: '↑ Release to cancel',
voiceStartFailed: 'Cannot start recording',
voiceStopFailed: 'Recording failed, please try again',
voiceNotSupported: 'Voice input is not supported on this platform',
voiceTooShort: 'Speaking time too short',
// PR-FRONTEND-VOICE-INPUT (2026-09-24): upload error (recorder result -> cloud)
uploadFailed: 'Upload failed',
uploadFailedWithReason: 'Upload failed: {reason}',
// ====== index.vue - Menu ======
menuClearChat: 'Clear Chat',
@@ -136,4 +186,8 @@ export const lang = {
logInitNavbarFailed: 'Failed to initialize navigation bar',
logChatComponentNotInit: 'Chat component not initialized',
logServicerConfigNotLoaded: '[AI Customer Service] servicerConfig not loaded, retrying after 200ms...'
}
// ====== AI Agent general copy (customer service is the first agent) ======
aiAgentDefaultTitle: 'AI Agent',
aiAgentOpenFailed: 'Failed to open AI Agent, please try again later',
aiAgentNotConfigured: 'This AI Agent is not enabled'}

View File

@@ -2,10 +2,10 @@ export const lang = {
// 底部选项卡
tabBar: {
home: 'index',
category: 'category',
cart: 'cart',
member: 'member',
home: 'Home',
category: 'Category',
cart: 'Cart',
member: 'Me',
},
//公共
@@ -54,11 +54,15 @@ export const lang = {
serviceUnavailable: 'Navigation service temporarily unavailable',
},
// diy custom page
// diy custom page (diy-specific copy, generic HTTP errors reuse http.*)
diy: {
networkErrorTitle: 'Notice',
networkError: 'Network error, please try again later',
retry: 'Retry',
noDiyData: 'Custom page data not configured',
locationNotAvailable: 'Location not available',
// detailed data-load failure template (diy-specific, {reason} is filled by generic http.*)
loadFailTpl: 'Failed to load page data: {reason}, please try again later',
},
//customer service
@@ -108,6 +112,7 @@ export const lang = {
notSupported: 'Current environment does not support WeChat Channel',
missingFields: 'Missing required field: {field}',
playFailed: 'WeChat video playback failed!',
wechatMpOnly: 'WeChat Channel only plays in WeChat Mini Program',
},
// uniapp utility functions
@@ -134,12 +139,18 @@ export const lang = {
requestFailed: '{url} request failed. {err}',
// network timeout
timeout: 'Network request timeout, please try again later',
// network connection failed
networkError: 'Network connection failed, please check your network',
// network connection failed / generic network error (unified copy, reused by diy and other generic scenarios)
networkError: 'Network error, please try again later',
// server error
serverError: 'Service temporarily unavailable, please try again later',
serverError: 'Server error, please try again later',
// API not found (HTTP 404)
notFound: 'API not found',
// no access permission (HTTP 401 / 403)
auth: 'No access permission',
// request aborted
aborted: 'Request cancelled',
// unknown error (errorType fallback, e.g. non-5xx/404/401/403 HTTP status)
unknown: 'Request failed, please try again later',
// unknown error
unknownError: 'Request failed, please try again later',
},
@@ -247,7 +258,14 @@ export const lang = {
addToCartFailMin: 'Minimum purchase quantity not met',
addToCartFailStock: 'Insufficient Stock',
// 咨询
// generic submit/version/loading text (key lives in root because common.js's lang object IS the common namespace)
submitSuccess: 'Submit Success',
submitFail: 'Submit Failed',
versionInfo: 'Version Info',
commitId: 'Commit ID',
buildTime: 'Build Time',
loading: 'Loading...',
consult: 'Consult Now',
consultSuccess: 'Consultation Successful',
consultFail: 'Consultation Failed',

View File

@@ -0,0 +1,83 @@
export const lang = {
// diy-recommend-code referral code component
// Title
title: 'My Referral Code',
// Share now button
buttonText: 'Share Now',
// Copy code button
copyButtonText: 'Copy Code',
// Get a new code
placeholderRegenerateText: 'Get a New Code',
// Consent description
consentText: 'Your referral code is used to track enterprise registrations via your shared link. We record each application completed through your link for commission settlement.',
// Agree and get code button
consentButtonText: 'Agree & Get Code',
// Login guide tip
loginTipText: 'Log in to view your referral code',
// Log in button
loginBtnText: 'Log In',
// Poster QR tip
posterQrTip: 'Scan to enter and fill in registration info',
// Exclusive code label
exclusiveCode: 'Exclusive Code',
// Code pending label
pendingCode: 'Code Pending',
// Pending
pending: 'Pending',
// Loading code
loading: 'Loading code...',
// Code obtained label
obtainedCode: 'Code Obtained',
// Obtained
obtained: 'Obtained',
// Share invite reward description
shareInviteReward: 'Share with friends and earn rewards for invites',
// Active
activated: '✓ Active',
// Code generated description
codeGenerated: 'Code generated. Use it to invite friends or bind referral for enterprise registration',
// Submitting
submitting: 'Submitting...',
// Share title
shareTitle: 'Inviting you to join the low-altitude economy platform',
// Get failed
getFail: 'Failed to get code. Please retry later',
// Get failed (business code)
getFailCode: 'Failed to get code (business code={code})',
// Get success
getSuccess: 'Obtained',
// Network error
netError: 'Network error. Please retry later',
// Renew code modal title
regenTitle: 'Renew Code',
// Renew code modal content
regenContent: 'After renewal, the old code becomes invalid immediately. All registrations via the old link will no longer be attributed to you. Continue?',
// Confirm renew
regenConfirm: 'Confirm Renew',
// Cancel
regenCancel: 'Cancel',
// Renew failed
regenFail: 'Renewal failed. Please retry later',
// Renew success (old disabled)
regenSuccessOld: 'New code issued. Old code {old} disabled',
// Renew success
regenSuccess: 'Renewed',
// Code not ready yet
codeNotReady: 'Code not ready yet. Please wait',
// Code copied
codeCopied: 'Code copied',
// Copy failed
copyFail: 'Copy failed',
// Copy content is empty
copyEmpty: 'Content is empty',
// Copy after code finishes loading
loadThenCopy: 'Copy after code finishes loading',
// Share link copied
linkCopied: 'Share link copied',
// Poster subtitle
posterShareInvite: 'Share with friends, earn rewards for invites',
// Poster link prefix
posterLinkPrefix: 'Link:',
// Poster link not generated
posterLinkEmpty: '(not generated)',
}

View File

@@ -0,0 +1,5 @@
export const lang = {
// diy-webview webview component
emptyTip: 'Please configure the web link',
loadError: 'Failed to load web page',
}

View File

@@ -45,6 +45,7 @@ export const lang = {
loggingIn: 'Logging in',
loginFailed: 'Login failed',
pleaseAuthorizeMobile: 'Please authorize your mobile number',
pleaseAgreePrivacy: 'Please agree to the Privacy Policy and retry',
pleaseEnterNickname: 'Please enter nickname',
avatarPullFailed: 'Avatar pull failed',
}

View File

@@ -6,6 +6,11 @@ export const lang = {
fileUrlNotExist: 'File URL does not exist',
// Video URL does not exist
videoUrlNotExist: 'Video URL does not exist',
// PR-FRONTEND-MEDIA-UPLOAD (2026-09-16): audio related
audioUrlNotExist: 'Audio URL does not exist',
audioDefaultTitle: 'Voice message',
audioPlaying: 'Playing…',
audioPaused: 'Paused',
// This file type preview is not supported
unsupportedFileType: 'This file type preview is not supported',
}

View File

@@ -0,0 +1,4 @@
export const lang = {
//title为每个页面的标题
title: 'File Details',
}

View File

@@ -7,5 +7,18 @@ export const lang = {
submitSuccess: 'Submitted successfully',
// Form information not available
noFormInfo: 'Form information not available',
// Behavior settings
// Captcha input placeholder
captchaPlaceholder: 'Please enter the captcha',
// Captcha required
captchaRequired: 'Please enter the captcha',
// Captcha error
captchaError: 'Incorrect captcha, please try again',
// Submit limit reached
submitLimit: 'Submission limit reached',
// Form not open
notOpen: 'The form is not open yet',
// Login required
loginRequired: 'Please log in first',
}

View File

@@ -115,6 +115,7 @@ export const lang = {
// Product Message
productMessage: 'Product Message',
formEmptyTip: 'No message fields to fill',
// AI Customer Service
aiCustomerService: 'AI Assistant',

View File

@@ -3,5 +3,6 @@ export const lang = {
title: 'Payment Method',
paymentAmount: 'Payment Amount',
confirmPayment: 'Confirm Payment',
seeOrder: 'View Order'
seeOrder: 'View Order',
payInfoNotFound: 'Payment info not found!'
}

View File

@@ -1,6 +1,6 @@
export const lang = {
//title为每个页面的标题
title: 'AI智能客服',
title: 'AI智能',
// ====== 通用 ======
cancel: '取消',
@@ -12,12 +12,28 @@ export const lang = {
timeFormatToday: '今天',
timeFormatYesterday: '昨天',
timeFormatBeforeYesterday: '前天',
// PR-CHAT-UI-CONFIG-V3 (2026-09-24): 人性化相对时间 (ui_time_humanize)
timeJustNow: '刚刚',
timeMinutesAgo: '{n}分钟前',
timeHoursAgo: '{n}小时前',
timeMonthDay: '{m}月{d}日',
timeYearMonthDay: '{y}年{m}月{d}日',
// ====== ai-chat-message ======
aiNickname: '智能助手',
defaultNickname: '我',
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 纯附件时发给后端的 query 文案
// audioMessage / videoMessage: 用户气泡里文件名的兜底 (短标签, 仍在 bubble 模板用)
// *Instruction* 系列: 纯附件时发给 AI 的 query, 显式要求 AI "去看/听" 附件内容
// AI 必须看到指令才会主动调 STT / 视觉 / 文件解析, 光有 label 容易被忽略
audioMessage: '语音消息',
videoMessage: '视频消息',
audioInstruction: '我发送了一段语音,请听一下并回复我',
audioInstructionWithDuration: '我发送了一段语音({seconds} 秒),请听一下并回复我',
imageInstruction: '我发送了一张图片,请查看图片内容并回复我',
videoInstruction: '我发送了一段视频,请查看视频内容并回复我',
fileInstruction: '我发送了一个文件,请查看文件内容并回复我',
attachmentInstruction: '我发送了附件,请查看附件内容并回复我',
inputPlaceholder: '请输入您的问题...',
expandEditorTitle: '编辑内容',
loadMoreHistory: '加载更多历史消息',
@@ -112,15 +128,49 @@ export const lang = {
// ====== ai-chat-tools-panel ======
moreFunctions: '更多功能',
image: '图片',
video: '视频/音频',
file: '文件',
voice: '语音',
recordVoice: '录制语音',
uploadAudio: '上传音频',
pickVideo: '选择视频',
pickAudio: '选择音频',
chooseAudioFail: '选择音频失败',
chooseVideoFail: '选择视频失败',
audioNotReady: '音频尚未就绪',
location: '位置',
// PR-AUTO-LOCATION (2026-09-28): 自动定位权限提示
locationPermissionTitle: '需要位置权限',
locationPermissionH5: '请在浏览器地址栏左侧的锁形图标中开启位置权限,然后重新发送消息。',
locationPermissionMp: '为了让 AI 更好地回答位置相关问题,需要您开启位置权限。\n\n点击"去设置"在系统设置中开启后,请回到本页面再次发送消息。',
locationSettingBtn: '去设置',
locationSkipBtn: '暂不开启',
locationH5GuideBtn: '我知道了',
// ====== ai-chat-voice-panel ======
voiceInputTitle: '语音输入',
recordingTip: '正在录音,松开结束',
startRecordTip: '点击开始录音',
voiceInputFailed: '语音输入失败',
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 按住说话手势 + 录音异常文案
holdToTalk: '按住说话',
releaseToSend: '松开发送',
releaseToCancel: '松开取消',
slideUpToCancel: '↑ 上滑取消',
slideUpToCancelHint: '↑ 松开取消',
// PR-INPUT-PLACEHOLDER-DYNAMIC (2026-09-28): 输入框 placeholder 按上下文动态切换
// 默认 / 有语音附件 / 有其他媒体附件, 三态文案互不冲突
placeholderDefault: '发消息或按住说话',
placeholderWithAudio: '给语音留言加个说明(可选)',
placeholderWithMedia: '添加文字说明(可选)',
voiceStartFailed: '无法开始录音',
voiceStopFailed: '录音失败,请重试',
voiceNotSupported: '当前平台不支持语音输入',
voiceTooShort: '说话时间太短',
voiceRecorderBusy: '录音器正在初始化,请稍后再试',
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 上传失败 (录音产物上传到云端)
uploadFailed: '上传失败',
uploadFailedWithReason: '上传失败:{reason}',
// ====== index.vue - 菜单 ======
menuClearChat: '清空聊天',
@@ -136,4 +186,8 @@ export const lang = {
logInitNavbarFailed: '初始化导航栏失败',
logChatComponentNotInit: '聊天组件未初始化',
logServicerConfigNotLoaded: '【AI客服】servicerConfig 未加载,200ms后重试...'
}
// ====== AI Agent 通用文案(智能客服是首个 agent) ======
aiAgentDefaultTitle: 'AI 智能体',
aiAgentOpenFailed: '打开 AI 智能体失败,请稍后再试',
aiAgentNotConfigured: '该 AI 智能体暂未启用'}

View File

@@ -61,11 +61,15 @@ export const lang = {
weChatWorkKefu: '企业微信客服',
},
// diy 自定义页面
// diy 自定义页面(diy 专属文案,通用网络/接口错误复用 http.*)
diy: {
networkErrorTitle: '提示',
networkError: '网络异常,请稍后重试',
retry: '重试',
noDiyData: '未配置自定义页面数据',
locationNotAvailable: '未获取到定位',
// 数据加载失败详细文案(diy 专属模板,内部 {reason} 由通用 http.* 填充)
loadFailTpl: '页面数据加载失败:{reason},请稍后重试',
},
// 客服服务
@@ -108,6 +112,7 @@ export const lang = {
notSupported: '当前环境不支持微信视频号',
missingFields: '缺少必要字段: {field}',
playFailed: '微信视频播放失败!',
wechatMpOnly: '视频号仅支持在微信小程序环境中播放',
},
// uniapp 工具函数
@@ -134,12 +139,18 @@ export const lang = {
requestFailed: '{url}请求失败. {err}',
// 网络超时
timeout: '网络请求超时,请稍后重试',
// 网络连接失败
networkError: '网络连接失败,请检查网络设置',
// 网络连接失败 / 通用网络异常(统一文案,供 diy 等通用场景复用)
networkError: '网络异常,请稍后重试',
// 服务器错误
serverError: '服务暂时不可用,请稍后重试',
serverError: '服务器异常,请稍后重试',
// 接口不存在(HTTP 404)
notFound: '接口不存在',
// 无访问权限(HTTP 401 / 403)
auth: '无访问权限',
// 请求被中断
aborted: '请求已取消',
// 未知错误(errorType 分类兜底,如非 5xx/404/401/403 的 HTTP 状态码)
unknown: '请求失败,请稍后重试',
// 未知错误
unknownError: '请求失败,请稍后重试',
},
@@ -245,6 +256,14 @@ export const lang = {
addToCartFailMin: '已达到最小购买数量',
addToCartFailStock: '库存不足',
// 通用提交/版本/loading 文案(原本该走 common.* 命名空间,因 common.js 整体即 common namespace,放在 root)
submitSuccess: '提交成功',
submitFail: '提交失败',
versionInfo: '版本信息',
commitId: '提交 ID',
buildTime: '构建时间',
loading: '加载中...',
consult: '立即咨询',
consultSuccess: '咨询成功',
consultFail: '咨询失败',

View File

@@ -0,0 +1,83 @@
export const lang = {
// diy-recommend-code 推荐码组件
// 标题
title: '我的推荐码',
// 立即分享按钮
buttonText: '立即分享',
// 复制推荐码按钮
copyButtonText: '复制推荐码',
// 换一个新码
placeholderRegenerateText: '换一个新码',
// 同意说明文案
consentText: '您的推荐码将用于企业入驻来源追踪,我们会记录每一次通过您分享链接完成的入驻申请,用于您的推广收益结算。',
// 同意并获取推荐码按钮
consentButtonText: '同意并获取推荐码',
// 未登录引导提示
loginTipText: '登录后查看我的推荐码',
// 去登录按钮
loginBtnText: '去登录',
// 海报二维码提示
posterQrTip: '扫码进入并填写入驻信息',
// 专属推荐码标签
exclusiveCode: '专属推荐码',
// 待获取推荐码标签
pendingCode: '待获取推荐码',
// 待获取
pending: '待获取',
// 推荐码加载中
loading: '推荐码加载中...',
// 已获得推荐码标签
obtainedCode: '已获得推荐码',
// 已获得
obtained: '已获得',
// 分享邀请奖励描述
shareInviteReward: '分享给好友,邀请注册即可获得奖励',
// 已生效
activated: '✓ 已生效',
// 推荐码已生成描述
codeGenerated: '推荐码已生成,可用于邀请好友或企业入驻绑定推荐关系',
// 提交中
submitting: '提交中...',
// 分享标题
shareTitle: '邀您入驻低空经济产业平台',
// 获取失败
getFail: '推荐码获取失败,请稍后重试',
// 获取失败(业务码)
getFailCode: '推荐码获取失败(业务码={code})',
// 获取成功
getSuccess: '获取成功',
// 网络异常
netError: '网络异常,请稍后重试',
// 换新码弹窗标题
regenTitle: '换新码',
// 换新码弹窗内容
regenContent: '换新码后旧码会立即失效,后续所有使用旧分享链接的入驻申请都不会归属到您,确认继续?',
// 确认换新
regenConfirm: '确认换新',
// 取消
regenCancel: '取消',
// 换新失败
regenFail: '换新失败,请稍后重试',
// 换新成功(旧码停用)
regenSuccessOld: '已换新码,旧码 {old} 已停用',
// 换新成功
regenSuccess: '换新成功',
// 推荐码还未生成
codeNotReady: '推荐码还未生成,请稍候',
// 推荐码已复制
codeCopied: '推荐码已复制',
// 复制失败
copyFail: '复制失败',
// 复制内容为空
copyEmpty: '内容为空',
// 推荐码加载完成后再复制
loadThenCopy: '推荐码加载完成后再复制',
// 推广链接已复制
linkCopied: '推广链接已复制',
// 海报副标题
posterShareInvite: '分享给好友,邀请入驻获得奖励',
// 海报链接前缀
posterLinkPrefix: '链接:',
// 海报链接未生成
posterLinkEmpty: '(未生成)',
}

View File

@@ -0,0 +1,5 @@
export const lang = {
// diy-webview 网页组件
emptyTip: '请配置网页链接',
loadError: '网页加载失败',
}

View File

@@ -45,6 +45,7 @@ export const lang = {
loggingIn: '登录中',
loginFailed: '登录失败',
pleaseAuthorizeMobile: '请授权您的手机号码',
pleaseAgreePrivacy: '请先同意《隐私条款》后重试',
pleaseEnterNickname: '请输入昵称',
avatarPullFailed: '头像拉取失败',
}

View File

@@ -6,6 +6,11 @@ export const lang = {
fileUrlNotExist: '文件地址不存在',
// 视频地址不存在
videoUrlNotExist: '视频地址不存在',
// PR-FRONTEND-MEDIA-UPLOAD (2026-09-16): 音频相关
audioUrlNotExist: '音频地址不存在',
audioDefaultTitle: '语音消息',
audioPlaying: '播放中…',
audioPaused: '已暂停',
// 暂不支持该类型文件预览
unsupportedFileType: '暂不支持该类型文件预览',
}

View File

@@ -0,0 +1,4 @@
export const lang = {
//title为每个页面的标题
title: '文件详情',
}

View File

@@ -6,4 +6,17 @@ export const lang = {
submitSuccess: '提交成功',
// 未获取到表单信息
noFormInfo: '未获取到表单信息',
// 行为设置相关
// 请输入验证码
captchaPlaceholder: '请输入验证码',
// 请输入验证码(校验提示)
captchaRequired: '请输入验证码',
// 验证码错误
captchaError: '验证码错误,请重试',
// 提交次数已达上限
submitLimit: '提交次数已达上限',
// 表单未开放
notOpen: '表单未开放',
// 请先登录
loginRequired: '请先登录',
}

View File

@@ -108,6 +108,7 @@ export const lang = {
// 商品留言
productMessage: '商品留言',
formEmptyTip: '暂无需填写的留言字段',
// 智能客服
aiCustomerService: '智能客服',

View File

@@ -3,5 +3,6 @@ export const lang = {
title: '支付方式',
paymentAmount: '支付金额',
confirmPayment: '确认支付',
seeOrder: '查看订单'
seeOrder: '查看订单',
payInfoNotFound: '未获取到支付信息!'
}

View File

@@ -80,10 +80,18 @@ Vue.mixin(MpShareDefault);
// lang.js 在翻译覆写更新时 commit('setComponentRefresh'),
// golbalConfig.js 已把 componentRefresh 注册为全局 computed,
// 在此 watch 它并 $forceUpdate,触发所有页面内 {{$lang('xxx')}} 重新求值
// 同时调用 lang.refresh() 让当前页面的 navigationBarTitleText 跟随语种变化
// (pages.json 里的硬编码中文标题需要被 $lang('title') 覆盖)
Vue.mixin({
watch: {
componentRefresh() {
this.$forceUpdate();
try {
if (this.$langConfig && typeof this.$langConfig.refresh === 'function') {
// emit=false: lang.js 已 emit 过,这里避免重复 store.commit
this.$langConfig.refresh(false);
}
} catch (e) { /* 容错:refresh 失败不影响主流程 */ }
}
}
});

View File

@@ -79,6 +79,9 @@
},
"scope.writePhotosAlbum" : {
"desc" : "用于从相册选择和保存头像"
},
"scope.record" : {
"desc" : "用于语音录制功能,录制完成后发送到 AI 助手"
}
},
"requiredPrivateInfos" : [ "chooseLocation", "getLocation", "chooseAddress" ],
@@ -136,7 +139,23 @@
"sassImplementationName" : "dart-sass",
"mp-harmony" : {
"distribute" : {
"bundleName" : "com.atomicservice.6917577984608507983"
"bundleName" : "com.atomicservice.6917607804641099460"
},
// 隐私托管: 元服务必须使用 AGC 后台的标准化隐私声明托管服务,
// 弹窗由鸿蒙系统自动弹出, 应用层不能自建.
// 下方的 privacy 块仅作为应用内协议页兜底 (例如用户在系统设置里手动查看协议),
// 不参与首次启动弹窗逻辑.
"privacy" : {
"privacyContractUrl" : "YOUR_DOMAIN/api/agreementview/privacy?uniacid=YOUR_UNIACID",
"serviceContractUrl" : "YOUR_DOMAIN/api/agreementview/service?uniacid=YOUR_UNIACID",
"privacyContractName" : {
"zh" : "隐私政策",
"en" : "Privacy Policy"
},
"serviceContractName" : {
"zh" : "用户服务协议",
"en" : "User Service Agreement"
}
}
}
}

View File

@@ -1,72 +1,92 @@
{
"scripts": {
"mp-weixin": "node scripts/mp-weixin.patch.js",
"i18n:check": "node scripts/i18n-check.js",
"test": "node scripts/test-gate.js",
"test:util": "node --test tests/util.test.js",
"prebuild": "npm run test",
"prestart": "npm run test"
},
"devDependencies": {
"dart-sass": "^1.25.0",
"terser-webpack-plugin": "^5.3.10",
"zion-uniapp-mp-load-package": "^1.0.13"
},
"dependencies": {
"jweixin-module": "^1.6.0"
},
"uni-app": {
"scripts": {
"weixin": {
"title": "微信小程序自定义发行",
"env": {
"UNI_PLATFORM": "mp-weixin"
},
"define": {
"MP_WEIXIN": true,
"PRODUCTION": true
}
},
"h5-xcx20.5g-quickapp.com": {
"title": "H5-xcx20.5g-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://xcx20.5g-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"h5-xcx.aigc-quickapp.com": {
"title": "H5-xcx.aigc-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://xcx.aigc-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"h5-5g.aigc-quickapp.com": {
"title": "H5-5g.aigc-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://5g.aigc-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"h5-test.aigc-quickapp.com": {
"title": "H5-test.aigc-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://test.aigc-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
}
}
}
}
{
"scripts": {
"mp-weixin": "node scripts/mp-weixin.patch.js",
"i18n:check": "node scripts/i18n-check.js",
"test": "node scripts/test-gate.js",
"test:util": "node --test tests/util.test.js",
"prebuild": "npm run test",
"prestart": "npm run test"
},
"devDependencies": {
"dart-sass": "^1.25.0",
"terser-webpack-plugin": "^5.3.10",
"zion-uniapp-mp-load-package": "^1.0.13"
},
"dependencies": {
"jweixin-module": "^1.6.0"
},
"uni-app": {
"scripts": {
"weixin": {
"title": "微信小程序自定义发行",
"env": {
"UNI_PLATFORM": "mp-weixin"
},
"define": {
"MP_WEIXIN": true,
"PRODUCTION": true
}
},
"h5-xcx20.5g-quickapp.com": {
"title": "H5-xcx20.5g-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://xcx20.5g-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"h5-xcx.aigc-quickapp.com": {
"title": "H5-xcx.aigc-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://xcx.aigc-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"h5-5g.aigc-quickapp.com": {
"title": "H5-5g.aigc-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://5g.aigc-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"h5-test.aigc-quickapp.com": {
"title": "H5-test.aigc-quickapp.com",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "https://test.aigc-quickapp.com/"
},
"define": {
"PRODUCTION": true
}
},
"http://localhost:8050/": {
"title": "H5-localhost:8050",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "http://localhost:8050/"
},
"define": {
"PRODUCTION": true
}
},
"http://192.168.8.118:8050/": {
"title": "H5-192.168.8.118:8050",
"env": {
"UNI_PLATFORM": "h5",
"UNI_APP_DOMAIN": "http://192.168.8.118:8050/"
},
"define": {
"PRODUCTION": true
}
}
}
}
}

View File

@@ -1,5 +1,5 @@
{
"pages": [
"pages": [
{
"path": "pages/index/index",
"style": {
@@ -51,6 +51,7 @@
"diy-pintuan": "view",
"diy-presale": "view",
"diy-quick-nav": "view",
"diy-recommend-code": "view",
"diy-rich-text": "view",
"diy-rubik-cube": "view",
"diy-search": "view",
@@ -147,13 +148,13 @@
"diy-store-label": "view",
"diy-tab": "view",
"diy-text": "view",
"diy-video": "view",
"diy-video-list": "view"
"diy-video": "view",
"diy-video-list": "view"
}
}
}
},
{
"path": "cart",
},
{
"path": "cart",
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",
@@ -363,7 +364,7 @@
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "",
"navigationBarTitleText": "",
"componentPlaceholder": {
"diy-article": "view",
"diy-audio": "view",
@@ -635,7 +636,7 @@
//****************** 商户 ******************
{
"path": "merch/merchcategory",
"style": {
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
@@ -960,10 +961,10 @@
{
"path": "fenxiao/withdrawal_detail",
"style": {
"navigationBarTitleText": ""
// #ifdef APP-PLUS
,"navigationStyle": "custom"
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": ""
}
},
{
@@ -1084,8 +1085,65 @@
"pages": [
{
"path": "ai-chat/index",
"style": {
"navigationBarTitleText": "AI智能客服"
"style": {
"navigationBarTitleText": "AI智能客服",
"componentPlaceholder": {
"diy-article": "view",
"diy-audio": "view",
"diy-bargain": "view",
"diy-bottom-nav": "view",
"diy-category": "view",
"diy-category-item": "view",
"diy-channel-list": "view",
"diy-channel-video": "view",
"diy-comp-extend": "view",
"diy-coupon": "view",
"diy-digit": "view",
"diy-fenxiao-goods-list": "view",
"diy-float-btn": "view",
"diy-follow-official-account": "view",
"diy-form": "view",
"diy-goods-brand": "view",
"diy-goods-list": "view",
"diy-goods-recommend": "view",
"diy-graphic-nav": "view",
"diy-group": "view",
"diy-groupbuy": "view",
"diy-horz-blank": "view",
"diy-horz-line": "view",
"diy-hot-area": "view",
"diy-icon": "view",
"diy-image-nav": "view",
"diy-img-ads": "view",
"diy-index-page": "view",
"diy-kefu": "view",
"diy-listmenu": "view",
"diy-live": "view",
"diy-many-goods-list": "view",
"diy-map": "view",
"diy-member-info": "view",
"diy-member-my-order": "view",
"diy-merch-list": "view",
"diy-notes": "view",
"diy-notice": "view",
"diy-payment-qrcode": "view",
"diy-picture": "view",
"diy-pinfan": "view",
"diy-pintuan": "view",
"diy-presale": "view",
"diy-quick-nav": "view",
"diy-recommend-code": "view",
"diy-rich-text": "view",
"diy-rubik-cube": "view",
"diy-search": "view",
"diy-seckill": "view",
"diy-store": "view",
"diy-store-label": "view",
"diy-tab": "view",
"diy-text": "view",
"diy-video": "view",
"diy-video-list": "view"
}
}
},
{
@@ -1093,11 +1151,14 @@
"style": {
"navigationBarTitleText": ""
}
},
},
{
"path": "vr/index",
"style": {
"navigationBarTitleText": ""
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "工厂展示"
}
},
{
@@ -1291,6 +1352,7 @@
"diy-pintuan": "view",
"diy-presale": "view",
"diy-quick-nav": "view",
"diy-recommend-code": "view",
"diy-rich-text": "view",
"diy-rubik-cube": "view",
"diy-search": "view",
@@ -2141,13 +2203,72 @@
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": ""
"navigationBarTitleText": "",
"componentPlaceholder": {
"diy-article": "view",
"diy-audio": "view",
"diy-bargain": "view",
"diy-bottom-nav": "view",
"diy-category": "view",
"diy-category-item": "view",
"diy-channel-list": "view",
"diy-channel-video": "view",
"diy-comp-extend": "view",
"diy-coupon": "view",
"diy-digit": "view",
"diy-fenxiao-goods-list": "view",
"diy-float-btn": "view",
"diy-follow-official-account": "view",
"diy-form": "view",
"diy-goods-brand": "view",
"diy-goods-list": "view",
"diy-goods-recommend": "view",
"diy-graphic-nav": "view",
"diy-group": "view",
"diy-groupbuy": "view",
"diy-horz-blank": "view",
"diy-horz-line": "view",
"diy-hot-area": "view",
"diy-icon": "view",
"diy-image-nav": "view",
"diy-img-ads": "view",
"diy-index-page": "view",
"diy-kefu": "view",
"diy-listmenu": "view",
"diy-live": "view",
"diy-many-goods-list": "view",
"diy-map": "view",
"diy-member-info": "view",
"diy-member-my-order": "view",
"diy-merch-list": "view",
"diy-notes": "view",
"diy-notice": "view",
"diy-payment-qrcode": "view",
"diy-picture": "view",
"diy-pinfan": "view",
"diy-pintuan": "view",
"diy-presale": "view",
"diy-quick-nav": "view",
"diy-recommend-code": "view",
"diy-rich-text": "view",
"diy-rubik-cube": "view",
"diy-search": "view",
"diy-seckill": "view",
"diy-store": "view",
"diy-store-label": "view",
"diy-tab": "view",
"diy-text": "view",
"diy-video": "view",
"diy-video-list": "view"
}
}
},
{
"path": "form/formdata",
"style": {
// #ifdef APP-PLUS
// APP 端原本就是 custom;微信小程序 / 华为快应用 / 鸿蒙元服务
// 的原生 navbar 不支持自定义左侧 Home 按钮,需要切到 custom 自绘
// #ifdef APP-PLUS || MP
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "",
@@ -2208,7 +2329,7 @@
"diy-video-list": "view"
}
}
},
},
{
"path": "weapp/order_shipping",
"style": {
@@ -2314,78 +2435,85 @@
},
//******************文件模块******************
{
"path": "files/list",
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "查看文件",
"componentPlaceholder": {
"diy-article": "view",
"diy-audio": "view",
"diy-bargain": "view",
"diy-bottom-nav": "view",
"diy-category": "view",
"diy-category-item": "view",
"diy-channel-list": "view",
"diy-channel-video": "view",
"diy-comp-extend": "view",
"diy-coupon": "view",
"diy-digit": "view",
"diy-fenxiao-goods-list": "view",
"diy-float-btn": "view",
"diy-follow-official-account": "view",
"diy-form": "view",
"diy-goods-brand": "view",
"diy-goods-list": "view",
"diy-goods-recommend": "view",
"diy-graphic-nav": "view",
"diy-group": "view",
"diy-groupbuy": "view",
"diy-horz-blank": "view",
"diy-horz-line": "view",
"diy-hot-area": "view",
"diy-icon": "view",
"diy-image-nav": "view",
"diy-img-ads": "view",
"diy-index-page": "view",
"diy-kefu": "view",
"diy-listmenu": "view",
"diy-live": "view",
"diy-many-goods-list": "view",
"diy-map": "view",
"diy-member-info": "view",
"diy-member-my-order": "view",
"diy-merch-list": "view",
"diy-notes": "view",
"diy-notice": "view",
"diy-payment-qrcode": "view",
"diy-picture": "view",
"diy-pinfan": "view",
"diy-pintuan": "view",
"diy-presale": "view",
"diy-quick-nav": "view",
"diy-rich-text": "view",
"diy-rubik-cube": "view",
"diy-search": "view",
"diy-seckill": "view",
"diy-store": "view",
"diy-store-label": "view",
"diy-tab": "view",
"diy-text": "view",
"diy-video": "view",
"diy-video-list": "view"
"path": "files/list",
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "查看文件",
"componentPlaceholder": {
"diy-article": "view",
"diy-audio": "view",
"diy-bargain": "view",
"diy-bottom-nav": "view",
"diy-category": "view",
"diy-category-item": "view",
"diy-channel-list": "view",
"diy-channel-video": "view",
"diy-comp-extend": "view",
"diy-coupon": "view",
"diy-digit": "view",
"diy-fenxiao-goods-list": "view",
"diy-float-btn": "view",
"diy-follow-official-account": "view",
"diy-form": "view",
"diy-goods-brand": "view",
"diy-goods-list": "view",
"diy-goods-recommend": "view",
"diy-graphic-nav": "view",
"diy-group": "view",
"diy-groupbuy": "view",
"diy-horz-blank": "view",
"diy-horz-line": "view",
"diy-hot-area": "view",
"diy-icon": "view",
"diy-image-nav": "view",
"diy-img-ads": "view",
"diy-index-page": "view",
"diy-kefu": "view",
"diy-listmenu": "view",
"diy-live": "view",
"diy-many-goods-list": "view",
"diy-map": "view",
"diy-member-info": "view",
"diy-member-my-order": "view",
"diy-merch-list": "view",
"diy-notes": "view",
"diy-notice": "view",
"diy-payment-qrcode": "view",
"diy-picture": "view",
"diy-pinfan": "view",
"diy-pintuan": "view",
"diy-presale": "view",
"diy-quick-nav": "view",
"diy-rich-text": "view",
"diy-rubik-cube": "view",
"diy-search": "view",
"diy-seckill": "view",
"diy-store": "view",
"diy-store-label": "view",
"diy-tab": "view",
"diy-text": "view",
"diy-video": "view",
"diy-video-list": "view"
}
}
},
{
"path": "files/detail",
"style": {
"navigationBarTitleText": "文件详情"
}
},
{
"path": "file-preview/file-preview",
"style": {
"navigationBarTitleText": "文件预览",
"navigationStyle": "custom"
}
}
},
{
"path": "file-preview/file-preview",
"style": {
"navigationBarTitleText": "文件预览"
}
}
]
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
@@ -2416,14 +2544,12 @@
},
"easycom": {
"autoscan": true,
"custom": {
"custom": {
"x-skeleton": "@/uni_modules/x-skeleton/components/x-skeleton/x-skeleton.vue",
"mp-html": "@/uni_modules/mp-html/components/mp-html/mp-html.vue",
"mp-html": "@/uni_modules/mp-html/components/mp-html/mp-html.vue",
"uni-*(\\W.*)": "@/uni_modules/uni$1/components/uni$1/uni$1.vue",
"mescroll-uni": "@/components/mescroll/my-list-mescroll.vue",
"ns-goods-sku-*(\\W.*)": "@/components/ns-goods-sku/ns-goods-sku$1.vue",
"ns-goods-sku-*(\\W.*)": "@/components/ns-goods-sku/ns-goods-sku$1.vue",
"diy-*(\\W.*)": "@/components-diy/diy$1.vue"
}
},
@@ -2431,8 +2557,8 @@
"pages/index/index": {
"network": "all",
"packages": [
"pages_tool"
"components-diy"
]
}
}
}
}

View File

@@ -2,6 +2,15 @@
<view :style="themeColor">
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }"
class="page-img">
<!-- diy 数据网络加载失败提示(页面内横幅,各端可靠,悬浮在最上层) -->
<view v-if="diyLoadError" class="diy-load-error">
<view class="diy-load-error__body">
<text class="diy-load-error__msg">{{ diyLoadErrorMsg || '网络异常,请稍后重试' }}</text>
<text v-if="diyLoadErrorUrl" class="diy-load-error__url" selectable user-select>{{ diyLoadErrorUrl }}</text>
</view>
<view class="diy-load-error__btn" @tap="retryDiyInfo">{{ $lang('diy.retry') || '重试' }}</view>
</view>
<view class="site-info-box"
v-if="$util.isWeiXin() && followOfficialAccount && followOfficialAccount.isShow && wechatQrcode">
<view class="site-info">
@@ -44,7 +53,7 @@
<ns-copyright v-show="isShowCopyRight" />
</view>
<template v-if="adv.advshow != -1">
<template v-if="adv && adv.advshow != -1">
<view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="small-bot">
@@ -179,6 +188,52 @@ export default {
z-index: 122;
}
.diy-load-error {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 28rpx;
padding-top: calc(24rpx + var(--status-bar-height, 0px));
background-color: #fff5f5;
border-bottom: 1rpx solid #ffccc7;
}
.diy-load-error__body {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.diy-load-error__msg {
font-size: 26rpx;
color: #cf1322;
line-height: 1.5;
}
.diy-load-error__url {
margin-top: 6rpx;
font-size: 22rpx;
color: #999;
line-height: 1.4;
word-break: break-all;
}
.diy-load-error__btn {
margin-left: 20rpx;
padding: 10rpx 28rpx;
font-size: 26rpx;
color: #fff;
background-color: #cf1322;
border-radius: 32rpx;
white-space: nowrap;
}
.small-bot swiper {
width: 560rpx;
height: 784rpx;

View File

@@ -55,7 +55,7 @@ export default {
onShow() {
// 获取关注公众号二维码
this.getFollowQrcode();
// 重新获取店铺信息
this.shopInfo = uni.getStorageSync('shopInfo');
},
@@ -128,12 +128,12 @@ export default {
},
// diy-group 渲染完毕回调, 用于触发版本水印等延后显示元素
// 同时通知 splash-state 页面就绪, 启动屏可以关闭
// 延迟 500ms 是为了确保页面内容有足够时间渲染
// 注意: diy-group 内部 _notifyLoaded 已有 300ms 渲染 settle,
// 这里不再叠加 500ms, 避免吃掉 splash 的 2s page-ready 兜底预算
// (叠加延迟会导致弱网/冷启动下 splash 走 page-ready-timeout 兜底路径)
onDiyGroupLoaded() {
this.diyGroupReady = true;
setTimeout(() => {
try { splashState.notifyPageReady(); } catch (e) {}
}, 500);
try { splashState.notifyPageReady(); } catch (e) {}
},
/**
* 版本连击 3 次以上显示构建版本信息(供测试人员使用)
@@ -160,10 +160,10 @@ export default {
} catch (e) {}
if (v && v.commitId) {
uni.showModal({
title: '版本信息',
content: `提交 ID: ${v.commitId}\n构建时间: ${v.buildTime}\n${Config.baseUrl}`,
showCancel: false
});
title: this.$lang('versionInfo'),
content: `${this.$lang('commitId')}: ${v.commitId}\n${this.$lang('buildTime')}: ${v.buildTime}\n${Config.baseUrl}`,
showCancel: false
});
} else {
console.error('未获取到构建版本信息');
}

View File

@@ -1,7 +1,31 @@
<template>
<view>
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
<view class="goods-container">
<!-- 骨架屏:商品详情加载时按结构分段占位(banner / 价格 / 标题 / 规格 / 商家 / 详情 / 推荐)
关闭条件: loading=false 且已拿到真实商品数据(goods_id>0); 任一不满足都保留骨架屏 -->
<view v-if="loading || !hasRealData" class="goods-detail-skeleton">
<x-skeleton data-component-name="goods-detail-view-banner" :loading="true" :configs="skeletonBanner"></x-skeleton>
<x-skeleton data-component-name="goods-detail-view-price" :loading="true" :configs="skeletonPrice"></x-skeleton>
<x-skeleton data-component-name="goods-detail-view-title" :loading="true" :configs="skeletonTitle"></x-skeleton>
<x-skeleton data-component-name="goods-detail-view-sku" :loading="true" :configs="skeletonSku"></x-skeleton>
<x-skeleton data-component-name="goods-detail-view-merch" :loading="true" :configs="skeletonMerch"></x-skeleton>
<x-skeleton data-component-name="goods-detail-view-detail" :loading="true" :configs="skeletonDetail"></x-skeleton>
<x-skeleton data-component-name="goods-detail-view-recommend" :loading="true" :configs="skeletonRecommend"></x-skeleton>
<!-- 底部 action 骨架占位:与 ns-goods-action 同样 fixed bottom, 避免数据未到时底部跳变 -->
<view class="goods-detail-skeleton-action">
<view class="skeleton-action-icons">
<view class="skeleton-action-icon" v-for="i in 2" :key="i"></view>
</view>
<view class="skeleton-action-btn"></view>
<view class="skeleton-action-btn primary"></view>
</view>
</view>
<!-- 修复鸿蒙元服务: 移除无效的 scroll-y="true" 属性 (scroll-y 是 <scroll-view> 的指令属性)
鸿蒙 JSVM 早期版本遇到无效 attribute 会让 view 子树静默不渲染, 导致整个详情页空白 -->
<view v-else class="goods-detail-wrap">
<!-- 操作区域 slot: 与 .goods-detail 同一 v-else 分支, 避免骨架屏状态下被父组件渲染真实按钮(基于默认 goods_state=0 显示"该商品已下架") -->
<slot name="action"></slot>
<view class="goods-detail" :class="isIphoneX ? 'active' : ''">
<view class="goods-container">
<!-- AI客服悬浮按钮 -->
<view class="ai-chat-float-btn" @tap.stop="$emit('aiChatClick')" v-if="showAIChatBtn">
<image :src="aiAvatarUrl" mode="aspectFill" class="ai-avatar-icon" />
@@ -32,10 +56,11 @@
</view>
</view>
<!-- 商品视频 -->
<!-- 商品视频:objectFit=contain 保留原始宽高比,在固定高度的图片容器内居中播放 -->
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)"
:poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
:poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="contain"
playsinline webkit-playsinline x5-playsinline></video>
</view>
<!-- 切换视频、图片 -->
@@ -459,7 +484,7 @@
<text>{{ $lang('goods.detail.detailView.generateSharePoster') }}</text>
</button>
</view>
<!-- #ifdef H5 -->
<!-- #ifdef H5 || MP-HARMONY -->
<view class="share-box" @click="copyUrl">
<button class="share-btn" :plain="true">
<view class="iconfont icon-fuzhilianjie"></view>
@@ -474,11 +499,10 @@
</view>
<slot name="fixedbtn"></slot>
</view>
</view>
</view>
<!-- 操作区域 -->
<slot name="action"></slot>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login>
</view>
@@ -501,11 +525,142 @@ export default {
default: () => {
return {};
}
},
// 是否显示骨架屏(true:展示骨架;false:展示真实内容)
loading: {
type: Boolean,
default: true
}
},
components: {
pengpaiFadeinOut
},
data() {
// 商品详情骨架屏:模拟「轮播图 + 价格行 + 标题简介 + 规格行 + 商家 + 详情 + 推荐」
return {
// 1. 轮播图:方形 banner 占位
skeletonBanner: {
padding: '0',
gridRows: 1,
gridColumns: 1,
gridRowsGap: '24rpx',
headShow: true,
headWidth: '100%',
headHeight: '750rpx',
headBorderRadius: '0',
textShow: false
},
// 2. 价格行:一行价 + 一行原价
skeletonPrice: {
padding: '24rpx 24rpx 16rpx',
gridRows: 2,
gridColumns: 1,
gridRowsGap: '16rpx',
itemDirection: 'column',
itemAlign: 'flex-start',
headShow: false,
textShow: true,
textRows: 1,
textRowsGap: '0',
textWidth: ['40%', '30%'],
textHeight: ['48rpx', '24rpx'],
textBorderRadius: '6rpx'
},
// 3. 标题/简介:标题两行 + 简介 + 标签
skeletonTitle: {
padding: '8rpx 24rpx 24rpx',
gridRows: 1,
gridColumns: 1,
gridRowsGap: '20rpx',
itemDirection: 'column',
itemAlign: 'flex-start',
headShow: false,
textShow: true,
textRows: 4,
textRowsGap: '16rpx',
textWidth: ['90%', '60%', '100%', '40%'],
textHeight: ['40rpx', '40rpx', '24rpx', '24rpx'],
textBorderRadius: '6rpx'
},
// 4. 规格行:单行高度的小条
skeletonSku: {
padding: '20rpx 24rpx',
gridRows: 1,
gridColumns: 1,
gridRowsGap: '0',
itemDirection: 'row',
itemAlign: 'center',
headShow: true,
headWidth: '120rpx',
headHeight: '32rpx',
headBorderRadius: '6rpx',
textShow: true,
textRows: 1,
textRowsGap: '0',
textWidth: '60%',
textHeight: '28rpx',
textBorderRadius: '6rpx',
itemGap: '20rpx'
},
// 5. 商家:头像 + 名称
skeletonMerch: {
padding: '24rpx',
gridRows: 1,
gridColumns: 1,
gridRowsGap: '0',
itemDirection: 'row',
itemAlign: 'center',
headShow: true,
headWidth: '80rpx',
headHeight: '80rpx',
headBorderRadius: '50%',
textShow: true,
textRows: 2,
textRowsGap: '12rpx',
textWidth: ['50%', '80%'],
textHeight: ['28rpx', '20rpx'],
textBorderRadius: '6rpx',
itemGap: '24rpx'
},
// 6. 商品详情:多行段落
skeletonDetail: {
padding: '24rpx',
gridRows: 1,
gridColumns: 1,
gridRowsGap: '0',
itemDirection: 'column',
itemAlign: 'flex-start',
headShow: false,
textShow: true,
textRows: 6,
textRowsGap: '16rpx',
textWidth: ['100%', '100%', '90%', '100%', '80%', '60%'],
textHeight: '24rpx',
textBorderRadius: '6rpx'
},
// 7. 推荐:两列卡片缩略图
skeletonRecommend: {
padding: '24rpx',
gridRows: 1,
gridColumns: 2,
gridRowsGap: '24rpx',
gridColumnsGap: '24rpx',
itemDirection: 'column',
itemAlign: 'flex-start',
headShow: true,
headWidth: '100%',
headHeight: '320rpx',
headBorderRadius: '12rpx',
textShow: true,
textRows: 2,
textRowsGap: '12rpx',
textWidth: ['100%', '70%'],
textHeight: ['24rpx', '24rpx'],
textBorderRadius: '6rpx',
itemGap: '12rpx'
}
};
},
computed: {
aiAvatarUrl() {
return this.$util.img(IMAGE_CONFIG.aiAvatar);
@@ -524,6 +679,11 @@ export default {
hasDetailContent() {
const hasPdf = this.goodsSkuDetail && this.goodsSkuDetail.pdf_url;
return hasPdf || this.hasHtmlTab;
},
// 是否有真实商品数据: goods_id > 0 才算拿到商品详情
// 用于「未拿到任何数据时不显示真实内容」, 避免加载失败/异常时切到空详情页
hasRealData() {
return this.goodsSkuDetail && Number(this.goodsSkuDetail.goods_id) > 0;
}
},
mixins: [scroll, detail]
@@ -532,6 +692,79 @@ export default {
<style lang="scss">
@import '@/common/css/goods_detail.scss';
/* 骨架屏外层:与商品详情整体上对齐,左右内边距由各 skeleton 自己控制 */
.goods-detail-skeleton {
width: 100%;
background-color: #fff;
}
/* 底部 action 骨架占位:与 ns-goods-action 同样 fixed bottom, 高度接近真实按钮 */
.goods-detail-skeleton-action {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 100rpx;
display: flex;
align-items: center;
background-color: #fff;
z-index: 9;
padding: 0 16rpx;
box-sizing: border-box;
border-top: 1rpx solid #f2f2f2;
padding-bottom: env(safe-area-inset-bottom);
}
.goods-detail-skeleton-action .skeleton-action-icons {
display: flex;
align-items: center;
margin-right: 16rpx;
}
.goods-detail-skeleton-action .skeleton-action-icon {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background-color: #EAEDF5;
background: linear-gradient(90deg, #EAEDF5 25%, #F9FAFF 37%, #EAEDF5 50%);
background-size: 400% 100%;
animation: skActAnim 1.8s ease infinite;
margin-right: 16rpx;
}
.goods-detail-skeleton-action .skeleton-action-icon:last-child {
margin-right: 0;
}
.goods-detail-skeleton-action .skeleton-action-btn {
flex: 1;
height: 70rpx;
border-radius: 10rpx;
margin-right: 16rpx;
background-color: #EAEDF5;
background: linear-gradient(90deg, #EAEDF5 25%, #F9FAFF 37%, #EAEDF5 50%);
background-size: 400% 100%;
animation: skActAnim 1.8s ease infinite;
}
.goods-detail-skeleton-action .skeleton-action-btn:last-child {
margin-right: 0;
}
.goods-detail-skeleton-action .skeleton-action-btn.primary {
background: linear-gradient(90deg, #d8d8d8 25%, #ececec 37%, #d8d8d8 50%);
background-size: 400% 100%;
}
@keyframes skActAnim {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style>
<style scoped>
.ai-chat-float-btn {

View File

@@ -384,5 +384,14 @@ export default {
border-radius: 20rpx 20rpx 0 0;
}
// 购物车页面SKU弹窗底部按钮上移,避开底部导航栏
::v-deep .goods-sku .sku-info .footer {
bottom: calc(30rpx + env(safe-area-inset-bottom) + 112rpx) !important;
}
::v-deep .goods-sku .sku-info .body-item {
padding-bottom: 112rpx;
}
@import './public/css/cart.scss';
</style>

View File

@@ -1,6 +1,7 @@
<template>
<view :style="themeColor">
<view v-show="diyData && diyData.value && diyData.value.length">
<!-- 使用 item.id / componentName 稳定 key 避免 v-for 在 diyData 整体重赋值时把组件整个销毁重建, 引发频闪 -->
<view v-if="diyData && diyData.value && diyData.value.length">
<block v-for="(item, index) in diyData.value" :key="index">
<view v-if="item.componentName == 'GoodsCategory'">
<diy-category @tologin="toLogin" ref="category" :value="item"></diy-category>
@@ -15,8 +16,8 @@
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<!-- 底部tabBar: loading 期间隐藏, 等 loading-cover 关闭后下一 tick 再挂载, 避免 TabBar 与 loading-cover 同时 GPU 合成导致频闪 -->
<view id="tab-bar" v-if="!loadingVisible">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
@@ -27,7 +28,13 @@ export default {
data() {
return {
diyData: { value: [] },
mpShareData: null //小程序分享数据
mpShareData: null, //小程序分享数据
// 修复底部 TabBar 频闪: 用本地 loadingVisible 状态镜像 <loading-cover> 的可见性,
// loading-cover 的 spin 动画与 diy-bottom-nav 都是 fixed/z-index 高 + GPU 合成,
// 在 MP-Weixin 下会互相触发重绘, 让用户看到 TabBar 抖动。
// 策略: loading-cover 显示期间, 也把 tabBar 先收起来, loading-cover 隐藏后
// 下一次 nextTick 再放出 tabBar, 把整段 loading 过程的合成层冲突降到最低。
loadingVisible: true
};
},
onLoad() {
@@ -40,8 +47,13 @@ export default {
this.$util.hideHomeButton();
try {
// 鸿蒙元服务 JSVM 下 $refs.category 可能为 undefined, 需防御
if (this.$refs.category && this.$refs.category[0]) {
// 节流: 避免 onShow 重复触发 pageShow() 中的 getHeightArea(-1) 高耗时选择器查询, 引起频闪和性能损耗
const now = Date.now();
if (this._lastPageShowTime && now - this._lastPageShowTime < 500) {
// 短时间内重复触发, 跳过本次 pageShow
} else if (this.$refs.category && this.$refs.category[0]) {
this.$refs.category[0].pageShow();
this._lastPageShowTime = now;
}
} catch (e) {
console.warn('onShow pageShow failed', e);
@@ -109,6 +121,13 @@ export default {
this._diyInfoLoading = false;
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
uni.stopPullDownRefresh();
// loading-cover 收起后, 等下一 tick 让出 frame, 再挂载 diy-bottom-nav
// (避免两个 fixed 高 z-index GPU 合成层在同帧 mount 触发 MP-Weixin 重绘频闪)
this.$nextTick(() => {
this.$nextTick(() => {
this.loadingVisible = false;
});
});
}
});
},

View File

@@ -1,12 +1,14 @@
<template>
<view :style="themeColor">
<!-- 鸿蒙兼容: themeColor 是 CSS 变量字符串, 鸿蒙 JSVM 早期版本对 :style="字符串" 处理可能不稳.
兜底: 只有非空字符串才绑定 :style. -->
<view :style="themeColor || undefined">
<!-- #ifndef H5 -->
<!-- <view class="page-header" v-if="goodsSkuDetail && goodsSkuDetail.config && goodsSkuDetail.config.nav_bar_switch == 0">
<ns-navbar :data="navbarData" :isBack="!isTabRootPage"></ns-navbar>
</view> -->
<!-- #endif -->
<goods-detail-view :goodsSkuDetail="goodsSkuDetail" ref="goodsDetailView" @aiChatClick="sendToAIChat(goodsSkuDetail)">
<goods-detail-view :goodsSkuDetail="goodsSkuDetail" :loading="loading" ref="goodsDetailView" @aiChatClick="sendToAIChat(goodsSkuDetail)">
<!-- 价格区域 -->
<template v-slot:price>
<!-- 限时折扣 -->
@@ -15,7 +17,7 @@
<view class="icon-box"><text class="iconfont icon-tutechan"></text></view>
<view class="price-box">
<view class="promotion-text">{{ $lang('goods.detail.limitedTimeDiscount') }}</view>
<view class="sale-num" v-if="goodsSkuDetail.sale_show">{{ $lang('goods.detail.sold') }}{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}</view>
<view class="sale-num" v-if="goodsSkuDetail.sale_show && !isPhoneConsult">{{ $lang('goods.detail.sold') }}{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}</view>
</view>
</view>
@@ -72,7 +74,9 @@
</view>
<view class="follow-and-share">
<text class="follow iconfont icon-share" @click="openSharePopup()"></text>
<!-- #ifndef MP-HARMONY -->
<text class="share iconfont" @click="editCollection()" :class="whetherCollection == 1 ? 'icon-likefill color-base-text' : 'icon-guanzhu'"></text>
<!-- #endif -->
</view>
</block>
<block v-else>
@@ -90,8 +94,8 @@
<text class="tag-item">{{ goodsSkuDetail.label_name }}</text>
</view>
<view class="logistics-wrap">
<text v-if="goodsSkuDetail.stock_show">{{$lang('goods.detail.stock')}}: {{ goodsSkuDetail.stock +goodsSkuDetail.unit}}</text>
<text v-if="goodsSkuDetail.sale_show">{{$lang('goods.detail.sales')}}: {{ goodsSkuDetail.sale_num+goodsSkuDetail.unit }}</text>
<text v-if="goodsSkuDetail.stock_show && !isPhoneConsult">{{$lang('goods.detail.stock')}}: {{ goodsSkuDetail.stock +goodsSkuDetail.unit}}</text>
<text v-if="goodsSkuDetail.sale_show && !isPhoneConsult">{{$lang('goods.detail.sales')}}: {{ goodsSkuDetail.sale_num+goodsSkuDetail.unit }}</text>
</view>
<!-- 会员卡 -->
<!-- <view class="member-card-wrap" @click="$util.redirectTo('/pages_tool/member/card_buy')" v-if="membercard">
@@ -411,7 +415,17 @@
</view> -->
<!-- v-if="goodsSkuDetail.goodsForm" -->
<view style="padding: 0 30rpx;">
<ns-form :data="informationform" ref="form"></ns-form>
<!-- 表单暂无字段时的友好提示, 避免"打开弹窗却什么都不显示"困惑用户 -->
<view v-if="!formDiyValue || !formDiyValue.jsonData || !formDiyValue.jsonData.length" class="form-empty" style="padding: 60rpx 0; text-align: center; color: #999;">
{{ $lang('goods.detail.formEmptyTip') }}
</view>
<diy-form
v-else
:value="formDiyValue"
dataMode="raw"
:show-submit="false"
ref="form"
></diy-form>
</view>
</scroll-view>
<view class="button-box"><button type="primary" @click="saveubfirnation()">{{ $lang('goods.detail.confirm') }}</button></view>
@@ -445,17 +459,21 @@
/>
<block v-else>
<ns-goods-action-icon :text="$lang('goods.detail.home')" icon="icon-shouye1" @click="goHome" />
<!-- #ifdef MP-WEIXIN -->
<ns-goods-action-icon
:text="$lang('goods.detail.cart')"
<ns-goods-action-icon
v-if="!isPhoneConsult"
:text="$lang('goods.detail.cart')"
:cornerMarkBg="themeStyle.goods_cart_num_corner"
icon="icon-gouwuche2"
:corner-mark="cartNumber > 0 ? cartNumber + '' : ''"
@click="goCart"
/>
/>
<ns-goods-action-icon :text="$lang('goods.detail.kefu')" icon="icox icox-kefu" :send-data="contactData" :chatParam="chatRoomParams" />
<!-- #endif -->
<!-- #ifdef MP-HARMONY -->
<!-- 鸿蒙平台: 隐藏购物车、客服、收藏按钮 -->
<!-- #endif -->
<!-- #ifdef H5 -->
<ns-goods-action-icon :text="$lang('goods.detail.follow')" :icon="whetherCollection == 1 ? 'icon-likefill color-base-text' : 'icon-guanzhu'" @click="editCollection" />
<!-- #endif -->
@@ -511,7 +529,9 @@
</goods-detail-view>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
<!-- 商品详情页已有骨架屏, 不再启用 loading-cover 全屏遮罩(initShow=false),
否则骨架屏会被遮罩盖住、用户看不到任何占位过渡 -->
<loading-cover ref="loadingCover" :initShow="false"></loading-cover>
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
@@ -545,6 +565,25 @@ export default {
nsGoodsPromotion
},
mixins: [base, detail, scroll],
computed: {
// 后台选择"电话立即咨询"模式(isinformation == 1)时,隐藏购物车图标、库存和销量
isPhoneConsult() {
return this.goodsSkuDetail && this.goodsSkuDetail.isinformation == 1;
},
// diy-form raw 模式 value:banner/tip 由独立列归一化后的 goods_form_* 提供,
// 与 formdata.vue 的 diyValue 同源;本页 :show-submit="false" 走外部"确定"按钮提交。
formDiyValue() {
const sku = this.goodsSkuDetail || {};
return {
jsonData: sku.goods_form || [],
formConfig: sku.goods_form_config || {},
show_banner: sku.goods_form_show_banner === true,
form_banner: sku.goods_form_banner || '',
show_tip: sku.goods_form_show_tip === true,
form_tip: sku.goods_form_tip || ''
};
}
},
methods: {
/**
* 发送商品信息到智能客服
@@ -569,7 +608,7 @@ export default {
uni.setStorageSync('selectedProduct', productInfo);
uni.navigateTo({
url: '/pages_tool/ai-chat/index'
url: this.$util.PAGE_KEY_MAP.PAGE_AI_CHAT
});
},

View File

@@ -40,7 +40,9 @@ export default {
this.isAction = false;
},
onUnload() {
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
if (!this.storeToken && this.$refs.login && typeof this.$refs.login.cancelCompleteInfo === 'function') {
this.$refs.login.cancelCompleteInfo();
}
},
onReady() {
if (!this.storeToken) {

View File

@@ -4,7 +4,10 @@ export default {
goodsRoute: '/pages_goods/detail',
couponList: [], //优惠券列表
couponBtnSwitch: false, //获取优惠券防止重复提交
// 商品详情骨架屏:true 显示骨架,false 显示真实内容
// 首屏进入即为 true,商品详情数据首屏渲染完成后(与 loading-cover 同时机)置 false
loading: true,
posterApi: '/api/goods/poster',
//满减活动
@@ -24,9 +27,10 @@ export default {
membercard: null, // 会员卡信息
hackReset: true,
cardOff: false,
informationform:[]//留言表单
cardOff: false
// 留言表单数据不再在 data() 维护:detail.vue 的 computed formDiyValue
// 直接从 goodsSkuDetail.goods_form / goods_form_config / goods_form_* 实时读取并打包成
// diy-form raw 模式期望的 value 结构。
}
},
computed: {
@@ -52,11 +56,19 @@ export default {
}
return discount.toFixed(2);
},
//表单高度
FormHeight(){
let height = 48;
if (this.goodsForm && this.goodsForm.length) {
height += this.goodsForm.length * 5;
// 弹窗高度: 受限于视口, 内部表单 <scroll-view> 自带滚动, 不再按字段数无限加高
FormHeight() {
// 上限 65vh: 留足顶部状态栏/导航栏 + 底部 home indicator, 也不会显得"一打开就半屏遮脸"
// 字段多时通过内部 <scroll-view scroll-y> 自然滚动
const formList = (this.goodsSkuDetail && this.goodsSkuDetail.goods_form)
|| this.goodsForm;
let height = 45;
if (formList && formList.length) {
// 少量字段: 每个约 5vh; 字段多时递增放缓并封顶, 避免接近屏顶
// 5 个字段 → 45 + min(10, 25) = 55vh
// 10 个字段 → 45 + min(10, 50) = 55vh (已封顶)
const dynamic = Math.min(10, formList.length * 5);
height = Math.min(55, height + dynamic);
}
height += 'vh';
return height;
@@ -88,8 +100,19 @@ export default {
// #endif
},
async onShow() {
//同步获取商品详情
await this.getGoodsSkuDetail();
// 同步获取商品详情
// 鸿蒙元服务兼容: 包 try/catch, 防止内部任何抛错导致整个 page 显示空白
try {
await this.getGoodsSkuDetail();
} catch (e) {
console.error('getGoodsSkuDetail failed:', e);
// 失败时不关闭骨架屏, 由视图层 hasRealData(goods_id>0) 自动保留占位,
// 避免错误地把页面切到"空详情"状态
uni.showToast({
title: this.$lang ? this.$lang('common.networkError') : '网络异常,请重试',
icon: 'none'
});
}
},
onHide() {
this.couponBtnSwitch = false;
@@ -111,14 +134,28 @@ export default {
},
// 获取商品详情
async getGoodsSkuDetail() {
let res = await this.$api.sendRequest({
url: '/api/goodssku/detail',
async: false,
data: {
sku_id: this.skuId,
goods_id: this.goodsId,
let res;
try {
// 修复鸿蒙元服务: 必须传 async: false !
// 当 App.vue 的 boot (lang/theme/remote-config) 未完成时,
// sendRequest 在 async !== false 模式下会直接 return undefined (不返回 promise),
// 导致 res.code undefined / res.data 抛 TypeError, 整个 onShow 失败.
res = await this.$api.sendRequest({
url: '/api/goodssku/detail',
async: false,
data: {
sku_id: this.skuId,
goods_id: this.goodsId,
}
});
// 防御: 即便 async:false 仍可能在极端情况下返回 undefined
if (!res || typeof res !== 'object') {
throw new Error('sendRequest returned non-object response (likely boot not complete)');
}
});
} catch (e) {
console.error('getGoodsSkuDetail sendRequest failed:', e);
throw e;
}
let data = res.data;
if (data.goods_sku_detail != null) {
if (data.goods_sku_detail.promotion_type == 'presale' && data.goods_sku_detail.presale_id) {
@@ -129,7 +166,10 @@ export default {
return;
}
if(uni.getStorageSync('lang') == 'en-us') data.goods_sku_detail.goods_name = data.goods_sku_detail.en_goods_name
// 关键改动: 先一次性赋值, 释放事件循环让 MP-Weixin 把首屏 (含媒体/价格/标题) 渲出来,
// 再 $nextTick 后才跑同步字段变换 (sku_images split / JSON.parse / 属性去重 等),
// 避免连续多次 Vue 响应式写触发同一帧内多次 vdom 重算, 显著改善"打开详情很慢"的体感。
this.goodsSkuDetail = data.goods_sku_detail;
if (!this.skuId) this.skuId = this.goodsSkuDetail.sku_id;
if (!this.goodsId) this.goodsId = this.goodsSkuDetail.goods_id;
@@ -141,7 +181,10 @@ export default {
this.chatRoomParams = {
sku_id: this.goodsSkuDetail.sku_id
};
let typeId = this.goodsSkuDetail.goods_promotion[0];
// 鸿蒙兼容: 后端在部分场景下可能不返回 goods_promotion, 缺字段直接 .[0] 会抛 TypeError,
// 整个 onShow 走 catch 路径无法关闭骨架屏, 表现为"数据已回来但永远显示骨架屏"
const promotionList = this.goodsSkuDetail?.goods_promotion || [];
let typeId = promotionList.length > 0 ? promotionList[0] : undefined;
if (typeId) {
// 限时折扣
if (typeId.discount_id) {
@@ -155,8 +198,28 @@ export default {
goods_id: this.goodsId
};
// 处理商品数据
this.handleGoodsSkuData();
// 让首屏主区域先绘制
// 兼容鸿蒙元服务: $nextTick 在某些 JSVM 实现下不可靠, 用 setTimeout 兜底
// #ifdef MP-HARMONY
await new Promise(resolve => setTimeout(resolve, 16));
// 修复鸿蒙元服务: 不依赖 setTimeout 关闭骨架屏.
// 鸿蒙 JSVM 在 onShow 早期窗口的 setTimeout 回调有时被推迟/丢弃, 表现为"数据已回来但永远显示骨架屏".
// 数据已赋值 + 首屏让步, 同步直接关闭骨架屏, 由 hasRealData 兜底避免空详情.
this.loading = false;
// #endif
// #ifndef MP-HARMONY
await this.$nextTick();
// 关闭商品详情骨架屏: 在真实数据首屏渲染完成后再隐藏骨架屏,
// 用户会看到骨架屏 → 真实详情 的清晰过渡
// 最短展示 300ms: 数据请求很快时也保留足够感知时间, 否则一闪而过用户根本看不到骨架屏
setTimeout(() => {
this.loading = false;
}, 300);
// #endif
// 处理商品数据 (同步字段变换 + 后台并发 getGoodsForm)
await this.handleGoodsSkuData();
// 限时折扣
if (this.goodsSkuDetail.promotion_type == 1 && this.addonIsExist.discount) {
@@ -192,7 +255,7 @@ export default {
}
// 优惠券
if (this.goodsSkuDetail.coupon_list) {
if (Array.isArray(this.goodsSkuDetail.coupon_list)) {
this.couponList = this.goodsSkuDetail.coupon_list;
this.couponList.forEach(v => {
if (v.count == v.lead_count) v.useState = 2;
@@ -207,8 +270,6 @@ export default {
// this.handleBundlingData(this.goodsSkuDetail.bundling_list);
// }
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
} else {
this.$util.redirectTo('/pages_tool/goods/not_exist', {}, 'redirectTo');
}
@@ -220,9 +281,35 @@ export default {
},
//商品留言打开
showinformation(){
this.informationform = this.goodsSkuDetail.goods_form
this.$refs.informationPopup.open();
async showinformation(){
// 修复: 第一次打开时, uni-popup 内部 <scroll-view><diy-form> 还没完成首次渲染,
// 直接 open() 会让用户看到空白弹窗。这里:
// 1) 若商品表单后台请求尚未完成 (或根本没触发), 先发起并 await 该请求
// 2) 用 $nextTick 等组件挂载完成后再打开
try {
// 若页面已进入但 _goodsFormPromise 还没建 (如 sku 切换/数据未到等场景),
// 这里补一个并发请求; 若已存在, 复用旧 promise 不重复请求。
if (!this._goodsFormPromise || typeof this._goodsFormPromise.then !== 'function') {
const loader = (this.getGoodsForm && typeof this.getGoodsForm === 'function')
? this.getGoodsForm()
: Promise.resolve();
this._goodsFormPromise = loader;
await loader;
} else {
await this._goodsFormPromise;
}
} catch (e) {
console.warn('await goods form promise failed', e);
}
// 第一次强制刷新 popup 内部组件布局 (nextTick), 确保表单完整渲染
// 兼容鸿蒙元服务: $nextTick 不可靠时降级到 setTimeout
try { await this.$nextTick(); } catch (e) { /* 兜底 */ }
// 微信小程序下 scroll-view 在首次以 transform 隐藏后再显示时, 内部子节点布局可能未刷新
// 双 nextTick 兜底, 保证表单完整可见
try { await this.$nextTick(); } catch (e) { /* 兜底 */ }
if (this.$refs.informationPopup && typeof this.$refs.informationPopup.open === 'function') {
this.$refs.informationPopup.open();
}
},
//商品留言关闭
closeinformationPopup(){
@@ -230,18 +317,18 @@ export default {
},
//保存商品留言
saveubfirnation(){
//缺少
// ref 指向 <diy-form>:diy-form 只暴露 getFormData() 方法,无 formData 属性
if (!this.$refs.form.verify()) return;
// uni.setStorageSync('goodFormData', {
// goods_id: this.goodsSkuDetail.goods_id,
// form_data: this.$refs.form.formData
// form_data: this.$refs.form.getFormData()
// });
this.$api.sendRequest({
url: '/api/goods/information',
data: {
goods_id: this.goodsSkuDetail.goods_id,
form_data: JSON.stringify(this.$refs.form.formData)
form_data: JSON.stringify(this.$refs.form.getFormData())
},
success: res => {
var data = res.data;

View File

@@ -37,7 +37,7 @@ export default {
fontWeight: false,
padding: 0,
cartEvent: "detail",
text: "购买",
text: "",
textColor: "#FFFFFF",
theme: "default",
aroundRadius: 25,
@@ -67,7 +67,7 @@ export default {
},
onLoad(options) {
this.config.text = this.$lang('goods.list.buyText');
this.config.text = this.$lang('goods.list.buyText') || this.$lang('buyNow');
this.$api.sendRequest({
url: '/api/lucky/status',

View File

@@ -234,7 +234,7 @@
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
<text class="tit">{{ $lang('order.payment.orderMoney.coupon') }}</text>
<view class="box text-overflow"@click="openSiteCoupon(calculateGoodsData.merch_id)">
<template v-if="orderCreateData.coupon[calculateGoodsData.merch_id].coupon_id">
<template v-if="(orderCreateData.coupon && orderCreateData.coupon[calculateGoodsData.merch_id] && orderCreateData.coupon[calculateGoodsData.merch_id].coupon_id)">
<text class="money price-font" style="max-width: 100%;">{{ $lang('order.payment.orderMoney.couponSelected', { count: 1 }) }}</text>
<!-- <text class="unit price-font">优惠</text>
<text class="money price-font">{{ (calculateData && calculateData.coupon_money ? calculateData.coupon_money : 0) | moneyFormat }}</text> -->
@@ -550,7 +550,7 @@
<view v-if="couponItem.type == 'discount' && couponItem.discount_limit > 0" class="limit">{{ $lang('order.payment.couponPopup.maxDiscount', { amount: couponItem.discount_limit }) }}</view>
<view class="time font-size-goods-tag">{{ $lang('order.payment.couponPopup.validPeriod') }}{{ couponItem.end_time ? $util.timeStampTurnTime(couponItem.end_time) : $lang('order.payment.couponPopup.permanentValid') }}</view>
</view>
<view class="iconfont" :class="selectCouponId == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
<view class="iconfont" :class="selectCouponMap[merchCoupon.merch_id] == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
</view>
</view>
</view>

View File

@@ -55,7 +55,8 @@ export default {
merch_id: 0,
data: []
},
selectCouponId:0
// 按 merch_id 隔离,避免多商户之间互相污染
selectCouponMap: {}
}
},
inject: ['promotion'],
@@ -85,7 +86,7 @@ export default {
goodsData() {
if (this.paymentData) {
this.paymentData.goods_list.forEach(item => {
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
if (item.sku_spec_format && typeof item.sku_spec_format === 'string') item.sku_spec_format = JSON.parse(item.sku_spec_format);
})
return this.paymentData;
}
@@ -93,7 +94,7 @@ export default {
calculateGoodsData() {
if (this.calculateData) {
this.calculateData.goods_list.forEach(item => {
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
if (item.sku_spec_format && typeof item.sku_spec_format === 'string') item.sku_spec_format = JSON.parse(item.sku_spec_format);
})
return this.calculateData;
}
@@ -189,7 +190,7 @@ export default {
//多商户商品分类
goodsSpecFormat(goods_list){
goods_list.forEach(item => {
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
if (item.sku_spec_format && typeof item.sku_spec_format === 'string') item.sku_spec_format = JSON.parse(item.sku_spec_format);
})
return goods_list
},
@@ -249,7 +250,11 @@ export default {
this.modules = data.modules;
//记录多商户优惠券
this.orderCreateData.coupon = data.coupon
// 兜底为对象,避免后续被当作数组处理
if (!data.coupon || typeof data.coupon !== 'object' || Array.isArray(data.coupon)) {
data.coupon = {};
}
this.orderCreateData.coupon = data.coupon;
//查询优惠券
this.getCouponList();
@@ -365,7 +370,17 @@ export default {
}
});
//多商户
this.orderCreateData.coupon = res.data.coupon
// 保留用户已选的 coupon_id,后端回传的 res.data.coupon 默认都是 0 会覆盖掉
const prevCoupon = (this.orderCreateData.coupon && typeof this.orderCreateData.coupon === 'object' && !Array.isArray(this.orderCreateData.coupon)) ? this.orderCreateData.coupon : {};
this.orderCreateData.coupon = res.data.coupon || {};
if (this.orderCreateData.coupon && typeof this.orderCreateData.coupon === 'object' && !Array.isArray(this.orderCreateData.coupon)) {
Object.keys(prevCoupon).forEach(merch_id => {
const chosen = prevCoupon[merch_id] && prevCoupon[merch_id].coupon_id;
if (chosen && (!this.orderCreateData.coupon[merch_id] || !this.orderCreateData.coupon[merch_id].coupon_id)) {
this.orderCreateData.coupon[merch_id] = { coupon_id: chosen };
}
});
}
// if (!res.data.coupon_id) this.orderCreateData.coupon.coupon_id = 0;
// else this.orderCreateData.coupon.coupon_id = res.data.coupon_id;
@@ -731,44 +746,52 @@ export default {
this.tempData = null;
},
//优惠券单独多商户
/**
* 显示店铺优惠券信息
* @param {Object} siteId
* @param {Object} couponData
*/
openSiteCoupon(merch_id) {
this.tempData = this.$util.deepClone(this.orderCreateData);
this.merchCoupon.merch_id = merch_id;
this.selectCouponId = this.orderCreateData.coupon[merch_id].coupon_id;
// this.selectCouponMoney = this.orderCreateData.coupon[siteId].coupon_money;
this.merchCoupon.data = this.coupon_list[merch_id];
this.$refs.couponPopup.open();
this.$forceUpdate();
},
/**商户选择券*/
selectCoupon(data,merch_id) {
// if (this.orderCreateData.coupon[merch_id].coupon_id == data.coupon_id){
// this.orderCreateData.coupon[merch_id].coupon_id = 0
// }else{
// this.orderCreateData.coupon[merch_id].coupon_id = data.coupon_id
// };
if (this.selectCouponId != data.coupon_id) {
this.selectCouponId = data.coupon_id;
} else {
this.selectCouponId = 0;
}
this.$forceUpdate();
// this.orderCreateData.coupon[merch_id].coupon_id = data.coupon_id
},
//确定使用优惠券
useCpopon() {
this.orderCreateData.coupon[this.merchCoupon.merch_id].coupon_id = this.selectCouponId;
this.$refs.couponPopup.close();
this.calculate();
},
/**
* 显示店铺优惠券信息
* @param {Object} siteId
* @param {Object} couponData
*/
openSiteCoupon(merch_id) {
this.tempData = this.$util.deepClone(this.orderCreateData);
this.merchCoupon.merch_id = merch_id;
// 从当前订单已选的 coupon_id 取值,没有则取弹窗里缓存的,再没有为 0
const exist = this.orderCreateData.coupon && this.orderCreateData.coupon[merch_id];
const cached = this.selectCouponMap[merch_id] || 0;
this.selectCouponMap[merch_id] = exist ? (exist.coupon_id || 0) : cached;
// this.selectCouponMoney = this.orderCreateData.coupon[siteId].coupon_money;
// 兜底: 列表为空时给一个空数组,弹窗不会渲染空指针
this.merchCoupon.data = (this.coupon_list && this.coupon_list[merch_id]) || [];
this.$refs.couponPopup.open();
this.$forceUpdate();
},
/**商户选择券*/
selectCoupon(data, merch_id) {
// if (this.orderCreateData.coupon[merch_id].coupon_id == data.coupon_id){
// this.orderCreateData.coupon[merch_id].coupon_id = 0
// }else{
// this.orderCreateData.coupon[merch_id].coupon_id = data.coupon_id
// };
const cur = this.selectCouponMap[merch_id] || 0;
this.selectCouponMap[merch_id] = (cur != data.coupon_id) ? data.coupon_id : 0;
this.$forceUpdate();
// this.orderCreateData.coupon[merch_id].coupon_id = data.coupon_id
},
//确定使用优惠券
useCpopon() {
const merch_id = this.merchCoupon.merch_id;
// 确保 orderCreateData.coupon 是对象结构,后端按 merch_id 取值
if (!this.orderCreateData.coupon || typeof this.orderCreateData.coupon !== 'object' || Array.isArray(this.orderCreateData.coupon)) {
this.orderCreateData.coupon = {};
}
this.orderCreateData.coupon[merch_id] = {
coupon_id: this.selectCouponMap[merch_id] || 0
};
this.$refs.couponPopup.close();
this.calculate();
},
//-------------------
/**

View File

@@ -39,7 +39,7 @@ export default {
fontWeight: false,
padding: 0,
cartEvent: "detail",
text: this.$lang('merch.list.buyText'),
text: '',
textColor: "#FFFFFF",
theme: "default",
aroundRadius: 25,
@@ -66,6 +66,7 @@ export default {
},
onLoad(options) {
this.config.text = this.$lang('merch.list.buyText');
this.categoryId = options.category_id || 0;
this.keyword = options.keyword || '';
this.coupon = options.coupon || 0;

View File

@@ -180,7 +180,13 @@ export default {
}
::v-deep .mescroll-totop {
/* #ifdef H5 */
right: 27rpx !important;
bottom: 120rpx !important;
/* #endif */
/* #ifdef MP */
right: 27rpx !important;
bottom: 180rpx !important;
/* #endif */
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -263,7 +263,10 @@ export default {
// 搜索入口按钮
.search-entrance {
position: absolute;
top: 44rpx;
/* 与新对话按钮垂直居中对齐:
.chat-topbar padding-top 16rpx + 按钮高 52rpx => 按钮中心 42rpx,
本按钮 icon-only 高 56rpx, 故 top = 42 - 56/2 = 14rpx */
top: 14rpx;
right: 16rpx;
z-index: 10;
display: flex;

View File

@@ -9,27 +9,38 @@
</button>
</view>
<view class="tools-grid">
<view class="tool-item" @click="selectImage">
<!-- PR-CHAT-UI-CONFIG (2026-09-20): 每个附件 tab 由 attachmentTypes 控制显隐
支持的 kind: image / file / audio / video, 缺失的 kind 自动隐藏
location 不属于附件, 不受此开关控制 -->
<view v-if="isTypeEnabled('image')" class="tool-item tool-item-new tool-item-image" @click="selectImage">
<view class="tool-icon">
<text class="iconfont icon-image"></text>
<view class="image-icon"></view>
</view>
<text class="tool-text">{{ $lang('ai-chat.index.image') }}</text>
</view>
<view class="tool-item" @click="selectFile">
<view v-if="isTypeEnabled('video')" class="tool-item tool-item-new tool-item-video" @click="selectVideo">
<view class="tool-icon">
<text class="iconfont icon-file"></text>
<text class="icondiy icon-system-video"></text>
</view>
<text class="tool-text">{{ $lang('ai-chat.index.file') }}</text>
<!-- 第二个参数是 $lang 的默认值: 后端 bundle 尚未下发该 key 时也不会显示 raw key -->
<text class="tool-text">{{ $lang('ai-chat.index.video', '视频/音频') }}</text>
</view>
<view class="tool-item" @click="startRecord">
<view v-if="isTypeEnabled('file')" class="tool-item tool-item-new tool-item-file" @click="selectFile">
<view class="tool-icon">
<text class="iconfont icon-voice"></text>
<view class="paperclip-icon"></view>
</view>
<text class="tool-text">添加文件</text>
</view>
<!-- 更多功能里的语音入口暂时隐藏 -->
<view v-if="false" class="tool-item" @click="selectVoiceOrAudio">
<view class="tool-icon">
<text class="icondiy icon-system-chat-voice-line"></text>
</view>
<text class="tool-text">{{ $lang('ai-chat.index.voice') }}</text>
</view>
<view class="tool-item" @click="selectLocation">
<view v-if="false" class="tool-item tool-item-new tool-item-location" @click="selectLocation">
<view class="tool-icon">
<text class="iconfont icon-location"></text>
<text class="icondiy icon-system-map-pin-line"></text>
</view>
<text class="tool-text">{{ $lang('ai-chat.index.location') }}</text>
</view>
@@ -39,16 +50,20 @@
</template>
<script>
import { uploadImage, uploadMedia } from '@/common/js/media-upload.js'
/**
* ai-chat-tools-panel - 更多工具面板组件
*
* Props:
* visible: Boolean - 控制显示/隐藏
* attachmentTypes: Array<String> - PR-CHAT-UI-CONFIG (2026-09-20) 可启用的附件 kind 列表
* 默认 ['image','file','audio','video'], 后端 chat_ui_config.ui_enable_attachment_types 可裁剪
* location 不属于附件, 不受此 prop 影响
*
* Events:
* update:visible - 同步关闭状态
* image-selected - 选择图片,参数:图片消息对象
* file-selected - 选择文件,参数:文件消息对象
* file-selected - 选择文件/视频/音频,参数:消息对象 (type: 'file' | 'video' | 'audio')
* voice-start - 开始语音
* location-selected - 选择位置,参数:位置消息对象
*/
@@ -59,6 +74,12 @@ export default {
visible: {
type: Boolean,
default: false
},
attachmentTypes: {
type: Array,
default: function () {
return ['image', 'file', 'audio', 'video']
}
}
},
@@ -73,75 +94,308 @@ export default {
this.$emit('update:visible', false)
},
// PR-CHAT-UI-CONFIG (2026-09-20): 判断某个附件 kind 是否启用
// undefined/空数组 → 兜底全部启用 (保留老调用方的体感)
isTypeEnabled(kind) {
if (!this.attachmentTypes || !this.attachmentTypes.length) return true
return this.attachmentTypes.indexOf(kind) !== -1
},
selectImage() {
const that = this
uni.chooseImage({
count: 1,
count: 9,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const imageMessage = {
id: ++this.messageId,
role: 'user',
type: 'image',
content: '',
imageUrl: res.tempFilePaths[0],
timestamp: Date.now()
that.hideToolsPanel()
// 新交互: 选图后不直接进聊天区, 交给父组件作为输入框附件预览,
// 用户可继续输入文字, 点发送时图文一起发出
that.$emit('image-picked', res.tempFilePaths || [])
},
fail: (err) => {
if (err.errMsg && !err.errMsg.includes('cancel')) {
uni.showToast({ title: '选图失败', icon: 'none' })
}
this.hideToolsPanel()
this.$emit('image-selected', imageMessage)
}
})
},
selectFile() {
const that = this
// #ifdef H5
const input = document.createElement('input')
input.type = 'file'
input.accept = '*/*'
input.onchange = (e) => {
input.onchange = async (e) => {
const file = e.target.files[0]
if (file) {
const fileMessage = {
id: ++this.messageId,
role: 'user',
type: 'file',
content: '',
fileName: file.name,
fileSize: file.size,
fileType: file.type,
timestamp: Date.now()
}
this.hideToolsPanel()
this.$emit('file-selected', fileMessage)
}
if (!file) return
that.hideToolsPanel()
await that._uploadOneFile(file, file.type.startsWith('image/') ? 'image' : 'file')
}
input.click()
// #endif
// #ifdef MP-WEIXIN
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 微信小程序需要用 wx.chooseMessageFile
// 原代码 selectFile 只有 H5 + APP-PLUS 分支, 微信小程序里 "文件" 按钮是死按钮
// uni-app 3.x 暴露了 uni.chooseMessageFile; 老版本/部分编译目标只有 wx.chooseMessageFile, 都兼容
const chooseFileApi = (typeof uni.chooseMessageFile === 'function')
? uni.chooseMessageFile
: (typeof wx !== 'undefined' ? wx.chooseMessageFile : null)
if (!chooseFileApi) {
uni.showToast({ title: '当前平台不支持文件选择', icon: 'none' })
return
}
chooseFileApi({
count: 1,
type: 'all', // 'all' | 'video' | 'image' | 'file' — 'all' 最宽松, 用户可发任何文件
success: async (res) => {
that.hideToolsPanel()
// wx.chooseMessageFile 返回 tempFiles; uni 端 res.tempFiles 兼容
const file = (res.tempFiles && res.tempFiles[0]) || (res.tempFilePaths && res.tempFiles[0])
if (!file) return
// 微信选文件返回 path + size + name (无 type); 用 ext 推断
const ext = (file.name || file.path || '').split('.').pop().toLowerCase()
const kind = ['jpg','jpeg','png','gif','webp','heic','heif','avif','bmp','tif','tiff'].includes(ext) ? 'image' : 'file'
await that._uploadOneFile(file, kind)
},
fail: (err) => {
if (err.errMsg && !err.errMsg.includes('cancel')) {
uni.showToast({ title: '选文件失败', icon: 'none' })
}
},
})
// #endif
// #ifdef APP-PLUS
uni.chooseFile({
count: 1,
success: (res) => {
success: async (res) => {
that.hideToolsPanel()
const file = res.tempFiles[0]
const fileMessage = {
id: ++this.messageId,
role: 'user',
type: 'file',
content: '',
fileName: file.name,
fileSize: file.size,
fileType: file.type,
url: file.path,
timestamp: Date.now()
}
this.hideToolsPanel()
this.$emit('file-selected', fileMessage)
await that._uploadOneFile(file, 'file')
}
})
// #endif
},
// 选择「视频/音频」并上传 (H5 / 微信小程序 / App)
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): 原来 H5 只写 accept='video/*',
// 系统文件选择器会把本地 .mp3/.wav 等音频文件全部过滤掉, 用户看不到也选不了音频。
// 现在 accept 同时包含 audio/*, 选中后按 mime / 扩展名自动判定 kind (video | audio)。
selectVideo() {
const that = this
// #ifdef H5
const mediaInput = document.createElement('input')
mediaInput.type = 'file'
mediaInput.accept = 'video/*,audio/*'
mediaInput.onchange = async (e) => {
const file = e.target.files[0]
if (!file) return
that.hideToolsPanel()
await that._uploadOneFile(file, that._guessMediaKind(file))
}
mediaInput.click()
// #endif
// #ifdef MP-WEIXIN || APP-PLUS
// 小程序/App 没有"音视频二合一"的选择器, 用二次弹窗让用户明确选视频还是音频
uni.showActionSheet({
itemList: [
that.$lang('ai-chat.index.pickVideo', '选择视频'),
that.$lang('ai-chat.index.pickAudio', '选择音频')
],
success: (res) => {
if (res.tapIndex === 0) that._chooseVideo()
else if (res.tapIndex === 1) that.selectAudio()
},
fail: () => {}
})
// #endif
},
// 按 mime / 扩展名判断选中的文件是视频还是音频
_guessMediaKind(file) {
const type = (file && file.type ? file.type : '').toLowerCase()
if (type.indexOf('audio/') === 0) return 'audio'
if (type.indexOf('video/') === 0) return 'video'
const ext = String((file && file.name) || '').split('.').pop().toLowerCase()
// PR-AV-FULL-SUPPORT (2026-09-24): 与后端 MediaUploadPolicy::allowedUploadExtensions 音频段对齐
const audioExt = ['mp3', 'wav', 'aac', 'm4a', 'flac', 'ogg', 'oga', 'amr', 'wma', 'aiff', 'aif', 'opus', 'ape', 'mid', 'midi', 'caf', 'mka', 'ac3']
if (audioExt.indexOf(ext) !== -1) return 'audio'
// 兜底: mime 为空且扩展名不认识的 (如 Windows 未关联的音频) 交给后端按 URL 判断, 先按音频走
return type ? 'video' : 'audio'
},
// 选视频 (微信小程序 / App 共用)
_chooseVideo() {
const that = this
uni.chooseVideo({
sourceType: ['album', 'camera'],
compressed: true,
maxDuration: 60,
success: async (res) => {
that.hideToolsPanel()
await that._uploadOneFile({
path: res.tempFilePath,
size: res.size || 0,
duration: res.duration || 0,
name: 'video_' + Date.now() + '.mp4',
type: 'video/mp4'
}, 'video')
},
fail: (err) => {
if (err && err.errMsg && !err.errMsg.includes('cancel')) {
uni.showToast({ title: that.$lang('ai-chat.index.chooseVideoFail'), icon: 'none' })
}
}
})
},
// “语音/音频”: 提供 录制语音 / 上传音频 两种方式
selectVoiceOrAudio() {
uni.showActionSheet({
itemList: [
this.$lang('ai-chat.index.recordVoice'),
this.$lang('ai-chat.index.uploadAudio')
],
success: (res) => {
if (res.tapIndex === 0) {
this.startRecord()
} else if (res.tapIndex === 1) {
this.selectAudio()
}
},
fail: () => {}
})
},
// 选择音频文件并上传 (H5 / 微信小程序 / App)
selectAudio() {
const that = this
// #ifdef H5
const audioInput = document.createElement('input')
audioInput.type = 'file'
audioInput.accept = 'audio/*'
audioInput.onchange = async (e) => {
const file = e.target.files[0]
if (!file) return
that.hideToolsPanel()
await that._uploadOneFile(file, 'audio')
}
audioInput.click()
// #endif
// #ifdef MP-WEIXIN
// 微信小程序没有专门的音频选择 API, 用 chooseMessageFile 选文件后按扩展名过滤
const chooseFileApi = (typeof uni.chooseMessageFile === 'function')
? uni.chooseMessageFile
: (typeof wx !== 'undefined' ? wx.chooseMessageFile : null)
if (!chooseFileApi) {
uni.showToast({ title: that.$lang('ai-chat.index.chooseAudioFail'), icon: 'none' })
return
}
chooseFileApi({
count: 1,
type: 'file',
extension: ['mp3', 'wav', 'aac', 'm4a', 'flac', 'ogg', 'oga', 'amr', 'wma', 'aiff', 'aif', 'opus', 'ape', 'mid', 'midi', 'caf', 'mka', 'ac3'],
success: async (res) => {
const file = (res.tempFiles && res.tempFiles[0]) || null
if (!file) return
that.hideToolsPanel()
await that._uploadOneFile(file, 'audio')
},
fail: (err) => {
if (err && err.errMsg && !err.errMsg.includes('cancel')) {
uni.showToast({ title: that.$lang('ai-chat.index.chooseAudioFail'), icon: 'none' })
}
}
})
// #endif
// #ifdef APP-PLUS
uni.chooseFile({
count: 1,
extension: ['mp3', 'wav', 'aac', 'm4a', 'flac', 'ogg', 'oga', 'amr', 'wma', 'aiff', 'aif', 'opus', 'ape', 'mid', 'midi', 'caf', 'mka', 'ac3'],
success: async (res) => {
const file = res.tempFiles[0]
if (!file) return
that.hideToolsPanel()
await that._uploadOneFile(file, 'audio')
}
})
// #endif
},
async _uploadOneFile(file, kind) {
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): Blob URL 生命周期管理
// 原代码 URL.createObjectURL 出的 blob URL 永不释放, 长期跑会泄漏
// 统一: H5 创建 blob URL 用于预览, 上传完 (成功/失败都) revoke
let blobUrl = ''
let displayPath = ''
// #ifdef H5
// H5 file 对象没有 .path, 用 blob URL 给 imageUrl 预览, 并把 file 本身传给 uploadImage
blobUrl = file.name ? URL.createObjectURL(file) : ''
displayPath = blobUrl
// #endif
// #ifndef H5
// MP-WEIXIN / APP-PLUS 都用 file.path (tempFilePath)
displayPath = file.path || ''
// #endif
const pending = {
id: ++this.messageId,
role: 'user',
type: kind,
content: '',
fileName: file.name || (file.path ? file.path.split('/').pop() : ''),
fileSize: file.size || 0,
fileType: file.type || '',
// url 供音频/视频播放器使用; imageUrl 供图片/视频封面预览
url: displayPath,
duration: file.duration || 0,
// 音频播放状态 (audio 气泡点击播放/暂停需要, 预先声明保证响应式)
playing: false,
currentTime: 0,
imageUrl: displayPath,
uploading: true,
uploadError: null,
uploaded: null,
timestamp: Date.now()
}
this.$emit('file-selected', pending)
try {
// 传给 uploadImage/uploadMedia: H5 传 file 对象 (media-upload 内部 pathToFile 转),
// 非 H5 传 file.path (uni.uploadFile 需要)
const inputArg = blobUrl || file.path || file
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): H5 传的是 blob URL (无扩展名),
// 把原始 name/mime/size 传给 media-upload, 保证 STS 上传 key 保留 .mp3/.mp4 后缀,
// 否则云端存成 .bin + application/octet-stream, 音频/视频播放器拿不到正确 Content-Type
const uploaded = kind === 'image'
? await uploadImage(inputArg)
: await uploadMedia(inputArg, kind, { name: file.name, mime: file.type, size: file.size })
this.$set(pending, 'uploading', false)
this.$set(pending, 'uploaded', uploaded)
if (uploaded.url) {
this.$set(pending, 'imageUrl', uploaded.url)
this.$set(pending, 'url', uploaded.url)
}
} catch (e) {
this.$set(pending, 'uploading', false)
this.$set(pending, 'uploadError', e.message || '上传失败')
uni.showToast({ title: '上传失败: ' + (e.message || ''), icon: 'none' })
} finally {
// PR-FRONTEND-MEDIA-UPLOAD-FIX: blob URL 用完即释放 (无论成败)
if (blobUrl) {
try { URL.revokeObjectURL(blobUrl) } catch (e) {}
}
}
},
startRecord() {
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 仅作转发, 真正的录音由 ai-chat-voice-panel.vue 接管
// (panel 现在已经接通 common/js/voice-recorder.js, 这里不用直接调用 recorder)
this.$emit('voice-start')
this.hideToolsPanel()
},
@@ -209,11 +463,12 @@ export default {
margin-bottom: 32rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 16rpx;
position: relative; // 为 .close-btn 绝对定位提供参考
text {
font-size: 34rpx;
font-weight: 600;
color: $color-text;
font-size: 30rpx;
font-weight: 400;
color: #000000;
}
.close-btn {
@@ -225,17 +480,19 @@ export default {
align-items: center;
justify-content: center;
border: none;
position: absolute; // 绝对定位: 紧贴 panel 顶部、放在"位置"图标左上方
top: -8rpx;
right: 10rpx; //
.iconfont {
font-size: 28rpx;
color: $color-text-light;
color: #000000;
}
}
}
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 24rpx;
.tool-item {
@@ -257,7 +514,8 @@ export default {
margin-bottom: 16rpx;
box-shadow: $shadow-sm;
.iconfont {
.iconfont,
.icondiy {
font-size: 48rpx;
color: $color-primary;
}
@@ -269,6 +527,62 @@ export default {
font-weight: 500;
}
}
// 新样式: 图片 / 添加文件 大卡片, 一比一还原参考图
.tool-item-new {
background-color: #f2f3f5;
border-radius: 28rpx;
padding: 36rpx 0;
.tool-icon {
width: 48rpx;
height: 48rpx;
border-radius: 0;
background-color: transparent;
box-shadow: none;
margin-bottom: 6rpx;
line-height: 1;
.iconfont,
.icondiy {
font-size: 48rpx;
line-height: 1;
color: #333;
}
// 图片图标: 左上角开口 + 大四角星在开口处 + 右侧实心圆点 (参考图样式)
.image-icon {
width: 48rpx;
height: 48rpx;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTEuNCA1IEgxNy41IEEzLjUgMy41IDAgMCAxIDIxIDguNSBWMTUuNSBBMy41IDMuNSAwIDAgMSAxNy41IDE5IEg2LjUgQTMuNSAzLjUgMCAwIDEgMyAxNS41IFY4LjUiLz48cGF0aCBkPSJNNS4yIDEuMyBRNS45IDQuMzUgOC45IDUgUTUuOSA1LjY1IDUuMiA4LjcgUTQuNSA1LjY1IDEuNSA1IFE0LjUgNC4zNSA1LjIgMS4zIFoiIGZpbGw9IiMzMzMiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iOS44IiByPSIxLjUiIGZpbGw9IiMzMzMiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik01LjUgMTEuNiBRMTAgOS42IDE0LjUgMTYuNCIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
// 添加文件图标: 斜向回形针 (参考图样式)
.paperclip-icon {
width: 40rpx;
height: 40rpx;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEuNDQgMTEuMDUgMTIuMjUgMjAuMjRhNiA2IDAgMCAxLTguNDktOC40OWw4LjU3LTguNTdhNCA0IDAgMSAxIDUuNjYgNS42NmwtOC41OSA4LjU3YTIgMiAwIDAgMS0yLjgzLTIuODNsOC40OS04LjQ4Ii8+PC9zdmc+");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
.tool-text {
font-size: 26rpx;
line-height: 1;
color: #333;
font-weight: 500;
}
// 视频/音频图标小一号 (tool-item-video 与该元素同级, 必须用 & 连接)
&.tool-item-video .tool-icon .icondiy {
font-size: 40rpx;
}
}
}
}
}

View File

@@ -1,239 +1,403 @@
<template>
<view class="voice-popup" v-if="visible">
<view class="voice-mask" @click="hideVoicePanel"></view>
<view class="voice-input-panel">
<view class="voice-header">
<text>{{ $lang('ai-chat.index.voiceInputTitle') }}</text>
<button class="close-btn" @click="hideVoicePanel">
<text class="iconfont icon-close"></text>
</button>
</view>
<view class="voice-content">
<view class="voice-wave" :class="{ recording: voiceInputing }">
<view
v-for="i in 8"
:key="i"
class="wave-bar"
:style="{ animationDelay: (i * 0.1) + 's' }"></view>
</view>
<text class="voice-tip">{{ voiceInputing ? $lang('ai-chat.index.recordingTip') : $lang('ai-chat.index.startRecordTip') }}</text>
</view>
<view class="voice-actions">
<button class="voice-btn" @click="toggleVoiceInput">
<text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
</button>
</view>
</view>
</view>
</template>
<script>
/**
* ai-chat-voice-panel - 语音输入面板组件
*
* Props:
* visible: Boolean - 控制显示/隐藏
*
* Events:
* update:visible - 同步关闭状态
* close - 请求关闭面板
*/
export default {
name: 'AiChatVoicePanel',
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
voiceInputing: false
}
},
watch: {
visible(val) {
if (!val) {
this.voiceInputing = false
}
}
},
methods: {
hideVoicePanel() {
this.voiceInputing = false
this.$emit('update:visible', false)
this.$emit('close')
},
toggleVoiceInput() {
this.voiceInputing = !this.voiceInputing
if (this.voiceInputing) {
this.startVoiceInput()
} else {
this.stopVoiceInput()
}
},
startVoiceInput() {
// #ifdef H5
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
// 录音中,可扩展实时转文字
})
.catch(error => {
uni.showToast({ title: this.$lang('ai-chat.index.voiceInputFailed'), icon: 'none' })
this.voiceInputing = false
})
}
// #endif
},
stopVoiceInput() {
this.voiceInputing = false
}
}
}
</script>
<style lang="scss" scoped>
/* 引入图标字体: 由 main.wxss 全局提供, 不再重复 import */
@import '../styles/ai-chat-global.scss';
.voice-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
.voice-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.voice-input-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $bg-card;
border-radius: $radius-lg;
padding: 48rpx;
width: 60%;
max-width: 520rpx;
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
.voice-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
font-weight: 600;
color: $color-text;
}
.close-btn {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
align-items: center;
justify-content: center;
border: none;
.iconfont {
font-size: 28rpx;
color: $color-text-light;
}
}
}
.voice-content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 48rpx;
.voice-wave {
width: 280rpx;
height: 160rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
&.recording .wave-bar {
animation: wave 1.2s infinite ease-in-out;
}
.wave-bar {
width: 8rpx;
height: 40rpx;
margin: 0 4rpx;
background-color: $color-primary;
border-radius: 4rpx;
animation: none;
&:nth-child(1) { height: 60rpx; animation-delay: 0s; }
&:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
&:nth-child(3) { height: 50rpx; animation-delay: 0.2s; }
&:nth-child(4) { height: 120rpx; animation-delay: 0.3s; }
&:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
&:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
&:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
&:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
}
}
.voice-tip {
font-size: 28rpx;
color: $color-text-light;
}
}
.voice-actions {
display: flex;
justify-content: center;
.voice-btn {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(108, 142, 191, 0.3);
border: none;
.iconfont {
font-size: 56rpx;
color: white;
}
}
}
}
}
@keyframes wave {
0%, 100% { transform: scaleY(0.5); }
50% { transform: scaleY(1.2); }
}
</style>
<template>
<view class="voice-popup" v-if="visible">
<view class="voice-mask" @click="hideVoicePanel"></view>
<view class="voice-input-panel">
<view class="voice-header">
<text>{{ $lang('ai-chat.index.voiceInputTitle') }}</text>
<button class="close-btn" @click="hideVoicePanel">
<text class="iconfont icon-close"></text>
</button>
</view>
<view class="voice-content">
<view class="voice-wave" :class="{ recording: voiceInputing }">
<view
v-for="i in 8"
:key="i"
class="wave-bar"
:style="waveBarStyle(i)"></view>
</view>
<text class="voice-tip">{{ currentTip }}</text>
<text v-if="voiceInputing" class="voice-duration">{{ formattedDuration }}</text>
</view>
<view class="voice-actions">
<button class="voice-btn" :class="{ 'is-recording': voiceInputing }" @click="toggleVoiceInput">
<text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
</button>
<text v-if="voiceInputing" class="cancel-link" @click="cancelVoiceInput">{{ $lang('ai-chat.index.cancel') }}</text>
</view>
</view>
</view>
</template>
<script>
import { createVoiceRecorder } from '@/common/js/voice-recorder.js'
/**
* ai-chat-voice-panel - 语音输入面板组件
*
* PR-FRONTEND-VOICE-INPUT (2026-09-24): 真录音 UI。
* - 接入 common/js/voice-recorder.js,跨 H5 / 微信小程序 / App-Plus / 鸿蒙元服务
* - 波形振幅由 progress 事件 (level 0..1) 驱动
* - 录音上限 60s,自动停止
* - 关闭面板时如果还在录音,先 cancel 释放资源
*
* Props:
* visible: Boolean - 控制显示/隐藏
*
* Events:
* update:visible - 同步关闭状态
* close - 请求关闭面板
* audio-ready - 录音完成, 参数 { filePath, blob, duration, mime, size }
*/
export default {
name: 'AiChatVoicePanel',
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
voiceInputing: false,
// 录音中的振幅 0..1;8 根波形的高度按 level 抖动
voiceLevel: 0,
// 录音累计时长 (秒,整数)
voiceDuration: 0,
_durationTimer: null,
_voiceRecorder: null,
_onProgress: null,
_onError: null,
// 防止 stop 回调被多次触发 (录音器自己 stop + 用户手动 stop 重叠)
_resolved: false
}
},
computed: {
currentTip() {
if (this.voiceInputing) {
return this.$lang('ai-chat.index.recordingTip')
}
return this.$lang('ai-chat.index.startRecordTip')
},
formattedDuration() {
const s = Math.max(0, Math.floor(this.voiceDuration))
return s + '″'
}
},
watch: {
visible(val) {
if (val) {
// 每次重新打开都重置
this.voiceInputing = false
this.voiceLevel = 0
this.voiceDuration = 0
this._resolved = false
} else {
// 关闭时如果还在录音,丢弃
this._discardRecorderIfAny()
}
}
},
beforeDestroy() {
this._discardRecorderIfAny()
},
methods: {
hideVoicePanel() {
// 关闭时若还在录,默认作废;如需保留产物应先点 stop 按钮
this._discardRecorderIfAny()
this.$emit('update:visible', false)
this.$emit('close')
},
toggleVoiceInput() {
if (this.voiceInputing) {
this._finishRecording()
} else {
this._beginRecording()
}
},
cancelVoiceInput() {
this._discardRecorderIfAny()
this.hideVoicePanel()
},
waveBarStyle(i) {
// 每根 bar 基础高度 24rpx + level*振幅 + 不同 bar 的 offset (错相)
const base = 24
const offset = ((i * 17) % 32) + 12 // 12..44
const levelPx = Math.round(this.voiceLevel * 80)
const h = Math.max(16, base + offset + levelPx) + 'rpx'
const delay = (i * 0.08) + 's'
return { height: h, animationDelay: delay }
},
_beginRecording() {
if (this._voiceRecorder) return
const rec = createVoiceRecorder({ maxDuration: 60 * 1000 })
this._voiceRecorder = rec
this._onProgress = ({ level }) => {
// 平滑一下,避免波形抖动太狠
this.voiceLevel = this.voiceLevel * 0.4 + level * 0.6
}
this._onError = (err) => {
console.warn('[voice-panel] recorder error:', err)
console.error('[voice-panel] recorder error raw:', JSON.stringify(err), 'errMsg=', err && err.errMsg, 'message=', err && err.message)
uni.showToast({ title: this._voiceErrMsg(err) || this.$lang('ai-chat.index.voiceInputFailed'), icon: 'none' })
this._discardRecorderIfAny()
}
rec.on('progress', this._onProgress)
rec.on('error', this._onError)
rec.start()
.then(() => {
this.voiceInputing = true
this.voiceDuration = 0
this._startDurationTimer()
})
.catch((err) => {
this._teardownRecorder()
uni.showToast({ title: this._voiceErrMsg(err) || this.$lang('ai-chat.index.voiceStartFailed'), icon: 'none' })
})
},
async _finishRecording() {
if (!this._voiceRecorder || this._resolved) return
this._resolved = true
this._stopDurationTimer()
try {
const result = await this._voiceRecorder.stop()
if (!result || !result.filePath) {
// 录音产物为空,可能是被系统打断
uni.showToast({ title: this.$lang('ai-chat.index.voiceStopFailed'), icon: 'none' })
this._teardownRecorder()
this.voiceInputing = false
return
}
this._teardownRecorder()
this.voiceInputing = false
this.$emit('audio-ready', {
filePath: result.filePath,
blob: result.blob || null,
fileName: result.fileName || '',
duration: result.duration,
mime: result.mime,
size: result.size
})
this.hideVoicePanel()
} catch (e) {
this._teardownRecorder()
this.voiceInputing = false
uni.showToast({ title: this._voiceErrMsg(e) || this.$lang('ai-chat.index.voiceInputFailed'), icon: 'none' })
}
},
_discardRecorderIfAny() {
if (!this._voiceRecorder) return
try { this._voiceRecorder.cancel() } catch (e) { /* noop */ }
this._teardownRecorder()
this.voiceInputing = false
},
_teardownRecorder() {
this._stopDurationTimer()
if (this._voiceRecorder) {
if (this._onProgress) this._voiceRecorder.off('progress', this._onProgress)
if (this._onError) this._voiceRecorder.off('error', this._onError)
}
this._voiceRecorder = null
this._onProgress = null
this._onError = null
this._resolved = false
this.voiceLevel = 0
},
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 把 voice-recorder 抛出的 code 翻译成 i18n 文案
_voiceErrMsg(err) {
if (!err) return ''
switch (err.code) {
case 'NOT_SUPPORTED':
case 'NO_RECORDER_MANAGER':
return this.$lang('ai-chat.index.voiceNotSupported')
case 'H5_NO_MIC_API':
case 'ALREADY_STARTED':
return this.$lang('ai-chat.index.voiceStartFailed')
case 'UNI_RECORD_ERROR':
return (err && (err.errMsg || err.message)) || this.$lang('ai-chat.index.voiceStopFailed')
default:
return err.message || ''
}
},
_startDurationTimer() {
this._stopDurationTimer()
this._durationTimer = setInterval(() => {
this.voiceDuration += 1
}, 1000)
},
_stopDurationTimer() {
if (this._durationTimer) {
clearInterval(this._durationTimer)
this._durationTimer = null
}
}
}
}
</script>
<style lang="scss" scoped>
/* 引入图标字体: 由 main.wxss 全局提供, 不再重复 import */
@import '../styles/ai-chat-global.scss';
.voice-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
.voice-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.voice-input-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $bg-card;
border-radius: $radius-lg;
padding: 48rpx;
width: 60%;
max-width: 520rpx;
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
.voice-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
font-weight: 600;
color: $color-text;
}
.close-btn {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
align-items: center;
justify-content: center;
border: none;
.iconfont {
font-size: 28rpx;
color: $color-text-light;
}
}
}
.voice-content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32rpx;
.voice-wave {
width: 280rpx;
height: 160rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
&.recording .wave-bar {
animation: wave 1.0s infinite ease-in-out;
}
.wave-bar {
width: 8rpx;
margin: 0 4rpx;
background-color: $color-primary;
border-radius: 4rpx;
transition: height 0.12s ease-out;
animation: none;
}
}
.voice-tip {
font-size: 28rpx;
color: $color-text-light;
}
.voice-duration {
font-size: 36rpx;
font-weight: 600;
color: $color-primary;
margin-top: 8rpx;
}
}
.voice-actions {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.voice-btn {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(108, 142, 191, 0.3);
border: none;
transition: transform 0.15s ease-out, background-color 0.15s ease-out;
&.is-recording {
background-color: #e94e4e;
transform: scale(0.92);
}
.iconfont {
font-size: 56rpx;
color: white;
}
}
.cancel-link {
margin-top: 20rpx;
font-size: 26rpx;
color: $color-text-light;
padding: 8rpx 16rpx;
}
}
}
}
@keyframes wave {
0%, 100% { transform: scaleY(0.6); }
50% { transform: scaleY(1.15); }
}
</style>

View File

@@ -13,9 +13,12 @@
<!-- #endif -->
<!-- 聊天内容区域:从导航栏下方到容器底部 -->
<view class="chat-content">
<ai-chat-message
<!-- AI 智能页始终全屏,不让位给底部 tabBar,聊天区直接占满到底 -->
<view class="chat-content" :style="{ bottom: '0rpx' }">
<ai-chat-message
v-if="uiCfgReady"
ref="chat"
:preloaded-ui-config="preloadedUiCfg"
:initial-messages="initialMessages"
:fallback-welcome="fallbackWelcome"
:user-avatar="userAvatar"
@@ -68,6 +71,10 @@
</view>
</view>
</view>
<!-- 底部导航栏:AI 智能页是全屏聊天体验,强制不渲染底部 tabBar,
让输入框贴到屏幕底,不论从哪个入口进入都不显示。 -->
<diy-bottom-nav v-if="false"></diy-bottom-nav>
</view>
</template>
@@ -87,6 +94,15 @@ export default {
return {
initialMessages: [],
fallbackWelcome: '',
// AI Agent 通用入参(链接系统透传;老客服入口不传也能跑,默认 agent_aikefu)
agentId: 'agent_aikefu',
pageTitle: '',
// PR-CHAT-UI-CONFIG-PRELOAD (2026-09-24): 聊天 UI 配置预取
// uiCfgReady 控制聊天组件渲染时机 — 配置就绪(缓存命中或预取完成)才挂载,
// 避免"首帧用默认值渲染 → 异步配置到达后名称/头像/时间跳变"的闪烁
uiCfgReady: false,
preloadedUiCfg: null,
// --- 系统导航栏/状态栏相关 ---
navBarHeight: 44, // uni-page-head 系统导航栏,默认高度为44px
@@ -105,7 +121,12 @@ export default {
keyboardHeight: 0,
// 事件处理器引用(用于清理)
safeEventHandlers: new Map()
safeEventHandlers: new Map(),
// 进入 AI 智能页时是否临时隐藏了底部 tabBar。
// 标记进入时已调用 setBottomNavHidden(true),在 onUnload 中根据此标记还原,
// 避免返回其他 tabBar 页时底部导航栏保持隐藏状态。
isFromFloatBtn: false,
}
},
@@ -127,6 +148,49 @@ export default {
async onLoad(options) {
this.fallbackWelcome = this.$lang('ai-chat.index.fallbackWelcome');
// ====== PR-CHAT-UI-CONFIG-PRELOAD (2026-09-24): 配置先行,再渲染聊天组件 ======
// 1) 本地持久缓存命中 → 同步就绪, 立即渲染 (零延迟, 用上次会话的真实配置)
// 2) 未命中(首次访问) → await 强制拉取 (race 2.5s 超时兜底), 拿到后再渲染
// 3) 拉取失败/超时 → 也放行渲染, 组件内部仍有默认值兜底, 不白屏
// force 拉取同时预热 /info 缓存, 欢迎语/模型列表等后续请求直接复用
try {
const cached = aiService.getChatUiConfigSync();
if (cached) {
this.preloadedUiCfg = cached;
this.uiCfgReady = true;
console.log('[AI Chat] chatUiConfig 命中本地缓存, 首帧即用真实配置');
}
} catch (e) { /* 缓存读取失败走预取 */ }
if (!this.uiCfgReady) {
try {
const cfg = await Promise.race([
aiService.getChatUiConfig(true),
new Promise(resolve => setTimeout(() => resolve(null), 6000))
]);
if (cfg) this.preloadedUiCfg = cfg;
else console.warn('[AI Chat] chatUiConfig 预取超时(6s), 先渲染后由组件异步刷新');
} catch (e) { /* 失败兜底默认值 */ }
this.uiCfgReady = true;
console.log('[AI Chat] chatUiConfig 预取完成, 渲染聊天组件:', !!this.preloadedUiCfg);
}
// 最新值刷新: 组件 created 的 _loadChatUiConfig() 会异步拉取,
// 与此处 force 拉取共享 60s TTL 内存缓存, 不会产生二次 /info 请求
// ====== AI Agent 通用入参(链接系统 -> 通用 agent_id/title) ======
// 老客服入口不传 options 也能跑(智能客服是首个 agent,默认 agent_aikefu)。
// 新增 AI 销售/HR/...智能体只需在 link.page_params.agent_id 传不同值,
// 当前 onShow/initChat 不区分 agent 行为,后续按业务扩展按 agentId 路由即可。
try {
this.agentId = (options && options.agent_id) || 'agent_aikefu';
const rawTitle = (options && options.title) || this.$lang('ai-chat.index.title');
this.pageTitle = decodeURIComponent(rawTitle);
// 同步 agentId 给 ai-service,后续 sendMessage / WS auth 自动带新 agent_id
try { aiService.setAgentId(this.agentId); } catch (e) { /* 兼容旧 ai-service 版本 */ }
} catch (e) {
this.agentId = 'agent_aikefu';
this.pageTitle = this.$lang('ai-chat.index.title');
}
// ✅ 修改:取消权限校验,允许所有客服类型访问此页面
// const hasAccess = this.checkAccessPermission();
// if (!hasAccess) {
@@ -134,7 +198,19 @@ export default {
// return;
// }
this.$langConfig.title(this.$lang('ai-chat.index.title'));
this.$langConfig.title(this.pageTitle || this.$lang('ai-chat.index.title'));
// ====== 进入 AI 智能页始终隐藏底部 tabBar ======
// 原因:AI 智能页是全屏聊天体验,不论是
// 1) 底部导航栏"智能客服"项直接点击进入
// 2) diy-float-btn 浮动按钮(注入 __dyu=FloatBtn)进入
// 都不应被 tabBar 占用屏幕,否则输入框会被挤到 tabBar 上方。
// 进入时 setBottomNavHidden(true) 临时隐藏,onUnload 还原,避免污染其他页面。
this.isFromFloatBtn = true; // 标记进入时已隐藏,onUnload 据此还原
try {
this.$store.commit('setBottomNavHidden', true);
} catch (e) { /* 兼容没有该 mutation 的旧 store */ }
this.initChat();
},
@@ -180,6 +256,15 @@ export default {
console.log(this.$lang('ai-chat.index.logOnUnloadTriggered'));
this.cleanup();
aiService.disconnectWebSocket();
// 还原底部导航栏显示状态:如果 onLoad 时因为来自浮动按钮而临时隐藏,
// 必须在页面卸载时还原,否则返回到 tabBar 页时 tabBar 会保持隐藏状态。
if (this.isFromFloatBtn) {
try {
this.$store.commit('setBottomNavHidden', false);
} catch (e) { /* 兼容没有该 mutation 的旧 store */ }
this.isFromFloatBtn = false;
}
},
methods: {
@@ -647,7 +732,9 @@ export default {
/* #endif */
left: 0;
right: 0;
bottom: 0;
/* bottom 由模板动态绑定到 tabBarHeight:
- 浮动按钮入口 / 其他隐藏 tabBar 场景:0rpx,占满到底部
- tabBar 项入口:tabBarHeight,避免被底部 tabBar 遮挡聊天内容 */
}
/* 底部tabBar占位样式 */

View File

@@ -160,7 +160,13 @@
<style lang="scss" scoped>
::v-deep .mescroll-totop {
/* #ifdef H5 */
right: 27rpx !important;
bottom: 120rpx !important;
/* #endif */
/* #ifdef MP */
right: 27rpx !important;
bottom: 180rpx !important;
/* #endif */
}
</style>

Some files were not shown because too many files have changed in this diff Show More