uni-app 189扫一扫添加群聊功能

Posted 2019ab

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 189扫一扫添加群聊功能相关的知识,希望对你有一定的参考价值。

/components/free-ui/free-nav-bar.vue

<template>
	<view>
		<view :class="getClass">
			<!-- 状态栏 -->
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<!-- 导航 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 返回按钮 -->
					<!-- #ifndef MP -->
					<free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button>
					<!-- #endif -->
					<!-- 标题 -->
					<slot>
						<text v-if="title" class="font-md ml-3">getTitle</text>
					</slot>
				</view>
				<!-- 右边 -->
				<view class="flex align-center" v-if="showRight">
					<slot name="right">
						<free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
						<free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
					</slot>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="fixed" :style="fixedStyle"></view>
		
		<!-- 扩展菜单 -->
		<free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525"
		bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="flex flex-column" 
			style="width: 320rpx;height: 525rpx;">
				<view class="flex-1 flex align-center" 
				hover-class="bg-hover-dark"
				v-for="(item,index) in menus"
				:key="index"
				@click="clickEvent(item)">
					<text class="iconfont pl-3 pr-2 font-md text-white">item.icon</text>
					<text class="font-md text-white">item.name</text>
				</view>
			</view>
		</free-popup>
		
		
	</view>
</template>

<script>
	import freeIconButton from "./free-icon-button.vue"
	import freePopup from "./free-popup.vue"
	export default 
		props: 
			showBack:
				type:Boolean,
				default:false
			,
			backEvent:
				type:Boolean,
				default:true
			,
			title: 
				type: [String,Boolean],
				default:false 
			,
			fixed:
				type:Boolean,
				default:true
			,
			noreadnum:
				type:[Number,String],
				default:0
			,
			bgColor:
				type:String,
				default:"bg-light"
			,
			showRight:
				type:Boolean,
				default:true
			
		,
		components:
			freeIconButton,
			freePopup
		,
		data() 
			return 
				statusBarHeight:0,
				navBarHeight:0,
				menus:[
					
						name:"发起群聊",
						event:"navigateTo",
						path:"/pages/mail/mail/mail?type=createGroup",
						icon:"\\ue633"
					,
					
						name:"添加好友",
						event:"navigateTo",
						path:"/pages/common/search/search",
						icon:"\\ue65d"
					,
					// #ifndef H5
					
						name:"扫一扫",
						event:"scan",
						icon:"\\ue614"
					,
					// #endif
					
						name:"收付款",
						event:"",
						icon:"\\ue66c"
					,
					
						name:"帮助与反馈",
						event:"",
						icon:"\\ue66c"
					
				],
			
		,
		mounted() 
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
		,
		computed: 
			fixedStyle() 
				return `height:$this.navBarHeightpx`
			,
			getTitle()
				let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''
				return this.title + noreadnum
			,
			getClass()
				let fixed = this.fixed?'fixed-top':''
				return `$fixed $this.bgColor` 
			
		,
		methods: 
			openExtend() 
				this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))
			,
			// 返回
			back()
				if(this.backEvent)
					return uni.navigateBack(
						delta: 1
					);
				
				this.$emit('back')
			,
			search()
				uni.navigateTo(
					url: '/pages/common/search/search'
				);
			,
			clickEvent(item)
				this.$refs.extend.hide()
				switch (item.event)
					case 'navigateTo':
					uni.navigateTo(
						url: item.path,
					);
						break;
					case "scan":
					uni.scanCode(
						success:(res)=>
							if(res.scanType === 'QR_CODE')
								let result = JSON.parse(res.result);
								// result.id
							
						
					)
					break;
					default:
					uni.showToast(
						title: '靓仔,自己发挥',
						icon: 'none'
					);
						break;
				
			
		,
	
</script>

<style>
</style>

/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

以上是关于uni-app 189扫一扫添加群聊功能的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 190扫一扫加入群聊功能

uni-app 190扫一扫加入群聊功能

uni-app 群聊发送消息相关(84-92)

asp微信扫一扫代码,用asp写的实现调用微信扫一扫功能

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

用微信扫一扫功能扫描二维码下载安装APK不能用?