修复已知问题
This commit is contained in:
bobobobo
@@ -33,6 +33,13 @@
|
||||
},
|
||||
fail: (code, msg) => {
|
||||
console.error(`sendTextMessage failed, code: ${code}, msg: ${msg}`);
|
||||
if (code == 10017) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '你被禁止发言',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
inputValue.value = ""
|
||||
|
||||
@@ -1,313 +1,396 @@
|
||||
<template>
|
||||
<view class="bottom-drawer-container" v-if="modelValue">
|
||||
<view class="drawer-overlay" @tap="close"></view>
|
||||
<view class="bottom-drawer" :class="{ 'drawer-open': modelValue }">
|
||||
|
||||
<view class="drawer-header">
|
||||
<view class="user-info">
|
||||
<image class="user-avatar" :src="userInfo?.avatarURL || defaultAvatarURL" mode="aspectFill" />
|
||||
<view class="user-details">
|
||||
<view class="name-badge-row">
|
||||
<text class="user-name">{{ userInfo?.userName || userInfo?.userID || '' }}</text>
|
||||
<!-- <view class="badge">
|
||||
<view class="bottom-drawer-container" v-if="modelValue">
|
||||
<view class="drawer-overlay" @tap="close"></view>
|
||||
<view class="bottom-drawer" :class="{ 'drawer-open': modelValue }">
|
||||
<view class="drawer-header">
|
||||
<view class="user-info">
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="userInfo?.avatarURL || defaultAvatarURL"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="user-details">
|
||||
<view class="name-badge-row">
|
||||
<text class="user-name">
|
||||
{{ userInfo?.userName || userInfo?.userID || '' }}
|
||||
</text>
|
||||
<!-- <view class="badge">
|
||||
<image class="badge-icon" src="/static/images/heart.png" mode="aspectFit" />
|
||||
<text class="badge-text">65</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<text class="user-id">ID: {{ userInfo?.userID || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="follow-button" @tap="followUser">
|
||||
</view>
|
||||
<text class="user-id">ID: {{ userInfo?.userID || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="follow-button" @tap="followUser">
|
||||
<text class="follow-text">Follow</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="drawer-content">
|
||||
<view class="drawer-actions">
|
||||
<!-- <view class="action-btn" @tap="muteSpeak">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" v-if="userInfo?.isMessageDisabled" src="/static/images/unmute-speak.png"
|
||||
mode="aspectFit" />
|
||||
<image class="action-btn-image" v-else src="/static/images/mute-speak.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content" v-if="userInfo?.isMessageDisabled">解除禁言</text>
|
||||
<text class="action-btn-content" v-else>禁言</text>
|
||||
</view> -->
|
||||
<view class="action-btn" @tap="kickOut">
|
||||
<view class="action-btn-image-container">
|
||||
<image class="action-btn-image" src="/static/images/kick-out-room.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="action-btn-content">踢出房间</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="divider-line-container">
|
||||
<view class="drawer-content">
|
||||
<view class="drawer-actions">
|
||||
<view class="action-btn" @tap="muteSpeak">
|
||||
<view class="action-btn-image-container">
|
||||
<image
|
||||
class="action-btn-image"
|
||||
v-if="userInfo?.isMessageDisabled"
|
||||
src="/static/images/unmute-speak.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image
|
||||
class="action-btn-image"
|
||||
v-else
|
||||
src="/static/images/mute-speak.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
class="action-btn-content"
|
||||
v-if="userInfo?.isMessageDisabled"
|
||||
>
|
||||
解除禁言
|
||||
</text>
|
||||
<text class="action-btn-content" v-else>禁言</text>
|
||||
</view>
|
||||
<view class="action-btn" @tap="kickOut">
|
||||
<view class="action-btn-image-container">
|
||||
<image
|
||||
class="action-btn-image"
|
||||
src="/static/images/kick-out-room.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<text class="action-btn-content">踢出房间</text>
|
||||
</view>
|
||||
|
||||
<view class="action-btn" @tap="onDdmini">
|
||||
<view class="action-btn-image-container">
|
||||
<image
|
||||
class="action-btn-image"
|
||||
src="/static/images/administrator.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<text class="action-btn-content">设置管理员</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="divider-line-container">
|
||||
<view class="divider-line"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
useLiveListState
|
||||
} from "@/uni_modules/tuikit-atomic-x/state/LiveListState";
|
||||
import {
|
||||
useLiveAudienceState
|
||||
} from "@/uni_modules/tuikit-atomic-x/state/LiveAudienceState";
|
||||
const {
|
||||
currentLive
|
||||
} = useLiveListState();
|
||||
const {
|
||||
setAdministrator,
|
||||
revokeAdministrator,
|
||||
kickUserOutOfRoom,
|
||||
disableSendMessage
|
||||
} = useLiveAudienceState(uni?.$liveID);
|
||||
import { ref, computed } from 'vue'
|
||||
import { useLiveListState } from '@/uni_modules/tuikit-atomic-x/state/LiveListState'
|
||||
import { useLiveAudienceState } from '@/uni_modules/tuikit-atomic-x/state/LiveAudienceState'
|
||||
const { currentLive } = useLiveListState()
|
||||
const {
|
||||
setAdministrator,
|
||||
revokeAdministrator,
|
||||
kickUserOutOfRoom,
|
||||
disableSendMessage
|
||||
} = useLiveAudienceState(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,
|
||||
},
|
||||
liveID: {
|
||||
type: String,
|
||||
}
|
||||
});
|
||||
const defaultAvatarURL =
|
||||
'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png'
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userInfo: {
|
||||
type: Object
|
||||
},
|
||||
liveID: {
|
||||
type: String
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
const emit = defineEmits(['update:modelValue', 'update:userInfo'])
|
||||
|
||||
const muteSpeak = () => {
|
||||
console.log(
|
||||
`mute or unMute speak, liveID: ${props.liveID}, isMessageDisabled: ${props?.userInfo?.isMessageDisabled}`);
|
||||
const params = {
|
||||
liveID: uni?.$liveID,
|
||||
userID: props?.userInfo?.userID,
|
||||
isDisable: !props?.userInfo?.isMessageDisabled,
|
||||
};
|
||||
const userData = computed({
|
||||
get() {
|
||||
return props.userInfo
|
||||
},
|
||||
set(value) {
|
||||
emit('update:userInfo', value)
|
||||
}
|
||||
})
|
||||
|
||||
if (props?.userInfo?.isMessageDisabled) {
|
||||
disableSendMessage(params);
|
||||
} else {
|
||||
disableSendMessage(params);
|
||||
}
|
||||
const close = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
close();
|
||||
};
|
||||
/** 设置为管理员 */
|
||||
const onDdmini = () => {
|
||||
console.log('====', userData.value)
|
||||
uni.showModal({
|
||||
title: `提示`,
|
||||
content: `确认设置该用户为管理员？`,
|
||||
success: c => {
|
||||
if (c.confirm) {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true // 防止穿透点击
|
||||
})
|
||||
setAdministrator({
|
||||
liveID: uni?.$liveID,
|
||||
userID: props?.userInfo?.userID,
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'success',
|
||||
mask: true
|
||||
})
|
||||
close()
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const kickOut = () => {
|
||||
console.log('kick out from room', props?.userInfo?.userID);
|
||||
const muteSpeak = () => {
|
||||
console.log(
|
||||
`mute or unMute speak, liveID: ${props.liveID}, isMessageDisabled: ${props?.userInfo?.isMessageDisabled}`
|
||||
)
|
||||
const isShow = props?.userInfo?.isMessageDisabled
|
||||
uni.showModal({
|
||||
title: `提示`,
|
||||
content: isShow ? `确认禁止用户发言？` : `确认恢复用户发言？`,
|
||||
success: c => {
|
||||
if (c.confirm) {
|
||||
const params = {
|
||||
liveID: uni?.$liveID,
|
||||
userID: props?.userInfo?.userID,
|
||||
isDisable: !props?.userInfo?.isMessageDisabled
|
||||
}
|
||||
if (isShow) {
|
||||
disableSendMessage(params)
|
||||
} else {
|
||||
disableSendMessage(params)
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
content: `确认踢出${props?.userInfo?.userName || props?.userInfo?.userID}吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
kickUserOutOfRoom({
|
||||
liveID: uni?.$liveID,
|
||||
userID: props?.userInfo?.userID,
|
||||
success: () => {
|
||||
close()
|
||||
console.log(`kickUserOutOfRoom success`);
|
||||
},
|
||||
fail: (errCode, errMsg) => {
|
||||
console.log(`kickUserOutOfRoom fail errCode: ${errCode}, errMsg: ${errMsg}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
close()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const followUser = () => {
|
||||
console.warn('== 关注用户 ', userInfo?.userName);
|
||||
// 这里可以添加关注用户的逻辑
|
||||
uni.showToast({
|
||||
title: '关注成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
const kickOut = () => {
|
||||
console.log('kick out from room', props?.userInfo?.userID)
|
||||
|
||||
uni.showModal({
|
||||
content: `确认踢出${
|
||||
props?.userInfo?.userName || props?.userInfo?.userID
|
||||
}吗？`,
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
kickUserOutOfRoom({
|
||||
liveID: uni?.$liveID,
|
||||
userID: props?.userInfo?.userID,
|
||||
success: () => {
|
||||
close()
|
||||
console.log(`kickUserOutOfRoom success`)
|
||||
},
|
||||
fail: (errCode, errMsg) => {
|
||||
console.log(
|
||||
`kickUserOutOfRoom fail errCode: ${errCode}, errMsg: ${errMsg}`
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const followUser = () => {
|
||||
console.warn('== 关注用户 ', userInfo?.userName)
|
||||
// 这里可以添加关注用户的逻辑
|
||||
uni.showToast({
|
||||
title: '关注成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-drawer-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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(34, 38, 46, 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;
|
||||
height: 400rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bottom-drawer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(34, 38, 46, 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;
|
||||
height: 400rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.drawer-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 40rpx 48rpx;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.drawer-header {
|
||||
padding: 40rpx 48rpx;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
border-width: 2rpx;
|
||||
border-color: #ffffff;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
border-width: 2rpx;
|
||||
border-color: #ffffff;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name-badge-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.name-badge-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.user-name {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #8B5CF6;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.badge {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #8b5cf6;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.badge-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-text {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.user-id {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.follow-button {
|
||||
background-color: #007AFF;
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
/* height: 64rpx; */
|
||||
}
|
||||
.follow-button {
|
||||
background-color: #007aff;
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
/* height: 64rpx; */
|
||||
}
|
||||
|
||||
.follow-text {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.follow-text {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
height: 400rpx;
|
||||
justify-content: flex-start;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
.drawer-content {
|
||||
height: 400rpx;
|
||||
justify-content: flex-start;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.drawer-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.drawer-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 10rpx;
|
||||
height: 160rpx;
|
||||
width: 120rpx
|
||||
}
|
||||
.action-btn {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 10rpx;
|
||||
height: 160rpx;
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.action-btn-image-container {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color: rgba(43, 44, 48, 1);
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.action-btn-image-container {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color: rgba(43, 44, 48, 1);
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn-image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.action-btn-image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.action-btn-content {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.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-container {
|
||||
height: 68rpx;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
width: 268rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 200rpx;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
</style>
|
||||
.divider-line {
|
||||
width: 268rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 200rpx;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user