# 校园快递代取小程序第一版设计 ## 目标 做一个可以跑通流程的微信小程序演示版，用于验证校园快递代取送货上门服务的核心路径。 第一版不依赖正式 AppID、不需要服务器、不接支付、不做上线发布。数据先存在微信小程序本地缓存里，方便直接用微信开发者工具测试页面和流程。 ## 范围 第一版包含： - 一个小程序内切换“客户 / 商家”两个角色。 - 客户创建快递代取订单。 - 客户查看订单列表和订单详情。 - 每个订单有一个沟通窗口，消息本地保存。 - 商家端先做预留页面。 - 订单状态字段提前预留，方便后续补商家接单和状态更新。 第一版不包含： - 多台手机之间实时共享数据。 - 商家接单页面和接单操作。 - 骑手分配。 - 微信支付。 - 用户真实登录和身份校验。 - 云数据库或自建服务器。 - 生产上线。 ## 用户流程 小程序打开后直接进入可操作界面，不做营销首页。底部导航提供“客户”和“商家”两个入口。 客户流程： 1. 进入客户首页。 2. 点击创建快递代取订单。 3. 填写快递信息。 4. 填写收货和联系方式。 5. 提交订单。 6. 查看订单状态和订单详情。 7. 进入订单沟通窗口发送消息。 商家流程： 1. 进入商家页。 2. 看到“商家接单功能预留中”的页面。 3. 页面保留后续订单列表、接单、状态更新的位置。 ## 页面结构 - `pages/customer/index`：客户首页，包含下单入口和最近订单。 - `pages/order/form`：订单填写页。 - `pages/order/detail`：订单详情页，展示订单信息和沟通入口。 - `pages/order/chat`：订单沟通窗口。 - `pages/merchant/index`：商家端预留页。 第一版不单独做个人中心。角色切换通过底部导航完成。 ## 订单数据 订单字段： - `id`：本地唯一 ID。 - `status`：订单状态。 - `statusText`：状态中文文案。 - `station`：快递站点、驿站或柜机。 - `pickupCode`：取件码。 - `company`：快递公司。 - `packageName`：包裹描述，可选。 - `receiverName`：收货人姓名。 - `phone`：联系电话。 - `building`：宿舍楼、教学楼或配送地点。 - `room`：房间号，可选。 - `note`：备注，可选。 - `createdAt`：创建时间。 - `updatedAt`：更新时间。 订单状态： - `pending`：待接单。 - `accepted`：已接单。 - `picking`：取件中。 - `delivering`：配送中。 - `completed`：已送达。 - `exception`：异常。 第一版客户提交订单后，默认状态为 `pending`。 ## 消息数据 消息字段： - `id`：本地唯一 ID。 - `orderId`：所属订单 ID。 - `senderRole`：发送方，值为 `customer` 或 `merchant`。 - `content`：消息内容。 - `createdAt`：发送时间。 第一版聊天是本地模拟聊天。同一台开发设备里，消息可以保存并在重新进入订单后看到。 ## 本地存储 封装一个数据工具模块，统一读写微信本地缓存： - `orders`：订单列表。 - `messages:`：某个订单的消息列表。 页面不直接散落调用存储接口，后续迁移微信云开发时只替换数据工具模块。 ## 界面方向 界面做成实用型校园服务工具，同时参考苹果产品的简约高级感： - 客户首页突出“立即下单”和订单状态。 - 表单分成“快递信息”和“收货信息”两组。 - 订单列表使用简洁卡片。 - 订单详情清晰展示取件码、驿站、地址、电话和备注。 - 聊天窗口贴近常见 IM 样式。 - 商家页简洁说明功能已预留。 - 主背景使用接近白色的浅灰，内容区域用白色和很浅的阴影拉开层次。 - 使用克制的蓝色作为主要操作色，搭配黑、白、灰作为主体色。 - 字体层级清晰，标题、正文、辅助信息的大小和颜色有明显区分。 - 表单输入框、按钮和订单卡片保持统一圆角，整体干净但不过度圆润。 - 页面留白充足，信息密度适中，避免花哨装饰和大面积渐变。 - 底部导航和顶部标题保持轻量，突出当前任务而不是装饰元素。 ## 表单校验 提交订单前必须填写： - 快递站点。 - 取件码。 - 收货人姓名。 - 联系电话。 - 配送地点。 校验失败时使用微信 toast 提示，并保留在当前表单页。 ## 验证标准 第一版完成后需要能手动验证： - 小程序可以在微信开发者工具中用测试号打开。 - 客户可以提交订单。 - 新订单会出现在客户首页订单列表。 - 订单详情能展示提交的信息。 - 订单沟通窗口可以发送消息。 - 消息在返回详情页再进入聊天后仍然存在。 - 商家页可以打开，并展示接单功能预留区域。 - 页面视觉清爽、有层次，主要按钮和关键订单信息一眼能看到。 ## 后续升级 拿到正式 AppID 后，可以升级到微信云开发： - `orders` 云数据库集合。 - `messages` 云数据库集合。 - 使用 OpenID 区分用户。 - 增加商家权限。 - 增加商家接单、状态更新和订阅消息。 再往后可以继续增加配送费规则、微信支付、评价、优惠券、数据统计和运营后台。