day16【统计分析功能】/04-尚硅谷-谷粒学院-课程详情页显示效果完善（2）

就是下面啊，我们开始注意调用，调用的话你要调这个orders client，所以咱把这个order client在这里边，我们先做个注入。我加一个o private啊，这个叫orders。Client，然后orders client，咱们调用里边这个方法把这做到，那咱来调一下啊。在里边我们写一下。Orders，然后它里边有个方法，这个方法叫by count。就这个方法啊。然后这个方法中，咱们看啊，里边有这么两个参数，一个是课程ID，一个是这个用户ID，所以两个参数咱传进去客ID就是这个。Cos ID，第二个是你的用户ID。那这个怎么得到？各位应该知道啊，咱之前那个用户的信息，就是那个token值是不是都放到了hier中了，所以咱们通过request这值是不是能给它取到，取到之后我们通过JWT的工具类把这值是不是能得到啊，所以我们现在肯定还是这么来做啊，我在里边就写一下啊，后面咱再完善再做判断啊。

那做法就是呢，我先写到这个位置啊，咱通过那个JWT的工具类里边有个方法，这个方法。就是。呃，应该是这个啊，Get member j wt这个值里边我们传一个request，然后它返回到应该就是我们那个用户ID啊，就是他，然后把这个我就直接给他。过来了，通过request，然后加上我们的DWT。从他的hier里边取到你那个用户ID，然后传进去，这样的话啊，咱们把这个做一个调用，然后调用之后它返回是一个布尔类型。这个做到了啊，这个做到之后，最后咱们把这布尔类型给它做一个瑞返回可以了，也反应到我们前端页面中做个判断，那我加个date，比如说起个名字啊，叫这个。

意思坏。后面加上我们这个值，就是它是一个布尔类型，如果你是已经购买，反正就是true，没有购买反正就是false，这样的话，咱们把它完成了，多加的就是这套代码啊，根据你的课程ID和用户ID做个判断，然后最终把这做个实线。所以咱们啊，完成了这么一个过程，我把这个核心代码啊，解到我们这个。涂上来啊。然后细节部分我们之前应该都用过类似的，我就只截这个核心的了啊。主要就是。这个代码。所以现在啊，咱们把这个过程我们就完成了啊。然后各位啊，把这个能给他快速做到啊，就是咱们之前写过的都是差不多的这种做法啊，基本上都类似的。这个完成啊，然后完成之后呢，咱现在把接口做到了，也就是在接口里边，当我们进入到那个详情页面中里边啊，我们就是返回了三个数据，第一个课程的基本信息，第二个课程这个。

就是章节小结数据，第三个课程是否已经被购买，把这三个进行返回，然后都反映之后，咱最后改一下我们的前端页面，把页面我们给他改一下啊，咱看怎么做到，那咱来到页面，页面呢，也就是我们那个课程的详情页面。找到啊，应该就是。详情页面咱看啊，就是这个页面啊，这是我们的详页面，那在这里边呢，咱们把这个给它改一下啊，那说一下怎么改啊，首先就是咱们调这个课程详情的时候，这个接口中它返回值应该还有一个值叫那个is思败，然后咱们把这个is by这个值得到，得到之后呢，在上面的这位置，咱再加上一个判断，就这里边。

如果说那个is SP它是这个处，或者说这个值是零，那我们显示就叫立观看，如果说is SP是false，或者说它这值不是零，我们显示就叫立即购买啊，就这位置最后判断，但是你需要在查询中把那值给它返回来啊，所以咱们就是做这个事情，那下面咱们把这个给他最终来改一下啊。我们就把这个给它圈出来。这怎么改，我要特别说一下啊，各位注意啊，就是这个地方。我们之前讲过，这个代表什么意思？我希望各位要知道啊，咱之前一直说就是这种方式是不是叫异步调用方式，什么叫异步调用，也就是说我们进入页面啊，里边做这个操作，但是你这个接口是不是还要再发一次，然后才有这个数据啊，所以这叫异步调用，所以我们现在啊，因为我们要做的效果是什么。

当我们一进入页面是不是就要马上做判断，就是你一进入页面，在我们的这位置，咱就要做这个判断，所以目前呢，如果说我们这里边判断你课程是否购买，你要写异步调用，他会有些问题，因为异步调用的他可能有的时候有数据，可能有时候没有数据，因为他不是马上就有数据，他会再发请求才得到你的值，所以我们现在要做这个，一进入页面就判断课程是否为购买，你这么写会有点问题，所以咱把它叫做修改啊，就这么写可能也好使，但是它里面因为是异步情的方式会有些问题。那咱怎么改呢？咱就可以把这种方式还是写咱们之前最原始做法，就我一会儿加一个data created method，我把那个方法写到我们的create中。这created各位应该熟悉啊，它表示在页面渲染之前是不是执行，也就是说没进入页面，咱们先有数据，然后到页面我们再判断，这么写肯定是更严格啊，因为咱们现在要实验就是一进入页面就判断课程是为购买，如果你写异步调用，它会有些问题啊，所以咱需要把它做一个修改。

那我们给他就改一下啊，这个先保留一会，咱们给他再改，比如下面我写个结构，咱之前一直写那结构，我加一个叫date。Date里边呢，加上这么一个。瑞屯。然后里边有一些值啊，这个值我就从课件中复制了啊，咱就定义里边的那么几个值啊，找到我的课件中啊，这个位置啊，其实就是我们那个。对象包括集合，包括那个SP那三个值啊，给他拿过来啊，就是这三个啊把这个。直接过来啊，然后名字，呃，我们应该叫这个名字啊，改成它cos web view。这是第一个那个对象，第二个是你的章节和小节那个数组集合，第三个是以SP设为购买啊，所以咱们定义三个初始值，然后写完之后，下面写一个叫create的表示在页面渲染之前执行咱一块把咱们就是显示课程信息那个方法在这里边调用，因为咱们要进入页面就去判断，最后写到这个create里边更合适在页面渲染之前做个执行。

写这个位置啊，页面渲染之前执行，这是我们的第二个，然后第三个在麦里边我们来写完这个方法，也就是把咱们调这个过程写到我们的method中，然后在create里边我们做个调用啊，那咱来写一下啊。就是查询课程的详情信息，里边写方法，比如就叫这个init Co。啊。这个。我们的这么一个方法啊，然后这个方法，最后咱在这个create里边，我们做一个调用。

就是这次点阴。Co info啊，咱们这么来做，然后下面咱做个修改啊，把这个过程放到我们里边去啊，但这个一会儿要改啊，咱们把结构先拿过去。这结构我先给它顺过来啊，这个拿过来，然后在里边我们做调用，就是它调这个，然后最后铝寸值啊，但是这里边应该不是写铝寸，还是咱们之前最原始的方式，那就加上这么一个叫。是不是叫this点上这个名字，因为这个名字在上面都定义了，然后等于我们这个纸啊，包括下面以此类推，第二个章节小节等于我们的这个值。这是第二个啊，然后还有第三个就是他是否购买叫this is by。等于response.date.date点上你接口中反应那个名字叫这个意。

这样的话啊，咱们在这里边，我们就做了这么一个调用，就是先写个方法，然后给它放到我们的create里边，给它做到。这个啊，各位给他知道啊，因为咱们要进入页面就去判断，所以我们写到create里边肯定是更合适，但是这里边还有一个问题啊。各位注意啊，这个应该就不需要了，我先给它去掉，但是目前有什么问题呢，各位注意一个地方啊，这个地方。p.ID咱之前是不是在这里边取那个路由中的ID值，而路由ID值呢？其实我们可以按照之前方式叫这次点route.pid，但是现在这方法其实咱也可以用到在里边咱就做一件事情，就直接我们re成一个值，这值就是我们那个叫Co ID。然后冒号啊叫PID，就是在这里边，咱直接把这值取到，然后下面的可以使用，就是下面这位置，咱写一个叫做。这次点。扣赛地啊，主要是第五个程啊，我再说一遍啊，咱是怎么改的。

第一个在异步里边，咱们不再去调方法，咱就直接把这值得到啊，这肯定可以得到它用PID里边不调方法，就是直接进入页面取这个值，然后这个值取到之后，下面按照咱们之前原始方式，我在这里边写个方法，方法中调接口得到我们的课程相应信息，因为咱们这个只取到了，我在下面可以直接用。包括这些值都得了赋值，然后写完之后把这个加载课程详情信息的方法在created问题要用，因为created它表示在页面渲染之前执行，也就是说我这里边我在进入页面就要做判断，然后再显示，所以咱把这个放到create里边最合适，咱就不用那种异步操作啊，这样的话，我们把这个结构应该就改出来了啊，这么一个过程啊，然后改完之后，咱最后在我们上面做个判断。

那咱判断一下啊，我们就来到。这个位置啊。判断各位看啊，刚才咱的判断啊，只判断价格是不是等于零，那我们现在需要再加上一个叫is by，然后加上这么一个符号。这个我应该知道啊，两个竖线是不是叫或者呀，什么意思呢？比如说现在我这个课程意思BY表示就是处，它是购买或者说价格是零，那咱就显示立即观看，如果说你这里边没有购买，或者说你的价格不是零啊，咱就显示立即观看啊，主要作力判断。已是已经购买，或者说你价格是零，显示利益观看，如果说你没有购买，或者价格不是零，我们就显示叫立即购买，用这个做一个判断，这个我们做到了啊，如果利益观看咱应该不需要生成订单，所以这超链接我们也可以给它先去掉。这样的话啊，咱把这个就完成了一个判断啊，就是这里边当你是免费。

它就显示立即观看，当你是购买也显示它，如果你不是免费。包括你也没有购买显示这个值啊，这个我们做了一个完善，所以咱们把前端也做修改，各位写时注意，这里边就不要用义务请求了，义务请求加在一面判断会有问题，咱给它都放到KT里边，还是用咱们之前最原始方式把这做到。这个啊，我们就写完了啊，然后洗完之后，最后咱把这个效果再来试一下啊，看一下我们最终的结果是什么样，就看一下这个最终的流程能不能实现出来。那咱们最后来试一下啊。我把这服务咱先都启动啊，包括咱看那个。NAS应该目前也是一个。启动状态啊，都启动起来了，我现在重新启动，咱最后测试啊，看一下我们最终的结果。一个启动起来啊，这是orders。

然后包括edu。还有我们这个U3头啊，都请一下啊。这里边啊，还是为了明显，我还是先把表中数据先给它删掉，一会儿咱再重新做这么一个添加。啊，先删掉啊。啊，这里面的数据也先给他。删掉。啊，这些啊应该都没有了，然后咱们啊启动，呃，这启动U3啊，这个再启动一下。当然咱的代码中呢，有很多地方其实可以做一些判断啊，咱一会儿再完善，我还是先把整体流程先走通，最后咱再做一些细节上的完善，先把流程先给它整合出来啊。就是现在这副启动了OSEDU，还有这个u center包咱前端啊，这个刚才也都做了修改，这些值应该都改过了，意思BY这些应该都做到了啊，然后下面咱们把这效果我们就最终来试一下，看一下这个结果最终能不能实现出来啊，那我们来最后试一下啊。

展开结果。那这里边我们看到啊，就是现在我们把这个，比如我重新给他登录啊，再重新登录。我先刷新。在里边我给它登录进去。密码六个一。登录之后呢，现在我点击这个课程进入到列表页面中，然后我点击某一课程到他的相应页面啊，因为现在我表示数据应该都删掉了，里边是没有数据啊，里边没有东西，包括你看order pay paylo啊都没有，比如说现在我点这个免费这个课程，我们看这个详情页的显示。免费你看是不是叫立即观看啊，就是加载慢啊，立即观看这个没有问题，比如说现在我点这个收费课程，这肯定是收费的，因为它没有显示免费，那我一点大家看里边显示是不是叫立即购买啊，这个肯定都没有错，那比如现在我就把这个收费课程咱给他购买一下，看一下我购买之后它会怎么去显示，就把流程咱给他执行一遍啊，我点这个。

有H5这门课程里边叫立即购买，当我点立即购买，它可能进入到我们这个订单页面，在订单页面中，我们点击去支付到我们这个二维码，二维码我现在给他一扫。然后咱们做一个支付啊，我这里给他支付一下。然后支付之后咱们看啊，这里边各位清楚的看到啊，这里想什么。是不是立即观看，刚才我这个没有支付之前叫立即购买，当我购买之后，里边显示的是不是就叫立即观看，所以这样的话效果做到了，比如说我们现在再回到列表页面中，咱再重新点啊，这个H5本来是收费的，但是我已经购买过了，现在我再去点，大家看里边的效果。

是什么，是不是就是立即观看，咱们要的是不是这个效果啊，比如说我们再试一个，这个肯定是收费的，我点这vuee，咱看里边显示什么。是不是立即购买啊，所以这个是咱们要做的效果啊，把这个细节我们就给它做到啊，主要这一过程啊，所以咱们完成了这么一个总体上的流程啊，就是各位按照过程能把这做到，然后这里边还有几个细节给大家说一下啊，我就不在课上写了，各位把这细节都完善。什么细节呢，一个来说啊，咱说第一个细节就是这个地方。各位注意啊，就是现在呢，你看我刚才的过程中，我做这个过程，我这个就是课程，如果说我现在这里边啊，比如说我现在在这个位置。我没有登录，没有登录的话，你再去查的话，这个过程是不是会有问题，因为它会提示说你这值取不到，所以咱这个位置啊，你可以做个判断，就是判断你这个request中有没有那个用户ID，如果说没有用户ID的话，咱是不是就不需要再去查，这个状态就是你没有登录，你就没必要去查，所这个细节各位去完善一下啊，就根据他取到那个用户ID，最后判断，如果用户ID取不到，那你就没有登录，比如没有登录，你可以让他跳转到登录页面，或者说让他就是不进行查询啊，把这些细节给位完善一下。

但是咱们总体流程应该都可以了啊，这个我们就做到了啊，就是关于这个。显示立即观看还是立即购买的这么一个基本效果。这个啊，咱们完成了啊。