00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们处理的订单详情处理了一半,这节课呢,咱们接着往下来把订单详情处理完,那我们看一下,嗯,其他的数据展示咱们已经没问题了,那还有这个去支付,也就是在我们下单的时候,如果确认的订单没有支付,就形成了已下单这样的一个状态,对吧?已下单这样的状态,然后呢,我们就可以点去支付,如果是已经支付完了,那我们不能让他再去支付,这个按钮就不应该显示,对吧?所以呢,我们在这里边需要做一个判断。需要做一个判断,在这个位置我们加上你比如说呃,如果得加上V杠意如果什么了,如果datl订单里边的statuss状态等于一的情况下是已下单,在没有支付的时候,我们显示这个按钮,对吧?显示这个按钮,那这个我们也得判断什么时候确认订单呢?得已发货了,对吧,才能去确认这个订单,点t.status。已发货,那已发货的状态是几呢?我们看一下。嗯,这个位置你发货就是你支付完成状态改成二对吧,不能改成二之后你就确认订单对吧,你对方已经发货了,你才确认这个订单,或者是收货的时候你才确认订单,所以呢,等于三或者等于四的时候,对吧?你都可以在这个时候确认订单,三或者四的时候,那三和四这个状态对吧?呃,确认订单你把它变成四,那也就是三的时候你把它,呃。
01:24
变成。呃,三的时候让他可以去点这个状态,但是三这个发货是服务器端去设置的,对吧,服务器端商家给我们设置的,所以呢,我们这块应该是看不到这个等于呃三的时候已发货,然后我们点确认订单的时候,把这个纸变成四是这样的。那我先这块,嗯,假如说确认订单这块,咱先临时做一下,假如说我们已经支付完了,就让他有确认订单,不然的话,这个流程我们现在没做服务器端对吧,没有商家到时候你把这个指标改过来啊。提醒大家一下,然后在这个位置,如果我们点去支付,那我们先是不是得需要调一个,呃方法呀,我们直接点击的时候,可以点击的时候去调用。
02:04
呃,去支付显示,先显示我们的支付,比如说pan。加个吧,显示我们的支付,那所以呢,我们得在这个位置加一个我们的方法。就是显示我们支付的按钮,显示支付的按钮,那这个方法里边,我们可以把那个弹框,因为我们在前边我们做过一个这样的一个情况,对吧,去支付的一个方法。把那个支付啊,二维码啊,轮询这个东西在这里边我们去做,也就是cost上面一个显示支付pan啊叫FN,然后我们用一个解到函数在这里边呢,我们首先就要将这个状态先做一个显示的状态在这里边。嗯,在这块做一个显示一个状态数,嗯,Pay吧,默认让它等于什么,等于甲,这块等于甲,所以呢,我们上边。这个值。弹框这块这个受我们前面得加一个v model这些重复了,然后这里边我们显示这个呃状态受呃。
03:09
Pay显示支付这个这样的话,我们默认的话,它是假值,就是不显示的,当我们一点击这个事件的时候,我们先让它这个给我们显示出来,所以呢,Std状态里边的什么受PY有的让它等于真,这样的话,我们能确保这个框显示出来,所以呢,你看一下。嗯,当然这个方法我们写了,这个方法一定要。加到这个里边。更新一下。Sta不能够读取属性S。不能够读取属性S。哪块有这个属性,刚才咱们那个状态啊,这里边都是用这个状态这个属性,那我们在这里边把它声明一下。因为它现在是不能读取这个属性的,在这个里边,嗯,加上stt us默认应该等于零,默认等于零。
04:08
刷新一下。Sts在19行应用的话,19STS在19行。19号。19号没有用到。ST dat啊,De这是。De,这个状态。核心一下。好可以了,你看现在其他按钮没显示,显示一个去支付,现在我点击这个去支付,你看就给我们出现一个弹框。这个出现一个弹框,当然我们现在还没写这个关闭的对不对,那现在就出现这个弹框,然后我们在这里边就可以获取支付信息,前面咱们是写过了,对吧,通过一个支付的一个方法,咱们前边叫做PAO支付订单的一个方法,在我们这个里边支付订单的。方法。
05:01
嗯。这块需要一个什么,需要我们一个订单的ID和我们一个类型,对吧,然后获取这个,记得在这块创建订单的时候,我们也写过这样的一个方法。创建订单的时候用这个方法对吧,那我们同样把它拿过来,放到我们。这个地方。因为这里边两个阿里云和微信这个图片都是用阿云的,咱们测试使用这个嘛,对吧,所以咱使用商量测试两个都用这个,然后我们前面需要声明一个。两个东西,一个呢是呃A阿里云的AL,呃,I阿里云咱们是空这个二维码的地址,然后呢,一个是微信聊天的,就微信的二维码。也是一个空,把这两个换过来,这样的话,我们一点支付的时候,这块我们才才能获取到这个啊二维码,那获取到这个二维码,因为通过这个去支付,显示这个就是为了获取二维码,获取二维码,那我们就可以在这个地方对吧,我们显示这个二维码src。
06:07
这就不用默认的缺省图片之类的。知道。一个是阿里的二维码,嗯,Al alli,阿里云,一个是微信vch at。这个冒号变增加。这样的话我们再点击。显示去支付的时候,你看会调用这个,然后二维码会有对吧,那我们现在支付这个二维码,现在刷新一下让他回去。啊,那我们现在点,如果我们去支付,是不是我们得得做一个轮询呢,不然的话,支付状态之后我们就看不到对吧,所以呢,在这地方一样,我们得做一个什么,做一个呃,轮询的一个方法,那我们前面这块也做过一个这个轮巡查看。在这块轮许查看这个消息,两秒钟或者是一秒钟这块都可以啊,你可以是一秒钟一做,然后我们这里边儿,呃,传递一个什么呢。
07:03
这里边支付状态,然后传递需要这里边传递一个ID,也就这个订单的ID对吧,通过这订单ID我们直接这个支付的状态,假如我们支付了状态返回就二二的时候,我们停止这个对吧,停止这个,但停止这个。我们就不需要啊。你看这里边。这里面我们直接可以调用,比如说I对吧,可以调用这个I it什么的,或者是其他的方式都可以。用ID。呃,然后再跳给自己,没关系,对吧,跳给自己,或者是直接你定it都行,然后这个如果清除这块,你觉得呃不太稳妥的话,你可以在这里边你再判断一下,比如说因为他不能说,因为它是在北极面,不能总让它这个一直允许对不对,比如说呃状态里边吧,解释这个。呃,如果这个显示这个也就是他已经关掉了,它是不是就甲对不对,是假的话,要我们重新刷新一下就关掉了,是甲我们就确保这个无去执行。
08:06
对吧,是甲这变让他执行一下,那我们就在克里尔这个一下,然后T2把这个修复一下。你可以这会打印下,看一下是否清楚了。然后点rog给打印一下。然后我们现在看一下支付可不可以完成更新一下。现在我们去支付,点击获取二维码,那我们打开手机,我们找到我们的呃,沙箱测试环境。扫描了。78块钱。然后之后123456。我现在正在付款,等他支付完成。支付完成。没有把这个关掉呢。刷新一下。
09:00
你看刷新的时候就已经到已经支付了,只是我们跳转这块,他没有给我们完成啊,然后下边也没有。有没有错误,是不是刚才我因为我没刷新,那我们再回过来再找一个。再找一个订单。比如说说PP第四版。立即购买,买一件咱们就就可以测试啊,然后结算。呃,生成订单,但是我们现在不在这儿支付关掉。关掉现在这块,我们可以在订单详情里边去支付,你再测试一下获取二维码。扫码。立即支付123456。然后我们看一下支付完成。诶,支付完成这个轮询,他上来就给我们世接是假就给我们清掉啊,这个去掉应该是这的事儿啊,那这儿不用管了,这会肯定他是支付状态已经改了,这块就可以给我们提交了,这下边我写多余了啊,然后呢,我们可以点击下一步就是我们根据确认订单对吧,可以点击我们确认的一个收款的一个一个状态。
10:12
我们再来测试一下啊,测试一下这个,看一下它为什么这块不好使,先看下能不能到这块来,你打一下i.rog。他这块应该是已经执行了打印了,那这块是打印,如果这块等于二也没问题,对吧,然后呢,我们这块跳转。跳转。路由器咱们已经下载了,跳转到本地。你跳转过来,那就相当于刷新一下页面,刷新一下页面,那我们初始化那个变成甲就没问题了,那或者是在这块我们直接将。呃,他是把它设成一个甲。再将。这个数。STT里边的首拼,再让它等于什么,再让它等于一个甲。这块,那如果设置成功,它就会关闭掉,这个窗口被关闭掉,但是植入状态已经是成功的了,对吧。
11:04
我们来试一下啊。那我到首页里我下数据。随便找一本书一起购买。结算。生成订单,生成订单我们在这块支付过来这里下单,然后点击支付,打开我们的手机。用安卓手机啊。然后我们扫描。扫描一下,你看他们现在一直在打印这个是一的状态,对吧,轮询这个打开一直在是一,然后我们点立即支付,然后123456。以后。看下边这个状态啊,现在我支付完成,你看是2A2,他现在把它关掉了对吧,然后也不开始也不允许了,对吧,证明允许我们已经也把它关掉了,是可以啊,刚才不知道什么原因,然后。嗯。这个做完了,那我们现在还有一部分什么,假如说状态是其他的时候,这这个打印就给留在这,你看如果状态我们在这块是确认订单对吧,当然我们是等于二的时候,我们那等于三的时候才去确认新订单,因为你商家去发货,发货呢选择物流信息对吧,然后我们才能获取到物流信息,这些东西物流信息就交给你自己去获取啊有这个接口,那我们只需要在这块点击确认订单就行,Cik,那我们调一个,比如说呃,确认订单。
12:26
Co。确认Co con。呃,Or DR明白,正好跟那个什么会冲突,跟我们的名会冲突,因为我们在接口里边也有一个这样的方法,对边前面再加一个吧,Hand handle。D,然后把这个C大写。点击确认订单的时候,那我们也什么都不需要,对吧,直接过来。在这个地方我们加一个cost这个方法,确认订单的方法。
13:01
也用镜头函数,我们去呃做。括号。符号箭头。那点击确认订单呢,我们直接调用我们的会话框,提示他一下就dialo dialo里边调一个确认的这个会话框。确认,然后呢,这里边儿。我们直接写上,呃,标题T。呃,标题这里边儿有一个标题,嗯。确认,然后加上啊是否。确认订单,是否确认订单在这块加上这个。这是一个传一个阶层格式就行了,来我们看一下他现在能不能给我们。点击就是已经支付的状态,对不对,确认订单现在没有弹出会话框,告诉我们什么,你看。告诉我访问的。这个没有定义啊,这还没有定义,我们把这个拿到哪。
14:03
拿到这个位置。嗯。这个括号一定得用,所有的编程的符号都得用的。然后点击确认订单,你看是否确认点取消对吧,你看取消这块。呃,他出了一个错误,应该是我们没有那个取消的一个一个方法。这个里边我们家一个。加一个关闭的方法吧C。呃,一个方法等于进头函数。加上一个让这个绘画框点。完毕。然后把这个加到这了。聊到这,然后这里边如果我们点击这个确认它会,呃,点击取消它会关闭对不对,那如果点击确认它会这块来一个THN,在这块它是相当于这个会画框,是结合什么promise给我们写的,所以呢,在这块我们可以怎么呢?可以加上这个,然后然后我们处理,当然不用传其他的值啊,就直接然后处理就行了,那如果有问题的话,我们也可以加什么catch这个括号框啊,你可以加catch,然后里边假如说我们想处理什么东西,你可以写在这块对不对。
15:24
然后我们现在,呃,在这里边确认,确认的时候,那我们就得调一个确认订单的一个接口。确认订单在我这里边儿有一个。嗯,方法这块确认订单需要传递的也是订单的一个ID,他用方法给我们提交过去的。嗯,在订单详情。然后我们这块确认订单里边我们需要传一个订单号,所有都跟订单号有关,对吧,传一个订单号,然后它里边再来一个promise对吧,Res确认,如果确认成功了,我们在这里边就可以怎么的,So,你就可以打印一下这个。
16:03
可以看一下。确认成功对吧,咱们一起把这个写完,那如果他确认成功了,会给我们返回一个状态码,我们返回一下这个接口,你看确认接口里边去提交订单啊。确认。如果确认状态码成功的是204,请求成功对吧,状态码这个状态码成功对吧,20204,那就204成功,那我们在这里边直接就写一下。呃,如果,但是现在你确认这个应该不太好使,因为呃,服务器得什么时候让你确认呢?得发货了对吧,才让你确认,不知道你现在怎么确认呢,我们就把代码写的这块等于204,如果这个状态码等于204的时候,那我们在这块提示一下to test这块写上。所以这个订单的前后端和商家配合才能测试啊。咱后台还没有写呢,后台嗯可以用,嗯可以单独写一个后台,按照咱前台的格式,后台就比较好写,逻辑的差不多,然后我们确认完之后重新初始化就行了。
17:07
有错误也没关系,咱只是看看能不能到这块就可以吧。一下。诶。又是状态31号。31号。31行,这没有用到。状态的话。不能读取属性STPS。那哪块用到这个状态。确认啊,S这是状态状态号。Sta状态码通过这里边。这里边儿直接这样,直接我们这块就确认一下,然后初始化一下。把这个去掉,因为这块它是没读取成功,所以呢,这块里边没有这个。
18:03
你看,然后我们刷新一下。现在这块你不可能确定成功了啊,点击比如确认,你看是否确认,咱们先调用这个研好使啊确认。你看下边是出错返回的400对不对,所以呢,他现在不是说那个值,为什么400呢?因为你查看一下400的状态是服务器端,我们还没有去操作,你现在是快速的执行这个步骤,他得把这状态改成三之后才给你点这个状态码。你看400服务器不理解请求的语法对吧,所有请求,那我们在后端,如果你将这个订单的状态,你把它设置成对吧,设置成三之后,那我们确认,比如说把它设置成四,就确认收货交易完成就显示了。行,订单详情我们就写到这块,当然那个在订单详情里边,我们还差两个功能,咱们没有写。一个是就是跟服务器端交互,服务器端确认发货对吧,你这才能确认订单这块要改写,另外呢,服务端确定发货,然后判断,他如果确定发货了,咱们就能读取物流信息,那物流物流信息呢,咱们在接口这块。
19:03
接口这块呃,也有,你看物流详情对吧,我也给大家写好了这个接口,你直接从这里获取就行了,然后你比如说你想得到什么商户的ID啊,快递公司啊,对吧,快递单号啊,状态啊,你都可以在里边物流轨迹对吧,都可以用到。这些数据,那商家在发货的时候,他会选择这个物流,所以你根据状态三的时候去获取数据,然后把这个数,呃,数据放在哪呢。放到我们这个地方配送方式就可以了,现在只是普通的一个配送方式就行了。好,谢谢大家,这节课我们就讲到这里。
我来说两句