小程序开发日记⑥：地址簿与收货信息复用
无人机配送的地址不只是“某某路多少号”，还包括船名、MMSI、收货人、手机号、区域和经纬度。地址簿的任务，就是把这一整组信息保存成可复用的业务对象。
1. 管理模式与选择模式
pages/profile/address-book.vue 通过路由参数支持两种模式：
onLoad(options => { pageMode.value = options.mode === 'select' ? 'select' : 'manage'})- 管理模式：新增、编辑、删除、设为默认；
- 选择模式：从下单页进入，点击地址后写入
recipientStore并返回。
一套列表复用两种场景，但按钮与交互目标清晰分开。
2. 地址数据结构
recipientStore 管理以下字段：
const addressId = ref(null)const shipName = ref('')const shipMmsi = ref('')const recipientName = ref('')const recipientPhone = ref('')const fullAreaName = ref('')const detailedAddress = ref('')const regionId = ref(null)const longitude = ref(null)const latitude = ref(null)Store 的价值在于地址选择页与下单页之间不需要把十个字段都拼进 URL，也避免页面返回后数据丢失。
3. 服务端字段归一化
不同接口可能使用 vesselName、receiverName，页面表单则使用更贴近交互的 shipName、recipientName。fillFromAddress 负责回显，buildAddressPayload 负责提交：
function fillFromAddress(address = {}) { addressId.value = address.addressId || address.id || null shipName.value = address.vesselName || '' shipMmsi.value = address.mmsi || '' recipientName.value = address.receiverName || '' recipientPhone.value = address.receiverPhone || '' longitude.value = address.longitude ?? null latitude.value = address.latitude ?? null}这层转换让模板不必同时理解两套命名。
4. 搜索与列表加载
地址列表进入页面时加载，搜索支持收货人、手机号、船名和 MMSI。频繁输入时应避免每个字符都触发无意义请求，可以在页面端防抖，或在点击搜索时统一提交关键词。
空搜索恢复完整列表，删除后重新加载服务端数据，避免只删本地数组造成分页总数和默认状态不一致。
5. 默认地址
设为默认成功后，页面把当前记录标为默认，同时清除其他记录的默认标记：
const applyDefaultFlag = item => ({ ...item, isDefault: String(item.addressId) === String(targetId) ? '1' : '0'})
addressList.value = addressList.value.map(applyDefaultFlag)新建订单时优先加载默认地址，让高频用户无需重复选择。默认地址不存在时再保留空表单，不随便取列表第一条。
6. 删除确认
地址删除是不可逆业务操作，页面先弹确认框，再调用删除接口。若被订单引用，后端应按业务规则拒绝或只做逻辑删除；前端展示明确错误，不擅自从列表隐藏。
7. 地址表单校验
收货人手机号、MMSI、船名、详细地址和经纬度分别校验。尤其经纬度不能只判断“非空”，还要转为有限数字：
const validCoordinate = value => Number.isFinite(Number(value))地图选点返回坐标后，表单仍允许用户补充更具体的地址描述。地理坐标负责计算，文字地址负责阅读，两者缺一不可。
8. 本篇小结
选择地址后的返回策略
选择模式中点击整张卡片写入 Store，再调用 navigateBack。编辑按钮必须阻止事件冒泡，否则用户只是想改地址，却会先把它选中并返回。管理模式则不响应整卡选择，只开放明确的编辑、默认和删除入口。
地址变更与历史订单
修改地址簿记录不应修改已经创建的历史订单。下单时把地址快照写进订单，地址簿只负责为新订单提供默认值。否则用户改了手机号，三个月前的订单详情也跟着变化，历史凭证就失去真实性。
地址列表接口返回空值或坐标缺失时，卡片仍可展示基础信息，但选中下单前必须再次校验完整性。管理页允许修复不完整旧数据，业务提交页则坚持严格校验。
地址簿减少的不是几次打字，而是下单时一整组高风险信息的重复录入。船名少一个字可能只是难看，MMSI 或坐标错一位可就完全是另一艘船。能复用的数据，还是让系统多记一点，人脑少背一点。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！