Files

赵忠林 e986222ca7 fix(weapp): 修复支付页nutui组件导致内容空白问题

- 替换支付页中nutui的Button、Cell、Price、Divider组件为Taro原生组件或项目自定义组件
- 修正商品名称、价格类型和支付金额显示，使用flex布局及Text组件自绘内容
- 调整按钮样式，统一为带蓝色背景和圆角的自定义样式
- 移除nutui Price组件中的thousands属性，使用项目自定义Price组件
- 解决微信小程序中nutui组件因div渲染缺失导致UI元素不显示的问题
- 保持支付流程及状态逻辑无改动，仅优化展示兼容性和稳定性

2026-07-23 17:23:21 +08:00

2.3 KiB

Raw Blame History

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 等。如果以后用户反馈"按钮/输入框看不到或不可点"，按同样模式替换即可。这次没改，避免一次改动面太大。

2.3 KiB Raw Blame History Unescape Escape

2026-07-23

扫码进入小程序后支付页空白 bug

2.3 KiB

Raw Blame History