下图是我测试截图
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>
感谢大家观看，我们下次见
