00:00
下面呢,我们来完成这个订单功能啊。首先我们来看一下。目前呢,我们这个订单页面是直接访问的啊,那么现在呢,应该是点击那个提交订单对吧,点击这个购物车相关的,比方说我们看购物车结算的时候才会去那个订单页面,那么接下来我们把这个功能点击跳转功能做一下。打开页面啊,首先我们把这个APP Jason。对应的首页这个位置改回正确的home。这时呢,他刷新的时候就会访问这个home了,好第二点呢,就是我们要来到两个地方啊,一个是购物车,购物车呢也有个结算按钮,我们也要去。来购物车这里结算了啊。我们点击就要去勾咱们的order去订单页面。来我们去订单,当然呢,其实这里还是有些操作可以做的,我们要去订单的话呢,前提是我们至少要买一个东西啊,不能说呃啥东西都没买,那么这样的话呢,你跳过去就。
01:13
不太好对吧,所以说我们这里可以判断一下,也是他至少要选中一个商品。它知道选中啊,如果没有选中的话,对吧,它取零就是就是false false取反就是处处的话呢,我们就我们的简单提示一下。或者说直接return就啥也不做啊,这里去不了,那么我们来到下面呢,才能真正去订单,这时候我们可以用opening方法。对吧,然后呢,输入我们要去的是订单页面,订单页面呢,对应的地址点点斜杠。点点斜杠,回退两层,Page下面的order下面的industry STM好了,那么这样呢就可以跳转到订单页面了,跳转到订单页面,这时候我们要考虑一下来看这个订单页面。
02:06
啊,我们订单页面已经去掉了,我们可以找到这个order,点开这个可视化工具,那么跳入到订单页面呢,我们是到时候要在这个页面去获取咱们的当前的一些数据的,啊,这个没关系啊,剩下数据呢,我们后面可以自己算。OK,那么待会就跳转到订单页面就好了,除了这里要跳转以外呢,还有一个地方要跳转,就是我们的shop店家。店家这里呢,也有一个去结算的按钮,就是你。我们也要勾对吧,勾order好,这里去结算也是一样,它需要判断一下,它得有值才行啊,等于我们的卡有值才能去结算,你不能说没值也能去结算,这样就怪怪的。所以到这里我们这个跳转是要写,但是我们同样的要有个判断啊。这意思点data塔点卡的意思,那么我们至少有值啊,点它得有值啊,因为它是个数组嘛,所以要判断它的值,没值的话我们就return,有值的话咱们才写。
03:08
好呃,那么前面这里也是加个data啊啊,这是计算属性,就不需要加data塔,那么这是一个普通数据啊,所以说要加data,好呃,那么下面我们就可以看效果。保存。同步一下,我们确保这个代码是全部编译成功的。然后呢,我们看je的确是零这个位置。确保代码全都全量更新了。OK,它这里没有同步啊,所以说我们这边要重新扫下码。来,点击扫一扫。重新扫个码,让他同步一下。OK,我们再试一下,他这个这个扫码好像也出了点小问题,我们再扫一扫。
04:13
OK,等待它同步的过程。好,其实到这里我们这个点击跳转就完成了,只是这个同步可能还不行,那么应该是我这里的网络出了点问题。好,前面调了一下网络啊,现在已经OK了。他们已经更新完成啊,首页我们点击进去这个店家,那么他必须要选中商品才能够去跳转啊,我们如果把商品都给删掉。对吧,把商品都删掉,那么点击。呃,点击他话呢,应该是不能去的,我们把商品删掉之后,那么这里应该是我们在计算的时候,我们来到这个shop应该是卡list里面,它如果它的这个认有值,它也会算啊,那么这样我们就算total price也行啊,简单一点就total price去比较就好了,它如果没值就不行啊。
05:05
因为那个看例子里面,如果为零,它也会算进去啊,我们到时候来看。进去好,这时候呢,点击去结算,它是跳不过去的啊,我们必须要至少加一个商品,至少加一个商品,那么我们点击去去结算才会过去,才会过去,好回到我们的这个购物车列表。OK,那么这里也是我们的点击结算啊,他才会过去对吧,两个地方都可以过去到这个订单页面。好,那么订单页面跳转过去之后呢,我们接下来就是要去便利展示它的这个购物车列表数据啊,那么请求的接口呢,和我们之前是同一样的一个接口。来,我们打开接口打。啊,找到这个car cut,啊,找到这个get car list,我们只要把调为处try out,那么返回值就是我们这个已经选中的这个商品列表。好,所以说我们这里继续来到order去发请求。
06:05
来这里一上一发请求api.address。好,请求地址我们来复制。OK,这一块先去掉啊,不然的话它老是刷新。请求方法的是get。然后呢,这里就是请求数据得到数据看。然后呢,后面是错误原因。如果car list存在,那么我们就要更新卡数据,Else的话,我们就提示从原音。好,呃,卡的话呢,我们在这里定义这个数据啊,后面方便去遍历,初始化呢是个数组,然后在这里这点data塔点卡list,等于我们请求回来的卡。好像粒子有值之后呢,我们接下来就可以这拿到它去变利了。
07:07
我应该就是这个view了啊,对它进行V伽for遍历。然后添加一个属性。好了,然后里面呢,就分别来一点点去调整,首先这是它的一个标题。看点title好,然后呢,看title之后呢,这里面接着就是它的这个一个个商品列表了,我们we for遍利。Cast复。好,然后里面点开啊,里面就是就是附的图片。For cover。
08:00
那么我们也看到就是用这种方式去遍地的话呢,应该来讲会比较方便一些啊,会比起我们之前的方式,就是在那个可视化工具里面呢,会更方便一点,当然如果你觉得你可视化工具用的比较六啊,你可以在可视化工具中去给它绑定这个表达式,那么也是能接受的。啊,这个是它的一个价格的计算啊,单价乘以数量就好了。这里就不需要定义什么方法了,因为它整体不复杂啊,并不复杂。好了,然后下面呢,是一个总价的计算,我们就定一个计算属性就完事了。那么这个计算呢,就简单一点,因为这些所有的列表都是我们要用的数据啊。好,其实简单来讲就是P加上就键行数写成一行嘛,C点。
09:05
Sell price。呃,不是啊,这里面我们累计的话呢,是要双重遍地的。Return什么呢?这个c.P。加。CD。这个。他的这个。Reduce。它是有个双重遍地。好里面PC,那么里面就是P加才是加这个c.price。乘以这个它的一个价格,它的一个数量,那么。好了。计算出来的总价呢,在这里显示。OK。那么我们接下来就来看效果啊。
10:04
来购物车,我呢就选中了这两个商品,同时我把数量呢,一个二一个三。解散。好,来到这里呢,它整体显示呢,是没有问题的。对,它上面显示两个商品,然后一个是二,一个是三,总价呢是658,没任何问题,好了,到这里呢,我们就完成了这个订单的页面的一些功能,上面的收货这一块呢,我们没有去做啊,大家有兴趣可以做一下,然后呢,页面还有一个功能,就是点击这个按钮,它要返回到上一个页面。那么返回上页面呢?它有可能是由购物车进来的,也有可能是由其他页面进来的,那么怎么返回呢?我们来看一下。找到这个按钮,给他帮你点击世界go back。点击按钮中呢,返回到上一个一区啊。好,这时候返回页面呢,有个方法就是API点命。我管你是哪个页面,我关了,关了之后它就会返回到上一个页面啊,看病就好了。
11:04
OK,我们来试试啊,试试来到这个去结算。点击按钮。那它就会回到这个购物车,我们再来从shop里面去结算。在close啊,它就会回到这个shop页面,没有问题。好了,所以这个呢,可以就是其实是关闭当前页面。那关闭到前页面就怎么样呢?自然就会返回到上一个页面啊。好了,到这里呢,我们就完成好了订单页面的收获呢。
我来说两句