基于HarmonyOS_Next的外卖送餐骑手端应用开发笔记（下）

已于 2024-09-02 03:31:31 修改
阅读量1.2k 收藏 29
点赞数 20
文章标签： 鸿蒙 harmonyos typescript javascript
于 2024-08-25 17:00:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wakeupwsy/article/details/141531410
版权

                                个人开发笔记，大佬留情

47. 交货列表加载

分析：

一个任务，如果已经提货，那么下一步应该就是司机去送货，完成交货，上一节我们完成了提货， 那么完成的这个任务应该在在途里面，所以我来先把在途的数据进行查询一下

  • 在途和待提货的区别就是查询的状态不同，刚刚好，我们前面定义了枚举，所以这里可以直接复用前面提货的TaskList的组件

entry模块

接下来，根据状态去调整按钮的显示和文本内容

  • 当任务的状态为待提货并且可提货时，按钮显示提货并且可用
  • 当任务的状态为待交货时，按钮显示提货并且可用
  • 当任务的状态为待回车登记时，按钮显示回车登记并且可用
  • 给之前的任务状态枚举再加一个属性
  • 在TaskItemCard组件中根据状态获取按钮的文本及可用状态

如果enablePickup为true 表示可提货

如果status 为 2 表示为待交货 显示交货

如果status 为 4表示 待回车登记

  • 按钮显示文本

⚠️： 这里的去提货的逻辑不用发生任何变化，因为交货的业务也是到详情页去提货，完成可以复用一摸一样的逻辑

效果：

48. 交货详情内容控制

根据状态显示不同的按钮


当一个任务提完货后，status应该是Line(在途)，如果是Waiting(待提货)的话显示提货按钮，如果是Line（在途），显示交货按钮
1提货


2交货

  1. 交货时，隐藏提货上传组件，显示交货上传组件
  • 实现一个Builder函数来放置交货的上传

显示组件



 

49. 交货按钮状态控制

控制按钮enable

50. 交货

Entry模块

标准流程

  1. 定义类型封装api
  2. 引入api
  3. 注册事件-调用api重新加载
  1. 定义请求参数类型
import { ImageList } from '@hm/basic'
export interface DeliverParamsType {
  /** 交付凭证列表 */
  certificatePictureList: ImageList[];
  /** 交付图片列表 */
  deliverPictureList: ImageList[];
  /** 司机作业id */
  id: string;
}
export class DeliverParamsTypeModel implements DeliverParamsType {
  certificatePictureList: ImageList[] = []
  deliverPictureList: ImageList[] = []
  id: string = ''

  constructor(model: DeliverParamsType) {
    this.certificatePictureList = model.certificatePictureList
    this.deliverPictureList = model.deliverPictureList
    this.id = model.id
  }
}
  1. 封装API

  1. 调用

51. 底部显示回车登记按钮

在已经交货的情况下，显示提货信息-交货信息- 底部的回车登记按钮，全部显示

52. 回车登记模式下-上传组件只读

因为货已经交了，所以回车登记模式下，此时只可以看，不能再传图片了

basic模块

  1. 给HmUpload一个属性来控制是否可上传和删除

  1. 通过该属性来控制上传部分的显示和隐藏

  1. 在TaskDetail中传入该属性

53. 回车登记页面

2024.8.24

  • 新建回车登记页面 pages/CardRecord/Record
import { HmNavBar, HmCard, HmCardItem } from '@hm/basic'
@Entry
  @Component
  struct CarRecord {
    build() {
      Column() {
        HmNavBar({ title: '回车登记' })
        Scroll() {
          Column() {
            HmCard(){
              HmCardItem({
                leftTitle: '出车时间',
                rightText: '2022.05.04 13:00',
                showRightIcon:false
              })
              HmCardItem({
                leftTitle: '回车时间',
                rightText: '请选择',
                showBottomBorder: false
              })
            }
          }
          .height('100%')
        }
        .layoutWeight(1)
        // 底部内容
        Row() {
          Button("交车",{ type: ButtonType.Capsule })
            .backgroundColor($r('app.color.primary'))
            .width(207)
            .height(50)
        }
        .backgroundColor($r('app.color.white'))
          .height(70)
          .width('100%')
          .justifyContent(FlexAlign.Center)
          .alignItems(VerticalAlign.Center)
      }
      .backgroundColor($r('app.color.background_page'))
        .height('100%')
    }
  }
  • TaskDetail页面跳转到回车登记

  • 在CarRecord接收参数id，并且获取任务的详情，赋值出车时间

54. 封装选择组件

basic模块

分析

  • 可以控制显示文本
  • 右侧的是否文本可以控制
  • 值改变时通知外部组件
  • 这个组件通用性不是那么大，简单封装一下
  • 在components下新建HmCheckBox.ets - 直接复制
@Component
  struct HmCheckBox {
    title: string = "测试"
    confirmText: string = "是"
    cancelText: string = '否'
    @Prop
    value: boolean = true // 决定选中左侧还是右侧\
    checkChange: (value: boolean) => void = () => {}
    build() {
      Row () {
        Row () {
          Text(this.title)
            .fontSize(14)
            .fontColor($r("app.color.text_primary"))

          // 右侧内容
          Row ({ space: 10 }) {
            Row () {
              Image(this.value ? $r("app.media.ic_radio_true") : $r("app.media.ic_radio_false"))
                .width(32)
                .aspectRatio(1)
              Text(this.confirmText)
            }
            .onClick(() => {
              this.value = true
              this.checkChange(this.value)
            })
            Row () {
              Image(!this.value ? $r("app.media.ic_radio_true") : $r("app.media.ic_radio_false"))
                .width(32)
                .aspectRatio(1)
              Text(this.cancelText)
            }
            .onClick(() => {
              this.value = false
              this.checkChange(this.value)
            })
          }
        }
        .width("100%")
          .borderRadius(10)
          .height(60)
          .padding({
            left: 15,
            right: 15
          })
          .justifyContent(FlexAlign.SpaceBetween)
          .backgroundColor($r("app.color.white"))

      }
      .width("100%")
        .padding({
          left: 15,
          right: 15
        })
        .margin({
          top: 15
        })
    }
  }
export { HmCheckBox }
  • 在回车登记中放置三个组件

效果：

55. DatePickerDialog时间选择器弹窗

效果：

56. 回车登记提交

  1. 定义提交数据类型
  2. 绑定数据到数据
  3. 提交回车登记

entry模块

  • 声明回车登记类型
import { ImageList } from '@hm/basic'
export interface CarRecordType {
  /** 事故说明，类型为“其他”时填写 */
  accidentDescription: string | null;
  /** 事故图片列表 */
  accidentImagesList: ImageList[] | null;
  /** 事故类型，1-直行事故，2-追尾事故，3-超车事故，4-左转弯事故，5-右转弯事故，6-弯道事故，7-坡道事故，8-会车事故，9-其他, */
  accidentType: string | null;
  /** 违章说明，类型为“其他”时填写 */
  breakRulesDescription: string | null;
  /** 违章类型，1-闯红灯，2-无证驾驶，3-超载，4-酒后驾驶，5-超速行驶，6-其他,可用 */
  breakRulesType: string | null;
  /** 扣分数据 */
  deductPoints: number | null;
  /** 回车时间，回车时间，格式yyyy-MM-dd HH:mm:ss，比如：2023-07-18 17:00:00 */
  endTime: string;
  /** 故障说明，类型为“其他”时填写 */
  faultDescription: string | null;
  /** 故障图片列表 */
  faultImagesList: ImageList[] | null;
  /** 故障类型，1-发动机启动困难，2-不着车，3-漏油，4-漏水，5-照明失灵，6-有异响，7-排烟异常，8-温度异常，9-其他,可用 */
  faultType: string | null;
  /** 运输任务id */
  id: string;
  /** 是否出现事故 */
  isAccident: boolean | null;
  /** 车辆是否可用 */
  isAvailable: boolean | null;
  /** 车辆是否违章 */
  isBreakRules: boolean | null;
  /** 车辆是否故障 */
  isFault: boolean | null;
  /** 罚款金额 */
  penaltyAmount: string | null;
  /** 出车时间，出车时间，格式yyyy-MM-dd HH:mm:ss，比如：2023-07-18 17:00:00 */
  startTime: string;
}
export class CarRecordTypeModel implements CarRecordType {
  accidentDescription: string | null = null
  accidentImagesList: ImageList[] | null = null
  accidentType: string | null = null
  breakRulesDescription: string | null = null
  breakRulesType: string | null = null
  deductPoints: number | null = null
  endTime: string = ''
  faultDescription: string | null = null
  faultImagesList: ImageList[] | null = null
  faultType: string | null = null
  id: string = ''
  isAccident: boolean | null = null
  isAvailable: boolean | null = null
  isBreakRules: boolean | null = null
  isFault: boolean | null = null
  penaltyAmount: string | null = null
  startTime: string = ''

  constructor(model: CarRecordType) {
    this.accidentDescription = model.accidentDescription
    this.accidentImagesList = model.accidentImagesList
    this.accidentType = model.accidentType
    this.breakRulesDescription = model.breakRulesDescription
    this.breakRulesType = model.breakRulesType
    this.deductPoints = model.deductPoints
    this.endTime = model.endTime
    this.faultDescription = model.faultDescription
    this.faultImagesList = model.faultImagesList
    this.faultType = model.faultType
    this.id = model.id
    this.isAccident = model.isAccident
    this.isAvailable = model.isAvailable
    this.isBreakRules = model.isBreakRules
    this.isFault = model.isFault
    this.penaltyAmount = model.penaltyAmount
    this.startTime = model.startTime
  }
}
  • 在CarRecord中定义数据

转化时间

获取时间

获取三个选择

  • 封装交车api

回车登记方法

绑定按钮

同学们到现在，我们已经将神领物流中的 提货-交货-回车登记业务跑通，剩下的将完成 对整个项目的一些核心点的优化

57. 延迟收货业务

entry模块

  1. 新建pages/Delay/Delay.ets -(Page)
  • 复制静态-快速布局

定义延迟提货提交类型参数

export interface DelayParamsType {
  /** 延迟原因 */
  delayReason: string;
  /** 延迟时间，格式：yyyy-MM-dd HH:mm */
  delayTime: string;
  /** 司机作业单id */
  id: string;
}
export class DelayParamsTypeModel implements DelayParamsType {
  delayReason: string = ''
  delayTime: string = ''
  id: string = ''

  constructor(model: DelayParamsType) {
    this.delayReason = model.delayReason
    this.delayTime = model.delayTime
    this.id = model.id
  }
}

封装一个转化时间函数

export  const  DateFormat =(value:Date)=>{
  //2023-12-23 05:12
  return value.getFullYear()+"-"+(value.getMonth()+1).toString().padStart(2,"0")+"-"
    +(value.getDate()).toString().padStart(2,"0")+""
    +value.getHours().toString().padStart(2,"0")+":"
    +value.getMinutes().toString().padStart(2,"0")
}

显示时间

效果：

封装延迟提货api

调用api

效果：

58. 没有数据页面

因为item有可能为null，所以加一个短路表达式

效果;

59. 上报异常页面基础布局

59. 上报异常页面基础布局

新建上报异常页面-复制静态-pages/ExceptionReport/ExceptionReport.ets

import { CommonRouterParams, DateFormat, HmCard, HmCardItem, HmNavBar, HmUpload } from '@hm/basic'
import { router } from '@kit.ArkUI'
import { ExceptionListModel, ExceptionParamsType, ExceptionParamsTypeModel } from '../../modals'

@Entry
  @Component
  struct ExceptionReport {
    @State
    exceptionForm: ExceptionParamsTypeModel = new ExceptionParams
最低0.47元/天 解锁文章
wakeupwsy
关注
美团外卖API接入（一）
qq_41615095的博客
04-28 4万+
前言：文档用于记录美团外卖api的接入过程，美团外卖提供给第三方软件商的接入地址如下，如果是单独的餐饮企业是可以直接接入美团外卖比较成熟的api的。此文是针对第三方软件商想接入美团外卖可以看看。本人接入的时间大概是2016年12月份，当时此网站上是没有javaSDK的，所以一些加密方法都是自己按照文档里面加密的。有SDK还是用SDK吧。本文档只接入了外卖，其它功能未接入。地址：https://de...
uniapp实现跑腿上门服务类型骑手实时地图定位源码
小马总的博客
10-20 2400
今年同城服务类型项目比较热门，再说一下 开发过的 如何实现骑手地图的uniapp前端代码。参考效果 显示骑手位置 底部悬浮组建。
CompletableFuture 原理与实践 - 外卖商家端 API 的异步化 - 美团技术团队
编码行者的博客
04-19 1200
CompletableFuture 是由 Java 8 引入的，在 Java8 之前我们一般通过 Future 实现异步。Future 用于表示异步计算的结果，只能通过阻塞或者轮询的方式获取结果，而且不支持设置回调方法，Java 8 之前若要设置回调一般会使用 guava 的 ListenableFuture，回调的引入又会导致臭名昭著的回调地狱（下面的例子会通过 ListenableFuture 的使用来具体进行展示）。
顺丰同城急送API对接（附源码）
Japhet_jiu的博客
04-18 2175
开始对接之前，必须要搞清楚你们对接的是店铺还是企业版的，区别就是企业版本的顺丰官方会给你一个卡号，是月结卡，你公司本月下的单，扣费就在这个卡里面扣款，然后月底结算费用，店铺的是没有的
饿了么平台开发API接口列表
精哥哥
07-08 2903
查询某个位置下有那些地址信息
“api工厂”如何对接达达配送
api工厂
10-22 2434
针对同城快递、外卖类业务，你可以选择用户下单后，直接对接达达配送系统；达达的骑手自动上门取货并给用户进行配送。 准备工作 《注册开通达达商户》 注册成功后，登录你的达达商户端后台，添加你的真实门店信息； 用户下单后，快递小哥将通过你在后台添加的门店定位地址取货并给用户配送，所以请一定如实填写。 在达达后台充值一定的余额，骑手配送是需要费用的，你可以和达达洽谈具体是余额里面扣，还是购买他们的包年包量...
基于HarmonyOS_Next的送餐骑手端应用开发笔记（上）
wakeupwsy的博客
08-25 1111
基于Harmony0S Next版本开发的外卖送餐骑手端应用。个人学习笔记，大佬手下留情。
Java外卖点餐系统【附全部代码】YYDS
m0_61926454的博客
05-25 5178
实现不同角色用户登录系统 (1) 管理员登录系统看到如下菜单： ① 添加菜品 ② 查看所有菜品信息(包含分页功能) ③ 查看指定类别的菜品信息 ④ 根据菜品id修改菜品价格 ⑤ 删除指定id的菜品 ⑥ 添加客户 ⑦ 查看客户列表 ⑧ 删除指定id的客户 ⑨ 订单列表显示 ⑩ 根据订单id修改订单状态 11 退出 (2) 客户登录看到如下菜单： ① 显示所有菜品(按菜品销量从高到低排序输出) -------->点餐（输入菜品id和购买数量） ② 根据菜品类别显示所有菜品 ③ 查看所有订单(当前登录用户的)
题—送外卖2(最短路径&&dfs)
weixin_45819197的博客
10-27 2841
送外卖2 图论，动态规划，BFS，弗洛里德算法 牛客网：送外卖2 题意 ps: 2号代码解释 下次一定（滑稽）； n个点，m条有向边，q个外卖点。 q个外卖点信息 卖家位置，顾客位置，卖家做好的时间，顾客要求的时间送达 不管时间，问能送达的最大的外卖的点数。 1-------------------代码如下： 使用BFS解决 #include<iostream> #include<cstring> using namespace std; int read(){ in
外卖系统自动派单代码python
12-27
### Python 外卖系统自动派单算法实现 在外卖系统的自动派单过程中，...以上就是基于Python语言构建的一个简单版外卖系统自动派单机制原型。当然，在真实应用场景里还需要综合考量更多维度的因素才能达到理想效果。
Java实现一个简易的订餐系统（控制台输出）
kk1213_的博客
07-19 4969
要求： /** * 一、我要订餐 * 完成用户订餐，每条订单包含如下信息： *  订餐人姓名：要求用户输入 *  选择菜品及份数：显示三个菜单序号、名称、单价、点赞数，提示用户输入要选择的菜品序号及份数 *  送餐时间：要求当天10到20点间整点送餐，要求用户输入10~20的整数，输入错误，重复输入。 *  送餐地址：要求用户输入 *  状态：两种状态：0：已预定（默认状态） 1、已完成（订单已签收） *  总金额： * 总金额
鸿蒙NEXT开发动画案例10
鸿蒙布道师
05-16 1116
本文介绍了如何在鸿蒙系统中创建一个名为SpinTen的动画组件。首先，在Page文件夹下新建Spin.ets文件，定义了一个包含旋转动画的组件，通过Grid布局和Canvas绘制实现动画效果。接着，修改Index.ets文件，引入并调用SpinTen组件，设置其大小和颜色。最后，运行项目并登录华为账号进行签名，即可看到动画效果。该动画通过Keyframe动画实现，具有平滑的缩放和位移效果，适用于加载或等待场景。
鸿蒙5.0项目开发——鸿蒙天气项目的实现（主页2）
高心星的专栏
05-16 185
这是一个基于 HarmonyOS 开发的天气应用，提供实时天气查询、天气预报和城市搜索等功能。
HarmonyOS 开发之 —— 合理使用动画与转场
this_is_bug的博客
05-16 157
本文介绍了在HarmonyOS开发中如何合理使用动画与转场效果，以提升用户体验。首先，文章详细讲解了属性动画（Property Animation），包括其核心组件如Animator、ValueAnimator、ObjectAnimator，以及插值器和估值器的作用。通过代码示例展示了如何实现视图位置移动、组合动画（缩放与透明度变化）以及自定义属性动画。接着，文章探讨了转场动画（Transition Animation），分为简单转场和带共享元素的转场，并提供了页面滑动切换和图片点击放大进入新页面的具体实现
鸿蒙AI开发：10-多模态大模型与原子化服务的集成
caihuayuan4的博客
05-18 494
通过本文的介绍，相信读者对于在鸿蒙生态中进行多模态大模型与原子化服务的集成有了更深入的了解。多模态大模型与原子化服务的集成，不仅能够提升智能应用的功能和效果，也为开发者带来更多的创新可能性。在鸿蒙生态中，开发者可以通过鸿蒙AI开发工具和平台，快速完成多模态大模型与原子化服务的集成工作。结合实际案例，介绍在鸿蒙生态中多模态大模型与原子化服务的集成实践，重点分享具体的技术细节、实现步骤和效果展示。描述：本文介绍了在鸿蒙生态中进行多模态大模型与原子化服务的集成的方法和实践，帮助开发者更好地应用和理解这一技术。
澳门巴士报站App鸿蒙版正式上线 助力智慧城市与自主科技融合发展
最新发布
weixin_43735236的博客
05-19 94
鸿蒙版“巴士报站”App“路线”页面显示澳门所有巴士的路线，用户找到所需巴士后，点击巴士图标即可查看路线资讯和改道消息等信息。作为首个入驻鸿蒙生态的港澳政府官方应用，鸿蒙版“巴士报站”App的成功上线，不仅提升了澳门公共交通的智能化水平，为其他港澳地区政府及企业提供了可借鉴的范例，也为当地居民与游客带来更加智能、便捷的生活体验。鸿蒙版“巴士报站”App的上线，是澳门智慧出行全场景突破的重要里程碑。除了上述功能外，鸿蒙版“巴士报站”App还提供“旅游热点”服务，用户能够获得更加便捷高效的乘车和出游体验。
鸿蒙OS&UniApp 实现的地图定位与导航功能#三方框架 #Uniapp
小淼淼的博客
05-15 945
最近在做一个外勤签到应用，需要实现地图定位、标记和导航功能。由于产品需要覆盖安卓、iOS、鸿蒙等多个平台，我们选择了UniApp作为开发框架。其中对鸿蒙系统的适配是一个新挑战，经过一番摸索，总结出了一套可行的实现方案，今天就把这个过程分享给大家。通过本文，我们详细介绍了如何在UniApp框架下实现地图定位与导航功能，并针对鸿蒙系统进行了适配。基础地图组件：使用UniApp的map组件实现地图展示与交互定位功能：获取用户当前位置并显示在地图上标记功能：在地图上添加与管理标记点导航功能。
鸿蒙OS&UniApp制作支持多图上传的图片选择器：打造高性能移动端上传体验#三方框架 #Uniapp
小淼淼的博客
05-16 507
支持多图选择与预览智能压缩，优化传输性能可靠的上传队列管理完善的失败重试机制鸿蒙系统深度适配自定义图片裁剪功能添加水印处理优化大图片加载实现拖拽排序图片上传是一个看似简单但实际涉及诸多技术点的功能，需要我们在性能、体验和可靠性之间找到平衡。通过本文的实践，相信大家已经掌握了实现一个专业图片上传组件的核心要点。在实际开发中，还需要根据具体场景进行调整和优化。希望本文对大家有所帮助，也欢迎在评论区分享你的开发经验！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值