uni-app 170邀请加入群聊（二）

本文主要是介绍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">&#xe647;</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邀请加入群聊（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

uni-app 170邀请加入群聊（二）

app/controller/group.js

/pages/mail/mail/mail.vue

/pages/chat/chat-set/chat-set.vue

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯