14-订单业务流程原创

好了，同学们，我是童颜老师，这节课我们来讲解一下我们整个应用当中最核心的一个业务功能就是下单啊，在我们用户选择的好了起点的站点以及这一个终点的站点之后呢，就会进入到这样的订单的券的页面，而这页面当中我们需要用户选择他的。乘车人啊，以及他要上传他的对应一些行程码。然后呢，我们这里需要什么实时计算，它选择乘车人之后，它对应起功能，以及我们这里还能么要能跳转到实时跳转到一个添加乘车人的这个业务流程当中啊，首先我们看一下我们的这个订单的确认页面是在哪个文件当中啊，我们是在我们的这个。Ticket ticket当中的页面当中啊，在页面当中我们看一下它对应的一些业务逻辑啊，首先就是我们之前讲过的图片的上传哈，我们重点回到我们的整个页面的一开始。在lo的地方呢？同学们，我们需要什么，需要确定一个。

啊，我们要去到我们的。在我的页面。在我们页面当中，我们要找到什么？先看一下它的unload。安乐这个地方呢，我们会根据页面参数当中，我们要求从上一个页面跳转进来时候传递什么，传递一个第一个啊，第一个ID是我们的航线ID，第二个是我们的起点城市图，是我们的到达的终点城市的站点的索引值啊，然后还有什么go，就是出发日期啊，这里面就会有这个对应的一个时间。

啊，然后什么第一步什么就先获取航班信息，第二步什么获取联系人。啊，获取航班信息的操作比较简单了，我们是不是通过哪里啊，我们直接通过我们的story当中得到这个航班ID，因为之前我们有讲解过，在我们的上一层页面的时候，我们是什么呀，在我们这个bad bad这个页面当中，我们是直接在获取上个页面就是这个页面当中哈。我们一旦用户进来的时候，确定点击购票的时候，我们会做个事情，我们为什么把整个的航班信息都已经存储在log里面了，以便后面的获取。所以我们其实让我们进到这个页面当中，我们不用再发起艾萨克请求来得到整个航班的信息，因为是非常非常没必要的，因为我们从上个页面的时候已经得到了所有的航班信息了，而且我们直接可以从这个本地群众当中拿取所有的航班信息出来进行使用啊，但是这里面如果有找不到的时候呢，我们可以有一个返回哈，就是返回，但这里面一般而言都是不会出错的，因为上个页面能进来的时候，就确保它是成功的了。

就下一步我们啊，这里面肯定有一个设置了啊，以及对于时间的操作取得了，取得这边也是一样哈，我们之前在存的时候，不同学有没有记得我们也是把把这个起点城市当中的这个收银值。啊，我们也有记录。好吧。啊，从而它在这里面我们可以直接得到，根据这个起点站点的索引值，就可以得到起始站点的这个的信息，就会得到它对应的一个发射时间，啊，这里有个预计的发射时间啊，所以尽量这时也会得到个对应的时间。啊，但是下一步就是什么，这里面要请求得到所有的用户当中的添加过的创始人的信息，以便我们这里能够进行快速的选择。啊，在这里面呢，我们两个获取都是在那之前就是这么onload当中，就加载完成的时候进行一个处理啊on so这个地方也是了，因为什么，因为我们这里要记住了哈，啊就在用户添加好。

添加。乘车人返回的时候能重新获取最新的。成。责任信息啊，主要是这样啊，但是这样其实不用做了，因为我们是从本地的log里面哈，但如果。啊，这里面我注释掉哈，但如果我们的航班。信息是通过API接口获取的话。记得也需要从。重新获取啊。航线线行，OK，这里我们注意的一个点，那我们现在因为什么，因为我们是从local里面得到的，是我们其实这行是不用再执行的了啊，这里面呢，我们就讲好了，我们钩子当中进来的准备工作，就准备好了这些内容，那接下来我们得到这些内容之后呢，我们会对我们的页面进行一定程度的渲染，首先啊，上面不用说我们肯定要什么，对于这个触发日期以及这个站点的发射时间进行显示。

啊，就是上面这里，接下来这里呢，显示呢，显示我们的航班信息当中的起点站点，以及用户选上一步当中选好，那么终点站点啊，这个from and to是在哪里得到了，是在我们的这个API当中。好在我们的刚才当中哈。欢乐当中，我们通过参数传递过来得到的。看到吧，我们设置给一个date啊，但是这个页面参数当中也能看到对应的传参。啊，往下一步，我们这里面的，这里面有一个上传二维码的一个操作啊，就是我们之前讲到图片的上传的时候，专门有一个上传行程码啊，这里让他选出一定的图片。啊，选中图片之后呢，就到了这个选择乘车人，而乘车人这个地方我们需要做什么事情啊，乘车人这个操作当中，我们是做了一个选中的效果。

啊，选中的效果这里面做个事情，我们看一下哈，在这里面绑定的一个这里面哈，我们就把做一个循环。列表循环，根据这个零啊，这个地方怎么得到的，是不是刚才我们获取联系人说我们直接设置给他了呀。这里看到吧，施给他之后就选出这个的。所有的成的一个列表，当我们点击添加的时候，我们会执行一个函数at fair at fair的这个定义操作。我们为什么会在这个数组当中？设置指定的一个为选择啊，但在点的时候就切换C反向操错嘛，你没有点中的时候，我点你就选中，我再点你时候就取消啊，就是这里面来设置。啊，接下来我们做的事情还得什么？还得去把严现有的这个数组当中，根据已选中的人分成两个列表。区分为什么区分一个区分。

一个成人。的成。乘车人数组OK，然后对应的区分一个区分一个儿童。为什么儿童，因为儿童票是半价的，我们要这样的一个计算哈，一个。然后呢，在这里区分好，专门用我们用数组的filter的方法，根据它的类型来进行一个切换啊这里面当我们是什么区分它，得到我们得它的对应的一个长度，那么总的票价这计算吗？计算这就是进行进行一个逻辑计算总的票价。啊，记住哈，儿童半价。儿童票。半价。啊，说我们这里面啊，得到的数组的计算方式就是什么方式啊，我们把总的票价。啊，进行进行一个啊。

这里是不是其实这里不对啊，这里这里是将。票价。换算没换算。换算。啊，因为我们之前的票价是吗？是用这个叫做。分来做单位的，所以我们就要除以100才能够换算为元啊，但我们为什么换算为元呢？什么？因为我们虽然说我们存储的是这一个分啊，因为我们遇到一个什么小数点的一个精准的匹配的问题，但是呢，我们实际上显示给客户看的时候，还是尽可能选择什么呀，还是选择用户看的明白的这一个对应的一个金额。啊，这里面看到吧，我们我们要显示给他看，说我们要把这个票价换算一元，然后呢，这里面我们就什么就是根据。这里面就是真正的去什么计算。

总的票价啊，因为我们什么这里面记住了儿童票半价。啊，说我们把什么把这个总的票票价乘以成人的数量，然后呢。票价的一半乘以儿童票的数量，就会算出我们的总的价格啊，当然所以我们页面的这个地方啊，我们页面下面这个地方啊，就会显示我们显示的是总费用的明细当中看一下哈。订单总金额在这里，那么我们其实么是我们刚计算出来的这个总价啊，就是通过这种形式计算得到的，OK，然后呢，当我们这里面就符合了我们对于逻辑的判断哈，我们可以在里面添加，我们添加一个儿童。啊。小朋友A，然后呢，联系电话。

啊，进来之后，我们看到是不是就有了新的联系啊，我们把这个点上。看到同学啊，这里面小朋友的价格就是我们是按一半来计算的显示的OK，所以这里面就是有三个人的话，就是成功的算好了他的总的票价的几个情况，好吧，这里面啊，当然刚才我们的上传是之前已经讲解过了，这里就不再赘述啊，这是听选择乘车人，然后呢，这里设置总价格，我们也是什么有一个给到这里显示的一个情况哈，解示个总价的情况，往下的地方我们看一下在。这里我们设置一个preview的一个函数，这函数呢就是方便预览图片哈，当我们在我们之前上传好的图片的时候。先选择其中的图片。啊，但上传完成之后，我们这可以点击图片就可以对图片进行预览啊，这一个小小的地方啊。然后我们看一下。在我们点击下单的时候，我们这里做了一个操作，同学们看一下哈，在我下单的时候，其实我们模拟了一个什么，在这里我们模拟了，模拟了一个模拟了。

一个微信支付。啊，模拟微信支付流程怎么样呢？各位，这里面是进行进行了预下单操作。预下单的目的是什么？是为了得到一个对应的一些的支付参数啊，支付参数坏了之后呢，我们才才会弹出一个支付。啊，我会这里用个模框，模态框的形式啊，模态框成功支付之后，点击它，我们才是真正什么通知，我们一个异步通知啊，这里就是啊模拟了一个异步通知，通知我们的服务。端去处理。用户的支付。结果啊，但是这里面我们是通过我们这里发送给他的，什么意思呢？同学们，实际开发过程当中，一般我们进行支付之后。

微信的微信支付的服务器就会向我们指定的某一个接口来发出我们现在支付的订单的信息，而现在而言，我们尽可能的最大的情况之下模拟了这个支付的流程，也是我们是通过你支付之后呢，因为我们是不是这样操作它，你点击下单，我就会点击支确认，确认之后呢，等于什么真的就模拟了。我们的微信向我们的服务器指定的链接发出通知，告诉你支付成功或失败的一个情况，啊，在这里面我已经有订单了，我没有支付，所以这时候呢，我回到我的页面当中，看到我的这里面的一个我的订单。我们看到这里就有两个订单了，这里有个待支付。看到了吧，啊，待支付的流程啊，就是刚才因为我下了单，但我事实上什么呀，没有支付的对不对啊，但我这里面也可以去真正的选择支付。啊，按流程哈，我们进行图片的上传。一起选择乘车人，然后点击确定，立即支付。

啊，他们这里就变成了待确认啊。这个订单信息是不一样的，这是我们模拟了一个最真实的一个比较接近真实的一个的模拟支付的一个场景啊，当然这里面呢，我们其实在提交的时候，刚才我们在这个提交的时候。Previ这个添加这个预支付订单的时候，我们也要么在添加之前，我们需要什么对一一些用户的信息进行一定的判断啊，当然我们这里面是没有进行判断的，比如说你一定要勾选乘车人啊，啊，你要勾选什么对应的一些啊，其他的信息一定要进行一定的数据过滤的一个流程，这里面放在这里就好哈，但然如果说你没有选择这个零城市人，你怎么能够发送有后面呢，对不对，就这里面一般有没有一定的操作，比如说你的这个link man。啊，Man的不够啊，你的。是等于等于0E，这时就要中断了，然后面怎么受一个to。

微信的。我们是不是要写提示你，提示你怎么样啊？艾，我们当然设为冷哈。各位为什么把这icon设为嫩呢？因为设为none的时候，它才能显示出所有的文字内容，我们就提示你什么就是啊。请选择乘车人啊，这边就提醒大家，一般我们在什么在真正的提交之前。记得做数据的过滤啊，当然包括什么，对于你的一些，当然这里面很多的选择其实是固定的，为包括这些航班，意就是这个是要选择的，你没有选择这人你是不能下订单的啊，所以这时候我再测试一下，给大家看一下改了之后的场景。啊，选择起点，选择终点，然后点击搜索。然后选择对应的班次。然后我点击下单。

看到吧，这里面最新的一个点提示。这是我们的场景，当我们对于刚才我们说的那一个啊，包括我们的这个行程码，我们也可以做些一定的限制，对不对，也这行程码的图片的长度也是等于零的时候，我们可以甚至把代码C一下都可以进行一个就演示了，我们判断什么判断的是你的行程码上传的图片。你也不能为空，我们这题是不是就是行上传至少一个人的行程吗？OK，这是我们常规的一个操作啊，同们一般而言，我们虽然后端也会做过滤，但是一般我们建议大家在前端实际的请求接口之前，我们做一定的数据过滤啊，以防安全问题啊，当然这里面没有绝对的安全哈，我们就说尽可能让我程序显得安全一点点，OK，这是我们在订单业务流程所做的流程。