122-尚硅谷-尚医通-前台用户系统-手机登录-前端整合（3）

各位大家好，刚才呢，我们按照课件中的流程完成了手机登录的前端的整合，那咱们下面把前端进一步做一下完善，那咱们下面完善什么呢？给各位来说一下，比如我现在啊，在首页面中点击某一个医院，进入到是不是它的详情页面中啊，而在详情页面中，当我们点击预约挂号，下面是不是有很多科室，我们点击某一个科室，要显示他的科室信息，包括排班信息，最终来认证挂号，但是我们在挂号之前是不是要登录，也就是说当我点击某个科室的时候，咱要判断是否它是一个登录状态，如果说它是登录，那我们再进行挂号操作，如果不是登录，我们要弹出一个框，让它进行这么一个登录，所以下面我们就来做这么一个事情。那这个事情怎么做呢？给各位强调啊，其实这个流程很简单，就是判断你的这个cookie中有没有这个值，如果有值的话咱往下操作，没有值的话咱弹个框，但是目前有这么一个问题啊，大家看到因为咱们中间这个页面是不是咱们的医院详情页面，也就是我们这里边的在这个配置次里边这个信号线house code是不是这个页面，而咱们的弹框是不是在买higher页面中，它是两个不同页面，而我们通过hot code页面没法去直接调买head中那种是不是肯定做不到，那这个我们该怎么实现的？当然这个方案有很多，我这里边给大家介绍这种方案，叫做选举试件方案，当然这方案是怎么样的呢？给各位说一下，也就我现在呢，在我这个买head中添加一个监听的登录事件，就是监听一下我当年是否是登录状态。

然后这个事件呢，因为是一个全局事件，那我在别的页面中也能去调用这个事件做操作，这个事件中咱就约定这里边如果说你不是登录，那我们就加一个弹框，把那个登录弹框弹出来，所以咱们的方案就是在咱们的买hier的页面中加一个登录的全局的电灯事件，而加上事件之后，我们在那个医院的显页面中就能去调用这个事件，最终来弹出这个登录框，这是我们的一种解决方案，各位把这个知道啊，就是加上一个事件，然后把这问题最终我们做个解决。

那这个怎么做，给各位写一下啊，首先第一部分咱们先来到咱们的买header中，在买header里边的Js股，咱先引入一个vuee的组件，然后引入vuee组件之后在下面呢，咱们加一个方法，这方法名字。我觉得各位应该记得叫做wanted。不知各位是否知道啊，这个方法什么意思呢？它就表示在页面渲染之后执行，所以咱们把这个监程事件写到这个monkey的方法中，写他操作，然后事件怎么做，我就把里面的这段内容给各位复制过来，它代码就这么三行，但这代码要各位同学能给他看懂，那我们来解释一下什么意思啊，首先第一步我们谬上一个voe，然后这是一个事件，我们叫捞。

然后事件中呢，我们监听里面那个名字叫捞dialo event，然后里边写了他的操作。也就是说什么意思呢？当你在别人页面中去调用这个事件，那里面这个代码会执行，而这个代码什么意思，就表示咱们做这个弹框操作，那大家看啊，里面有一个叫document.get BYD是咱们原生写法，然后加上一个叫log in dialo.click那我们看一下这个log in dialo是什么，咱们往上来找一下。大家看这位置ID是不是它呀，就是让这里边触发这个事件，就是这个方会执行，然后这个方法中，咱们看到它就会弹出那个弹框的那种，这个值变成处。

所以现在我们加这个悬举的事件，然后这事件呢，在别的页面中，咱用这个log in event点上这个方法，然后加上你这个名字，就可以进行这么一个调用，所以这样的话，我们再买head中就加这个事件，然后加上之后呢，咱们在这个hotco中来判断，然后最终让它弹框弹出来就可以了，那我来写一下啊，咱们来到这个house code这个voe的页面中，那我们找一下我是在这个。配里边的hospital中的下划线hospital code。在里边首先我们引入这个cookie，然后引入之后，因为咱们点击就是某一个这个科室的话，它会调用里边一个方法，那我们找一下啊，里边调那个方法，这里应该写到就这个方法，我们叫这个schedule里边传入你的科室的ID，所以下面我就写上这个筛掉这个方法，就是这个方法里边传ID，然后在这方法中咱就判断一下cookie中有没有这个值，如果说没有值的话，咱就让它弹出我们这个就是登录这个弹框。

这个代码拿过来，然后咱们看一下啊，你该并不复杂，你看写法就是从估语中取这个值，如果值不存在，咱是不是就是调用刚才写那个全局的变成事件，就是捞印以问点上这个，然后里边做调用，当你调它的话，这里边那个弹光可以弹出来，最终屡退，如果说你登录，那我们进行下操作啊，包括这个咱一会完整出来，就是我们的最终那个预约挂号部分，所以现在这个代码我们就完成了，就是让我们在这个医院的详情页面中，我们来弹出那个登录的弹框，如果你登录的话，我们就直接操作，没有登录的话，我们弹框，然后进行其他的这么一个内容。

所以现在我们把这个就写完了啊，那洗完之后呢，下面咱们来做一个测试，看一下效果怎么样，我们来测试一下啊，比如现在我们来到这个页面中，我先刷新一下啊，然后刷新之后我们来看一下。各位看到啊，目前是没有登录的，然后现在我点击某一个科室，大家看是不是谈了一个那个登录的弹框了，所以证明咱这判断就生效了，所以现在我们把这个完成了，咱们通过天加一告全局的登录的跌听事件，把我们这个医院详情页面中能够去调用弹框的方法，做到用这个过程给它解决出来了，所以大家知道这种解决方案在实际中也是经常用到的。