5.8 主播直播間(一) · UNI-APP實戰直播App

``` <template> <view class="page"> <video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video>  <view style="position: fixed;left: 0;right: 0;" :style="'top:'+statusBarHeight+'px'">  <view style="height: 80rpx;" class="px-2 flex justify-between align-center"> <view style="width: 325rpx;background-color: rgba(0,0,0,0.4);" class="flex rounded-circle"> <view class="p"> <image src="/static/tabbar/min.png" style="width: 70rpx;height: 70rpx;" class="rounded-circle"></image> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">昵稱</text> <text class="text-white font-sm">100</text> </view> <view class="p"> <view class="rounded-circle flex align-center justify-center bg-danger" style="width: 70rpx;height: 70rpx;"> <text class="text-white">+</text> </view> </view> </view> <view style="width: 325rpx;background-color: rgba(0,0,0,0.4);" class="flex rounded-circle"> <scroll-view scroll-x="true" class="flex-1 flex"> <view class="p" v-for="i in 20" :key="i"> <image src="/static/tabbar/min.png" style="width: 70rpx;height: 70rpx;" class="rounded-circle"></image> </view> </scroll-view> <view class="p"> <view class="rounded-circle flex align-center justify-center bg-danger" style="width: 70rpx;height: 70rpx;"> <text class="text-white font-sm">1000</text> </view> </view> </view> </view>  <view style="height: 80rpx;" class="px-2 my-2"> <view style="width: 325rpx;background-color: rgba(0,0,0,0.4);" class="flex rounded-circle align-center"> <view class="p"> <text class="text-warning">金幣</text> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">100</text> </view> </view> </view>  <f-gift ref="gift"></f-gift> </view>  <f-danmu ref="danmu"></f-danmu>  <view style="position: fixed;left: 0;bottom: 0;right: 0;height: 120rpx;" class="flex align-center justify-between"> <view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in btns" :key="index"> <text class="iconfont text-white mb-1">{{item.icon}}</text> <text class="text-white font">{{item.name}}</text> </view>  </view> </view> </template> <script> import fGift from '@/components/live/f-gift.vue'; import fDanmu from '@/components/live/f-danmu.vue'; import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'; import demoGifts from '@/demo/gifts.js'; export default { components: { fGift, fDanmu, uniPopup }, data() { return { statusBarHeight:0, content:"", gifts:[], giftActiveId:0, mode:"SD", enableCamera:true, position:"back", beauty:0, whiteness:0, btns:[{ name:"翻轉", icon:"\ue605" },{ name:"畫質", icon:"\ue60c" },{ name:"美顏", icon:"\ue632" },{ name:"美白", icon:"\ue631" },{ name:"更多", icon:"\ue84b" }] } }, onLoad(e) { let res = uni.getSystemInfoSync() this.statusBarHeight = res.statusBarHeight let options = JSON.parse(e.options) this.mode = options.mode this.position = options.position this.beauty = options.beauty this.whiteness = options.whiteness // 演示 this.gifts = demoGifts }, mounted() { // 送禮物演示 // setInterval(()=>{ // this.$refs.gift.send({ // username:"發送人", // avatar:"", // gift_name:"蛋糕", // gift_image:"/static/gift/3.png", // num:1 // }) // },3000) // 發送彈幕演示 // let id = 1 // setInterval(()=>{ // this.$refs.danmu.send({ // id:id, // name:"昵稱"+id, // content:"測試內容"+id // }) // id++ // },3000) }, methods: { back(){ uni.navigateBack({ delta: 1 }); }, } } </script> <style> .page{ flex: 1; } .btn{ height: 80rpx; border-radius: 100rpx; background-color: rgba(255,255,255,0.12); align-items: center; justify-content: center; } .btn-icon{ width: 80rpx; margin-right: 20rpx; } </style> ```