少儿舞蹈小程序（18）订单确认

前言

完成了购物车功能的开发，接下来就是至关重要的订单确认环节。在这个页面中，我们需要展示商品清单、收货信息、支付方式以及价格明细。本篇将重点聚焦于收货地址的逻辑处理，教你如何创建地址表、扩展用户登录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代码：

/*** 用户登录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方法

添加如下代码

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里调用我们的全局方法

步骤二：收货地址模块的逻辑判断与绑定

按照我们的原型图，第一部分是显示收货人的信息。我们需要在这里根据是否有地址来动态展示内容。

先搭建标题

搭建内容区域布局

这里的技巧是，如果用户有地址我们就直接显示，如果没有我们就显示添加地址

为了让视图有一个互斥关系，我们是通过绑定条件展示来实现

一个绑定有地址的表达式

$w.app.dataset.state.user.userAddresses.length>0

一个绑定没有地址的表达式

$w.app.dataset.state.user.userAddresses.length==0

通过以上步骤，你的订单确认页就能实现智能展示收货地址的功能了。在下一篇教程中，我们将详细介绍如何创建地址添加和管理页面，完善整个购物流程。