我们之前的文章解释了用户注册功能。注册后，页面需要显示用户的头像和昵称，并显示我的预订菜单。在这篇文章中我们将介绍如何开发它。

1 显示用户头像和昵称

我们在未注册时显示默认头像，而在注册时需要显示用户的头像。这个想法是克隆一个未注册的组件并修改条件显示

克隆完成后，调整级别，点击 移至上一级。

修改普通容器的条件显示，使用如下表达式绑定

app.dataset.state.user._id != ""

对于图片，我们绑定用户对象的字段

app.dataset.state.user.tx

同样的方式，我们设置文本组件，并将文本内容与昵称绑定。

设置完毕后，我们注册一个用户，就会显示该用户的头像和昵称。

2 显示我的预订菜单

我们还想让菜单部分互斥。如果您已经注册，将显示“我的预订”菜单，如果您未注册，将显示注册按钮。操作方法与头像部分相同。先克隆一个组件，然后增加级别，然后修改条件显示部分。

我的保留是菜单的效果。让我们删除按钮并重建组件。该组件具体作用如下

修改普通容器的样式，将布局改为横向排列，两端对齐

self { display: flex; justify-content: space-between; flex-direction: row}

最终设置的效果

3 预约列表页面

当您点击“我的预约”时，需要跳转到预约列表页面。首先创建一个新页面。

添加数据列表组件并修改数据源

我们还需要设置过滤条件。我们使数据与用户的数据相同。

只需根据需要绑定文本组件的文本内容即可

设置好后，在我的页面的我的预约组件中添加点击事件，跳转到预约列表页面。

教程总结

到本文为止，我们的预订功能已经完全开发完成。商家看到预订信息后可以派人提供上门服务。至于后续的业务，可以通过微信的工作流程来搭建。根据目前的功能规划，小程序提供一个预约功能就足够了，其余功能可以离线完成。

让我们再次回顾一下我们的函数