feat(checkout): 优化微信支付和线下付款流程

- 支付方式新增微信支付(payType=1),并设为默认,保留线下付款(payType=9)
- 微信支付时调用 Taro.requestPayment 发起支付流程,取消或失败给出明确提示
- 支付选项选中状态下微信支付显示绿色提示,线下付款显示橙色提示
- 提交按钮文案区分微信支付(提交并支付)与线下付款(提交订单)
- 后端支付配置缺失时提示“微信支付暂不可用:支付配置缺失”
- 确保编译构建通过,未引入新类型错误
This commit is contained in:
2026-08-11 08:18:40 +08:00
parent 9fcadd7725
commit d611a76ebd
6 changed files with 107 additions and 16 deletions
+16
View File
@@ -0,0 +1,16 @@
# 2026-08-10
## checkout 页面接入微信支付
文件:`src/pages/shop/checkout.tsx`
改动:
- 支付方式选项新增「微信支付」(`payType=1`),并设为默认;原「线下付款」(`payType=9`) 保留。
- `handleSubmit``createOrder(orderParams)` 后,若 `payType===1 && res``res` 为后端返回的 `WxPayResult`),调用 `Taro.requestPayment({timeStamp,nonceStr,package,signType,paySign})` 调起微信支付;取消/失败给明确提示,订单已创建故统一跳订单列表可重新支付。线下付款保持原「订单已提交」提示。
- 支付选项选中提示:微信支付显示绿色提示,线下付款橙色提示(原仅有线下提示)。
- 提交按钮文案:微信支付显示「提交并支付」,线下显示「提交订单」。
- 异常提示:微信/线下下单时若后端报「应用ID/appid 缺失」等支付配置错误,统一提示「微信支付暂不可用:支付配置缺失」。
验证:`npm run build:weapp` 编译通过(17.45sCompiled successfully)。`tsc --noEmit` 因 tsconfig 把 `@tarojs/taro` 列入 types(缺 @types 声明)预存报错,与本次改动无关。
模式说明:本项目微信支付标准流程为 `createOrder(payType=1)` 后端直接返回 `WxPayResult``Taro.requestPayment(...)`,与 `pages/order/detail.tsx``handlePay`(用 `prepayShopOrder` 重新支付)一致。
+10
View File
@@ -0,0 +1,10 @@
# 2026-08-11 工作记录
## 小程序/产品矩阵规划讨论(仅探讨,未改代码)
- 用户产品矩阵:①企业官网(website-admin 后台,Nuxt SaaS 建站)②小程序商城(websopy-taro 电商)③其他管理系统。
- 结论建议(待用户确认):按**受众+载体**分层,而非按功能拆分。
- C端消费者(看/买):官网展示 + 商城 → **合并为「一个品牌小程序」**,用分包(官网/商城/用户中心)隔离,共享登录/购物车/会员。
- B端管理(企业主/运营):官网后台 + 其他管理系统 → **统一 Web 管理门户(SSO**,不做小程序。
- B端移动(商家版):暂缓,验证需求后再建独立 AppID 小程序,不并入 C 端。
- 已产出:规划文档 `.workbuddy/miniprogram-ui-plan.md`、官网展示型小程序原型(4屏 mockup)、产品矩阵分层架构图。
- 待确认:落地路径(独立官网小程序 / websopy-taro 加分包 / 仅 CMS 展示层)及上述产品矩阵方向。
+62
View File
@@ -0,0 +1,62 @@
# 小程序端 UI 布局与设计方案(基于 website-admin 后台)
## 一、结论先行
`website-admin`Nuxt 4 + Vue3 + ant-design-vue)是「云·企业官网」SaaS 建站后台,管理的核心是可对外发布的**官网内容**(栏目导航、文章、产品、案例、单页、广告、留言线索),以及订阅/模板/域名等租户配置。
因此小程序端的自然定位是:**官网内容的移动端展示 + 获客工具**(即后台所建官网的小程序版),而非现有 `websopy-taro` 里的电商/商城体系。
> ⚠️ 关键提醒:现有 `websopy-taro` 实际是「电商/会员/门店/开发者」小程序,与 `website-admin` 的「官网建站」业务域不一致。下文按"官网展示型小程序"规划,并在第六节给出两种落地路径供选择。
## 二、信息架构(IA):后台模块 → 小程序页面映射
| website-admin 模块 | 小程序页面 | 说明 |
|---|---|---|
| 控制台(统计/订阅) | 我的 / 首页概览 | 小程序仅展示轻量订阅状态 |
| 栏目导航 menus | 首页导航宫格 | 由后台栏目自动生成入口 |
| 广告 banners | 首页轮播 Banner | 后台配置 |
| 文章 articles | 资讯列表 / 资讯详情 | 含分类筛选 |
| 产品 products | 产品列表 / 产品详情 | 含分类 |
| 案例 cases | 案例列表 / 案例详情 | — |
| 单页 pages | 关于我们 / 联系我们 | 富文本渲染 |
| 留言咨询 messages | 留言咨询表单 / 我的留言 | 提交线索 |
| 模板 / 域名 / 设置 | 不暴露(仅后台) | 小程序按当前租户自动套用 |
## 三、导航与 tabBar 方案
推荐 4 个底部 Tab(沿用微信小程序原生 tabBar,`custom` 可选):
1. **首页 Home** — Banner + 栏目宫格 + 资讯/产品/案例推荐
2. **产品 Products** — 分类 + 产品网格
3. **案例 Cases**(或 资讯)— 案例列表
4. **我的 Mine** — 账号、我的留言、订阅状态
资讯 / 关于 / 留言作为首页二级入口或非 Tab 页。
## 四、页面布局草案(关键屏)
- **首页**:状态栏+标题栏 → Banner 轮播 → 栏目导航宫格 → "资讯动态"横滑卡片 → "推荐产品/案例"区块 → 底部留言 CTA。
- **产品列表**:左侧分类栏 + 右侧产品网格(ProductCard)。
- **资讯详情**:标题/时间/来源 → 富文本正文(rich-text)→ 相关推荐 → 底部"咨询"按钮。
- **我的**:头像/企业名 → 我的留言 → 订阅状态 → 设置。
## 五、UI 设计规范建议
1. **建立 Design Token**(CSS 变量):主色、中性色、语义色、间距、圆角、字号。主色默认取自 `website-admin`「网站设置」的 brand 色,支持按租户覆盖。
2. **统一主题**:消除当前 4 套主色并存的混乱(tabBar `#0e932e` / CSS 变量 `#1890ff` / Tailwind `#0ea5e9` / 微信 `#07c160`),收敛为 1 套 token。
3. **图标体系**:弃用 emoji 当图标;改用 `@nutui/icons-react-taro`(SVG,已验证可渲染)或自定义图标组件。
4. **统一布局容器**:新增 `Layout` 组件(NavBar + 内容区 + 可选自定义 TabBar),避免每页各自实现。
5. **NutUI 去"空壳化"**:继续替换 `Cell/Price/Divider/Button`(weapp 端整块空白的已知 bug),改用 Taro 原生 + 项目自定义组件。
6. **富文本**:后台 wangeditor 的 HTML 经 Taro `rich-text` 渲染,需做外联 style 注入与样式隔离。
7. **内容卡片组件集**Banner、ArticleCard、ProductCard、CaseCard、NavGrid、SectionTitle、LeadForm、EmptyState。
## 六、与现有 websopy-taro 的关系 & 落地路径
- **路径 A(推荐)**:新建独立小程序工程(或 `websopy-taro` 新分支),专门做官网展示端,复用 Taro + React + Tailwind 技术栈与工具链,不混入电商逻辑。
- **路径 B**:在现有 `websopy-taro` 内新增"官网"分包,与电商并存;适合想用一个小程序承载多业务。
- **路径 C**:直接复用 `website-admin` 的 CMS API`app/api/cms``app/api/websopy`),小程序端只做展示层。
建议先确认路径,再进入详细设计 / 实现。
## 七、实施路线图(建议)
1. 定主色 / Design Token / 图标规范
2. 搭 Layout + NavBar + TabBar 骨架
3. 首页(Banner + 宫格 + 资讯/产品/案例区块)
4. 资讯 / 产品 / 案例 列表 + 详情(rich-text
5. 留言咨询表单 + 我的留言
6. 我的页 + 订阅状态
7. 联调 `website-admin` CMS API、按租户适配模板