目录
- [1 API 设计:地址的增、删、改](#1 API 设计:地址的增、删、改)
-
- [1.1 新增地址 API (`addAddress`)](#1.1 新增地址 API (
addAddress
)) - [1.2 修改地址 API (`updateAddress`)](#1.2 修改地址 API (
updateAddress
))
- [1.1 新增地址 API (`addAddress`)](#1.1 新增地址 API (
- [2 搭建页面](#2 搭建页面)
- 总结
继续我们的少儿舞蹈小程序教程。上一篇我们完成了订单确认页面的基础布局,并实现了根据用户是否提供地址来切换视图的功能。本篇,我们将深入讲解如何创建和管理用户的地址列表,尤其关注如何处理默认地址的逻辑。
在订单确认页面,当用户点击"添加地址"或选择已有的地址时,会跳转到地址列表页。这个页面不仅展示了用户所有的收货地址,还提供了添加、编辑和删除地址的功能。本节的重点在于如何通过 API 接口,实现复杂的默认地址设置逻辑。
1 API 设计:地址的增、删、改
为了实现地址管理功能,我们需要设计三个核心的云函数(API):
- 新增地址 API:负责添加新的收货地址,并处理默认地址的逻辑。
- 修改地址 API:负责更新已有的收货地址信息。
这里,我们重点讲解新增地址 和修改地址的 API 编写。
1.1 新增地址 API (addAddress
)
新增地址的逻辑需要特别处理默认地址。当用户勾选"设为默认地址"时,我们需要确保该用户下的所有其他地址都被设置为非默认状态。这个逻辑无法通过单个数据库操作完成,需要分两步走。
API 核心逻辑:
- 新增地址记录 :首先,调用
wedaCreateV2
方法创建新的地址记录。 - 更新其他地址 :如果新增的地址被设置为默认,再调用
wedaBatchUpdateV2
方法,将该用户下的其他地址的默认状态字段批量更新为非默认。
代码实现:
javascript
module.exports = async function (params, context) {
// 根据入参截图,解构出对应的字段
const { recipient_name, is_default, detail_address, region, phone_number,user_id } = params;
try {
// 1. 调用 wedaCreateV2 新增地址
const createResult = await context.callModel({
dataSourceName: 'user_addresses', // 替换为你的地址数据模型标识
methodName: 'wedaCreateV2',
params: {
data: {
recipient_name: recipient_name,
is_default: is_default,
detail_address: detail_address,
region: region,
phone_number: phone_number,
user_id: {_id:user_id}, // 关联当前用户
},
},
});
// 2. 如果新增地址设置为默认,则批量更新其他地址
if (is_default) {
await context.callModel({
dataSourceName: 'user_addresses', // 替换为你的地址数据模型标识
methodName: 'wedaBatchUpdateV2',
params: {
data: {
is_default: false, // 将其他地址的默认状态设为 false
},
filter: {
where: {
_id: { $neq: createResult.id }, // 过滤条件:排除刚刚新增的地址
},
},
},
});
}
// 返回成功结果
return {
code: 0,
message: '地址添加成功',
data: createResult.id,
};
} catch (error) {
// 捕获并返回错误信息
return {
code: -1,
message: error.message,
};
}
};
代码解析:
- 我们首先通过
wedaCreateV2
插入新的地址数据,其中包含了is_default
字段。 - 如果
isDefault
为true
,我们紧接着调用wedaBatchUpdateV2
。 wedaBatchUpdateV2
的filter
参数是关键。我们使用$ne
(不等于)操作符,将_id
不等于刚刚创建的地址 ID 的记录筛选出来。同时,使用$eq
(等于)操作符确保只处理当前登录用户的地址。
具体操作
在侧边栏导航点击扩展资源,点击+号创建API
选择自定义代码
输入API的名称和标识
输入方法的名称和标识
添加入参
将代码贴入编辑器中,点击方法测试
测试成功点击出参映射就完成了API的编写
1.2 修改地址 API (updateAddress
)
修改地址的 API 逻辑与新增类似,也需要处理默认地址的逻辑。
API 核心逻辑:
- 修改地址记录 :首先,调用
wedaUpdateV2
方法修改指定的地址记录。 - 更新其他地址 :如果修改后的地址被设置为默认,则调用
wedaBatchUpdateV2
方法批量更新该用户下的其他地址。
代码实现:
javascript
module.exports = async function (params, context) {
const { recipient_name, is_default, detail_address, region, phone_number,user_id,id } = params;
try {
// 1. 调用 wedaUpdateV2 修改指定的地址
const updateResult = await context.callModel({
dataSourceName: 'user_addresses', // 替换为你的地址数据模型标识
methodName: 'wedaUpdateV2',
params: {
data: {
recipient_name: recipient_name,
is_default: is_default,
detail_address: detail_address,
region: region,
phone_number: phone_number,
user_id: {_id:user_id}, // 关联当前用户
},
filter: {
where: {
_id: { $eq: id }, // 过滤条件:根据传入的 id 找到要修改的记录
},
},
},
});
// 2. 如果修改后的地址被设为默认,则批量更新其他地址
if (is_default) {
await context.callModel({
dataSourceName: 'user_addresses', // 替换为你的地址数据模型标识
methodName: 'wedaBatchUpdateV2',
params: {
data: {
is_default: false,
},
filter: {
where: {
_id: { $neq: id }, // 排除当前修改的地址
},
},
},
});
}
// 返回成功结果
return {
code: 0,
message: '地址修改成功',
data: updateResult.data,
};
} catch (error) {
return {
code: -1,
message: '地址修改失败',
};
}
};
代码解析:
- 与新增类似,我们首先使用
wedaUpdateV2
修改指定的地址。注意,filter
里的_id: { $eq: id }
确保我们只修改目标记录。 - 如果
is_default
为true
,我们再次调用wedaBatchUpdateV2
,并使用_id: { $neq: id }
排除掉当前正在修改的地址,以避免重复操作。
2 搭建页面
API准备好之后,我们需要搭建前端的页面。在小程序里创建一个地址管理的页面
添加一个单行输入作为我们的查询条件
添加按钮,改为新增
添加数据列表组件,数据模型设置为地址表
添加弹窗组件,弹窗内容里添加表单容器,数据模型选择地址表
将默认的提交方法改为我们的API,并且配置好入参
给新增按钮配置点击事件,打开弹窗
总结
我们本篇讲解了地址管理的功能,对于需要多步操作的,我们都是先编写API,然后再用表单容器调用。因为微搭现在没有事务,像这种多步操作会出现数据不一致的情况,至少出了问题可以通过日志排查,也算是一种没有办法的补救动作。