目前我們的首頁已經開發完畢了，包含輪播圖、機構介紹、校區展示、作品與活動展示功能。家長在小程序了解了機構的基本情況之后，下一步就是參加試聽，在線下真實體驗一下校區的環境、師資情況、教學質量。

我們在首頁提供了一個預約的快捷入口，家長可以在線的填寫預約的相關信息

本篇我們介紹一下具體的開發過程

1 創建數據模型

家長如果希望在小程序填寫信息，機構還想留存這些信息方便日后做溝通的，在低代碼中需要通過創建數據模型來保存數據。

點擊MySQL數據庫，點擊+號創建數據模型

輸入模型的名稱和標識

點擊添加字段，先添加學員姓名，類型選擇文本

繼續添加字段，添加學員年齡，類型選擇枚舉，按照年齡段錄入枚舉值


繼續添加字段，添加聯系電話，類型選擇電話

繼續添加字段，添加意向課程，類型選擇枚舉，錄入具體的課程

繼續添加字段，添加備注說明，類型選擇文本

繼續添加字段，添加預約上課日期，類型選擇日期時間

繼續添加字段，添加狀態，類型選擇枚舉，枚舉值設置為待確認、已確認、已完成、已取消


繼續添加字段，添加確認時間，類型選擇日期時間

2 搭建預約按鈕

數據表搭建好之后，我們就可以在小程序里搭建預約功能。打開我們的小程序應用

在首頁的頁面組件下邊添加一個普通容器，里邊添加一個文本組件

設置普通容器的樣式

:root {position: fixed;bottom: 80px;right: var(--spacing-lg);z-index: 999;
}

設置文本組件的樣式

:root {width: 60px;height: 60px;background: var(--primary-color);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;font-size: 12px;box-shadow: var(--shadow-lg);cursor: pointer;transition: all 0.3s ease;animation: float 3s ease-in-out infinite;padding: 0px 15px;font-weight: bolder;
}

3 搭建表單

點擊按鈕的時候，我們需要打開彈窗，在頁面組件中添加彈窗組件

里邊添加表單容器，數據模型選擇在線預約

設置預約狀態的選中值為1

切換到樣式，隱藏該組局

將確認時間組件也隱藏

設置表單容器提交成功后的方法，添加關閉彈窗

關閉彈窗默認打開狀態

設置預約文本組件，添加點擊事件，打開彈窗

4 搭建管理功能

家長提交了預約信息后，機構需要在后臺里進行查看，管理預約信息。打開我們的后臺應用

點擊創建頁面的圖標，我們來創建管理頁面

選擇表格與表單頁，數據模型選擇在線預約，布局選擇左側導航布局

切換到布局設計，選擇布局導航，添加平級菜單

將預約列表頁面添加到菜單里

整體效果

用戶打開小程序首頁，可以看到在線預約的按鈕

點擊預約時打開彈窗

錄入相關信息，點擊提交就可以在后臺看到家長提交的預約信息

總結

本篇我們介紹了首頁最后一個功能，在線預約。像這類功能通常比較簡單，只需要搭建好表單容器就可以實現，再搭建一個后臺功能就比較完善了。第一章我們用了14篇篇幅完整介紹了小程序首頁的搭建過程，下一個篇章我們介紹一下商城功能，敬請期待。