目录
- 1 创建会员表
- 1.1 会员表
- 1.2 充值记录表
- 2 搭建页面布局
- 3 搭建未登录时界面
- 4 页面最终效果
我们现在已经实现了用户的登录和注册功能，加油站小程序在自主加油的时候需要用户先开通会员并完成充值的动作，本篇我们介绍一下会员相关的功能。
1 创建会员表
在用户表的基础上我们再增加一张会员表用来管理会员的余额和积分，同时增加一张充值记录表用来记录充值订单的信息。
1.1 会员表
members 会员表
| 字段名 | 类型 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|
| _id | 文本 | 否 | 自增 | 数据标识 |
| user_id | 关联关系 | 否 | - | 关联用户ID |
| level | 枚举 | 否 | ‘普通会员’ | 会员等级：1、普通会员/2、黄金会员/3、钻石会员 |
| balance | 数字 | 否 | 0.00 | 账户余额 |
| points | 数字 | 否 | 0 | 积分 |
| status | 枚举 | 否 | 1 | 状态：1-正常，0-禁用 |
1.2 充值记录表
recharge_records 充值记录表
| 字段名 | 类型 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|
| _id | 文本 | 否 | 自增 | 数据标识 |
| user_id | 关联关系 | 否 | - | 关联用户ID |
| amount | 数字 | 否 | - | 充值金额 |
| bonus | 数字 | 否 | 0.00 | 赠送金额 |
| payment_method | 枚举 | 否 | - | 支付方式：1、微信/2、支付宝 |
| status | 状态 | 否 | 0 | 状态：1-待支付，2-支付成功，3-支付失败 |
| transaction_id | 文本 | 是 | NULL | 支付平台交易号 |
| remark | 文本 | 是 | NULL | 备注信息 |
2 搭建页面布局
表有了之后我们需要搭建页面布局。现在我们只有一个首页，需要增加一个我的页面用来展现会员信息。
打开小程序，创建一个我的页面
切换到页面布局，选择tab栏导航布局
选中tab栏，点击魔术棒图标，根据页面生成菜单
修改一下菜单的图标
回到页面设计，选择首页，设置一下布局，选择tab栏导航布局
切换到我的页面，设置布局为tab栏导航布局
3 搭建未登录时界面
当用户未注册为会员时，打开界面我们需要显示未开通会员的视图
先删除页面默认生成的网格布局
在内容插槽下边添加一个普通容器，作为我们页面整体的背景，设置如下样式
max-width: 100%;min-height: 100vh;display: flex;flex-direction: column;background-color: #fff;
我们设置了背景容器宽度占满，高度设置最新高度占满窗口，布局设置为流式布局，纵向排列，背景色设置为白色
继续添加一个普通容器，用来显示会员信息整体的背景色，设置如下样式
background: linear-gradient(135deg, #1890ff, #096dd9);color: white;padding: 24px 16px;border-radius: 0 0 24px 24px;
我们设置背景色为渐变色，文字的颜色为白色，设置底部一定的圆角
继续添加普通容器，用来显示会员信息，输入如下样式
display: flex;align-items: center;gap: 16px;margin-bottom: 20px;
设置流式布局里的元素居中对齐，元素之间的间隔为16px，给底部一定的外边距
继续添加普通容器，用来显示未注册用户信息，输入如下样式
text-align: center;padding: 40px 20px;
设置文本对齐为居中对齐，一定的内边距
继续添加普通容器，用来作为图标的背景色，输入如下样式
width: 80px;height: 80px;border-radius: 40px;background-color: rgba(255, 255, 255, 0.2);display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;
主要是给图标设置一个圆形的背景
里边添加一个图标，设置为user-add
继续添加文本，设置文本内容为您还未添加会员，设置如下样式
font-size: 18px;margin-bottom: 12px;font-weight: bolder;
这里主要设置的是字体大小和加粗的效果
继续添加文本，设置文本内容为开通会员可享受更多优惠和专属服务，输入如下样式
font-size: 14px;opacity: 0.8;margin-bottom: 24px;
通过设置一定的不透明度，让文字有一点灰色的感觉
继续添加按钮，修改为立即开通，输入如下样式
background-color: #fff;color: #1890ff;padding: 12px 32px;border-radius: 24px;border: none;font-weight: bold;font-size: 16px;cursor: pointer;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
4 页面最终效果
当用户未注册时候，我们显示了立即开通按钮，提供用户开通会员的界面
