家政预约小程序13我的订单

目录

  • 1 我的订单页面布局
  • 2 全部订单页面
  • 3 完善订单状态
  • 4 查询订单信息
  • 总结

现在我们已经完成了家政预约小程序主体功能的开发,包含服务的查看,在线预约已经登录等功能。预约之后就需要家政公司的客服进行派单,由服务人员进行上门服务。在小程序中客户可以查看自己的订单信息,方便进行操作和评价。

1 我的订单页面布局

打开应用编辑器,切换到我的页面,选中页面组件,设置背景色为灰色
在这里插入图片描述
设置10px的外边距
在这里插入图片描述
设置背景色为白色,设置一定的圆角
在这里插入图片描述
里边放置一个普通容器,继续放置两个文本组件,设置布局为横向排列,两端对齐
在这里插入图片描述
然后搭建服务状态的展示效果,分为待支付、待服务、待验收和待评价
在这里插入图片描述
我们还是使用普通容器作为基础布局,里边用图标和文本组件让我们的状态的辨识度更高一点

2 全部订单页面

点击新建页面图标,创建一个全部订单页面
在这里插入图片描述
在这里插入图片描述
在页面中先放入顶部选项卡
在这里插入图片描述
修改标签为待支付、待服务、待验收、待评价
在这里插入图片描述
从我的页面,点击一个状态,跳到全部订单页面,这个时候状态需要被选中。我们给这个页面定义一个URL参数用来接收我的页面选中的值
在这里插入图片描述
在这里插入图片描述
然后设置选中标签为fx绑定,选择我们的URL参数
在这里插入图片描述
在这里插入图片描述
回到我的页面,给不同的状态设置不同的传参
在这里插入图片描述

3 完善订单状态

打开我们的预约信息表,添加一列订单状态,创建枚举值,分别输入待支付、待服务、待验收、待评价四个状态
在这里插入图片描述
在这里插入图片描述

4 查询订单信息

回到全部订单页面,添加数据列表组件,选择我们的预约信息
在这里插入图片描述
第一个文本绑定为服务的名称
在这里插入图片描述
第二个文本绑定为创建的时间
在这里插入图片描述
图标组件我们替换成文本组件,绑定为订单的状态
在这里插入图片描述
修改一下文本组件的父容器,设置宽度为80
在这里插入图片描述
设置一下数据列表的筛选条件,订单状态等于我们的顶部选项卡的选中值
在这里插入图片描述
继续添加条件,openid等于我们的登录用户的openId
在这里插入图片描述
设置这个条件是只允许他查询自己的数据

总结

本篇我们介绍了我的订单功能的开发,涉及到页面传参以及数据过滤的相关设置。通过设置合理的状态信息,我们就可以按照业务的需求在各个业务环节进行区分,后续我们介绍在管理端如何进行订单确认以及派单的功能。

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

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

相关文章

Hotcoin精彩亮相Consensus 2024 Austin,探索行业风向标

5 月 31 日,由CoinDesk主办的“Consensus 2024”大会在德克萨斯州的奥斯汀市正式落下帷幕。作为全球规模最大、最具影响力的加密货币、区块链、Web3盛会,本次Consensus 2024 Austin吸引来自 100 多个国家/地区的 15,000 多名与会者、6,800 家公司、850 多…

【C++】手动模拟String底层与深浅拷贝

在string类:版本、组件、构造、操作及应用和 C中string的一些超常用函数 (附习题)这两篇文章中我们已经了解到了string,现在让我们再来手动实现模拟一下吧~ 模拟实现string是为了更好的理解string函数的使用和深浅拷贝方面的知识~ 总体整理了两张思维导…

【Python编程】【Jupyter Notebook】启动时报错:no available port could be found

一、报错描述 在Jupyter Notebook中编写程序,无法运行,提示由于没有可供监听的端口,无法启动Jupyter服务器,如下图所示: 二、原因分析 通过报错信息,猜测大概是由于网络环境的原因。首先,关闭…

C语言(结构体)

Hi~!这里是奋斗的小羊,很荣幸各位能阅读我的文章,诚请评论指点,欢迎欢迎~~ 💥个人主页:小羊在奋斗 💥所属专栏:C语言 本系列文章为个人学习笔记,在这里撰写成文一…

AIGC实战!7个超热门的 Midjourney 关键词教程

一、剪纸风格 核心词: paper art(剪纸艺术) 关键技巧: 主体物:可以换成任意主角,Chinese illustration (中国风插画);艺术风格:paper art (剪纸…

ruoyi vue 集成积木报表真实记录

按官方文档集成即可 积木报表官方集成文档 集成问题 1.注意 idea 配置的 maven 需要设置成 本地配置&#xff0c;不可以使用 idea 自带的 maven,自带 maven 会导致私有源调用不到 后端代码 新建 base 模块 maven配置 <project xmlns"http://maven.apache.org/POM/…

微软云计算[3]之Windows Azure AppFabric

Windows Azure AppFabric AppFabric概述AppFabric关键技术服务总线访问控制高速缓存 AppFabric概述 AppFabric为本地应用和云中应用提供了分布式的基础架构服务 用户本地应用与云应用之间进行安全联接和信息传递 云应用和现有应用或服务之间的连接及跨语言、跨平台、跨不同标…

C++数据结构之:哈希表Hash

摘要&#xff1a; it人员无论是使用哪种高级语言开发东东&#xff0c;想要更高效有层次的开发程序的话都躲不开三件套&#xff1a;数据结构&#xff0c;算法和设计模式。数据结构是相互之间存在一种或多种特定关系的数据元素的集合&#xff0c;即带“结构”的数据元素的集合&am…

鸿蒙开发 之 ArkUI路由

1.页面路由 页面路由是指在应用程序中实现不同页面之间的跳转和数据传递 比如说你打开一个app&#xff0c;首先进入的是登陆页&#xff0c;首页&#xff0c;列表搜索页&#xff0c;详情页&#xff0c;你打开几个页面都会存储在页面栈里&#xff0c;页面栈的最大容量上限为32个&…

在Oracle VM virtual box 中复制 CentOS 7虚拟机更改IP地址的操作

最近玩Redis主从复制的时候&#xff0c;我装了一个虚拟机&#xff0c;但主从复制需要准备3个虚拟机&#xff0c;这个时候&#xff0c;我又不想一个一个去装&#xff0c;我看到Oracle VM virtual box提供了一个虚拟机复制操作&#xff0c;于是就用了一下这个功能&#xff0c;发现…

云原生时代:从 Jenkins 到 Argo Workflows,构建高效 CI Pipeline

作者&#xff1a;蔡靖 Argo Workflows Argo Workflows [ 1] 是用于在 Kubernetes 上编排 Job 的开源的云原生工作流引擎。可以轻松自动化和管理 Kubernetes 上的复杂工作流程。适用于各种场景&#xff0c;包括定时任务、机器学习、ETL 和数据分析、模型训练、数据流 pipline、…

【成品设计】基于STC15F104W的互补PWM输出器

《基于STC15F104W的互补PWM输出器》 1.所需器件&#xff1a; (1)单片机&#xff1a;STC15F104W。 ①最小系统板链接&#xff1a;【淘宝】https://m.tb.cn/h.5WnLl9X?tkqSGrdCWm0PW「STC15F104W STC15W204S单片机模块 系统板 核心板 学习板 开发板」点击链接直接打开 或者 淘宝…

HCIP-Datacom-ARST自选题库__多种协议简答【11道题】

1.BGP/MPLSIP VPN的典型组网场景如图所示&#xff0c;PE1和PE2通过LoopbackO建立MP-IBGP&#xff0c;PE1和PE2之间只传递VPN路由&#xff0c;其中PE1BGP进程的部分配置已在图中标出&#xff0c;则编号为0的命令不是必须的。(填写阿拉伯数字) 3 2.在如图所示的Hub&amp;Spok…

【Java】数据加密

目录 数据加密介绍使用场景密码学历史古代密码学凯撒密码例子特点 维吉尼亚密码原理例子特点 现代密码学介绍 现代密码学的加密算法分类哈希算法优点缺点代码示例【封装写法】 对称加密算法对称加密算法的加密过程解密过程对称加密算法的优点&#xff1a;对称加密算法的缺点&am…

【初识Objective-C】

Objective-C学习 什么是OCOC的特性OC跑的第一个程序helloworld OC的一些基础知识标识符OC关键字数据类型字符型c字符串为什么NSString类型定义时前面要加和普通的c对象有什么区别 一些基础知识if语句switch语句三种循坏语句for循环&#xff1a;用于固定次数的循环while循环&…

低功耗,低噪声 CMOS 轨到轨输入输出运算放大器

产品简述 MS6001/2/4 运算放大器具有极低功耗&#xff0c;轨到轨输入输出&#xff0c;低 的输入电压和低的电流噪声。具体表现在可工作在幅度为 1.8V 到 5V 的单电源或者双电源条件&#xff0c;低功耗和低噪声使得 MS6001/2/4 能够用在可移动设备上&#xff0c;输入输…

低代码/无代码可以降低程序员哪些门槛

低代码/无代码开发平台是一种新兴的软件开发模式&#xff0c;它通过图形化界面、拖拽式操作等方式&#xff0c;快速构建应用程序&#xff0c;从而降低了开发者的准入门槛。这种模式对程序员来说&#xff0c;不仅可以提高开发效率&#xff0c;还可以在某些情况下促进业务人员成为…

目标检测数据集 - 打架检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;打架检测数据集&#xff0c;真实监控场景高质量打架图片数据&#xff0c;涉及场景丰富&#xff0c;比如街道场景打架数据、酒吧场景打架数据、商店场景打架数据、公交车场景打架数据、监狱场景打架数据、空旷地打架数据、两人打架数据、多人群殴数据等。…

面试官:如何实现大文件切片上传?

公众号&#xff1a;程序员白特&#xff0c;关注我&#xff0c;每天进步一点点~ 前端上传文件很大时,会出现各种问题,比如连接超时了,网断了,都会导致上传失败,这个时候就需要将文件切片上传,下面我们就来学习一下如何使用vue实现大文件切片上传吧 大文件为什么要切片上传 前端…

【SpringBoot】SpringBoot同时可以处理多少请求

目录 问题Web三大容器三者区别TomcatJetty小结 最大连接数和最大等待数同时处理请求数拓展&#xff1a;设置Web容器设置容器为Jetty设置容器为Undertow 问题 之前看到过一个面试题&#xff1a;SpringBoot同时可以处理多少请求&#xff1f; 准确的来说&#xff0c;Spring Boot…