目录
- [1 布局搭建](#1 布局搭建)
-
- [1.1 搭建头像](#1.1 搭建头像)
- [1.2 显示会员等级](#1.2 显示会员等级)
- [1.3 余额显示](#1.3 余额显示)
- 最终效果
我们上一篇介绍了会员注册的功能，会员注册后再次进入页面的时候就可以根据openid加载会员信息，本篇我们介绍一下显示会员的余额
1 布局搭建
我们现在在我的页面显示的是会员未开通的界面，当已经存在会员信息后会显示具体的信息。首先是添加一个普通容器用来显示整体的布局。
给这个容器绑定条件展示，当我们的isMember变量值为true的时候显示这个组件
bash
$w.page.dataset.state.isMember布局的话，我们这个是一个三行布局，在普通容器下添加一个网格布局，调整成三行一列的形式
1.1 搭建头像
第一行我们用来显示会员的头像，可以添加一个图片组件，设置高度和宽度为80px，圆角为40px
我们在会员注册的时候只是要了手机号，因此这里我们上传一个素材来进行占位，让页面美观一点。点击图片的地址属性，上传素材并选择
1.2 显示会员等级
在第二行，增加一个普通容器，里边添加一个图标和一个文本组件，设置布局为横向排列
我们的会员等级分为青铜会员、白银会员和黄金会员，因此需要上传三个图标来显示对应的等级
点击素材与资源，点击上传图片，将我们的素材进行上传
像这种根据会员等级显示不同图标的，我们可以添加三个图标，先选择不同的素材，然后通过条件展示进行控制显示
第一个图标，可以绑定条件展示，当我们的会员等级等于1的时候显示
bash
$w.page.dataset.state.memberInfo.level=="1"第二个绑定为2，第三个绑定为3
文本的话需要对我们的会员等级进行一次转换，转换成对应的等级名称
bash
app.utils.formatEnum($w.page.dataset.state.memberInfo.level, `hydj_member`, app)1.3 余额显示
余额显示布局搭建的时候，我们先可以标一下页面的结构
这种结构一般用普通容器结合布局就可以搭建出来，先添加一个普通容器，里边添加两个普通容器
外层普通容器设置布局为横向排列，两端对齐
内层的第一个普通容器我们添加两个文本组件
第一个文本组件，修改文本内容为账户余额
第二个文本组件绑定为具体的余额字段
bash
"¥ "+($w.page.dataset.state.memberInfo.balance).toFixed(2)第二个普通容器里添加一个按钮，修改按钮名称为充值，设置背景色为白色
最终效果
经过一系列的布局搭建以及变量绑定，我们就完成了页面的整体的搭建，具体效果如下：
