00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们处理了这种选中全选呢,反选的这样的一个状态,那这节课呢,咱们把购物车的其他功能咱们做完,你比如说这里边现在放的太多了,有些东西呢,我不选择,我可以去提交过去,对吧?但是呢,我也可以把它删掉,对吧?那不选择呢,意味着是我这次呃不支付,下次呢,还在我购物车里边,那我下次再支付,那我删除掉的相当于这个商品我就放弃了,对吧?所以呢,咱们可以有一个删除的按钮,这边也可以删除按钮,对吧?删除的时候呢,我们可以把数据表格删除,然后里边状态初始化,那删除这块。用力组件一般都是用手机呢,都是这样的去操作对吧,那我们在。呃,找到删除按钮。找到删除按钮,结算上面这块删除。嗯,删除按钮呢,我们加一个。加一个事件吧,把它删除,比如说clickk,那我们就叫做delete删除商品,God,但是删除商品的时候呢,我们得把这个ID对应的这个ID传进去,这样的话我们才知道删除是哪一个,对吧?删除商品,然后呢,我们在下边需要做一个这样的一个方法。
01:09
删除,删除商品。这就比较简单了,就是说把它删除掉就可以了,然后呢,就不想购买它那。不想购买呢,我们就把它删除掉,Cost,呃,DT我删除商品,Gogo应该没有S删除单个商品对不对,然后需要传一个就是我们购物车的一个ID就可以了,然后我们到这里边去把它删除,当然这个方法我们做的每一个方法可以把它呃返回去。在模板里才可以使用。然后嗯,删除,删除的时候我们调用这个接口里边的这个方法,接口里边我们做了一个这样的方法类的,对吧,只要是传进的ID就能直接把它删除,用这个。哎,我们在这里边调用这个方法,那传递的时候就是这个ID传进来,直接我们就可以删除了,但删除之后对吧,那我们本身这个列表这块你是没有删除的,你只是在数据库里删除了对吧,我们还想重新起一列表,然后数量也改变,所以呢,我们最好t hen,如果删除成功会到这里边来I,但是I我们用不上,他可以把这个参数放在这块,那我们重新初始化一下。
02:20
重新初始化一下数据,对吧,那些重新加载一下,咱们初始化不在这个地方嘛,这样的话把所有的数量什么这些都做了一下,对不对,加载中重新加载一下,然后呢,重新加载一下,那我们上面这个数量VS这个数量是不是也得改变一下,所以VS这个数量也改变一下,这不相当于重新。重新初始化,初始化,然后我们改变VO里的状态,我们用store里边的pach,用这个我们有一个更新购物车的那个啊,更新购物车car啊,Car通新购物车,然后这块是改变。
03:00
V中的状态数量。状态吧。加数量项状态数量就可以了,这个到前面声明了吗?啊声明了在这块对吧,我们就可以了,这样的话,你看我们现在删除一个,不管选中不选中的,咱们都可以删除,比如说把这个删除掉。加载中你看就没有了是吧,那比如说把密选中的删除掉。没删。其实是我们把数据表的内容删除掉了,所以我们刷新一下。你看还是这些数据。就可以了啊,这就是我们删除购物车和这个选中那是两个意思啊,那你如果不做这种选中的话,比如说这里边只留。这种呃,全部的数据,然后全部提交,那你就可以不做选择状态,那一般都有这种选择状态,那这两个功能就都加在这块,那删除的咱们做完了,那咱们就开始做,呃。结算和这个计算属性总价钱这个还是准的,对吧,买了多少数量加这些,那我们是不是得通过一个计算属性来计算总价呀,对吧。
04:04
任何一个位置都可以啊。你写一个计算属性就可以了,比如说我们叫做Co,嗯,Cost生为一个总价吧,Totl总价等于计算属性,我们是Co computer,对吧,然后。在这里边来开始计算。这里面是。通过计算计算属性,嗯,计算总价。一量啊。只要这里边我们用这个的时候,对吧,我们返回总价就可以了,返回总价那我们。呃,计算总价得计算,首先得计算这种选中的。对吧,我们才计算没选中的对吧,我们不看这个总价。只做选中的就可以了。严重的。比如说第一本书和第二本选中的,然后呢,还有这里边的数量得加在一起,对吧,所以呢,这里边儿咱们就得判断一下先。
05:03
呃,做一个总和吧,Sum等于零,默认是零,然后我们返回这个sum,先把这个结构做完,那我们计算总价就得获取到所有的商品,对不对?那通过s sta这个状态里边是列表,里边就代表的是所有购物车的商品对不对?不管是选中没选中的都代表,那我们先过滤掉T,先过滤一下什么,只要选中的M那个参数,然后这里边,呃,返回选中的,那选中的在哪里呢?是不是我们在result里边,这里边都是选中的对吧?那我们就看一下。我们过滤每一个这个,呃,它代表列表里边的每一个购物车,对吧,就购物车里每一个商品,那每一个商品,我们看这个商品返回,也就是包含的那个S。你造。不然的话,你写个遍历UT result里边数组里边有一个。这个方法也就是看一下我们的这个里边,如果结果里边包含这个商品,那我们就是包含这个每个商品里的ID,因为这里保存商品ID嘛,也就判断这里边相相面相等的话,那就是真是真的话,那我们过滤就留下这个。
06:19
也是结果里边包含这个ID的,你就留下。然后呃,留下这个之后,那我们得怎么的留下的商品对吧,就是我们选中的想购买的商品,我想计算这个总价,那我们在这块呃直接在回车吧,在这块再来个点,那我们来一个我们用呃for循环吧。因为里边有一些条件需要判断,勾循环,循环这个,把循环这里边选中的,因为直接是用链式操作,把过滤后的选中的这个每一项拿到对不对,每项拿到,然后这里边儿也需要。增加了见到函数。导函数在这里边去写,然后我们让这里边的sum和加等于循环嘛,让这里边每一个商品的价格乘以它的数量,也就是IM,这里边是代表的每一个,它这里边有购买的数量对吧?购买的数量咱们每个更新数量也会改变它对吧?然后乘以ITM,呃里边在商品里边下一节啊,商品里边偏IC价钱对吧,这两个。
07:25
一相乘就能得到的总和,然后反回就行了,最好将数量之后我们prices,哎,Price。Ing,我们把它转成一个。数量一般都整数,没有买一个半的对不对,所以都整数,然后这块呢,PR。它计算会自动回放b float,我们把这个啊。零转成浮点数。这样的话保险一些。加等于这样的话,我们就有这个计算属性了,有这个计算属性,我们就把这个计算属性在这个里边,我们得把它返回去这个结果对吧。
08:03
然后我们把返回的结果就放到这个位置就可以了,然后我们验证一下对不对,把反应的结果放到你看这个价钱,这个数量对不对,这个数量里边就是我们返回的to,但是呢,它默认的是比如说是按分钱计算的,一分钱计算的,所以我们这里边你看四块九毛五,这里边加起来肯定不止四块九毛五对不对,他应该什么,他应该是呃。乘以100,因为它往前加了一个小数。乘100才个幺,这样的话才能当成一块钱,就算干495块零零,是不是495块嘛,你看有八本这个书,这两本这个书,那我现在简单一点,你看你选中这个把它去掉,现在是不是就这一本书比较便宜,对不对,你看55块钱,然后呢,两本书。110块钱,你看在这边三本书165块钱对吧,那再加上呃。这个数量,但是我再上。有本这个书你选中。你看这块钱,那这块再加一本书看一下,加五块钱。
09:05
下边把网络去慢啊,我重新翻新一下。啊,加一本书。再加。160对吧,当然了,有容易出一些错误,加上大量的判断结果再处理回来就行了,都用加上那个异步标记的就好了。然后这样的话,我们就把总价过来了,对吧,但是这块只是给用户一个提示的,那我们点结算的时候,申通订单的时候,对吧,那订单里的价钱是用户需要支付的。那我们可以把选中的状态传过去,但是我们接口后端已经写好了,因为我们在这里边改变的每一个状态都将数据表的状态改变了,所以我们点结算生成订单的时候,他直接读取数据表对吧,哪些是选中的,然后呢在里边再计算一下总价,生成订单总价,然后呢,在支付的时候就会显示我们那个总价就可以了啊,所以这里边是给用户展示的,都在用户表里,所以在结结算生成订单的时候,你什么都不用传过去。对吧,只要你是当前登录用户的身份,那这个订单那块就能找到你的,呃。
10:04
创建的这个购物车里边又结算的这个订单。就可以了,那现在假如我选中这个商品,这两个商品过来,我现在点结算,那点结算呢,我们就得加一个。呃,结算的一个按钮,结算按钮他们加了,咱得加一个结算的这个,呃事件对吧。就是在提交这块,也就是在。嗯,姐太。计算,这会把它全拼起啊。在这块有结算这个按钮已经在这了,价钱也在这对不对,然后呢,它是一个提交的,所以提交的一个按钮,那我们这块就加一个提交的一个,呃,一个事件suit。然后在这里边我们加上一个提交的方法哦,Sum sub MIT方法,然后我们在这页面里边把这个提交的方法加过来。也就是生成订单。就是创建订单购物车,下一步就是把订单给创建出来,然后呢,在订单里边我们再去支。
11:06
所以我们得有一个。这个步骤我们再把它写上。那告诉。嗯,声明一个on submitit这样的方法,什么参数也不用传。只是转到订单页面,订单里边会重新去读取这个,根据当前用户的身份去获取他需要创建的这个订单,但这里边我们想提交的时候,首先先要判断一下什么呢?判断有没有没选中的,如果他都不选的话,就不让他往订单里边去转对不对,比如说sta,呃,状态里边结果就是这结果里边是选中ID都放在这里边吗?比如说长度如果是等于零的对吧,就证明用户现在没有选择的。那没有选择了,那我们怎么样给个提示就行了,用这个新提示有个失败的提示,那我们写个提示消息。请选择对吧商品。进行呃,结算。如果他都不选,就不让他结算对不对,然后直接让他什么也不操作,还在这个界面留着,只是给他一个提示,那否则的话,假如商量体不等于零,那我们就直接用路由到创建订单的。
12:14
这个里面去,我们再做一个其他的页面pass,呃,比如说到我们创建订单吧,但是这个我们还没写呢,GRGR创建,我们标起创建or创建订单就可以跳转到其他的地方了。创建订单就完事了,那这样的话,我们购物车的全程咱就行了,那下一步就是创建订单支付对吧?来我们测试一下这个可不可以。来亲一下。如果我如果现在全部选对吧,我进行点结算,诶有问题这个没有把这个方法怎么办。它提示错误,没有把这个方法。返回去里面是用不了的,刷新一下。现在啊,因为刚才操作已经全部选了。
13:01
但是里边好像还有一个。嗯。没有。13。方法有提示的错误,等我看一下啊。点击。前往结算奥,这个S是大写的。然后我们看一下,我这个是不大。大写就大写可以吧,不然的话大家写不对,应上它下边有警告提示,那现在没有提示了,对不对,那全选或者全部选,假如全部选我现在一点阶算,全部选就是零了,你看0.00没有选择的,你看请选择商品进行结算,一个失败提示,然后保留的页面对不对,那我选择这第一个,第三个或者是。呃,第二个第三个对吧,现在一点结算它就会跳转,但是我们跳转页面还没写,你看。跳转过来这就成功了,对吧,然后购物车里边还剩三个,因为我们跳转了,这里面还剩三个是没问题的,但是我们一跳转的时候,在生成订单的时候才把购物车清空,对吧?创建订单的页面支付了才把购物车都清空,不然他还在这里边对吧?所以呢,那里边。
14:13
会自动把它删除掉,生成订单之后会把它自动升级掉,因为订单订单没写好,谢谢大家,这节课我们就讲到这里,购物车咱们就结束啊。
我来说两句