Files
integral-shop/single_uniapp22miao/docs/逆向分析页面结构.md

756 lines
22 KiB
Markdown
Raw Permalink Normal View History

# H5商城网站页面结构分析
> **网站地址**: http://miao1.suzhouyuqi.com/#/pages/index/index
> **分析时间**: 2025-11-08
> **数据源**: static/js/*.js (48个编译文件)
> **框架**: uni-app
---
## 📊 统计概览
| 项目 | 数量 |
|------|------|
| **JS文件总数** | 48 个 |
| **主要页面** | 3 个 |
| **子页面模块** | 18 个 |
| **独立页面** | 36+ 个 |
| **代码总大小** | ~3.5 MB |
---
## 🗂️ 页面结构树
```
单店商城 H5
├── 📱 主要页面 (pages/)
│ ├── index/index # 首页
│ ├── personal/index # 个人中心
│ └── rushing/ # 抢购模块
│ ├── index # 抢购首页
│ └── detail # 抢购详情
└── 📄 子页面 (pages/sub-pages/)
├── 🔐 用户登录模块 (login/)
│ ├── index # 登录页
│ ├── register # 注册页
│ ├── reset-account # 重置账号
│ └── change-pwd # 修改密码
├── 👤 用户信息模块 (user-info/)
│ └── index # 用户信息页
├── 📍 地址管理模块 (address/)
│ ├── index # 地址列表
│ └── detail # 地址详情(新增/编辑)
├── 🛍️ 商品模块 (good/)
│ └── good-detail # 商品详情
├── 🔍 搜索模块 (search/)
│ └── index # 搜索页
├── 📦 订单模块
│ ├── shop-order/index # 商城订单
│ └── rushing-order/ # 抢购订单
│ ├── index # 订单列表
│ └── detail # 订单详情
├── 💰 财务模块
│ ├── balance/index # 分红余额
│ ├── coupon/index # 优惠券
│ ├── withdraw/ # 提现
│ │ ├── index # 提现页
│ │ └── list # 提现记录
│ └── prize/index # 奖品中心
├── 💳 收款方式模块 (my-payee/)
│ ├── index # 收款方式列表
│ ├── zfb-detail # 支付宝详情
│ └── yl-detail # 银联详情
├── 👥 推广模块
│ ├── invite/index # 邀请好友
│ ├── my-fans/index # 我的粉丝
│ └── promote-prize/index # 推广奖励
├── 📄 协议模块 (agreement/)
│ ├── index # 协议列表
│ ├── contract # 合同协议
│ ├── contract1 # 合同协议1
│ └── my-contract # 我的合同
├── ⚙️ 设置模块 (setting/)
│ ├── index # 设置页
│ └── 404 # 404页面
└── 🌐 WebView模块 (webview/)
├── index # WebView页面
├── sign # 签名页
└── sign-preview # 签名预览 (1.9MB)
```
---
## 📱 一、主要页面3个
### 1. 首页模块
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 首页 | `/pages/index/index` | pages-index-index.116e63f5.js | 21K | 商城首页 |
**功能**:
- 轮播图展示
- 商品分类
- 商品列表
- 公告信息
- 快捷入口
---
### 2. 个人中心模块
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 个人中心 | `/pages/personal/index` | pages-personal-index.6f5415f9.js | 23K | 用户个人中心 |
**功能**:
- 用户信息展示
- 分红余额显示
- 功能菜单入口
- 我的订单
- 我的推广
---
### 3. 抢购模块
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 抢购首页 | `/pages/rushing/index` | pages-rushing-index.b68c1e3c.js | 25K | 抢购商品列表 |
| 抢购详情 | `/pages/rushing/detail` | pages-rushing-detail.cee18a9d.js | 15K | 抢购商品详情 |
**功能**:
- 可购买商品列表
- 商品抢单
- 营业时间控制
- 购买限制
---
## 📄 二、子页面模块18个模块36+页面)
### 1. 🔐 用户登录模块 (4个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 登录页 | `/pages/sub-pages/login/index` | pages-sub-pages-login-index.a9a3e737.js | 9.8K | 用户登录 |
| 注册页 | `/pages/sub-pages/login/register` | pages-sub-pages-login-register.90ee3c46.js | 8.4K | 用户注册 |
| 重置账号 | `/pages/sub-pages/login/reset-account` | pages-sub-pages-login-reset-account.98a38bc1.js | 8.2K | 重置密码 |
| 修改密码 | `/pages/sub-pages/login/change-pwd` | pages-sub-pages-login-change-pwd.ee81f1aa.js | 8.1K | 修改密码 |
**API 调用**:
- `POST /api/user/login` - 登录
- `POST /api/user/register` - 注册
- `POST /api/user/changepwd` - 修改密码
- `POST /api/sms/send` - 发送验证码
---
### 2. 👤 用户信息模块 (1个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 用户信息 | `/pages/sub-pages/user-info/index` | pages-sub-pages-user-info-index.9cf7aa59.js | 13K | 个人资料编辑 |
**功能**:
- 修改昵称
- 修改头像
- 查看个人信息
**API 调用**:
- `POST /api/user/info` - 获取用户信息
- `POST /api/user/nickname` - 修改昵称
---
### 3. 📍 地址管理模块 (2个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 地址列表 | `/pages/sub-pages/address/index` | pages-sub-pages-address-index.c1c668d6.js | 9.3K | 收货地址列表 |
| 地址详情 | `/pages/sub-pages/address/detail` | pages-sub-pages-address-detail.23252d60.js | 171K | 新增/编辑地址 |
**功能**:
- 地址列表展示
- 新增地址
- 编辑地址
- 删除地址
- 设置默认地址
- 地区选择器(三级联动)
**API 调用**:
- `GET /api/address/list` - 地址列表
- `POST /api/address/insert` - 新增地址
- `POST /api/address/update` - 更新地址
- `POST /api/address/delete` - 删除地址
- `POST /api/address/default` - 获取默认地址
**注意**: address-detail 文件很大171K包含了完整的地区数据
---
### 4. 🛍️ 商品模块 (1个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 商品详情 | `/pages/sub-pages/good/good-detail` | pages-sub-pages-good-good-detail.a842e7a3.js | 23K | 商品详情页 |
**功能**:
- 商品图片展示
- 商品信息
- 价格信息
- 客服联系
- 立即购买
**API 调用**:
- `GET /api/goods/detail?id=xxx` - 商品详情
---
### 5. 🔍 搜索模块 (1个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 搜索页 | `/pages/sub-pages/search/index` | pages-sub-pages-search-index.48e410ba.js | 13K | 商品搜索 |
**功能**:
- 搜索商品
- 搜索历史
- 热门搜索
---
### 6. 📦 订单模块 (3个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 商城订单 | `/pages/sub-pages/shop-order/index` | pages-sub-pages-shop-order-index.40968fc8.js | 17K | 商城订单列表 |
| 抢购订单列表 | `/pages/sub-pages/rushing-order/index` | pages-sub-pages-rushing-order-index.8ba4fcca.js | 12K | 抢购订单列表 |
| 抢购订单详情 | `/pages/sub-pages/rushing-order/detail` | pages-sub-pages-rushing-order-detail.a34d428c.js | 8.3K | 抢购订单详情 |
**功能**:
- 订单列表(买方仓库/卖方仓库)
- 订单详情
- 订单支付
- 订单确认
- 订单取消
- 订单转卖
**API 调用**:
- `GET /api/order/list` - 订单列表
- `GET /api/order/detail` - 订单详情
- `POST /api/order/buy` - 购买商品
- `POST /api/order/pay` - 支付订单
- `POST /api/order/confirm` - 确认订单
- `POST /api/order/cancel` - 取消订单
- `POST /api/order/resell` - 转卖订单
---
### 7. 💰 财务模块 (5个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 分红余额 | `/pages/sub-pages/balance/index` | pages-sub-pages-balance-index.af701be0.js | 4.8K | 分红余额明细 |
| 优惠券 | `/pages/sub-pages/coupon/index` | pages-sub-pages-coupon-index.9fd36b20.js | 5.1K | 优惠券明细 |
| 提现 | `/pages/sub-pages/withdraw/index` | pages-sub-pages-withdraw-index.d0ed0300.js | 5.3K | 申请提现 |
| 提现记录 | `/pages/sub-pages/withdraw/list` | pages-sub-pages-withdraw-list.257de314.js | 4.0K | 提现记录 |
| 奖品中心 | `/pages/sub-pages/prize/index` | pages-sub-pages-prize-index.8e8f86b4.js | 4.9K | 奖品列表 |
**功能**:
- 余额明细查询
- 收入支出记录
- 申请提现
- 提现记录查询
**API 调用**:
- `GET /api/money/list` - 财务记录列表
- `GET /api/money/log` - 提现记录
- `POST /api/money/withdraw` - 申请提现
---
### 8. 💳 收款方式模块 (3个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 收款方式 | `/pages/sub-pages/my-payee/index` | pages-sub-pages-my-payee-index.003c7ba7.js | 5.5K | 收款方式列表 |
| 支付宝详情 | `/pages/sub-pages/my-payee/zfb-detail` | pages-sub-pages-my-payee-zfb-detail.1d2283db.js | 14K | 支付宝绑定 |
| 银联详情 | `/pages/sub-pages/my-payee/yl-detail` | pages-sub-pages-my-payee-yl-detail.1631426a.js | 14K | 银行卡绑定 |
**功能**:
- 支付宝绑定
- 银行卡绑定
- 查看收款方式
**API 调用**:
- `GET /api/alipay/index` - 获取支付宝信息
- `POST /api/alipay/bind` - 绑定支付宝
- `GET /api/bank/index` - 获取银行卡信息
---
### 9. 👥 推广模块 (3个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 邀请好友 | `/pages/sub-pages/invite/index` | pages-sub-pages-invite-index.86b6c14d.js | 23K | 邀请推广页 |
| 我的粉丝 | `/pages/sub-pages/my-fans/index` | pages-sub-pages-my-fans-index.030b9f6a.js | 14K | 粉丝列表 |
| 推广奖励 | `/pages/sub-pages/promote-prize/index` | pages-sub-pages-promote-prize-index.710193f9.js | 5.4K | 推广奖励 |
**功能**:
- 生成邀请码
- 分享推广链接
- 查看粉丝列表
- 查看团队数据
- 推广收益
**API 调用**:
- `GET /api/share/index` - 分享首页数据
- `GET /api/share/select` - 我的粉丝列表
---
### 10. 📄 协议模块 (4个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 协议列表 | `/pages/sub-pages/agreement/index` | pages-sub-pages-agreement-index.8810033d.js | 15K | 协议列表 |
| 合同协议 | `/pages/sub-pages/agreement/contract` | pages-sub-pages-agreement-contract.9e663c22.js | 5.6K | 合同详情 |
| 合同协议1 | `/pages/sub-pages/agreement/contract1` | pages-sub-pages-agreement-contract1.203c29f5.js | 6.1K | 合同详情1 |
| 我的合同 | `/pages/sub-pages/agreement/my-contract` | pages-sub-pages-agreement-my-contract.c001c026.js | 1.7K | 我的合同 |
**功能**:
- 用户协议
- 隐私政策
- 合同管理
---
### 11. ⚙️ 设置模块 (2个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| 设置页 | `/pages/sub-pages/setting/index` | pages-sub-pages-setting-index.c3f6e7dd.js | 24K | 系统设置 |
| 404页面 | `/pages/sub-pages/setting/404` | pages-sub-pages-setting-404.9c54b0c0.js | 2.5K | 404错误页 |
**功能**:
- 账号设置
- 关于我们
- 退出登录
---
### 12. 🌐 WebView模块 (3个页面)
| 页面 | 路径 | 文件 | 大小 | 说明 |
|------|------|------|------|------|
| WebView页 | `/pages/sub-pages/webview/index` | pages-sub-pages-webview-index.1042489b.js | 2.2K | WebView容器 |
| 签名页 | `/pages/sub-pages/webview/sign` | pages-sub-pages-webview-sign.7a3d2cf7.js | 1.6K | 电子签名 |
| 签名预览 | `/pages/sub-pages/webview/sign-preview` | pages-sub-pages-webview-sign-preview.5b79b68b.js | 1.9MB | 签名预览 |
**功能**:
- H5页面加载
- 电子签名
- PDF预览
**注意**: sign-preview 文件很大1.9MB),可能包含了 PDF.js 等第三方库
---
## 🔧 三、共享模块
### Chunk 文件分析
| 文件 | 大小 | 说明 |
|------|------|------|
| chunk-vendors.4d47960d.js | 1.1MB | 第三方依赖库Vue、Vuex等 |
| index.6d11616b.js | 281KB | 主入口文件 v1 |
| index.8bc32d98.js | 281KB | 主入口文件 v2 |
### 共享页面模块
| 文件 | 大小 | 共享页面 |
|------|------|---------|
| pages-index-index~pages-personal-index~pages-rushing-detail~pages-rushing-index~pages-sub-pages-addr~7968e06c.70e5101c.js | 54K | 首页、个人中心、抢购等5+页面共享 |
| pages-rushing-detail~pages-sub-pages-balance-index~pages-sub-pages-coupon-index~pages-sub-pages-my-f~58831170.24d2e61d.js | 150K | 财务相关页面共享 |
| pages-sub-pages-address-detail~pages-sub-pages-login-change-pwd~pages-sub-pages-login-index~pages-su~3512e57f.c121044a.js | 26K | 登录、地址等页面共享 |
| pages-sub-pages-login-change-pwd~pages-sub-pages-login-register~pages-sub-pages-login-reset-account.55514425.js | 12K | 登录模块页面共享 |
| pages-rushing-detail~pages-rushing-index.4a3094d6.js | 21K | 抢购页面共享 |
| pages-index-index~pages-sub-pages-search-index.5679d08c.js | 12K | 首页、搜索页面共享 |
| pages-rushing-detail~pages-sub-pages-balance-index~pages-sub-pages-coupon-index~pages-sub-pages-priz~0d2429df.1e72eb65.js | 11K | 财务相关共享 |
| pages-sub-pages-agreement-contract~pages-sub-pages-agreement-contract1~pages-sub-pages-agreement-index.d5a97a47.js | 37K | 协议页面共享 |
| pages-sub-pages-rushing-order-detail~pages-sub-pages-rushing-order-index.54c3c947.js | 12K | 抢购订单共享 |
---
## 📊 四、页面功能矩阵
### 按功能分类
| 功能模块 | 页面数量 | 主要页面 |
|---------|---------|---------|
| **用户认证** | 5 | 登录、注册、修改密码、用户信息、设置 |
| **商品浏览** | 3 | 首页、商品详情、搜索 |
| **抢购交易** | 2 | 抢购列表、抢购详情 |
| **订单管理** | 3 | 商城订单、抢购订单列表、抢购订单详情 |
| **地址管理** | 2 | 地址列表、地址详情 |
| **财务管理** | 5 | 分红、优惠券、提现、提现记录、奖品 |
| **收款设置** | 3 | 收款方式、支付宝、银行卡 |
| **推广营销** | 3 | 邀请好友、我的粉丝、推广奖励 |
| **协议合同** | 4 | 协议列表、合同、我的合同 |
| **其他功能** | 6 | 个人中心、设置、404、WebView等 |
| **总计** | **36+** | - |
---
## 🎯 五、核心业务流程
### 1. 用户注册登录流程
```
访问网站
注册/登录 (/pages/sub-pages/login/index)
发送验证码 (POST /api/sms/send)
注册/登录 (POST /api/user/register | POST /api/user/login)
获取Token
进入首页 (/pages/index/index)
```
### 2. 抢购交易流程
```
首页浏览 (/pages/index/index)
进入抢购 (/pages/rushing/index)
查看可购买商品 (GET /api/order/goods)
抢单 (POST /api/order/buy)
选择地址 (/pages/sub-pages/address/index)
支付订单 (POST /api/order/pay)
卖家确认发货 (POST /api/order/confirm)
订单完成
分红到账
```
### 3. 提现流程
```
个人中心 (/pages/personal/index)
查看余额 (/pages/sub-pages/balance/index)
设置收款方式 (/pages/sub-pages/my-payee/index)
├─ 支付宝 (/pages/sub-pages/my-payee/zfb-detail)
└─ 银行卡 (/pages/sub-pages/my-payee/yl-detail)
申请提现 (/pages/sub-pages/withdraw/index)
提交申请 (POST /api/money/withdraw)
查看提现记录 (/pages/sub-pages/withdraw/list)
```
### 4. 推广流程
```
个人中心 (/pages/personal/index)
邀请好友 (/pages/sub-pages/invite/index)
生成邀请码/链接 (GET /api/share/index)
分享给好友
好友注册
查看粉丝 (/pages/sub-pages/my-fans/index)
获取推广收益
```
---
## 📱 六、导航结构
### 底部导航栏(推测)
| 位置 | 页面 | 图标 | 说明 |
|------|------|------|------|
| 1 | 首页 | 🏠 | /pages/index/index |
| 2 | 抢购 | 🎯 | /pages/rushing/index |
| 3 | 订单 | 📦 | /pages/sub-pages/rushing-order/index |
| 4 | 我的 | 👤 | /pages/personal/index |
### 个人中心菜单(推测)
```
个人中心
├── 👤 个人信息
├── 📦 我的订单
│ ├── 买方仓库
│ └── 卖方仓库
├── 💰 财务管理
│ ├── 分红余额
│ ├── 优惠券
│ ├── 自购分红
│ └── 提现
├── 👥 推广中心
│ ├── 邀请好友
│ ├── 我的粉丝
│ └── 推广奖励
├── 💳 收款方式
│ ├── 支付宝
│ └── 银行卡
├── 📍 收货地址
├── 📄 协议合同
└── ⚙️ 设置
```
---
## 💾 七、文件大小分析
### 超大文件(>100KB
| 文件 | 大小 | 说明 | 原因 |
|------|------|------|------|
| pages-sub-pages-webview-sign-preview | 1.9MB | 签名预览 | 包含 PDF.js 等库 |
| chunk-vendors | 1.1MB | 第三方依赖 | Vue、Vuex、uni-app等 |
| index (两个版本) | 281KB×2 | 主入口 | 应用核心代码 |
| pages-sub-pages-address-detail | 171KB | 地址详情 | 包含省市区数据 |
| pages-rushing-detail~...~58831170 | 150KB | 共享模块 | 多页面共享代码 |
### 优化建议
1. **PDF 库按需加载**: sign-preview 文件过大建议使用CDN或懒加载
2. **地区数据优化**: address-detail 包含完整地区数据可考虑API动态加载
3. **代码分割**: 进一步优化 chunk 分割,减少首屏加载
4. **图片优化**: 检查是否有图片被打包进JS
---
## 🔍 八、技术栈分析
### 前端框架
- **uni-app**: 跨平台开发框架
- **Vue.js**: 核心框架
- **Vuex**: 状态管理
### 第三方库(从 chunk-vendors 推测)
- Vue Router
- AxiosHTTP请求
- PDF.jsPDF预览
- 可能的UI库推测为 uni-ui 或其他)
### 构建工具
- Webpack根据chunk命名规则
- BabelES6转译
---
## 📋 九、路由配置参考
```javascript
// pages.json (推测)
{
"pages": [
// 主包页面
{
"path": "pages/index/index",
"style": { "navigationBarTitleText": "首页" }
},
{
"path": "pages/personal/index",
"style": { "navigationBarTitleText": "个人中心" }
},
{
"path": "pages/rushing/index",
"style": { "navigationBarTitleText": "抢购" }
},
{
"path": "pages/rushing/detail",
"style": { "navigationBarTitleText": "抢购详情" }
}
],
"subPackages": [
{
"root": "pages/sub-pages",
"pages": [
// 登录模块
"login/index",
"login/register",
"login/reset-account",
"login/change-pwd",
// 用户信息
"user-info/index",
// 地址管理
"address/index",
"address/detail",
// 商品
"good/good-detail",
// 搜索
"search/index",
// 订单
"shop-order/index",
"rushing-order/index",
"rushing-order/detail",
// 财务
"balance/index",
"coupon/index",
"withdraw/index",
"withdraw/list",
"prize/index",
// 收款方式
"my-payee/index",
"my-payee/zfb-detail",
"my-payee/yl-detail",
// 推广
"invite/index",
"my-fans/index",
"promote-prize/index",
// 协议
"agreement/index",
"agreement/contract",
"agreement/contract1",
"agreement/my-contract",
// 设置
"setting/index",
"setting/404",
// WebView
"webview/index",
"webview/sign",
"webview/sign-preview"
]
}
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/rushing/index",
"text": "抢购"
},
{
"pagePath": "pages/sub-pages/rushing-order/index",
"text": "订单"
},
{
"pagePath": "pages/personal/index",
"text": "我的"
}
]
}
}
```
---
## 📊 十、页面与API映射表
| 页面 | 主要API |
|------|---------|
| 首页 | /api/index/banner, /api/index/get, /api/goods/category, /api/goods/list |
| 个人中心 | /api/user/info |
| 抢购列表 | /api/order/goods, /api/order/index |
| 抢购详情 | /api/goods/detail |
| 登录 | /api/user/login |
| 注册 | /api/user/register, /api/sms/send |
| 用户信息 | /api/user/info, /api/user/nickname |
| 地址管理 | /api/address/list, /api/address/insert, /api/address/update, /api/address/delete |
| 订单列表 | /api/order/list |
| 订单详情 | /api/order/detail, /api/order/pay, /api/order/confirm |
| 分红余额 | /api/money/list?cate=1 |
| 优惠券 | /api/money/list?cate=2 |
| 提现 | /api/money/withdraw |
| 支付宝 | /api/alipay/index, /api/alipay/bind |
| 银行卡 | /api/bank/index |
| 邀请好友 | /api/share/index |
| 我的粉丝 | /api/share/select |
---
## 📝 十一、总结
### 项目特点
1. **功能完整**: 涵盖电商、社交分享、财务管理等多个模块
2. **分包加载**: 使用 uni-app 分包机制,优化加载性能
3. **代码复用**: 通过 chunk 共享模块减少代码冗余
4. **业务清晰**: 模块划分明确,易于维护
### 技术亮点
1. ✅ uni-app 跨平台开发
2. ✅ 分包加载优化
3. ✅ 共享模块复用
4. ✅ 完整的业务闭环
5. ✅ 三级分红体系
### 改进建议
1. **性能优化**:
- sign-preview (1.9MB) 文件过大建议CDN加载
- address-detail (171KB) 地区数据可API动态获取
2. **代码优化**:
- 进一步细化代码分割
- 考虑按需加载第三方库
3. **用户体验**:
- 添加骨架屏
- 优化首屏加载速度
---
## 📚 相关文档
- [后端API接口文档](./后端API接口文档.md)
- [API接口速查表](./API接口速查表.md)
- [API分析总结](./API分析总结-2025-11-08.md)
---
**文档生成时间**: 2025-11-08
**文档版本**: v1.0
**分析工具**: Cursor AI + JS文件分析