00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成SKU form的保存的操作。那咱们呢,先看一下子已经完成的这个项目啊。那咱们呢,现在所处的呢,是po管理模块。那么用户啊,可以选择一个一级分类。二级分类以及三级分类。可以给某一个PU添加相应的实例。那么对于我们目前而言啊,收集到的数据呢,几乎都收集到了。但是呢,当你点击保存按钮的时候。这些收集的数据啊,还是需要整理的。就比如说平台属性,销售属性,咱们收集到的是平台属性的ID,以及属性值的ID。咱们收集到呢,是一个字符串,呃,当然将来咱们需要给到,哎,变为服务器需要的格式。
01:01
所以说,当你点击保存按钮的那一刻,你应该向服务器发请求。把你新增的这个SQ的信息提交给咱们的服务器。对不?那咱们这个接口应该书写在哪里,是不是书写在咱们的po管理模块当中。对吧,应该是咱们的po。但是啊,你看当年咱们的平台属性,销售属性,图片列表这三个接口,咱当年写在了哪呢?写在了SKU这里啊。当然,你写在这里可不可以,可以,因为咱们都已经实现了。但是你要注意一件事啊,咱们现在还并没有开发SQ模块。所以说这块的接口老师给他带走,放到咱们的po里面。对不,那当然你放在这里也是可以的,但是咱们还没有开发SQ模块。对吧,所以咱们先让它变成空。对吧,那给它扔到咱们的po里面。
02:02
对不?那当然咱当年SKU放发请求的这里啊,你就不应该写SKU了,应该是啥是SKU。对不,那这也是一样PU,那以及底下这个也是一样PU。对不,咱们保存一下,保存一下以及保存一下,那咱们先看一下对于咱们现在这个项目有没有影响。对不,手机手机通讯手机添加实例。对吧,没有任何的影响。那所以说啊,回到咱们的po这里。咱们呢,还需要再书写一个接口。就是添加咱们的SKU。那咱们呢,得去看一下咱们的swa文档了。他们应该是关于SKU的。而且呢,是啊这而且是提交一个SKU对吧,是一个POS的请求。所以说啊,咱们呢,把他的地址啊,老师呢,给你扔在这儿,以及是POS的请求。
03:03
那咱们写一下export。Cost,比如咱们起名叫REQ,叫a ddsku,当然这个接口需要携带参数。咱们呢,就叫做SKU。那当然,你需要返回服务器返回的数据。URLURL的就是为他了,对吧,这个地址以及method。为咱们的post请求。以及带给服务器的数据为SKU。对不?那咱们接口写好之后,那要干什么,那咱们得看咱们的项目。那么当用户选择手机,手机通讯手机,对不?哎,那这些参数需要整理,当你一点击保存按钮的时候,是需要把这些信息带给学生,带给服务器的。对吧,以及点击取消对吧,那咱们先把取消这个活先给他做了。一点击取消的时候,应该当前子组件要通知父组件,你要切换场景变为几变为零。
04:08
对不,所以说咱们呢,先把取消的这个按钮啊,先给它搞定。对吧,咱们先把method以及date这里先给它折上。对不,咱们找到取消,那么当你一点击取消按钮的时候,那咱们就叫做cancel cn CL。那么当你一点击取消的时候,你要干什么?那你是不是要通知哎,父亲要切换场景?对吧,那咱们呢,就给他来一个事件,咱就叫can。咱们呢,先alert一下,Alert给一。对不,咱们先试一下子走刷新看一下。走手机手机通讯手机对不点击取消。看这是不是弹出一一,那你应该让子组件给负组件做一个通知,告诉切换场景为几为零。
05:01
所以说啊,咱们呢,触发一个自定义事件,哎,自定义事件对吧,让。负组件切换场景为零。那就说这点dollarit,比如咱们起个名字就叫做什么呢?就叫做呃,改变。场景啊,或者改变,呃,SCSV几为零。对不,那所以说回到负组件这。那你需要给咱们这个子组件绑定一个自定义事件,叫做at click啊艾叫什么?来看一下事件的名字。叫做爱的change song。对不,那所以说啊,咱们呢,给它绑上这个自定义事件。那当然它也需要相应的回调,回调名咱也叫烫。对不,所以说咱们在这儿呢,也给副组件加一个方法。对吧,该给他折上的都给它折上。对不,那这块呢,咱们呢,给他搞一下子,这块咱也给他搞一下子,老师特地加了个S啊,为了区分。
06:06
那这块呢,咱们也搞一下子,这个是谁呢?是SKU方。通知副组件啊副组件。附组件修改上修改场景。对吧?场景呢?SCNE场景为几的为零,这点SCNE等于SCNE。对不,那咱们呢,回首呢,还是得测试多测试。手机。手机通讯手机对吧,点击添加一取消是不是回来。对不,那以及你看比如说我这块写的一些数据啊,我再点击不是保存是取消,你看再回来。是不是数据危险?所以说咱们在子组件这里啊,别忘记点击取消按钮的时候,数据要怎么呢,清除数据。对吧,那就说我吧,这个点O3。把咱们的想式数据C-date。
07:02
对不,哎,变化成啥,是不是跟谁合并这点Dollar OPS点。对,不经合并那就清楚数据了。那咱们呢,回手呢,也测试一下子看这一定要记住多测试。对吧,点击取消,比如说咱来个123 123取消。对吧,再回来没了。好,这是它。那么当你点击保存按钮的时候啊,那你是需要整理参数的,把这些参数带给服务器。所以说咱们找到咱们保存按钮,那给他绑定一个单击事件。咱们呢,就叫做C。那咱们呢,就需要书写这个事件,这个呢是咱们的保存。按钮的事件。老师呢,先把没用的先给它关掉,节奏给它关掉,对吧,咱们叫什么叫做save。那咱们呢,先alert个一一,对不先看一下一点击保存能不能弹出个一一。
08:07
对吧,哎,走。点击保存一一没问题。那接下来呢,咱们就得收集数据了,把这些数据提交给服务器,那咱们得盯住数据。虽然说谁是提交给服务器的数据呢,就是咱们这个SKU info。那首先说对于父亲给的三级分类的ID已经收集到。以及TMID,品牌的ID po的ID,这三个父亲给的数据咱们已经收集到。对不?那以及v model的数据咱们也能收集到,看一下,比如说SQ的名称,咱们就叫做小明。对,不能收集的,以及价格咱们也能收集的。以及重量123。对不来找一下子应该是重量。看一下能舍得,是不是也能收集到,以及规格描述666。
09:00
对吧,也能收集到那以及平台属性的数据,咱们其实是已经收集到。但是还没有整理。对不,因为咱们是把平台属性,你要注意平台属性要收集什么。要收集相应的平台属性的ID以及属性值的ID。但是这些数据咱们收集到了哪呢?收集到了咱们的a tr info list这。通过每一个平台属性的a t rid and y6id是不是进行收集。对不?那所以说啊,咱们在这儿呢,需要整理参数。I。整理参数。那首先说平台属性带给服务器的参数应该是啥?应该是一个对象,数组里面是一个对象。对象里面应该有at TD和YID。但是你看咱们现在带给服务器的这个数据,来老师给他切换一下,你看咱们现在带给服务器这个数据当中是什么都没有的。
10:02
你看嘛,应该叫做。SKU,呃,At y list这个数组里边是带给服务器的数据,是什么都没有的,因为咱们的数据放在哪,放在这儿呢?在这手机。那所以说啊,整理参数那。必须要整理,咱们先整理什么,先整理哎,整理咱们的平台属性。对不?那么平台属性的数据在哪呢?咱们看一下在哪呢?是不是在此啊,我们的这个收集到的是不是在这个at tr info list里面。那咱们呢,解构一下。叫做at tr info list,那整理完的这个数据将来带给服务器是通过谁带的?是不是通过SQ info?因为将来你需要把整理完的数据复制给SQ info下的这个,呃,SQ value list这个数组里面得放的是对象。对不,所以说咱们呢,把SKU啊音否也给它解构出来。
11:02
对吧,哎,那咱们呢,先整理平台属性的,呃这些呃参数。那咱们看一下。那对于平台属性,咱们要收集的数据整理成什么样子呢?咱们呢,还是得看数据手机,手机通讯手机来看这。这块呢,老师呢,多给你们讲几种方案对吧,咱们呢瞄一下看这,找一下SK方看这啊。走点击。那首先说数据收集到了哪呢?还收集到了咱们的a tr info list,每一个销售属性这啊,平台属性这。不,屏幕和尺寸你看,比如说我选择的是。六杠6.24英寸,你看收集的数据是不是两个ID。是不是在这个数组里面的每个元素对象的身上?那所以说咱们可以怎么办,先这么办。把收集到的数据,到的数据先整理一下。
12:04
那你说at tr info list.for each,便利。特。那么item是什么?是每一个平台属性。对不,那么如果平台属性的身上带有哪个字段呢?就是平台属性。呃,这个对象的身上带有这个叫做,咱们看一下带有这个叫做at tr,什么玩意叫at t rid and value ID代表是不是已经收集出去了,你没有这个字段代表说我没收集。对不,那所以说咱们要判断,比如说如果哎,你的item,每一个平台属性,它的身上有这个叫做a TD and value ID。对不,如果有,那这个代表什么。代表当前,哎,当前。平台属性,那么用户进行了选择。
13:00
选择,那如果选择了,你要干什么,你是不是要把这个字符串。来还是测试你是不是要把这个字符串切割,为啥,是不是切割为一个一个数据,你不应该是一个字符串。对不,咱们找一下子应该是SQ放这里啊,盯住这你不应该是一个字符串。你应该是一个什么?应该是一个对象。对象里边有两个字段,每个值是不是分别这俩值?所以说咱们呢,把它呢切割一下。也就是说item的他。点谁呢?Li用谁切,用分号切。那返回的是一个什么?是一个数组,数组咱们就可以解构。那用两个变量接收,但这两个变量名字咱为了以后方便了,咱们的就叫做平台属性,你看啊收集的数据是不是应该叫做atd和value ID。对不,那咱们就叫什么,就叫at t RA和Y流TD和谁和Y流ID。
14:01
对不和YID。对吧,它,但是呢,你要注意你需要整理为一个对象,就是携带给服务器的参数应该是对象。那所以说咱们light一个,比如说light一个叫啥呢?咱们就叫做呃叫object。A省等于atd和YDTD和YD。那你需要把这个对象扔到哪里?是不是扔到咱们的SQ info的?SKU y list这个数组里面。对不对,或者你可以这么办,再新建一个数组,哎,新建数组。对不还数组。数组,哎,数组,你赖一个arr等于空数组,那么你可以先把收集到这个数整理完的数据,你先扔到咱们的数组里面,Push到咱们的这个数组里面。完了之后,你可以把数组复制给谁,是复制给咱们的SKU烟否下的对吧,哎,就是讲。
15:06
整理好的参数赋值给谁?是赋值给咱们的SKU info。Info的哪个字段是不是叫做什么什么SKU?呃,SKU外流绿色。对不?你这么搞是可以的。对不,那咱们呢,搞一下你看这啊,那就说SKU info点它。对不,你应该等于等于A。那么带给服务器的平台属性的数据是不是就整理好了,但是咱们得测试看一下。手机。手机通讯手机。对吧,那以及咱们看一下的,比如添加,那咱们看一下的,比如说咱们现在选择的是屏幕尺寸。对不来盯住咱们的数据SQ放,当老师一点击保存的时候,你看数据有没有整理完毕。
16:00
对吧,应该是整理到了哪,整理到了咱们的。找一下。看一下子有没有赋值啊,SKU叫SKU tr y。行,那老师呢,勾几个。走啊,点击保存。那咱们呢,切换一下吧,这个可能有卡顿的现象啊,卡顿的现象啊,像咱们这这其实已经看见了。对吧,这数据不就收集到了。那所以说咱们的平台属性的数据是完全可以收集到,这么搞是可以的。但是老师不想这么搞。对不?咱们可以怎么玩,可以这么玩,你看老师这种方案能不能理解,看这。这个呢是整理。平台。属性的数据的方式一,老师也给你放在这儿,你看老师再给你来一个方式二。你看这么玩行不行,你看怎么玩啊,你看at tr info list.reduce re reduce对不?那咱们应该知道它这里面有PV和呃,和这个艾特。
17:09
对不?你看老师呢,给PV啊,来一个数值是一个数组。你看这种套路咱们应该见过,Reduce应该是接触过的。对吧,你看老师怎么玩呢?给PV赋予一个初始值,是一个空数组。那么item是什么?是你便离到的每一个元素,那咱们可以判断,判断什么item,就是说如果咱们的判断都是一样的。如果你的item有这个,那代表用户是不是选择了。对吧,用户已经选择了,什么叫选择,就是已经勾选上了,那我可以怎么办呢?可以这么办,给P点,我给它push push一个啥,Push一个对象。对不对,但是啊都对,但是你先得先把这个数据先给它解构出来。对吧,把这个数据给它解构出来就是item。Item是什么?这块一定要注意,是咱便利到的每一个平台属性,对吧,当前便利到的元素,把数据给他便利到,那我可以给它push到数组里。
18:08
对吧,不就这俩。对不,那咱给他扔起来。但是一定要注意reduce而言,一定要记住,你需要把结果给他返回。对吧,当做下一次循环的时候。的PV。对吧,这个一定一定要注意,那咱们看一下子它有没有返回的结果,对吧,其实返回的结果咱们应该知道,就是最后一次返回这个数组。P不就数组吗?最后一次执行返回的结果就在light个啥result,你看result是什么,你看效果跟上面其实是一样的。其实这块啊,我告诉你啊,用咱们的for each呢,很容易理解,其实用reduce也可以。对不,那咱们呢,刷新咱们保存一下,看一下打印的结果你看啊。手机。手机通讯手机。点击添加,随便找一个,你看老师勾选一个屏幕尺寸,一点击保存,你看所要的数据,其实跟前面咱们计算出来是一样的。
19:08
所以这里面老师就是想告诉你一件事,什么事,这里面还有第二种写法。对吧?当然这种写法需要你对于reduce玩的比较溜。对吧,其实reduce常用的是啥,比如说算一些数组的累加和啊,求数组最大值啊,以及当前这种场景也可以。相当于每一次便利这个艾特,什么是当前的销售属性啊,平台属性。对不就是谁,就是咱们看就是谁,就是比如说就是这个屏幕尺寸和无线电它是两个对象。把这两个对象身上的数据给它拿出来,扔到咱们这个数组里面,但是你别忘了,千万要,因为要作为下一次要用。那所以说你就可以把返回的结果复制给咱们的squ info b SK tr value。是不是就可以复制给他,那咱们的数据是不是就能收集到。
20:00
对不,所以咱们方案一老师这块就给你干掉了。OK吧,咱们呢,还是采用方案二,因为这样看着更加得劲一些。对吧,所以说这是咱们整理平台属性的数据。那么如果他你能搞定,那底下这个你应该也没问题,因为套路是一样的。底下这个是不是也是一样。那所以说咱们再整理一下什么,再整理一下子销售属性。哎,整理销售属性。那咱们看一下,那也是一样,那你得拿到谁销售属性的数据,咱们收集到哪儿了,你看咱还是得看数据。走,就还是苹果12吧。那咱们瞄一眼啊,咱们的销售属性收集到了哪?咱们先找到组件SK放。那首先说销售属性用的数据是哪的?是PU Co tr例子,你看咱们的数据是不是收集到这儿。用的是at TD and y。
21:00
所以说组件实例的这个字段,咱们也需要解构出来。对不,那所以说咱们呢,给它拿出来。对吧,一点点的给他完成。那它不也是一样的,那也就说PU啊,CU没提示对吧,没提示哎,出来PU CU at tr例子。是咱刚刚解构出来,它那也一样,点上点reduce,哎,点re duc reduce。那也是一样,有回调,有PV和谁和特。对不,那当然,让咱们的初始值为一个数组。那这里面也是一样,你也得判断判断什么,比如说如果你的item有哪个属性呢,有。哎,这个还得看一下数据对吧,咱们先给他注释一下。对吧。来,那咱们呢,去找一下子,看一下这个咱当年收集的那个名字叫什么。找一下添加。看这颜色。咱们呢,找一下咱们的数据啊,看一下叫做at t RA and value。
22:07
对不,哎,那所以说呢,咱们呢,给他拿过来对吧,跟顶上这个是一样的吗。哎,好像真是一样的,咱们看一下顶上收集的数据吧,看这不就能看到了吗?是咱们的找一下销售属性。对吧,销售属性收集到的就是这对吧,叫做a TD and y ID。那就说如果有它,那你也是一样,你把你需要的数据是不是给它切割出来。对吧,那么把咱们需要的数据给它切割出来,那也就是说cost,但是这两个字段你不能瞎叫了。这两个字段销售属性需要的谁需要的是COD?对不,这是他。那以及还有谁呢?还有咱们的这个叫做Co at t y这两个字段就可以了。对不,那从谁那结构是不是从item点,它是不是结构出来。
23:00
那也是一样,你也需要往数组里面是不是扔一个对象,所以说PV.push。Push的是一个什么?是一个对象,对象需要拥有这两个字段。对不?CTRLCCTRLV给他扔下。哎,这块呢,要注意啊,咱收集的名字,这俩名字是一样的。对吧,哎,所以说呢,咱们呢,给它格式化一下,以及把返回的数据复制给谁,复制给咱们的SKU info点谁点它。对不,所以说咱们的销售属性也就收集完毕了。对吧,好了,那这块呢,又出现卡顿了,老师呢,给他关一下子,咱们再进来一下。招到老师呢,保存一下对吧,那咱们看一下的数据能不能收集到。一切以数据为主。手机手机通讯手机对吧,添加那咱们呢,看一下相应的数据能不能收集到啊,找到咱们的SQ form这里,盯住咱们的SQ info盯住这啊看这屏幕尺寸。
24:09
对吧,以及版本。点击保存。那咱们呢,看一下子这块呢,应该是出现了这个这个这个这个卡顿现象啊,这个老师给他切一下看这。找一下咱的SKU放你看啊,SKU tr粒子已经有一个了。对不没问题,那以及咱们的这个SK CU tr list,看咱这个是不是叫他SK CU tr list啊,应该是复制给他,对吧,这是没问题的。但是咱们看一下咱们没有返回值啊,对吧,所以说return PV。那咱们呢,回首呢,再测试一下。走刷新,记住大量的测试。手机手机通讯手机对不走老师的勾选一个屏幕尺寸,勾选一个版本对不?当老师一点击保存按钮的时候,那咱们呢,去看一下数据有没有收集到。
25:06
对吧,这一个以及这一个,那这是不是代言的,是不是这俩ID对吧?啊,当然这块是不是出现问题了。Co t r y ID,那这块是不对的。对吧,那这块呢,咱们看一下它得用这个字符串切割,点Li用这个冒号切割。对吧,你得保证数据是对的。对吧,那这回咱们再测试一下,这回应该是没问题了。手机。手机同学手机对吧,添加这回再测试一遍,找到咱们的SQ form,一会儿吧,咱先选一个吧。点击保存,那这回咱们再看一下数据O不OK,找到咱们的SQ info。对,不盯住数据,这是没问题的。ad和Y对ad。那以及这这咱们看一下叫做COATD和COAY的,这是没问题。
26:01
那所以说这两个数据就整理好。那当然还有一个数据需要整理,就是图片列表,那么图片列表的数据咱们收集到了哪呢?是收集到了咱们的,咱们找一家的。这俩OK了,是收集到了咱们的这个叫做找一下,应该叫做image list这里。对吧,那所以说呢,咱们呢,也给它结构出来,对吧,叫做image list。对吧,呃,那这块呢,就是整理图片的数据啊,就是整理。写一下。整理。图片的数据。其实带给图片啊,咱们先看打印一下这个数据。Console第2LOG叫做image list,咱们先把这个数据先给它打印出来刷新。还是得测试手机,手机通讯手机对吧,添加咱们先看着,比如说老师勾中这两,我一点击保存,OK没问题看一下。
27:05
看一下咱们的控制台。你看现在咱们收集到的数据啊,应该是一个数组,数组里面有两个对象,但是你要注意一件事,什么事。就是对于咱们要提交给服务器的字段啊,是这些。对,不,但是你要注意一件事,什么事,咱们现在收集的这些数据,并不是说直接放到哪,直接扔到了咱们的SQ info。对,不应该是扔到SKU info的,这个叫SKU image list。对吧,当然咱们不需要写带idl,那所以说咱们可以怎么办呢?利用已有的数据映射的一个映射出一个新数组复制给他,那你说SKU info点。看提交给服务器那个字段叫啥,叫做SKU image list。就是他。对不?哎,SKU image list,我可以给它赋值,利用啥?利用已有的数组叫image I。
28:02
Image list。又没提示了是吧,老师给他切换一下。我利用已有数组映射出一个新的数组map.map。对不,所以这块呢,老师也多带你们用用数组的方法map映射,那么返回的结果G为啥是不是G为最终啊复制给它的那个元素。Map是啥?这个一定要注意,Map是映射出一个新的数组,复制给他。对吧,那这块呢,要注意啊。这块要注意带给服务器的字段呢,有几个呢?有这几个啊,Image name image ul is default和PU image ID对吧,剩下这俩不需要。那所以说咱们一定要去写一下映射出来的以image name。对吧,Image name就应该等于item的image name。对不,那以及还有哪个字段需要带呢?就是以妹纸URL,咱们也来一个,那就是以妹纸URL。
29:04
那应该等于什么?等于item的image image l?那以及还有谁呢?以及还有这个is default,对吧?It default,咱们已经有了is def ault为item的is default。对吧,那以及还有一个字段就是谁PU image ID。对吧,那就叫做PUPU以纸啊以妹纸,看一下子PU以妹纸,哎,这还没提示是吧,咱给他拿过来。PUID。那咱们看它应该是哪条数据啊,这个数据有点多,咱们看一下子已有的这个刷新看一下。看这其实PU image ID就是那个图片的ID。但是咱们得看一下这个图片有没有ID,找一下,SKU放找一下。
30:00
应该叫image,呃,应该是谁来的,应该是po image list对吧?其实这个PU image ID啊,即为这个ID,或者是这个啊po ID应该就是这个ID。那所以说咱们写一下子,比如说这个字段呢,也需要整理,叫做PU以位置ID。对不?PU image ID即为什么?即为你当前这个图片的ID,或者是那个PU,呃,ID对不?那咱们呢,在这儿呢,测试一下子,最终数据已经收集完毕。那么收集完毕之后,你要干什么?当你点击保存,你要干什么?老师问你。你是不是要把这些参数带给服务器呀?对不?你说你辛辛苦苦整理了这么多,要干什么,是不是带给福气?所以说咱们要怎么发请求了。发请求。那就说这点到API应该是咱们的SPU,点找一下咱们那个写的接口。PU叫re e q DD SQ。
31:03
对,不叫REQADSQ,那当然需要代餐,是不是SQ info,那当然我需要等待它成功的结果,Away,那这得来个啥,Think?对不?那当然咱们呢,需要看一下的这次添加有没有成功,Light一个造。对不,那咱们呢,去打印一下这个result,第2LOG result。那咱们呢,测试一下有没有成功对吧,刷新看一下。那叮嘱叮嘱这个打印来手机或者图书吧,电子书看电子书我给他添加一个。比如来一个123对吧,一这样的123123对不。他。它啊,随便来一些它对吧,勾上OK吧,点击保存对吧,是不是成功了,那你要注意,如果成功代表你添加了一个SKU对不?那你还要让负件是不是切换为场景零,比如说如果result点扣的等等于200,你还要通知副组件切换为场景几场景零。
32:11
那所以说你还要触发自定义事件,咱们那个自定义事件叫什么来着,看写过是不是就是他。对不?啊,以及你也可以给他来一个提示对吧,比如来个提示信息,就是这点Dollar message。Me message对吧?比如说type为什么为对吧成功提示的信息呢?咱给他来个啥叫添加。SKU成功。对不,那咱们呢,回手再测试一下。你看比如说老师给他来一个图书电子书刊电子书,以及老师给他添加一个,比如说来一个888对不。价格一。一一名柯什么什么柯南颜色,以及我选中这个图给它设置为默认图,点击保存。
33:05
对,不,但是你要注意当副组件切换场景的时候。切换场景的时候变为呃零的时候要注意这块,没必要再发请求了。因为你只是给相应的这个类添加了一个实例,看咱们看完成的这个。你将来可以在哪去查看呢?在这里去查看你给这个类添加的所有的实例。对不?你看咱刚刚写的888在这是不是就可以查看到了,对不?所以对于副组件这里没必要再获取数据,所以这块就没必要再获取数据了,这块要注意。OK吧,所以说咱们完成了添加SKU的业务逻辑。
我来说两句