uni-app 166将某人踢出群聊
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 166将某人踢出群聊相关的知识，希望对你有一定的参考价值。
/pages/chat/group-user/group-user.vue
<template>
<view class="page">
<!-- 导航栏 -->
<free-nav-bar title="选择" showBack :showRight="false">
</free-nav-bar>
<!-- 搜索框 -->
<view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px;'">
<input type="text" value="" v-model="keyword" placeholder="搜索" class="bg-white rounded" placeholder-class="text-center" style="height: 80rpx;"/>
</view>
<view style="height:140rpx;"></view>
<!-- 联系人列表 -->
<view class="px-2 py-1 bg-light">
<text class="font-sm text-muted">keyword ? '搜索结果' : '最近联系人'</text>
</view>
<free-list-item v-for="(item,index) in allList" :key="index" :title="item.name" :cover="item.avatar || '/static/images/userpic.png'" showRight :showRightIcon="false" @click="selectItem(item)">
<view v-if="muliSelect" slot="right" class="border rounded-circle flex align-center" style="width: 40rpx;height: 40rpx;" >
<view v-if="item.checked" class="main-bg-color rounded-circle" style="width: 39rpx;height: 39rpx;">
</view>
</view>
</free-list-item>
<view style="height:100rpx;" class="flex align-center justify-center" v-if="keyword !== '' && searchList.length === 0">
<text class="font text-light-muted">暂无搜索结果</text>
</view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
import $H from '@/common/free-lib/request.js';
export default
components:
freeNavBar,
freeMainButton,
freeListItem,
freeAvatar
,
data()
return
keyword:'',
muliSelect:false,
top:0,
list:[]
,
computed:
// 最终列表
allList()
return this.keyword === '' ? this.list : this.searchList;
,
// 搜索结果列表
searchList()
if(this.keyword === '')
return [];
return this.list.filter(item=>
return item.name.indexOf(this.keyword) !== -1;
)
,
// 选中列表
selectList()
return this.list.filter(item=>item.checked)
,
// 选中数量
selectCount()
return this.selectList.length;
,
methods:
// 选中、取消选中
selectItem(item)
uni.showModal(
content:'是否要踢出该成员？',
success:(res)=>
if(res.confirm)
console.log('踢出');
)
,
onLoad(e)
let res = uni.getSystemInfoSync();
this.top = res.statusBarHeight + uni.upx2px(90);
if(e.id)
$H.get('/group_info/'+e.id).then(res=>
this.list = res.group_users.map(item=>
return
id:item.user_id,
name:item.nickname || item.user.nickname || item.user.username,
avatar:item.user.avatar
)
)
</script>
<style>
</style>
/pages/chat/chat-set/chat-set.vue
<template>
<view style="background-color: #EDEDED;">
<!-- 导航栏 -->
<free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
<view class="flex flex-wrap py-3 bg-white">
<!-- 私聊 -->
<view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
<free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
<text class="font text-muted mt-1" >detail.name</text>
</view>
<!-- 群聊 -->
<view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'>
<free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
<text class="font text-muted mt-1" >item.name</text>
</view>
<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" @click="openMail">
<view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
<text class="text-light-muted" style="font-size: 100rpx;" >+</text>
</view>
</view>
<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" @click="deleteUser">
<view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
<text class="text-light-muted" style="font-size: 100rpx;" >-</text>
</view>
</view>
</view>
<free-divider></free-divider>
<view v-if="detail.chat_type==='group'">
<free-list-item title="群聊名称" showRight :showLeftIcon="false" @click="updateName()">
<text slot="right" class="font text-muted">detail.name</text>
</free-list-item>
<free-list-item title="群二维码" showRight :showLeftIcon="false" @click="openCode">
<text slot="right" class="iconfont font-md text-light-muted"></text>
</free-list-item>
<free-list-item title="群公告" showRight :showLeftIcon="false" @click="openGroupRemark"></free-list-item>
</view>
<free-divider></free-divider>
<free-list-item title="查找聊天记录" showRight :showLeftIcon="false" @click="openHistory"></free-list-item>
<free-divider></free-divider>
<free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.nowarn" @change="updateChatItem($event,'nowarn')" color="#08C060" />
</free-list-item>
<free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.istop" @change="updateChatItem($event,'istop')" color="#08C060"/>
</free-list-item>
<free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.strongwarn" @change="updateChatItem($event,'strongwarn')" color="#08C060"/>
</free-list-item>
<free-divider></free-divider>
<free-list-item title="清空聊天记录" showRight :showLeftIcon="false" @click="clear"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.chat_type==='group'">
<free-divider></free-divider>
<free-list-item title="我在本群的昵称" showRight :showLeftIcon="false" @click="updatenickName">
<text slot="right" class="font text-muted">nickname</text>
</free-list-item>
<free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.shownickname" @change="updateChatItem($event,'shownickname')" color="#08C060"/>
</free-list-item>
</view>
<free-divider></free-divider>
<free-list-item title="投诉" showRight :showLeftIcon="false"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.chat_type === 'group'" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="quit">
<text class="font-md text-danger">删除并退出</text>
</view>
<free-confirm :title="'修改'+confirmTitle" ref="confirm">
<input type="text" class="border-bottom font-md" :placeholder="confirmTitle" v-model="confirmText"/>
</free-confirm>
<view style="height: 200rpx;"></view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
import freeDivider from '@/components/free-ui/free-divider.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeConfirm from '@/components/free-ui/free-confirm.vue';
import auth from '@/common/mixin/auth.js';
import mapState from 'vuex';
import $H from '@/common/free-lib/request.js';
export default
mixins:[auth],
components:
freeNavBar,
freeAvatar,
freeDivider,
freeListItem,
freeConfirm
,
computed:
...mapState(
chat:state=>state.user.chat,
user:state=>state.user.user
),
confirmTitle()
return this.confirmType === 'name' ? '群名称' : '昵称';
,
data()
return
list:[],
confirmText:'',
nickname:'',
detail:
id:0, // 接收人/群 id
chat_type:'user', // 接收类型 user 单聊 group群聊
name:'', // 接收人/群 昵称
avatar:"", // 接收人/群 头像
type:'',// 最后一条消息类型
istop:false, // 是否置顶
shownickname:false, // 是否显示昵称
nowarn:false, // 是否免打扰
strongwarn:false, // 是否强提醒
user_id:0,//管理员id，
remark:'', // 群公告
invite_confirm:0, // 邀请确认
,
methods:
clear()
uni.showModal(
content:'是否要清空聊天记录？',
success:(res)=>
if(res.confirm)
this.chat.clearChatDetail(this.detail.id,this.detail.chat_type);
uni.showToast(
title:'清除成功',
icon:'none'
)
uni.$emit('updateHistory');
)
,
openCode()
uni.navigateTo(
url:'../../my/code/code?params='+encodeURIComponent(JSON.stringify(
id:this.detail.id,
name:this.detail.name,
avatar:this.detail.avatar
))+'&type=group',
)
,
updateChatItem(e,k)
console.log(e.detail.value,k);
this.detail[k] = e.detail.value;
this.chat.updateChatItem(
id:this.detail.id,
chat_type:this.detail.chat_type
,this.detail);
,
quit()
uni.showModal(
content:'是否要删除或退出群聊？',
success: (res) =>
if(res.cancel) return;
$H.post('/group/quit',
id:this.detail.id
).then(resuni-app 167将某人踢出群聊