00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成SKU列表的展示。那咱们呢,先看一下呢,已经完成了这个项目。比如说啊,用户选择的是手机。手机通讯。手机。那么对于某一个PU而言。我们呢,可以给他添加很多的实例。那么当你点击。查看当前类的实例的列表的时候啊,会把这个类所添加的所有的实例啊,通过一个table进行展示。OK吧,那所以说啊,接下来呢,咱们要完成的就是这里的业务逻辑,那也就是说当你一点击这个按钮的时候。那么会弹出一个对话框。去获取相应的SKU的数据进行展示。对吧,那所以说啊,回到咱们的项目当中,咱们呢,一点一点的给他完成。
01:06
那首先说啊,第一件事儿,那么当你点击这个按钮的时候啊,查看SKU列表的时候,那一定呢是要发请求的。那咱们的去找一下咱们的swagger对吧,对应的应该是相应的SKU这里。那他们应该是哪个接口呢?咱们看一下吧。就是这个。那么通过通过谁,通过SPU,通过类的ID去查询相应的SKU。那所以说啊,咱们呢,先把它的接口啊,先给它写好。对吧。好,那咱们呢,去写一下咱们的API,应该呢,也是属于咱们的po。那这个呢,咱们呢做一下笔记,这个呢是获取SKU列表数据的接口。那当然,这是他的请求的地址,那以及是盖的请求。
02:03
Port。Cost。比如说咱们就叫做re eqsku list。对不,那等于,那当然咱们呢是需要携带参数的,带的是po的ID。那以及啊,当然也需要把服务器的数据啊,是不是进行返回。那咱们写一下应该是URL对吧,咱们的地址,但是别忘记了啊,它是需要携带参数的,所以说这块呢,要带一个Dollar。那以及是什么请求呢?Method为咱们的get请求。那咱们呢,目前而言啊,只是完成了一件事,什么事啊,把咱们的接口给他写好了。那咱们呢,还得把相应的静态啊也给它完成。那也就是说,当老师一点击这个按钮的时候,应该弹出一个dialogue对话框,而且对话框啊里面呢,应该有table。
03:01
那所以说啊,咱们去找一下咱们的组件dialogue。那咱们看一下的dialog有没有显示表格的。以及像什么?哎,看这,打开嵌套表格的diallo。他那你再看咱已经写好了,咱要的是不是就是它,对不要就是它。那所以说啊,那咱们的找到这个这。对吧。找到这,那咱们呢,把它呢给它带走对吧,复制一下,那找到咱们的副组件这里,找到咱们的副组件这。那在这里呢,咱们呢,要扔一个啥呀,扔一个对话框啊对话框。老师呢,给他格式化一下。咱们呢,先一点一点的去调调,首先说对话框的这个开头,咱们看一下。这个title应该叫什么,叫做那个类的什么SKU的列表。
04:02
对不?当然啊,这个对话框什么时候才会显示呢?你要注意啊,这块呢,一定一定要注意,老师呢,先把这呢给它格式化一下。打顿了,那老师呢,重新积累一下。这块呢,要注意一件事,就是咱们的这个对话框啊,何时显示出来的,是当你点击那个按钮的时候,是不是才显示出来。对不,那所以说啊,咱们呢,一点点来一点点来看这儿,那咱们呢,找到相应的那个按钮。对不,那咱找一下子应该呢,叫做查看当前PU全部的SKU列表。那咱们呢,需要给他绑定一个单机世界。当你点击的时候啊,比如说呢,咱们叫做什么叫做handler对不。那当然咱们目前是没有这个方法。那咱们呢,给他带走。给带走。那这个呢,应该是什么呢,是查看斜下哎。
05:04
查看SKU的按钮的回调,哎,按钮的回调,当你一点击的时候啊,会执行。那你看一下人家的这个对话框。那么当你点击这个按钮的时候,你是需要通过一个属性叫做dialogue table visible去控制它显示与隐藏。那当然,在默认的情况下,对话框应该是隐藏的。那所以说啊,咱们在这呢,再给它添加一个属性,就是它默认呢,为啥呢,为呃为false。对不,那这个是控制什么呢?控制哎,控制对话框的显示与隐藏。对不,所以说看一下咱们的dialogue是不是通过它点击是不是进行控制。啊,那当然咱们的table啊。Table咱们先不着急,到时候咱们再一个一个写。
06:02
对不?那咱们先看一下,把dialogue这个东西呢,先给它整出来,那就说默认了dialogue是隐藏的。那么当你一点击那个按钮的时候,这个值应该为啥为真对不?所以说当点击哎这个按钮的时候,咱们的对话框是可见的。对吧?那应该是this their their log a table visible,为什么呀,为true。所以说啊,咱们呢,先把这呢,先给它整出来看一下刷新。手机手机通讯手机,当你一点击这个按钮的时候,咱们的对话框是不是就出来了。那当然这块呢,你要注意,当你点击这个按钮的时候,你得知道你是查看哪一个类的实例。对不对。对吧,那所以说咱们呢,当你点击这个按钮的时候,找到咱们这个按钮。
07:00
找到这个按钮,你需要把你点击的那个销售啊,应该叫啥呀,应该叫做PU的数据给人家怎么的,是不是传递过来,因为将来人家发请求得知道你是哪一个po的实力。所以说咱们呢,把肉啊给它扔进来,对吧,那肉其实就是谁就是PU。那么当你一点击的时候,要注意啊,你不仅仅说只是。看这你不仅仅说只是哎,只是弹出一个对话框,那你对话框当中的这个收货地址,你能是死的吗。对吧,就这块你能是死的吗?不能吧,那应该是什么?是你点击的这个啊,点击你看啊,你看人已经写好了,这个是你点击的这个PU的啥说名字。对吧,那所以说咱们的这个PU你得存储一下。对吧,在哪呢,在这呢,咱们得存储一下。那所以说啊,咱们呢,需要在这儿声明一个PU对吧。
08:04
那初始值为啥为空对象?那么当你一点击传过来之后,那咱们呢,要咋的,是不是保存po的信息。那就说这点PU等于PU。对不,那所以说这块呢,就得写动态的了。对不,那应该写什么?是不是应该写咱们的PU?写一下是咱们的pu.pu name对吧,那咱们这样来个模板字符串吧。应该是pu.pu name的。对吧的SKU的列表。那咱们呢,看一下子刷新看咱们的这个。对吧,比如说手机手机通讯手机对吧,就比如说苹果12看一下子。IPHONE12的SQ列表以及。呃,它的SKU列表对吧,那当然。
09:00
那你是需要向服务器发请求的。拿到这些SKU实力。那所以说什么时候发呢?就是当你每一次点击不同的PU的这个按钮的时候,你都要发请求的。都要获取到。那所以说那咱们呢,去发请求。那这块呢,咱们写一下,就是获取SKU列表的数据进行展示,来进行展示。那咱们写一下这点到API点,应该是咱们的PU点点谁看一下的。应该是咱们的点叫做REQ,呃呃,SK list,对吧?它需要携带的是谁呢?是SPU的ID。那当然,咱们呢,需要拿到它away,对不,拿到它返回的结果,那这就是a think。对吧,咱们格式化一下。那咱们呢,需要拿到它返回的结果造。
10:01
那咱们呢,需要打印一下子,看一下子能不能拿到相应的SQ的列表的数据。那咱们呢,去测试一下刷新。手机、手机、通讯手机。对不看这啊,当老师一点击的时候,OK,发了请求以及数据也拿到了。对吧,这不是个数组吗?那所以说啊,对于SKU的数据,咱们需要存储,那咱们呢,在这儿,那就是SKU list对吧,是一个数据,那这个呢,是存储的是啊SKU。列表的数据。那么当服务器的数据返回之后啊,那咱们当然是需要的是存储的,比如说如果你的result.code的等等于200。那咱们的这点SKU list就应该等于result.date。那咱们的测试一下子看一下当前的副组件身上有没有相应的SKU列表的数据。
11:06
对不,那如果说数据有了,那无非在dialogue当中是不是放一个放一个呃,Table是不是就可以显示出来了。对吧,那咱们测试一下有没有盯住数据,应该是SQ list。对吧,盯住SKU list啊。切一下对吧,咱们看一下子有了吧,那剩下的活无非啊是在它的里面放一个table。对不,那所以说对话框当中咱们用table,哎,Table。哎,展示咱们的。展示咱们的SQ列表的数据就可以了。对吧,所以说table展示SKU的列表。那这里面呢,咱们呢,看一下呢,人家已经写好了这个啊,它有几列,12344列。那所以说啊,咱们这里呢,需要有一个EL-table,那当然table的数据记为谁,是不是记为咱们的SKU SQ list。
12:09
对不,那所以说date那不就是SKU list。对不,那咱们呢,给他往上提提,稍微好看一下对吧,那以及style咱们也给他往上提提,那当然他是需要带谁带border。对不border,那以及咱们看已经完成了这个啊,分别有四列叫做名称,价格,重量,默认图片。那所以说啊,咱们呢,是需要有四级,呃,有四列,那这有一列了,那再来第二列。对吧,第三列以及第四列。那么相应的label咱们呢,需要替换分别叫名称价格,那这块呢,咱来一个叫做名称。那以及啊,这里呢,叫做价格,哎,价格。那以及啊,还有什么呀,还有这个重量和默认图片,那这块呢,是谁是重量。
13:02
对吧,那以及底下这儿呢,还有一个叫做默认。图片。那咱们呢,去看一下咱们的自己的对话框,数据有了,那么table的表格应该有一个大概的这样的一个轮廓了。那咱们呢,去看一下对吧。那剩下的活无非呢,是把这些相应的字段呢,你给他展示出来就行了。首先说名称,那名称应该是谁呢?应该是咱们的SKU的name。对不,那所以说咱们第一列的这个字段应该是SKU name。对不,那咱们看一下数据有没有对吧。有了以及价格应该是谁,应该是price。对不,那以及还有重量,咱们先把这个替换了,这个呢是咱们的,呃,价格以及呢,还有重量,重量呢应该叫啥呢,叫weak。对不?啊wait,所以说呢,咱们呢,把这个第三列的这块的字段也给它显示出来。
14:04
那以及最后一个是图片,那么图片呢,当然呢,是要显示他的地址。那所以说啊,咱们这里呢,需要作用于插槽,那所以说proper就不需要对吧,展示的不是呃字符串,所以咱来个lo。那这块呢,就得有相应的肉了,肉是啥?肉是不是就是每一个?每个SKU了对吧,以及Dollar inex。那这里面呢,咱们需要的是谁啊?需要的是image,那当然是动态。那这里面呢,咱们需要的是谁?是肉的,看一下子应该叫肉的,呃,我没记错,我看一下子肉的什么来的,行,那咱们先给它注释一下。对吧,看一下的那个字段啊。手机。手机通讯以及手机对吧,咱们呢,去看一下数据啊,看一下数据。边界一下,那应该叫做切换一下,哎,走。
15:01
SKU乙酶list对吧。这个是没有的,咱们找一下这个苹果12。这呢,咱们来看一下它的应该叫什么,应该叫做SQ default image。对吧,那所以说啊,咱们呢,把它呢,给它替换一下,应该肉点它,咱们看一下图片的个头大不大。对不来们刷新看一下。手机手机通讯手机以及看一下的有没有图片啊,这个是没有的,对吧,那这个是有。但是呢,图片太大了,那所以说咱们给图片呢,小一点,给他写一个style之后呢,宽度呢,给它来一个100,以及呢,高度啊,咱们也给它来一个100就完事。那所以说啊,咱们的PU列表的数据的展示呢,咱们给它完成了。但是呢,还有一些小细活,小细活呢,咱们在下一个。下一堂课当中咱们再说好吧,所以说咱们完成了相应的SKU列表的展示,就这块儿呢,应该是没有问题的。
我来说两句