00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们去完成添加SKU的静态组件。那咱们呢,去看一下已经完成的这个项目啊。比如说用户选择手机。手机通讯以及手机。那比如说啊,当三级分类确定的那一刻,那么会在场景为零的这里,用table展示出所有的po列表。而且呢,咱们当年也说过PU,你可以当做一个类。那么你是可以给当前的这个类添加很多实例。对吧,那所以说当你点击添加SKU的时候,那说白了是给当前的这个类添加啥是不是实例。那这里面你会发现,诶,当前的这个类的名要展示对不,以及用咱们的这些表单元素是不是收集相应的数据。
01:04
以及点击保存的时候,是不是真的给当前的这个类添加了一个实例。那所以说啊,咱们先把它相应的静态给它完成。那咱们呢,去看一下咱们的这个啊。你看选择手机。手机通讯手机,那么当你点击添加按钮的时候,应该切换场景,应该切换为场景启能切换为场景二,因为现在是零场景。那这是一。那以及这个是几,这个是二。对不,所以说一点击这个按钮,那咱们看一下,看一下咱们相应的组件。那么当你点击这个添加SKU这个按钮的时候,那咱来一个艾特谁click。那咱起名呢,就叫做ADDSQ。那当然咱们刚刚看的这个结构当中,你也发现了。
02:02
对于添加类的实例的时候,这个类的名字是要用的,因为你得知道是给哪一个类添加实例。所以说当你点击的时候,把相应的人家对应的这个类的信息也给人家传进来。对不,那当然咱们没有这个方法,那咱们呢,需要在底下呢去书写一下。那这个是什么呢?是添加SKU按钮的回调。那你要琢磨你要干什么呀?就是当你一点击添加按钮的时候,你是不是要切换场景,切换场景为几为二。对不,咱当年说过012。那所以说咱们这里呢,要切换场景。哎,场景为几为二,那也就是说这点sca等于几等于二,应该是添加SKU的这个组件了。对不,那咱们呢,看一下手机。
03:02
手机通讯手机一点击添加实例走是不是切过来。对不,那所以说啊,咱们要完成人家相应的静态。那咱们看一下这个放。虽然说它有几个项,一个两三四五六七八,说八项。那所以说啊,咱们呢,找到咱们的这个组件,那去给它完成它相应的静态的结构。那首先说啊,它外层的一定是一个EL杠。那么当然目前咱们而言是不需要收集数据。那首先说啊,它是有八项,那咱一个一个排对吧,八个EL。杠放杠。对不,这是第一项。啊,当然啊,那咱们呢,这个呢,先给它来一个吧,EL杠放杠艾,当然第一项里面什么都不需要。你看一下子嘛,什么都不需要,只是展示一个文字海绵宝宝。
04:01
对不,那当然这个label叫做什么?这个label叫做PU的名称,那咱们这里面改了静态叫做PU的名称。那当然它这一项里面呢,是有个文字的,那咱们先写上叫做海绵,不不对,不先不考虑那个业务啊,咱们只是把静态给它完成。对不切换到咱这儿是不是就这样。那以及还有SQ的名称,像这仨,哎,其实都差不多,都是一个音铺。那所以说咱们来第二项。EL杠。A-item带input。咱们先说label label是什么呢?是SKU的名称,是实例的名称。这呢就是SKU的。名称。那以及咱们目前啊,是不需要收集数据。对不,那以及它是有占位的place hold叫SQ名称,那咱们这里面呢,给他来一个叫做place place。
05:00
呃,Hold,对,不叫做SKU名称。对吧,那咱们呢,去看一下咱们的结构O不OK对吧?哎,没问题的。那以及还有价格重量对不,那这块就好整了,那这块是不是完全就是可以直接复制。对不,那这块是什么,是价格,咱们格式化一下。对吧,那这块呢,应该是价格,哎,价格。对吧,括弧有里面有个原子。对不,那这块也是一样,价格括弧圆。哎,圆。那以及啊,底下这儿还有一个什么,底下这儿呢,还有叫重量是千克的。那咱们呢,也给他完成一下。那这块咱也一样,直接复制就行了。那这块呢,应该叫做什么呀,来对准了应该叫做重量,而且叫做千克。对吧,哎,重量。
06:00
重量啊,重量对吧,括弧千克。千克,那以及底下这儿呢,也是一样的,那这个place holder也是一样,咱也直接给他拿过来。对吧,哎,这是他。那咱们呢,去看一下咱们的结构对不对,对吧,哎,没问题。那以及底下这儿啊,有一个test对吧,叫规格的描述。那咱们这里面呢,你还得来一项对不,那咱搞一下子叫做EL没有提示了是吧,那么咱们呢,重新跑一下。那么它紧随其后的是一个什么?是一个test?对吧,那就是EL。放杠艾特。但是要注意看他这玩意叫啥来着,叫描述吧,看一下子是不是叫描啊,规格描述。说这个label呢,咱起名叫规格描述规格啊描述。以及他的type应该是什么,是test,对不,Type为。
07:03
T a2e以及让的肉为己为四。那咱们呢,保存一下子去看一下它的结构O不OK,看一下咱们这个这是没问题的。对吧,基本的结构没问题。那以及这块呢,还有个平台属性,但是你会发现平台属性右侧有两个下拉框。对不对,所以说咱们得用到行内的form了,里面一下展示多个,一定是用行内的。那所以说啊,咱们这呢,给它来一个就是EL-for。Item。那当然这里面咱们先什么都没有看一下他的这个名字label叫啥叫做平台属性,那咱这儿也是一样平台属性。哎,平台属性。但是你要注意就是它里面将来有多个下拉框,所以一定还得放啥放行内放,而且它前面它还有啥,还有label。对不,那所以说咱们给他来一个,那就是啥EL杠放,而且是行内的。
08:04
那当然,咱们目前也不需要收集数据。对不,那以及它这块呢,是有下拉框,那就是EL-select对吧,应该是EL-form带谁带select。当然这个名字呢,咱们先按照他的写,叫做屏幕尺寸。那这块呢,咱给他来一个,那这块呢,应该叫什么叫做屏幕的。尺寸。对不,那当然咱们现在不需要收集数据。以及police holder,咱们看它叫什么,它叫做请选择,那咱也来一个叫做啥叫做请选择。对不,哎,叫做情。选择。来选择。对不,为了不让它报错,咱们先给它加一个Y对吧,先给它来一个空值。那咱们先看看咱们的这个结构O不OK,看一下对吧?哎,屏幕尺寸,将来你再多一个slide v杠,那不就出来了。对不,所以这块给他完事了。
09:01
那平台属性其实跟底下的这个,呃,看一下子和底下的这个销售属性几乎是一模一样。那所以说啊,咱们这儿呢,直接给它复制就行了,CTRLC。CTRLV把这块呢给他改一下子,这块呢,咱们叫什么叫做销售属性。对不,哎,叫做销售属性。那咱们也去看一下咱们的结构是不是OK的。对吧,当然这款叫什么都行,现在。那以及底下这块呢,还有还有一项,但是放的啥,放的是table。那咱们呢,也搞一下子这块老师也给到合上。对吧,哎,这个老师给他切换一下,那行咱接着往底下搞,那还有一项EL。放。对吧,哎,又没提示了,老师呢,保存一下啊保存一下。在这EL杠放。好吧,那咱们呢,再重新进来一下。以及底下呢,还有一个是还有一项里面放的是表格table,那咱们呢,来一下就是EL。
10:04
哎,这个破VS扣的是吧,卸了好多回EL杠放艾,但是要注意里面放的是什么。这块一定要注意,放的可是一个table。而且你看咱们先看这玩意儿叫啥叫做图片列表,那咱这也写一个叫图片列表。对吧,哎,图片列表。那一集它里面放的啥?放的是table,而且是有几列,1234列。那所以说呢,咱们呢,给它来一个叫做EL-table。哎,保存一下这块呢,应该叫做EL杠,哎,又没提示了。呃,这个VS今天不知道怎么回事啊。找你。看下这啊,这块呢,应该放置的是一个table。那所以说啊,咱们应该是来一个叫E。这个这个没提示是好难受啊是吧。好,那咱们再试一下EL。对吧,那再切换一下吧。
11:03
走。稍微等一下。OK吧,咱格式化一下。诶稍微,诶这格式化都没出来,出来了好格式化一下。这到底下这儿啊,要注意它这个图片列表里面放的啥,放的是一个table EL-table。对不,而且要注意咱们目前是没数据的,所以说给他干掉。对吧,哎,以及这个table是带边框的,所以说咱们给它加个啥呢,加一个border。那以及它是有几列呢?它是有四列,所以说咱们再复制三一个。对吧。两个三个四个,那咱们呢,格式化一下,这样好看一下。但是呢,咱们要注意咱们的一个改这个叫什么叫图片名称,操作从第二列开始。那所以说这一块叫什么叫图片。哎,图片。对不以及名称,我看是不是叫名称。
12:02
图片名称操作,那这个呢叫做名称。对吧,底下这个呢,叫做操作。对不,那咱们呢,去看一下它的这个第一个的第一列的宽度是比较小的,对吧,那咱们这个宽度呢,给它来一个80。对吧,但是你要注意啊,第一列跟咱们以前不一样了。咱们以前经常干什么,经常写的是不是一个带索引值的这样的一个东西。对不,咱们测试一下。看一下静态结构。咱们以前写的时候啊,这块呢,经常是放的是一个什么,放的是不是一个那个索引值,但是现在他不是他放的前面啥是不是带这个呃,复选框的。那咱们得看一下,得找一下table的这个组件。找一下table,你看它有没有表格前面带什么的,带这个复选框的。咱们找一下,看一下有没有。对吧,啊看一下。
13:00
有吧,那咱们看下它是怎么写的,第一列,那咱就找第一列的。Color,对不?他写了一个叫type为selection,加上它是不是就有了?那咱们呢,还是得测试一下,看一下。对不,那咱们呢,回到咱这儿刷新一下,看一下的有没有。对吧,哎,还是在测试。添加SKU,咱们瞄眼是不是有了对吧,那以及底下呢,还有两个按钮,保存和取消,当然它也得用一个item,因为你会发现他们之间是不是有距离。对不,所以说啊,咱们这呢,老师呢,先把这给到和上,咱们再来一个叫做EL杠放杠。但是这里面需要放的是什么呢?看一下它前面是没有label。它这里面需要放置的是两个按钮,对不,一个是保存,一个是取消,那就是EL-button。对吧,那这个呢是保存。还有一个呢,是没有颜色的,叫取消EL-button,这个叫取消,当然它没有颜色,你把T去掉就行了。
14:05
那咱们呢,去看一下咱们的静态的结构,对吧?啊是不是就完成了。所以说先完成咱们的静态,接下来咱们再去完成咱们相应的动态的业务。OK吧?
我来说两句