979 lines
29 KiB
Vue
979 lines
29 KiB
Vue
<template>
|
||
<view class="box">
|
||
<view class="box-top">
|
||
<text class="total">群成员 共{{friendList.length}}人</text>
|
||
<view class="list">
|
||
<view class="list-item" v-for="(item,index) in friendList" :key='index' @tap="handleRoute(item.userID)">
|
||
<image class="list-URL" :src="item.avatar || head"></image>
|
||
<text>{{item.nameCard}}</text>
|
||
</view>
|
||
<!-- v-show="shows" -->
|
||
<view class="list-item" @click='addfriends' >
|
||
<u-icon class="list-URL" name="plus-people-fill" color="#A6ADBB" size="36"></u-icon>
|
||
<text>邀请成员</text>
|
||
</view>
|
||
<view class="list-item" @click='delfriends' v-show="!isShow">
|
||
<u-icon class="list-URL" name="trash" color="#A6ADBB" size="36"></u-icon>
|
||
<text>删除成员</text>
|
||
</view>
|
||
</view>
|
||
<u-gap height="10" bgColor="#F6F7F9"></u-gap>
|
||
</view>
|
||
|
||
<view class="box-center">
|
||
<view class="info-list">
|
||
<view class="line" @tap.stop="changeAvatar">
|
||
<text class="list-left">群头像</text>
|
||
<view class="list-right" >
|
||
<image class="image_radius"
|
||
:src="groupInformation.avatar">
|
||
</image>
|
||
<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
|
||
</view>
|
||
<view class="popup-mask-avatar" v-if="popupToggleAvatar" @tap.stop="handleEditToggleAvatar">
|
||
<view class="popup-main-avatar" @tap.stop="handleCatchTap">
|
||
<view class="pop-main-header-avatar">
|
||
<label class="popup-main-header-title-avatar">设置头像</label>
|
||
<label class="button-avatar" @tap.stop="handleEditSubmitAvatar">确认</label>
|
||
<view class="image-list">
|
||
<image v-for="(item, index) in avatarList" :key="index"
|
||
:class="'image-avatar ' + (item.URL === avatar && 'image-avatar-active')"
|
||
:src="item.URL" :data-value="item" @tap="click"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line" @tap="handleEditToggle">
|
||
<text class="list-left">群聊昵称</text>
|
||
<view class="list-right" >
|
||
<text>{{groupInformation.name}}</text>
|
||
<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
|
||
</view>
|
||
<view class="popup-mask" v-if="popupToggle" @tap.stop="handleEditToggle">
|
||
<view class="popup-main" @tap.stop="handleCatchTap">
|
||
<view class="popup-main-header">
|
||
<label class="popup-main-header-title">修改群聊昵称</label>
|
||
<button class="button" @tap.stop="handleEditSubmit" :disabled="!infoNick">确认</button>
|
||
</view>
|
||
<input class="popup-main-input" type="text" :value="infoNick" @input="bindEditInput" />
|
||
<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line">
|
||
<text class="list-left">群ID</text>
|
||
<text class="list-right">{{groupInformation.groupID}}</text>
|
||
</view>
|
||
<view class="line">
|
||
<text class="list-left">群类型</text>
|
||
<text class="list-right">社交群</text>
|
||
</view>
|
||
<view class="line" @tap="handleEdit">
|
||
<text class="list-left">我的本群昵称</text>
|
||
<view class="list-right" >
|
||
<text class="list-right">{{ownNick}}</text>
|
||
<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
|
||
</view>
|
||
<view class="popup-mask" v-if="popup" @tap.stop="handleEdit">
|
||
<view class="popup-main" @tap.stop="handleCatchTap">
|
||
<view class="popup-main-header">
|
||
<label class="popup-main-header-title">修改我的群昵称</label>
|
||
<button class="button" @tap.stop="change" :disabled="!infoName">确认</button>
|
||
</view>
|
||
<input class="popup-main-input" type="text" :value="infoName" @input="Input" />
|
||
<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line" @tap="handleIntroduction">
|
||
<text class="list-left">群介绍</text>
|
||
<view class="list-right introduction" >
|
||
<text>{{groupInformation.introduction}}</text>
|
||
<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
|
||
</view>
|
||
<view class="popup-mask" v-if="popupIntro" @tap.stop="handleIntroduction">
|
||
<view class="popup-main" @tap.stop="handleCatchTap">
|
||
<view class="popup-main-header">
|
||
<label class="popup-main-header-title">修改群聊介绍</label>
|
||
<button class="button" @tap.stop="introductionSubmit"
|
||
:disabled="!infoIntroduction">确认</button>
|
||
</view>
|
||
<input class="popup-main-input" type="text" :value="infoIntroduction" @input="introInput" />
|
||
<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line" @tap="handleNotification">
|
||
<text class="list-left">群公告</text>
|
||
<view class="list-right introduction" >
|
||
<text>{{groupInformation.notification}}</text>
|
||
<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
|
||
</view>
|
||
<view class="popup-mask" v-if="popupNoti" @tap.stop="handleNotification">
|
||
<view class="popup-main" @tap.stop="handleCatchTap">
|
||
<view class="popup-main-header">
|
||
<label class="popup-main-header-title">修改群公告</label>
|
||
<button class="button" @tap.stop="notificationSubmit"
|
||
:disabled="!infoNotification">确认</button>
|
||
</view>
|
||
<input class="popup-main-input" type="text" :value="infoNotification" @input="notiInput" />
|
||
<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line">
|
||
<text class="list-left">申请加入群方式</text>
|
||
<picker class="tip" @change="bindJoinOptionChange" :value="purviews.cur" range-key="name" :range="purviews.list">
|
||
<text class="list-right">{{purviews.name}}</text>
|
||
</picker>
|
||
</view>
|
||
<view class="line">
|
||
<text class="list-left">消息提示类型</text>
|
||
<view class="list-right">
|
||
<picker class="tip" @change="bindPickerChange" :value="index" :range="array">
|
||
<view class="uni-input">
|
||
<text>{{array[index]}}</text>
|
||
<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="line">
|
||
<text class="list-left">全体禁言</text>
|
||
<view class="uni-list">
|
||
<view class="uni-list-cell uni-list-cell-pd" @click="banned">
|
||
<switch :checked="show" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="butt">
|
||
<u-button type="error" class="quit-main" @tap="exit" v-show="isShow">退出群聊</u-button>
|
||
<br>
|
||
<u-button type="warning" class="quit-main" @tap="dissovle" v-show="!isShow">解散群聊</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
popupToggleAvatar: false, //群头像
|
||
array: ['接受消息并提示', '接受消息但不提示', '屏蔽消息'],
|
||
index: 0,
|
||
shows: false,
|
||
isShow: true,
|
||
friendList: '',
|
||
groupInformation: '',
|
||
popupToggle: false, //群聊昵称
|
||
popup: false, //本群昵称
|
||
popupIntro: false, //群介绍
|
||
popupNoti: false, // 群公告
|
||
infoNick: '',
|
||
infoName: '',
|
||
infoIntroduction: '',
|
||
infoNotification: '',
|
||
show: false,
|
||
ownID: '',
|
||
ownNick: '',
|
||
ownerID: '',
|
||
head: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png',
|
||
avatar: '',
|
||
avatarList: [
|
||
{
|
||
avatarname: '头像5',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_05.png',
|
||
},
|
||
{
|
||
avatarname: '头像6',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_06.png',
|
||
},
|
||
{
|
||
avatarname: '头像7',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_07.png',
|
||
},
|
||
{
|
||
avatarname: '头像8',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_08.png',
|
||
},
|
||
{
|
||
avatarname: '头像9',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_09.png',
|
||
},
|
||
{
|
||
avatarname: '头像10',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_10.png',
|
||
},
|
||
{
|
||
avatarname: '头像11',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_11.png',
|
||
},
|
||
{
|
||
avatarname: '头像12',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_12.png',
|
||
},
|
||
{
|
||
avatarname: '头像13',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_13.png',
|
||
},
|
||
{
|
||
avatarname: '头像14',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_14.png',
|
||
},
|
||
{
|
||
avatarname: '头像15',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_15.png',
|
||
},
|
||
{
|
||
avatarname: '头像16',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_16.png',
|
||
},
|
||
{
|
||
avatarname: '头像17',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_17.png',
|
||
},
|
||
{
|
||
avatarname: '头像18',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_18.png',
|
||
},
|
||
{
|
||
avatarname: '头像19',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_19.png',
|
||
},
|
||
{
|
||
avatarname: '头像20',
|
||
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_20.png',
|
||
},
|
||
],
|
||
purviews: {
|
||
cur: 0,
|
||
ApplyJoinOption:'',
|
||
InviteJoinOption:'',
|
||
list: [
|
||
{name:'所有人都能进',ApplyJoinOption:'FreeAccess',InviteJoinOption:'FreeAccess'},
|
||
{name:'需要群主验证',ApplyJoinOption:'NeedPermission',InviteJoinOption:'NeedPermission'},
|
||
{name:'只能群主拉人',ApplyJoinOption:'DisableApply',InviteJoinOption:'NeedPermission'},
|
||
]
|
||
}
|
||
|
||
}
|
||
},
|
||
onLoad: function(option) {
|
||
console.log(option);
|
||
this.groupProfile(option);
|
||
this.groupMemberList(option);
|
||
this.getPer();
|
||
},
|
||
methods: {
|
||
// 修改头像
|
||
changeAvatar() {
|
||
this.popupToggleAvatar = true;
|
||
},
|
||
click(e) {
|
||
console.log(e.currentTarget.dataset.value);
|
||
this.avatar = e.currentTarget.dataset.value.URL;
|
||
},
|
||
handleEditToggleAvatar() {
|
||
this.popupToggleAvatar = !this.popupToggleAvatar;
|
||
this.avatar = this.avatar;
|
||
},
|
||
// 修改头像确认
|
||
handleEditSubmitAvatar() {
|
||
const groupID = this.groupInformation.groupID;
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
avatar: this.avatar
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group) // 修改成功后的群组详细资料
|
||
this.groupInformation = imResponse.data.group;
|
||
this.popupToggleAvatar = !this.popupToggleAvatar;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '群头像更换成功',
|
||
});
|
||
}).catch((imError)=> {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
this.popupToggleAvatar = !this.popupToggleAvatar;
|
||
});
|
||
},
|
||
// 群消息设置
|
||
bindPickerChange: function(e) {
|
||
console.log('picker发送选择改变，携带值为', e.target.value);
|
||
this.index = e.target.value;
|
||
const groupID = this.groupInformation.groupID;
|
||
if (this.index === 0) {
|
||
// 拒收群消息后，重新开启新消息提醒
|
||
let promise = uni.$TUIKit.setMessageRemindType({
|
||
groupID: groupID,
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE
|
||
});
|
||
promise.then(function(imResponse) {
|
||
// 设置成功后 SDK 会触发 TIM.EVENT.CONVERSATION_LIST_UPDATED 事件（遍历列表，并读取 Conversation.messageRemindType）
|
||
console.log(imResponse.data.group);
|
||
}).catch(function(imError) {
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
} else if (this.index === 1) {
|
||
// 群消息免打扰， 一般的实现是在线接收消息， 离线不接收消息（ 在有离线推送的情况下）
|
||
let promise = uni.$TUIKit.setMessageRemindType({
|
||
groupID: groupID,
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
|
||
});
|
||
promise.then(function(imResponse) {
|
||
// 设置消息免打扰成功
|
||
console.log(imResponse.data.group)
|
||
}).catch(function(imError) {
|
||
// 设置消息免打扰失败
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
} else if (this.index === 2) {
|
||
// 拒收群消息（通过 getMessageList 接口可拉取到其他群成员发送的消息）
|
||
let promise = uni.$TUIKit.setMessageRemindType({
|
||
groupID: groupID,
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_DISCARD
|
||
});
|
||
promise.then(function(imResponse) {
|
||
// 设置成功后 SDK 会触发 TIM.EVENT.CONVERSATION_LIST_UPDATED 事件（遍历列表，并读取 Conversation.messageRemindType）
|
||
console.log(imResponse.data.group)
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
}
|
||
},
|
||
// 点击进入群成员信息
|
||
handleRoute(id) {
|
||
if (id != this.own) {
|
||
const ID = 'C2C' + id;
|
||
uni.navigateTo({
|
||
url: `/pages/im/chat/chat?conversationID=${ID}`,
|
||
});
|
||
}
|
||
},
|
||
// 邀请好友
|
||
addfriends() {
|
||
const groupID = this.groupInformation.groupID;
|
||
uni.navigateTo({
|
||
url: '/pages/im/group/invitation-friends/invitation?groupID=' + groupID
|
||
});
|
||
},
|
||
// 删除好友
|
||
delfriends() {
|
||
if (this.ownID === this.groupInformation.ownerID) {
|
||
console.log("群主");
|
||
const groupID = this.groupInformation.groupID;
|
||
uni.navigateTo({
|
||
url: '/pages/im/group/delete-friends/delete?groupID=' + groupID
|
||
});
|
||
}
|
||
},
|
||
// 设置禁言
|
||
banned() {
|
||
const groupID = this.groupInformation.groupID;
|
||
if (this.show === false) {
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
muteAllMembers: true, // true 表示全体禁言，false表示取消全体禁言
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group.muteAllMembers) // 修改成功后的群组详细资料
|
||
this.show = imResponse.data.group.muteAllMembers
|
||
}).catch((imError)=> {
|
||
if(imError.message=='no permission'){
|
||
this.show = false;
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
});
|
||
}
|
||
if (this.show === true) {
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
muteAllMembers: false, // true 表示全体禁言，false表示取消全体禁言
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group.muteAllMembers) // 修改成功后的群组详细资料
|
||
this.show = imResponse.data.group.muteAllMembers
|
||
}).catch((imError)=> {
|
||
if(imError.message=='no permission'){
|
||
this.show = true;
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
});
|
||
}
|
||
},
|
||
// 获取群聊信息
|
||
groupProfile(option) {
|
||
let promise = uni.$TUIKit.getGroupProfile({
|
||
groupID: option.id,
|
||
groupCustomFieldFilter: ['key1', 'key2']
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group, '2222222');
|
||
if(imResponse.data.group.avatar === "FaceUrl"){
|
||
imResponse.data.group.avatar = "https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/gruopavatar.png"
|
||
}
|
||
this.groupInformation = imResponse.data.group;
|
||
this.show = imResponse.data.group.muteAllMembers;
|
||
this.ownNick = imResponse.data.group.selfInfo.nameCard;
|
||
console.log(this.groupInformation)
|
||
let item = imResponse.data.group;
|
||
console.log(item.joinOption,'===============');
|
||
switch(item.joinOption){
|
||
case 'FreeAccess':this.purviews.name = '所有人都能进';this.purviews.cur = 0;break;
|
||
case 'NeedPermission':this.purviews.name = '需要群主验证';this.purviews.cur = 1;break;
|
||
case 'DisableApply':this.purviews.name = '只能群主拉人';this.purviews.cur = 2;break;
|
||
}
|
||
|
||
if (this.ownID === this.groupInformation.ownerID) {
|
||
console.log("群主");
|
||
this.isShow = false;
|
||
if (this.groupInformation.type === "Private") {
|
||
this.shows = true;
|
||
}
|
||
} else {
|
||
console.log("成员");
|
||
this.isShow = true;
|
||
};
|
||
if (this.groupInformation.selfInfo.messageRemindType === "AcceptAndNotify") {
|
||
this.index = 0;
|
||
} else if (this.groupInformation.selfInfo.messageRemindType === "AcceptNotNotify") {
|
||
this.index = 1;
|
||
} else if (this.groupInformation.selfInfo.messageRemindType === "Discard") {
|
||
this.index = 2;
|
||
}
|
||
}).catch(function(imError) {
|
||
console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
|
||
});
|
||
},
|
||
groupMemberList(option) {
|
||
let promise = uni.$TUIKit.getGroupMemberList({
|
||
groupID: option.id,
|
||
count: 100,
|
||
offset: 0
|
||
}); // 从0开始拉取30个群成员
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.memberList); // 群成员列表
|
||
imResponse.data.memberList.map(item=>{
|
||
item.nameCard = item.nameCard?item.nameCard:item.nick?item.nick:item.userID
|
||
})
|
||
this.friendList = imResponse.data.memberList;
|
||
}).catch(function(imError) {
|
||
console.warn('getGroupMemberList error:', imError);
|
||
});
|
||
},
|
||
handleEditToggle() {
|
||
this.popupToggle = !this.popupToggle;
|
||
this.infoNick = this.groupInformation.name;
|
||
console.log(this.infoNick, '999');
|
||
},
|
||
handleEdit() {
|
||
this.popup = !this.popup;
|
||
this.infoName = this.ownNick;
|
||
console.log(this.infoName, '999');
|
||
},
|
||
handleIntroduction() {
|
||
this.popupIntro = !this.popupIntro;
|
||
this.infoIntroduction = this.groupInformation.introduction;
|
||
console.log(this.infoIntroduction, '999');
|
||
},
|
||
handleNotification() {
|
||
this.popupNoti = !this.popupNoti;
|
||
this.infoNotification = this.groupInformation.notification;
|
||
console.log(this.infoNotification, '999');
|
||
},
|
||
// 修改昵称 禁止冒泡
|
||
handleCatchTap() {
|
||
return;
|
||
},
|
||
// 获得更改群昵称输入
|
||
bindEditInput(e) {
|
||
const val = e.detail.value;
|
||
this.infoNick = val ? val : '';
|
||
},
|
||
// 获得更改我的群昵称输入
|
||
Input(e) {
|
||
const val = e.detail.value;
|
||
this.infoName = val ? val : '';
|
||
},
|
||
// 获得更改群介绍输入
|
||
introInput(e) {
|
||
const val = e.detail.value;
|
||
this.infoIntroduction = val ? val : '';
|
||
},
|
||
// 获得更改群公告输入
|
||
notiInput(e) {
|
||
const val = e.detail.value;
|
||
this.infoNotification = val ? val : '';
|
||
},
|
||
// 修改昵称确认
|
||
handleEditSubmit() {
|
||
console.log(this.groupInformation.groupID);
|
||
const groupID = this.groupInformation.groupID;
|
||
if (this.infoNick === this.groupInformation.name) {
|
||
return;
|
||
}
|
||
this.popupToggle = false;
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
name: this.infoNick, // 修改群名称
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group) // 修改成功后的群组详细资料
|
||
this.groupInformation = imResponse.data.group;
|
||
this.popupToggle = false;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '修改成功',
|
||
});
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
});
|
||
},
|
||
// 修改我的群昵称确认
|
||
change() {
|
||
const groupID = this.groupInformation.groupID;
|
||
const ownID = this.ownID;
|
||
let promise = uni.$TUIKit.setGroupMemberNameCard({
|
||
groupID: groupID,
|
||
userID: ownID,
|
||
nameCard: this.infoName
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.member); // 修改后的群成员资料
|
||
this.popup = false;
|
||
this.ownNick = imResponse.data.member.nameCard;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '修改成功',
|
||
});
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('setGroupMemberNameCard error:', imError); // 设置群成员名片失败的相关信息
|
||
});
|
||
},
|
||
// 修改群介绍确认
|
||
introductionSubmit() {
|
||
console.log(this.groupInformation.groupID);
|
||
const groupID = this.groupInformation.groupID;
|
||
console.log(this.infoIntroduction)
|
||
this.popupIntro = false;
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
introduction: this.infoIntroduction, // 修改群简介
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group) // 修改成功后的群组详细资料
|
||
this.groupInformation = imResponse.data.group;
|
||
this.popupIntro = false;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '修改成功',
|
||
});
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
});
|
||
},
|
||
// 修改群公告确认
|
||
notificationSubmit() {
|
||
const groupID = this.groupInformation.groupID;
|
||
this.popupNoti = false;
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
notification: this.infoNotification, // 修改群简介
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group) // 修改成功后的群组详细资料
|
||
this.groupInformation = imResponse.data.group;
|
||
this.popupNoti = false;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '修改成功',
|
||
});
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
});
|
||
},
|
||
//获取个人ID
|
||
getPer() {
|
||
let promise = uni.$TUIKit.getMyProfile();
|
||
promise.then(imResponse => {
|
||
this.ownNick = imResponse.data.nick;
|
||
this.ownID = imResponse.data.userID;
|
||
console.log(imResponse.data);
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('getMyProfile error:', imError); // 获取个人资料失败的相关信息
|
||
});
|
||
},
|
||
// 设置进群权限
|
||
bindJoinOptionChange(e){
|
||
let item = this.purviews.list[e.target.value];
|
||
const groupID = this.groupInformation.groupID;
|
||
let promise = uni.$TUIKit.updateGroupProfile({
|
||
groupID: groupID,
|
||
joinOption:item.ApplyJoinOption,
|
||
inviteOption:item.InviteJoinOption,
|
||
});
|
||
promise.then(imResponse => {
|
||
console.log(imResponse.data.group) // 修改成功后的群组详细资料
|
||
this.groupInformation = imResponse.data.group;
|
||
this.purviews.name = item.name;
|
||
this.purviews.cur = e.target.value
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '修改成功',
|
||
});
|
||
}).catch(function(imError) {
|
||
if(imError.message=='no permission'){
|
||
this.$msg('无修改权限！')
|
||
}
|
||
console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
|
||
});
|
||
|
||
},
|
||
// 退出群聊
|
||
exit() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定退出群聊？',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
const groupID = this.groupInformation.groupID;
|
||
let promise = uni.$TUIKit.quitGroup(groupID);
|
||
promise.then(function(imResponse) {
|
||
console.log(imResponse.data.groupID); // 退出成功的群 ID
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '成功退出',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
uni.navigateBack({
|
||
delta: 2
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
},
|
||
});
|
||
}).catch(function(imError) {
|
||
console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 解散群聊
|
||
dissovle() {
|
||
console.log("ok")
|
||
if (this.groupInformation.type === "Private") {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '不能解散 Work 类型的群组',
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定解散群聊？',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
const groupID = this.groupInformation.groupID;
|
||
let promise = uni.$TUIKit.dismissGroup(groupID);
|
||
promise.then(function(imResponse) { // 解散成功
|
||
console.log(imResponse.data.groupID); // 被解散的群组 ID
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '成功解散',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
uni.navigateBack({
|
||
delta: 2
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
},
|
||
});
|
||
}).catch(function(imError) {
|
||
console.warn('dismissGroup error:', imError); // 解散群组失败的相关信息
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-input {
|
||
display: flex;
|
||
}
|
||
|
||
.introduction {
|
||
max-width: 50%;
|
||
word-break: break-all;
|
||
white-space: pre-wrap;
|
||
font-size: 14px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.introduction text {
|
||
padding: 6px 0;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items:center;
|
||
}
|
||
|
||
.total {
|
||
width: 100%;
|
||
display: block;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 14px;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
border-top: 1px solid #eef0f3;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background-color: white;
|
||
width: 100%;
|
||
letter-spacing: 0;
|
||
line-height: 24px;
|
||
padding: 40rpx 0;
|
||
border-bottom: 1px solid #eef0f3;
|
||
}
|
||
|
||
.list-item {
|
||
display: block;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-left: 11px;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-item text {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.list-URL {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius:10rpx;
|
||
border:2rpx solid #eef0f3;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.box-center {
|
||
width: 100%;
|
||
}
|
||
|
||
.info-list {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
}
|
||
|
||
.line {
|
||
display: flex;
|
||
border-bottom: 1px solid #eef0f3;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 16px;
|
||
line-height: 50px;
|
||
padding: 10rpx 22rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.list-right {
|
||
display: flex;
|
||
padding: 0;
|
||
color:#B2B3B2;
|
||
}
|
||
|
||
.info-list view:nth-child(1) image {
|
||
width: 48px;
|
||
height: 46px;
|
||
padding: 2px;
|
||
}
|
||
|
||
.popup-mask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 0;
|
||
/* #ifdef H5 */
|
||
top: calc(88rpx + constant(safe-area-inset-top));
|
||
top: calc(88rpx + env(safe-area-inset-top));
|
||
/* #endif */
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.popup-main {
|
||
width: 100vw;
|
||
background: #ffffff;
|
||
padding: 32px 20px;
|
||
height: 400rpx;
|
||
}
|
||
|
||
.popup-main-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
color: #000000;
|
||
letter-spacing: 0;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.popup-main-header button {
|
||
font-size: 16px;
|
||
color: #5856d5;
|
||
letter-spacing: 0;
|
||
line-height: 28px;
|
||
width: auto !important;
|
||
background: transparent;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.popup-main-input {
|
||
background: #f4f5f9;
|
||
padding: 14px 20px;
|
||
margin: 20px 0;
|
||
border-radius: 20px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.text {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.butt {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding:50rpx;
|
||
width:80%;
|
||
margin:auto;
|
||
>view{
|
||
margin-bottom:40rpx;
|
||
}
|
||
}
|
||
|
||
.quit-main {
|
||
margin-top: 20px;
|
||
width: 40%;
|
||
height: 46px;
|
||
}
|
||
|
||
.popup-mask-avatar {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 0;
|
||
/* #ifdef H5 */
|
||
top: calc(88rpx + constant(safe-area-inset-top));
|
||
top: calc(88rpx + env(safe-area-inset-top));
|
||
/* #endif */
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.popup-main-avatar {
|
||
width: 100vw;
|
||
height: 54%;
|
||
background: #ffffff;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.popup-main-header-title-avatar {
|
||
margin-bottom: 24px;
|
||
padding-left: 10px;
|
||
width: 104px;
|
||
height: 25px;
|
||
}
|
||
|
||
.button-avatar {
|
||
float: right;
|
||
font-size: 16px;
|
||
color: #5856d5;
|
||
letter-spacing: 0;
|
||
line-height: 25px;
|
||
width: auto !important;
|
||
background: transparent;
|
||
margin-right: 28px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.image-list {
|
||
width: 100%;
|
||
height: 800px;
|
||
overflow: hidden;
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.image-avatar {
|
||
width: 68px;
|
||
height: 68px;
|
||
float: left;
|
||
margin: 10px 10px;
|
||
border-radius: 4px;
|
||
border: 1px solid #ffffff;
|
||
}
|
||
|
||
.image-avatar-active {
|
||
border: 1px solid #5856d5;
|
||
border-radius: 4px;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|