目录
- 前言
- [1 建立收货地址数据表](#1 建立收货地址数据表)
- [2 扩展用户登录API，集成收货地址信息](#2 扩展用户登录API，集成收货地址信息)
- [3 订单确认页视图搭建与逻辑实现](#3 订单确认页视图搭建与逻辑实现)
前言
完成了购物车功能的开发，接下来就是至关重要的订单确认环节。在这个页面中，我们需要展示商品清单、收货信息、支付方式以及价格明细。本篇将重点聚焦于收货地址的逻辑处理 ，教你如何创建地址表、扩展用户登录API，并根据用户地址信息动态搭建页面视图。
1 建立收货地址数据表
在低代码平台中，我们需要先创建一个专门用于存储用户收货地址的数据表。这张表应该与你的用户表关联，并且包含详细的地址信息字段。
地址表（user_addresses）
| 字段名称 | 字段标识 | 字段类型 | 备注 |
|---|---|---|---|
| 地址ID | address_id |
文本 | 唯一标识符，可设置为系统自动生成 |
| 用户ID | user_id |
文本 | 关联dance_users表的_id字段 |
| 收件人姓名 | recipient_name |
文本 | |
| 手机号码 | phone_number |
文本 | |
| 所在地区 | region |
文本 | 省/市/区信息 |
| 详细地址 | detail_address |
文本 | 街道、门牌号等 |
| 是否为默认 | is_default |
布尔 | 标识该地址是否为默认收货地址 |
2 扩展用户登录API，集成收货地址信息
为了在用户登录时一并获取其收货地址，我们需要对现有的登录API进行扩展。我们将通过user_id（即dance_users表的主键_id）来查询user_addresses表，并返回用户的所有地址列表。
以下是扩展后的用户登录API代码：
javascript
/**
* 用户登录API
* 根据openid查询用户表，如果存在返回用户信息，并标识是否为注册用户
*/
module.exports = async function (params, context) {
try {
// 获取openid参数
const openid = params.openid;
// 参数校验
if (!openid) {
return {
code: 400,
message: 'openid不能为空',
data: null,
timestamp: Date.now()
};
}
// 查询用户当前信息（使用查询单条记录的语法）
const userResult = await context.callModel({
dataSourceName: 'dance_users',
methodName: 'wedaGetItemV2',
params: {
filter: {
where: {
openid: { $eq: openid }
}
},
select: { $master: true }
}
});
// 检查用户是否存在
if (!userResult || Object.keys(userResult).length === 0) {
return {
code: 404,
message: '用户不存在',
data: null,
timestamp: Date.now()
};
}
// 判断是否为注册用户（通过是否有手机号来判断）
const isRegistered = !!userResult.phone;
// 3. 查询用户收货地址列表
const userAddresses = await context.callModel({
dataSourceName: 'user_addresses',
methodName: 'wedaGetRecordsV2',
params: {
filter: {
where: {
// 通过用户ID关联查询
user_id: { $eq: userResult._id }
}
},
// 按照是否默认进行排序，将默认地址排在最前面
select : {
"$master" : true
},
getCount : true,
pageSize : 10,
pageNumber : 1,
orderBy:[{"is_default":"desc"}]
}
});
// 返回用户信息
return {
code: 200,
message: '登录成功',
data: {
userInfo: userResult,
isRegistered: isRegistered,
userAddresses: userAddresses.records
},
timestamp: Date.now()
};
} catch (error) {
console.error('用户登录错误:', error);
return {
code: 500,
message: '服务器内部错误',
data: null,
timestamp: Date.now()
};
}
};代码解释：
- 我们使用
context.callModel调用user_addresses表的wedaGetRecordsV2方法，通过user_id字段查询所有与当前用户关联的地址记录。 - 通过
orderBy参数，我们按照is_default字段降序排序，这样如果存在默认地址，它将始终排在列表的第一位。 - 最后，我们将查询到的
userAddresses数组添加到返回数据data中，供前端页面使用。
3 订单确认页视图搭建与逻辑实现
现在我们有了后端支持，就可以在订单确认页上实现前端逻辑了。
步骤一：数据请求与页面加载
API创建好之后，就需要在前端调用，在代码区的全局部分，创建一个javascript方法
添加如下代码
bash
export default async function login() {
const openid = $w.auth.currentUser.openId||"123"
const result = await $w.cloud.callDataSource({
dataSourceName: 'yhgl_rc2573h',
methodName: 'login',
params: {
openid:openid
}, // 方法入参
});
$w.app.dataset.state.user = result.data
}在页面的生命周期函数，onShow里调用我们的全局方法
步骤二：收货地址模块的逻辑判断与绑定
按照我们的原型图，第一部分是显示收货人的信息。我们需要在这里根据是否有地址来动态展示内容。
先搭建标题
搭建内容区域布局
这里的技巧是，如果用户有地址我们就直接显示，如果没有我们就显示添加地址
为了让视图有一个互斥关系，我们是通过绑定条件展示来实现
一个绑定有地址的表达式
bash
$w.app.dataset.state.user.userAddresses.length>0一个绑定没有地址的表达式
bash
$w.app.dataset.state.user.userAddresses.length==0通过以上步骤，你的订单确认页就能实现智能展示收货地址的功能了。在下一篇教程中，我们将详细介绍如何创建地址添加和管理页面，完善整个购物流程。