fix(weapp): 修复支付页nutui组件导致内容空白问题
- 替换支付页中nutui的Button、Cell、Price、Divider组件为Taro原生组件或项目自定义组件 - 修正商品名称、价格类型和支付金额显示,使用flex布局及Text组件自绘内容 - 调整按钮样式,统一为带蓝色背景和圆角的自定义样式 - 移除nutui Price组件中的thousands属性,使用项目自定义Price组件 - 解决微信小程序中nutui组件因div渲染缺失导致UI元素不显示的问题 - 保持支付流程及状态逻辑无改动,仅优化展示兼容性和稳定性
This commit is contained in:
23
.workbuddy/memory/2026-07-23.md
Normal file
23
.workbuddy/memory/2026-07-23.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 2026-07-23
|
||||
|
||||
## 扫码进入小程序后支付页空白 bug
|
||||
|
||||
**现象**:用户从 web 端订单详情生成 QR 码 → 微信扫码进入小程序 → `passport/pay` 页面只显示卡片标题"确认支付"、"支付金额"标签、底部提示文案,**商品名称/价格类型/价格/分隔线/取消按钮/立即支付按钮全部缺失**,无法继续支付流程。
|
||||
|
||||
**根因**:`@nutui/nutui-react-taro@2.7.4` 的 Cell / Price / Divider / Button 内部用 `React.createElement("div", ...)`,而 `dist/base.wxml` 里只有 `<view>` / `<text>` / `<button>` 模板没有 `<div>`。这些组件在 weapp 中"空壳化"。截图里只显示纯 Text/View 和图标(来自 `@nutui/icons-react-taro` 的 SVG),没有显示的内容全部是 nutui-react-taro 组件。
|
||||
|
||||
**修复**:只改 `src/passport/pay/index.tsx` 一个文件,把 4 个 nutui 组件换成 Taro 原生 / 项目自定义组件:
|
||||
|
||||
- `import { Button, Cell, Price, Divider } from '@nutui/nutui-react-taro'` → `import { Button } from '@tarojs/components'` + `import Price from '@/components/common/Price'`
|
||||
- `<Cell>` → `<View>` + `<Text>` 自绘(用 `flex justify-between px-4 py-3 border-b border-gray-100`)
|
||||
- `<Price size="large" thousands>` → `<Price size="large">`(项目自定义组件)
|
||||
- `<Divider>` → `border-b border-gray-100` 替代
|
||||
- `<Button type="primary" block>` → `<Button className="bg-blue-500 text-white rounded-full">`(className 控制颜色)
|
||||
- error/paid/loading 三个分支里的 `<Button type="primary">` 也一并替换
|
||||
|
||||
**验证**:
|
||||
- `npm run build:weapp` → `Compiled successfully in 14.45s`
|
||||
- `dist/passport/pay/index.js` 里 `nut-cell|nut-button|nut-divider|nut-price` 全部为 0;按钮编译成 `l.zx`(Taro Button 局部变量名)
|
||||
- 文件最终 413 行,diff 集中在 import + 渲染区,逻辑(数据获取、JSAPI 支付、状态判断 payStatus vs status)没动
|
||||
|
||||
**遗留**:项目其它页面(passport/{login,forget,register,setting,unified-qr,qr-login}、pages/order/*、pages/booking/*、components/common/{FixedButton,EmptyState}、components/QRLoginScanner)也用了 nutui Button/Checkbox/Input/Card/Tabs/Tag 等。如果以后用户反馈"按钮/输入框看不到或不可点",按同样模式替换即可。这次没改,避免一次改动面太大。
|
||||
@@ -15,3 +15,24 @@
|
||||
- 「按 userId 置一个标志位」的范式:`new User(){{setUserId(); setXxx();}}` → `userService.updateById(u)`(参考 `updateStatus`/`updateRecommend`/`auditUser`)。
|
||||
- 用户变更后如需同步 websopy,经 `syncMessageProducer.sendUserSyncMessage("websopy","UPDATE",user)`(在 `UserServiceImpl` 内,`@Autowired(required=false)` 注入)。
|
||||
- 用户相关代码都在 `com.gxwebsoft.common.system`(entity/service/controller),业务应用数据在 `com.gxwebsoft.websopy`(无 Controller)。
|
||||
|
||||
## ⚠️ Taro 小程序 nutui-react-taro 兼容性陷阱(2026-07-23 确认)
|
||||
|
||||
**问题**:`@nutui/nutui-react-taro@2.7.4` 的 **Cell / Price / Divider / Button** 等展示类组件,内部用 `React.createElement("div", ...)` 构建布局。Taro 4 的 babel/swc 没有把这些 `div` 转成 `view`,而 `dist/base.wxml` 里完全没有 `<div>` 模板,导致这些组件在 weapp 中"空壳化"——外层元素不存在,内层内容(`<div>`)被丢弃。
|
||||
|
||||
**症状**:组件位置完全空白 / 按钮不可见 / 价格显示为空。Text/View 与 `@nutui/icons-react-taro` 的图标(Tips/Check/Close/Clock,基于 SVG)渲染正常。
|
||||
|
||||
**解决办法**(最小改动):在该页面用 Taro 原生组件替代:
|
||||
| nutui(不可用) | Taro 原生 / 项目自定义 |
|
||||
|---|---|
|
||||
| `import { Button, Cell, Price, Divider } from '@nutui/nutui-react-taro'` | `import { Button } from '@tarojs/components'` + `import Price from '@/components/common/Price'` |
|
||||
| `<Cell title="X" description={Y} />` | `<View className="flex justify-between px-4 py-3 border-b border-gray-100"><Text className="text-gray-600">X</Text><Text className="text-gray-800">{Y}</Text></View>` |
|
||||
| `<Price price={n} size="large" thousands />` | `<Price price={n} size="large" />`(**用项目自定义 Price**,不用 nutui 的) |
|
||||
| `<Divider />` | 用 `border-b border-gray-100` 替代 |
|
||||
| `<Button type="primary" block loading={x} onClick={y}>...</Button>` | `<Button loading={x} onClick={y} className="flex-1 bg-blue-500 text-white rounded-full border-0">...</Button>`(className 控制颜色,`loading` prop 仍然支持) |
|
||||
|
||||
**适用范围判断**:项目里其它页面(qr-login、register、passport/forget 等)也用了 nutui 的 Cell/Card/Divider/Button,遇到同类"组件消失"现象时按同样模式替换即可。已修:`src/passport/pay/index.tsx`(2026-07-23,扫码进入小程序后支付页空白的 bug)。
|
||||
|
||||
**验证手段**:跑 `npm run build:weapp` 后在 `dist/<page>/index.js` 里 grep `nut-cell|nut-button|nut-divider|nut-price`,应为 0;grep `l.zx`(Taro Button 在 weapp 编译后的局部变量名)应出现 2 次(取消 + 立即支付)。
|
||||
|
||||
**已知的 nutui 组件清单**(按 2026-07-23 grep 结果):`Button` 在 `passport/pay, passport/login/setting/forget/register, pages/order/*, pages/booking/*, components/common/{FixedButton,EmptyState}` 等大量页面;`Cell` 在 `passport/pay, pages/order/order.tsx`;`Divider` 在 `passport/pay, passport/qr-login`;`Price` 在 `passport/pay`。修复顺序建议:pay(已修)→ 视觉影响最大的页面 → 批量。
|
||||
|
||||
Reference in New Issue
Block a user