添加发起群聊功能

src/api/commonApi.js

@@ -12,7 +12,7 @@ export function register(data) {
     return request({
         url: '/register',
         method: 'post',
-        params: data
+        data: data
     })
 }
 
@@ -25,7 +25,6 @@ export function loadMessages(data) {
     })
 }
 
-
 //通讯录加载
 export function loadUserFriendsPage(data) {
     return request({
@@ -68,12 +67,38 @@ export function acceptFriendsApply(data) {
     })
 }
 
-
 //获取群成员信息
 export function loadGroupUserInfo(data) {
     return request({
         url:'/loadGroupUserInfo',
         method: 'get',
         params: data
     })
+}
+
+// //同意群聊申请
+// export function acceptGroupApply(data) {
+//     return request({
+//         url:'/acceptGroupApply',
+//         method: 'post',
+//         data: data
+//     })
+// }
+
+// //群聊邀请
+// export function applyAddGroup(data) {
+//     return request({
+//         url:'/applyAddGroup',
+//         method: 'post',
+//         data: data
+//     })
+// }
+
+//创建群聊
+export function createGroup(data) {
+    return request({
+        url:'/createGroup',
+        method: 'post',
+        data: data
+    })
 }

src/components/GroupFriendsList.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <el-table
+                :data="friendsList"
+                style="width: 100%">
+            <el-table-column
+                    label="昵称"
+                    width="580">
+                <template slot-scope="scope">
+                    <span style="margin-left: 10px">{{ scope.row.chatName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button
+                            size="mini"
+                            type="danger"
+                            @click="handleAccept(scope.$index, scope.row)">邀请</el-button> 
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class = "footer">
+            <el-button @click="close()">取 消</el-button>
+            <el-button type="primary" @click="creatGroup()">创建群聊</el-button>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+import {loadUserFriendsPage,createGroup} from '../api/commonApi'
+    export default {
+        name: "GroupFriendsList",
+        props:['socket'],
+        data() {
+            return {
+                friendsList: [],
+                userInfo:JSON.parse(window.sessionStorage.getItem("userInfo")),
+                invitedUserIds:[],
+            }
+        },
+        created() {
+            this.loadFriends()
+        },
+        mounted() {
+        },
+        methods: {
+            creatGroup(){
+                const that = this;
+                that.invitedUserIds.push(that.userInfo.userId)
+                let createGroupParams = {userId:that.userInfo.userId,invitedUserIds:that.invitedUserIds}
+                createGroup(createGroupParams).then(res=>{
+                    if(res.code===200){
+                        that.$message.info("群聊创建成功")
+                        this.$emit('friendsDialogHide');
+                    }else {
+                        that.$message.error(res.message)
+                    }
+                })
+            },
+            handleAccept(index, row) {
+                const that = this;
+                that.invitedUserIds.push(row.userId)
+            },
+            close(){
+                this.$emit('friendsDialogHide');
+                
+            },
+            loadFriends(){
+                const that = this;
+                loadUserFriendsPage({userId:that.userInfo.userId}).then(res=>{
+                    if(res.code === 200){
+                        that.friendsList = res.data;
+                    }
+                })
+            }
+
+        },
+        watch:{
+
+        },
+    }
+</script>
+
+<style scoped>
+.footer{
+    margin-top: 20px;
+}
+
+</style>

src/views/Home.vue

@@ -17,7 +17,7 @@
        <!--  聊天对象展示-->
         <el-aside class="el-aside02" width="10vw">
             <el-row>
-                <el-col :span="20">
+                <el-col :span="18">
                     <el-input
                             width="70px"
                             maxlength="10"
@@ -27,9 +27,14 @@
                             prefix-icon="el-icon-search">
                     </el-input>
                 </el-col>
-                <el-col :span="4">
-                    <div style="text-align: center;margin-top: 9px">
-                        <i class="el-icon-circle-plus-outline"></i>
+                <el-col :span="5">
+                    <div style="text-align: center;">
+                        <!-- <i class="el-icon-circle-plus-outline"></i> -->
+                        <el-button
+                            icon="el-icon-circle-plus-outline"
+                            size="small"
+                            @click="friendsDialogShow">
+                        </el-button>
                     </div>
                 </el-col>
             </el-row>
@@ -128,6 +133,15 @@
           <FriendsUserList v-if="dialogFriendsUserList" :socket="socket"  ref="dialogFriendsUserListRef"></FriendsUserList>
       </el-dialog>
 
+      <!--创建群组框-->
+      <el-dialog title="邀请好友创建群聊"
+                 :close-on-click-modal="false"
+                 :close-on-press-escape="false"
+                 :show-close="true"
+                 :visible.sync="dialogCreateGroup" >
+          <GroupFriendsList v-if="dialogCreateGroup" @friendsDialogHide="friendsDialogHide"   ref="dialogCreateGroupRef"></GroupFriendsList>
+      </el-dialog>
+
   </div>
 
 </template>
@@ -141,14 +155,16 @@ import ManyToManyVideoFrame from "../components/ManyToManyVideoFrame";
 import {loadReceivingFriends, loadUserFriendsPage,loadMessages,loadGroupUserInfo} from '../api/commonApi'
 import {socketBaseUrl} from "../util/http";
 import {L2Dwidget} from 'live2d-widget'
+import GroupFriendsList from "../components/GroupFriendsList";
 
 export default {
   name: 'Home',
   components: {
       Single1V1VideoFrame,
       UserList,
       FriendsUserList,
-      ManyToManyVideoFrame
+      ManyToManyVideoFrame,
+      GroupFriendsList
   },
   data(){
       return{
@@ -170,6 +186,7 @@ export default {
           newFriendsNum:0,//好友申请数量
           groupUserList:[],//群用户列表
           isCreateOffer:false,//子组件是否创建offer判断
+          dialogCreateGroup: false // 创建群组对话框
       }
   },
   created() {
@@ -453,6 +470,18 @@ export default {
                   that.loadCommunicationUser()
               },2000)
           });
+          that.socket.on("newGroupNotify",function (e) {
+              console.log("newGroupNotify",e)
+              that.$notify({
+                  title:'提示',
+                  message: e.message,
+                  type:'info'
+              });
+              setTimeout(function () {
+                  that.loadNewFriends();
+                  that.loadCommunicationUser()
+              },2000)
+          });
           that.socket.on("1V1CommunicateVideo",function (e) {
               console.log("1V1CommunicateVideo",e)
               //呼叫
@@ -570,6 +599,16 @@ export default {
           that.dialogFriendsUserList = false;
           that.loadCommunicationUser();
       },
+      // 显示创建群组
+      friendsDialogShow(){
+          const that = this;
+          that.dialogCreateGroup = true;
+      },
+      friendsDialogHide(){
+          const that = this;
+          that.loadCommunicationUser()
+          that.dialogCreateGroup = false;
+      }
 
     },
     watch:{

src/views/Register.vue

@@ -21,9 +21,12 @@
         ></vue-particles>
        <div class="top" :style="{'top':topForLoginForm+'px','left':leftForLoginForm+'px'}">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-               <el-form-item label="用户名" prop="username">
+               <el-form-item label="登录名" prop="username">
                    <el-input type="input" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
+               <el-form-item label="昵称" prop="nickname">
+                   <el-input type="input" v-model="ruleForm.nickname" autocomplete="off"></el-input>
+               </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
@@ -49,6 +52,11 @@ export default {
                 return callback(new Error('用户名不能为空'));
             }
         };
+        var checkNickname = (rule, value, callback) => {
+            if (!value) {
+                return callback(new Error('昵称不能为空'));
+            }
+        };
         var validatePass = (rule, value, callback) => {
             if (value === '') {
                 callback(new Error('请输入密码'));
@@ -60,13 +68,17 @@ export default {
             ruleForm: {
                 username: '',
                 password:'',
+                nickname:''
             },
             topForLoginForm: 300,
             leftForLoginForm: 200,
             rules: {
                 username: [
                     { validator: checkUsername, trigger: 'blur' }
                 ],
+                nickname: [
+                    { validator: checkNickname, trigger: 'blur' }
+                ],
                 password: [
                     { validator: validatePass, trigger: 'blur' }
                 ]
@@ -100,7 +112,7 @@ export default {
                 this.$message.error("请输入用户名或密码")
                 return ;
             }
-            let params = {username:this.ruleForm.username,password:this.ruleForm.password};
+            let params = {username:this.ruleForm.username,password:this.ruleForm.password,nickname:this.ruleForm.nickname};
             register(params).then(res=>{
                 console.log('res',res)
                 if(res.code===200){
@@ -135,7 +147,7 @@ export default {
 .UserRegisterForm .top{
     position: fixed;
     width: 320px;
-    height: 230px;
+    height: 280px;
     padding-top: 20px;
     padding-right: 70px;
     border: 1px red solid;