00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们已经封装好了订单的网络请求的操作,那这节课呢,咱们按照咱们的流程,呃,地址已经写完了,那我们就开始形成订单了,通过我们访问购物车的时候,比如购物车我们点结算就可以把我们选中的商品,当然我们不用通过参数传过去,因为数据表的状态和我们订单的状态是完全一致的,所以呢,我们在点击结算的时候,先有一个订单的预览。那订单的预览呢,就能够通过根据你的用户的信息,通过后台的购物车表的信息,那跟我们形成订单的这样的一个状态信息。那我们现在还没生成订单,只是形成一个订单的一个呃状态的信息,那我们一点结算,它会跳转到这个订单预览,那当然了,订单预览是我现在呃已经把它写好了一个界面,当然了,所有的交互都没写啊,给大家留着呢,只是写了一个框,跟前面一样,不然这里边有一些样式需要处理,对吧,比较耽误时间,而且不是咱们讲的重点,那重点呢,咱们就是呃如何形成这样的一个生成订单。
01:00
咱们说了不用通过参数传过来,如果接口没给你处理这些,那你需要把选中的订单的这样的购物车里边,选中的购物车的商品的ID,那传过来在这里边,然后我们一个一个查询密码,那这里边呢,都已经给我们做好处理了。只要你是登录信息的,就可把登录信息这个数据给我拿过来。那我看一下这里边。呃,路由里边我给你加好了就不用看了,如果你想看的话,你看一下那个路由信息是如何加的啊,订单预览,然后创建那个附件,现在就写一个空的一个静态页面,那这里边呢,需要获取地址对吧,然后呢,有这个订单的一个详情,计算总价,然后点生成订单的时候,把它加到订单表里边去,是这样的一个过程。那这里面我们获取数据的时候,需要通过你看啊。通过这个订单里边,我们如果需要的话,通过这里边把这些东西都获取到,因为我们点击购物车的时候,他就将我们一些信息都已经保存到这个预览里边了,所以我们直接可以获取到。那我们在页面里边,我们想获取到这些状态的数据,比如说有地址信息的这样的数据,然后有商品价格信息的数据,总价格的数据。
02:07
然后再点创建订单,这么几个方法,那我们一个一个写。我们先获取这个状态,然后先写点界面的,遇到的一些,呃,觉得大家比较难懂的地方跟大家说一下。新状态这里边我们首先呢,肯定是得把购物车的列表拿过来,所以呢,我这里边得声明一个,呃,购物车的列表现在是一个空速度,就是我们购物车选中的那个列表,对吧,得拿过来,然后呢,这里边还需要有地址信息,诶,DD res地址信息我们也得怎么着拿过来,地址信息是一个对象,其他的呢,我们现在暂时不用,那我们现在就拿这两个信息。那在哪拿呢?那肯定是在我们的mountt里边,对吧?通过数据表去拿嘛,肯定在mount里边,但是在mountt里边拿到信息,有可能我们会在别的地方在初始化在用,所以呢,我们说拿信息我们通常在哪里边,在这里边写一个init,一个方法,然后我们初始化数据放在init里边,对吧?所以我们cost init等于。
03:04
一个方法。生明一个方法,ID在这里边去获取,那这里边儿呢,我们加载的订单信息,肯定我们需要一个加载数据的这样的一个过程,那我们看一下在购物车里边我们用没用到。啊,在购物车里边通过这个。我们可以获取到这个。信息,那我们在这块写加载中。就是一初始化的时候,加载数据的时候,我们都加一个这个加载中,然后我们通过我们订单的预览,因为购物车你只要是在购加到购物车里边,其实他已经加到这个订单预览里边了。你选中的购物车,也就是在我们这里边儿选中好的商品,对吧,已经给我们加到预览里边了,所以呢,我们不用从购物车标准去获取。他那跟订单预览的表是同步的,也就是我们这个里边同步的,对吧,那这个方法呢,咱们上节课也给他写完了在。订单这里边儿。订单的预览,所以呢,我们直接调用这个方法就可以获取到数据,那这个调用这个方法呢,那我们前面把订单这几个方法,我都刚刚都把它引入了,所以呢。
04:09
在这块我们直接调用就行,然后呢,他不用传任何的参数就可以获取我们的订单的数据,然后res。拿过来。订单预览,那订单预览在这里边,我们就可以看一下这个预览信息里边有什么LG。线看一下。也就是我们到这里边看一下订单预览。点击结算。在这里边你看。可以有地址的信息,在订单里边有地址信息,它有多个地址对吧,但是我们只要默认的那个地址,然后呢,有什么有购物车的数据,你看订单预案里边有购物车的数据,这里面。有地址信息和购物车的数据看到了吧,那也就是我们可以看接口里边您可以看到。有返回的地址信息,那我们可以用返回购物车的信息,那你还可以返回什么,还有购物车里边存的那个商品的商品信息,都可以在这个订单元里看到,那我们通过这一个res,我们都可以得到这个数据,对吧?那假如说我们想获取地址数据,Ad ress地址数据,那我们就通过res里边的ad res就可以得到我们地址数据,但是呢,我们这块只能放一个对吧,所以从地址数据里边,他给我们刚才看到这地址数据里边两个都给我们返回来了。
05:22
地址对吧,咱们后台有两步给你返回来了,但是这里边有的是是什么,呃,这个是缺什么带一个是缺什么对不对,那另外一个呢,不是缺什么。你看这是零不是全整的对不对,那我们得把默认的地址拿过来,所以呢,我们再去过滤一下,因为它是一个数据嘛,FLT啊过滤。传一个参数就把两个地址对象都传进来,N里边的A_deft确认的这个地址如果等于是。一的话对吧,我们是不是就把这个缺省的地址拿过来,这里边就有缺省地址了嘛,对吧,这是缺省的地址的这样的信息,然后呢,咱们得判断一下,你在页面上不能完全的显示这个,呃,这个地址,那我得把这地址。
06:05
嗯,这个地址我们在这里面说明了这个地址信息看到了吗?然后。我们判断一下,如果收到的这个壁纸的长度。对吧,过滤之后假如一个都没找到,那它长度肯定是零,如果长度等于零的话,相当于我们地址还没做呢,因为前面当时做完是有的,但是有可能用户还没有添加过地址没添加对不对,那怎么办呢?那我们就是。状态管理里边。Res,如果地址长度等于零的话,那我们显示一个,呃。把这个状态里边这个地址信息,我们这块加一个地址信息啊,1.res初始化一个这块写上,呃还没嗯还没有设置什么默认没有地址信息,或者没有默认的地址地址是不行的,对吧?还没有地址信息请选择或者添加对吧?请选择或添加或添。
07:01
或填写地址信息。地址信息。这样的话,我们就在这里边初始化了这样的一个,初始化了一个这样的数据,那否则。如果我们获取到了地址信息,有地址信息。这里边是的格式,所以这块不要加分号。那有地址信息,那我们就让T里边的ad ress,我们等于。因为这个地址是多个是数组,我们返回来的,你看它这里边儿也是什么,也是数组对吧,毕竟是数组,那是数组的话,那我们就取数组里边的。虽然呃,数据库里边肯定确认值只有一个,但是呢,它返回的也是数组的格式,那只有一个,如果有返回肯定是零,能获取到里边的数据对不对,这样的话就加到这个地址信息里边了,这时候。这样的话,我们一定初始化信息的时候,我们就可以应用到我们的呃地址信息了,对吧,那应用到地址信息这块只是获取地址。
08:01
那我可以把地址信息放到这块来,你看啊。这块最上边。在这个地址信息里边,我们看反馈那个。嗯,这个鼠标。打印的知道吗。这能直接写吧,那在状态管理里边已经有这个地址信息了,那在地址信息里边,我们这里边就可以用插值的方式,对吧,因为我们在下边。已经把这个状态里边的所有的数据,我们是不是已经返回了,返回了那我们就可以直接用这个地址信息诶。里边ad ress,那我们可以把地址信息里边谁啊,名字是不是拿出来和电话拿出来,这些都是可以的,对吧,这里边地址信息里边的名字拿出来,然后还可以把地址信息里边的,我上了地址信息里边电话ad res点,呃,电话是p ho,我们刚写过这个地址的。然后详细地址,详细地址呢,那我们可以加上省市区县和详细地址这样的一个组合,当然你可以用计算属性去把这个完成,那如果不用计算属性省市结合的话,那我们这块就直接写吧,Ad res,我们获取到它的省pro啊。
09:12
一会简能写出P啊,然后省哪个省的。哪个城市的地址信息里边as.CI然后呃,Ad re s地址里边的还有曲线Co,嗯。Gun TY,然后和地址的详细信息,也就是ad res里边的ad res地址的详细信息,这样的话我们就能获取到这个省市的详细信息那。这是缺什的对吧,现在我们可以直接点击这个按钮,点击这按钮的时候,这块呢,有一个事件构图的事件,这个我也提前给大家讲好了,一个很简单的一个方法,构图的方法,直接跳转到哪啊,跳转到这个地址列表里边,那在地址列表里边,我们可以修改默认的地址,你看之间。点击跳转到这个列表页面对不对,然后现在是这个是默认的,比如说我把上面做成默认的,我编辑一下对吧,然后到这来保存。
10:09
你看回到这个地址信息了,然后我们再回来,你看是不是这块就变成了这个地址信息了,看到了吧,我们用back返回的吗?那如果你想改变默认地址就可以了,如果一个默认地址都没有,全是空的,那这块就不显示,告诉你重新设置这块,那你就可以再转到地址那块去添加地址就行了。那这块获取地址咱们就完了,获取完地址之后我们还需要干嘛,这块是通过这个方法获取完地址没完事,对不对,那我们这里边还可以通过I里边是不是还有获取,呃,购物车的信息对不对。因为在订单预览里边嘛,它是一次性都可以给我们获取到,所以呢,我们获取了购物车信息啊,直接把购物车信息放在这里边。也就是car list,呃,状态管理里的S里边的car list放在这里边,等于嗯,Res。
11:01
里边的购物车,看购物车什么?返回来的购物车的。CRTS,这是购物车的信息,以及购物车商品的信息啊,你直接购物车里边直接这个地方是购物车的信息,那你还如果想要商品的话,当然这里面也包含,那我们。直接到时候便利的时候,便利这个再往下便利一层,就能便利出它的商品信息,那这样的话,我们把购物车的地址信息拿到了,购物车商品信息是不是也拿到了,那购物车商品信息拿到完之后,那我们上面这块是不是有加载中,然后我们在这块把这个加载中心呢,怎么呢清一下。小点。听一下就可以了。然后我们在这购物车列表里边已经有这个信息了,那我们就可以便利这里边儿的所有的数据了,对吧,就从这个购物车列表里边去便利。那从购物车列表里便利的时候,我们这里边每一个选项,每一个选项是一个购物车,所以在这里边我们加一个V杠负加这个等于。遍历一个itm和index,这个能都变出来,通过in CT list从这里边去遍历,然后呢,我们别忘了加K。
12:08
因为咱们那呃未装e link就是装那个的话,它会提示我们,那我们直接呃JK咱们就用index就可以了。这样的话,他就会购物车里边有几个数据,它就会循环几个数据。你看一下是不是能把我们循环出来,你看循环出来,只不过数据我们没改呢,对不对,那么现在改变一下这里边儿的数据。这里边呢,我们需要改变这个名称,那名称既然是书名,那我们通过这里边IM代表的是每一个购物车里边装的这样的数据,然后既购物车里边的是不是有商品信息,它一经将这个取出来对不对,那我取这里边商品的T标题一定是这样的,然后购物车里边本身它会保存数量。就是这个商品购买多少个,这块是保存的数量,通过购物车里边这里的数据,商品信息这里边去包括这个图像头像信息,头像信息,那头像信息呢,当然了我们可以用懒加载,呃,V-lazy。
13:02
可以用懒加载的,放上itm里边,也是通过商品里边才有这个机器,一般的都是嗯,Co v ul。URL获取这个信息保存一下。这就可以了,然后每本书的价格这块有一个。当然这个你可以把这个变成小一点,然后把这个。这个标签。在这里边,然后itm价格也是在商品里边找到购物车对吧,这个对应的商品,商品里边的P这样的一个关系,我们就可以获取到了,现在我们看一下。你看最后一道了,当然如果后边你需要加上点零零的话,那我们再加个点这块,嗯,连接一个。点。那你最好是用一个函数处理啊。那。过来,诶这家上面。怎么回事?100下面是。
14:02
问题,你说是便利的。点零零。刷新一下。这了对吧,上面原来静态的,你看名称数量,咱们要这样的一个列表就可以了,对吧,当然合计多少钱,那我们还得怎么着,还得整体计算一下。因为我们下边用的跟那个创建订单那个是一样的,所以我们得做一个什么,得做一个计算属性。做一个计算,属性获取多少钱的价格?嗯,在。这块吧。呃,做一个计算属性con ST啊,Totl和我们原来的做法是一致的。com PU这个。总价咱们在购物车里边做过这个,嗯,总价了,对吧,这里边赖sum等于零除定写法return sum对吧,除了这个,然后呢,嗯,在这里边你从这个状态里边ST里边的CRT的通过这个里边的我们便历for通过它,然后itm。
15:08
便利每一项对吧,当然咱们这里边就不用过滤了,为什么不用过滤了,因为。嗯,咱们这里边儿订单提交过来,就是我们已经选中了,都处理好的订单在这里边放回放到这个表里边。对吧。他跟订单选中的是同步的,所以呢,其他也不用说,顾滤哪是选中的,哪是没选中的,对不对,不能管,直接我们加等于PPRS。这里边直接ATM购物车的数量加上per啊,Perlo加上什么就乘上,不是加上数量得相乘乘上。这个呃,It里边购物车里边good这个产品里边的每个商品的价格。这样的话我们计算属性就行了,然后把它计算属性,我们得。得返回去,回一下。
16:03
你看这样的话,我们才能够。在这个地方使用。计算属性这块,这个总价和这块在这使用。当然了,它显示的是什么价格呢?显示的是,呃,按分显示的,咱们得按原显示那乘以100。这样的话,我们就给它变成圆了,你看981,你看12倍系数这个对吧。啊。12份这个七八百块钱对吧,加三本这个900。就可以了,这样的话,我们商品价格这些东西就有了,不知道了。这是获取这个信息这一块,大家容易错的是就是得对后端接口的数据进行了解。因为我们在购物车里边操作的时候,每次购物车操作的时候,他都会给我们已经形成好这样的结构了。形成好这样的结构了,记住啊,所以呢,我们通过订单预览就可以看到,而不是我们,嗯,假如说你以前接触过或者看别人代码的时候,它都是购物车在生成订单的时候,把ID一个一个传过来选中的,然后再一个一个获取,咱自己组织这样数据,不用这订单接口里边直接有这个,非常方便。
17:11
好,这节课我们就呃介绍到这里,下节课我们继续创建订单,这只是预览,还没创建下我们创建订单啊。
我来说两句