style: improve

src/components/inputCell/index.scss

@@ -1,6 +1,7 @@
 .input-cell {
   position: relative;
   display: flex;
+  align-items: flex-end;
   border-bottom: 1px solid #999;
   width: 100%;
   &__label {

src/request/index.js

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2020-09-09 17:47:49
  * @LastEditors: astar
- * @LastEditTime: 2021-04-14 17:49:04
+ * @LastEditTime: 2021-04-19 17:09:39
  * @Description: 定义接口请求
  * @FilePath: \vue-chat\src\request\index.js
  */
@@ -37,3 +37,15 @@ export const getHistoryChatByCount = (data = {}) => {
 export const getGifs = (data = {}) => {
   return getRequest('/chat/searchGifs', data)
 }
+
+export const getGroups = (data = {}) => {
+  return getRequest('/group/getGroups', data)
+}
+
+export const addGroup = (data = {}) => {
+  return postRequest('/group/addGroup', data)
+}
+
+export const getHistoryChatSortByGroup = (data = {}) => {
+  return getRequest('/chat/getHistoryChatSortByGroup', data)
+}

src/views/chat/index.vue

@@ -12,6 +12,7 @@
             <s-avatar :src="item.avatar" size="large"></s-avatar>
           </li>
         </ul>
+        <button @click="showAddGroup=true">创建群聊</button>
       </aside>
       <main class="main-content">
         <header class="contact-name">
@@ -33,6 +34,9 @@
         <input-box ref="inputBox" @send="sendMessage" class="input-box"></input-box>
       </main>
     </div>
+    <s-dialog title="创建群组" v-model="showAddGroup" @confirm="addGroup" @cancel="showAddGroup=false">
+      <s-input-cell autocomplete="off" v-model="formData.groupName" placeholder="请输入群组名"></s-input-cell>
+    </s-dialog>
   </div>
 </template>
 
@@ -42,7 +46,7 @@ import { mapGetters } from 'vuex';
 import { getAuthorization } from '@/utils';
 import inputBox from './components/inputBox';
 import { removeToken } from '@/utils/token';
-import { getHistoryChatByCount } from '@/request';
+import { getGroups, getHistoryChatByCount, addGroup } from '@/request';
 import { getDpr } from '@/utils/setRem';
 import { KINDS, getSimpleMessageFromJSON } from '@/utils/editor.js';
 import message from './components/message';
@@ -55,16 +59,21 @@ export default {
       pageSize: 20,
       totalDone: false,
       socket: null, // socket
-      reConnectCount: 10,
+      reConnectCount: 5,
       reConnectId: null,
       searchPerson: '', // 搜索联系人
       onlineList: [], // 当前在线人
-      chatRecord: [] // 当前聊天记录
+      chatRecord: [], // 当前聊天记录
+      showAddGroup: false,
+      formData: {
+        groupName: ''
+      }
     }
   },
-  created () {
-    this.reConnectCount = 10;
+  async created () {
     this.initSocket();
+    // 获取用户群组
+    this.getGroups();
     this.refreshNext().then(() => {
       this.$nextTick(() => {
         if (this.$refs.box) {
@@ -76,6 +85,22 @@ export default {
     });
   },
   methods: {
+    /**
+     * 创建群组
+     * @author astar
+     * @date 2021-04-19 16:50
+     */
+    addGroup () {
+      addGroup({ groupName: this.formData.groupName.trim() }).then(res => {
+        this.getGroups();
+        this.$toast.text(res.msg);
+      }).catch(_ => {
+        console.log(_)
+      })
+    },
+    getGroups () {
+      getGroups()
+    },
     /**
      * 长按艾特@
      * @author astar

src/views/sign/comps/index.scss

@@ -11,9 +11,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 50%;
+  // height: 50%;
   // padding: 0 12px;
-  width: 300px;
+  min-width: 300px;
   background-color: #eee;
   border-radius: 4px;
   .panel-container {
@@ -28,6 +28,9 @@
         .icon-login {
           font-size: 50px;
         }
+        img {
+          width: 100px;
+        }
       }
     }
     &__btn {

src/views/sign/comps/index.vue

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-01-25 17:06:52
  * @LastEditors: astar
- * @LastEditTime: 2021-04-01 11:10:52
+ * @LastEditTime: 2021-04-19 16:38:37
  * @Description: 登录注册页面
  * @FilePath: \vue-chat\src\views\sign\comps\index.vue
 -->
@@ -17,7 +17,7 @@
         </div>
         <s-input-cell type="text" autocomplete="off" class="input__cell" v-model="formData.name" placeholder="请输入用户名" v-if="formConfig.name.show"></s-input-cell>
         <s-input-cell type="password" autocomplete="off" class="input__cell" v-model="formData.password" placeholder="请输入密码" v-if="formConfig.password.show"></s-input-cell>
-        <s-input-cell type="text" sutocomplete="off" class="input__cell" v-model="formData.captcha" placeholder="请输入验证码" v-if="formConfig.captcha.show">
+        <s-input-cell type="text" autocomplete="off" class="input__cell" v-model="formData.captcha" placeholder="请输入验证码" v-if="formConfig.captcha.show">
           <img :src="captchaImg" alt="验证码" v-throttle:click="[getCaptchaImg, 1000]">
         </s-input-cell>
       </div>