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

目录

• 前言
• [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代码：

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

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