加油站小程序实战教程12显示会员信息

我们上一篇介绍了会员注册的功能，会员注册后再次进入页面的时候就可以根据openid加载会员信息，本篇我们介绍一下显示会员的余额

1 布局搭建

我们现在在我的页面显示的是会员未开通的界面，当已经存在会员信息后会显示具体的信息。首先是添加一个普通容器用来显示整体的布局。

给这个容器绑定条件展示，当我们的isMember变量值为true的时候显示这个组件

$w.page.dataset.state.isMember

布局的话，我们这个是一个三行布局，在普通容器下添加一个网格布局，调整成三行一列的形式

1.1 搭建头像

第一行我们用来显示会员的头像，可以添加一个图片组件，设置高度和宽度为80px，圆角为40px

我们在会员注册的时候只是要了手机号，因此这里我们上传一个素材来进行占位，让页面美观一点。点击图片的地址属性，上传素材并选择

1.2 显示会员等级

在第二行，增加一个普通容器，里边添加一个图标和一个文本组件，设置布局为横向排列

我们的会员等级分为青铜会员、白银会员和黄金会员，因此需要上传三个图标来显示对应的等级

点击素材与资源，点击上传图片，将我们的素材进行上传


像这种根据会员等级显示不同图标的，我们可以添加三个图标，先选择不同的素材，然后通过条件展示进行控制显示

第一个图标，可以绑定条件展示，当我们的会员等级等于1的时候显示

$w.page.dataset.state.memberInfo.level=="1"

第二个绑定为2，第三个绑定为3

文本的话需要对我们的会员等级进行一次转换，转换成对应的等级名称

app.utils.formatEnum($w.page.dataset.state.memberInfo.level, `hydj_member`, app)

1.3 余额显示

余额显示布局搭建的时候，我们先可以标一下页面的结构

这种结构一般用普通容器结合布局就可以搭建出来，先添加一个普通容器，里边添加两个普通容器

外层普通容器设置布局为横向排列，两端对齐

内层的第一个普通容器我们添加两个文本组件

第一个文本组件，修改文本内容为账户余额

第二个文本组件绑定为具体的余额字段

"¥ "+($w.page.dataset.state.memberInfo.balance).toFixed(2)

第二个普通容器里添加一个按钮，修改按钮名称为充值，设置背景色为白色

最终效果

经过一系列的布局搭建以及变量绑定，我们就完成了页面的整体的搭建，具体效果如下：