00:00
哈喽,各位小伙伴们大家好。那接下来咱们去完成添加SQ当中的图片的展示与收集的业务。那咱们呢,先看一下呢,已经完成了这个项目。那比如说啊,用户选择了手机。手机通讯手机,那么会在底下这里啊,展示相应的po列表的数据。那咱们呢,可以给苹果12这个类哎,添加相应的实力。那么对于我们目前而言啊,像SQ的名称,SKU的名称,价格,重量,规格描述,以及平台属性,销售属性这里。那么已经进行了数据的收集。那当然像平台属性以及销售属性,他们收集的数据。在向服务器发请求的时候,还是需要整理的。但是数据我们已经收集到了。但是对于图片列表的数据啊,咱们呢,还没有进行相应的展示以及收集。
01:07
那首先说展示,很简单,因为咱们的数据已经有了,那无非就是展示了。那么要收集哪些数据呢?那比如说啊,老师选中了第二个和第三张图,那将来你要把这两张图片的信息是要提交给服务器的,也就是说把你勾选住的图片的信息要提交给服务器。除此之外啊,在它的右侧操作这里还有一个小业务,你看默认情况下操作的这一项,展示的都是设置默认的按钮。但是当我点击某一张图片的时候,诶,你会发现它变成了一个button。但是这个button呢,只是一个什么呀,默认的文字。那也就是说,把你选中的这张图片当做一个默认的图片。而且呢,要注意一件事,所有的。
02:01
操作当中的这些按钮当中啊,只有一个能设置为默认值。对不?其实这块的业务逻辑很简单,这不就是咱当年所做的排他的操作。只有你选中的点击的这个是默认,其余的都是非默认。对吧,那所以说回首去看一下咱们的项目。那首先说啊。咱们呢,也是一样选择手机。手机通讯手机,比如说呢,咱们呢,就给苹果12这个类添加一个什么呀,添加一个SKU。那么对于图片的数据啊,咱们呢,可以看一下的。那么对于图片列表的数据啊,咱们呢,已经拿到了。在哪呢?在咱们的PU image list,哎,要注意这个I应该是小写的。对不?所以说回到咱们的组件当中,咱们把相应的I呀,给它变成一个小写,以及服务器这块返回的数据应该也是大写的I了,对吧,给它改成小写的I。
03:07
对吧,那也就是说服务器的数据已经有了,那咱们呢,无非是要把这些数据啊给他咋的是不是展示出来。对吧,哎,那咱们的看一下子手机手机通讯手机添加SQ。那咱们呢,先把从服务器获取到这些数据啊,先给他展示出来,那不就是PU image list这个属性。对不?哎,那咱们呢,可以用咱们的table去进行展示。对不,那咱们的table在哪呢?是不是在这儿图片列表嘛,看这是不是图片列表。那咱们呢,给table呢,加上一个什么,加上一个date。那么它显示的数据应该是谁呀?是PU image list。那咱们先刷新一下,看一下,那么你会发现,诶,这些表格是不是出现了,那当然现在咱们没有数据。
04:05
那咱们呢,先一个一个看,那首先说这里面呢,咱们呢可以先不用管。对不啊,这块咱们可以先不用管,你需要展示图片,对吧,人家这有图片需要展示图片。所以说在第二列当中,这是第一列。对吧,第一列咱们这里面就不需要管了,对吧,第二列是需要展示相应的什么呀,展示相应的这个。图片。对不,所以说第一点以及这个label其实没什么作用。对,因为他前面也没有那个label对吧,啊看他。那以及在第二列当中,咱们要显示图片,那你得有image标签,所以说咱们要用到作用与插槽。对不,而且呢,咱们的回首呢,先看一下数据啊,看一下数据。咱们呢,还是得看一下数据手机手机通讯手机对吧,添加SQ。
05:02
这个咱们来看一下数据啊,SQ four应该是这里。那么图片用的地址叫做以妹纸ul。那所以说咱们这里面呢,要插入图片得用到作用与插槽。哎,没有提示了,没有提示啊,老师呢,给它关一下子刷新,咱们呢,再给它拖拽进来。那所以说第二列当中它会用到作用与插槽啊slot。来这块呢,老师给他搞一下子slock。那当然,这里面呢,有相应的肉。肉是什么?肉就是数组当中的每一个元素。对不,那当然这里它需要用到以指标强。对不,那所以说啊,咱们呢,来一个以指标强。对不,那当然它得有src,但是src啊,它得是动态的。那它应该为什么呢?应该为肉的以妹纸。
06:02
对吧,咱们呢,看一下啊,刷新看一下那个字段对不对。对吧,来老师呢,往底下呢挪一下。这个呢,再给它往底下挪一下,看这啊。手机手机通讯手机对不添加SQ。那咱们看一下的图片列表已经展示出来,但是图片太大了。那所以说啊,咱们得给他写一个行列样式style。为什么呢,宽度啊,咱们呢,就给它来个100。以及高度,高度呢,咱们呢也是给他来个100像素,那这样的图片呢,能看着个头啊。哎,稍微小那么一丢丢。对不,那咱们呢,刷新去看一下数据。呃,手机。手机通讯手机对不还是他。那咱们来看一下咱们的图片,这是没问题的。那以及名称这里,那么名称应该展示的是哪里的数据呢?咱们呢,看一下数据。那么名称应该展示的是咱们的。
07:04
找一下子,应该是咱们的SQ当中的这个叫image name。对不,那所以说第三列展示的谁是不是它的展示的字段叫做image name字段。对吧,那咱们呢,回首呢,刷新看一下O不OK。下来这个老师呢,往底下给他挪一下。手机。手机通讯手机对吧,添加SKU,那咱们看一下这也是没问题的。那以及操作这里啊,要注意,你看它默认情况下是不是有个叫设置默认这样的一个按钮,但是当你一点击的时候,会显示这个按钮。那也就是说操作的这个位置应该有两个按钮进行切换显示。对不,那所以说这里呢,咱们也会用到作用与插槽,对吧,又没提示好老师给它关一下刷新。刷新。对吧,那所以说啊,在最后一列当中啊,应该有两个按钮,所以说啊,咱们呢,给它来一个slot。
08:07
关掉,应该来一个slot。那它这里面呢,应该有两个按钮,那但是啊,咱们先把咱们的肉和Dollar inex先给他写上。那这里呢,应该是有两个button对吧,EL-button,那这个名字呢,叫做设置默认,那以及啊还有一个按钮EL杠八,那这个是什么呢?这个呢就叫做默认。对吧,那咱们这个就不给他颜色了。对吧,那当然现在他俩都在展示,咱们的这个都在展示。对,不但是你得知道,到时候他两者只能二选一。对不?哎,咱们先看一下。对吧,到时候一定要注意,这俩按钮一定是二选一,要么有我,要么没你,要么有你,要么没我。对不?那接下来咱们就得收集数据了。
09:01
那有的同学说老师那收集什么呀,那举个例子,那我勾中了第一张图和第三张图。那你是要把图片的信息,你勾选中的图片的信息要干什么,是要提交给服务器的。那么你怎么知道你勾中的是第几张图呢?对不?就比如说我勾中第一个和第三张图,那你要把他的信息带给服务器,你怎么知道我勾的是谁?所以说这个呢,得看相应的文档了。咱们用的谁用的是table对吧,所以说咱们找一下组件table。看一下。那咱们最开始呢,找这个前面带复选框的,咱们看一下的应该是哪里。对吧,咱们找一下是不是在这儿,咱们看一下子,你看比如说我勾中第一个和第三个,我怎么就知道呢,他们应该是有相关事件的。对吧,你看他这是不是有一个事件table是给table添加的。这个事件呢,叫做selection-change,那么select-change是什么意思呢?咱们得看一下它的文档。
10:04
对吧,那咱们呢,去找一下子。他呢,应该是事件,对,不叫做select change。当选择项发生变化的时候,会触发。对不,那所以说这个事件呢,可以获取到用户勾选的那些颜色。元素对吧?啊,那咱们呢,找到这个事件,那当然咱们还没有写呢,那咱们呢,需要给咱们的table绑定这样的一个事件,咱找到咱table是不是这。对不?当然咱们目前而言是没这个方法的。那咱们呢,给它添加一个方法。来回到底下这里,老师呢,在MY这再来一个,那这个是什么呢?是table,哎,是啊,Table。表格哎,复选框按钮的时间。
11:01
那这里呢,要注意一件事,人家的文档当中也写了,他会给咱们注入相应的参数的,你看咱们可以看一下。这块收集呢,相对比而言呢,很简单,你看啊,咱们找一下它的官方文档。找到他的事件,事件method的这呢,啊method的咱们搜一下子吧,叫做select。对不杠change。看他这个事件啊,是有相应的回调的,咱们看一下啊,应该是他的事件event,咱们找一下。看这它的事件呢,是有回调的,回调里面呢,是有相应的参数的。那咱们看一下这个参数是什么,对不?那咱们呢,去打印一下conso.log。对不,那咱们呢,去看一下咱们的程序刷新看一下。
12:03
比如说啊老师选择手机,手机通讯手机。添加SKU。这回呢,咱们呢,去瞄一眼啊,盯住底下的这个数据来开始收集。对不?你看你勾选的是第三张图,你会发现他给咱们注入的是一个数组,数组里面有一个元素,你再勾两个元素。对不,那所以说咱们要收集到的数据啊,已经收集到了,对吧,比如说带给服务器的。图片的名称,图片的地址,PID,这些咱们都收集到。对不?但是这里面呢,要注意一件事,收集的字段当中,他缺少一个。咱们呢,可以看一下呢,已经完成的这个项目,咱们可以看一下。比如说呢,老师呢,选中一个早上对吧,早上好看一下,他呢是有图片列表的。
13:01
那比如说啊,我现在勾中是他对不,那么当你点击的时候会发请求的。那这个呢,是带给服务器的参数,咱们可以看一下。找一下子,那么带给服务器的参数啊,应该叫做SKU image list。那么它带给服务器的参数字段你看一下,你会发现它还有一个字段叫做is default等于零。对不,所以说这块呢,要注意一件事,咱们现在收集到的这个数据的字段是不完整的。你看老师呢,再给你们测试一下子,咱们还是看已经完成了这个IPHONE12。盯住了看这啊,老师选中两个。对不?当老师一点击保存的时候会发请求对不?那你看一下子他带给服务器的字段,找他的图片这里,你看它都是带有什么,带有is default这个字段。
14:01
对不,这is DeFine这个字段是控制啥的,控制的右侧它到底是不是默认的。对不?如果is default等于零,那代表啥?代表的是设置默认,如果是一,代表真的设置为默认了。对不?但是你会发现一件事,什么事这块要注意。那这块呢,可以获取到用户哎,选中图片的信息数据。但是需要注意。那么当前收集的数据当中。那么缺少叫做is deft default字段。对不,那有的同学说,老师那什么时候去加上这个is default字段,咱们一会再说。那也就是说现在咱们勾选到的这些数据啊,是能拿到,但是缺少字段,那咱们呢,先给他进行啥进行收集,先存储起来。
15:06
那有的小伙伴可能会说,老师,那收集到哪里呀?是收集到SKU的,SKU的这个SQ以为list里面吗。你这块要注意啊,你不能收集在这儿,为什么呢?因为现在你收集到的数据是不完整的。对不,那你这个SKU info是将来提交给服务器的。而你现在如果直接把这个数组复制给他,那你收集的数据是不完整的。所以说咱们不能收集在这。那当然你也不能收集到哪,你也不能收集到这儿。因为这块呢,是服务器返回的那个图片列表那个数组,如果你收集到这里,那你就会发现你勾上谁一点击保存,或者你勾上谁,诶这块只有你勾上那张图片,而别的图片没有了。所以说老师以前说过收集数据呢,你可以先收集在任何的地方,将来当你点击保存按钮的时候,把数据一整理就行了。
16:04
对不,那所以说你看老师呢,在这呢写一下吧,这是收集图片的数据的字段。咱们叫什么?叫做image list为一个空数。那咱们呢,可以把用户收集到的就是选中这些图片复制给他,这点image list等于para。但是这个字段收集的数据啊,需要注意哎。但是需要注意,但是需要注意,那么收集的数据目前缺少什么?哎,缺少is default叫is deft default字段。对不,哎,那将来。提交给。服务器数据的时候,那么需要整理参数。那咱们呢,刚刚也看见了,说老师那个is default段用来干什么的,是用来设置,到底谁是默认。
17:05
也就说sort等于一,它是默认的,等于零是设置默认。因为你会发现操作的这块结构,操作的这块结构它只有一个默认,其余的都是啥设置默认。对不,这不排他操作。但是你会发现很尴尬的一件事,你看啊,咱们还是看咱们的数据你看啊。来,老师来给你刷新,咱们呢,还是看咱们的数据。但是你会发现一件事,什么事?现在服务器给咱们返回的数据是没有is default这个字段,那这该怎么整?对吧,咱们找到SQ放找到咱们的呃,SQ image例子。又发现服务器给咱们返回的字段是没有it default这个字段,那这个怎么整?对不,那可以怎么办?可以把服务器返回的数据返回的那一刻给它加上。对不?对不,那所以说你看啊,咱们当年在获取图片列表的数据的时候,看这。
18:06
对不对。你可以怎么办?你可以这么办。对不,比如说你赖一个,哎,赖一个。Light,一个叫list,这个不就是咱图片的那个数组吗?那我可以怎么办?这么办?List表a for each。Each for each。对,不,那么item是什么?是每一个图片的信息,我可以给每一个图片的信息加上一个叫做is default字段。那初始值为几为零?那这块要注意零代表的是什么?零代表的是设置默认,一代表的是默认。对不?那当然,你需要把这个数据复制给咱们的谁是this.pu啊好,最开始叫啥呢?叫PU image list等于谁?等于list。那这回呢,咱们再刷新再看一下。
19:02
那也就是说老师做成做成了一件事什么事,当服务器返回图片数据的时候,我给每一条数据加上了一个叫做it default这这样的一个字段。对不,咱们呢,去看一下数据,找到咱们的PU image list。对吧,是不是多了一个叫default这样的一个字段。那这块要注意零代表什么,零代表的是显示设置默认。一代表的是默认。那所以说要注意咱们已经有这个字段了,那这里要注意一件事,他两者只能二选一。所以这块咱可以来个啥,来个V-if。那么如果你的肉肉是图片的信息,它的a default如果等等于零,那是显示它,那否则呢?对不,那V告诉谁?Else,否则显示的是默认。所以说你会发现一件事,咱们刷新现在咱们的数据当中,哎,只会二选一,现在展示的都是设置默认。
20:08
对不对。对不,那么当你点击的那一刻,当你点击的那一刻,是不是要设置为默认,比如说要切换为啥是不是要切换为默认。对不,那就是当你一点击的时候,你要把咱当前你点击的这个图片信息的it default字段设置为一。那不就显示他了。对不,那所以说咱们呢,给他绑定一个单机事件。咱们叫什么叫做change啊,Default def啊,Alt default。但是你要注意要不要传参。对不,这块呢,一定是需要传参的,为什么?因为这块是排他操作。你点击的这个是默认,其余的都是设置默认。对不对,这不拍他操作吗?就是你点击的这个图片的信息,它的s default是呃是一,其余的都是。
21:03
那所以说咱们要传两个参数,一个是是你正在点击的这个图片的信息肉。对不,另外一个是啥?是包含你这个图片信息的外层的那个数组,那外层那个数组是谁?那不就是po image list。但是这个参数你可传可不传,因为在咱们的想是数据身上是有。对不?那所以说咱们就不传了。那当然咱们目前是没有这个方法的,所以说咱们呢,要书写一下。叫做change default。对不,那所以说这块咱们书写一下,就是排他的操作。你看当你一点击的时候,你要干什么。对不,当你点击的时候是要把图片列表的数据。数据的is defut default字段,哎,变为啥都变为咱们的零,只有你点击的那个变为一,那就说c.PU以image list.for each。
22:10
那么我让所有的图片的信息的is default字段为零。但是只有你点击,哎,点击的那个图片。的数据变为一,那这样他俩就切换了,那就说road is default1。那咱们呢,可以看一下刷新看一下。手机。手机通讯手机对不添加SKU,你看比如说我点击设置默认,是不是只有你选中这个设置为默认,其余的都是设置默认。对不?而且在这一刻你要注意一件事,你选中的这个图片的信息是要设置为默认图的。那所以说默认图片的数据咱们也能收集到,在哪呢?在这儿。
23:00
叫做咱们看下叫做S,呃,叫做看一下子默认图找一下在这呢,SKU default image。那不就是你点击的设置word的这个这个这个图片的信息吗。所以说在这咱们再收集一下什么,收集一下默认图片的,哎,图片的地址。对不,那咱们这会写呗,就是这点谁puku info点。看一下子,它这个字段叫什么,叫做SKU default image对吧,这个SKU default image等一下是不是等于road肉,看一下肉的什么类的,应该是肉的找一下。咱刷新看下那个字段。手机手机通讯手机对不添加找到咱相应的这个字段啊,你点击的这个咱们呢,找到数据看一下它应该叫啥,应该叫image URL,我记得。对吧,但是呢,还是得确定一下。
24:01
找一下PU image list找一下应该是image URL,对不?那不就是肉点image URL吗?那所以说咱们回首再看一下数据,有没有收集到盯住咱们的数据,SQ放。对不?首先说手机。手机通讯手机对不添加SQ。那首先说啊,咱们得盯住这块的数据啊,盯住这块的数据,咱们看一下子。比如说老师勾中他和他。对吧,那我是把数据收集到哪了,是不是收集到了咱们的叫做image list这里,因为这块的字段还不完整。对吧,但是现在已经完整了。对不,那以及还有谁呢?以及还有就是咱们的这个默认图片的地址,盯住这啊。盯住这儿。对吧,设置默认对吧,所以说这些数据呢,咱们已经收集到了,那现在剩下的活无非是什么,无非是点击保存,发请求以及取消的业务。
我来说两句