gxwebsoft
d611a76ebd
- 支付方式新增微信支付（payType=1），并设为默认，保留线下付款（payType=9） - 微信支付时调用 Taro.requestPayment 发起支付流程，取消或失败给出明确提示 - 支付选项选中状态下微信支付显示绿色提示，线下付款显示橙色提示 - 提交按钮文案区分微信支付（提交并支付）与线下付款（提交订单） - 后端支付配置缺失时提示“微信支付暂不可用：支付配置缺失” - 确保编译构建通过，未引入新类型错误
63 lines
4.4 KiB
Markdown
63 lines
4.4 KiB
Markdown
# 小程序端 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、按租户适配模板
|