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


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

1 创建数据源

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

2 创建页面

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

3 显示选中的服务信息

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

4 设置表单容器

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

5 配置地图

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

6 配置预约成功页面

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

7 从详情页到预约页

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

总结

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

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-07 02:16:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-07 02:16:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-07 02:16:03       82 阅读
  4. Python语言-面向对象

    2024-06-07 02:16:03       91 阅读

热门阅读

  1. Python3 笔记:abs() 和 fabs()

    2024-06-07 02:16:03       29 阅读
  2. Kotlin 特色 sealed 关键字

    2024-06-07 02:16:03       29 阅读
  3. Kotlin 中,扩展函数(Extension Functions)

    2024-06-07 02:16:03       30 阅读
  4. docker安装mysql8和mysql5.7

    2024-06-07 02:16:03       33 阅读
  5. 问题:对象流仅读取一个对象

    2024-06-07 02:16:03       25 阅读
  6. Puppeteer用途

    2024-06-07 02:16:03       30 阅读
  7. perl: URI::rtsp 是用来处理RTSP协议的的URI的模块。

    2024-06-07 02:16:03       27 阅读
  8. js将元素滚动到可见区域

    2024-06-07 02:16:03       31 阅读
  9. 中介子方程

    2024-06-07 02:16:03       30 阅读
  10. LE Audio音频广播新功能Auracast介绍

    2024-06-07 02:16:03       27 阅读