00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成SKU查看详情的业务。那咱们呢,先看一下子已经完成的这个项目。比如说啊,在这里呢,咱们展示了所有的SQ的列表。那你可以查看某一个SKU的详情。那么当你点击第三个按钮的时候,查看详情,其实查看的就是当前SKU的详情。那么会从右侧向左弹出一个抽屉的这样一个效果。当然抽屉的这个效果呢,是用饿了么UI当中的UI组件。那也就是说,当你点击这个按钮的时候,是要向服务器发请求的,获取到当前SKU的详情进行展示的。那所以说啊,咱们呢是需要发请求的,那咱们呢,去找一下咱们的相应的接口。
01:03
那这个接口是谁呢?它呢是SKU接口当中的这个。叫做得到SKU通过ID,对不?也就说你通过SKU的ID得到SKU的详情。那所以说啊,回到咱们的SQ当中。那咱们呢,书写一下咱们的接口,那这个呢,是获取SKU详情的接口。那这个呢,是他的地址以及请求呢,是get请求。Export。Cost。那咱们叫做re EQ叫做呃,SKU by ID。当然需要带参数,带的就是SQ的ID。那当然服务器返回的数据啊,咱们呢是需要返回的。对不?那当然这里面呢,别忘记要拼接一下。那以及这个接口呢,是什么请求呢?是咱们的get请求。
02:05
哎,这是他。那这个接口什么时候发请求呢?要注意是当你点击这个按钮的时候,获取相应SQ的详情进行展示。对吧,你看吧。对不,那所以说咱们找到info这个类型的这个按钮,那咱们找一下咱们的这个组件SQ。那么应该啊,是info这个类型的按钮。那么当你点击它的时候,比如说艾特click。那咱们要干什么?要获取SKU的信息?那咱们就SKU info吧。那当然当前你点的这个SQ你需要传过去的,因为那个接口需要携带SQ的ID。那么目前而言啊,咱们呢,是没有这个方法的。那所以说啊,咱们呢,在这儿呢,写个方法。这个呢是获取SKU详情的方法。
03:03
那当然啊,这块呢,咱们就别叫肉了,就叫SKU。那所以说啊,你是需要发请求的,获取服务器的数据,那说wait。Dollar API。点SKU,点看一下咱们那个函数的名字叫做re EQ SQ by。对吧,那不就是他吗。需要携带的是什么?携带的是你点击的这个SKU的ID。那当然啊,你这写了a wait,这就得有a think。那咱们呢,需要接收服务器返回的结果,Result。那咱们接下来呢,打印一下,看一下服务器返回的数据格式到底是数组还是对象。咱们刷新看下咱们的这个。来盯住数据。那首先说啊成功了,而且它返回的数据啊是一个对象。那所以说你看这个对象里面存储的是什么,比如说像呃这个重量对吧,价格以及默认图片这些它都有。
04:09
那所以说啊,咱们要存储一下数据。那咱们存储到哪儿呢?咱找一个地儿。这个呢,咱们叫做SQ info。对不,那起始是空对象。那这个呢,是存储SKU信息的。那咱们呢,去判断一下,就说如果你的result点扣的等等于200,如果成功,那成功了你是不是就可以存储一下,对吧?SQ info等于点date。那也就是说,当你一点击这个按钮的时候啊。点击这个按钮的时候,对于当前SQ的详情的数据咱们已经能拿到了,但是你需要用一个抽屉的效果是不是进行展示。对吧,就是人家的这种效果。那所以说啊,咱们呢去找一下饿了么UI,咱们呢去看一下人家的文档对吧。
05:03
抽屉组件它呢,应该是在最底下这里。而且咱们的抽屉它的方向啊,是从哪到哪,是从右往左。对不,所以说你看默认是不是就从右往左一点击是不是出来了。对不啊,那咱们看它是怎么用的。那首先说啊,这块放的是radio按钮这四个,这不是咱要以及当你点击这个按钮的时候,会弹出咱们相应的就是它了,哎,这个叫啥,这个叫抽体。所以说咱们呢,把它的数据啊给他拿过来,那么老师呢,先把没用的地儿啊,结构先给你折上,那这块就是什么,就是咱们的抽屉效果。对吧,那咱呢,给他粘过来。那首先说啊,这个抽屉的这几个字段呢,咱们需要看一下子。来老师呢,都给它折上,这个呢,老师也给他拿过来看。这个老师往这边对的。这啊行,咱保存一下。
06:01
那首先说抬头是什么呢?抬头呢,其实是抽屉左上角这个抬头,而咱们已经写好这个是不需要抬头的。对不,那所以说抬头啊,咱们就不要给他干掉。之后呢,有一个招儿属性,其实是通过这个属性啊在控制着,控制着谁呢?控制着抽屉显示与隐藏,看见了吧。对吧,默认是FALSE1点击是不是变成真。那所以说啊,咱们呢,需要有一个这二的属性,第一。那这个其实你叫什么都行,你叫受它也行,对吧,比如咱们叫受吧,默认是啥是false。那所以说这块呢,咱给它改成谁改成寿。那一节啊,这个是控制抽屉的方向的,其实这个方向你看它这写的是不是从右到左。RTL吗?Right to left,其实默认的方向就是谁啊,从右到左,你咱们可以看一下。默认的方向,咱们找一下direction。
07:03
默认值啊,你看它的默认值,默认值就是从右到左的,所以说这个咱们就不需要。那以及啊,还有一个事件,其实是个属性是个事件啊,什么事件就是点叉子那个按钮,关闭咱们的这个抽屉,这个咱们不需要,为什么呢?你看一下。咱们已经写好,这个是没有右上角这个叉子按钮。以及咱们再看一下,你会发现人家写好这个抽屉很大。对不,那咱们看看咱们这个,咱们这个是不是报错了,咱们看一下啊。看哪里出现了问题。对不呃,Div啊对吧,应该是这个div的问题,Div咱找一下是不是多了一个干掉。那咱们这回呢,再运行一下,看一下可能刚刚是不是复制多了。对吧,应该是不是多就是少了,咱们来看一下结构吧,看一下结构,那这个呢,咱给他来一个啊这对吧。这样呢,咱们呢,看一下子能跑起来,应该是结构出现了一丢丢的小问题啊第。
08:04
行,那咱们呢,看一下吧,顶上有个div,那底下呢也得有一个div吧,哎,Div。大题对吧,之后呢,咱们刷新看一下子。对吧,那这样的吧,咱们呢,把它整体的这个结构给它打开。对不,其实咱们对一下,咱们先把这先给它干掉,对吧,先给它剪切掉这个给他带走。那这回咱们保存一下这个结果应该是不会有问题的。啊,那所以说咱们抽屉这应该是出现问题了,咱给他再拿过来。其实抽屉这也没啥,就是两个按钮啊,对吧,这应该也是没问题的刷新。对吧,这个编辑器有的时候有问题啊,好了,老师什么都没动啊,什么都没动,那这块呢,要注意一件事,那么当你点击这个按钮的时候,咱们的抽屉应该出来。对不对,那所以当你一点击那个按钮的时候,你要把兽变成啥,变成真。那这块呢,咱们写一下子,这个呢是获取啊获取SKU。
09:04
SK的数据。对吧,那也千万别忘记了,咱们是不是要展示抽屉。哎,展示抽屉,那就说把这点受啊变上变成正。对吧,这样呢,咱们呢,看一下咱们的抽屉会不会出来,这是没问题。但是你要注意啊,咱这个叉子是不是没有,还得找文档。咱们看一下吧,看这啊是否显示关闭按钮,那咱们不需要,那就给它改为啥,改为false就行了,默认是处。对不,所以说咱们那个按钮是不需要的,它为什么呀,为触。那以及咱们呢,再看一下多测试来再看一下。刷新。看一下咱们这个叉子是不是没了,哎,还是有是吧,呃,应该是false啊处是显示false是没有对吧,这呢咱们呢再看看。走对吧,那以及你看一下子人家这个个头啊,这个抽屉效果还是很大的,咱们这个呢,你自己看一下咱们这个是不是有点小。
10:07
就是说呢,咱们改变一下它的大小,通过谁呢?通过size。改变抽屉窗口的大小,当使用number类型,以像素为单位完了,当使用string类型,可以传百分比。对不,那所以说啊,咱们呢,可以给他传一个size多少,比如说50%。对不,那咱们先看一下咱们的这个个头有没有大一些。对吧,确实大。之后你再看它这里面的一个布局啊,其实它这块的布局用到了什么呢?用到了饿了么UI当中的布局,咱们看一下。饿了么UI像那个bootrap一样,也是也有布局的layout布局,你看但是这块呢,一定要注意,就是咱们的饿了么UI啊,它是24位一栏。这块要注意。比如说你的24是占一栏,那就说十二十二,那是不是就一人一半。
11:01
那你看他已经写好这个,咱可以审查元素你看啊。一个是占五个,一个是占六个,那剩下是不是三对吧,那所以说啊,咱们呢,可以把它相应的结构啊,找一个给他带走。肉代表的是行啊对吧,肉代表的是这一行,行一行里面有多少个扣列对吧,所以说呢,咱们给它带走,找到咱们这里。对吧。好,那咱们呢,给他先拿过来。那这块的div啊,老师先不要了,咱们呢,就先写一些呃,数据在这展示一下看一下。比如说你看人家已经写好这个叫啥,人家写好这个叫名称什么什么对吧,那咱们先写个静态的叫名称。名称对吧,比如说为SKU。之后呢,咱们看一下呢,咱们自己的这个。对吧,这样不就有了吗?一个是占五,一个是占16啊五和16对吧,那咱们呢,给他搞一下,它占五份。
12:03
他占了16分。但是呢,咱们看一下咱们的这个结构啊,跟人家已经写好了这个样式啊,外观还是不一样的。咱们看一下。对吧,你看这回呢,咱们瞄一眼啊,它是占12,诶没有保存吗。对吧,哎,保存一下,这回呢,咱们的刷新再看一下子,其实咱们的这个样式啊,跟人家还是不一样的,对吧,但是一个占五个,一个占16个刘三。你看人家这个样式,你会发现文字的个头很大。对吧,那以及相应的这块的文字呢,其实也差不多,而且他俩之间是不是有边距对不?而且你看第一个应该是文字去用,对吧,所以说呢,咱们要写写样式啊,写写样式来看这。找到找到这个元素。这个元素呢,应该是肉下的这个扣。对不,哎带五的这个,所以说呢,咱们搞一下子写下样式。这个老师给他带走,他呢,应该是咱们的点点他。
13:01
哎,EL杠肉肉下的这个类名叫啥呢?就是咱找这个带五的这个吧,EL杠扣点五对吧,当然是类名。那咱们呢,给他来点儿样式啊,比如说老师呢,先来个文字的颜色为红色,看一下文字有没有变红色。刷新看一下。对吧,哎,是可以修改相应的样式的,那也就是说它的字体大小,咱们让它大一些方size。哎,Front size老师呢,给他来一个18吧。之后呢,文字拍杠应该是居right。那咱们先看一下有没有那样感觉。对吧,哎,居右了,那以及啊,它两者之间,这两个呃,两个肉之间啊,应该是有距离的。对不?所以说呢,咱们找一下子这几个肉,那咱们找一下子就是谁啊,其实就是叫这个EL杠扣下的这个呃扣啊。
14:02
点它之后呢,咱们呢,给它来一个margin margin之后呢,上下咱看一下它上下和左右,它应该是左右有距离,上下呢,咱给他来一个十吧,左右来也来个十吧。这呢,咱们先看一下子,这多了个点啊,看一下刷新看一下咱们的这个对吧,上下左右都来十像素。对吧,大概有这样的一些感觉了,对吧。那之后呢,咱们的剩下的活是什么呢?剩下的活是还有几个,咱们数数啊,还有几个,12345总共是五个,那所以说啊,咱们把这里啊,咱们呢,再给他来五个。对吧,CTRLCCTRLV,这是第二个,咱们再看一下结构。对吧,刷新看一下。对吧,这不就有了吗?总共呢是五个,那咱呢,这是两三四五,咱们隔着画一下。那剩下的活啊,无非呢,就是把这些数据啊给它展示出来,所以说名称叫什么,那咱这儿名称已经有了,那叫什么呢?那咱得写动态了。
15:09
他们应该是谁呢?应该是SKU音符下的某某某某某个字段,因为咱们的数据已经有了,这不这呢,咱们看是哪个字段啊,刷新。看一下。找一下咱们的数据,它呢,应该是在咱们的aepi下的这啊,不是APP面下的这。它们应该叫什么呢?咱们看一下应该叫SKU info,诶看一下刷新。那还是得盯一下数据。这个数据为空啊。来来来来来来,老师呢,这样式的,咱们呢,还是得盯一下数据啊,这块保存应该是没有完事,为了关一下子吧。关一下。咱们重新跑一下吧。找NY老师呢,找到咱们的这个组件,我先把这啊先给它,呃先给它住了吧,先写个123,咱们先看一下数据刷新看一下。
16:04
当一点击的时候发请求捞到数据之后,咱们看看数据叫什么。它呢,应该是P面下的他对吧,应该叫做SKU音O下的应该叫做SQ内,我记得咱们找一下。对不对吧,哎,这呢SQ name,所以说这块展示的数据应该是谁呀,就应该写动态的对吧,差个值叫SKU。音否下的他。对吧,老师先把这先给它关了之后,咱们看一下呢,有没有数据是不是有了,对吧,那以及还有底的是啥叫描述,那这块呢,咱们改一下这块呢叫描述。那这块呢,应该是什么呢,是SKU。SKU音fo啊,INF音fo下的谁呢?咱们看一下数据啊,应该是SKU info下的skub sc,这不就是描述吗?
17:00
对吧,那咱就用它吧,好吧,所以咱给他拿过来点汤。开点汤。以及还有什么呢,咱们再看一下以及啊,还有咱们相应的这个价格和平台属性,那咱们来一个价格,那这也一样。那这个呢,应该叫做价格。价格,价格这个好记,应该是咱们的SKU info。下的P。这咱们看一下子钱有没有了,对吧,刷新看一下。对吧,但是要注意它后面带圆,那咱也给它来一个圆。那以及还有什么呢?还有就是平台的属性对吧?哎,平台属性,平台属性它都是数字,应该是两个ID合并在一起的。这呢是平台属性。哎,平台属性那这块呢,但是你要注意啊,平台属性这里面,它它用的是啥tag。
18:00
咱们先看看平台的属性的数据是什么样子的啊,看下数据。平台属性应该是SKU t value list对吧?它用的是什么呢?用的是atd和value ID进行展示的,对吧?而且它是一个数组,而且你发现了它这里应该用的是EL tag,而且是多个,所以得变立。那所以说平台属性这里啊,咱们得用到呃作用与插槽了。对吧,那当然这里面呢,需要有咱们的肉,肉就是什么每一个SKU。对吧,Dollar in desk,那这里面呢,应该用的是谁啊,用的是咱们的tag。对吧,应该是EL-tag。呃,而且呢,它呢是什么色呢,它是这种色,这种色其实就是啥,就是咱们的那个,呃,Success类型的。争了,咱们要便利数据看一下,便利的数据是谁啊,刷新看一下。咱们便利的数据啊,应该是肉下的,找一下肉下的它。对吧,那所以说咱们便利一下子V杠放,V杠放。
19:04
那这个呢,咱们起一个名字吧,那咱就叫啥呢?就叫做at tr吧,平台属性index便利,便利的应该是肉点它。那以及当然你需要有KK,为什么呢,为平台属性的ID。对不?哎,那这回啊,咱们要看一下的,那以及他的名字应该用的是啥名字应该是用这俩ID展示出来的。对不,所以咱们这块呢,拼接一下子这块呢,用的是呃肉的。肉的选项,哎,肉的at t RA。ID之后,它中间有个杠。以及呢,还有谁呢,就是呃,肉不是不是肉啊,是at tr。对吧,At tr的atd和a tr的YID。Y流D对不这呢,咱们看一下这里的结构,看下咱们的这个有没有出来啊,看一下刷新看一下。
20:00
哎,并没有并没有,应该是咱们找错数据了,咱们叮嘱一下子啊,看一下子啊,肉是谁肉咱们找一下子啊。找一下了temple啊,Temple平台属性咱们得盯住了啊,得盯住了,咱们先看看这个肉是谁啊。应该是肉下的,它这块也没问题啊啊对这块的这块应该是at。行,那这回呢,咱们的刷新看一下有没有数据啊,应该是有数据了。走,哎,还是没有,那也就是说咱这个tag这应该是写错了。说吧对吧,那么咱们看一下吧,啊肉啊,应该是SQ音符,写什么肉啊。这块不应该写肉了啊,这块的。他变离的应该是谁呀?变离的应该是SKU info SKU info下的塔。对不,这块要注意啊,应该是SKU音否能拿到啊。好,那之后呢,咱们刷新一下看一下。走,看一下有没有对吧,这不就有了吗?以及T之间是有距离的,那咱们呢,给它写一个样式吧,这个咱给他来个style。
21:09
对不,那这个呢,咱们给它来个margin girl right吧,咱给它R来个十像素。只要看一下子有没有相应的距离,对吧,有了以及啊名称啊,不是以及底下这啊,这个叫商品属性,商品属性这里呢,它用到的是一个轮播图。对不对,用的是一个轮播图,那咱们这里面呢,可以找一下子饿了么UI当中的轮播图,对吧,你就搜CR。对吧,哎,走马灯不就是他吗。这个萝卜图怎么用呢?咱们看一下啊。先看下它的结构,Span是显示的这个文字。他用的是哪个组件呢?是EL杠,Caro就是它。对吧,那咱给他带走。那也就是说这块呢,应该是什么,咱们看它的名字叫啥,他的名字叫商品图片,那这块咱给他来来一个。
22:00
商品图片对不,那这里面呢,应该放的是咱们的轮播图。对不,那这个老师呢,给你格式化一下啊。行这块呢,咱们先看一下它的结构吧,看这啊它是EL castle高度呢是多少,是一百五之呢,里面呢有很多项,一项一项的,对吧,你看到没有,这每一项item在变历,所以说它应该是有四个。所以说咱们先刷新看下咱们的这个啊,刷新看一下。对吧,那咱们轮廓图是不是就来了,这还是很快的。对吧,超快的。那这块呢要注意,那咱们这里面呢,得显示图片,那也就是说这块呢,咱们呢,可以来一个叫啥呢,叫image吧。一位对了,以及咱们看一下子啊,看一下轮播这里啊,轮播这里有相应的样式。看不看见?他这块你看,因为我刚刚看到了啥有类名。对不有类名,所以它这里块是有样式的,那咱们呢,也把它的样式给他带走啊。对吧,这钥匙咱给他带走。
23:02
那这个样式呢,咱们就给它扔在这儿吧。对不,咱给他扔过来。好了,那之后咱们回首再看下咱们这个萝卜图,你看是不是有钥匙?对吧,是有钥匙对吧。但是这块要注意啊,它这面这里面显示的是啥是图片,那所以说啊,咱们这块的呢,就别再放咱们的这个,呃,这个这个刚刚里面放了啥,放了一个H几的,看一下刚刚里面好像是放了一个叫H几,让我删了叫H3。所以说咱们这里面应该放的啥,放的是妹纸,但是你以妹纸的图片地址是谁呀?对不不知道。对吧,而且你看他这啊,轮播图跟轮播图这里,它的每一项再编辑一个数字,所以说应该是有四张,那咱这个轮播图应该有多少张图呢,你得看数据。对不,咱们要去找一下数据。来刷新。就是图片的数据找一下应该是有的SQ info下的叫做SQ image list,咱这是七个。
24:03
那所以说这块便利的谁item下的叫做SKU info点他。那当然这块你得用item的ID了,对不?那当然咱们得看有没有ID,普遍是有ID。对吧,有的,那当然这里面呢,咱们就得用啥呢,用image。对不啊,一。Img s RC s RC呢应该是动态的,它呢应该写的是item的,看一下的应该叫以位纸ul对吧,那这块呢,应该是以位纸UL。那咱们去看一下咱们的图片刷新看一下。对不找你对吧,那咱们的图片也来了。对吧,这个大小老师就不再改了。这样咱们看一下了,你看他的这个,你看人家这个,你看人家这个。轮墨土底下这个小小圆球是小圆球。对吧,而咱的这个啥是一条一条的白线看没看见。
25:02
对不,那咱们呢,把它的样式呢,也改一下子,因为人家默认写的这个样式的外观是不是就是这种的,所以咱们要改一下的这个小按钮。那这个小按钮呢,咱们搞一下试尝试一下能不能改掉。对不来,那咱们的测试一下,看这咱找到这个这个这小线,对不看一下它应该是哪块的,哎,应该就是这个button。对吧,这个类名叫什么叫EL杠,Carl杠,Button,那咱们去改一下子它的一个样式。那咱们这里面呢,有两个带对吧,那一个是不带Co的,一个是带Co,咱们现在不带Co,这里尝试一下对不?那老师呢,给他来个宽度,宽度的是十像素。对不高度老师们也给他来个十像素正。背景颜色BA background为红色对不以及border-2a Di us为50%。
26:05
那咱们先看一下子样式有没有发生变化,看一下咱们的这个。对吧,样式是不是也调了,但是你看啊,如果老师把这个小球的这个样式放到cope当中,你看一下它为什么不行。对不?哎,你看放到stop当中它就不行,你看嘛,放在style当中就是可以,那为什么呢。对不?这就是接下来咱们要所讲的一个小知识点,叫深度选择器。所以说在下一个教学视频当中,咱们再去进行讲解。OK吧,所以说咱们回首再看一下,那无非点击这个按钮发请求,获取数据,用饿了么UI的一些相关的组件进行展示,对不,但是咱们现在所遇见的一个问题,就是你会发现同一个样式有的能改,有的不能改,所以说咱们一会儿要讲一下的深度选择器。
我来说两句