053-直播间模块-上架商品布局原创

好的，另外咱们已经能够在第一次进来的时候能够拿到我们商品的这些货物的数据，咱们好做这一块，哎，有人就觉得说客人这没什么神奇的啊，你无非是调用那个接口改了一下那个数据啊，在进来的时候拿到了，那肯定是这个数据没问题，我要的是实时的，你这边刚改完，你这边啪的一下就能弹出来说哎呀有商品更新了，诶这样才高级，而且我能得到最新的值，对吧，我们就可以看直播人立即点开看一下哟，真更新了是不是啊，所以我们在小程序端这里的话呢，只需要大家鉴定一个试件就可以了啊，客人一直没告诉大家啊，现在的话呢，可以告诉大家了啊，这个事件的名字来在这里能找到啊。咱们再写到找到我们之前啊，集中的写我们试件监听的地方，我们应该是在之前上面这块去写的八列外在这里啊，就是使用的优惠券汇掉函数啊复制一遍，好我在这里粘过来，哎呦，我怎么写了这个呢？啊怎干啥了，我刚才干什么了呀？啊手怎么都抖了哈，删掉之后太激动了，好咱们重新格式化一下哈，那接下来就在这里监听的是一个这个东西叫点按的故事，另外知道了吧，为什么课文说那个字段建立的是and固字这一个字段啊，所以咱们在这里的话就是这个字段啊，跟我们这一块的这个字段的话呢，要一定统一好了and字啊，所以客人测试的是大写的好用啊，小写的话有问题哈，就是你在这里光写一个小写的这块收不到，好我们来看一眼，我们在这里的话，把这些没有用的给删了吧，我好像这块不需要往消息区推了，我我我不想往消息区里面去推，我只需要在这里显示一个Wx.show。

我们就一个透视。他的外。显示一个什么呀，商品有更新好了保存之后，那接下来的话呢，咱们再在这里面，我们得到这个商品的值，到时候在显示页面的时候肯定是大有用处的啊，肯定在data.value里面对外保存之后，咱们来看一眼啊，见证奇迹的时候就要到了啊，既定好这个事件啊，只要是啊。

有商品更新啊，就会通知好，咱们保存之后来测一把，重新编译一遍之后来跟客人看一下，现在我们点到来之后，咱们第一次拿到了这个没有什么生新奇的，好接下来看客人给你上上架新商品，好在这里咱们在这就改不改，其实你改不改都无所谓，只要你点一下上架商品，诶你会发现哟，有商品更新就拿到了这个词看见了吗？就这么神奇，所以你在这里你改一下，比如说把这个A改成A科啊，咱们点击确认以后，再把BB这块给它改成bbb啊这个铁锤好了，保存之后，注意这只不过是说把我们这个table报表给更新了啊，接下来说让给杨左这个直播间来123上链接走你对吧，咱们就能看到在这里面出现了最新的AA坑bab铁锤，你也能看到刚才这个有商品更新出现的，很快一会儿没了，我再给你点一下。

是吧，出现了，所以咱们在这里其实就要利用这个值的话呢，是不是把这块给做完，所以整个流程就非常清晰的，我们点一下这个小图标啊，第一次进能点小图标弹出来这个界面啊，是我们第一次获取到的数据，在之后每次商品更新我们都把这个值啊给它同步过来，那这样的话，它是不是就能够显示最新的这个商品的一个列表了呀，列外啊就能完成啊咱们的一个需求了，好吧，那接下来的话呢，跟科们一起啊，咱们来看一下这一块的功能的话呢，我们怎么去实现，因为这块就回归到我们的正常的小程序开发了，估计有人吐槽了很久，说科们之前那个VI我也不会一样啊，跟你这个后台系统这个走了一圈啊，反正最冲的话呢，列外成功了。

好，接下来咱们来看一下，那课文就在这里新建一个组件啊，这个组件的名字的话，咱们给它起起名字吧，课文给它起一个叫做我们这个good list这样一个名字，新建文件夹list，然后在good list里面新建一个组件叫good杠，诶good list。组建新建好了，那接下来就在我们live务WXM中咱们引入过的list，当然这一次咱们还得注册一下，对吧，在我们的Jason中我要引入一下，你还别说哈，一会从微微切到这个小程序，我还真的有戏许的不适应啊，来在这点点上一级点点上一级components文件夹下的这个good类似的good list好了，保存之后，至少这个组件它是有的列外来一进来之后，我们这个组件的话呢，显示出来了没有，我估计啊，又是报之前那个问题了，要点错了们听一下这个编译的一个缓存重新啊再进来，那这样的话让他先编着，那客进来之后，这个故类似的我认为能显示出来，那咱们要的那个效果的话呢，还是想要那个半屏组件，所以客可以借鉴一下，当时这个介绍这个页面的那个啊，咱们把这个半屏组件还得给他引入进来，那他需要依赖这个组件的，对不？然后接下来的话，这就是半。

组件长成什么样子啊，是不是这样一个样子啊啊好把它给复制粘到咱们的good类似的这个页面中，替换成它，然后再把这个数的话呢，给它弄成这个出现在那这样的话一进来之后是不是就是显示的呀，来咱们走你测试一下啊，重新编译一遍，咱们来看一下我们此时这个good这个页面中啊，好不好用，点进来之后它应该是显示出来啊，这个是应该改成咱们的上架商品啊。保存之后上架商品，你看就这样的这种感觉，但一开始的话呢，它是不能显示的，是咱们点完之后再显示啊，所以在这儿的话呢，可能就要给它改成什么呀，控制它的状态改变啊，如果一开始的这个状态是个假，它是不显示，点一下改成真，它又显示的就好，所以我们在这里可以通过我们的副组件，咱们传一个状态过来，来控制的，达到我们的目的。另外是不是在这个live GS中是不是要回到咱们的最上面，这里咱们去新加一个新的状态，叫做就我们的这个is show。

Good list默认值的话呢，它是一个false这个值行不？哎，好了，那接下来的话呢，我们把这个值当成我们的状态来给它传过去，传过去哎，接收到我们在good类似中，我们接收到这个值来来到我们的good类似的GS中，咱们通过属性的方法接收到，然后这个值一开始是个false嘛，所以在这里的话，它就控制的这个地方呀，它就显示不出来，哎，是这样的感觉啊，然后接下来的话呢，再就是把这个给删了啊，咱们是点这个的时候注意点这个小图标，它在咱们的room bottom这个组件里面，你要控制的是你的good类似的这个组件显不显示，说这是一个典型的啊我们的兄弟通信了，所以我们要在我们room bottom这个组件里面。

另外啊，咱们先给这个room包M组件留一个什么呀，回调函数呗，是吧，Room包M组件咱们留它一个什么B的，然后受啊，这个good类似的这样一个回调函数，Handle啊，这个受good类似的这样一个回调函数，然后接下来的话，咱们这个事件名字自定义事件名咱们都写成小写的咱们自己的处理函数，咱们给它写成大写的handle show good类似的这个名字，那接下来的话就是咱们一点击这个room包term这个组件哪个地方，然看看是不是这个货物这个按钮的时候，来棒的tapp，让咱们来一个hand到咱们的这个受雇的list，然后你在这个里面啊，你在room GS中来处理它，对吧，你肯定是要交给副组件来处理trigger event，把这个受good类似的这个自定义事件触发了，那这样的话，在咱们的副组件。

件中来监听的这个回调函数就会被执行，咱们就会在我们的类5GS的在后面这个地方啊，我们写好这个事件对吧？哎，咱们在这里面所做的啊，就一句话，This set data将我们的is so good。Is受good类似的这个值你给我改成true，哎，只要你在底下这个小按钮点一下之后，你的行为是发出了一个垂根以问的事件，对吧？哎，这样的话来到我们的父组件这里的话呢，我将改成true，而这个变成true之后，又通过父传子传给了咱们的good list，而这个good list这个组件对吧？它呢，就通过这个值啊控制将我们这个半屏显示出来了，好，最后咱们来测试一下，你说这块它有什么技术含量对不对，点完之后啊，进来之后来点一下出来了差量没了，点一下出来了叉掉没了对不对，而且这里面显示的内容的话呢，就是咱们的啊，我们从我们自定义群自定义字段里面获取的，对吧？那这样的话呢，我们就在。

一开始的时候，类物GS的时候，我们应该在这里来往前咕噜一下，咱们就应该做好一个什么good list，一个数组，这个数组什么时候给他附上值呢？列外是不是就在我们获取群组信息的时候，你看当时在打log的时候，说是在这儿看见的这个log嘛，啊group iner，你看看咱们在这里还能找到这个log，那咱们找到这个log，这个值来在这里的话跟来获取到这个值。

Group iner哪个字段里面呀，就慢慢找呗，不要着急，里面有一个里面有一个叫做group custom fair的这个字段，所以应该是在这里面有这个字段，那我就不要这些了，行不行，我这点哎这个字段，然后里面的话呢，还有这个什么K这个值，所以这是一个数组，咱们在什么filter特再给它过滤出来啊，我们这个item item等于item点这个K值，它等于等于等于等于咱们大写的这个and的下划线固兹这个值，对不？然后过滤出来之后，取中括号零这个元素，因为只有一个元素在这个点Y6，你看一下是不是就是这个商品的数据列外啊，最后一保存，一测试，一进来之后啊。一点进养组来，一进来之后，咱们看一眼是不是这个值来，是不是这个值是这个值吧，你就把这个值的话呢，设置给谁呀，设置给咱们的good list呗，Good list咱们要的就是你，哎，我就把这个值咱们在这里的话呢，进行一个处理啊，我们在这的话，呃，直接给这个constant，我们这个list good list等于它这是一个Jason字符串，我们在这里再来一个Ja.per解析这一个字符串，最终我的good类似的啊，就有这个词了列对吗？啊好了，有了good类的之后，你把good类来趁热啊，赶紧的给我们这个组件送过去吧，组件我给你传过来，这个good类的，它是一个解析完了数组了，所以你要珍析呀，是在咱们的这个组件内部的话呢，来属性接收啊，我们接收。

Good类似它是一个啊every类型的，剩下的另外体力活来了吧，开始做我们的页面布局了，诶咱们就在这里开始写了，对吧，咱们做这个页面布局class啊，咱们可以这样重新来编译一下，因为这样的话呢，这个数据它都在了，咱们就可以利用它的热重载功能呀，就会非常方便的把这个布局给做出来了，好Q开始在这写了哈，Class等于啊，咱们在这的话呢，给他一个good DEC good的DEC啊，然后在这我准备做了一个布局，是这样的列位啊，就是我们弹出来之后的话呢，在这块有一个图像啊，在咱们当时录的时候也没传嘛，所以这个图标咱们就用固定的了，诶这边是商品的名字，这边是商品的价格，商品的名字，商品的价格右边这块有个小购物车图标，诶这样的话一点击之后的话呢，就触发咱们用户的购物行为了，好吧，诶咱们在这里的话呢，就把这个页面。

做成这么简单就行了，来。那这样的话，我这个小图标的话应该是在哪里呢？我们先把这个东西的话做一个便利，在做出N份来嘛，每一项里面都有嘛，所以view咱们在这里来一个WX冒号for啊，我们对应的是good list，然后我们的K值，咱们也给它设置上我们的index，我们还要在这里给它加好这个item啊，一会好做样式的一个控制，那接下来这样咱们先着急嘛，先尝一尝看看好不好用item.name是不是我们商品的名字，哎呀，商品的价格price对不对，是不是商品的价格就是这样的啊，所以剩下的这个布局的话呢，这就好做了嘛，我们已经看到成功在向我招手，Image s RC等于咱们在这里的话，斜杠image字里面的话，Good啊，Item。杠a item，诶，我没有这张图片吗？斜杠good item这个啊，有这张图片的好吧，要在这里的话，一会儿啊，好控制的给它加样式的啊，咱们提前设置好一个class的名字，然接下来的话，这一块的话，我们的view啊，我们的view这一块的话是我们具体的一个信息，我们的data信息啊，这块分为两部分，一个是咱们的名字item点什么呀，Name这个名字，一个是咱们的price，当然这个price这里的话呢，另外咱们在这给它改成这个，前面的话呢，有这样一个符号，嘿，空格加上这样一个符号，对吧？然后在下面这一块的话呢，我也说了，咱们还要放一个小的这个image image s RC的话呢，就等于我们这个什么呀，啊image复制成我们的一个叫car，应该是这个小图标啊，咱们在这里的话，Class啊，设置好这个car好了，那接下来的话来一保存好，咱们可以。

看一下啊，其实这个数据你看这就是我们显示商品的这个缩略图啊，这是我们的商品的名字，商品的价格，还有我们这个小图标啊，是是对的哈，剩下的就是把这个样式的话，咱们给他啊控制一下就行了，列微看一下这几个关进了class的名字啊，保证是没有问题的啊，然后接下来的话呢，咱们就可以来去写一下来吧，DR good，我们的DC，然后DR这个item，嗯，然后咱们在这里给它加上一个什么呀，首先加点判定吧，判定的话呢，给它加上20RPX对吧，有点这个样式。

啊，然后的话border border啊，Border border top啊，咱们给他设置一个e PX solid，然后的话这个light GR的这样一个上上线，诶这块怎么没有没有反应呀，看来我这个是WXS没有过编译进来啊，咱们把这个图标给它调整完，咱们测一下测试一下哈，咱们这个是点good item，就是控制的是这张图片，我这个宽高啊，我给它量出来都是140RPX好吧，然后在这里高度也给它设置上去高度啊完事，好，咱们来简单的看一下这个效果，运行之后重新编译一遍吧，看到它没有生效是吧，点进来之后咱们来测试一下看点开之后，另外哟，我这个样式啊，是不是是没加上吗？我。

我怎么加到了这个introduction里面了，这这犯罪啊，捡走。签字怎么加在这个里面了哈，怎么加在我的这个这个说明里面了，就点击这一块的这个里面哈，咱们不是放在这的啊，放不是放错了啊，咱们应该是放在哪里呀，放在这个good类似的这种点错了在这里我说怎么没有样式呢？好了，在这里面粘过来，粘过来吧，保存之后咱们测试一下来点开之后看一眼，嗯，小图标的话就正常的上面也有这一个上边框的这个线了，对吧，没有问题的啊，这个没有受到影响吧，没有受到影响，没有问题，好了，那接下来咱们就可以继续的连外，哎，在这的话呢，我们可以继续的来控制一下，我们就让这个图片浮动起来，诶浮动起来啊，这样的话，它跟这个文字就分开了哈，然后接下来的话呢，我们这就是控制我们底下这个car这个图标的话呢，我们也让它这个什么小一点，至少让它小一点，先宽度的话我给它36RPX，然后高度的话呢，我给他一个36RPX，至少让它小一点，那这样的话你保存来看一眼效果。

对吧？好，接下来咱们就是做一些小的细节上的一个调整下就可以了，我想这个这个小的图标的话，咱们做的定位在这个位置上行不？所以我在保证我们外面这个item的话呢，它应该是一个相对定位啊，我给它加一个相对定位，我里面这个小的这个卡的话呢，我就可以在这里做一个绝对定位啊position嗯，咱们在写一个absolute吧，好，Absolute，然后写一个right的话呢，是个24R PX啊，然后对应的我们的bottom吧，设置一个28RPX行不行，保存之后是不是啊有样了，嗯，然后别忘了这个图片既然浮动了之后的话，这个小图标这个我们这个图标图片浮动了，咱们在这块别忘了清一下浮动，你看有时候就是容易忘哈，运行你看这样来说，感觉上就已经是不是好很多了，就。

对吧，那接下来咱们再对这个文字的话呢，进行一个控制啊，我们在这里对于哎，点good DC，然底下这个点data data另外是什么呀？就是咱们在这个身上的话，加了这一个class名字，咱们可以控制一下data放到size大一点吧，放size的话给它一个16PX啊，字体的话呢，变得大了一点啊，然后咱们再对于这个价格这里的话，另外看一眼这块这个价格咱们给它标个红色的哈，Class的话呢，这个是一个我把我想把这个价格这块给它标成红的，所以这样来说的话，这个下面的点这个price，我们对它进行一个设置一下marin杆top往上面的话呢，留点距离，二是RPX，这就是它的颜色的话呢，是我们的井号IEE啊，然后4E4E啊，应该是这个颜色，是我记得4E4E啊，这样一个红色一保。

存折后的话呢，是不是我们这个上架商品的话呢，它就已经诶显示在咱们这个地方来了。对吧，就就这样来就行啊，所以列位可以再把这个样式的话呢啊，再给他细细的哈，再调整一下，那可在这里就先做成这个样子，所以我们每一次啊，一进来之后的话呢，来看一看是不是就变成了这样一个点击咱们就能查看到我们上架的商品，现在有这样一个，还有价格是它这一块是咱们的小的购物车的按钮啊，然后接下来就是我们希望在后期我们上架的时候呢，它这一块也能够计时的，能够显示的有反应，那这块怎么做呀，另外你只需要把你当时在类务GS，你还记得吗？你监听的这个事件。

很快乐的就啊很快了，在咱们这块监听的一个叫做暗的故子这个事件在哪里，在下面吧，快出来啊，在这里咱们不是已经拿到这个值了吗？每次来这个值它是一个Jason词符串，所以我无非就在这里通过this.s data给我的这个good类似的设置上去呗，这点P再给他就行了呀，另外保存之后看看来上架商品这个功能现在是不是感觉有模有一样的，来一运行之后，我们在这里第一次这样咱们先测一下，就我先偷偷改一个，比如说把它给改回来这个科目吧，啊，价格是一一点击更新啊，再点击这个bbb，然后咱们再把这个给它改成这个二二点击确认，OK，我先上个架行了，这样来说，我第一次进来之后，我能够看到我这里面的商品列表的话，有什么呀，进来AA啊没问题，客们好，接下来我们开始改了。

啊，看坑给他改一下，比如说有人说我想买，但是我现在打折对吧？哎，我现在打打这个打什么就11块钱，不需要111啊，你也不需要11块钱，只需要一块钱，当然就说是999对吧，好，我们只需要一块钱好了，另外赶紧的啊，咱们来看一下。诶，我这边改完了之后啊，慌张了，哈哈，我还没有喊口号呢，这个时候的话呢，我听见主播在那喊改好了吗？家人改好了，改好了好123上链接对吧，1.1上架新商品，咱们这块上面就更新了，你看这个数据的话，就实时的更新成了这个一的就就是这么简单啊，所以只要你明白咱们这块利用即时通讯的这套产品的话呢，它在这块就非常方便了，就。

我们就实现了呀，我们这块的一个布局的这样一个功能了，好了，在下一个小节中的话呢，另外啊，客人在这里把这个小购物车图标呀，咱们点完之后的话呢，咱们实现我们的购物行为，当然在这里这个购物行为咱们简化一下啊，咱们在这就没有去去引导用户去真正的去支付啊，咱们在这里就是直接付完啊，直接买完，然后把这个消息发到我们的即时通讯服务中，广播给所有用户啊，广而告之，客们刚才买了商品一件啊，在这个直播间聊天区里面就能够显示出来，最后咱们再把这个购买了商品还有谁，然后买了谁的商品，然后最后他们存到我们自己的数据库中，再方便我们后续的电商分析行为了。好吧，列位行，咱们这一小节呀，先到这，下一小节不要错过。