上一篇我们介绍了在线预约的功能，用户可以在服务详情页点击立即预约按钮发起订单。通常我们会在点击按钮的时候做一下登录验证，如果此时用户还未注册，我们会弹出注册页面要求用户注册，本篇我们介绍一下开发过程。

1 登录验证

像这种有明确逻辑的，我们通常是创建自定义方法来编写前端逻辑，在代码区点击新建javascript方法

输入如下代码：

export default async function ({ event, data }) {
  const userInfo = await $w.auth.getUserInfo()
  const openid = userInfo.openId
  const result = await $w.cloud.callDataSource({
    dataSourceName: 'userManagement_hrhzd6x',
    methodName: 'getUserInfo',
    params: {
      openid: openid
    }, // 方法入参
  });
  console.log("result",result)
  if (result?.data?.isRegistered) {
    $w.utils.navigateTo({
      pageId: 'u_xin_zeng_yu_yue', // 页面 Id
      params: { userId: result.data.userInfo._id, serviceId: $w.page.dataset.params.itemid, totalAmount: $w.page.dataset.state.currentPrice }
    });
  } else {
    $w.utils.showModal({
      title: '注册提示',
      content: '尚未注册，请先注册用户',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定');
          $w.modal1.open({})
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
  }

}

代码解释：

• 我们先从登录对象里获取到当前用户的openid
• 接着调用用户管理的获取用户信息的API
• 根据是否注册的属性来做分支判断
• 如果是注册用户就跳转到预约页面，并且传入对应的参数
• 如果非注册用户，弹出模态框，提醒用户注册

API我们在前边的章节已经完成了编写

2 搭建注册弹窗

在页面组件下边添加弹窗组件用来显示注册界面

在弹窗内容下边添加普通容器，里边添加单行输入组件和按钮组件

我们原来一直是用的小程序获取手机号组件实现注册，微信政策改了之后这个组件也变成付费组件了，每次调用都要付费。所以我们改为单行输入组件，让用户主动输入一下手机号来完成注册。

关闭弹窗的显示底部按钮

关闭默认打开弹窗

在我们刚刚添加的自定义方法中，如果模态窗口点击确定的我们就打开弹窗，局部代码

$w.utils.showModal({
      title: '注册提示',
      content: '尚未注册，请先注册用户',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定');
          $w.modal1.open({})
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });

3 注册方法

继续添加一个自定义方法来实现用户的注册

export default async function({event, data}) {
    const userInfo = await $w.auth.getUserInfo()
  const openid = userInfo.openId
  const phone = $w.input1.value
  if(!openid||!phone||!$w.page.dataset.state.currentPrice){
    $w.utils.showToast({
      title:"参数错误",
      icon:"error",
      duration:1000
    })
    return
  }
  const result = await $w.cloud.callDataSource({
    dataSourceName: 'userManagement_hrhzd6x',
    methodName: 'createUserAndMember',
    params: {
      openid: openid,
      phone:phone
    }, // 方法入参
  });
  const userId = result?.data?.userId
  if(!userId){
    $w.utils.showToast({
      title:"注册失败",
      icon:'error',
      duration:1000
    })
    return
  }
  $w.utils.navigateTo({
      pageId: 'u_xin_zeng_yu_yue', // 页面 Id
      params: { userId: userId, serviceId: $w.page.dataset.params.itemid, totalAmount: $w.page.dataset.state.currentPrice }
    });
}

代码说明：

• 从登录对象里获取openid，从单行文本组件里获取用户输入的电话
• 如果参数未获取到我们就提示错误
• 调用用户管理的注册会员API，传入openid和电话
• 如果未获取返回的用户标识提示错误
• 一切正常则跳转到预约下单页面

方法创建好之后，给注册按钮绑定点击事件，调用我们的注册方法

最终效果

点击立即预约按钮，提示用户未注册需要进行注册

点击确定之后，弹出用户注册的弹窗，输入手机号

点击注册，跳转到立即预约的新增页面

总结

本篇我们介绍了服务详情页的登录验证功能，主要演示了结合自定义方法来编写各种前端校验及API调用。低代码是通过组件进行搭建界面，但有时候代码能力也是必不可少的，因为我们通过代码可以很好的控制我们的逻辑走向。