00:00
大家好,我是学习园地的特约讲师高若峰,下节课我们做完了订单详情,那我们还差一步,那么可以生成订单了,也可以看订单详情了,但是我们在一个商城里边经常多次购物,那会形成很多个订单,所以呢,我们还需要一个订单列表供我们,呃,每次在商城里边经常看到我的一些支付的一些状态,这些我来管理,那订单列表呢,我们可以通过个人中心里边,通过这个位置对吧,就可以到订单列表,然后可以管理我的订单的各种状态,对吧?比如说没有支付订单,你在这里边可以看详细,再到我们的详细里边,里边再去继续支付,如果收到货款,我们可以在这里边点击确认订单,然后呢,交易完成可以设置这些状态,所以呢,订单列表也是我们购物流程中一个比较重要的一个环节。那这里边儿的知识点呢,如果我们就把订单列表给列出来是比较简单的,因为接口里边已经给我们提供了这个订单列表,对吧,直接呢,我们就可以把所有的订单全列出来,按照状态全卡一分就可以了。按照状态选卡一给我们,呃,去电话就可以把这个完成了,但是这里边呢,我重点要讲的一个知识点,呃,不光是把这个订单列表列出来,对吧,能转到我们想要的地方,最重要的是我们想做下拉或者上拉加载更多,那这个下拉和上拉下载更多,在我们首页里边我们是用过的,对吧,现在网比较慢。
01:20
你看首页里边数据我们通过上拉就可以加载更多,那通过上拉加载更多,看到了吗?在我们分类列表里边,我们也可以。怎么着上拉下载更多,那我们在这里边用的呢,不是我们VNP组件,我们用的是自己下载的第三方的一个组件,对吧,第三方的一个功能模块,也就是呃,Better c来帮我们完成的,咱们两个页面讲了两遍,这个下拉键的更多,其实在我们组件里边给我们提供了像这种它都属于列表,给我们提供了列表组件,可以帮我们完成这种下拉架的用作。所以呢,这也是一个很重要的知识点,不太好理解,比如我们用第三方面不太好理解,但是一旦理解,理解了,用起来比这还是好用的,所以呢,我们就不用再结合其他组件了,这一个组件就能帮我们搞定,你看所有的数据列表的地方,我们都可以用列表。
02:10
包括我们现在做的首页的部分,以及我们分类的部分,对吧,以及我们后边相关产品地方,我们评论的地方,我们收藏的地方,它都需要有分页,有分页的地方就是用列表来加载数据,用列表加载数据就可以做上拉和下拉加载更多,它的功能是很全的,它的原理跟我们前面讲的比C那个上拉下拉加载更多的原理是差不多的。那这个呢,下拉加载和上来下载更多是我们用这个商品列表,呃,讲解的呃,一个知识点,当然了,讲完这个知识点,你可以把前面咱们写过的有列表的地方和咱们还没有写的像评论对吧,像相关产品那些地方你都给它做改成这种列表式的上拉下拉下来更多,那它的基本用法呢,就是。呃,用的一个是list这个组件,那如果是。如果是呃下拉就是往下边。
03:01
拉动的时候在上边下载数据,就是下拉下载工作的话,你可以通过这个组件结合使用,所以呢,我们这里边儿给大家做好的这个页面。给他多少个页面?用到了这两个组件对吧,一个是呃下拉加载更多,本身呢是呃下拉加载更多,是这样的一个情况啊。这两个组件都给大家用了,你看这个是下拉刷新。对吧,那默认的是上马刷新。那。这两个组件配合。你前期呢,就先把这两个组件安装好,我这块已经把这两个组件装上了,对吧,在这装上使用就可以了,然后其他的这里边用的组件就不多了,比如说选项卡的切换。对吧,显现卡和切换,然后嗯,别的再没什么了,那里边做数据的时候,我们用微卡也是我们前面学过的这样,组件这块就显示每个订单的就行了,那我们现在。详细看一下这个上拉和下拉下的更多,这里边。嗯,有几个你看,就是可以向瀑布流滚动加载,用于展示长列表,列表滚动到底部时会触发并加载更多的列表项,是这样一个作用,那基础用法呢,就是。
04:08
这个组件拿过来啊,嗯,在这里边我们加一个。公式吧。省得我们来回切换去看。通过这两个控制。这块你的list的这个组件,通过loading和这个去处理两个变量来控制这个状态,所以呢,在这个列表里边,它已经帮我们生理好了这两个变量,还是看这个吧,你看。在列表里边基本用法,它已经帮我们声明了这两个变量,一个是用V-model绑定的这个变量,所以呢,在这里边也绑定了一个loading,对吧。Loading和flash的两个变量,当组件滚动到底部的时候,滚到底部的是上拉的过程,对不对?那滚动到底部的时候会触发loading事件。这里边是不是有个loading这个事件,那处罚捞ing事件是不是加载一个方法对吧?这里边有一个lo的这个方法,那这里边就开始执行,里边异步开始加载数据,当我们触发到底部的时候,就开始异步加载数据。
05:12
那异步加载数据。嗯,这块啊,有的时候会处罚这个事件,并将处罚这个事件,并将它设置为真。就是在加载的过程中,将这个属性设置为帧。这个捞丁式为真对吧,你看默认是捞丁是假对吧,然后你可以发起异步的请求。那数据更新完毕,在数据请求更新完毕的时候,那将它的设置为甲即可,更新完毕设置为甲,那若数据全部加载完,比如说你有实验数据,实验数据都加载完了,那你不管怎么上拉下拉都不让它加载了,那这个时候呢,你就把这个属性变成真即可,那平时呢,这个属性就应该什么是假,假如说没到底部就是假,就可以上拉下拉,它就可以去加载数据,但是呢,一旦是。有针对吧,它变成针,那就上拉下拉调用它无效就可以了。
06:00
是这样的一个过程,那下拉列表的时候。也就是下拉更新的时候需要他配合,你看他也需要有两个绑定一个这个组件和这个。去处理啊,需要这个处理,那如果我们使用这个参数是否处于加载状态,加载过程中是不触发它的事件的,对吧?是否处于加载状态,那默认值是假,也就是默认不是处于加载状态,对吧?那如果我们是正在加载数据,那我们就需要将这个值变成真。就可以了,它就是去加载事件,当我们把它设成甲对吧,它就不是加载事件,因为它不触发这个。然后呢,也是加载完成之后,对吧,不处罚它实现将这个设置为甲。就可以了。你看这里边儿。默认给我们带来这个方法。加上这个数据的方法,那我们就原封不动的,在我们这里边,我已经把这些初始化,就从这里边全粘过来的,其他的没有变化,全部粘过来的就可以了,只不过在这里边初始的几个状态而已,初始的几个状态。
07:02
那。你看啊,这里边。呃,我们页面一刷新的时候,一刷新的候呢,我们先把数据先放,先拿出来放到页面上你看。我们这里边。使用onload,让它先加载一个初始化这个状态,那我们初始化的状态呢,在这里边将这些刚才咱们需要的这几个变量做初始化了,你看页面一加载的时候就始化执行一下这个执行一下这个的时候去干嘛呀。你看将这个设置为帧是否处于加载状态嘛,对不对。那把它设置为真,让它处于什么加载状态,然后呢,清空列表数据,将这个设置为假。对吧,数据让它都变成什么清空的一个状态,贸易刷新嘛,然后我们再重新再加数据,把数据清空。列表数据。其实就让它不有没有这个数据了,把这变成假,其实这块状态一开始也是假的,但是我们这个既然写成方法,意味着我们需要多次去调用,比如说一切换血银盘的时候也会重处理这个,对吧?让它处于加载状态,然后呢把数据清空,数据清空之后,然后呢,我们把这个设置为帧来表示处于加载状态,让它重新去加载,然后我们加载数据,所以我们在页面一执行挂载完数据的时候,我们就调用这个方法,调用这方法把所有的这些该有的变量都清空,对吧?这些数据列表里边数据都清空,清空完之后然后去加载,用这个加载数据,那这加载数据呢,我们可以加载每一页的时候,可以通过它去加载,多次加载。
08:30
这单独提出来可以什么?多次加载啊,不行。除法重变,然后呢,其实你可以干嘛呀,这俩写在一起也是没关系的,这俩写在一起也没关系的,但是照你的分改加的数据,那我们现在假如说第一次加载,按这个顺序,我们页面一刷新的时候,对吧,页面一刷新的时候就已经调了一下这个方法调过来这些方法已经把数据都给我们列表清空了,对吧?然后呢,呃,里边这些东西都没有了。然后呢,处于加载状态,可以加载数据,可以调这方法,这个方法调这个方法对不对,那在这里边我们就可以先把数据,第一页的数据都拿过来,第页的数据都拿过来了。
09:07
那我们请求第一页数据,我们请求的接口谁呢?我们的请求的接口是订单列表,是这个通过传递参数,参数呢是需要一个对象的格式,接听格式,哪一页的数据,然后呢,什么状态的对吧?包含的数据是有没有用户信息和订单详情,当然我们包含订单详情,这里边我们还得加什么点gods,通过这个去加载,通过这个把数据完全加载过来,对吧?这样的话我们要每个订单它都包含产品信息。我们这里边处理一下,你知道调这个方法,那调这个方法之前呢,我们先需要通过。这个我们先把这个拿过来对吧,封装的网络请求拿过来,所以在这里边,这现在这些结构都是它组件给我们提供默认的那个结构啊,只原封不都拿过来的,那我们什么也没变化,直接通过它请求请求数据,然后。Res,过来。
10:00
这里面拿过来。请求数据通过这个方法,那这个方法里边我们需要存几个参数,也就是分页的信息的参数,需要存三个参数和状态的参数,还有音可录的参数。配置当前是哪页的参数和呃,状态STTS,这是接口里边需要我们提供的啊,我们按照它的规则写就行了,In的参数需要这几个,那分页的参数呢?默认我们在上面已经生命的一个状态,一定在这块把数据模型建好,然后这个是我们的数据列表,为什么要把数据模型先建好呢?因为我们要请求下一页的时候,你得让这个页数加一,对吧,请求下一页的时候让这页数下加一,所以呢,我们先用这个默认的ST然说所有的状态都生命在这个里边,对不对?所以用它访问这里边的配置,先把当前页第一页的数据拿过来放在这里边来。然后。嗯,状态状态呢,咱们可以设置为零,或者是根据选项卡怎么来切换这个状态,切换状态,让页面里边这个状态去变化,那我这块sta里边的。
11:00
ST里边的。嗯。点不是stas把这个拿过来,那包含这里边我们可以包含用户信息,对吧,然后订单de,呃订单订单详情是dets订单详情,然后但是订单详情里面包含商品信息,或我们可以这么去拿,但是用户信息我们用上这里边其实我们要订单详情就可以了,那本身就是拿到订单,单独的一个订单,然后订单里边的详情也拿到了,然后呢,商品数据在详情里边三层。本身拿到的是订单,就不加这财数,拿到就是订单的一个外层订单,那订单里边想看订单详情,我们再拿到这个,那订单详情里边想知道详情买了哪些商品,那么就调这个,所以通过这个就可以拿到三层数据,我们看一下可不可以拿到这三层数据,那我们直接is加rog打印一下就行了。啊,它这里边儿。直接打印这个吧,看一下他这里边应该是有A的数据。你看我们通过我的这里边儿,我的订单可以转到我们这里边来。看一下,那默认拿到十条数据,默认拿到十条数据。
12:03
刷新一下。你看默认拿到是因为它每页显示的就十条数据嘛,咱们应该创造,你看很多个订单了,对不对,那有可能有多页不止十条,你看这是订单状态,有一有二,有支付的,有没支付的,然后从date里边,这是本身订单的数据,然后我们点开任何一个。有什么,这订单数据是不是有订单详情,再点开订单详情里边对吧,这是订单详情里边的数据,那数据里边又包含什么,又包含商品信息,你看这样的结构基层对吧。Date我们就拿到了,所以呢,我们现在想初始化这个数据。有这么几个数据,那我们就可以直接把这个数据干嘛呀,把这个数据直接给这个列表,点LT等于res,点直接给这个列表。现在这个列表没问题,那么后期呢,我们还需要有什么?你看假如我们加载下一页数据对吧。是不是得重新加载一下,是不是得让这个数据跟这个去连接呀,对吧,而不是说直接拿到这个数据,你要复制过来,那相当于比如说你第五页加载第五页的数据,那如果这么赋值的话,就是第五页数据给他了,它里边只有第五页数据了,前四页都没了,对吧?所以呢,我们可以用展开的那种方式,那还可以用什么连接的方式,ST一点,LST里边的con cat连接的方式就是我们加载新的数据,原来如果里边是空的。
13:21
如果原来里面是空的,那么也好办。我们直接连接空的连接这个,那就是这个数据,如果原来里边有数据加载一页,再加载下一页,那我们就可以把这数据怎么的直接拿过来,然后这里边他又说了一句话什么呢。当呃滚动到底部时,会触发捞丁事件,将它设置,为什么设置为触,那如果正在更新的异步操作请求呢?现在我是个异步操作请求,异步操作请求的时候就别让它再处罚这个事件,把它变成假,当我们有下一页的时候再把它变成真,所以呢,这块设计设置完,把这个异步在请求过程中的时候,那我们需要state里边的呃,Loading把这个设置,为什么设置为甲,现在正在异步请求呢?那你不管上拉下拉这个过程你都不要再去异步请求了。
14:07
把它相当于一个开关,我正请求过程中对吧,关上,就像我们正开车过程中把门开开,车停了,就在开车过程中把门关上,车停了再把门开,开是这个意思,那整体的数据更新完,那我们再结束就行了,先不用管这个,我们先把这个数据先拿过来。你的沙拉都可以去有这样的一个数据啊。现在我们数据拿过来了,这里边儿也有这个列表了,那我们是不是就可以把这个订单信息在这列表里边,我们这块已经把它展开返回了,所以呢,我们在页面里边就可以去把我们想要的数据都去便利了。这里边儿我们就可以便利我们所有想要的这个数据了,那所有的订单。这个里边啊。看一下我们在哪块呢?在这个这个里边每一个订单都它有一个订单号和订单的详情,所以便利应该是写在这个地方的,对吧?那这个上面是整个的列表对吧?列表里边是否处罚加载,那下边呢,都是放在这个列表,从这开始对吧?你看收起来是不是到整个结束外层有这个。
15:11
对吧,下拉加载更多的,本身上拉加载更多对不对,是不是这样的一个列表全在这里边,这些是列表里边内容,所以我们要列表里边内容有多份,对吧?所以我们需要在这块V杠负。去便利这个商品数据,那便利商品数据呢,咱们it emit的em选项和这个索引咱们都拿过来,然后呢,当然这块我们得加上。有两个,需要两个,所以我们得加上一个括号,然后in,从这个list我们已经展开了,所以直接可以用list有循环,就别忘加什么配呀,那我们就inex吧,那是不重复的。那这里边儿。遍历这个数据,遍历这个list,因为把list里边的date整个数据过来的,那这里边呢,就直接有什么啊,当然我这块这个括号是我们现在还呃那个没写完啊。刚才咱们已经这个了。
16:02
然后我们现在。嗯,再保存一下便利,有多少数据,就会执行一下这个订单。你看。是不是有多个订单循环有多个订单,我们只要把数据拿过来就行,现在上拉下拉你看。肯定每次下拉的时候。都不止十点,你看还可以继续了,对吧,数据是不是加载更多,也就是他会一直在这怎么的。一直在这块去加载数据,对吧,一直加载数据,当然我们把这个数据。嗯。把这个数据我们。放在哪呢?嗯。看一下这里边打印的,你知道他这里边需要的时候打印我删掉了。这里边需要一个订单号,我们用差值在这里边加上。需要一个订单号,订单号呢,就是IM里边有一个or DR订单no,我记得是这个订单号,你不行,你可以看一下接口,或者看一下打印那个数据,把这订单号拿出来,然后呢,创建时间,创建时间。
17:01
在这里边也是IM里边有个什么,呃,C reed上比少了,写一个D对比出来对不对,这样的话我们看一下每个订单的订单号,它是不同的。刷新一下。你看这里边订单号对吧,九六的六八的给我们随机生成的对吧?然后下一步我们就变利里边的数据便里边数据呢,这有订单和订单号,那数据呢,就是这个卡片,为看对不对,用它便利这个数据,那我们在这块需要写一个什么V-for便利,嗯,这里边咱们就别叫那个IM了,因为这既然属于里边子数据,我们这个sub吧,然后it里边的便利,它里边的跟我们订单详情是一样,Or订单要里边详情,Det ls详情要里边详情的数据。这是第二层对吧。这个订单就是代表的订单详情,那在订单详情里边,呃,我们将这个得加一个K啊,一定要加K,然后sub里边的ID吧,就用这个订单详情里边的ID作为这个K。
18:02
然后数量。就是这个我们购买的一个数量在订单里边,Su就是代表的订单详情里边呢,就有这个商品的一个,我们每个商品购买几个的数量,这边是有这个的,然后商品的价格,商品的价格我们就得到哪去取啊,就得到subb.gods它在下一层,然后PI把这个商品取出来,然后描述全场包邮的,那描述了,然后标题咱们也得到哪去啊,也得到呃,下一层去把它取出来,商品信息取出来,哎,Gods里边的。呃,PI,然后。都变变量商品的图片。不变,我们就是subb.gods里边的Co。所有的都是。这个商品图片拿过来,这样的话我们就把数据编辑完了。我一下。闭管错误。有可能是我们在写的过程中,保存的时候没写完整的时候,刷新也就好了啊,你看现在就订单里面数据都有了,但是你没发现我们在下拉的时候,它一直加载,可以下拉加载更多,但加载的都是这一页的数据。
19:06
那加载的都是这一页的数据。我一直往下滚动,它会一直加载,一直滚动它会一直加载,不会停,那我们再往上拉的时候。啊。你看这数据它都是重复的。一共十项数据都是重复的。他会一直加这个意思,让他用这个,我上完也会。这块加载这块还没有呢。加点光中啊到头了。那现在这块可以了,现在如果我们想点击table键的时候,也就是不是table键的时候,我们这切换的时候,其他页面你看数据没有变化了,对吧,我们是不是得按状态来切换这个,所以呢,我们这块这些数据我们也得去做一下,然后我们再整体做那个下拉,其他下载工作你看。在这块。我们是不是在这地方也得加一个什么,加一个点击的事件。可以的,眼睛的时候,我们应该到on change on change table吧。
20:06
也就是说我们在点击的时候,会让他调用这个方法,调用这个方法的时候默认全部它会这里边有个内幕,这里边有内幕你不加的话,它就会自动把这里边序列号给我们传到这个方法里边,然后这个方法就作为咱们状态号就可以了,所以呢,我们需要声明。嗯,这个方法它会自动,这里边有个内膜,你可以自己去指定这个数量1223的对不对,你不指定的话,它发的顺序012345,那全部咱们变成是零,然后12345标这个方法,那我们声明这个方法。啊,最下边这个都无所谓吧,在哪块都行,Cost声明这个方法,这个方法呢,我们需要传一个name,也就是我们说的那里边的相当于序列号,每个名称的序列号吧,那它不叫ID,它叫name在这里边,然后呢,把这个序列号给我们的状态sta里边的S等于nu,我们先打印一下,你看一下是不是这个name n1.2O几。
21:02
我们先打印一下,你看一下是不是。刷新一下。呃,我们把这个方法写了,但我这个方法给干嘛呀,别忘了。返回去。刷新一下。能没有错误,你看现在点这个,你就看下边变化,二发过四过期对吧,零但数据都没有变化对不对?这里边如果我想让它变化怎么办呢?你看如果想要数据变化,这里边01234,我是不是得把态改变,也就是STT.sts让它等于内,这样的话,我们一点击的时候状态改变01234,也就是这里边状态改变,这里状态改变加载数据的时候是不是就会这个状态改变,那我们请求接口的数据状态是不是就会给我们改变每个页面的状态。我们刷新一下。你看现在我改变待付款的。但是这里边你看变化了吗?没有变化,为什么?因为改变状态了,你觉得你改变状态他就会能重新请求这个吗?不会对吧,所以呢,我想让他重新请求这个的话,我怎么办呢?你看我如果调用这个方法,让当前的这个里边是不是把这些所有东西都初始化一下,然后再重新加载一些数据,重新加载数据,这个lo加载是不是我们这个加载。
22:20
对吧,那这个加载是不是我们这块就重新请求数据,所以呢,我们一点切换的时候一定要加载这个这这块调用一下这个方法。让他可以重新初始化当前这个选项卡的数据,那我们在这里边用这个。点击调用这个就会重新处理,重新加载,光改变一个状态没有用,你必须得用它去切换一下。这块嗯,T ta切断。切换把切换状态,然后到下个页面,从状态每个页面都是可以上拉下拉,下载更多的要完全切换过去,除了状态的法,通过调用这个方法就完全刷新一下就切换过去了。
23:01
来我们刷新一下看一下啊。现在默认的是状态是零,初始化是零,所以呢,这是全部的,那我们看一下待付款呢。这些感觉没有变化,已支付呢?发货的交易的。没有变化,看一下。这里边儿咱们还得需要写一下,如果是加载数据之前,我们调一下这个加载数据。这个初始话他不是真不是假的,我们在这块写一下,如果。如果什么如果ST这块re。这个方法,嗯,也就是这个状态,如果是真的话,是真的话,我们将列表数据都重新清除,让它重新加载。也就是除以加载过程中的时候,如果是真,那我们将ST里边的list,我们让它等于一个空就除以清除到下一页,不然的list子里边是不是还有数据啊,它没有清除肯定还有数据,那我们点击看的时候还是这个数据,对吧,得把它清除一下,清除一下,然后呢,我们再将这个状态。
24:09
怎么在那器状态设成甲?让他再可以重新去下拉,可以去刷新加载数据的。这样也相当于初始化的一个状态,你可写在这里边,放在这儿也是一样的。放在这吧,这个分开去写一下,这个我们看一下,清空列表,刷新一下。现在点击一下待付款的。你看重新加载中对吧,重新加载的把数据都清空了,重新下载了,这里边都是没有去付款的数据,都是没有付款的数据,已支付的。这里面都是已经支付完的,当然我们往下拉的话,可以越来越多啊,发货的应该是没有发货的。那它一直加载中没有,但是一直加载中没有的话,是不是我们得有让他停止掉啊,对吧,交易完成了没有过期的没有对吧,那现在我如果想要这个。都已经被加载了,没有数据了。发货的。
25:01
是是。没有发挥。啊,你支付的这些都是有的,然后呢,咱们点击每一个订单的时候,咱们可以让他什么,这里边儿我们再加一个。需要加一个事件,就是每一个订单可以到订单详情让他去发过去,对吧,所以呢,我们每一个可以给他加一个呃事件。到订单详情里边,那在哪呢?我们可以加在。呃,点击这里边循环,每一个可以在这里边加在这个div上,嗯,加就行。比如说加上,嗯,找个位置加就行,或者你给它敲开去加就行。奥克,比如说我们goto到哪去,那我们是不是得把本身的谁传过来啊,啊IM里边的ID,我得把订单ID传过来,我们订单里边是不是需要一个订单ID啊,对吧,就订单详情里边得通过这订单ID来找这个订单详情,那我们在这里边再做一个方法。在这个方法就直接在下边写了,转到嗯,行情到。
26:05
订单。详情。页到订单详情页到订单详情页我们声明这个就比较简单,只要写个路由,我们去发送一下就行了,Post声明一个go to这样的方法。这样写。需要接收一个订单的ID,然后我们转向这个方法,然后直接用路由里边的P对吧,然后里边写上path pass这样的方法。到订单详情or DR订单详情deg这里边,然后呢?Q,我们需要传一个ID冒号ID2个一样省一个对吧,这样就可以了。这样的话,我们现在每一个。嗯,现在网断了。调整了一下网络,现在刷新一下啊。刷新一下,你看现在任何一个,我们现在点击订单,因为在订单外层写的用这个灰色,它是隔开另外一个订单,那我们点开一下。
27:06
那构图没有一个方法,我们有没有将这个方法,怎么样将这个方法放到。进里边来,这样才可以啊。来试一下。然后我们点击一下,你看就可以到订单详情的状态,那这个没有支付,您可以点击去支付,就可以到支付里边,那假如说我们找所有已支付的,所有已支付的,那我们点击一下。这个状态就确认订单都是已支付的,可以到订单详情。对吧。啊,这节课我们先讲到这里,下节课我们主要是上拉下拉下载更多那个处理。
我来说两句