uniapp小程序对接腾讯云直播
uni-app 2021-09-07 14:54:41

相关教程贴:https://cloud.tencent.com/document/product/269/44527

demo下载贴:https://cloud.tencent.com/document/product/269/36887#TLS

1.png

小程序后台配置贴:https://web.sdk.qcloud.com/im/doc/zh-cn/tutorial-02-upgradeguideline.html

 

推流的话可以关注 "腾讯视频云" ,这里的是拉流

成品:

aa036b932a1960e2b90381007807bb.jpg

 

该教程仅适用于微信小程序!!!

 

1、项目开始,根目录新建components文件夹(如果已经有了,可以忽略这步)

2、导入组件

3、vue页面

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <gui-page :customHeader="false" statusBarStyle="background-color:rgba(1,1,1,0)"  
  3.         headerStyle="background-color:rgba(1,1,1,0)" :headerSets="headerSets">  
  4.         <!-- 自定义头部导航 -->  
  5.         <!-- <view slot="gHeader"></view> -->  
  6.   
  7.         <!-- 页面主体 -->  
  8.         <view slot="gBody">  
  9.             <view class="live-room-bg" :style="'height: '+mainHeight+'px'">  
  10.   
  11.                 <view class="live-room-content">  
  12.                     <!-- 头部 start -->  
  13.                     <room-header :userInfo="userInfo" @attention="attention" @cancel-attention="cancelAttention"  
  14.                         :groupinfo="groupInfo" :ownerInfo="ownerInfo" @show-user-card="showUserCard" @coupon="coupon"  
  15.                         @show-introduction="showIntroduction" @show-online-user="showOnlineUser"></room-header>  
  16.                     <!-- 头部 end -->  
  17.                     <!-- 聊天室 start -->  
  18.                     <chatroom class="chatroom" :message="messageQueen"></chatroom>  
  19.                     <!-- 聊天室 end -->  
  20.                     <!-- 底部 -->  
  21.                     <room-bottom class="live-room-bottom" @send-message="sendMessage" :isTimReady="isTimReady"  
  22.                         @quitGroup="quitGroup" @like="like" @showGift="showGift" @showgoods="showgoods"></room-bottom>  
  23.                     <!-- 底部 -->  
  24.                     <!-- 礼物面板 start -->  
  25.                     <gifts class="gifts" :animation="animation" @hideGift="hideGift" @sendgift="sendgift"></gifts>  
  26.                     <!-- 礼物面板 end -->  
  27.                     <!-- 商品面板 start -->  
  28.                     <goods-list class="goodslist" :animation="animation2" @hidegoods="hidegoods" @buy="buy" :goods="goods"></goods-list>  
  29.                     <!-- 商品面板 end -->  
  30.                     <!-- 礼物以及动画 start -->  
  31.                     <gift-animation v-if="hasgift" class="gift-animation" :avatar="giftAvatar" :nick="giftNick" @hideani="hideani"></gift-animation>  
  32.                     <!-- 礼物以及动画 end -->  
  33.                       
  34.                 </view>  
  35.   
  36.                 <!-- #ifdef MP-WEIXIN -->  
  37.                 <!-- 直播拉流 -->  
  38.                 <!-- https://uniapp.dcloud.io/component/live-player -->  
  39.                 <live-player v-if="roomStatus!=='0'"  
  40.                     src="rtmp://lvwu.play.liqinwl.com/live/lvwulivestream"  
  41.                     mode="RTC" autoplay @statechange="statechange" @error="error"  
  42.                     :style="'width:100%;height: '+mainHeight+'px'" beauty="9" object-fit="fillCrop"  
  43.                     whiteness="9" />  
  44.                 <!-- #endif -->  
  45.             </view>  
  46.         </view>  
  47.     </gui-page>  
  48. </template>  
  49.   
  50. <script>  
  51.     // https://console.cloud.tencent.com/ 后台域名管理配置  
  52.       
  53.     import { getHeight } from '@/GraceUI5/js/system.js'  
  54.     import roomHeader from '@/components/look/room/room-header.vue'  
  55.     import roomBottom from '@/components/look/room/room-bottom.vue'  
  56.     import chatroom from '@/components/look/room/chatroom.vue'  
  57.     import gifts from '@/components/look/room/gifts.vue'  
  58.     import giftAnimation from '@/components/look/room/gift-animation.vue'  
  59.     import goodsList from '@/components/look/room/goods-list.vue'  
  60.       
  61.     import TLS from 'im-live-sells'  
  62.   
  63.     // #ifdef H5  
  64.     // Web 环境  
  65.     import TIM from 'tim-js-sdk'  
  66.     // #endif  
  67.     // #ifdef MP-WEIXIN  
  68.     // 小程序环境  
  69.     import TIM from 'tim-wx-sdk'  
  70.     // #endif  
  71.   
  72.     export default {  
  73.         components: {  
  74.             roomHeader,  
  75.             roomBottom,  
  76.             chatroom,  
  77.             gifts,  
  78.             giftAnimation,  
  79.             goodsList  
  80.         },  
  81.         data() {  
  82.             return {  
  83.                 headerSets: {  
  84.                     height: 0,  
  85.                     zIndex: 100  
  86.                 },  
  87.                 initConfig:{  
  88.                     SDKAppID: 1400568042,  
  89.                     userSig: 'eJwtzMEOgjAQRdF-6dqQaa0FSdxjaNQIC12incpINKSAVoz-LgGW77zkflmus*CFjsVMBMAW4yaDz5Ysjdw16Ph8NKYq6poMi7kEWKkIpJielh44qFpCqADEelL0NbnBFcgIYG7Qbag6H3Y*0Tnct6o4Xc*47w89dll52VWJtSbVx6b9WF6m7w37-QHY7DI3',  
  90.                     userName: 'user1',  
  91.                 },  
  92.                 mainHeight: 0,  
  93.                 tls: null,  
  94.                 roomId: '@TGS#aHTCDBNHL',  
  95.                 userInfo: {},  
  96.                 groupInfo: {},  
  97.                 ownerInfo: {},  
  98.                 roomStatus: '0',  
  99.                 isTimReady: false,  
  100.                 message: [], // 通知  
  101.                 animation: null, // 礼物面板的动画  
  102.                 animation2: null, // 商品面板的动画  
  103.                 hasgift: false, // 是否有礼物  
  104.                 giftAvatar: '', // 礼物的图像  
  105.                 giftNick: '',   // 礼物的名称  
  106.                 goods: [], // 商品列表  
  107.             }  
  108.         },  
  109.         computed: {  
  110.             messageQueen: function() {  
  111.                 const queenLen = 100 //内存里面放100条消息,以免观看直播太久撑爆内存  
  112.                 if (this.message.length > queenLen) {  
  113.                     const vl = this.message.length - queenLen  
  114.                     for (let i = 0; i < vl; i++) {  
  115.                         this.message.shift()  
  116.                     }  
  117.                 }  
  118.                 return this.message  
  119.             }  
  120.         },  
  121.         async onLoad(data) {  
  122.             console.log(data)  
  123.             try {  
  124.                 this.roomId = data.roomId  
  125.                 this.roomStatus = data.roomStatus  
  126.                 await this.auth() // 获取用户信息  
  127.                 // this.getUserSig() // 获取生成码  
  128.                 console.log('roomStatus', this.roomStatus)  
  129.                 this.init()  
  130.             } catch (e) {  
  131.                 console.warn(e)  
  132.             }  
  133.         },  
  134.         methods: {  
  135.             statechange(e) {  
  136.                 console.log('live-player code:', e.detail.code)  
  137.             },  
  138.             error(e) {  
  139.                 console.error('live-player error:', e.detail.errMsg)  
  140.             },  
  141.             init: function(e) {  
  142.                 this.$nextTick(e => {  
  143.                     const height = getHeight('window');  
  144.                     this.mainHeight = height;  
  145.                       
  146.                     console.log('高度', this.mainHeight)  
  147.                 })  
  148.                   
  149.                 // 初始化  
  150.                 this.tls = new TLS({  
  151.                     SDKAppID: this.initConfig.SDKAppID,  
  152.                     roomID: this.roomId,  
  153.                     userSig: this.initConfig.userSig,  
  154.                     userName: this.initConfig.userName,  
  155.                     TIM: TIM  
  156.                 })  
  157.                 this.tls.on(TLS.EVENT.SDK_READY, async () => {  
  158.                     console.log('SDK 已经初始化好了', Math.random())  
  159.                     this.isTimReady = true  
  160.                     //sdk可用了  
  161.                     // 调用加入房间(joinRoom)的API  
  162.                     let {  
  163.                         groupInfo,  
  164.                         userInfo  
  165.                     } = await this.tls.joinRoom({  
  166.                         roomID: this.roomId,  
  167.                         getOwnerInfo: true  
  168.                     })  
  169.                       
  170.                     console.log("userinfo", userInfo)  
  171.                     // mock数据,上线前删除  
  172.                     userInfo = {  
  173.                         "avatar": "/static/live/7.png",  
  174.                         "nick": "1111"  
  175.                     }  
  176.                     groupInfo = {  
  177.                         "groupID": this.roomId,  
  178.                         "memberNum": 1990,  
  179.                         "notification": "欢迎新人入直播间"  
  180.                     }  
  181.                     // mock数据,上线前删除 end  
  182.                       
  183.                     this.userInfo = userInfo;  
  184.                     this.groupInfo = groupInfo  
  185.                     this.ownerInfo = groupInfo.ownerInfo  
  186.                     this.noticeText = groupInfo.notification  
  187.                     let goods  
  188.   
  189.                     console.log('获取groupInfo', groupInfo)  
  190.                     // 获取商品的API  
  191.                     try {  
  192.                         goods = JSON.parse(this._getVarsByKey(groupInfo.groupCustomField, 'addgoods'))  
  193.                     } catch (err) {  
  194.                         goods = []  
  195.                     }  
  196.                       
  197.                     // mock数据,上线前删除  
  198.                     goods = [  
  199.                         {  
  200.                             "gid":1,  
  201.                             "name":"商品测试",  
  202.                             "price":45  
  203.                         }  
  204.                     ]  
  205.                     // mock数据,上线前删除 end  
  206.                       
  207.                     this.goods = goods  
  208.                     if (this.noticeText) {  
  209.                         let msg = []  
  210.                         msg.push({  
  211.                             name: '公告',  
  212.                             message: this.noticeText,  
  213.                             id: `id${Date.now()}`,  
  214.                             type: 2  
  215.                         })  
  216.                         thisthis.message = this.message.concat(msg)  
  217.                     }  
  218.                 })  
  219.   
  220.                 this.tls.on(TLS.EVENT.JOIN_GROUP, async (data) => {  
  221.                     console.log('已经加入了群聊', data)  
  222.                     //有人加群  
  223.                     let msg = []  
  224.                     msg.push({  
  225.                         name: this._formatNick(data.userID, data.nick),  
  226.                         message: '加入了群聊',  
  227.                         id: `id${Date.now()}`  
  228.                     })  
  229.                     thisthis.message = this.message.concat(msg)  
  230.                 })  
  231.                 this.tls.on(TLS.EVENT.ERROR, async (data) => {})  
  232.                 this.tls.on(TLS.EVENT.EXIT_GROUP, async (data) => {  
  233.                     //有人退群  
  234.                     let msg = []  
  235.                     msg.push({  
  236.                         name: this._formatNick(data.userID, data.nick),  
  237.                         message: '退出了群聊',  
  238.                         id: `id${Date.now()}`  
  239.                     })  
  240.                     thisthis.message = this.message.concat(msg)  
  241.                 })  
  242.                 this.tls.on(TLS.EVENT.NOTIFACATION, async (data) => {  
  243.                     //有新的公告  
  244.                     this.noticeText = data.notification  
  245.                     let msg = []  
  246.                     msg.push({  
  247.                         name: '公告',  
  248.                         message: this.noticeText,  
  249.                         id: `id${Date.now()}`,  
  250.                         type: 2  
  251.                     })  
  252.                     thisthis.message = this.message.concat(msg)  
  253.                 })  
  254.                 // 群名和群资料变更  
  255.                 this.tls.on(TLS.EVENT.INTRODUCTION, async ({  
  256.                     name,  
  257.                     introduction  
  258.                 }) => {  
  259.                     const msg = []  
  260.   
  261.                     msg.push({  
  262.                         name: '公告',  
  263.                         message: '群资料变更,请注意查看',  
  264.                         id: `id${Date.now()}`,  
  265.                         type: 2  
  266.                     })  
  267.   
  268.                     thisthis.message = this.message.concat(msg)  
  269.                     this.groupInfo = Object.assign(this.groupInfo, {  
  270.                         name,  
  271.                         introduction  
  272.                     })  
  273.                 })  
  274.   
  275.                 this.tls.on(TLS.EVENT.MESSAGE, async (data) => {  
  276.                     //有人发消息  
  277.                     let msg = []  
  278.                     msg.push({  
  279.                         name: this._formatNick(data.userID, data.nick),  
  280.                         message: data.message,  
  281.                         id: `id${Date.now()}`  
  282.                     })  
  283.                     thisthis.message = this.message.concat(msg)  
  284.                 })  
  285.                 this.tls.on(TLS.EVENT.LIKE, async (data) => {  
  286.                     //有人给主播点赞  
  287.                     let msg = []  
  288.                     msg.push({  
  289.                         name: this._formatNick(data.userID, data.nick),  
  290.                         message: '给主播点赞了',  
  291.                         id: `id${Date.now()}`  
  292.                     })  
  293.                     thisthis.message = this.message.concat(msg)  
  294.                 })  
  295.                 this.tls.on(TLS.EVENT.SEND_GIFT, async (data) => {  
  296.                     //有人给主播送礼  
  297.                     let msg = []  
  298.                     msg.push({  
  299.                         name: this._formatNick(data.userID, data.nick),  
  300.                         message: '给主播送礼了',  
  301.                         id: `id${Date.now()}`  
  302.                     })  
  303.                     thisthis.message = this.message.concat(msg)  
  304.                     this.hasgift = true  
  305.                     this.giftAvatar = data.avatar  
  306.                     this.giftNick = data.nick  
  307.                 })  
  308.                 this.tls.on(TLS.EVENT.ATTENTION, async (data) => {  
  309.                     //有人关注了主播  
  310.                     let msg = []  
  311.                     msg.push({  
  312.                         name: this._formatNick(data.userID, data.nick),  
  313.                         message: '关注了主播',  
  314.                         id: `id${Date.now()}`  
  315.                     })  
  316.                     thisthis.message = this.message.concat(msg)  
  317.                     this.$store.dispatch({  
  318.                         type: ADD_FOLLOWER  
  319.                     })  
  320.                     // const a = await this.tls.getUserInfo()  
  321.                 })  
  322.                 this.tls.on(TLS.EVENT.CANCELATTENTION, async (data) => {  
  323.                     //有人关注了主播  
  324.                     let msg = []  
  325.                     msg.push({  
  326.                         name: this._formatNick(data.userID, data.nick),  
  327.                         message: '取消关注关注了主播',  
  328.                         id: `id${Date.now()}`  
  329.                     })  
  330.                     thisthis.message = this.message.concat(msg)  
  331.                     this.$store.dispatch({  
  332.                         type: REDUCE_FOLLOWER  
  333.                     })  
  334.                     // const a = await this.tls.getUserInfo()  
  335.                 })  
  336.                 this.tls.on(TLS.EVENT.BUY_GOODS, async (data) => {  
  337.                     //有人购买了商品  
  338.                     let msg = []  
  339.                     msg.push({  
  340.                         name: this._formatNick(data.userID, data.nick),  
  341.                         message: `购买了商品(${JSON.parse(data.value).name})`,  
  342.                         id: `id${Date.now()}`  
  343.                     })  
  344.                     thisthis.message = this.message.concat(msg)  
  345.                 })  
  346.                 this.tls.on(TLS.EVENT.USE_COUPON, async (data) => {  
  347.                     //有人领了优惠券  
  348.                     let msg = []  
  349.                     msg.push({  
  350.                         name: this._formatNick(data.userID, data.nick),  
  351.                         message: '领取了优惠券',  
  352.                         id: `id${Date.now()}`  
  353.                     })  
  354.                     thisthis.message = this.message.concat(msg)  
  355.                 })  
  356.                 this.tls.on(TLS.EVENT.ADD_GOODS, async (data) => {  
  357.                     //该场直播推荐商品有变更  
  358.                     wx.showToast({  
  359.                         title: '有新的商品上架'  
  360.                     })  
  361.                     let goods  
  362.                     try {  
  363.                         goods = JSON.parse(data.value)  
  364.                     } catch (err) {  
  365.                         goods = []  
  366.                     }  
  367.                     this.goods = goods  
  368.                 })  
  369.                 this.tls.on(TLS.EVENT.KICKED, async () => {  
  370.                     //被踢下线  
  371.                 })  
  372.                 this.tls.on(TLS.EVENT.NETWORK_CHANGE, async () => {  
  373.                     //网络变化  
  374.                 })  
  375.                 this.tls.on(TLS.EVENT.SDK_NOT_READY, async () => {  
  376.                     //sdk不可用  
  377.                 })  
  378.                 this.tls.on(TLS.EVENT.PROFILE_UPDATE, async () => {  
  379.                     //用户资料发生改变  
  380.                 })  
  381.                 this.tls.on(TLS.EVENT.ERROR, async () => {  
  382.                     //sdk发生错误  
  383.                 })  
  384.             },  
  385.             hidecoupon() {  
  386.                 this.hascoupon = false  
  387.                 setTimeout(() => {  
  388.                     if (this.couponStack.shift()) {  
  389.                         this.hascoupon = true  
  390.                     }  
  391.                 }, 1000)  
  392.             },  
  393.             usecoupon() {  
  394.                 this.tls.useCoupon().then((data) => {  
  395.                     this.hidecoupon()  
  396.                 })  
  397.             },  
  398.             coupon() {  
  399.                 this.hascoupon = true  
  400.             },  
  401.             _formatNick(userID, nick) {  
  402.                 console.log('userID', userID)  
  403.                 console.log('nick', nick)  
  404.                 if (userID === this.userInfo.userID) {  
  405.                     return '我'  
  406.                 }  
  407.                 return nick  
  408.             },  
  409.             buy(data) {  
  410.                 wx.showLoading()  
  411.                 this.tls.buy(data).then(() => {  
  412.                     wx.hideLoading()  
  413.                     this.hidegoods()  
  414.                 })  
  415.             },  
  416.   
  417.             hideani() {  
  418.                 this.hasgift = false,  
  419.                     this.giftAvatar = '',  
  420.                     this.giftNick = ''  
  421.                 setTimeout(() => {  
  422.                     var msg = this.giftStack.shift()  
  423.                     if (msg) {  
  424.                         this.hasgift = true,  
  425.                             this.giftAvatar = msg.giftAvatar,  
  426.                             this.giftNick = msg.giftNick  
  427.                     }  
  428.                 }, 1000)  
  429.             },  
  430.             showgoods() {  
  431.                 const ani = wx.createAnimation({  
  432.                     duration: 200  
  433.                 })  
  434.                 ani.bottom(0).step()  
  435.                 this.animation2 = ani.export()  
  436.             },  
  437.             hidegoods() {  
  438.                 const ani = wx.createAnimation({  
  439.                     duration: 200  
  440.                 })  
  441.                 ani.bottom('-45vh').step()  
  442.                 this.animation2 = ani.export()  
  443.             },  
  444.             showGift() {  
  445.                 const ani = wx.createAnimation({  
  446.                     duration: 200  
  447.                 })  
  448.                 ani.bottom(0).step()  
  449.                 this.animation = ani.export()  
  450.             },  
  451.             showIntroduction() {  
  452.                 const ani = wx.createAnimation({  
  453.                     duration: 200  
  454.                 })  
  455.                 ani.bottom(0).step()  
  456.                 this.animation3 = ani.export()  
  457.             },  
  458.             hideIntroductione() {  
  459.                 const ani = wx.createAnimation({  
  460.                     duration: 200  
  461.                 })  
  462.                 ani.bottom('-45vh').step()  
  463.                 this.animation3 = ani.export()  
  464.             },  
  465.             showOnlineUser() {  
  466.                 this.isShowOnlineUser = true  
  467.                 setTimeout(() => {  
  468.                     const ani = wx.createAnimation({  
  469.                         duration: 200  
  470.                     })  
  471.   
  472.                     ani.bottom(0).step()  
  473.                     this.animation4 = ani.export()  
  474.                 }, 0)  
  475.             },  
  476.             hideOnlineUser() {  
  477.                 const duration = 200  
  478.                 const ani = wx.createAnimation({  
  479.                     duration  
  480.                 })  
  481.                 ani.bottom('-45vh').step()  
  482.   
  483.                 this.animation4 = ani.export()  
  484.                 setTimeout(() => {  
  485.                     this.isShowOnlineUser = false  
  486.                 }, duration)  
  487.             },  
  488.             showUserCard({  
  489.                 user_id  
  490.             }) {  
  491.                 this.isShowUserCard = true  
  492.                 this.userCardId = user_id  
  493.                 setTimeout(() => {  
  494.                     const ani = wx.createAnimation({  
  495.                         duration: 200  
  496.                     })  
  497.                     ani.bottom(0).step()  
  498.   
  499.                     this.animationUserCard = ani.export()  
  500.                 }, 0)  
  501.   
  502.             },  
  503.             hideUserCard() {  
  504.                 const duration = 200  
  505.                 const ani = wx.createAnimation({  
  506.                     duration  
  507.                 })  
  508.                 ani.bottom('-45vh').step()  
  509.   
  510.                 this.animationUserCard = ani.export()  
  511.                 setTimeout(() => {  
  512.                     this.isShowUserCard = false  
  513.                 }, duration)  
  514.             },  
  515.             sendgift() {  
  516.                 uni.showModal({  
  517.                     title: '提示',  
  518.                     content: '确认送礼?',  
  519.                     success: async (data) => {  
  520.                         try {  
  521.                             if (data.confirm) {  
  522.                                 await Model.sendGift({  
  523.                                     from_id: this.userInfo.userID,  
  524.                                     to_id: this.groupInfo.ownerID,  
  525.                                     gift_id: 1  
  526.                                 })  
  527.                                 this.tls.sendGift('礼物')  
  528.                             }  
  529.                         } catch (e) {  
  530.                             console.log("送礼物的回调", e)  
  531.                             // uni.showToast({  
  532.                             //  title: e.message  
  533.                             // })  
  534.                               
  535.                             // mock数据,上线前删除 模拟送礼动画  
  536.                             let msg = []  
  537.                             msg.push({  
  538.                                 name: this._formatNick(this.userInfo.userID, this.userInfo.nick),  
  539.                                 message: '给主播送礼了',  
  540.                                 id: `id${Date.now()}`  
  541.                             })  
  542.                             thisthis.message = this.message.concat(msg)  
  543.                             this.hasgift = true  
  544.                             this.giftAvatar = '/static/live/gift-item.png'  
  545.                             this.giftNick = '火箭'  
  546.                             // mock数据,上线前删除 模拟结束  
  547.                               
  548.                         } finally {  
  549.                             this.hideGift();  
  550.                         }  
  551.                     }  
  552.                 })  
  553.             },  
  554.             hideGift() {  
  555.                 const ani = wx.createAnimation({  
  556.                     duration: 200  
  557.                 })  
  558.                 ani.bottom('-45vh').step()  
  559.                 this.animation = ani.export()  
  560.             },  
  561.             async like() {  
  562.                 console.log('喜欢的动作')  
  563.                 // 这里需要接入API  
  564.                 // try {  
  565.                 //  await Model.like({  
  566.                 //      from_id: this.userInfo.userID,  
  567.                 //      to_id: this.groupInfo.ownerID  
  568.                 //  })  
  569.                 //  this.tls.like()  
  570.                 // } catch (e) {  
  571.                 //  uni.showToast({  
  572.                 //      title: e.message  
  573.                 //  })  
  574.                 // }  
  575.             },  
  576.             attention() {  
  577.                 wx.showLoading()  
  578.                 this.tls.attention().then((data) => {  
  579.                     wx.hideLoading()  
  580.                 }).catch(() => {  
  581.                     wx.hideLoading()  
  582.                 })  
  583.             },  
  584.             cancelAttention() {  
  585.                 wx.showLoading()  
  586.                 this.tls.cancelAttention().then((data) => {  
  587.                     wx.hideLoading()  
  588.                 }).catch(() => {  
  589.                     wx.hideLoading()  
  590.                 })  
  591.             },  
  592.             quitGroup() {  
  593.                 wx.showLoading({  
  594.                     mask: true  
  595.                 })  
  596.                 this.tls.exitRoom().then(() => {  
  597.                     wx.hideLoading()  
  598.                     wx.navigateBack()  
  599.                     this.isTimReady = false  
  600.                 }).catch((err) => {  
  601.                     wx.navigateBack()  
  602.                 })  
  603.             },  
  604.             _getVarsByKey(arr, key) {  
  605.                 var res  
  606.                 for (var i = 0; i < arr.length; i++) {  
  607.                     if (arr[i].key === key) {  
  608.                         res = arr[i].value;  
  609.                         break;  
  610.                     }  
  611.                 }  
  612.                 return res  
  613.             },  
  614.             sendMessage(data) {  
  615.                 console.log("有人发消息", data)  
  616.                 this.tls.sendMessage(data).then((res) => {  
  617.                     thisthis.message = this.message.concat([{  
  618.                         name: this._formatNick(this.userInfo.userID, this.userInfo.nick),  
  619.                         message: res.message,  
  620.                         id: `id${Date.now()}`  
  621.                     }])  
  622.                 })  
  623.             },  
  624.             // getUserSig() {  
  625.             //  wx.request({  
  626.             //      url: `${CONST.HOST}/getUserSig`,  
  627.             //      method: 'GET',  
  628.             //      header: {  
  629.             //          "content-type": "application/x-www-form-urlencoded"  
  630.             //      },  
  631.             //      data: {  
  632.             //          userId: app.userData.id  
  633.             //      },  
  634.             //      success: (data) => {  
  635.             //          this.userSig = data.data.userSig  
  636.             //          this.initTimLiveSell()  
  637.             //      },  
  638.             //      fail() {}  
  639.             //  })  
  640.             // },  
  641.             // TODO:临时加入,为了能直接进入直播间  
  642.             async auth() {  
  643.                 let userId = parseInt(Math.random() * 1000);  
  644.                 userId = "user"+userId  
  645.                 console.log("userName", userId)  
  646.                 let res = await this.$store.dispatch("user/sign",{user_id:userId})  
  647.                 // console.log("请求结果", res)  
  648.                 this.initConfig.userName = userId  
  649.                 this.initConfig.userSig = res.usersig  
  650.             }  
  651.         },  
  652.     }  
  653. </script>  
  654.   
  655. <style lang="less" scoped>  
  656.     .live{  
  657.         &-room-bg {  
  658.             width: 100vw;  
  659.             overflow: hidden;  
  660.             position: relative;  
  661.         }  
  662.         &-room-content {  
  663.             height: 100vh;  
  664.             width: 100vw;  
  665.             position: absolute;  
  666.             top: 0;  
  667.             left: 0;  
  668.             z-index: 2;  
  669.               
  670.             // 礼物  
  671.             .gifts,  
  672.             .goodslist,  
  673.             .introduction,  
  674.             .online-user,  
  675.             .user-card {  
  676.                 position: absolute;  
  677.                 width: 100vw;  
  678.                 height: 45vh;  
  679.                 background-color: #fff;  
  680.                 bottom: -45vh;  
  681.                 z-index: 800;  
  682.                 left: 0;  
  683.             }  
  684.             .user-card {  
  685.                 background-color: unset;  
  686.             }  
  687.             .gift-animation {  
  688.                 // 送礼的动画,显示在左下角  
  689.                 position: absolute;  
  690.                 bottom: 30vh;  
  691.                 left: 20rpx;  
  692.             }  
  693.             .coupon {  
  694.                 margin-top: 400rpx;  
  695.             }  
  696.         }  
  697.           
  698.         &-room-bottom {  
  699.             position: absolute;  
  700.             bottom: 0;  
  701.             width: 100vw;  
  702.             height: 50px;  
  703.         }  
  704.           
  705.     }  
  706.       
  707. </style>  

 

 

本文来自于:http://www.yoyo88.cn/study/uniapp/594.html

Powered by yoyo苏ICP备15045725号