048-直播间模块-优惠券业务原创

好了，另外咱们这一节来看一下我们的优惠券啊业务啊，这也是我们海ER部分的最后一块业务了，是吧，在整个海带部分其他功能们都实现了，就剩下优惠券了，当然在这个优惠券业务这块呀，后续引发的用户行为，这是一个套很复杂的逻辑啊，因为咱们领取优惠券之后啊，你得加到用户的卡包里啊，在支付的时候啊，就可以选取这张优惠券了啊，咱们在这里啊所做的就是我们把优惠券的业务布局部分给实现，然后我们在利用我们即时通讯的啊，我领取优惠券之后，他会把这个消息啊广播给其他人啊，谁领取了一张优惠券，会在聊天群里面显示出来，在后续你把这张优惠券加到自己的钱包中啊，这一块的话呢，大家可以啊，自行的去实现啊，就是我们可以再新建一张表，然后我表中再插入一张优惠券啊，到时候在电商中的话，可以去使用优惠券。

对吧？啊，所以在这里坑对优惠券这部分业务的话，简化一下处理，我们在这里啊，实现优惠券点完之后，我们弹出来这样一个优惠券的一个界面，然后我们再利用我们即时通讯的I'm，然后咱们来通知广播其他人这样一个功能，那在这里的话呢，我们弹出来的界面就这一部分啊，这块的话呢，是一个图片，然后上面的话呢，有这样一个核心的按钮，点完之后这样优惠券啊，我们就可以广播给我们的聊天啊，这样的话呢，所有人都能够收到啊，谁谁谁领取的一张优惠券这样一个功能，好的两位，那接下来咱们来看一下这个功能的一个具体的一个实现过程了，在这里的话，咱们首先来到我们的小程序中啊，在这个地方我们是不是要加一个新的组件，就是我们的优惠券这样一个组件啊，这个组件可能要在我们的啊，Components文件夹哈，先新建好我们的文件夹，然后再新建好我们的component。

这一个组件，然后在这里我们对于这个组件进行一个注册啊，在我们的live Jason中啊，咱们写好对吧，在这里啊，这个优惠券在哪呀，上一级上一级components文件夹下的我们的优惠券斜杠下面的这一个优惠券啊GS文件，然后在咱们的啊对应的啊这个优惠券它一开始一进来之后啊来两位哎，坏了，又新加了一个组件，导致我这块的编译出问题了啊咱们在这里的话重新呢编译一遍，咱们也知道这个优惠券它一开始啊，它不要显示出来，等咱们点按钮的时候再显示，所以客人在这里可能还会再去使用一个状态啊，然后这个状态的初始值的话呢，是一个false这个值，这是咱们呀啊所熟悉的一套业务了，对不列位，那什么时候才显示呢？是不是咱们在点击这个按钮的时候再显示啊，就点击这个。

小图标的时候，所以它呢，还是在咱们的room header这个组件中啊，在这里咱们给它绑好这一个事件棒的TP，咱们憨到哎，这一个优惠券这个方法，当然他在这里是控制不住我们副组件的一个行为的，所以它只能触发咱们的这一个子传父的一个事件，所以在这里咱们啊，通过这一个诶写好这一个自定义事件，但是这个事件的话呢，一定在我们定义我们引入我们room hier的时候啊，Room海好多自定义事件了哈，咱们给它绑定好，这样的话，回调函数处理在这里咱们处理好好，然后只要你点那个红色的小图标，咱们就会触发自定义事件，这个自定义事件在我的副组件中定义好了，而这个方法的唯一的作用其实就是让那一个状态咱们给它改成true就可以了，来列V在这里。

咱们给它设置成这一个true这个值，所以这次点s is show这个，咱们给它改成这一个true的，一想这个值要是变成true了之后，我们在这里的这个是不是它就能够创建出来了呀，好，跟科文来测试一下，咱们重新的变异一面，然后来到杨组的直播间，哎呀，这块有个优惠券点一下出来了嘛，对不啊，所以剩下的就是我们优惠券这个组件的一个页面结构的列位，来来到我们优惠券的这个页面结构中，咱们很明显的，哎，创建我们最基本的view在最外层啊，咱们也说了哈，本要这些组件相互影响，所以客人提前设置好class的名字image，咱们给它src指向斜杠一面，一制斜杠，我们的优惠券这张图片，哎呀，这张图片已经被挤成变形了，都已经对吧，啊，然后在这里哈，咱们给它写。

简单的做一下这个布局啊，我们在这个地方咱们要设置一下哈，咱们这个组件，哎，这个class，咱们要它fix的这个位置呗，对不啊，咱们让它fix在position啊，我们改成这个fix在这里啊，我们的right的话呢，咱们给它一个右边嘛，给它距离120PX，然后top值的话，我们给他一个25V这个值，好在这里咱们再控制一下这张图片，其实这样的哈，我们整个这个最外层的拉啊，跟我们这张图片咱们应该保持它一样的宽度就行了，哎，在这里这个image，在这个这个image，咱们给他一个class名字BG吧，将来这个做成这个背景，有人说为什么科文你不在这里直接写个background image呢？因为咱们不支持本地图片啊，所以咱们在这里也只能改成image写法，所以我的想法是说，让这张图片的这个宽度，比如说我设置成量出来500。

5R PS高度的话呢，是313RPX，咱们正好让这个宽高的话呢，就是我们这个被整个的这个盒子的一个宽度和高度，那这样的话呢，我们就可以了，另外可以看一下啊，在咱们这个class下面的image下面的话，这个BG class宽高啊设置好了，然后在我们这里的话呢，哎，我们把这个宽度和高度呀，一块儿的给我们这个外面这个盒子也设置上去，那这样的话点开羊左之后来点一下对吧？诶这张优惠券它就显示在这个位置来了啊正好哈正中海的啊，因为他在这里fix的这大宽高这么大里面就有一张图片啊，正好的话也把这个盒子完全就给占满了，当然里面这些文字的话呢，咱们就可以进行一个定位啊，我定到这个位置，定到这儿，还有这个小的，小的是一个删除啊，对吧，关掉这个小叉号，定在这个位置就可以了，那这样的话咱们。

给设置一下它的这个class英文啊，我们对应的view里面的话呢，还有很多对吧，我们的这几几个文字，那可能快点写一写哈，什么优惠券来袭呗，优惠券来袭啊，然后在这里的话，平台啊，平台送你一张优惠券，开不开心呀，对吧？优惠券好，然后接下来的话再来一个什么呀，小按钮，Button好，咱们在这里的话，Button写好，Button在这里的话给他class名字BDN，然后对应的这个咱们给他一个class class名字的话呢，客能给他一个de sc，平台送他一张优惠券嘛，对吧，在这里class咱们也给他一个title，就这样啊，然后接下来的话呢，咱们哎给他加点样式啊，我这个写一个马上使用，马上使用，OK，咱们接下来就可以来写一个样式的，我要把这几个文字定到这个位置来，所以我就可以控制我的。

这一个iner，这一个class名字对吧？哎，在这里控制我的iner进行一个定位啊点儿我的呃，注意啊，咱们做好这个外层的这个选择哈，这样的话呢，防止影响其他人position and lo啊，然后在这里top的话，咱们给他一个20PX，然后life它的话呢，咱们给他一个0PX啊，然后的话呢，宽度的话，我占满整个这个外面大盒子的宽度t center，你看只要一设置成这样的话呢，它就已经有模有样了，诶，我这一个啊是吧，现在已经感觉好多了啊，接下来就是对于里面的一些小的一些细节的一个抠搜了，对吧，我们把将这个文字的话呢，咱们给它一个什么放的size啊，这个标题这一块的话呢，我这个放扇子让它小一点哈，14PX，然后呢，平台这一块的话呢，我们这个class名字啊，我们给它大点。

这个字体给这个18啊PX，然后再把这个按钮的话，咱们进行一个控制啊，一个class b TN的这样一个按钮，好了，我们在这里呢，控制一下这个按钮，点in符下面的点BTN，咱们来控制一下这个小按钮，哎，控制按钮的这个宽度的话呢，来吧，列位宽度的话给他一个320PX，高度的话给他一个62PX啊，然后我们包的radius，咱们给它一个100RPX，看看这个效果啊是吧，这就把这个按钮里面有个判定啊，另外这是一个老问题了，你要清掉它啊，要不然就会很奇葩，要把放在size子的话呢，你给它设置了小01:14PX啊14PX好了，接下来的话呢，别忘了把咱们这个拉hit，要不然这个按钮这个文字的这个位置的话，也挺诡异的啊，跟我们高度一样，这样的话正好。

中来显示它，哎跟上面的话，咱们让它有一点这个距离吧，50RPX。然后再就把这个字体颜色的话呢，我们把这个按钮的这一个颜色啊，我们给它处理一下拉，我们给它一个井号F16161啊是一个红色的，你看这样来说的话呢啊，我们这样一个小的啊，这样一个界面的话就快实现了啊，你看看剩下最右边哎，咱们有一个close这样一个开关，咱们给它写好是不是，哎这个效果就差不多了呀，来另外咱们在这里是吧，有一个image image s RC等于一个杠，Image有一个什么close啊这样一个图片啊，然后咱们在这里给他一个class的一个名字，哎，然后咱们在这里对于这个class的话呢，设置好哎，点我们这个优惠券下面的这个close，哎，我给它一个定位，我们的是吧，也是一个绝对定位，然后对应的RIGHT20，哎，我让他这个top的话呢，也是一个。

啊20PS宽度的话，我量取了啊，它是一个50RPX啊，它这个高度的话呢，也是一个50RPX，一保存之后，你看这个小叉号的话，就显示在诶这个位置来了啊这样的话呢，咱们就是一点这一个，它就出现等一点这个小叉号的话呢，它又怎么样呀，消失啊所以这个功能倒好做，咱们只要给它绑定好这一个close这个事件啊，但列位啊，你也要注意一下啊，咱们不可能在子组件中直接控制说让他创建删除，你还得子传父，让父组件帮你来做啊，因为在这里是通过副组件的一个状态来控制的啊，这是咱们呀非常熟悉的了啊，所以在这里可能只需要啊在我们的负呃要注意哈，我这个没没写完哈，把它在我们的对应的这个地方啊，写一个事件啊，咱们在这触发。

对不对，这四点，哎，Trigger问，哎，我们的hi的，我们这一个优惠券好吧，然后咱们把这个事件的话呢，自定义啊做好啊，坐在我们这个地方来啊，我们在上面绑了一个自定义事件啊，棒的啊，等我们自主件触发这个自定义事件的时候，这里面去干一件事，咱们要将这个值的话呢，咱们给它，哎，改一下啊handle close，我们的这个优惠券，好，咱们在这里的话呢，来把它啊。把它给哎复制一下来到我们的类物GS中，那么就在这里对吧，你前面是让它显示出来，我这里来一个子传复的话呢，是让这个状态的话呢，咱们给它改成这一个什么呀，隐藏false这样一个值来列位，咱们简单的测试一下，看一下这个功能的话呢，我们有没有成功的实现了呀，来点击养左之后的话呢，点击这个小的啊优惠券，点击叉号，哎没了再点开，哎有了没了，对不啊，所以这个功能呀，非常的简单啊，那接下来就是咱们结合我们的计时通讯的话呢，咱们把这个业务啊再补充一下。

我们只要点这个按钮的话，咱们的业务是什么呀？要use我们这张优惠券了吧？好，那客能在这里，就在这个地方要use，但然这个use的话还是一样的，我不可能在组件中去调什么TRS那些东西啊，所以我还是来一个什么呀，子传付啊，我把它进行一个传输过去好了，这样的话，我在我的子组件中啊，已经做了一个子传，附了一个垂根以问调用了，现在就看你的父组件身上到底有没有自定好一个这样的一个事件了，如果你自定义好了，那我在这里啊，就可以触发它，所以我得把这个回调函数写在我的Le GS中列外，这就是咱们使用优惠券的这一个核心函数了，对不对，好，简单了，做一个测试，重新编译一遍，然后在这里点击养组，点击这个优惠券。

好，来马上使用，很明显就在这里啊，大家也知道在这一块的逻辑就是我们点完之后，我们应该使用我们的即时通讯啊，然后我们传到我们的即时通讯云服务器，然后再分发给其他的正在看直播间的人，然后我们再将这个优惠券这张这个东西给他隐藏掉就可以了，这是咱们应该做的一套逻辑的列外是吧，那这样的话呢，我们就可以在这个地方调用一个方法z.TS好，这是点TLS点又是我们这个方法啊，我们这个优惠券这个方法调用完之后点赞回调，诶其实这块也不用回调要什么东西了，咱们只需要在这里的话呢，让它隐藏掉就可以了，是不是只需要调用这个方法让它隐藏掉就行了，好，另外你看这就是我们这块的一个逻辑啊，只要我们在字组件中点了一下，马上使用这个按钮。

会利用子传复触发在副组件监听的这一个回调，然后让这个函数的话呢，执行，执行完了之后，我们啊，就真的把这个消息发给了我们的腾讯的即时通讯云啊，这样的话呢，成功了，我们再隐藏掉它，但是我们这个东西大家会收到吗？所以我们就可以在前面这个地方，另外啊，回到前面来，咕噜回来，咕噜回来在这个地方啊。好了对吧，这是有人修改了简介啊，咱们在这儿复制一份来跟客们来看一下，这就是有人使用了优惠券呗，啊有人使用了优惠券好了，在这里这个东西就是点儿咱们的这一个叫什么呀，优是大写了啊优哎优惠券这一个属性，你看TRS，其实它真的啊想的很周到啊，都给咱们啊踏踏实实的封装好了，那客人只需要来去用它呀就可以了，那一保存之后的话呢，咱们只要使用优惠券，你自己发出去的，你也自己能收得到，别人发呢，你也能收得到，所以我在这里就可以把这个type咱们改成正常的是一，然后这个内幕的话，哎哟。

这个name这一块咱们再抄一抄之前的了哈，Name这块最好用这个方法来列外，就是我们啊，要这个form一下我们这个格式啊，这个到底是我还是说这个人的名字，那这样的话就是只要有人使用的优惠券，我们在这里就PUSH1条消息，压到我们的消息站里面去啊，在这里的话呢，内幕是form之后的这一个格式啊，然后我们再给它改成这个什么呀，使用了优惠券这样一句话就可以了，是吧，好领取优惠券。

在message中啊，咱们就写成固定的就行了哈，领取优惠优惠券就可以了，然后接下来在这里的话呢，我们也不需要这个group infer的一个更新了，我们在这直接就set data压到我们的消息站中，这样我们的聊天区就会显示出来，另外啊，当然你也可以在这里的话呢，做好这个标记等着哎，你的电商引入进来之后，你把这个优惠券的话呢，加到你的这个购买这条订单里面啊，这样的话呢，使用优惠券就可以减这个钱，对吧？其实这一块的我们的用户交互行为将会非常的复杂，也会非常的多啊，保存之后我们重新的编译一遍，来看一下这个功能，来到这里之后，我们点击杨组进来之后，来点击这个小红包出来，这张优惠券好叉掉没有问题，点击它马上使用，另外马上使用之后啊，你会发现它，诶成功的啊背景。

藏了，而且在聊天区中也显示出来是我领取的这个优惠券，对不对啊，所以咱们在这只是一个演示，因为优惠券也没有实际的金额价值，你也抵不了券，对吧？大家可以在这里啊，也一样的，在我们的后台啊，做一个优惠券的一个数据库啊，这样一个表，然后在这里面标上价格啊，其实在这里应该有一个完整的管理员的后台来支撑咱们这样一套直播电商系统，好吧，另外啊，等咱们在这一块的话，咱们再好好研究研究啊，我们点开之后出现了我们这些商品123上链接，我还可以修改价格，这一次咱们引入咱们自己的一套啊后台的简约版的电商系统啊，咱们可以呢，快速的上架商品呀，修改价格啊，咱们再好好去研究研究这一块儿好了，Y，那这样的话呢，咱么优惠券这块的业务就说完了，优惠券这块的功能其实并不复杂，页面布局没有什么难的，最关键的就是你用了一个即时通。

俊的一个监听优惠券这样一个事件，别人发优惠券啊，你就能接听到，而且在这里你自己的领取优惠券之后，也要通过我们这个方法的话呢，进行调用啊，并且隐藏掉我们这个优惠券这个界面，OK好了，另外关于咱们优惠券这块的功能的话，咱们就说到这里，下一节咱们来看一下我们啊直播的最大的一种带货能力了啊，我们的电商行为，好吧，咱们下一小件不要错过。