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

2024-06-03 21:20
文章标签 预约 家政 程序 新增

本文主要是介绍家政预约小程序11新增预约，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 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新增预约的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1028146。

相关文章

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
Java面试八股之怎么通过Java程序判断JVM是32位还是64位

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法： public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM
阅读更多...
springboot家政服务管理平台 LW +PPT+源码+讲解

springboot家政服务管理平台 LW +PPT+源码+讲解

3系统的可行性研究及需求分析 3.1可行性研究 3.1.1技术可行性分析 经过大学四年的学习，已经掌握了JAVA、Mysql数据库等方面的编程技巧和方法，对于这些技术该有的软硬件配置也是齐全的，能够满足开发的需要。 本家政服务管理平台采用的是Mysql作为数据库，可以绝对地保证用户数据的安全；可以与Mysql数据库进行无缝连接。 所以，家政服务管理平台在技术上是可以实施的。 3.1
阅读更多...
一道经典Python程序样例带你飞速掌握Python的字典和列表

一道经典Python程序样例带你飞速掌握Python的字典和列表

Python中的列表（list）和字典（dict）是两种常用的数据结构，它们在数据组织和存储方面有很大的不同。 列表（List） 列表是Python中的一种有序集合，可以随时添加和删除其中的元素。列表中的元素可以是任何数据类型，包括数字、字符串、其他列表等。列表使用方括号[]表示，元素之间用逗号,分隔。 定义和使用 # 定义一个列表 fruits = ['apple', 'banana
阅读更多...
美容美发店营销版微信小程序源码

美容美发店营销版微信小程序源码

打造线上生意新篇章 一、引言：微信小程序，开启美容美发行业新纪元 在数字化时代，微信小程序以其便捷、高效的特点，成为了美容美发行业营销的新宠。本文将带您深入了解美容美发营销微信小程序，探讨其独特优势及如何助力商家实现业务增长。 二、微信小程序：美容美发行业的得力助手 拓宽客源渠道：微信小程序基于微信社交平台，轻松实现线上线下融合，帮助商家快速吸引潜在客户，拓宽客源渠道。 提升用户体验：
阅读更多...
程序人生--拔丝地瓜

程序人生--拔丝地瓜

一个会享受生活的人，难免会执迷于探索“三餐茶饭，四季衣裳”的朴素涵义。如今在这繁杂喧闹、竞争激烈的社会环境里，如何才能从周而复始的生活中挖掘出一点儿期待！这是一个仁者见仁智者见智的开放性话题。对于大部分的人来说，看电影、运动、旅游、美食、加班....是假日的备选安排。 春节临走之前，再次尝试“拔丝地瓜”，为何要强调“再次”二字？因为这道甜菜我已经尝试过很多次，失败与成功都经历过。十几年的烧饭经历
阅读更多...
vscode python pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

vscode python pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

在vscode中控制台运行python文件出现：无法将"pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 使用vscode开发python，需要安装python开发扩展： 本文已经安装，我们需要找的是python安装所在目录，本文实际路径如下： 如果在本文路径中没有此目录，请尝试在C盘中搜索 python，搜索到相关python目录后，点击Python 3.9进入目录，
阅读更多...
2_为MFC程序添加菜单

2_为MFC程序添加菜单

在MFC中添加菜单栏 1，双击资源文件，显示资源视图，点击Menu插入Menu菜单，编辑菜单的ID，自己取名字。 2，点击“请在此处键入”添加菜单选项，输入&E，E的下面就会产生下划线；在产生的弹出菜单中继续编辑，并且可以添加事件处理函数； 在弹出菜单的任意位置，鼠标右键，弹出的菜单中选择“插入分隔符”，即可产生分隔符 3，在你设计的Dialog窗口的属性栏，选择Menu后面的
阅读更多...
一二三应用开发平台应用开发示例（4）——视图类型介绍以及新增、修改、查看视图配置

一二三应用开发平台应用开发示例（4）——视图类型介绍以及新增、修改、查看视图配置

调整上级属性类型 前面为了快速展示平台的低代码配置功能，将实体文件夹的数据模型上级属性的数据类型暂时配置为文本类型，现在我们调整下，将其数据类型调整为实体，如下图所示： 数据类型需要选择实体，并在实体选择框中选择自身“文件夹” 这时候，再点击生成代码，平台会报错，提示“实体【文件夹】未设置主参照视图”。这是因为文件夹选择的功能页面，同样是基于配置产生的，因为视图我们还没有配置，所以会报错。
阅读更多...
在Ubuntu 14.04上安装和配置SNMP守护程序和客户端的方法

在Ubuntu 14.04上安装和配置SNMP守护程序和客户端的方法

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。 介绍 作为系统管理员的重要工作之一是收集关于服务器和基础设施的准确信息。有许多工具和选项可用于收集和处理这种类型的信息。其中许多工具都是建立在一种叫做 SNMP 的技术之上。 SNMP 代表简单网络管理协议。它是服务器可以共享关于其当前状态的信息的一种方式，也是管理员可以修改预定义值的通道。虽
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2