5.6 創建直播頁 - 美顏和美白 · UNI-APP實戰直播App

## 一、分別給美白和美顏綁定對應的點擊事件 ## 二、點擊美白、美顏、模式保存對應的狀態 ## 三、實現美白和美顏的滑塊拖動布局 ## 四、實現美白和美顏功能 ## 五、實現彈窗標題顯示對應的提示 ## 六、最終代碼 ``` <template> <view> <live-pusher id="livePusher" ref="livePusher" class="livePusher" url="" :mode="mode" :muted="true" :enable-camera="enableCamera" :auto-focus="autoFocus" :beauty="beauty" whiteness="whiteness" device-position = "devicePosition" @statechange="statechange" @netstatus="netstatus" @error="error" :style="{'height' : windowHeight + 'px' }" style="width:750rpx" > </live-pusher> <view style="position: fixed; left : 0; right : 0; height: 500rpx;" :style="{'top' : statusBarHeight + 'px'}">  <view class="flex align-center justify-center" style="width: 90rpx; height:90rpx; background-color: yellow;"> <text class="iconfont text-white"></text> </view>  <view class="position-absolute rounded p-2 flex align-center" style="left: 90rpx; right : 100rpx; height: 160rpx; background-color: rgba(0,0,0,0.2);"> <view class="position-relative rounded" style="width: 120rpx; height: 120rpx;"> <image src="/static/gift/3.png" style="width: 120rpx; height: 120rpx;"></image> <text class="text-white position-absolute font" style="left:0; right:0; bottom:0;">更換封面</text> </view> <view class="flex-1 ml-2"> <input class="mb-2" type="text" value="" placeholder="請輸入直播間標題"/> <text class="text-white font">#請選擇分類</text> </view> </view>  <view class="position-absolute right-0 flex flex-column" style="width: 100rpx;"> <view @click="switchCamera" style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">翻轉</text> </view> <view @click="openPopup('mode')" style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">畫質</text> </view> <view @click="openPopup('beauty')" style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">美顏</text> </view> <view @click="openPopup('whiteness')" style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">美白</text> </view> </view> </view>  <view class="position-fixed bg-main flex align-center justify-center rounded-circle" style="left : 100rpx; right : 100rpx; bottom: 100rpx; height : 120rpx;"> <text class="text-white font-md ">開始視頻直播</text> </view> <uni-popup type="bottom" ref="popup"> <view class="bg-white"> <view class="flex align-center justify-center border-bottom" style="height : 90rpx;"> <text class="font">{{popupTitle}}</text> </view>  <view v-if="popupType === 'mode'"> <view @click="chooseMode(item)" v-for="(item,index) in modeList" :key="index" :class="mode === item.type ? 'bg-main' : ''" class="flex align-center justify-center py-2 " hover-class="bg-light"> <text class="font-md " :class="mode === item.type ? 'text-white' : ''">{{item.desc}}</text> </view> </view>  <view v-else-if="popupType === 'beauty'"> <slider show-value :block-size="18" :min="0" :max="9" :step="1" :value="beauty" @change="handleSliderChange"/> </view>  <view v-else-if="popupType === 'whiteness'"> <slider show-value :block-size="18" :min="0" :max="9" :step="1" :value="whiteness" @change="handleSliderChange"/> </view> <view class="f-divider"></view> <view class="flex align-center justify-center " style="height : 90rpx;"> <text class="font">取消</text> </view> </view> </uni-popup> </view> </template> <script> export default { data() { return { // 屏幕的高度 windowHeight : 0, // 保存live-pusher 實例對象 context : null, // 保存狀態欄高度 statusBarHeight : 0, // 保存工具點擊切換的狀態 popupType : "mode", // 畫質數據列表 modeList : [ { type : "SD", desc : "標清" }, { type : "HD", desc : "高清" }, { type : "FHD", desc : "超清" } ], // 推流地址，支持RTMP協議。 url : "", // 推流視頻模式，可取值：SD（標清）, HD（高清）, FHD（超清）。 mode : "SD", // 開啟攝像頭 enableCamera : true, // 自動聚集 autoFocus : true, // 美顏，取值范圍 0-9（iOS取值范圍為1），0 表示關閉。 beauty : 0, // 美白，取值范圍 0-9（iOS取值范圍為1），0 表示關閉。 whiteness : 0, // 前置或后置，值為front, back devicePosition : "back" }; }, onLoad() { const res = uni.getSystemInfoSync() this.windowHeight = res.windowHeight this.statusBarHeight = res.statusBarHeight }, onReady() { this.context = uni.createLivePusherContext("livePusher",this) this.startPreview() }, computed:{ popupTitle(){ let o = { mode : "畫質", beauty : "美顏", whiteness : "美白" } return o[this.popupType] } }, methods: { // 切換相機鏡頭 switchCamera(){ this.context.switchCamera({ success: (e) => { console.log(e) this.devicePosition = this.devicePosition === "back" ? 'front' : 'back' } }) }, // 拉起popup彈窗 openPopup(type){ this.popupType = type this.$refs.popup.open() }, // 切換畫質 chooseMode(item){ this.mode = item.type uni.showToast({ title : "畫質切換為" + item.desc, icon : "none" }) this.$refs.popup.close() }, // 開啟預覽 startPreview(){ this.context.startPreview({ success : (e)=>{ console.log(e) } }) }, // 拖動滑塊觸發的方法 handleSliderChange(e){ this[this.popupType] = e.detail.value }, // 監聽直播狀態的變化 statechange(e){ console.log(e) }, // 監聽直播網絡狀態變化 netstatus(e){ console.log(e) }, // 監聽直播錯誤變化 error(e){ console.log(e) } } }; </script> <style></style> ```