加油站小程序实战教程14会员充值页面搭建

上一篇我们介绍了充值规则的后台功能，有了基础的规则，在会员充值页面就可以显示具体的充值规则。本篇我们介绍一下会员充值的开发过程。

1 原型

充值页面我们是分为三个部分，第一部分显示可选的充值金额和优惠金额。第二部分可以输入任意金额，第三部分可以选择支付方式。

2 搭建充值金额选择功能

打开我们的小程序，先创建充值页面


添加一个普通容器，设置宽为100%，高为100vh

创建变量，选择内置数据表查询

选择充值规则表，方法选择查询多条，按照最低充值金额升序排序

在普通容器下添加网格布局，修改为一行一列

设置列的宽度为手动调节，设置为4

添加循环展示组件，将列组件移动至循环展示里

给循环展示绑定为我们创建的变量的records字段

在列里添加普通容器，下边添加两个文本组件

给文本绑定具体的字段


设置普通容器的布局为纵向排列，水平垂直居中

设置一定的边框和圆角

3 搭建金额输入

再添加一个普通容器，里边添加文本和单行输入组件

给普通容器设置一定的内边距

关闭单行输入的显示标题属性

里边再添加一个普通容器，放入文本组件，将单行输入移入

修改普通容器的布局，改为横向排列

将单行输入的样式覆盖一下，去掉底部的边框

:root {}
/* 编辑态-输入框样式 */
:scope .wd-form-item-wrap {border:none
}

4 搭建支付方式

继续添加普通容器，里边添加文本和单选组件

同样需要覆盖一下单选组件的样式

5 充值按钮

继续添加普通容器里边添加按钮，将按钮的宽度设置为80%

最终的效果

经过一系列的设置就有了一个不错的效果

下一篇我们就给页面添加具体的交互，并且可以将数据写入到表里