perf:聊天室获取名称

config/index.js

@@ -32,7 +32,6 @@ module.exports = {
 
       "/third-login/": {
         target: "https://yongma16.xyz/third-login/", //后端接口地址
-        ws: true, //接受websocket请求
         changeOrigin: true, //是否允许跨越
         chunkOrigins: true,
         pathRewrite: {

src/App.vue

@@ -80,18 +80,23 @@
 <!--            >&nbsp;&nbsp;在线聊天室</i-->
 <!--          >-->
           <div style="float: right; overflow: hidden;display: flex;justify-items: center;align-items:center;word-spacing: 16px;">
-            <el-avatar
-              v-if="currentUserImg"
-              :src="currentUserImg"
-            ></el-avatar>
+
             <span style="cursor: pointer;padding-right: 50px" v-if="currentUserName">
               <el-popover
                 trigger="click">
+                 <div style="display: flex;align-items: center;justify-items: center;justify-content: space-between;font-family: Arial">
                 <span @click="loginOut" style="cursor: pointer; height: 16px">注销</span>
+                 </div>
   <template slot="reference">
+    <div style="display: flex;align-items: center;justify-items: center;justify-content: space-between;font-family: Arial">
+      <el-avatar
+        v-if="currentUserImg"
+        @click="loginOut"
+        :src="currentUserImg"
+      ></el-avatar>
     <i style="font-weight: 300" v-if="currentUserImg">{{currentUserName}}</i>
     <i class="el-icon-user" style="font-weight: 300" v-else>{{currentUserName}}</i>
-
+    </div>
   </template>
 </el-popover>
 

src/components/comment/ArticleComment.vue

@@ -193,14 +193,14 @@ export default {
   position: relative;
   width: 100%;
   height: auto;
+  box-sizing: border-box;
   background: rgba(187, 168, 164, 0.8);
 }
 
 .contentClass {
   position: relative;
   width: 100%;
-  margin: 10px;
-  padding: 5px;
+  overflow: auto;
 }
 
 .postComment {

src/components/user/Login.vue

@@ -293,6 +293,7 @@ export default {
             }
         },
         submitForm (formName) {
+            localStorage.removeItem('thirdUserInfo')
             const that = this // this指向
             this.$refs[formName].validate((valid) => {
                 if (valid) {
@@ -337,6 +338,12 @@ export default {
         async registerThirdLogin () {
             const that = this
             return new Promise(async (resolve, reject) => {
+                const loading = that.$loading({
+                    lock: true,
+                    text: '登录中...',
+                    spinner: 'el-icon-loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                })
                 try {
                     const res = await that.$axios
                         .post(that.baseUrl + 'user/register/', {
@@ -357,10 +364,19 @@ export default {
                         'yma16siteUserInfo',
                         JSON.stringify(userInfo)
                     )
+                    localStorage.setItem(
+                        'thirdUserInfo',
+                        JSON.stringify({
+                            qOpenid: that.thirdLoginConfig.qOpenid,
+                            nickName: that.thirdLoginConfig.nickName
+                        })
+                    )
                     that.$router.push({ path: '/' })
+                    loading.close()
                     resolve(userInfo)
                 } catch (e) {
                     console.log('注册三方账号失败')
+                    loading.close()
                     reject(e)
                 }
             })

src/components/websocket/Onlinewebsocket.vue

@@ -125,7 +125,7 @@
 </template>
 
 <script>
-
+import store from '@/store'
 export default {
     name: 'Onlinewebsocket',
     data () {
@@ -158,8 +158,19 @@ export default {
     mounted () {
     // 判断是否登录
         this.judeIsLogin()
+        this.initUserName()
     },
     methods: {
+        initUserName () {
+            const thirdUserInfo = JSON.parse(localStorage.getItem('thirdUserInfo'))
+            const currentUsername = store.state.user.userInfo && store.state.user.userInfo.thirdUserInfo
+                ? store.state.user.userInfo.thirdUserInfo.nickname : store.state.user.userInfo.name ? store.state.user.userInfo.name : ''
+            this.user = currentUsername
+            if (thirdUserInfo && thirdUserInfo.nickName) {
+                this.user = thirdUserInfo.nickName
+            }
+            this.registerUsername()
+        },
         judeIsLogin () {
             try {
                 console.log(
@@ -407,6 +418,7 @@ export default {
             let selectNameDom = document.getElementById('selectNameId')
             console.log(selectNameDom)
             selectNameDom.style.display = 'block'
+            this.initRoom()
             // 触发减一
         }
     },

src/importElement.js

@@ -60,6 +60,7 @@ const importElementComponents = (Vue) => {
     Vue.use(Popover)
     Vue.prototype.$message = Message
     Vue.prototype.$notify = Notification
+    Vue.prototype.$loading = Loading.service
 }
 
 export default importElementComponents