00:00
接下来我们细化一下订单页的收货人列表信息,首先这一块的内容我们查出了所有的收货地址,我们需要选中某一个收货地址以后,来最后计算出一个运费,然后要参与我们的总共价格,当然运费的计算呢,可能非常麻烦,我们在这儿就写简单一点就行了。当然我们这一块的收货价格,我们先来完成我们的页面效果,那页面效果呢,我们先让某一个人来高亮,哪个高亮呢,来查询每一个收货地址的时候,后边呢都有一个默认状态,如果我们这个收货地址呢,是默认地址,它就是一,否则呢就是零,那么就给默认地址,给他默认高亮,否则呢就不高亮,我们当然也可以点选,点选以后呢再来变高亮,那先来改我们的页面效果,那康放我们来找到我们现在所有获取我们的这一块地址的位置全部在这,然后呢,我们主要看一下高亮的效果,它是加在哪右键来检查元素,它呢,主要是在我们这个P标签上,P标签上。
01:00
那有一个color red,相当于我们给了一个border,我们这个边框,如果把这个边框去掉,那就没有这个高亮效果了,所以我们主要呢,就是给它来加高亮,那为了方便起见,我们给它的复元素,所有div div有多少个,我们都在遍历,来给一个class,我们就叫ADR艾好,然后呢,给每一个P标签来给上一个自定义属性ttr,自定义属性呢,我们就叫default statuss,我们就叫DD的值是Dollar大括号,你们当前正在遍历的这个ADDR,每一个人呢,都有它的default statuss好,我们来CTRLF9先来看一下我们的页面效果,我们来刷新现在呢,每一个这个P标签里边。DEF要么是一,那要么我们来看下边,要么是零,那现在呢,就把一所有的都高亮,零的呢我们都不高亮,所以我们现在呢,来先来编写统一的页面效果,Ctrl end放在最后,假设我们来抽取我们这一块的高亮代码,我们就叫highlight,那么这个高亮代码呢,应该这么来写,我们先来刀乐福小括号,我们先找到所有的。
02:11
这个a DR item,它们里边的这些P标签,先给它置为初始状态,好,我们要按照class找,那就点class它们里边所有的P标签,那么就来找P空格代表子元素,我们来找他们的里边的P,然后呢,我们来改变它们的样式,这个样式呢,我们来写一个大括号样式,主要我们把与他们原来的默认样式给它覆盖一下。比如呢,原来这些P标签都有一个这个borderder,现在主要就来搞改这个borderder,这个borderder呢,现在来加上不高亮的效果,现来默认加上一个不高亮效果,把这一块的值拿过来好,那们现在呢给它默认,比如我们来整一个灰色,没选中呢,就是灰色CTRLF9来看一下我们的页面效果刷新来重新CTRLF9编译一下,那这块代码呢,没有执行,因为我们只写了一个方法,想要让它执行,那就文档加载完成以后,这呢调了好多方法,那我们这个代码呢,也来调一下,好,我们来CTRLF9。
03:13
那现在来看一下我们的页面效果刷新好,现在边框呢,默认都是灰色,选中哪个呢?这个就是红色,那接下来我们想要给它加红色,我们现在就得加选中,而且呢,我们现在默认初始化也选中DEF等于一的,所以们现在呢,还要给我们DEF等于一的这些人,我们加红当了幅小括号,还是我们这个ADR艾它们里边的这些P,但是呢,找到这个P里边DEF等于一这个值的这个P元素。那么现在里边呢,有一个叫DEF等于一的,我们来看一下,哎,这个DEF等于一没问题,我们来给它,当然这个一呢,它应该是一个字符串,好,我们来给它加上一个样式,如果呢,你的DEF是一,你的样式呢就应该是红色的走。
04:06
整一个read,好,CTRLF9,我们现在来看一下默认样式。刷新那好,默认呢,它是选中的,那接下来我们还要做一个效果,当我们来选中第二项以后,第二项是红,其他的呢是灰,所以么,现在呢,要给所有的ADDR来绑定单击事件,好,那现在来点一个ad DR item,但绑单击事件呢,其实点的是我们的这个P标签,所以完全可以给我们的这个P标签这一块来绑单击事件,那就给ad DR item下边的P标签来绑定单击事件。如果他一被点击,我们先来写一个方式,好点击的回调,回调是什么呢?就是如果一点击,我们就要切换这个状态,其实就是把它原来的这个默认状态一改成零。那当前被点击的这个零呢,就改成一,所以我们给当前点击的这个P元素到了幅小括号,当前被点击的这个P标签点一个at t啊,来给它赋值一个DEF,我们让他的这个DEF等于一,我们给了一个赋值,并且呢,我们把其他人的这个值我们都来清掉,所以我们先来清其他人的值Dollar符小括号,那先来找到点ADDR艾它们里边的所有P标签,然后呢,把它们里边的这些P标签的这个at tr deff值,我们先都给它们置为零,如果我们先都置为零以后,那接下来我给当前的人我置为一,置为一以后呢,让他重新把高亮代码再来运行一下。
05:47
那这样至为一的给它亮,至为零的呢,这些都给它变灰,所以我们现在呢,重新运行一下高亮代码,CTRLF9这块呢,大家大概看一下就行了,来测试一下看行不行,我点一下它好,这块亮的,这块亮的好,那都没问题,那么现在呢,能高亮选中,但是现在一选中以后,我们希望来远程计算一个运费,然后呢,运费最终加到这个页面。
06:13
那这个页面呢,也无需刷新,我们只要选择发生了变化,我们发一个Ajax请求就行了,所以呢,我们现在要做的一件事情就是如果我们选择发生了变化,我们就要获取到获取到当前的咱们这个地址ID,因为每一个选项地址都是数据库里边唯一唯一一条记录,拿到这个ID,然后呢,把这个地址ID去来远程来查我们的整个运费信息。好,我们来获取这个地址ID,为了这个方便,期间来ADR艾特来找一下,就在这我们每一个P标签在便利的时候,我们再来写一个TH给这个P标签呢,再来给一个自定义属性,这个自定义属性。我们把它就叫a t drd,我们这个地址的idd,址的ID的值到了F大括号,我们就直接取出ADD里边呢,肯定有这个ID,好,我们来CTRLF9,那这样的话我们就能找到当前被点击的这个P标签Dollar this,这是当前被点击的P标签,然后呢,点一个ADR,那么就来获取到它的叫a drd address ID。
07:29
然后呢,我们就来alert看一下我们的这个ID值,我们到底是选的是哪个CTRLF9。我们得获取到我们当前选择这个地址的ID,我们来试验一下,来点一个它,那我们选的是二号地址,点一个它,那就是一号地址,那当我们来选了二号地址,我们就来发远程请求,所以我们接下来这个地址的ID就算是能找到了。我们就叫ADD rid发一个addrid,好,那接下来我们就来发送aja请求,发送Ajax获取运费信息啊运费信息,那怎么获取运费信息呢?
08:09
那接下来我们要做的就是我们希望呢,远程有一个接口,假设呢,我们把这个运费信息的获取,我们就写给我们的库存服务。好,我们在库存服务里边,我们来加上一个接口功能,我们就直接来到我们库存info,我们仓库info的这一块CTRL了,好,我们来加上一个功能,就是获取一个运费public r,我们来get fair,这个呢就是我们用来获取运费信息的,好,我们来直接return一个我们这个R,点一个OK,那真正的运费是多少?来写一个这个get map来处理一个get请求就行了,那现在呢,就来获取fair,获取我们的运费信息,来获取运费信息,你首先得告诉我你的这个收货地址在哪,我要根据这个地址呢进行计算,来一个request per,这个power呢,我们就叫ADDRID,收货地址的ID,然后呢,我们来经过这个来进行一个计算就行了,走点一个比如我们聚焦get fair来获取运费,把这个收货地址传过来,最终呢,得到。
09:18
一个运费,比如我们就叫贝decim,我们最终拿到我们的运费信息,然后把我们的运费信息放进去,点一个put,我们就叫data,我们之前呢有一个set data方法,点一个set data,好们把运费信息呢直接保存进去,那现在我们就希望有一个计算运费的方法,好这是根据收货地址计算运费,根据根据用户的收货地址。地址计算运费。好,那我们把这个实线来添加上。那现在我们这个计算运费,既然有了这个收货地址,那我们想要计算运费呢,我们肯定得查看收货地址的详细信息,所以我们可以先来查到详细的收货地址,按照ID,那所有的收货地址呢,又在会员服务里边,那么现在来。
10:13
写一个我们远程的会员的份service,那么现在呢,就来叫member份service,好,我们有一个远程调用,这个远程调用一个分client,我们从远程的这个会员这一块,我们来获取到它的整个收货地址。那我们希望呢,有一个收货地址的方法,那这里边儿呢,其实都有这个最简单的,我们自动生成的里边都有收货地址,直接按照ID获取他信息的,我们直接拿过来CTRLC,我复制过来,来到我们的这个方法,那然后我们把这个这一块去掉。我们来加上完整的路径,好,这一块完整的路径应该是在这来找到会员的这个CTRL,好,我们把这一块完整的路径来复制过来。
11:05
走,那么现在这个库存服务就呢,有能力去来获取我们远程的这个收货地址详细信息,好,那么现在呢,给库存服务注入我们的这个phone service会员的份service owaar这个份service呢,我们也写了调用远程的这个方法,然后让他来帮我们来获取这个信息,走点一个直接我们这个方法里边呢有一个info。这个ino传入ad tri,我们这个ino呢,我们就来改一个名,我们就叫ad ino,我们收货地址的详细信息,那收货地址的详细信息我们拿到以后点一个get,我们有一个叫ad DR ino,把我们这ad drd传过来们拿到一个收货地址详情,那这个收货地址详情里边R里边我们就可以get data,因为他给我们返回的这个收货地址,我们可以来确认一下,那现在的这个member,呃,Address received,这个controller,他帮我们返回的这个收货地址呢,他最终放的是一个这个实体类,当然这个实体类呢,我们之前专门来写了一个VO跟它同步。
12:19
那我们这个VO呢,好像是放在了订单里边,我们直接复制过来吧,我们把这个VO收货地址的实体类,好把这个收货地址呢,我们放到这个VO里边,所以我们接下来远程调用,那最终呢,就会得到我们这个收货地址来到我们的service。我们service呢,可以get data的时候获取到我们的这个收货地址,我直接有一个type reference,我们这个收货地址,因为我们是精确查询,所以只有一个收货地址能得到,然后呢,我们把这个收货地址信息拿到,我们拿到这个信息想要计算运费,如果data不等于空,好我们现在呢想要计算运费,其实运费的计算我们需要调用我们的第三方接口,那这一块呢,就来简单处理一下,我们也不做这么麻烦了,大家如果想要调用去,可以来结合所有的这些快递物流相关的接口来调用就行了,我直接把这一块的信息拿到,我来拿到一个这个东西叫我们用户的手机号,把手机号的最后一个数字,我们就当成他的这个运费信息得了,好,我们这个手机号点一个sub string,我们要来截取,截取呢,我们现在这个subs string,它的传的这两个参数,这两个参数begin index它。
13:39
那它包含我们开头,呃不包含结尾,所以我们现在截取,假设呢,我们现在有123456,我们这个手机号呢,叫123456789,我们把它呢当做我们的运费,那么现在要截取,就是呢,从我们这个长度,长度呢应该是九位。从我们这个长度减一开始,那九减一,那就是八索引的八,那我们的0123456788呢,那就是最后一位了,所以呢,我们索引减二,我们当前手机号它的这个长度Les,我们直接呢,Les减一个二,Les减二呢,那就是倒数这一位,它说是包含,所以呢,我们论S减一,那就是我们这一位,从论S减一截到Les,相当于我们来截最后一位数字,作为我们的运费,好,这就是我们的运费,然后呢,把这个运费我们直接来返回走,我们直接一包装得了,我们就简单的来写一个运费计算,好这是我们的运费,那现在我们就有一个远程方法能得到运费,当然我们页面呢,要发送我们的远程请求去来调用我们这个方法来点过来,所以我们现在页面直接来发这个请求就。
14:59
行了,那现在来到我们的confirm这个页面,来找一下confirm页面,然后发AJS请求,我们导入了杰克瑞我们要发的这个请求,我们来确认一下这是一个get请求,所以我们直接来Dollar get Dollar点一个get我们请求的地址来注意。
15:19
因为我们有网关,所有请求我们都应该发给网关,所以我们的地址应该是HTTP冒号,我们直接发给鼓励mail.com,这呢就到达了虚拟机,虚拟机呢会将请求转给网关,然后呢,接下来我们就来叫APIAPI下的什么,所以呢,他接下来就会把我们API下的所有请求转给我们指定的一些东西,比如我们来看。我们这个网关的这一块配置,那现在相当于库存服务里边有这个常人请求,好网关里边我们如果要给库存服务发,我们就叫API where,所以我们在这呢,就叫API where,下边的什么,接下来我们的整个完整路径,那就在这儿,Where where info的这个fair,好把这一块拿过来。
16:08
这一块有两个where,一定注意我们的第一个where,第一个where,那这是我们用来做我们路径匹配的,然后我们会截串,相当于把API以前的截掉,以后的保留,那所以我们这个where呢,应该只保留一个就行了,好,我们API where where info,我们先来得到运费,那这个运费的方法叫fair,好,现在呢,带上一个参数,这个参数呢,我们就叫ad.rddd rid等于我们指定的值,好,我们来加过来,如果我们这个成功。如果我们成功的执行了这个AJS请求,来整一个function,那么就能拿到服务端响应的数据,Data,这个数据呢,我直接在控制台给大家打印一下,好,我们data,那么现在来重新来启动库存服务,那么这个库存服务呢,我们来添加了一个接口。
17:06
来库存服务来重新启动,我们库存服务呢,现在多了一个接口,这个接口呢,要去来调用我们的远程方法,我们远程的a DR info,这个里边之前都有,那先来测试一下。我们来打开控制台,我们先来刷新,好,我们现在页面呢,已经刷新完成没问题,那接下来我们就要获取运费,那现在这一块的运费,我们现在来点上一个,比如说我们来点第二个,好,我们看到了第二个。我们来看network有没有发我们的运费请求,我们来点第一个走。那么发现这一块呢,没有发任何请求,我们把这一块都来清空,来点第二个走,那没有发请求,我来这儿确认一下,来到页面,那页面我们来写了这个数据,CTRLF9页面就得重新编译一下们来重新刷新,我把控制台这些我们先都来清空好,我们来准备要发请求,来点第二个地址,好,我们第二个地址呢,得到了我们的这个data塔数据,这一块data数据是now,那说明我们这个串截的还不对,我们来到这一块来确认一下好。
18:14
我们重新来测试一下,我们以debug模式来启动,好,我们现在呢,先来禁用其他的断点,我们现在只留一个,就是我们库存的这一块来计算运费的断点。那我们现在来重新来做一个计算,我来刷新页面,我们让库存服务呢稳定起来,现在我们来发一个请求,点好,那来到我们的库存这一块,我们的debug就应该进来,我发现这一块没进来,那就说明这一块都有问题,来重新来测试一下,来点好,现在来到我们这一块,我们r get data,我们要获取数据,走来看一下我们的data里边的数据,整个data这个东西呢都是空的,所以我们拿到的data数据是空的,但是这个R对象我们来看一下,R对象呢,返回的是零,确实呢是成功的member receive address,哎,我们也有这个K值呢,是这个东西,所以我们发现我们现在要获取的数据,它的这个K啊叫member receive address,我先来copy value,那么就在这来要获取的这个值就不叫data了,我们有一个指定的K。
19:22
就是它叫member receive address,走,那这就是我们这个会员的这个controller,他当时在查的时候给我们放的,好查的这个in房来放的就是它,诶是这一块的问题,我们来放心,那现在来重新启动,那这一块呢就没问题,那现在就能查出我们的这个物流信息了,那现在这个物流的这个运费,我们接下来就要展示到我们这一块,那接下来我们就来。得到我们页面的运费信息,我们先来测试一下,好,我们现在来重新来测试。我们来刷新这个页面。我们把控制台呢,先来清空这一块全部清空来重新刷新,走下我们这个页面呢,有数据,我现在准备来切换看一下我们的运费计算。
20:06
来点一个点第二个好,我们得到的这个运费那是九,那说明我们的运费那就是九,那接下来把我们的运费内容就要放到我们运费这一块,CC来到页面找到运费这一块control v,好那现在呢来找运费,运费,那么运费呢显示在这一块,那么运费呢,现在是多少钱?那么给这呢,直接来给上一个ID吧,因为全页面呢,就这么一个元素,比如我们给这个元素给上一个B标签,加粗标签来让它明显显示ID,这个我们就叫fair,我们这个运费的这个element元素,好我们现在找到它,我们只要呢请求发送成功,我们控制台就会有返回,我们来看一下控制台,我们之前的这个控制台肯定就有打印,我们来找一下我们的控制台F12把这一块清空,我们来随便来选上一个,我们来到这一块来进行选择。
21:03
那么控制台这一块呢,就会打印我们这个data data呢就是我们的运费,所以我们现在就应该来到页面,Ctrl end,那现在我们能得到运费,运费的元素是这个来Dollar符小括号来写一个井号,直接来找到它它里边的文本内容,点一个test,那它里边的文本内容就应该是我们返回的这个数据里边。它里边呢,我们来看它还有一个data,这是运费,好我们data.data我们在这一显示运费就有了,我们再来回到我们之前运费的这一块内容。好,运费的显示我们就放在这CTRLF9来看一下我们的效果。刷新。好,现在我们来点一个,第二个我们的运费就是九块,当然这个九块完了,我们的应付的总额也得重新计算一下,那这个应付总额CTRLCCTRLF。那么应付总额应该是在这儿,好在这它的这个总金额的显示,我们原来默认呢,是这么来显示的。
22:08
我们也可以给他给一个B标签。默认呢,还是这么来显示,当给一个ID,我们就叫pay price element,那这个应付总额呢,就应该重新做一个计算好,那现在呢,拿到这个应付总额。Dollar福小括号,井号,它这一块的真正内容,真正内容是什么?我们可以拿到它原来的总额,原来的总额在这。我们来看总商品金额,我们在这儿是有显示的。这是我们的总商品金额,包括我们都是在confirm这个data里边我们有数据的,所以我们直接可以拿到这一块的数据,那我们在GS里边,我们也可以直接拿到这个数据。比如我们在GS里边,我们可以在任何位置双中括号刀了夫大括号先们这个方法,我们拿到这一块的数据,那拿到这个数据以后呢,我们先可以来给他给上一个变量来测试一下,外一个这是我们的总金额,总金额的值是这一块的内容,那么计算后的金额,那就是我们的总金额加上我们的运费。
23:20
好,为了保证它是数字,我们给每一个乘个一,然后呢加上运费,运费呢就是贝塔点一个贝塔乘个一,然后这是我们的总额,我们把这个总额直接alert,大家看一下,如果这一切正确,我们就显示在这个位置好。CTRLF9让它页面编译一下,我们现在来重新刷新页面,好,页面这一块没问题。然后只要我们来切换一个商品走,它的总额是18406 18406的原因是我们这个18397加了一个九,那就406,那就没问题,所么这一块的值是可以获取到的,那么直接呢给它显示到文本的内容。
24:06
那显示进来就行了,好把它CTRLY删掉,CTRLF9。来看一下我们的页面刷新,那现在我们来切换一下,来点一个雷锋阳,那现在的这个应用费呢,就是406,那么再来切换上边,那现在加了运费就是403,好没问题,但现在呢,还有一个小bug,就是默认我们第一次进来这一块的运费我们也得做一个计算。所以呢,我们现在默认第一次进来计算运费,我们就应该是文档加载完成以后,我们直接找到我们被选中的这个P标签,来看一下P标签的这个ADD去一查就行了,所以我们来Dollar符get,那这个查运费方法我们可以给大家抽取过来查运费,在这进行显示的方法,好我们就叫function,我们就叫get fair来查运费,查谁的运费,把这个I dad DR ID给我们一传,然后呢,接下来我们就来调用这个方法来帮你进行运费的查询,查完了以后呢,也能实时显示,好在这这是我们要查的CTRLCCTRLV,然后页面一加载,我们也要默认来查这个运费,走,那查谁的运费,还是查我们这个当前选中的这个P标签,我们可以直接拿过来,这当前DEF等于一的这个P标签的。
25:32
自定义属性DDRD它的值,因为我们现在页面默认进来,我们被选中的DF是一,我们拿到它的D,我们就去查就行了,所以呢,这一块我们把它穿过来放在这CTRLF9来看一下我们的最终页面效果,那最终的页面效果就应该是这样子的,我们一刷新我们的这个页面。它的这个默认运费我们也会查出来,并在这显示,我们来刷新好看一下运费6403,没问题,我们再来切换一个走,我们现在呢,运费9406,你现在运费呢,都是根据手机号算的,手机号固定,运费固定,其他的细节我们后面呢继续再说。
我来说两句