uni-app 170邀请加入群聊（二）
2021/12/22 23:52:42
本文主要是介绍uni-app 170邀请加入群聊（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
下图是我测试截图
app/controller/group.js
'use strict';
const Controller = require('egg').Controller;
class GroupController extends Controller {
// 获取群聊列表
async list() {
const { ctx, app } = this;
let current_user_id = ctx.authUser.id;
let page = ctx.params.page ? parseInt(ctx.params.page) : 1;
let limit = ctx.query.limit ? parseInt(ctx.query.limit) : 10;
let offset = (page - 1) * limit;
let rows = await app.model.Group.findAll({
where: {
status: 1
},
include: [{
model: app.model.GroupUser,
where: {
user_id: current_user_id
}
}]
});
return ctx.apiSuccess(rows);
}
// 创建群聊
async create() {
const { ctx,app } = this;
// 拿到当前用户id
let current_user_id = ctx.authUser.id;
// 验证参数
ctx.validate({
ids:{
require:true,
type:'array'
}
});
let { ids } = ctx.request.body;
// 验证是否是我的好友
let friends = await app.model.Friend.findAll({
where:{
user_id:current_user_id,
friend_id:ids
},
include:[{
model:app.model.User,
as:'friendInfo',
attributes:['nickname','username']
}]
});
if (!friends.length) {
return ctx.apiFail('请选择需要加入群聊的好友');
}
// 创建群聊
let name = friends.map(item=>item.friendInfo.nickname || item.friendInfo.username);
name.push(ctx.authUser.nickname || ctx.authUser.username); // 将自己的数据加入
let group = await app.model.Group.create({
name:name.join(','),
avatar:'',
user_id:current_user_id
});
// 加入群聊用户
let data = friends.map(item=>{
return {user_id:item.friend_id,group_id:group.id}
});
data.unshift({
user_id:current_user_id,
group_id:group.id
});
await app.model.GroupUser.bulkCreate(data);
// 消息推送
let message = {
id:(new Date()).getTime(), // 唯一id，后端生成唯一id
from_avatar:ctx.authUser.avatar,// 发送者头像
from_name:ctx.authUser.nickname || ctx.authUser.username,// 发送者昵称
from_id:current_user_id, // 发送者id
to_id:group.id,// 接收人id
to_name:group.name,// 接收人/群 名称
to_avatar:group.avatar,// 接收人/群 头像
chat_type:'group', // 接收类型
type:'system', // 消息类型
data:'创建群聊成功，可以聊天了', // 消息内容
options:{}, // 其他参数
create_time:(new Date()).getTime(),// 创建时间
isremove:0, // 是否撤回
group:group
}
data.forEach(item =>{
ctx.sendAndSaveMessage(item.user_id,message);
});
ctx.apiSuccess('ok');
}
// 查看群资料
async info() {
const { ctx, app } = this;
let current_user_id = ctx.authUser.id;
// 验证参数
ctx.validate({
id: {
required: true,
type: 'int',
desc: "群组id"
}
});
let { id } = ctx.params;
// 群组是否存在
let group = await app.model.Group.findOne({
where: {
status: 1,
id
},
include: [{
model: app.model.GroupUser,
attributes: ['user_id', 'nickname'],
include: [{
model: app.model.User,
attributes: ['id', 'nickname', 'avatar', 'username']
}]
}]
});
if (!group) {
return ctx.apiFail('该群聊不存在或者已被封禁');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item => item.user_id === current_user_id);
if (index === -1) {
return ctx.apiFail('你不是该群成员，没有权限');
}
ctx.apiSuccess(group);
}
// 修改群名称
async rename(){
const { ctx,app } = this;
let current_user_id = ctx.authUser.id;
// 参数验证
ctx.validate({
id:{
required:true,
type:'int',
desc:'群组id'
},
name:{
required:true,
type:'string',
desc:'群名称'
}
});
let { id,name } = ctx.request.body;
// 是否存在
let group = await app.model.Group.findOne({
where:{
id,
status:1
},
include:[{
model:app.model.GroupUser,
attributes:['user_id','nickname']
}]
});
if(!group){
return ctx.apiFail('该群聊不存在或者已被封禁');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
if(index === -1){
return ctx.apiFail('你不是该群成员');
}
// 验证是否是群主
if(group.user_id !== current_user_id){
return ctx.apiFail('你不是管理员，没有权限');
}
// 修改群名称
group.name = name;
await group.save();
let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
// 消息推送
let message = {
id:(new Date()).getTime(), // 唯一id，后端生成唯一id
from_avatar:ctx.authUser.avatar,// 发送者头像
from_name,// 发送者昵称
from_id:current_user_id, // 发送者id
to_id:group.id,// 接收人id
to_name:group.name,// 接收人/群 名称
to_avatar:group.name,// 接收人/群 头像
chat_type:'group', // 接收类型
type:'system', // 消息类型
data:`${from_name} 修改群名称为 ${name}`, // 消息内容
options:{}, // 其他参数
create_time:(new Date()).getTime(),// 创建时间
isremove:0, // 是否撤回
group:group
}
// 推送消息
group.group_users.forEach(item=>{
ctx.sendAndSaveMessage(item.user_id,message);
});
ctx.apiSuccess('ok');
}
// 推送群公告
async remark(){
const { ctx,app } = this;
let current_user_id = ctx.authUser.id;
// 参数验证
ctx.validate({
id:{
required:true,
type:'int',
desc:'群组id'
},
remark:{
required:true,
type:'string',
desc:'群公告'
}
});
let { id,remark } = ctx.request.body;
// 是否存在
let group = await app.model.Group.findOne({
where:{
id,
status:1
},
include:[{
model:app.model.GroupUser,
attributes:['user_id','nickname']
}]
});
if(!group){
return ctx.apiFail('该群聊不存在或者已被封禁');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
if(index === -1){
return ctx.apiFail('你不是该群成员');
}
// 验证是否是群主
if(group.user_id !== current_user_id){
return ctx.apiFail('你不是管理员，没有权限');
}
// 修改群公告
group.remark = remark;
await group.save();
let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
// 消息推送
let message = {
id:(new Date()).getTime(), // 唯一id，后端生成唯一id
from_avatar:ctx.authUser.avatar,// 发送者头像
from_name,// 发送者昵称
from_id:current_user_id, // 发送者id
to_id:group.id,// 接收人id
to_name:group.name,// 接收人/群 名称
to_avatar:group.name,// 接收人/群 头像
chat_type:'group', // 接收类型
type:'system', // 消息类型
data:`[新公告] ${remark}`, // 消息内容
options:{}, // 其他参数
create_time:(new Date()).getTime(),// 创建时间
isremove:0, // 是否撤回
group:group
}
// 推送消息
group.group_users.forEach(item=>{
ctx.sendAndSaveMessage(item.user_id,message);
});
ctx.apiSuccess('ok');
}
// 修改我在本群中的昵称
async nickname(){
const { ctx, app, service } = this;
let current_user_id = ctx.authUser.id;
// 参数验证
ctx.validate({
id:{
required:true,
type:'int',
desc:'群组id'
},
nickname:{
required:true,
type:'string',
desc:'昵称'
}
});
let { id,nickname } = ctx.request.body;
// 是否存在
let group = await app.model.Group.findOne({
where:{
id,
status:1
},
include:[{
model:app.model.GroupUser,
attributes:['user_id','nickname']
}]
});
if(!group){
return ctx.apiFail('该群聊不存在或者已被封禁');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
if(index === -1){
return ctx.apiFail('你不是该群成员');
}
// 修改昵称
let group_user = await app.model.GroupUser.findOne({
where:{
user_id:current_user_id,
group_id:group.id
}
});
if(group_user){
await group_user.update({
nickname
})
}
return ctx.apiSuccess('ok');
}
// 删除并退出群聊
async quit(){
const { ctx, app, service } = this;
let current_user_id = ctx.authUser.id;
// 参数验证
ctx.validate({
id:{
required:true,
type:'int',
desc:'群组id'
}
});
let { id } = ctx.request.body;
// 是否存在
let group = await app.model.Group.findOne({
where:{
id,
},
include:[{
model:app.model.GroupUser,
attributes:['user_id','nickname']
}]
});
if(!group){
return ctx.apiFail('该群聊不存在');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
if(index === -1){
return ctx.apiFail('你不是该群成员');
}
let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
// 组织消息格式
let message = {
id:(new Date()).getTime(), // 唯一id，后端生成唯一id
from_avatar:ctx.authUser.avatar,// 发送者头像
from_name,// 发送者昵称
from_id:current_user_id, // 发送者id
to_id:group.id,// 接收人id
to_name:group.name,// 接收人/群 名称
to_avatar:group.avatar,// 接收人/群 头像
chat_type:'group', // 接收类型
type:'system', // 消息类型
data:``, // 消息内容
options:{}, // 其他参数
create_time:(new Date()).getTime(),// 创建时间
isremove:0, // 是否撤回
group:group
}
if(group.user_id===current_user_id){
// 解散群
await app.model.Group.destroy({
where:{
id:group.id
}
});
message.data = '该群已被解散';
}else{
// 退出群
await app.model.GroupUser.destroy({
where:{
user_id:current_user_id,
group_id:id
}
});
message.data = `${from_name} 退出该群聊`;
}
// 推送消息
group.group_users.forEach(item=>{
ctx.sendAndSaveMessage(item.user_id,message);
});
return ctx.apiSuccess('ok');
}
// 踢出某个群成员
async kickoff(){
const {ctx,app} = this;
let current_user_id = ctx.authUser.id;
// 参数验证
ctx.validate({
id:{
required:true,
type:'int',
desc:'群组id'
},
user_id:{
required:true,
type:'int',
desc:'群公告'
}
});
let { id,user_id } = ctx.request.body;
// 是否存在
let group = await app.model.Group.findOne({
where:{
id,
status:1
},
include:[{
model:app.model.GroupUser,
attributes:['user_id','nickname'],
include:[{
model:app.model.User,
attributes:['username','nickname']
}]
}]
});
if(!group){
return ctx.apiFail('该群聊不存在或者已被封禁');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
if(index === -1){
return ctx.apiFail('你不是该群成员');
}
// 验证是否是群主
if(group.user_id !== current_user_id){
return ctx.apiFail('你不是管理员，没有权限');
}
// 不能踢自己
if(user_id === current_user_id){
return ctx.apiFail('不能踢自己');
}
// 对方不是该成员
let index2 = group.group_users.findIndex(item=>item.user_id === user_id);
if(index2 === -1){
return ctx.apiFail('对方不是该群成员');
}
let kickname = group.group_users[index2].nickname || group.group_users[index2].user.nickname || group.group_users[index2].user.username;
// 踢出该群
await app.model.GroupUser.destroy({
where:{
user_id:user_id,
group_id:group.id
}
});
// 返回成功
ctx.apiSuccess('ok');
// 构建消息格式
let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
let message = {
id:(new Date()).getTime(), // 唯一id，后端生成唯一id
from_avatar:ctx.authUser.avatar,// 发送者头像
from_name,// 发送者昵称
from_id:current_user_id, // 发送者id
to_id:group.id,// 接收人id
to_name:group.name,// 接收人/群 名称
to_avatar:group.avatar,// 接收人/群 头像
chat_type:'group', // 接收类型
type:'system', // 消息类型
data:`${from_name} 将 ${kickname} 移除群聊`, // 消息内容
options:{}, // 其他参数
create_time:(new Date()).getTime(),// 创建时间
isremove:0, // 是否撤回
group:group
}
// 消息推送
group.group_users.forEach(item=>{
ctx.sendAndSaveMessage(item.user_id,message);
})
}
// 邀请加入群聊
async invite(){
const {ctx,app} = this;
let current_user_id = ctx.authUser.id;
// 参数验证
ctx.validate({
id:{
required:true,
type:'int',
desc:'群组id'
},
user_id:{
required:true,
type:'int',
desc:'群公告'
}
});
let { id,user_id } = ctx.request.body;
// 是否存在
let group = await app.model.Group.findOne({
where:{
id,
status:1
},
include:[{
model:app.model.GroupUser,
attributes:['user_id','nickname'],
include:[{
model:app.model.User,
attributes:['username','nickname']
}]
}]
});
if(!group){
return ctx.apiFail('该群聊不存在或者已被封禁');
}
// 当前用户是否是该群成员
let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
if(index === -1){
return ctx.apiFail('你不是该群成员');
}
// 对方不是该成员
let index2 = group.group_users.findIndex(item=>item.user_id === user_id);
if(index2 !== -1){
return ctx.apiFail('对方已是该群成员');
}
// 对方是否存在
let user = await app.model.User.findOne({
where:{
id:user_id,
status:1
}
});
if(!user){
return ctx.apiFail('对方不存在或者已被封禁');
}
let invitename = user.nickname || user.username;
// 加入该群
await app.model.GroupUser.create({
user_id:user_id,
group_id:group.id
});
// 返回成功
ctx.apiSuccess('ok');
// 构建消息格式
let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
let message = {
id:(new Date()).getTime(), // 唯一id，后端生成唯一id
from_avatar:ctx.authUser.avatar,// 发送者头像
from_name,// 发送者昵称
from_id:current_user_id, // 发送者id
to_id:group.id,// 接收人id
to_name:group.name,// 接收人/群 名称
to_avatar:group.avatar,// 接收人/群 头像
chat_type:'group', // 接收类型
type:'system', // 消息类型
data:`${from_name} 邀请 ${invitename} 加入群聊`, // 消息内容
options:{}, // 其他参数
create_time:(new Date()).getTime(),// 创建时间
isremove:0, // 是否撤回
group:group
}
// 消息推送
group.group_users.forEach(item=>{
ctx.sendAndSaveMessage(item.user_id,message);
})
}
// 生成群二维码
async qrcode(){
const {ctx,app} = this;
ctx.qrcode(JSON.stringify({
id: ctx.params.id,
type: "group",
event: "navigateTo"
}));
}
}
module.exports = GroupController;
/pages/mail/mail/mail.vue
<template>
<view>
<!-- 导航栏 -->
<free-nav-bar title="选择" showBack :showRight="true">
<free-main-button :name="buttonText" slot="right" @click="submit"></free-main-button>
</free-nav-bar>
<!-- 通讯录列表 -->
<scroll-view scroll-y="true"
:style="'height:'+scrollHeight+'px;'"
:scroll-into-view="scrollInto">
<template v-if="type === 'see'">
<free-list-item v-for="(item,index) in typeList"
:key="item.key" :title="item.name"
:showRightIcon="false" showRight
@click="typeIndex = index">
<view slot="right"
style="width: 40rpx;height: 40rpx;"
class="border rounded-circle flex align-center justify-center mr-4">
<view v-if="typeIndex === index"
style="width: 30rpx;height: 30rpx;"
class="main-bg-color rounded-circle"></view>
</view>
</free-list-item>
</template>
<template v-if="type !== 'see' || (type === 'see' && (typeIndex === 1 || typeIndex === 2)) ">
<view v-for="(item,index) in list" :key="index"
:id="'item-'+item.title">
<view v-if="item.list.length"
class="py-2 px-3 border-bottom bg-light">
<text class="font-md text-dark">{{item.title}}</text>
</view>
<free-list-item v-for="(item2,index2) in item.list"
:key="index2" :title="item2.name"
:cover="item2.avatar || '/static/images/userpic.png'"
:showRightIcon="false" showRight
@click="selectItem(item2)">
<view slot="right"
style="width: 40rpx;height: 40rpx;"
class="border rounded-circle flex align-center justify-center mr-4">
<view v-if="item2.checked"
style="width: 30rpx;height: 30rpx;"
class="main-bg-color rounded-circle"></view>
</view>
</free-list-item>
</view>
</template>
</scroll-view>
<!-- 侧边导航条 -->
<view class="position-fixed right-0 bottom-0 bg-light flex flex-column" :style="'top:'+top+'px;'" style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<view class="flex-1 flex align-center justify-center"
v-for="(item,index) in list" :key="index">
<text class="font-sm text-muted">{{item.title}}</text>
</view>
</view>
<view class="position-fixed rounded-circle bg-light border flex align-center justify-center" v-if="current"
style="width: 150rpx;height: 150rpx;left: 300rpx;"
:style="'top:'+modalTop+'px;'">
<text class="font-lg">{{current}}</text>
</view>
</view>
</template>
<script>
import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
import freeListItem from "@/components/free-ui/free-list-item.vue"
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import { mapState } from 'vuex'
import $H from '@/common/free-lib/request.js';
export default {
components: {
freeNavBar,
freeListItem,
freeMainButton
},
data() {
return {
typeIndex:0,
typeList:[{
name:"公开",
key:"all"
},{
name:"谁可以看",
key:"only"
},{
name:"不给谁看",
key:"except"
},{
name:"私密",
key:"none"
}],
top:0,
scrollHeight:0,
scrollInto:'',
current:'',
selectList:[],
type:"",
limit:9,
id:0
}
},
onLoad(e) {
let res = uni.getSystemInfoSync()
this.top = res.statusBarHeight + uni.upx2px(90)
this.scrollHeight = res.windowHeight - this.top
if(e.type){
this.type = e.type
}
if(e.limit){
this.limit = parseInt(e.limit)
}
if(e.id){
this.id = e.id
if(e.type === 'inviteGroup'){
this.limit = 1
}
}
this.$store.dispatch('getMailList')
},
computed: {
...mapState({
list:state=>state.user.mailList
}),
buttonText(){
let text = '发送'
if(this.type === 'createGroup'){
text = '创建群组'
}
return text + ' ('+this.selectCount+')'
},
modalTop(){
return (this.scrollHeight - uni.upx2px(150)) / 2
},
// 每个索引的高度
itemHeight() {
let count = this.list.length
if(count < 1){
return 0
}
return this.scrollHeight / count
},
// 选中数量
selectCount(){
return this.selectList.length
}
},
methods: {
touchstart(e){
this.changeScrollInto(e)
},
touchmove(e){
this.changeScrollInto(e)
},
touchend(e){
this.current = ''
},
// 联动
changeScrollInto(e){
let Y = e.touches[0].pageY
// #ifdef MP
Y = Y - this.top
// #endif
let index = Math.floor(Y / this.itemHeight)
let item = this.list[index]
if(item){
this.scrollInto = 'item-'+item.title
this.current = item.title
}
},
// 选中/取消选中
selectItem(item){
if(!item.checked && this.selectCount === this.limit){
// 选中|限制选中数量
return uni.showToast({
title: '最多选中 '+this.limit+' 个',
icon: 'none'
});
}
item.checked = !item.checked
if(item.checked){ // 选中
this.selectList.push(item)
} else { // 取消选中
let index = this.selectList.findIndex(v=> v === item)
if(index > -1){
this.selectList.splice(index,1)
}
}
},
submit(){
if(this.type !== 'see' && this.selectCount === 0){
return uni.showToast({
title: '请先选择',
icon: 'none'
});
}
switch (this.type){
case 'createGroup': // 创建群组
$H.post('/group/create',{
ids:this.selectList.map(item=>item.user_id)
}).then(res=>{
// 见鬼这里跳转不行啊
uni.navigateTo({
url:'../../tabbar/index/index'
});
uni.showToast({
title: '创建群聊成功',
duration: 200
});
})
break;
case 'sendCard':
let item = this.selectList[0]
uni.$emit('sendItem',{
sendType:"card",
data:item.name,
type:"card",
options:{
avatar:item.avatar,
id:item.user_id
}
})
uni.navigateBack({
delta: 1
});
break;
case 'remind':
uni.$emit('sendResult',{
type:"remind",
data:this.selectList
})
uni.navigateBack({
delta: 1
});
break;
case 'see':
let k = this.typeList[this.typeIndex].key
if(k !== 'all' && k!== 'none' && !this.selectCount){
return uni.showToast({
title: '请先选择',
icon: 'none'
});
}
uni.$emit('sendResult',{
type:"see",
data:{
k,
v:this.selectList
}
})
uni.navigateBack({
delta: 1
});
break;
case 'inviteGroup':
console.log(this.selectList);
$H.post('/group/invite',{
id:this.id,
user_id:this.selectList[0].user_id
}).then(res=>{
uni.showToast({
title: '邀请成功',
icon: 'none'
});
uni.navigateBack({
delta: 1
});
})
break;
}
}
}
}
</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(res=>{
uni.showToast({
title: '操作成功',
icon:'none'
});
uni.navigateBack({
delta:1
})
})
}
})
},
updatenickName(){
this.confirmType = 'nickname';
this.confirmText = this.nickname
this.$refs.confirm.show((close)=>{
if(this.confirmText == ''){
return uni.showToast({
title:'昵称不能为空',
icon:'none'
})
}
$H.post('/group/nickname',{
id:this.detail.id,
nickname:this.confirmText
}).then(res=>{
uni.showToast({
title:'修改成功',
icon:'none'
});
this.nickname = this.confirmText;
close();
})
});
},
openGroupRemark(){
uni.navigateTo({
url: '../group-remark/group-remark?params='+encodeURIComponent(JSON.stringify({
id:this.detail.id,
remark:this.detail.remark
}))
});
},
openMail(){
let params = this.detail.chat_type === 'user' ? '?type=createGroup' : '?type=inviteGroup&id='+this.detail.id;
uni.navigateTo({
url:'/pages/mail/mail/mail'+params
});
},
openHistory(){
uni.navigateTo({
url:`../chat-history/chat-history?chat_tpe=${this.detail.chat_type}&id=${this.detail.id}`,
})
},
deleteUser(){
uni.navigateTo({
url:'../group-user/group-user?id='+this.detail.id
})
},
updateName(){
this.confirmText = this.detail.name
this.$refs.confirm.show((close)=>{
if(this.confirmText == ''){
return uni.showToast({
title:'群名称不能为空',
icon:'none'
})
}
$H.post('/group/rename',{
id:this.detail.id,
name:this.confirmText
}).then(res=>{
uni.showToast({
title:'修改成功',
icon:'none'
});
this.detail.name = this.confirmText;
close();
})
});
}
},
onShow() {
if(this.detail.chat_type === 'group'){
$H.get('/group_info/'+this.detail.id).then(res=>{
this.detail.remark = res.remark;
this.list = res.group_users.map(item=>{
if(item.user_id === this.user.id){
this.nickname = item.nickname;
}
return {
id:item.user_id,
name:item.nickname || item.user.nickname || item.user.username,
avatar:item.user.avatar
}
})
})
}
},
onLoad(e) {
if(!e.params){
return this.backToast();
}
let detail = JSON.parse(e.params);
// 获取当前会话的详细资料
detail = this.chat.getChatListItem(detail.id,detail.chat_type);
if(!detail){
return this.backToast()
}
this.detail = detail;
}
}
</script>
<style>
</style>
感谢大家观看，我们下次见
这篇关于uni-app 170邀请加入群聊（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-22项目：远程温湿度检测系统
- 2024-12-21《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
- 2024-12-21后台管理系统开发教程：新手入门全指南
- 2024-12-21后台开发教程：新手入门及实战指南
- 2024-12-21后台综合解决方案教程：新手入门指南
- 2024-12-21接口模块封装教程：新手必备指南
- 2024-12-21请求动作封装教程：新手必看指南
- 2024-12-21RBAC的权限教程：从入门到实践
- 2024-12-21登录鉴权实战：新手入门教程
- 2024-12-21动态权限实战入门指南
