点餐小程序实战教程09-订单功能开发

简介: 点餐小程序实战教程09-订单功能开发



我们上一篇已经将商品加入了购物车,如果购买完毕,点击选好了按钮就进入到订单确认页面,确认无误后就写入到订单表。为了实现上述的业务逻辑,我们需要先创建数据源来保存数据。

1 创建数据源

订单的话我们需要创建两个数据源,包括订单数据源及订单明细数据源。这两个数据源是一个一对多的关系。

什么是一对多呢?我们目前这个场景,你下单的时候订单是只有一条记录,而订单里又包含你选购的多个商品,这样就形成了一对多的关系。

在数据源中,一的一方我们叫主表,记录唯一。而多的一方叫子表,它引用的主表的数据标识可以重复。

对基本概念了解之后,我们来实操一下。打开控制台,点击数据源的新建按钮,创建一个数据源,输入名称订单信息。

第一个字段我们添加订单编号,类型是自动编号

第二个字段添加openid,用来记录是谁下的单,类型选择文本

第三个字段添加订单状态,类型选择枚举,枚举值分别是待支付、已支付、待配送、已配送、待评价、已评价、已完成

第四个字段添加支付时间,类型选择日期时间

第五个字段添加配送地址,类型选择文本

第六个字段添加总价,类型选择数字

最后添加一个字段备注,类型选择文本

订单信息数据源创建好之后,我们创建一个订单明细数据源,记录用户购买的菜品详情

字段分别添加菜品名称,单价,购买数量

因为订单明细是子表还需要添加一个关联关系字段,关联到主表的数据标识

2 订单确认功能

点击选好了按钮,我们要跳转到订单确认页面,因此需要先新建一个页面

在页面中先添加一个文本组件,修改为订单明细

然后添加一个数据列表组件,模板选择商品列表,数据源可以保持默认

选择循环展示组件,我们绑定变量,绑定为cartList

修改图片的地址,绑定为所在行的图片字段

第一个文本字段绑定为菜品的名称

第三个文本字段绑定为价格

将原来的图标组件替换成文本组件,绑定数量字段

在数据列表组件再添加一个文本字段,显示总价

`共计:${$w.app.dataset.state.cartList.reduce((total,current)=>{
    return total+current.cpjg*current.count
},0).toFixed(2)}元`

3 提交订单

订单确认之后我们就需要将数据写入到订单表里,先在页面添加一个按钮,改为提交订单

在代码区点击新建,创建一个自定义方法

输入如下代码

export default async function ({ event, data }) {
  try {
    const total = $w.app.dataset.state.cartList.reduce((total, current) => {
      return total + current.cpjg * current.count
    }, 0).toFixed(2)
    const data = await $w.cloud.callDataSource({
      dataSourceName: "ddxx_h6bpo7o",
      methodName: "wedaCreateV2",
      params: {
        data: {
          openid: $w.auth.currentUser.openId,
          ddzt: "1",
          zj: total
        },
      },
    });
    const id = data.id
    const list = $w.app.dataset.state.cartList.map(item => ({ cpmc: item.cpmc, dj: item.cpjg, gmsl: item.count, ddxx: id }))
    const ddmx = await $w.cloud.callDataSource({
      dataSourceName: "ddmx_fk27cb3",
      methodName: "wedaBatchCreateV2",
      params: {
        data: list,
      },
    });
    $w.utils.navigateTo({
      pageId: 'u_ding_dan_cheng_gong', // 页面 Id
      params: { id: id },
    });
  } catch (e) {
    console.log("错误代码", e.code, "错误信息", e.message);
  }
}

代码的逻辑是先写入主表信息,我们调用的数据源方法新增单条,写入后会返回记录的数据标识,然后我们构造一下子表的记录,这里是订单明细。构造的时候需要写入主表的数据标识,构造好之后我们调用了批量新增的方法。

记录写入完毕后我们调用了跳转到新页面的api,传入了页面的标识和入参

4 订单成功页面

订单成功页面我们放一个图标显示提交成功,用数据详情组件查询一下订单的编号,然后放一个按钮用来返回首页

选中页面组件,设置一下URL参数,这个参数用来接收我们在订单提交页面的传入的参数

数据详情组件要设置筛选条件,让我们订单数据源的数据标识等于我们传入的参数

然后文本组件绑定我们的订单编号字段即可

给按钮组件绑定事件,设置返回首页

经过以上的步骤,一个订单功能就开发好了。

总结

本篇我们介绍了订单功能的开发,主要是需要构造主子表的数据,然后写入对应的数据源。初学者因为技术基础薄弱,尤其操作数据源这块就比较困扰了,这个主要需要熟读文档,然后按照你自己的需求多练习一下才可以掌握。

相关文章
|
2天前
|
移动开发 小程序 前端开发
几千怎么部署搭建校园服务平台,校园圈子论坛系统小程序搭建,校园系统源码,多种功能一体的综合性校园平台
校园圈子论坛是一款集交友、二手市场、聊天等多功能于一体的校园社交平台,支持App、小程序和H5三端交付。学生可处理闲置物品、结识新朋友,通过算法匹配兴趣相投的用户。平台提供分享邀请机制,支持自动绑定推荐关系,并设有奖励机制。开发过程中需注重数据安全与系统稳定性,确保功能兼容及性能优化。
25 5
|
2天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
35 3
|
8天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
13天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
5天前
|
小程序 安全 搜索推荐
陪玩小程序的搭建解析与功能需求
陪玩小程序是为玩家提供专业陪玩服务的应用,嵌入社交或游戏平台,具备智能匹配、实时聊天、预约服务等功能,支持便捷高效的游戏体验。源码交付时需提供详细文档、技术支持及定制开发服务,确保客户能顺利维护和升级。选择陪玩小程序时应关注功能需求、用户体验、安全性和成本效益,以确保最佳使用效果。
33 0
|
13天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
9天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
2天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
37 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
359 3