当前位置： 首页 > news >正文

家政预约小程序11新增预约

news 2026/5/23 15:54:29

目录

  • 1 创建数据源
  • 2 创建页面
  • 3 显示选中的服务信息
  • 4 设置表单容器
  • 5 配置地图
  • 6 配置预约成功页面
  • 7 从详情页到预约页
  • 总结

用户在浏览家政小程序的具体服务时，如果希望预约的，可以在详情页点击立即预约按钮，填写具体的信息，方便家政公司提供上门服务。在预约的时候我们需要将用户在页面上填写的信息存入数据库中，方便后续业务流程在流转时进行传递，因此我们先需要创建预约的数据源。

1 创建数据源

打开控制台，找到数据模型，点击新建
在这里插入图片描述
输入数据源的名称，标识由系统自动生成
在这里插入图片描述
然后录入我们需要的字段信息，在表格上点击添加一列
在这里插入图片描述
先添加服务时长，类型选择枚举值，点击立即创建，创建我们的枚举项
在这里插入图片描述
在这里插入图片描述
继续添加列，输入预约人联系电话
在这里插入图片描述
添加预约人姓名字段
在这里插入图片描述
添加上门时间，类型选择日期时间
在这里插入图片描述
添加上门地址，类型选择地理位置
在这里插入图片描述
添加门牌号字段
在这里插入图片描述
添加备注字段
在这里插入图片描述
再一个我们要知道是预约的哪一项服务，添加所选服务字段，类型选择关联关系
在这里插入图片描述
我们还希望知道是谁填写的，这里填写openid字段，用来记录用户的微信标识信息
在这里插入图片描述

2 创建页面

点击新建页面的图标，我们创建新增预约的页面
在这里插入图片描述
在这里插入图片描述
选中页面组件，创建一个URL参数，填写为id
在这里插入图片描述
在这里插入图片描述

3 显示选中的服务信息

在新增预约页面，我们第一部分要展示用户选中的服务信息，在代码区点击立即新建，创建一个变量，选择微搭数据表查询
在这里插入图片描述
在这里插入图片描述
选择我们的服务管理数据源，方法选择查询单条
在这里插入图片描述
查询条件设置成数据标识等于我们刚刚设置的URL参数
在这里插入图片描述
在页面组件添加一个普通容器，里边放置图片组件和普通容器，最里边的普通容器放置两个文本组件
在这里插入图片描述
外层普通容器我们设置布局为横向排列
在这里插入图片描述
设置图片的宽度和高度为96px和64px
在这里插入图片描述
布局模式选择裁剪填满
在这里插入图片描述
地址绑定从我们的变量里选择
在这里插入图片描述
第一个文本组件的文本内容绑定为我们变量里的服务名称
在这里插入图片描述
第二个文本组件绑定文本内容，选择变量里的优惠价格
在这里插入图片描述
然后设置外层容器的内边距
在这里插入图片描述
设置图片组件的外边距
在这里插入图片描述
在外层容器下添加一个分割线组件
在这里插入图片描述

4 设置表单容器

展示了所选的服务后，拖入表单容器设置我们提交的表单信息
在这里插入图片描述
数据模型选择我们的预约信息
在这里插入图片描述
调整一下我们组件的顺序
在这里插入图片描述
选中所选服务组件，设置一下选中值，设置为我们的URL参数
在这里插入图片描述
关闭是否可见配置项
在这里插入图片描述
选中openid，配置输入值，选择我们登录对象里的openId
在这里插入图片描述
同样也把是否可见的选项关闭
在这里插入图片描述

5 配置地图

在表单上我们设置了位置选择的组件，先需要配置地图信息。切换到数据源视图，切换到APIs
在这里插入图片描述
点击新建图标，选择我们的地图
在这里插入图片描述
创建时候要求输入API Key，点击旁边的链接
在这里插入图片描述
按照我图示的填写具体的信息，将得到的API KEY填写上
在这里插入图片描述
选中表单的地理位置组件，选择我们刚刚创建的API
在这里插入图片描述

6 配置预约成功页面

新建一个预约成功页面
在这里插入图片描述
添加一个普通容器，里边加一个图标和文本组件
在这里插入图片描述
回到我们的立即预约页面，选中表单容器组件，选择组件内置方法
在这里插入图片描述
在数据源提交成功后添加一个动作，选择打开页面
在这里插入图片描述
在这里插入图片描述

7 从详情页到预约页

切换到服务详情页面，点击立即预约按钮，设置点击事件，选择打开页面
在这里插入图片描述
这样整体就配置好了

总结

本篇我们介绍了预约功能的开发，介绍了表单容器的具体配置过程，在使用地图选择的时候还需要配置地图的API，低代码已经对这些外部SaaS应用做了集成，简单配置就可以使用还是比较方便的。

相关文章：

家政预约小程序11新增预约

目录 1 创建数据源2 创建页面3 显示选中的服务信息4 设置表单容器5 配置地图6 配置预约成功页面7 从详情页到预约页总结 用户在浏览家政小程序的具体服务时，如果希望预约的，可以在详情页点击立即预约按钮，填写具体的信息，方便家政…...

编程日记 2024/6/3 21:57:53

AI雷达小程序个人名片系统源码 PHP+MYSQL组合开发 带完整的安装代码包以及搭建教程

系统概述 随着移动互联网的普及和社交媒体的兴起，人们获取信息和建立联系的方式发生了翻天覆地的变化。传统的纸质名片已经无法满足现代人的需求，而小程序作为一种轻量级应用，具有无需安装、即开即用、易于分享等特点，成为了个人…...

编程日记 2024/6/3 21:56:51

Kafka生产者消息异步发送并返回发送信息api编写教程

1.引入依赖&#xff08;pox.xml文件&#xff09; <dependencies> <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka-clients</artifactId> <version>3.6.2</version> </dependency> </depende…...

编程日记 2024/6/3 21:54:49

WiFi串口服务器与工业路由器：局域网应用的协同之力

在工业物联网&#xff08;IIoT&#xff09;迅猛发展的当下&#xff0c;局域网&#xff08;LAN&#xff09;作为连接工业设备与数据中心的桥梁&#xff0c;其重要性日益凸显。WiFi串口服务器与工业路由器作为局域网中的关键组件&#xff0c;以其独特的性能和功能&#xff0c;为传…...

编程日记 2024/6/3 21:53:48

Unity功能——通过按键设置物体朝左/右旋转（含C#转xlua版）

博文简介&#xff1a; 开发场景&#xff1a;unity的3d场景&#xff1b; 功能&#xff1a;当设定的键被按下时&#xff0c;进行物体朝左/右旋转&#xff1b; 适用范围&#xff1a;本文代码适用于设置3d物体朝左右旋转&#xff0c;也适用于设置UI对象朝左右旋转&#xf…...

编程日记 2024/6/3 21:52:47

泛微ecology开发修炼之旅

我将多年泛微ecology开发经验&#xff0c;进行了总结&#xff0c;然后分享给大家。 泛微开发修炼之旅 泛微开发修炼之旅--01搭建开发环境 泛微开发修炼之旅--02开发接口demo 泛微开发修炼之旅--03常用数据表结构讲解 泛微开发修炼之旅--04常用数据库操作工具类封装 。。。。 我…...

编程日记 2024/6/3 21:49:43

PostgreSQL的视图pg_locks

PostgreSQL的视图pg_locks pg_locks 是 PostgreSQL 提供的系统视图&#xff0c;用于显示当前数据库中的锁信息。通过查询这个视图&#xff0c;数据库管理员可以监控锁的使用情况&#xff0c;识别潜在的锁争用和死锁问题&#xff0c;并优化数据库性能。 pg_locks 视图字段说明…...

编程日记 2024/6/3 21:48:42

元宇宙NFG结合IPO线上营销模型合理降税

在当今快速演进的互联网和区块链技术背景下&#xff0c;我们见证了从移动端购物到区块链热潮&#xff0c;再到如今市场竞争日趋激烈的变革。尤其是在2024年这个关键节点&#xff0c;许多平台为了吸引用户&#xff0c;推出了各种创新的商业模式。然而&#xff0c;如何在这样的环…...

编程日记 2024/6/3 21:46:40

Python打印当前目录下，所有文件名的首字母

代码如下&#xff1a; #!/usr/bin/env python3 """ 按顺序打印当前目录下&#xff0c;所有文件名的首字母&#xff08;忽略大小写&#xff09; """ import sys from pathlib import Pathdef main() -> None:ps Path(__file__).parent.glob(…...

编程日记 2024/6/3 21:45:38

程序员应该有什么职业素养？

程序员的六大职业素养&#xff1a;构建成功职业生涯的基石 在不断变化的技术世界中&#xff0c;程序员不单要保持技术的锋利&#xff0c;也需要培养相应的职业素养&#xff0c;这些素养在很大程度上决定了一个程序员的职业生涯能否走得长远。以下是我认为最为重要的六大职业素…...

编程日记 2024/6/3 21:41:35

【PostgreSQL17新特性之-冗余IS [NOT] NULL限定符的处理优化】

在执行一个带有IS NOT NULL或者NOT NULL的SQL的时候&#xff0c;通常会对表的每一行&#xff0c;都会进行检查以确保列为空/不为空&#xff0c;这是符合常理的。 但是如果本身这个列上有非空&#xff08;NOT NULL&#xff09;约束&#xff0c;再次检查就会浪费资源。甚至有时候…...

编程日记 2024/6/3 21:38:31

Flink的简单学习二

一 Flink的核心组件 1.1 client 1.将数据流程图DataFlow发送给JobManager。 1.2 JobManager 1.收集client的DataFlow图&#xff0c;将图分解成一个个的task任务&#xff0c;并返回状态更新数据给client 2.JobManager负责作业调度&#xff0c;收集TaskManager的Heartbeat和…...

编程日记 2024/6/3 21:35:27

如何提高员工的工作主动性？

在现代竞争激烈的商业环境中&#xff0c;拥有高度主动性的员工是每个组织所追求的目标。主动性不仅能够促进员工的个人成长&#xff0c;还可以提升团队的效率和创新力。因此&#xff0c;如何提高员工的工作主动性成为了企业管理者需要关注的重要问题。那么如何培养和激发员工的…...

编程日记 2024/6/3 21:34:26

FFmpeg PCM编码为AAC

使用FFmpeg库把PCM文件编码为AAC文件&#xff0c;FFmpeg版本为4.4.2-0 代码如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> #include <libavcodec/avcodec.h> #include <libavformat/avformat.h> #include <…...

编程日记 2024/6/3 21:33:25

React@16.x（16）Render Props

目录 1&#xff0c;问题描述2&#xff0c;解决方式2.1&#xff0c;Render Props2.2&#xff0c;HOC 3&#xff0c;使用场景 1&#xff0c;问题描述 当使用组件时&#xff0c;标签中的内容&#xff0c;会被当做 props.children 来渲染&#xff1a; 子组件&#xff1a; import…...

编程日记 2024/6/3 21:32:23

STM32 定时器问题

stm32通用定时器中断问题 STM32 定时器有时一开启就进中断的问题 /// STM32 TIM1高级定时器RCR重复计数器的理解 /// /// /// /// /// /// /// ///...

编程日记 2024/6/3 21:31:21

CSS学习笔记目录

CSS学习笔记之基础教程&#xff08;一&#xff09; CSS学习笔记之基础教程&#xff08;二&#xff09; CSS学习笔记之中级教程&#xff08;一&#xff09; CSS学习笔记之中级教程&#xff08;二&#xff09; CSS学习笔记之中级教程&#xff08;三&#xff09; CSS学习笔记之高级…...

编程日记 2024/6/3 21:30:19

随笔-我在武汉一周了

做梦一样&#xff0c;已经来武汉一周了&#xff0c;回顾一下这几天&#xff0c;还真是有意思。 周一坐了四个小时的高铁到了武汉站&#xff0c;照着指示牌打了个出租车。司机大姐开得很快&#xff0c;瞅了眼&#xff0c;最快速度到了110&#xff0c;差点把我晃晕。一下车就感觉…...

编程日记 2024/6/3 21:28:17

Python 爬虫零基础：探索网络数据的神秘世界

Python 爬虫零基础&#xff1a;探索网络数据的神秘世界 在数字化时代&#xff0c;网络数据如同无尽的宝藏&#xff0c;等待着我们去发掘。Python爬虫&#xff0c;作为获取这些数据的重要工具&#xff0c;正逐渐走进越来越多人的视野。对于零基础的学习者来说&#xff0c;如何入…...

编程日记 2024/6/3 21:27:16

微信小程序的view的属性值和用法

在微信小程序中&#xff0c;view 是一个基础的视图组件&#xff0c;用于承载其他视图组件或者展示文本、图片等内容。view 组件具有多种属性&#xff0c;用于控制其行为和样式。以下是一些常用的 view 属性及其用法&#xff1a; class / style: 控制视图的样式&#xff0c;可以…...

编程日记 2024/6/3 21:26:14

Vue-Tree-List：轻松构建优雅树形结构的Vue组件指南

Vue-Tree-List&#xff1a;轻松构建优雅树形结构的Vue组件指南 【免费下载链接】vue-tree-list &#x1f332;A vue component for tree structure 项目地址: https://gitcode.com/gh_mirrors/vu/vue-tree-list 你是否曾为在Vue项目中实现复杂的树形结构而感到头疼&…...

编程新知 2026/5/23 14:26:37

5分钟掌握Windows字体清晰度优化：Better ClearType Tuner终极指南

5分钟掌握Windows字体清晰度优化&#xff1a;Better ClearType Tuner终极指南 【免费下载链接】BetterClearTypeTuner A better way to configure ClearType font smoothing on Windows 10. 项目地址: https://gitcode.com/gh_mirrors/be/BetterClearTypeTuner 还在为Wi…...

编程新知 2026/5/23 13:47:59

如何用t3mujinpack为你的Darktable照片添加经典胶片质感：新手完整指南

如何用t3mujinpack为你的Darktable照片添加经典胶片质感&#xff1a;新手完整指南 【免费下载链接】t3mujinpack Collection of film emulation presets for open-source RAW developer software Darktable. 项目地址: https://gitcode.com/gh_mirrors/t3/t3mujinpack 你…...

编程新知 2026/5/23 13:37:33

100行代码实现扩散模型：PyTorch版终极入门指南

100行代码实现扩散模型&#xff1a;PyTorch版终极入门指南 【免费下载链接】Diffusion-Models-pytorch Pytorch implementation of Diffusion Models (https://arxiv.org/pdf/2006.11239.pdf) 项目地址: https://gitcode.com/gh_mirrors/di/Diffusion-Models-pytorch 你…...

编程新知 2026/5/23 12:55:46

STM32F103C8T6+TJA1042+UTA0403：一个CAN通讯新手踩过的所有坑（附完整接线图与代码）

STM32F103C8T6与TJA1042的CAN通讯实战&#xff1a;从零到通的完整避坑指南 当蓝色PCB上那颗STM32F103C8T6第一次通过CAN总线发出数据帧时&#xff0c;我的示波器上终于出现了规整的差分信号波形——这距离我首次焊接CAN收发器已经过去了整整三周。作为嵌入式开发的新手&#xf…...

编程新知 2026/5/23 12:41:26

G-Helper终极指南：告别Armoury Crate臃肿体验的3步高效方案

G-Helper终极指南&#xff1a;告别Armoury Crate臃肿体验的3步高效方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenboo…...

编程新知 2026/5/23 12:26:55

二维紧束缚模型与量子电路映射技术详解

1. 二维紧束缚模型基础理论 紧束缚模型&#xff08;Tight-Binding Model&#xff09;是描述电子在周期性晶体场中运动行为的核心理论框架。这个模型的基本物理图像是&#xff1a;电子大部分时间被束缚在原子核附近&#xff0c;只有少量时间会隧穿到相邻原子轨道。在二维系统中&…...

编程新知 2026/5/23 12:07:14

ARMv8调试状态下LDR指令未定义问题解析

1. 问题背景与现象分析在ARMv8-A架构的调试过程中&#xff0c;开发者经常会遇到一个令人困惑的现象&#xff1a;当外部调试器暂停核心执行后&#xff0c;向EDITR寄存器注入LDR X1, [X0]指令&#xff08;机器码0xf9400001&#xff09;时&#xff0c;Tarmac日志显示该指令被标记为…...

编程新知 2026/5/23 11:38:48

在fnOS飞牛NAS上部署宝塔+NocoBase低（零）代码平台的方法

在fnOS飞牛NAS上部署宝塔NocoBase低&#xff08;零&#xff09;代码平台的方法 温馨提醒&#xff1a;本文全文免费&#xff0c;严禁盗用、二次收费行为&#xff01; 更新日志&#xff1a; 2026/03/29 首次发布 2026/05/22 1、新增通过systemd托管进程&#xff0c;实现重启后自…...

编程新知 2026/5/23 9:48:37

大牛直播SDK（SmartMediaKit）Windows平台多路RTSP转RTMP推流集成说明

文档概述 在安防监控、智慧园区、应急指挥、工业视觉、低空经济、无人机回传和多路摄像头上云等场景中&#xff0c;现场设备通常以 RTSP 方式输出视频流&#xff0c;而云端平台、直播分发平台或业务中台往往更倾向于接收 RTMP 流。此时&#xff0c;系统需要在边缘侧或 Windows…...

编程新知 2026/5/23 9:44:34