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

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

news 2025/11/3 2:36:38

目录

  • 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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/10/31 17:58:58

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/10/16 23:00:32

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/11/2 0:24:50

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/10/29 12:53:31

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/11/2 22:10:34

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/11/2 15:13:29

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/11/1 4:42:14

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07