00:01
上节课呢,我们已经开发好了添加购物车的接口,那么这节课呢,我们要去写这个添加购物车这个功能啊,我们打开我们现在这个开发的这个应用,我们点击跳转到这个商家页面,那么现在我想做的就是点击这个加号啊,来完成这个加入购物车功能,对吧?我们来做这个事啊,所以点击加号的时候,我们要去加商品的数量。而且我们还要考虑到就是点第一次它的数量是一,点第二次数量是二,它得它得是累加的一个过程,对吧,而且并且呢,我们希望这个数量在这里显示一下。在这个左手边要显示一下,同时左手边这里还要显示一个,除了加,你得有减啊,你不能说只能加不能减,这样用户体验是很不好的,所以说我们希望这里再增加一个按钮,用来减这个数数量。好,呃,那么我们对这个结构需要做些调整。我们给它挑一个view的一个容器啊,在这里面呢,我们再增加一个图片。
01:04
是碱碱的图片呢,是叫萨啊萨。早就已经内置了,大家可以直接用,然后呢,我们再整一个文字啊,整一个文字T的话呢,我们设置它为三十三十吧。这个30呢,也没什么其他原因啊,就是。我们调大一点,这样就不要跟别的类名冲突了。Class,那这里就叫T。也加三啊三他30。好,然后呢,这个数量呢,我就调一个11意思一下啊,接下来我们来写下这个样式。现在我们直接这样写的话呢,这个样式肯定是不好看的。大家看它是垂直排列啊,所以接下来呢,我们把它样式给它完善一下。来放到最下面啊,把它的为肉对吧,然为center,那么垂直肌肉,然后这个test。
02:01
30。那么他需要做的就是。Size调小01:14PS,然后呢,它的magic调个magic上下零左右这样的一个。3PS吧,所以3PS。好,呃,这样的话呢,我们就可以看一下这个效果啊,它就会在这里显示大概的内容。是这样的,那么我们点击加号呢,要这个数量发生变化,同时它一上来应该数量为零,对吧,一上来数量。呃。以上啊,这个操作呢,我们后续要来再来讲解啊,现在我们希望点击的时候,这个数量要发生相应相应的变化,我们一起来看怎么做。我们先不考虑怎么发请求,因为发请求这个过程是很简单的,我们现在要把它的效果先调好,对吧,我们来去看怎么做啊,点击的时候我们叫。At cut,我们来加入购物车啊,我们要嫁给谁家呢?当然是当前的这个食品了啊,我们要给当前这个食品去加入购物车at car。
03:09
我们还是一样,请求先不着急发,我们现在要把效果改好,加入购物车呢,我们要考虑的是他第一次是没有这个购物车数量这个参数的,所以第一次他要变为一,后续要在一的基础上进行加或者减。所以我们做法是这样的,来看,我们判断它有没有这个amount属性,它一开始是没有的,如果有的话,我们就在它基础上加加。对吧,L代表没有的话,那么我们要做的就是让它的值等于一。他没有这个数量的值,所以说我们需要自己做操作。这就是我们要做的操作。OK,那么做好这个输入之后呢,那么我们中间这个商品数量,这里就应该展示的就是这个负的amount。对吧,这应该展示负的帽子。
04:01
OK,下面我们就来看效果。点击。我们点击这个加号,点击加加的点解啊,好像没有发生任何变化。那么原因呢?还是跟之前是一样的,这是个view组件。啊,第C组机的话呢,你去更新里面的内容,它是不会有任何变化的,除非你定要用这个update方法才可能发生变化。啊,才可能发生变化,所以说我们要去更新的话,要调这个update方法才行。那么我们就要去对吧,获取到这个服务的内存列表。同时调它的一个方法。那么内存法则需要传当前的item和index。那么我们建议就是他把这个参数传进来,这样的话呢,会更方便一点。所以说我们在第二的时候直接把这两个参数传过来,这样的我item mid就有了,对吧,那么下面在用的时候就可以去更新。
05:09
更新咱们的这个。那。好,我们来试试看到底行不行呢?啊,我们点击第二题,它,呃,还是没有变化啊。我们来看一下,应该没有记错啊,它这个更新方法是要传item和index的,我们找到这个for this就可以去操作这个事儿了,我们来看一下这个容器啊,是不是叫负Li没问题,负Li那么item和index应该也没问题啊,我们我们alert一下。对吧,我们当目的就是我们想看看我们这个数据啊,到底是不是对的。就和index吧。
06:03
这个index可能有问题啊,可能就是index的问题,来我们来看一下啊。我点。OK,诶可以了,他这个更新是不是有延迟的啊,我再点。是不是可以这里。可以啊,但是他这个更新好像没有达到我们的预期啊,没有达到预期我再点。对吧,问题。解没做啊,所以说我点第二个,你看它这个下边就发生了错误的变化了,下边有问题啊,那么这个index应该传错了,我们来看一下是不是是什么原因导致的这个index,它出现了不可预期的错误。应该是我上面在遍历的时候,我遍历出来的这个index,但是实际上我不需要啊,我不要用这个index,因为我们正常的这个list view是有index的,我要用这个list view的index,而不是它上面的index,所以我要把它便利的那个index去掉,这样的话呢,才能保证我们的index是正确的,我们再看。
07:04
落点OK,再叠OK,再加没问题,上面这个加没问题,加没问题,OK,那么这样呢,我们这个加入购物车的加就正确了啊,那么这个二就不需要了。OK,加正确的话呢,我们还要考虑减,是不是还要考虑减,所以说我们来到这个减这里。叫减的话呢,我们叫。看吧,或者ree。看这个看吧。OK,它也是要这样传啊,他也这样传。那么剪的话呢,其实就不需要判断这么复杂了啊,减的话我们可以直接操作。
08:08
直接让他剪剪。好,为什么这样操作呢?后面我们会说明一下,这个减肯定也是没有问题的,我们来演示。加加加。接接。哎,没理中减没有任何问题啊,减也是可以的,那么我们希望呢,就是当它数量为零的时候,一上来不要显示减和中间的数量只有为一的时候才要显示,所以说我们在显示过程中得这样做啊。我们要给这两个内容加一个VE。什么时候呢,当他们这个负的点amount有值的时候,他们才才要显示啊,如果没有值的时候是不需要显示的。OK,这样的话呢,才能够达到我们的预期,来一起看啊。
09:00
以上呢,他们是没有减的,OK,这是对的,点击加诶才出现这个减号,对吧,点击减,减完之后数量变为零,所以说它又会隐藏掉,这也是为什么减的时候我们不需要考虑它到底有没有,因为减一上来是隐藏的,你点都点不了,只有有数量才能减。对吧,这样呢,我们加加加加加减减减减啊也是OK的。这样呢,完成这个购物车的一个加。和一个这样的一个减。好了,那么加减的这个内容呢,定义好了,呃,其实他们这里面就有一些公共的一些代码是不是,所以说我们在操作的时候呢,其实你可以考虑对吧,就是可以把它们提取成一个公共代码,然后这样呢,就可以就这updates。他就是要做这个事儿。是不是要做这个事儿。那么你们只要给我传这个item和index。
10:02
到这里就可以调用了。对吧,那么这样就可以去想要去达到我们的一个更新的一个目的啊,更新的目的好了啊,那么这样做的话呢,最终当然效果也是OK的,我们可以试试。加加加,尖尖姐。对吧,没有问题,好,呃,那么我们接下来呢,还需要做一个事,就是发请求啊,这个请求还是得发,不能不发,那么请求要发的话呢,我们接下来就要去。用上我们定义的这个接口了。OK啊,对,这个接口请求地址是这个,我们来发请求。这样我们就在这里统一的去操作吧。嗯,在哪里操作呢?这里是要更新这个购物车商品,在这里发请求吗。
11:03
呃,统一的发会比较好一点啊,所以说我们统一在下面做吧。啊,API。点请求参数和一个回调函数。回调函数的ET对吧,就是就是数据说白了啊,那么第二个是L。如果。It有值对吧,那么说明请求成功了,请求成功呢,我们再去更新本地的这个数据,这不就更新本地的数据吗?L请求失败了,我们就API。提示一下这个错误原因。好,那么在这里我们要写请求地址。请求方式是pose。请求参数注意啊,POS请求参数得放在data塔里面,并且data里面呢,我们是请求体参数,我们要放在玻璃中。要放在玻璃中,我们设计的时候,设计的都是这个玻璃参数啊,参数类型是玻璃,所以说我们要放在这个玻璃中,而玻璃呢,我们需要转换成Jason的一个字串的形式。
12:10
所以我们在这里要定义这个请求参数,然后呢,再把这参数转换成字符串的形式去传递。同时,请求体参数还得设置一个请求头。设置企头呢,它要设置一个字段叫content Type Content呢代表我们的一个请求体的数据类型,是一个dresser数据结构。所以是application跟。这是请求投,那么成态对应的就是想请求数据的类型。那么类型是什么呢?是application感son application感呢?那么相信前端开发者也很熟悉啊,它就是一个数据结构。
13:01
而且我在这里也把它转成Jason了,所以是非常显象的,而我们要传的参数就是负的ID。对吧,所以说这里它需要把这个负的还是要给我传过来。那么这里就有负的ID。Shop的ID怎么办呢?Shop ID从Z点。啊,从这个API点配置per里面,这里有这个附带ID,最后一个是这个商品的数量啊,所以说我们需要商品数量,那么我们这样做啊,我们往后面加吧,我们需要负的的ID。还需要这个商品的数量amount。那么来。所以说他们在调查方法的时候,都要传这个这两个参数啊。
14:01
Food的ID,然后呢,以及它的这个food的amounts。OK,这样呢,我们就可以完成咱们的这个。功能了啊,完成这个功能了。呃,一起来看一下这个效果吧。我们可以加。呃,加加加加加加对吧,加接。对对上面进行减啊,对上面减它这个购物车的数量,就会以达到一个加和一个减的一个效果。
我来说两句