170-尚硅谷-尚医通-前台用户系统-预约挂号-取消预约-前端整合和测试

刚才呢，咱们完成了取消预约接口的开发，那当下面呢，把它的前端整合出来，然后最终我们进行完整的测试，下面我们来写一下啊，首先我们首先第一部分在咱这个微信宅子里边，把这个接口我们先做一个定义，它就是取消咱们订单接口啊，因为是订单嘛，我给他写我们到O里面去啊，不写微信里边了。那我们找到这个O点音，然后在这里边讲咱们这个接口。取消订单，然后取消订单，我给他起个名字，我叫这个council。这是我们这么一个接口，然后接口里边加上它的参数，包括它相关内容，它的参数应该是这个O的ID，然后里边是这么一个结构，我把这个复制给它改一下啊，首先我们写上它这个相关的路径，路径呢我们到里边来找一下，前面是A片，Order order in for。

也就是这个值，然后后面加上咱们这个名字，这个also cons order，传入咱们的OID，我把这路径给它。复制过来。这里边用表达式把这取到。然后路径写完之后，它用的是一个盖子提交啊，这是我们的第一部分，然后写完之后呢，咱们来到我们的页面中，页面中呢，先找到这个取消预约的这个地方，取消预约应该是在这个地方，然后取消约里边呢，我们这个位置调用的方法叫这个conso order，所以咱在下面把这个方法我们就来做一个创建，我给它写到我们的。这个位置就是取消。与council。然后在方法中，咱就来调用一下我们这个接口进行实现，咱们的接口用的是这个order info A片，那我们来做个调用，调用的时候呢，咱首先也可以来这么一个，就是确认框，确认它是否要取消预约，然后做操作，那这个代码我就直接拿过来来用它快速把这方法给它改出来就可以了。

那我们来快速改一下啊，首先大家看我们先显示稿确认框是否需要预约，如点确定，咱们去调这个方法，那这个方法我们调order。Info API里边这个conso啊，注意这个方法，别写错，弹给他。复制一下啊，让他们保持一致。然后调用方法里边传递个后盖ID，调用成功之后，我们提示他取消成功，然后初始化页面，如果你取消提示他说已经取消预约，所以现在咱就把这个前端部分我们就最终完成了，里边就是这么一个结构，现在这个取消预约部分，前端后端我们都开发完成了，然后都完成之后呢，最后我们来把这服务器给它重新启动一下，咱们进行最终的测试。

那我们启动啊，首先我先把这个前端启动起来。然后启动前端之后，我们再启动我们这个接口部分，咱们等他先启动起来，然后进行测试。现在前端后端都完成了启动，那咱们下面来到页面中，我们进行测试，首先页面我先刷新一下，刷新之后呢，咱们目前的订单是没有支付，所以我们进行支付，咱支付之后完成退款，包括这个功能，那现在我进行支付，打开微信扫描二维码，现在我给他扫一下，先做一个支付。

我现在扫描一下。然后里边0.01元，我这里支付一下。现在支付已经完成了，然后大家看页面现在显示是不是叫已支付，而已支付之后各位看啊，在我这个页面中是不是有一个叫取消预约呀，那我现在点击取消预约，咱们看一下它的效果，看这个订单能不能完成取消，包括能不能实现我们的退款功能，那我现在把这个我们来点一下。然后咱们点确定，现在进行这么一个取消，然后大家看里边提示我们说这个取消预约是不是已经成功的，这里提示我们是正确的，那我们来看一下啊这个内容。然后各位看到啊，首先咱们先来到咱们的控制台里边看，控制台中的目前应该没有什么错误提示，包括目前的状态应该都是正确的，我现在手机上已经收到了退款的记录，退给我了0.01元，然后咱看一下我们的数据库表里边，在表里边首先看这个订单表中的数据，这套数据咱看他的状态。

状态是不是负一，就是已经取消了，然后咱们看这个支付记录表中这个状态，它的状态是不是这个二啊，就是已经退款，然后看这个退款记录表中这个数据是不是也加进来了，包括里边。这些相关内容，所以咱们现在就把这个取消预约功能我们就最终实现出来了，包括它的前端，后端，以及咱们刚才最终的这个测试。包括各位到他的列表中才能看到啊，目前我们这个订单状态是不是一个取消预约的状态，这个功能我们就开发完成了。