少儿舞蹈小程序(19)地址列表功能实现及默认地址逻辑

目录

  • [1 API 设计:地址的增、删、改](#1 API 设计:地址的增、删、改)
    • [1.1 新增地址 API (`addAddress`)](#1.1 新增地址 API (addAddress))
    • [1.2 修改地址 API (`updateAddress`)](#1.2 修改地址 API (updateAddress))
  • [2 搭建页面](#2 搭建页面)
  • 总结

继续我们的少儿舞蹈小程序教程。上一篇我们完成了订单确认页面的基础布局,并实现了根据用户是否提供地址来切换视图的功能。本篇,我们将深入讲解如何创建和管理用户的地址列表,尤其关注如何处理默认地址的逻辑。

在订单确认页面,当用户点击"添加地址"或选择已有的地址时,会跳转到地址列表页。这个页面不仅展示了用户所有的收货地址,还提供了添加、编辑和删除地址的功能。本节的重点在于如何通过 API 接口,实现复杂的默认地址设置逻辑。

1 API 设计:地址的增、删、改

为了实现地址管理功能,我们需要设计三个核心的云函数(API):

  • 新增地址 API:负责添加新的收货地址,并处理默认地址的逻辑。
  • 修改地址 API:负责更新已有的收货地址信息。

这里,我们重点讲解新增地址修改地址的 API 编写。


1.1 新增地址 API (addAddress)

新增地址的逻辑需要特别处理默认地址。当用户勾选"设为默认地址"时,我们需要确保该用户下的所有其他地址都被设置为非默认状态。这个逻辑无法通过单个数据库操作完成,需要分两步走。

API 核心逻辑:

  1. 新增地址记录 :首先,调用 wedaCreateV2 方法创建新的地址记录。
  2. 更新其他地址 :如果新增的地址被设置为默认,再调用 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 字段。
  • 如果 isDefaulttrue,我们紧接着调用 wedaBatchUpdateV2
  • wedaBatchUpdateV2filter 参数是关键。我们使用 $ne(不等于)操作符,将 _id 不等于刚刚创建的地址 ID 的记录筛选出来。同时,使用 $eq(等于)操作符确保只处理当前登录用户的地址。

具体操作

在侧边栏导航点击扩展资源,点击+号创建API

选择自定义代码

输入API的名称和标识

输入方法的名称和标识

添加入参

将代码贴入编辑器中,点击方法测试

测试成功点击出参映射就完成了API的编写


1.2 修改地址 API (updateAddress)

修改地址的 API 逻辑与新增类似,也需要处理默认地址的逻辑。

API 核心逻辑:

  1. 修改地址记录 :首先,调用 wedaUpdateV2 方法修改指定的地址记录。
  2. 更新其他地址 :如果修改后的地址被设置为默认,则调用 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_defaulttrue,我们再次调用 wedaBatchUpdateV2,并使用 _id: { $neq: id } 排除掉当前正在修改的地址,以避免重复操作。

2 搭建页面

API准备好之后,我们需要搭建前端的页面。在小程序里创建一个地址管理的页面

添加一个单行输入作为我们的查询条件

添加按钮,改为新增

添加数据列表组件,数据模型设置为地址表

添加弹窗组件,弹窗内容里添加表单容器,数据模型选择地址表

将默认的提交方法改为我们的API,并且配置好入参

给新增按钮配置点击事件,打开弹窗

总结

我们本篇讲解了地址管理的功能,对于需要多步操作的,我们都是先编写API,然后再用表单容器调用。因为微搭现在没有事务,像这种多步操作会出现数据不一致的情况,至少出了问题可以通过日志排查,也算是一种没有办法的补救动作。

相关推荐
90后的晨仔2 小时前
Vue3 + TypeScript + Pinia 实战全解析
前端
90后的晨仔2 小时前
Vue 3 + TypeScript + Pinia 实战架构指南
前端
妄小闲3 小时前
免费html网页模板 html5网站模板 静态网页模板
前端·html·html5
困惑阿三3 小时前
React 展示Markdown内容
前端·react.js·前端框架
lichong9514 小时前
【大前端++】Android studio Log日志高对比度配色方案
android·java·前端·json·android studio·大前端·大前端++
没头脑的男大4 小时前
如何把pdf转换的excell多个表格合并
java·前端·pdf
妄小闲4 小时前
html网站模板 html网页设计模板源码网站
前端·html
Restart-AHTCM4 小时前
前端核心框架vue之(路由篇3/5)
前端·javascript·vue.js
段振轩5 小时前
Docker nginx容器部署前端项目。
前端·nginx·docker