需要添加直播接口
This commit is contained in:
cbb
283
components/LiveMoreActionsPanel.nvue
Normal file
283
components/LiveMoreActionsPanel.nvue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<view class="bottom-drawer-container" v-if="modelValue">
|
||||
<view class="drawer-overlay" @tap="close"></view>
|
||||
<view class="bottom-drawer" :class="{ 'drawer-open': modelValue }">
|
||||
<text class="title">更多功能</text>
|
||||
|
||||
<view class="drawer-content">
|
||||
<view class="drawer-actions">
|
||||
<view class="action-btn" @tap="handleBeauty">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" src="/static/images/live-beauty.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content">美颜</text>
|
||||
</view>
|
||||
<view class="action-btn" @tap="handleAudioEffect">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" src="/static/images/live-effects.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content">音效</text>
|
||||
</view>
|
||||
<view class="action-btn" @tap="handleCamera">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" src="/static/images/live-flip.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content">翻转</text>
|
||||
</view>
|
||||
<view class="action-btn" @tap="handleSwitchMirror">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" src="/static/images/mirror.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content">镜像</text>
|
||||
</view>
|
||||
|
||||
<view class="action-btn" @tap="openNetworkQualityPanel">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" src="/static/images/live-dashboard.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content">仪表盘</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<NetworkQualityPanel v-model="isShowNetworkQualityPanel"></NetworkQualityPanel>
|
||||
<BeautyPanel v-model="isShowBeautyPanel"></BeautyPanel>
|
||||
<AudioEffectPanel v-model="isShowAudioEffect"></AudioEffectPanel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import NetworkQualityPanel from '@/uni_modules/tuikit-atomic-x/components/NetworkQualityPanel.nvue';
|
||||
import BeautyPanel from '@/uni_modules/tuikit-atomic-x/components/BeautyPanel.nvue';
|
||||
import AudioEffectPanel from '@/uni_modules/tuikit-atomic-x/components/AudioEffectPanel.nvue';
|
||||
import {
|
||||
useDeviceState
|
||||
} from "@/uni_modules/tuikit-atomic-x/state/DeviceState";
|
||||
|
||||
const {
|
||||
isFrontCamera,
|
||||
switchCamera,
|
||||
switchMirror,
|
||||
localMirrorType
|
||||
} = useDeviceState(uni?.$liveID);
|
||||
|
||||
const defaultavatarURL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
userName: '',
|
||||
userID: '',
|
||||
avatarURL: '',
|
||||
isMessageDisabled: false,
|
||||
userRole: 1
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
const isShowNetworkQualityPanel = ref(false);
|
||||
const isShowBeautyPanel = ref(false);
|
||||
const isShowAudioEffect = ref(false);
|
||||
|
||||
const handleBeauty = () => {
|
||||
isShowBeautyPanel.value = true;
|
||||
};
|
||||
const openNetworkQualityPanel = () => {
|
||||
isShowNetworkQualityPanel.value = true
|
||||
}
|
||||
const handleAudioEffect = () => {
|
||||
isShowAudioEffect.value = true;
|
||||
};
|
||||
const handleCamera = () => {
|
||||
switchCamera({
|
||||
isFront: !isFrontCamera.value
|
||||
})
|
||||
};
|
||||
const handleSwitchMirror = () => {
|
||||
if(!isFrontCamera.value) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '仅前置摄像头支持该设置'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (localMirrorType.value === 'AUTO') {
|
||||
switchMirror({
|
||||
mirrorType: 'DISABLE'
|
||||
})
|
||||
} else if (localMirrorType.value === 'DISABLE') {
|
||||
switchMirror({
|
||||
mirrorType: 'ENABLE'
|
||||
})
|
||||
} else if (localMirrorType.value === 'ENABLE') {
|
||||
switchMirror({
|
||||
mirrorType: 'DISABLE'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-drawer-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.drawer-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bottom-drawer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(31, 32, 36, 1);
|
||||
border-top-left-radius: 32rpx;
|
||||
border-top-right-radius: 32rpx;
|
||||
transform: translateY(100%);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 48rpx;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-header-left-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-header-avatar-container {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding-top: 20rpx
|
||||
}
|
||||
|
||||
.drawer-header-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.drawer-header-content-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-name {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.drawer-id {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
flex: 1;
|
||||
padding: 0 48rpx;
|
||||
margin-bottom: 40rpx;
|
||||
/* height: 300rpx; */
|
||||
}
|
||||
|
||||
.drawer-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-btn-image-container {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color: rgba(43, 44, 48, 1);
|
||||
margin-bottom: 12rpx;
|
||||
border-radius: 25rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.action-btn-content {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.divider-line-container {
|
||||
height: 68rpx;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
width: 268rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 200rpx;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
|
||||
.camera-mic-setting {
|
||||
flex: 1;
|
||||
background-color: #1f1024;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user