订水商城H5实战教程-02系统登录

上一篇我们分析了订水商城的功能，功能分析好了之后，就需要开发功能。用户登录商城的第一步就是进行登录，登录的时候需要同意用户协议，并且录入个人信息。因此我们先设计两个数据源用来满足数据展示和录入的需求。

1 创建数据源

打开控制台，点击数据模型，点击创建按钮

输入模型名称，先输入用户协议

点击编辑按钮，添加字段


先添加一个协议名称字段，类型选择文本

再添加一个协议内容字段，类型选择富文本

再添加一个数据源，记录用户的注册信息

第一个字段添加用户的姓名，类型选择文本

添加第二个字段，性别，类型选择枚举，枚举值为先生和女士

添加第三个字段，联系方式，类型选择电话

添加第四个字段，userid，类型选择文本，用来识别数据的权限

添加第五个字段，角色，类型选择枚举，枚举值分别为客服、水厂、顾客、送水工

添加第五个字段，审核状态，类型是枚举，枚举值是待审核、已审核

2 创建自定义应用

数据源创建好之后就需要创建应用，我们的H5商城用自定义应用搭建。登录控制台，点击创建应用，点击新建自定义应用


这里构建模式保持默认即可，在发布的时候可以切换到第一个图标，选择H5进行构建发布

3 创建全局变量

我们登录到商城首页的时候先要看用户是否登录，如果未登录就弹出登录界面，如果已经登录了我们就显示首页的内容。为了控制用户是否登录，我们要建一个变量来保存用户的登录状态。点击代码区全局变量，点击+号创建全局变量

点击新建自定义变量

输入变量名称isLogin，类型选择布尔值

4 实现登录功能

当用户打开首页的时候，我们根据全局变量的值来显示登录窗口，如果为false我们就弹出登录界面。

先往页面添加一个弹窗组件

选中弹窗内容，增加一个普通容器

关闭显示标题选项

保留一个选项，并且清空选项标题

然后在单选按钮下继续增加一个普通容器

里边添加四个文本组件

文本内容分别设置为我已阅读并同意、《用户服务协议》、及、《隐私政策》

第二个和第四个文本，我们设置一下颜色，字号设置为13，颜色设置为rgb(98, 169, 232)

设置普通容器的布局为横向排列

定位改为绝对定位，距上边14，距左边50

5 控制弹窗是否显示

选中弹窗组件，给默认是否打开弹窗绑定变量

绑定为我们的isLogin取反

!$w.page.dataset.state.isLogin

这样设置之后，如果未登录的状态下就需要登录

6 最终的效果

一切设置好之后，当我们打开首页的时候，就弹出了登录窗口，提示用户进行登录