25 user uniapp reuse audit

用户端 uni-app 架构与组件复用审计

本文档用于约束 SmartFarm 用户端的页面设计和后续任务拆解。目标不是为智慧农业重新设计一套移动商城，而是确认现有 uni-app 页面、DIY、组件、交易和多端适配能力可以复用到什么程度。

审计日期：2026-07-30

审计范围：smartfarm_user

本次只执行源码和运行配置读取，没有修改源码、运行服务、数据库或业务配置。

一、核心结论

1. 用户端已经具备成熟的商城视觉骨架、DIY 首页、商品、活动、下单、支付、地址、物流、售后和用户中心能力。
2. 智慧农业页面不需要另起一套移动端设计系统。
3. 云仓可以参考普通秒杀的场次、倒计时、库存、规格和抢购反馈，但不能继续使用普通秒杀的订单、库存、持仓和结算语义。
4. 租地、认养和云仓新增的是领域状态与领域内容，不是重新开发轮播、金额、图片、弹窗、地址、支付和空状态。
5. 不建议复制整个秒杀详情、订单列表或订单详情后修改。这些页面体量大，且与普通商城状态、物流和售后高度耦合。
6. 用户端新业务应进入分包，不增加永久底部 Tab，入口优先来自首页 DIY 和“我的”动态菜单。
7. 低保真设计前必须先完成每个页面的“现有页面基准 + 直接复用组件 + 扩展组件 + 新增领域组件”映射。

二、路由、主包和分包

1. 当前结构

smartfarm_user/pages.json 当前包含：

• 主包：首页、分类、购物车、用户中心、登录、引导和错误页等高频入口。
• 27 个分包。
• 普通秒杀位于 pages/activity 分包。
• 秒杀列表：pages/activity/goods_seckill/index。
• 秒杀详情：pages/activity/goods_seckill_details/index。

当前原生 tabBar：

导航	pagePath
首页	pages/index/index
分类	pages/goods_cate/goods_cate
购物车	pages/order_addcart/order_addcart
我的	pages/user/index

原生选中色为 #E93323。

数据库当前启用的 DIY 页脚是 5 项：

首页、分类、逛逛、购物车、我的

结论：

• pages.json tabBar 是静态和降级配置。
• 正式设计必须同时核对数据库 DIY 页脚。
• V1 不新增第 6 个永久底部导航。

2. 新业务分包建议

推荐拆成两个业务分包，最终目录名在 G4 评审确认：

pages/farm
├─ 农场专区
├─ 租地
├─ 认养
├─ 我的土地
├─ 我的认养
└─ 溯源

pages/cloudWarehouse
├─ 云仓活动
├─ 抢购确认
├─ 付款结果与去向选择
├─ 我的云仓
├─ 持仓与代销进度
├─ 提货/自提
└─ 收益账本

推荐单独拆分云仓的原因：

• 云仓是营销和经营业务，不属于租地/认养资产。
• 云仓页面和状态数量较多，独立分包更利于包体积和职责控制。
• 后续可以独立控制分包加载、包体统计和回归。
• 避免把 pages/farm 变成包含所有智慧农业和营销页面的超大分包。

三、首页 DIY 链路

1. 当前链路

pages/index/index.vue
  ↓
components/diyPage/common/diyDataProvider.vue
  ↓
store/modules/diy.js
  ↓
/api/diy
  ↓
sub-packages/diy/diyPage/index.vue
  ↓
按数据库配置动态渲染 DIY 组件

关键事实：

• diyDataProvider 同时服务平台首页、商户店铺和 DIY 预览。
• store/modules/diy.js 会缓存首页、指定 DIY 和商户 DIY 数据。
• getDiyId 的选择优先级为 URL diyId、全局 ID、Vuex ID、最后为 0。
• 当前启用首页顺序为 homeComb → menus → coupon → goodList → pageFoot。
• 当前未启用草稿中已经存在普通 seckill DIY 组件。

2. 智慧农业入口策略

入口	推荐复用
农场专区	复用 menus 或 homeComb 配置入口
租地/认养频道	复用菜单、图片、标题和商品列表样式
集市云仓	新增与普通 seckill 同级的云仓 DIY 组件，复用倒计时和商品展示基础组件
我的土地/认养/云仓	复用用户中心 /common/menus 动态菜单

云仓 DIY 组件不得直接调用普通秒杀状态接口后再补字段。它应使用独立云仓 API，只复用展示基础。

四、应用初始化、主题与请求

1. 启动链路

main.js
  ↓
App.vue onLaunch
  ↓
/api/config
  ↓
GLOBAL_DATA
  ├─ VIEW_COLOR
  └─ KEY_COLOR
  ↓
普通页面与 DIY 组件

关键文件：

• smartfarm_user/main.js
• smartfarm_user/App.vue
• smartfarm_user/store/modules/app.js
• smartfarm_user/utils/request.js
• smartfarm_user/libs/login.js
• smartfarm_user/mixins/device-env.js

2. 当前主题

项	当前值
主色	#E93323
辅助色	#FF7612
页面背景	#F5F5F5 / #F8F8F8
主要文字	#282828

新页面要求：

• 优先使用 viewColor、--view-theme 和当前主题注入能力。
• 不继续增加无必要的红色硬编码。
• 不把全站改成农业绿色。
• Figma 使用 Noto Sans SC 只是协作字体，运行端保留现有 PingFang SC 和平台字体处理。

3. 登录与请求

• Token、过期时间、UID 和用户信息由缓存与 Vuex 共同维护。
• 请求层统一添加 /api/、Bearer Token 和 UUID。
• 登录失效、错误提示和登录跳转已有统一处理。
• 角色已有普通用户、商户、员工和配送员，并有各自首页映射。

智慧农业页面应复用现有登录和请求层，不新增第二套 Token、HTTP 客户端或用户身份状态。

五、现有移动视觉模式

模式	当前源码事实	设计要求
页面基底	背景 #F5F5F5、正文约 28rpx、文字 #282828	新页面继续使用现有页面基底
普通卡片	白底、常见间距 20rpx、圆角 24rpx	不强行改成桌面端 4px 圆角
用户中心	外边距 20rpx、服务宫格 4 列、图标 52rpx、标签 24rpx	新入口沿用现有服务宫格
搜索和筛选	搜索框高约 60rpx、圆角约 50rpx；筛选栏约 86rpx	租地/认养列表复用现有节奏
金额	商品主价格常见 34rpx	统一使用 priceFormat
底部操作栏	高约 120rpx + safe-area；主按钮约 200 × 72rpx	固定栏必须包含安全区
弹窗	常见顶部圆角 40rpx	复用 uni-popup 和现有弹层样式
空态/加载	已有 skeleton、Loading、emptyPage	不新增另一套全局状态组件
秒杀卡片	商品图约 240rpx、圆角 16rpx；卡片圆角 24rpx	云仓活动列表可参考

代表文件：

• smartfarm_user/static/css/base.css
• smartfarm_user/static/css/style.scss
• smartfarm_user/pages/user/index.vue
• smartfarm_user/pages/users/order_list/index.vue
• smartfarm_user/pages/users/order_confirm/index.vue
• smartfarm_user/pages/columnGoods/goods_list/index.vue
• smartfarm_user/pages/activity/goods_seckill/index.vue

六、组件复用清单

1. 可直接复用

组件	路径	用途
BaseContainer	components/common/base_container.vue	安全区、胶囊尺寸、页面最小高度和全局 CSS 变量
BaseNavBar	components/common/base_nav_bar.vue	小程序/APP 自定义导航和返回
priceFormat	components/priceFormat.vue	金额格式、整数与小数层级
easyLoadimage	components/easyLoadimage/easyLoadimage.vue	图片加载、占位和错误状态
countDown	components/countDown/index.vue	活动和截止时间倒计时
emptyPage	components/emptyPage.vue	空数据
Loading	components/Loading/index.vue	加载中
productConSwiper	components/productConSwiper/index.vue	详情页图片/视频轮播
jyf-parser	components/jyf-parser/jyf-parser.vue	富文本规则、详情和溯源内容
uni-popup	uni_modules/uni-popup	底部弹层、确认和选择
uni-datetime-picker	uni_modules/uni-datetime-picker	日期时间选择

注册方式：

• 全局注册只有 skeleton 和 priceFormat。
• APP 环境额外全局注册 diyPage。
• 其余组件使用页面局部注册或 uni_modules easycom。

新组件不应为了“使用方便”全部改成全局注册。

2. 可扩展复用

组件/页面	路径	可复用内容	必须隔离的内容
productWindow	components/productWindow/index.vue	SKU、数量、库存和确认交互	普通商品价格和购物车业务
addressWindow	components/addressWindow/index.vue	地址选择入口	代销状态
AddressSelector	pages/users/order_confirm/components/AddressSelector.vue	邮寄地址展示和选择	普通订单配送组合逻辑
DeliveryType	pages/users/order_confirm/components/DeliveryType.vue	邮寄/自提视觉参考	云仓三种去向状态
OrderSummary	pages/users/order_confirm/components/OrderSummary.vue	金额摘要布局	云仓本金、收益和回购公式
DIY seckill	sub-packages/diy/diyPage/seckill.vue	标题、倒计时和横向商品展示	普通秒杀 API 与订单语义
普通秒杀列表	pages/activity/goods_seckill/index.vue	场次、倒计时、库存和抢购进度	云仓批次、持仓和回购
用户账单	pages/users/user_bill/index.vue	流水列表、金额方向和筛选风格	云仓账本类型、公式和冻结状态

3. 不建议整页复制

• pages/activity/goods_seckill_details/index.vue
• pages/users/order_confirm/index.vue
• pages/users/order_list/index.vue
• pages/order_details/index.vue

原因：

• 页面体量大。
• 普通商品、活动、物流、优惠和售后分支较多。
• 复制后容易形成无法同步修复的平行版本。
• 云仓、租地和认养只应复用其中的基础组件、样式和明确的适配点。

七、普通秒杀链路

当前链路：

秒杀场次/商品列表
  ↓
秒杀详情
  ↓
postCartAdd(product_type = 1)
  ↓
普通 order_confirm
  ↓
createOrder
  ↓
order_payment
  ↓
order_pay_status
  ↓
普通订单列表/详情

关键文件：

• smartfarm_user/api/activity.js
• smartfarm_user/pages/activity/goods_seckill/index.vue
• smartfarm_user/pages/activity/goods_seckill_details/index.vue
• smartfarm_user/pages/users/order_confirm/index.vue
• smartfarm_user/pages/users/order_payment/index.vue
• smartfarm_user/pages/order_pay_status/index.vue

1. 云仓可以参考

• 场次切换。
• 倒计时。
• SKU 和数量选择。
• 限购与活动库存。
• 抢购进度。
• 支付方式和支付结果查询。
• 支付成功后的结果页视觉。

2. 云仓必须独立

• 云仓活动 SKU 和批次。
• 付款后延迟选择去向。
• 每个订单明细单一去向。
• 邮寄、自提、代销互斥。
• 用户持仓。
• 真实二次销售进度。
• 三种本金/收益结算模式。
• 到期未售和平台回购。
• 用户云仓账本。

云仓不能只增加一个新的 product_type 后继续依赖普通订单状态解释全部流程。

八、交易与履约复用边界

能力	复用方案	云仓边界
登录和用户身份	直接复用	不新增用户账号体系
地址	直接复用地址列表和选择	仅邮寄使用，代销不要求地址
自提	复用自提点、联系人和核销展示	使用云仓独立去向状态
运费模板	复用试算能力	首次付款后通过独立补运费单支付
支付	复用余额/微信等支付方式和结果查询	支付组件只返回结果，不处理持仓
普通退款	首次购买进入持仓前可复用	进入持仓后转云仓调整、冻结和冲正
物流	复用物流查询和展示	只表示邮寄提货，不表示代销进度
优惠券/积分	CRMEB 能力存在	V1 云仓首次购买建议禁用
会员价/分销	CRMEB 能力存在	V1 云仓首次购买建议禁用

九、用户页面复用矩阵

1. 云仓

页面	现有页面基准	直接复用	扩展/新增领域表达
集市云仓	普通秒杀列表、DIY seckill	倒计时、图片、金额、加载和空态	云仓场次、批次、预计周期和回购提示
云仓商品详情	秒杀详情、普通商品详情	轮播、富文本、SKU/数量弹层、底部栏	去向说明、结算模式、收益比例和回购规则
云仓抢购确认	order_confirm	商品摘要、金额、协议、支付入口	不显示地址、券、积分和普通配送；展示规则快照
云仓支付成功	支付状态页	支付结果、金额和返回	“立即选择、稍后选择、继续抢购”
云仓订单中心	普通订单卡片	图片、金额、时间、空态和分页	待选择、去向、持仓和批次状态
云仓去向选择	uni-popup、配送类型视觉	单选、确认、固定底栏	整条明细互斥选择，不拆数量
邮寄补运费	地址选择、订单摘要、支付	地址、运费试算、支付	独立补运费单和超时结果
自提凭证	自提点和核销页面	联系人、地图入口、核销码	云仓去向和逾期状态
我的云仓	订单列表、用户账单	列表、筛选、金额和状态标签	用户持仓、批次和未售数量
云仓持仓详情	订单详情视觉	商品、金额、时间和客服入口	进度、节点、本金、收益、回购和冻结
云仓账本	user_bill	流水方向、筛选、金额格式	本金、收益、回购、冲正和公式快照

2. 租地、认养与溯源

页面	现有页面基准	直接复用	扩展/新增领域表达
农场专区	DIY 首页、频道菜单	菜单、图片、标题和商品列表	农场、租地和认养聚合
租地/认养列表	columnGoods/goods_list	搜索、筛选、图片、价格/费用和空态	周期、面积、份额、预计产出和可分配状态
租地/认养详情	普通商品详情	轮播、富文本、参数、底部栏	地块/资产模式、周期、服务、异常和交付规则
下单确认	order_confirm 基础组件	商品摘要、协议、支付	作物/套餐、服务选项，不显示云仓代销
我的土地/认养	普通订单列表/详情视觉	卡片、状态、客服和时间	真实资产、生产时间线、异常和产出
产出邮寄	地址、物流和售后	地址、运费、物流	产出批次和可交付数量
溯源档案	富文本、图片预览、时间线样式	图片、视频、报告预览	版本、生产记录、证书、检测报告和发布状态

十、多端设计约束

1. H5

• 支持浏览器历史和 H5 返回行为。
• 微信内 H5 存在独立授权和分享分支。
• 固定底栏必须适配 safe-area-inset-bottom。

2. 微信小程序

• 需要适配胶囊按钮、自定义导航和顶部安全区。
• 登录、授权、分享和支付流程与普通 H5 不同。
• 新业务页面不进入主包，避免扩大首包。
• 页面归属需要同时考虑分包预加载和包体积。

3. 共同约束

• 设计稿至少验证 390 × 844 和 375 × 812。
• 头部至少验证普通自定义导航和小程序胶囊导航。
• 交互不能依赖 hover。
• 弹窗和长列表需要验证 H5 与小程序返回栈。
• 固定按钮、底部弹层和核销码不能被系统安全区遮挡。

4. 地图与定位复用结论

• manifest.json 已声明 Maps、Geolocation 和微信位置权限，H5/微信小程序配置中存在客户端地图 Key 硬编码；文档不记录具体值，发布前改为环境绑定配置。
• store/modules/location.js 当前使用 uni.getLocation({type: "wgs84"}) 后请求后端腾讯逆地址，utils/util.js 另有未显式指定坐标系的定位逻辑，存在 WGS84/GCJ02 混用风险。
• 现有 uni.chooseLocation 和 uni.openLocation 可继续复用，但所有新农场和自提点目标坐标必须由后端明确返回 GCJ02。
• 新农场位置页不自动获取用户当前位置，直接用保存的目标点位调用 uni.openLocation；定位权限只用于未来可选的“距我多远”能力。
• 地图加载失败、Key 未配置或用户拒绝定位时，地址、示意图、复制和导航降级必须可用。
• 当前 uni-app 版本不作为 V1 农场位置页的升级前置条件；只有启用 H5 当前定位或距离计算时，才单独评估版本升级及全端回归。

十一、当前已发现问题

这些是现有项目缺陷或技术债，不属于智慧农业新功能：

等级	问题	位置/影响
高	DIY “种草社区”错误指向秒杀页	数据库装修配置
高	原生 4 项 tabBar 与运行态 5 项 DIY 页脚不一致	设计和验收必须以运行配置为准
高	秒杀详情读取 time_id，部分跳转传 time	libs/order.js 与秒杀详情参数不一致
高	默认登录路径写成 /page/users/login/index	libs/login.js，正确目录为 pages
中	多个页面继续硬编码红色，动态主题覆盖不完整	新页面必须优先使用主题注入
中	部分组件使用不正确的多类型 Prop 写法	复用前应单独评估，不在设计任务中顺手重构
中	确认订单页残留 debugger	pages/users/order_confirm/index.vue
中	首页定位使用 WGS84 后进入腾讯地图链路，其他调用又未统一坐标系	store/modules/location.js、utils/util.js，需独立回归后统一
中	种草、瀑布流和短视频商品组件存在平行版本	不继续复制分叉组件
低	DIY 尺寸注释与实际限制不一致	utils/diy.js
配置	API/WS、第三方脚本和客户端地图 Key 存在硬编码	上线环境需迁移配置，文档不记录具体 Key；服务端 Key/SK 禁止进入客户端

处理原则：

• 建立独立“CRMEB 现状缺陷修复”任务。
• 不在智慧农业页面任务中顺手大范围重构。
• 影响新页面复用的缺陷必须在联调前修复并回归。

十二、对 Figma 的直接约束

1. 设计前必须具备

• 页面字段字典。
• 页面状态字典。
• 普通页面基准截图。
• 直接复用组件清单。
• 扩展组件差异。
• 新增领域组件说明。
• H5 和小程序差异。

2. Figma 页面与现有实现映射

Figma 内容	现有实现基准
首页农业入口	DIY menus、homeComb、goodList
租地/认养列表	columnGoods/goods_list、easyLoadimage
租地/认养详情	productConSwiper、priceFormat、jyf-parser、底部购买栏
云仓活动列表	普通秒杀列表、DIY seckill
云仓活动详情	秒杀详情的轮播、倒计时和规格交互
抢购确认与支付	order_confirm 的基础组件、支付页和支付结果页
付款后选择	uni-popup、单选、固定底栏
持仓和代销进度	普通订单卡片视觉、独立批次进度
提货确认	AddressSelector、addressWindow、运费摘要
收益明细	user_bill、priceFormat、状态标签
全局状态	skeleton、Loading、emptyPage、错误页

3. 暂不建立的组件

在页面低保真评审前，不提前创建：

• 第二套图片组件。
• 第二套价格组件。
• 第二套空态和加载组件。
• 第二套地址选择器。
• 第二套支付方式组件。
• 第二套普通订单卡片。

十三、对代码蓝图的影响

需要在 21-v1-code-change-blueprint.md 中调整：

1. 云仓与租地/认养建议使用两个分包，不全部塞入 pages/farm/cloud。
2. “新增公共组件”改为“优先组合现有组件”，只保留领域组件。
3. 支付组件只增加白名单回跳参数并返回支付结果，下一步仍由订单查询的 next_action 决定。
4. 用户中心入口通过现有动态菜单机制增加。
5. 首页入口通过 DIY 增加，云仓 DIY 与普通 seckill 同级。
6. 普通订单列表和详情只增加摘要和专属页跳转，不复制全部云仓状态。
7. 把现状缺陷修复列为独立前置任务。

十四、用户端低保真前检查记录

以下条件已在 17、18、21、24、30 和 Figma 低保真阶段完成；本节保留为历史进入条件：

• 云仓、租地和认养页面字段已经冻结。
• 云仓、租地和认养状态字典已经冻结。
• 每个页面已选择现有页面基准。
• 每个页面已列出直接复用组件。
• 每个页面已列出扩展组件和差异。
• 每个新增领域组件都有明确职责。
• 新业务分包方案已确认。
• 首页 DIY 和用户中心入口方案已确认。
• H5 与小程序头部、返回栈和安全区已确认。
• 云仓没有复用普通秒杀的订单和结算状态。
• 现状高风险缺陷有独立修复任务。

十五、关联文档

• 11-current-menu-page-audit.md
• 17-v1-information-architecture.md
• 18-v1-page-and-prototype-spec.md
• 21-v1-code-change-blueprint.md
• 23-crmeb-visual-baseline-audit.md
• 24-g3-g4-decision-register.md