153-尚硅谷-尚医通-前台用户系统-预约挂号-预约挂号详情-前端整合

在刚才的内容中呢，咱们完成了获取排班数据，获取可预约的排班数据，把它的接口咱们完成了开发，那咱们下面呢来整合前端，在前端中完成它相应的功能，那下面我们来做一下，首先第一部分我们看一下，就是我们在里边的这个页面中点击某一个科室是不是要进入到我们刚才的接口里边，然后最终把数据进行显示，就是可预约的挂号数据，那咱们现在先来到这个页面中，这个页面呢，在我们里边那个好的批斗中的。下划线hot coded里边，然后在house codet中我们来看一下，当咱们点击某一个科室，然后在某一个code室中，我们这里边是调用这个方法叫schedule schedule里边呢传入咱们这个科室的这个编号，然后咱们看下这个方法，这个方法中首先判断登录，然后判断是否已经进行了用户认证，当认证和登录周之后，下面咱做个跳转，跳转到这个好的P的shadow里边，在shadow中咱们得到两个值，一个是医院编号，一个是科室编号，所以咱们下面就在这个页面中来实现里面内容。

那我下面呢，把这页面给各位创建一下，咱们就在这个好里边创建一个叫筛掉点voe的这么页面。那下面我把这页面创建一下，我在这个host里边创建一个页面，页面名字我就叫筛掉，点vuee，咱们一会儿通过这个做一个跳转，跳转到页面中来，然后这个创建之后，因为咱们要去调用接口，所以说我在API中把咱们刚才写的两个接口在里边做定义，就是按照这种结构定一下就可以了，那我这里边把它拿过来，就是咱们刚才写的这么两个接口，我把它复制过来。

然后咱们看一下两个接口，首先第一个接口就是获取可预约的，这个就是信息，它里边做一个分页，然后第二个是。我们获取这个排班的这个信息。这个写一下啊，获取可约的。排班的信息分页，下面是根据这个日期获取它的详情信息，所以现在我们在里边把这两个接口做的定义，然后定义之后在筛里边我们写入它相关内容，那我现在把这个代码给各位复制过来，我们来看一下里边的具体内容到底是什么。那我们来看一下啊，咱们从上往下来看里边的这个内容。我把这个复制过来啊。然后咱们看到啊，在这个内容中呢，主要我们有这么些信息，然后信息中咱们详细看一下啊，我们从上往下看啊，首先最上面部分是咱的超链接部分，包含你看里边有预约挂号，预约详情等等这些内容，然后下面一些基本值在中间的这部分会显示咱的信息啊，包括我们这里边就有这些号源信息，什么剩余数量等等内容，包括这位置咱要做个分页，也就是在这个里边是做个显示，然后大家看显示中，我们这里边用到了这个。

基本信息，然后里边用了一个V-for，把这个booking删掉，List子便利做了显示，然后这里边是它相关的这个内容，下面是详情，包括有上午号源，下午号源，还有其他信息，然后咱看下面啊，下面部分呢，就是咱们的调用部分，首先把JS文件在里边我们引入。引入之后里边的第一部分先通过路由取道传过来的值，这个值我们刚才说过，比如说咱们可以再看一下啊，在这个值里边，我们是通过路径传过来的house code和dp code，所以咱们用这点root.query把两只是不是取到，然后取到之后用这个方法得到我们的当前这个日期。

得到之后呢，我们调这个get booking筛掉入调用咱们接口中，刚才我们写的就是这个方法，最终得到可预约的排班信息返回这个内容在上面我们做一个显示啊，所以它里边主要是这么一个过程，所以咱们现在就把这前端快速整出来了，里边一些相关方法。然后整合之后呢，我们下面来做个测试，看一下目前的效果是什么样的，咱们先给他测试一下。而测试的时候呢，因为刚才我们写的接口，所以我把这个后端接口给它重启一下，重启成功之后，我们进行这么一个测试，我们让它先启动，咱们等它启动起来。

好，大家看，现在接口已经启动了，那咱们下面通过页面我们来做个测试，然后在测试过程中，咱也可以对照我们页面中的调用，把这页面我们这个调用过程可以再看一下，那我们现在我们来测试啊，首先来到页面中，我们在页院中选择某一个科室，因为我目前加的数据第一个里边有数据，当然各位可以加更多数据，比如现在我点击这个科室，当我一点的话，大家看在页面中是不是显示了监闻内容啊，然后在内容中大家看到啊，就是我们说的规则，首先这个科室中有这么多号源，就是里边一共是有十天的号源，然后最后一天显示即将放号里边这个内容，然后比如说大家看当我当天时间，比如说咱们现在时间已经超过了，这个就是停止挂号了，那这里边不能挂号，里边就有不行显示，比如咱们选择这一天的数据，你看这里边是正常显示了，包括有上午号源，下午号源等等信息。

咱们点击这个剩余数量，可以把它进行挂号，这咱一会儿进行实现，所以现在这个页面效果做到了，包括你看这位置是不是有个分页。所以大家把这知道啊，而在过程中大家看，当我点击最后一个就是即将放号，那这个是不是还没有号，大家看当我一点的话，你看里面做了什么，是不是有一个倒计时效果，告诉我们多长时间之后，这里边可以进行放号，每天八点半放号，里边做了一个倒时效果，所以这就是咱们目前做的这么一个获取可预约的排班信息显示，咱们把前端完成整合，然后整合之后各位看一下我的页面中，在页面中的调用，刚才咱们看到了这个地方，这个地方是做了一个分页。

包括这里边显示我们的内容啊，这是显示你的这个就是相关的信息，比如用这个find的筛掉例子的，咱们调用里边的这个方法，然后这个方法呢，是调咱们刚才写的第二个接口，获取里边那个信息，比如说你的上午号源，下午号源等等，就是这些信息是咱调的第二个接口进的显示，然后除了这个之外，咱们继续往下看啊，下面就是获取当天日期，然后这里边是车的样式，然后各位看这个部分。这个部分是什么呢？就是我刚才说那个倒计时效果，比如说这里边我们做了判断，如果说当前时间它里正在就是有耗，那我们进行操作，如果说已经超过时间，我们就停止挂号，如果说现在我在最后一天里边即将放号，那咱显示是不是有一个倒计时的效果呀，所以这一个代码做的就是倒计时，包括判断这过程大家把这个它知道，所以现在咱们把这个就是获取可预约的挂号的这个排班信息，我们就完成了，大家把这个前端给它快速整合就可以了，重点还是放到我们的这个部分。

然后这个做完之后呢，大家看啊，咱们下面各位数要做什么，是不是要做挂号，也就是说我现在点击某一天的这个信息，这里边是不是有这个剩余的数量，比如说选择某一师，我点剩余这个按钮，那咱对他是不是要做一个预约挂号啊，就目前咱没有写啊，所以咱一会儿就来把这做到，当我点击这个剩余这个按钮，然后这里边可以做这个预约挂号信息，这里边呢，我这位置写了一个方法，这个方法叫这个不IE。那我们来搜索一下这个方法。然后这个方法中就是我们你看啊，是不是剩余点击里边这个按钮，然后最终要做这个就是真正的这个挂号的部分，所以咱们一会儿把这个完成，目前是把这个接口和前端整合出来了，咱们看到了我们想要的一个结果。

这个那就完成了啊。