家政服务小程序实战教程14-立即预约功能开发

news2024/10/2 8:38:36

上一篇我们开发了客服功能,本篇我们开始开发预约功能。

1 创建数据源

功能开发之前先需要考虑数据源的规划问题,顾客预约某项服务时,需要告知上门时间、联系地址、联系电话,如果需要注明的事项,还需要标明备注。

先创建数据模型,输入名称

在这里插入图片描述
点击编辑按钮添加字段

在这里插入图片描述
首先添加上门时间,我们选择日期时间类型

在这里插入图片描述
输入详细地址,字段类型选择文本

在这里插入图片描述
添加联系电话,字段类型选择电话
在这里插入图片描述
剩下就是考虑当前数据源和别的数据源的关系,我们是在服务下边预约,因此需要关联服务内容数据源,添加一个字段,字段类型选择关联关系,关联到服务内容

在这里插入图片描述
还有就是需要和用户信息进行关联

在这里插入图片描述
为了快速查到本人的数据,我们再增加一个openid的字段

在这里插入图片描述
最后考虑一个状态,我们就几个状态,如果客户下单状态为待处理,如果商家已经处理并分配了人员状态为待服务,如果服务完毕状态为待评价,最终用户评价完毕为已完成。

状态的这些值我们是存储在枚举值里,创建一个状态字段,字段类型选择枚举值

在这里插入图片描述
点击立即创建,创建我们的枚举值

在这里插入图片描述

2 创建页面

打开应用编辑器,点击创建页面的按钮,创建预约页面

在这里插入图片描述

3 页面开发

先往页面中添加一个分组容器,标题改为服务内容
在这里插入图片描述
选中内容插槽,添加网格布局,修改列数量为2

在这里插入图片描述
选中第一列,将列宽度改为手动调节,修改为4
在这里插入图片描述
增加图片组件
在这里插入图片描述
设置图片的宽和高以及外边距
在这里插入图片描述
第二列增加两个文本组件,布局改为纵向排列,平分

在这里插入图片描述
我们这三项内容要从上一个页面传递过来,因此需要创建URL参数

在这里插入图片描述

然后将参数绑定到对应的组件上

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

'¥'+($page.dataset.params.serviceprice || 0)

再添加一个分组容器,标题改为预约信息
在这里插入图片描述
在内容插槽里添加表单容器,数据源选择服务预约
在这里插入图片描述
openid从系统变量里绑定
在这里插入图片描述
绑定好之后将该字段隐藏
在这里插入图片描述
服务内容绑定为我们的URL参数serviceid
在这里插入图片描述
状态我们设置选中值为1,然后隐藏该字段
在这里插入图片描述
用户信息这块涉及到如何从数据源获取,我们下一篇单独介绍一下,现在先空着

4 页面跳转及传参

新增页面开发好之后,我们需要从服务详情页跳转到预约新增页面,给按钮增加点击事件,选择平台的打开页面方法,并且设置跳转的参数

在这里插入图片描述

5 最终的效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/352601.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue 双向绑定原理

Vue2 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来 劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 几个要点: 1&#…

分享82个HTML电脑主机模板,总有一款适合您

分享82个HTML电脑主机模板,总有一款适合您 82个HTML电脑主机模板下载链接:https://pan.baidu.com/s/13DGOCgvbxSksMPwJzi2z0g?pwdl0mi 提取码:l0mi Python采集代码下载链接:采集代码.zip - 蓝奏云 云虚拟主机运营商网站模板…

C语言返回类型为指针的一些经典题目(下)

续上一篇文章,上一篇文章题目都很经典,这一篇也不例外。一.返回类型为指针经典题目(下)1.代码(第六题)char *GetMemory3(int num) {char *p (char *)malloc(sizeof(char) * num);return p; } void Test3(void) {char *str NULL;str GetMemory3(100…

应用部署初探:6个保障安全的最佳实践

在之前的文章中,我们了解了应用部署的阶段以及常见的部署模式,包括微服务架构的应用应该如何部署等基本内容。本篇文章将介绍如何安全地部署应用程序。 安全是软件开发生命周期(SDLC)中的关键部分,同时也需要成为 S…

Java反序列化——CommonsCollections中基础知识

一、CC链总结图二、常见类1、Map类 --> TransformedMapMap类是存储键值对的数据结构。 Apache Commons Collections中实现了TransformedMap ,该类可以在一个元素被添加/删除/或是被修改时(即key或value:集合中的数据存储形式即是一个索引对应一个值&a…

2022年Q4业绩超预期,被严重低估的Roku迎来反弹

在资本市场上,Roku应该是流媒体领域最具戏剧性的公司。它曾经被突发的疫情推向股价顶峰,但很快又随着疫情结束跌入谷底。 2022年对于Roku来说,仍然是继续探底的一年。随着股价跌回疫情发生前的水平,争论也开始越来越激烈&#xf…

spring-web HandlerMethodArgumentResolver 源码分析

HandlerMethodArgumentResolver 的使用处,解析参数 org.springframework.web.method.support.InvocableHandlerMethod#getMethodArgumentValues HandlerMethodArgumentResolver 在解析参数时使用,以下是使用处 InvocableHandlerMethod#getMethodArgume…

面试题----集合

概述 从上图可以看出,在Java 中除了以 Map 结尾的类之外, 其他类都实现了 Collection 接⼝。 并且,以 Map 结尾的类都实现了 Map 接⼝List,Set,Map List (对付顺序的好帮⼿): 存储的元素是有序的、可重复的。 Set (注重独⼀⽆⼆…

2.Telegraf简介

Telegraf简介 Telegraf是Influx公司一款基于插件化的开源指标收集工具.主要结合时序性数据库进行使用,用于性能监控.通常Telegraf会每间隔一段时间抓取一批指标数据并将数据发送给时序性数据库或其他自定义的Output. 官方文档 https://docs.influxdata.com/telegraf/v1.24 与…

分享7个比B站更刺激的老司机网站,别轻易点开

俗话说摸鱼一时爽,一直摸一直爽,作为一个程序员老司机了,一头乌黑浓密的头发还时不时被同事调侃,就靠这10个网站让我健康生活,不建议经常性使用,因为还有一句俗话,那就是“摸鱼一时爽&#xff0…

22- 隐马尔科夫HMM (NLP自然语言算法) (算法)

HMM模型 : from hmmlearn.hmm import GaussianHMM model GaussianHMM(n_components3,n_iter100000, covariance_type diag) model.fit(X) 1、马尔科夫链 有向图模型(贝叶斯网络):用有向图表示变量间的依赖关系; 无向图模型&…

【GlobalMapper精品教程】051:融合Dissolve操作详解

本节讲解globalmapper中融合Dissolve工具的使用。 文章目录 一、工具介绍1. 工具位置2. 融合工具二、案例实战1. 加载实验数据2. 根据字段分组融合案例一:根据地类名称分组,将相同的类型融合到一起。案例二:根据权属地类名称分组,将相同的类型融合到一起。一、工具介绍 1.…

UE4 手把手教你做插件(1) 从代码引用插件

0,前言 我看的是 技术宅阿棍儿 的视频,B站有。 系列视频:从代码引用插件_哔哩哔哩_bilibili 看不懂,只能边查资料边看,讲的顺序有点乱 1,根据视频提示创建第三方插件 注意:如果只有空白插件的情…

如何从手工测试进阶自动化测试?阿里10年测开经验分享...

随着行业的竞争加剧,互联网产品迭代速度越来越快,QA 与测试工程师都需要在越来越短的测试周期内充分保证质量。可是,App 测试面临着很多挑战,比如多端发布、多版本发布、多机型发布等等,导致了手工测试很难完全胜任。因…

使用yolov5和强化学习训练一个AI智能欢乐斗地主(一)

这里写自定义目录标题项目介绍项目过程介绍训练yolov5目标检测斗地主收集数据集yolov5调参项目介绍 你好! 欢迎阅读我的文章,本章将介绍,如何使用yolov5和强化学习训练一个AI斗地主,本项目将分为三个部分,其中包含&am…

一篇搞懂Mock测试

1. 什么是Mock测试 mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象/数据/场景,用一个虚拟的对象来创建以便测试的测试方法。 2. Mock测试常见场景 无法控制第三方系统接口的返回,返回的数据不满足要求依赖的接口还未开…

DEM数据下载——以地理空间数据云为例

数字高程模型(Digital Elevation Model)是进行地形分析的重要基础,诸如坡度、坡向及水文分析等都在此基础上进行。今天,我们一起来聊一聊一种DEM数据常见下载方式。按照惯例,先将网址列出:https://www.gscloud.cn/home…

2023年美赛 MCM B题 重新构想马赛马拉岛

背景肯尼亚的野生动物保护区最初主要是为了保护野生动物和其他自然资源。肯尼亚议会于2013 年通过了《野生动物保护和管理法》,以提供更公平的资源共享,并允许进行替代的、以社 区为基础的管理工作[1].此后,肯尼亚增加了修正案,以…

有特别有创意的网站设计案例

有人说 UI 设计师集艺术性与科学性于一身,不仅需要对工具的使用熟练,更需要对美术艺术有一定的基础了解。如果想要成为优秀的 UI 设计师是一个需要磨砺的过程,需要不断的学习和积累,多看多练多感受,其中对于优质的设计…

力扣53.最大子数组和

文章目录力扣53.最大子数组和题目描述贪心动态规划力扣53.最大子数组和 题目描述 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组 是数组中的一个连续部分。 示例…