少儿舞蹈小程序（21）我的页面搭建

目录

• [1 登录注册逻辑](#1 登录注册逻辑)
• [2 搭建页面布局](#2 搭建页面布局)
• • [2.1 未登录视图](#2.1 未登录视图)
  • [2.2 搭建登录视图](#2.2 搭建登录视图)
  • [2.3 修改家长信息](#2.3 修改家长信息)
  • [2.4 按照角色跳转](#2.4 按照角色跳转)
• 总结

通常小程序中，在用户浏览完首页的主要业务后，如果希望后续进行报名的，机构需要家长先进行注册，通常在我的页面提供相关的用户登录和注册功能。本篇我们就介绍一下我的页面的搭建思路。

1 登录注册逻辑

我们在前述章节中已经详细讲解了登录的逻辑，对应的API已经编写完毕。在搭建页面的时候，在什么时机调用登录的方法呢？答案是使用页面的生命周期函数

先创建一个我的页面

选中页面组件，在页面显示的时候调用我们全局的登录方法

这种在页面加载完毕后就知道了用户是否已经是登录的状态。

除了前端展示我们还需要完善一下后端的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"}]
      }
    });
    // 4. 查询家长信息
    const parentInfo = await context.callModel({
      dataSourceName: 'dance_parent',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: {
          where: {
            // 通过用户ID关联查询
            user_id: { $eq: userResult._id }
          }
        },
        // 按照是否默认进行排序，将默认地址排在最前面
        select : {
        "$master" : true
      },
      getCount : true,
      pageSize : 1,
      pageNumber : 1,
      }
    });
    // 5. 查询老师信息
    const teacherInfo = await context.callModel({
      dataSourceName: 'dance_teacher',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: {
          where: {
            // 通过用户ID关联查询
            user_id: { $eq: userResult._id }
          }
        },
        // 按照是否默认进行排序，将默认地址排在最前面
        select : {
        "$master" : true
      },
      getCount : true,
      pageSize : 1,
      pageNumber : 1,
      }
    });
    // 返回用户信息
    return {
      code: 200,
      message: '登录成功',
      data: {
        userInfo: userResult,
        isRegistered: isRegistered,
        userAddresses: userAddresses.records,
        parentInfo:parentInfo.records[0],
        teacherInfo:teacherInfo.records[0]
      },
      timestamp: Date.now()
    };

  } catch (error) {
    console.error('用户登录错误:', error);
    return {
      code: 500,
      message: '服务器内部错误',
      data: null,
      timestamp: Date.now()
    };
  }
};

2 搭建页面布局

2.1 未登录视图

首先是搭建未登录的视图

在网格布局的第一列里添加普通容器，里边添加一个普通容器和一个按钮组件，设置外层容器的样式为横向排列，两端对齐

内层的普通容器添加一个图片组件，添加两个文本，设置布局为横向排列，垂直居中

设置图片的宽高各为60，圆角半径为999

绑定图片的地址，从全局变量绑定头像字段

文本组件绑定为全局变量的昵称字段

设置相关组件的背景色，配置好之后如下图

给登录按钮设置点击事件，打开角色选择页面

给按钮设置条件展示，当用户未注册的时候显示登录按钮

2.2 搭建登录视图

登录之后用户的头像和昵称无需再额外设置，只需要再添加一个按钮，显示修改即可

修改的条件展示配置为用户已经登录显示

2.3 修改家长信息

我们在上一篇用表单容器搭建了注册页面，通常注册和修改是可以共用一个页面的。只是在打开的时候需要知道是新增的场景还是修改的场景，如果是修改的场景需要知道数据标识。

为此我们创建两个URL参数用来接收从我的页面传入的数据

在表单场景使用表达式进行绑定

$w.page.dataset.params.formType || 'create'

数据标识也绑定成URL参数

按照此方法，将老师的注册表单也进行完善

2.4 按照角色跳转

在登录的时候无需判断角色，让用户选择身份跳转即可。在修改的时候我们需要知道用户是什么身份，在用户表我们已经增加了角色字段，因此在点击的时候增加一个自定义方法进行跳转即可

export default function ({ event, data }) {

  const role = $w.app.dataset.state.user.userInfo.role
  if (role == "1") {
    $w.utils.navigateTo({
      pageId: 'u_jia_chang_zhu_ce', // 页面 Id
      params: { formType: 'edit',parentId:$w.app.dataset.state.user.parentInfo._id }
    });
  }else if(role=="2"){
    $w.utils.navigateTo({
      pageId: 'u_lao_shi_zhu_ce', // 页面 Id
      params: { formType: 'edit',teacherId:$w.app.dataset.state.user.teacherInfo._id }
    });
  }

}

总结

本篇我们讲解了我的页面用户登录部分的搭建过程，在一个多角色的系统中，如何控制家长、老师这些角色的信息是需要仔细思考的。搭建好，才可以通过角色来灵活的控制菜单的显示，具体数据的权限。