Files

T

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

- 支付方式新增微信支付（payType=1），并设为默认，保留线下付款（payType=9）
- 微信支付时调用 Taro.requestPayment 发起支付流程，取消或失败给出明确提示
- 支付选项选中状态下微信支付显示绿色提示，线下付款显示橙色提示
- 提交按钮文案区分微信支付（提交并支付）与线下付款（提交订单）
- 后端支付配置缺失时提示“微信支付暂不可用：支付配置缺失”
- 确保编译构建通过，未引入新类型错误

2026-08-11 08:18:40 +08:00

4.4 KiB

Raw Permalink Blame History

小程序端 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 可选）：

首页 Home — Banner + 栏目宫格 + 资讯/产品/案例推荐
产品 Products — 分类 + 产品网格
案例 Cases（或资讯）— 案例列表
我的 Mine — 账号、我的留言、订阅状态

资讯 / 关于 / 留言作为首页二级入口或非 Tab 页。

四、页面布局草案（关键屏）

首页：状态栏+标题栏 → Banner 轮播 → 栏目导航宫格 → "资讯动态"横滑卡片 → "推荐产品/案例"区块 → 底部留言 CTA。
产品列表：左侧分类栏 + 右侧产品网格（ProductCard）。
资讯详情：标题/时间/来源 → 富文本正文（rich-text）→ 相关推荐 → 底部"咨询"按钮。
我的：头像/企业名 → 我的留言 → 订阅状态 → 设置。

五、UI 设计规范建议

建立 Design Token（CSS 变量）：主色、中性色、语义色、间距、圆角、字号。主色默认取自 website-admin「网站设置」的 brand 色，支持按租户覆盖。
统一主题：消除当前 4 套主色并存的混乱（tabBar #0e932e / CSS 变量 #1890ff / Tailwind #0ea5e9 / 微信 #07c160），收敛为 1 套 token。
图标体系：弃用 emoji 当图标；改用 @nutui/icons-react-taro（SVG，已验证可渲染）或自定义图标组件。
统一布局容器：新增 Layout 组件（NavBar + 内容区 + 可选自定义 TabBar），避免每页各自实现。
NutUI 去"空壳化"：继续替换 Cell/Price/Divider/Button（weapp 端整块空白的已知 bug），改用 Taro 原生 + 项目自定义组件。
富文本：后台 wangeditor 的 HTML 经 Taro rich-text 渲染，需做外联 style 注入与样式隔离。
内容卡片组件集：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），小程序端只做展示层。

建议先确认路径，再进入详细设计 / 实现。

七、实施路线图（建议）

定主色 / Design Token / 图标规范
搭 Layout + NavBar + TabBar 骨架
首页（Banner + 宫格 + 资讯/产品/案例区块）
资讯 / 产品 / 案例列表 + 详情（rich-text）
留言咨询表单 + 我的留言
我的页 + 订阅状态
联调 website-admin CMS API、按租户适配模板

4.4 KiB Raw Permalink Blame History Unescape Escape