标签：群聊 app ctx group item let user uni id
下图是我测试截图
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>
感谢大家观看，我们下次见
标签：群聊,app,ctx,group,item,let,user,uni,id 来源： https://blog.csdn.net/ab15176142633/article/details/121948183
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。