00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们做了订单支付这样的一个流程,那订单支付呢,咱们通过呃扫码支付宝支付之后通过轮询,然后呢从服务器里边看到订单的支付状态,如果返回到订单支付状态是二的时候,说明我们已经支付完成,那支付完成了我们就停止了一个轮询查看,然后呢,我们转到了呃订单列表页面,其实呢,我们不应该转到订单列表页面,我们应该转到订单详情页面比较好一些,De de,那这个页面呢,样式我写完了,但是功能的没写了,那这节课就写这个订单详情功能页面,然后呢,传过去的参数呢,我们也不需要传什么,我们呃不需要传状态,因为呢,在订单详情里边,当前这个用户身份,他就能够查到这个订单,对吧,那我们需要把这个订单的ID我们给传过去,我们得接收这个订单ID,然后我们才能处理这个。那订单ID呢,那我们就传一个ID过去。ID,那这里面订单ID是什么呢?你看我们这里边找一下。这个就是我们的订单ID对吧,所以呢,我们在接收订单的时候,通过这个把订单ID发过去,那么我们转到这个页面,我们通过这个查询就能拿到这个ID,然后我们通过这ID查找到具体的详细的这个用户的订单是这样的,来我们再来一下支付流程,因为后边我们还需要写列表呢。
01:20
嗯,所以呢,我们先多支付几个,有支付状态的,有不支付状态的,这样的话咱们都可以从里边获取数据。呃,找几本书,比如说汽车加start,加入购物车啊,然后呢,呃,立即购买这两本书了,购物车里边有一个看到了吗?然后结算在这里边,然后我们现在看,再运行一下这个生成订单。然后获取二维码。现在就是拿出手机。我们现在拿出手机,然后我们扫码打开支付宝这个沙箱测试环境。今天扫码。现在呢,是是130块钱,呃,据说加等一件商品,这是订单信息,然后立即付款,输入密码123456。
02:02
现在换成了。好,你看说我们跳转到这个订单了,但是这个页面我现在写的是静态的,并不是看到这个订单详情,你看ID等于32已经支付过来了,对吧,那我们现在再回到首页。我们再点击一下,呃。再找一些商品,比如说我们现在区块链商品,立即购买就一个商品就行。立即购买,现在有一个商品对吧,我们现在点结算。那会有一个订单详情在这呢,一本书32块钱,游记32块钱,现在我点订单。然后呢,有二维码,但是我现在这支块不想支付,可不可以呢?这块有一个关闭按钮,我可以关闭,但是现在我一点关闭按钮什么效果都没有。对吧,那为什么什么效果都没有,因为我一点击这个订单,其实已经给我们形成订单,只不过我们现在在什么。我们现在一直在这块,呃,轮询查询这个状态呢,对不对。然后呢,我们订单已经创建了,这个已经创建了,现在一点订单已经创建了,只不过点击的是关闭按钮,那我们再支付就没有了,对不对,所以点击关闭的时候,这块我们直接可以把这个框给关闭掉,那我们也可以干嘛呀,其实我们也可以转到。
03:10
不关闭掉,也就是他可以不支付,但是呢,我们也让他到订单详情对吧,是一样的,也让他到订单详情,那我们也是执行一个,这个就是不支付也可以到订单详情。然后订单详情显示的就是未支付的状态,你看现在我已经传订单这个数据已经没有了,对吧,所以呢,我现在。来到首页或者二级页面,我们再买一本书。比如说买这本老板的系数PD。然后立即购买。我这里边儿有一个商品计算。一本书对不对,生成订单,现在订单已经生成了,但是呢,支付信息我不支付,我点关闭也让他跳到什么订单详情页面。当然这个静态页面,那这个静态页面呢,呃,我也给大家写了一个,当然路由什么的你可以自己去,呃,看对吧,跟咱们前面加的都是一样的,没有什么。呃,特殊地方,这是订单详情。
04:00
现在呢,就写了一个这样的一个静态页面,一个结构跟数据显示的是一样的。然后这也有弹框,弹框支付宝这个界面给大家放了,这放的是临时的图件,然后呢,包含我们需要包含的文件,我已经都包含进来了,然后在这里边名称,然后包含的组件,这个就是那个标题那个组件,然后这里面把路由和呃基本的状态都包含进来了,并且把基本状态都返回过去了,那咱们把所有页面需要的状态都写在这个里边就行,然后加载数据在这里边加载就行了。那我们看一下这个页面,我们需要都需要哪些数据,都需要什么状态,一个是订单的详情,我们得拿过来,包括订单的状态,对吧,订单的编号,还有下单时间,然后根据状态去显示各种支付流程的一个按钮,你是去支付还是确认呢?但这两个按钮一起都给你显出来了,对吧?然后呢,当前这个订单的金额和配送方式,那现在显示呢,你可以就显示一个普通的配送方式,当我们,那么当我们呃,确认支付过了,那么在服务器端商家点了发货,在发货的时候会指定。
05:02
使用哪个快递,然后你通过接口把快递信息拿过来放在这块,那这块就是显示商家状态,变成商家发货,然后你这块就能看到配送方式,不然你就写普通配送方式就行,然后这块是商品的一些详情的信息。那我们获取商品的详情信息,我们通过这个订单里边就有一个呃方法得到订单详情,对吧?然后我们获取数据,获取的是包含这个用户信息的数据,当然这里边现在用不上这个用户信息,对吧?呃在然后呢,就是订单详情,订单详情订单详情里边因它包含有商品信息,因为我们在里边都有商品信息,访问的方式也是通过这种方式去访问的,在订单详情里边包含商品信息,我们可以通过呃多种咱们测试这样的接口那。在这个地方。我们看一下原生的这个接口订单。呃,订单详情这这块告诉我们可以包含一个参数,并的这包含商品信息,详细信息,那我们分别看一下,那我们调用这个接口,这个接口,这个接口呢,我们确保在我们这里边已经帮我们怎么了。
06:06
包我们包含进来了订单详情,得到订单详情对吧,那我们在这里边就可以直接使用了,但是嗯,为了让我们这个订单可以页面可以初始化,我们在这里边先做一个con con ST host init的一个方法,这个是我们通常做程序的一个惯用的一个方式啊,包括像我们呃,做这个状态对吧,把状态一起分过去,这样就不用一个一个数据返回了。也是一样的道理啊,所以呢,初始化我们一般的都在这里边,先写一个初始化,然后通过箭头函数我们做一个,然后在这个里边。我们加载数据帽的时候,这里边我们呃,直接加上这个调用这个就可以了,直接iid。这样的话就直接调用,那在多个地方都可以调用,但是我们现在初始化信息,我们回来要等待应用户体验的好一些,我们可以加上什么用,呃,轻提示to as轻提示里边的加载到底对吧,去加载,加载里边两个参数可以是呃消息,但是你可以看这手册具体是什么样的,然后。
07:06
几加?加载中两点。三点,然后呢,我们可以让它有一个关闭按钮。这个。让它去触发去关闭掉就可以了,然后在下边呢,我们加载完之后,对吧,这个处理完加载完之后,那我们就可以再使用,呃,轻提示里边的尔清除一下。粒这样的一个过程。那我们现在初始化的信息就可以在这里面,然后也会显示我们数据加载的这样的一个过程放在这里面。而这里边呢,我们首先要加载订单,肯定需要获取什么,获取订单ID。那我们通过哪个里边获取啊路由我们前面这块已经怎么的,已经这块是路由器,这个路由器是跳转的地方,这个路由是接收参数的,对吧?通过它里边Q接收,接收里边的ID对吧?当然了,我们假如有多个参数的话,我们通常接收参数可以用一个结构,就nst,比如说ID等于这样的话,就直接把这个B项里边的对吧,ID是不给我们就给我们接到了。
08:03
通过这种方式,然后呢,把这ID我们可以把它放到这个呃状态里边,我们生明一个什么生明一个呃订单ID,这样的话我们在所有地方都可以用,在页面上也可以用sta,呃这本身叫的我们是or d no声明一个呃订单号,其实这订单号指的就是这个订单ID啊,咱们实际里边是有订单订单号的,这个你最好是叫订单ID,省得你清楚。先注释一下订单ID,订单ID,然后我们就可以把这个放到我们的状态里边,以备我们后边去使用,状态里边的订单号等于这个ID对吧,然后在其他地方都可以用到这个ID了,就可以了。然后呃,我们现在就可以获取这个,通过这个方法,原来复制的这个方法,你看啊,传递这个ID,我们就可以获取数据,对吧,借因通过res获取我们想要的数据。在这里边就可以了,那我们现在看一下这个res是什么样的rog,打印一下。
09:05
我们先打一下这个LG什么样的啊,你看订单我们现在传了一个34对吧,刷新一下。刷新一下,你看34订单号是这个ID是这个对不对,订单号这个,然后这里边包含的有什么?呃。这里有当前订单的。呃,ID地址ID对吧,创建时间你看这里面都有,然后订单详情,在订单详情里边,你看包含了,呃这订单详情的数据,Date里边是数据。订单详情对理数据,在数据里边我们包含了什么,包含了商品信息,订单详情里边包含商品信息,那我们使用访问的时候就通过什么,通过订单详情里边的DATE0之类的,对吧,就能访问到这个订单详情的里边具体的买到哪些商品的信息都我们辨得出来,那现在你看这里边有订单详细信息,如果我把接口改掉。接口改掉你看的包含对吧,可以使用点的这样的格式,那比如说我们这么去做。
10:01
嗯。这个。那我来上边了,扣回来,然后你看我们的订单详情里边,如果我现在把这个改掉在这个里边。在订单,嗯,我们的接口里边。网络里面在订单O的O的这块,假如说我们这块把这个去掉,把这个商品信息去掉,但是我们还需要商品信息,那你可以这样去获取用户信息,商品信息,这样的话我们再来看一下数据,再来看一下我们数据刷新一下。记错了。刷新一下。你加载之后还是定在ID这块看不出来什么,那我们现在点击一下,你看是不是这块就有直接有商品信息了,在这这个地方跟他平级的,这就有了地址信息,商品信息,对吧,里边有一本书用数读的方式嘛。对吧,然后呢,在订单详情里边就不包含这个商品数据信息了,那我们看哪一种数据信息便利,数据方便,你就使用哪种,是把它放到订单详情里边,还是跟他评息,那我们我比较喜欢的是把那个商品就是订单详情里边去包含商品信息,所以想在订单详情里包含商品信息的话,我们就这样去写。
11:15
第二,Gods。这样去写就可以了。我们刷新一下。这样的话,我们获取数据,就把这个数据放到我们订单里边,订单里边的data里边,然后呢,数据里边又包含了什么这个商品信息。是这样去做的,这一个格式,咱们要学会使用这样的接口,接口里边帮我们把这些都想到了,所以呢,我们使用起来就非常的方便了,那平台详情,如果我们想在页面里边使用这个订单详情,对吧,那你看我可不可以直接这么做。直接这么做,Sta这里边我们加一个逗号。逗号给分割开,再加一个,那我们在这块声明一个bet I订单的详情,那订单详情呢,它是一个对象,那我们给一个空对象,你假如我们这么多给个空对象,然后我们在这里边。
12:05
将这个ST。Det,如果这么去给你看,咱们前面不都这么做的吗?对吧,是没问题的,但是我们在用的时候就比较麻烦了,你比如说如果我直接用订单里边的信息可能没问题,比如说直接现在能复值用为已经复制了,你看啊,如果我现在就访问订单的状态,对吧?已支付啊,或者确定啊,比如订单编号吧。那我们使用什么det返回里边就有一个什么,就有一个呃订单编号对吧,就是里边是or DR订单里边的no,这是订单号,不是订单ID,如果这里边直接写ID是订单的ID,我们现在要的是订单号对不对?Or DR里边有个no订单号,你看一下可不可以访问得到,我们刷新一下。嗯,没有加什么,没有加上。因为我得加上差值的方式才能把数据放进来。
13:04
你看一下会不会出错。你看不会出错,然后先放上去,然后显示这块对不对,但是有的时候我们再往里层写数据的时候,你比如说这个订单编号里边,呃。得找订单详情,得便利这个订单详情。在这块我们做一个便利,你看啊。在这个地方两个,我们留一个。我们先遍利一下这块啊,先讲解啊,暂时先这么写一下,你看便利订单行型这里边的每本书V啊便利便利的时候inin detl里边咱们是不是有or订单的det订单详情对吧,便历里边的D数据是不是便历里边的每一本书。对吧,店里里面每个数据,那这个数量就在订单里边,本身就存在,那我们直接加上,当然我这块得加一个什么,别忘了加K这块得加上了。然后it.id你看,然后我们这个数量,数量呢是呃,在订单里边,它本身就会有一个。
14:08
这样的。购买的数量。嗯。一般的爱。在这个里边,因为咱变的是这个里边的什么date对吧,变离这里边date的,然后这里边是不是就有一个什么am数量购买一本对吧,每本书买的数量,所以在这块得加上这个,那我们直接惦记的是这里边的date对吧,Date里边叫什么。呃,It。呃,里边的nu是这样,当然我们这里边儿最好是。写这个吧,然后价格。价格我们这块写上什么呢是。呃,It t emm里边每本书的价格P,不是说所有的那个书的价格啊,然后呢,呃,全场包邮,咱们就留在这块,然后这标题每本书的标题item里边的什么,是不是得找里边的date里边的商品又一层了,对不对,商品里边的T。
15:04
IM就便到这个详情,详情下面能包含的这个在接口里边,刚才给大家看过了。都怎么包含的对吧,所以呢,我们在这块通过这个获取这个标题才可以,然后做这图,做这图呢,就得商品图片,那肯定也是在这里边,Itm.gods里边的Co下角线,Ul肯定也在这块,对吧,那现在我保存一下,你看我刷新一下页面。先把这个清除掉,然后。你看现在这块没问题,抓紧。你看下边有问题了,出错了对不对?刚才为什么没问题,现在就有问题了,你看这边提示我告诉我date没有定义,为什么呢?想象一下我现在写的这个结构,我们声明这个响应式的这个状态结构,我们只声明到这,那么在初始化的时候是用在挂载完之后显示的,那页面执行的顺序是什么先。会执行这个setup,执行的时候对吧,会创建这个模板,创建模板的时候其实已经在读什么了,在读这个数据了。
16:04
创建模板的时候,已经在读这些数据了,在读这个东西了,对吧,那我们在读这个数据,读完了之后,他读的时候出错了,然后我们后期才什么才在初始化的时候忘的时候才把这个里边的数据。拿过来给他,他才有这样的格式。清楚吗?所以这是异步处理后取的数据,但是我模板里边已经开始先遍历这个数据了,所以这数据里边没有这样的格式,所以出错。所以我们在写程序的时候,如果有多层这样包含的时候,大家一定要注意一点,也就是我们在初始化状态的时候,先要把这些格式什么东西全给它写上,比如说date里边,他不说现在缺少date吗?我可以让它为空,但是呢,不能没有这个格式,要知道执行顺序上来就先。模板里边先便利的它后取的数据,它才有格式,这是响应式,然后响应式我们取过来数据,它就把数据再更新上就行了,所以这里边加上一个。对象里边加上订单的啊,详情dets订单详情里边我们是不是便辑它里边有个date是一个数组啊,对吧,给个空数组,它不是找不到这个吗?这样的话就可以让他找到这个对吧,然后我们现在。
17:11
再刷新一下。你看页面就不会出错对吧,然后呢,你刷新一下页面不会出错,刚开始数据是空的,加载中对吧,加载完之后数据放上来,就把这个原来的内容给替换掉了,但是这里只有一本书,那就显示一个这本书就可以了,是这样的一个过程。那除了在这里边我们获取这个,呃,订单的状态之后,当然我们获取初始化这个地址信息,你现在还初始化不了,你得根据这里边现在订单的状态,如果是已支付的,对吧,我们得单独获取那个支付的地址信息,支付的那个物流信息之类的,对吧?嗯,不要在这里边直接去写。你可以呃,通过那个判断单独去获取,如果有支付状态,然后呢,我们获取这个支付的信息,如果不是支付状态,我们的支付信息是什么样的,您可以分开单独具体。
18:00
都是一不请求的嘛,这会就不跟你讲了。嗯。在这里边儿其他的咱们现在就不需要了,那咱们得做一个计算属性,咱们得算一个什么呢?这里边儿上面这些东西咱们得一个一个获取到。比如说。这个。呃,支付状态。支符状态,我们得获取到不能够用这一个变量,我们得变成什么,得变成一个字符串,然后我们通过计算属性之类的把这个给我们做出来,Sta us状态的字符串stringing。从上往下吧,订单状态,然后订单编号,订单编号都拿过来了,这个订单的创建时间咱们也有也有会也拿过来。先把几个需要计算的,咱们都把它算出,算出来det通过这里边C创建时间,一般呢,咱们在服务器里边的下单时间,就创建这个订单的时间都是用这个对吧,这样的话,我们在页面里边就有这个,呃。应变状态还没写呢,没有这个变量对吧?诶,但是创建时间应该。
19:02
出来。嗯,Det列算b.create at GR t。T t read过去式创建的,那创建时间对吧,咱们刚刚创建的这个。然后上边的订单状态,我们用计算属性来完成,那我们呃,做一个计算属性,在下边就不在这里边单独去做了。做一个精算属性,那计算属性,那我们得知道是通过哪个订单对吧,得通过哪个来计算出来的,那我们可以通过这个计算或者是。呃,我们可以在哪呢?可以在这个里边获取便利的时候,获取这个数据的时候,对吧,我们这里边直接能找到这个订单状态,你也可以直接去处理就可以了。当然单独的你做一个计算属性,呃,不是不行的,那我们就还是在这块单独做一个计算吧。初始化计算在这个下面。
20:02
这里。Cost做一个订单,咱们要的状态,STT,呃,Us ST tys t,我其中声明的是状态的一个字块,这个在上面,然后我们通过计算属性啊,Comp在这里练,然后。大号这块。嗯,Let,声明一个,我们得把这个状态给我们声明出来,因为它有好多种状态,Status状态,咱们把这个状态都拿过来。在订单详情里边。提交订单,订单列表还是哪个里边啊,给我们标注了这块订单的状态有这么多,一是下单收货过期对吧。这里里边咱们就按他这个呃顺序,我们来,我们加上这个。一会再让。那我们通过既然下标一开始的,那么说明数组,那第一个我们就空过去对不对,然后呢,我们通过跟这个数下标数量对应的去哪,比如说一就是已下单已下单。
21:02
然后逗号。符号。括号括号括号,然后二这块咱们加上是呃,已支付已支付支付,然后这块加上等待30发货嘛,咱们就等待发货。等待。发货,然后40块收货,咱们就点确认收货。然后这块呢,过期咱们就写已过期吧,已过期。生命这样的一个速度。然后我们通过什么,通过订单里边的状态进存属性,通过我们这会不把这个,呃,所有东西都放在收到这个订单的详情,通过这ID。已经放到这里边了,对不对,所以呢,我们就可以返回ST这个状态,然后我们在这里边加上通过s sta里边有一个betl,它里边有一个呃,状态码订单详情里边ST。
22:02
就在我们的。这个里面订单详情。用单详情直接里边有没有一个变量,你看有个状态嘛,对不对,不用往下层的,就它本身这块就有一个这个状态嘛,呃,Staus返回,然后我们将这个字符串,我们得通过这里边扔出去。才可以。来我们看一下页面上看已下单的,这是已下单的这个状态,但是没有支付呢,对不对,已下单的状态。然后我们再把这个商品的价格这个也写一个计算属性这个价格。我们也写一个计算属性tost,说明一个TL这块来,再来一个计算属性可以写多个吗?等于。Com pud,这里边我们加上。这个。这样的话,我们就可以把这个,呃,因为通过里边获取每一本书,获取每一本书,然后呢,我们遍利这里边每一本书,就可以把这里边儿的价格全汇报,对吧,那这里边我们还是做一个呃,Ret等于零,然后呢,返回在这里边sum。
23:09
就可以了。然后在页面里边就可以直接用了啊,所有的通过一系列变化需要的值,我们都通过这个计算属性来完成,然后我们现在变成谁呢?ST里边我们获取到的det里边是不是详情里边有一个date,这里边是有每个商品对不对?所以呢,我们便利它it把每一个商品传进来,那存进来每一个商品sum我们都可以加,等于便利它的数量乘以它的什么乘以it。嗯。这块乘以it TM里边的价钱,就每本书的价钱。因为date是代表里边的每本书去编辑嘛,啊PI当然这样最好你通过什么转换一下,当然有乘号,它也是有计算,它也是转换啊,那就不用做了,然后呢,可以把这个再给我们。
24:01
返回过来放在这块,然后我们。把它加到。呃,价格这块,所以你需要显示的就一个一个去加就行了,总体金额在这块。比如说TTL如果需要点点的话,但是咱准备处理这个格式加上什么点零零。嗯,78块点正好对吧,当然这里边我们也可以加上。加上。点零。一本书吗?那也都有了对吧。更新一下看有没有问题。下边没有警告,也没有错误,就证明我们是完全可以的,对吧。那这节课时间也挺长了,那下节课我们再继续把这个订单详情给做完啊,这节课。
我来说两句