上一篇我们介绍了登录页的配置，用户勾选隐私协议，点击登录就可以跳转到小程序的首页。在首页的顶部我们展示医院的信息，点击后可以查看相关的院区。本篇我们介绍一下具体的开发过程。

1 创建数据模型

为了展示医院及院区的基本信息，我们设计两张表一张是医院基本信息表，一张是院区信息表

医院基础信息表（t_hospital_info）

字段名	类型	必填	说明
id	varchar(32)	YES	主键ID
name	varchar(100)	YES	医院名称 (如: 某大型医院)
alias	varchar(32)	NO	简称 (如: 某医)
level	varchar(20)	NO	医院等级 (如: 三级甲等)
nature	varchar(50)	NO	经营性质 (如: 综合医院)
logo_url	varchar(255)	NO	医院Logo图标
cover_img_url	varchar(255)	NO	顶部封面大图地址
introduction	text	NO	医院简介 (底部长文本)
medical_insurance	tinyint	NO	是否医保定点 (1:是 0:否)
status	tinyint	YES	状态 (1:启用 0:停用)
create_time	datetime	YES	创建时间
update_time	datetime	YES	更新时间

院区基本信息表（t_hospital_campus）

字段名	类型	长度	必填	默认值	说明
id	INT	11	Y	-	主键ID
name	VARCHAR	64	Y	-	院区名称 (如: 本部)
address	VARCHAR	255	Y	-	地址
longitude	DECIMAL	10,6	N	-	经度
latitude	DECIMAL	10,6	N	-	纬度
phone	VARCHAR	20	N	-	咨询电话
traffic_guide	TEXT	-	N	-	交通指引 (富文本)

打开MySQL，创建相关的数据模型

2 搭建后台功能

表创建好之后就可以搭建后台功能了，点击创建页面，先创建医院基本信息管理页面


添加布局组件

添加数据表格组件，数据模型选择基本信息，勾选所有场景

切换到布局管理，添加平级菜单，选择基本信息页面

按照同样的方式添加院区管理功能，录入相关数据

3 搭建小程序功能

3.1 创建页面

点击创建页面的图标，创建医院门户页面

切换到页面布局，选择tab栏导航布局，设置底部的菜单

将菜单配置为首页、消息和我的

选中页面组件，布局选择tab栏导航布局

3.2 创建变量

为了展示医院的基本信息，我们需要创建一个内置数据表查询，读取医院的基本信息

3.3 搭建页面布局

在第一列里添加一个普通容器，里边放置两个普通容器

设置样式

:root {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

内层的第一个普通容器里添加一个文本组件和一个图标组件，设置普通容器的布局为横向排列，左对齐，垂直居中

文本内容绑定为我们的医院名称字段

设置文本的样式

:root {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #000;
}

内层的第二个普通容器里添加循环展示组件，设置布局为横向排列

循环展示组件绑定为医院的标签

文本组件绑定为循环项

文本的样式

:root {
  color: rgb(107, 114, 128);
  background: rgb(243, 244, 246);
  border-radius: 8px 8px;
  margin: 0px 10px 0px 0px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 16px;
}

3.4 配置页面跳转

医院信息展示功能搭建好之后，我们需要从登录页跳转过来。在点击登录的时候需要校验一下用户协议是否勾选，我们切换到登录页，创建一个自定义方法

export default function ({ event, data }) {
  if ($w.page.dataset.state.select) {
    $w.utils.navigateTo({
      pageId: 'u_yi_yuan_men_hu', // 页面 Id
      params: { key: 'value' }
    });
  }else{
    $w.utils.showToast({
      title:"请勾选用户协议",
      icon:"error",
      duration:1000
    })
  }
}

然后给按钮配置点击事件，调用我们的方法

最终效果

先在后台维护好医院的基本信息

打开登录页，勾选协议

点击登录，跳转到门户页面

总结

本篇我们介绍了医院基本信息的搭建过程，包括数据模型的创建，后台功能的开发和前端小程序的展示。现在又开始炒作AI coding，说什么有了AI coding 低代码已经黄了。还有炒作说后续软件都不需要了，只留一个输入框就完事儿了，是的，按他们说软件0成本的时代已经来了，学习已经不重要了，完全委托给AI就完事了。