# 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 - Axios(HTTP请求) - PDF.js(PDF预览) - 可能的UI库(推测为 uni-ui 或其他) ### 构建工具 - Webpack(根据chunk命名规则) - Babel(ES6转译) --- ## 📋 九、路由配置参考 ```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文件分析